/* truemanity studio — THE PAPER RULE (visual-bible.md §3) + THE ROOM LIGHT
   Wherever a frame, panel, card or interface container appears inside the viewport, it is zero-glare matte paper.
   APPLY TO: GalleryBoard, StoryCard, IndexCard, SpecTable, the control strip under PaperVideoPlayer.
   NEVER APPLY TO: <video>, FILM-xx / PAIR-xx / BLENDER-xx / KEY-xx pictures. Those sit flush in a 1px .film-aperture
   with no grain, light or gradient on top. Grain and light are BACKGROUND layers, so they can never reach a picture. */

/* Grain — NEW-03 tiles: 512×512 16-bit grey, seamless, centred on mid-grey. Drawn at 256px (fine, print-like)
   and blended with OVERLAY onto the layers beneath, so it reads on light and dark paper alike.
   It is a BACKGROUND layer: it can never reach a picture. */
:root {
  --grain-paper: url("textures/grain-paper-k035.png");   /* NEW-03 grain-paper.png (a horizontal rag fibre), contrast ×0.35 around mid-grey */
  --grain-wall: url("textures/grain-wall-k018.png");     /* NEW-03 grain-wall.png (isotropic), contrast ×0.18 */
  --grain-paper-dark: var(--grain-paper);
  --grain-size: 192px;
}

/* ——— THE ROOM LIGHT ———
   One window, top left, outside the frame. Everything answers to it:
   · the SHAFT — one diagonal band of daylight (REF-12) — is a fixed background layer on the wall AND on every board
     and card, so it crosses wall and paper in one continuous band and never touches a picture;
   · each board's own falloff (--ga angle, --lit strength) and its cast shadow (--shadow-live) are set per element by
     light.js from the element's position relative to the window. Without JS the static shadow tokens apply.
   Replace the CSS shaft with the NEW-04 Blender light plate when it exists (real window falloff and mullion softness). */
:root {
  --shaft-geometry: 125deg;
  --shaft-wall: linear-gradient(var(--shaft-geometry),
    rgba(20, 26, 38, 0.12) 0%, rgba(20, 26, 38, 0) 22%,
    rgba(255, 255, 255, 0.30) 30%, rgba(255, 255, 255, 0.30) 56%,
    rgba(20, 26, 38, 0.12) 68%, rgba(20, 26, 38, 0.13) 100%);
  --shaft-paper: linear-gradient(var(--shaft-geometry),
    rgba(20, 26, 38, 0.05) 0%, rgba(20, 26, 38, 0) 22%,
    rgba(255, 255, 255, 0.42) 30%, rgba(255, 255, 255, 0.42) 56%,
    rgba(20, 26, 38, 0.055) 68%, rgba(20, 26, 38, 0.06) 100%);
  --shaft-dark: linear-gradient(var(--shaft-geometry),
    rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, 0.035) 30%, rgba(255, 255, 255, 0.035) 56%, rgba(0, 0, 0, 0) 68%);
}

/* 1. Outer gallery wall — the shaft is fixed to the viewport (the room you stand in) */
.gallery-wall {
  background-color: var(--wall-ambient);
  background-image: var(--grain-wall), var(--shaft-wall);
  background-size: var(--grain-size), auto;
  background-blend-mode: overlay, normal;
  background-attachment: scroll, fixed;
}

/* 1b. The dark room below the horizon cut (REF-11) — the same window, much weaker */
.gallery-wall-dark {
  background-color: var(--wall-dark);
  background-image: var(--grain-wall), var(--shaft-dark), linear-gradient(125deg, #1B1F24 0%, var(--wall-dark) 45%, #14171B 100%);
  background-size: var(--grain-size), auto, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: scroll, fixed, scroll;
}

/* 2. Mounted paper board — LIGHT (REF-03, REF-04, REF-06, REF-07)
   layers: grain · the room's shaft (fixed) · the board's own falloff, turned toward the window (--ga, --lit) */
.paper-board-light {
  position: relative;
  background-color: var(--paper-board);
  background-image:
    var(--grain-paper),
    var(--shaft-paper),
    linear-gradient(var(--ga, 135deg), rgba(255, 255, 255, var(--lit, 0.55)) 0%, rgba(255, 255, 255, 0) 55%, rgba(30, 45, 80, 0.045) 100%);
  background-size: var(--grain-size), auto, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: scroll, fixed, scroll;
  color: var(--ink-primary);
  border-radius: 0;
  box-shadow: var(--shadow-live, var(--shadow-board-light));
}

/* 3. Mounted paper board — DARK MONOLITH (REF-09, REF-11 bottom) */
.paper-board-dark {
  position: relative;
  background-color: var(--paper-dark);
  background-image:
    var(--grain-paper-dark),
    var(--shaft-dark),
    linear-gradient(var(--ga, 160deg), #141517 0%, #0B0A0A 60%, #05090B 100%);
  background-size: var(--grain-size), auto, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: scroll, fixed, scroll;
  color: var(--ink-on-dark);
  border-radius: 0;
  box-shadow: var(--shadow-live, var(--shadow-board-dark));
}

/* 4. Clean 21:9 aperture for film stills and video — the picture plays completely clean */
.film-aperture {
  aspect-ratio: 2.39 / 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  outline: 1px solid var(--hairline-light);
  background: #0B0A0A; /* letterbox only while a picture loads */
}
.paper-board-dark .film-aperture { outline-color: var(--hairline-dark); }
.film-aperture > img, .film-aperture > picture > img,
.film-aperture > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The film's stills in media/hq/ come from the upscaled final cut, its subtitles burnt in: all of FILM-01…15 but
   FILM-10 and FILM-12 (and the bottom of PAIR-01 / SYS-01). The picture is scaled 1.2× from its upper third so the
   subtitle band (87–92 % of the height) falls outside the aperture — any picture inside one, the DatumWipe's layers
   too. Never burn or show captions on a board. */
.film-aperture img.is-captioned { transform: scale(1.2); transform-origin: 50% 20%; }

/* Elevated paper on a board (StoryCard, IndexCard, museum label) — a thinner, tighter mount, same light */
.paper-card {
  position: relative;
  background-color: var(--paper-card);
  background-image:
    var(--grain-paper),
    var(--shaft-paper),
    linear-gradient(var(--ga, 135deg), rgba(255, 255, 255, var(--lit, 0.7)) 0%, rgba(255, 255, 255, 0) 60%, rgba(30, 45, 80, 0.035) 100%);
  background-size: var(--grain-size), auto, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: scroll, fixed, scroll;
  color: var(--ink-primary);
  border-radius: 0;
  box-shadow: var(--shadow-live, var(--shadow-card));
}
.paper-card-dark {
  position: relative;
  background-color: var(--card-dark);
  background-image:
    var(--grain-paper-dark),
    var(--shaft-dark),
    linear-gradient(var(--ga, 155deg), #0D1014 0%, #05090B 70%, #020304 100%);
  background-size: var(--grain-size), auto, auto;
  background-blend-mode: overlay, normal, normal;
  background-attachment: scroll, fixed, scroll;
  color: var(--ink-on-dark);
  border-radius: 0;
  box-shadow: var(--shadow-live, var(--shadow-card-dark));
}

/* Touch browsers ignore fixed backgrounds; there the shaft rides with each board instead of the room. */
@media (hover: none) {
  .gallery-wall { background-attachment: scroll, scroll; }
}

/* Review switch: html[data-light="off"] shows the room without the window (light.js off()) */
html[data-light="off"] {
  --shaft-wall: linear-gradient(transparent, transparent);
  --shaft-paper: linear-gradient(transparent, transparent);
  --shaft-dark: linear-gradient(transparent, transparent);
}