/* 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;
  /* THE LIGHT MOVES (the director, 2026-11-11: "completely static; a parallax between the global light and the
     elements that turn in it"). The band at the top of a page is the one it always was, with the same values. It is
     now the first of two bands in a pattern that repeats (the second narrower and weaker), and the pattern drifts with
     the page at about a third of the scroll: --light-o, set by print.js; without the script it stands still.
     --shaft-l is the length of the 125° line across the screen; the stops are fractions of it. */
  --light-o: 0px;
  --shaft-l: calc(81.9vw + 57.4vh);
  --shaft-wall: repeating-linear-gradient(var(--shaft-geometry),
    rgba(20, 26, 38, 0.12) calc(var(--light-o) + var(--shaft-l) * 0),
    rgba(20, 26, 38, 0)    calc(var(--light-o) + var(--shaft-l) * 0.22),
    rgba(255, 255, 255, 0.30) calc(var(--light-o) + var(--shaft-l) * 0.30),
    rgba(255, 255, 255, 0.30) calc(var(--light-o) + var(--shaft-l) * 0.56),
    rgba(20, 26, 38, 0.12) calc(var(--light-o) + var(--shaft-l) * 0.68),
    rgba(20, 26, 38, 0.13) calc(var(--light-o) + var(--shaft-l) * 1.00),
    rgba(20, 26, 38, 0)    calc(var(--light-o) + var(--shaft-l) * 1.10),
    rgba(255, 255, 255, 0.22) calc(var(--light-o) + var(--shaft-l) * 1.17),
    rgba(255, 255, 255, 0.22) calc(var(--light-o) + var(--shaft-l) * 1.32),
    rgba(20, 26, 38, 0.10) calc(var(--light-o) + var(--shaft-l) * 1.42),
    rgba(20, 26, 38, 0.12) calc(var(--light-o) + var(--shaft-l) * 1.70));
  --shaft-paper: repeating-linear-gradient(var(--shaft-geometry),
    rgba(20, 26, 38, 0.05)  calc(var(--light-o) + var(--shaft-l) * 0),
    rgba(20, 26, 38, 0)     calc(var(--light-o) + var(--shaft-l) * 0.22),
    rgba(255, 255, 255, 0.42) calc(var(--light-o) + var(--shaft-l) * 0.30),
    rgba(255, 255, 255, 0.42) calc(var(--light-o) + var(--shaft-l) * 0.56),
    rgba(20, 26, 38, 0.055) calc(var(--light-o) + var(--shaft-l) * 0.68),
    rgba(20, 26, 38, 0.06)  calc(var(--light-o) + var(--shaft-l) * 1.00),
    rgba(20, 26, 38, 0)     calc(var(--light-o) + var(--shaft-l) * 1.10),
    rgba(255, 255, 255, 0.30) calc(var(--light-o) + var(--shaft-l) * 1.17),
    rgba(255, 255, 255, 0.30) calc(var(--light-o) + var(--shaft-l) * 1.32),
    rgba(20, 26, 38, 0.045) calc(var(--light-o) + var(--shaft-l) * 1.42),
    rgba(20, 26, 38, 0.05)  calc(var(--light-o) + var(--shaft-l) * 1.70));
  --shaft-dark: repeating-linear-gradient(var(--shaft-geometry),
    rgba(255, 255, 255, 0)     calc(var(--light-o) + var(--shaft-l) * 0.22),
    rgba(255, 255, 255, 0.035) calc(var(--light-o) + var(--shaft-l) * 0.30),
    rgba(255, 255, 255, 0.035) calc(var(--light-o) + var(--shaft-l) * 0.56),
    rgba(255, 255, 255, 0)     calc(var(--light-o) + var(--shaft-l) * 0.68),
    rgba(255, 255, 255, 0)     calc(var(--light-o) + var(--shaft-l) * 1.10),
    rgba(255, 255, 255, 0.025) calc(var(--light-o) + var(--shaft-l) * 1.17),
    rgba(255, 255, 255, 0.025) calc(var(--light-o) + var(--shaft-l) * 1.32),
    rgba(255, 255, 255, 0)     calc(var(--light-o) + var(--shaft-l) * 1.42),
    rgba(255, 255, 255, 0)     calc(var(--light-o) + var(--shaft-l) * 1.92));
}

/* 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);
  /* the print: a photographed sheet of cotton rag lies UNDER the system's three layers, as a fourth. A component that
     sets its own background-image keeps the first layers' sizes and blends exactly as before and simply has no rag. */
  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%),
    url("textures/paper-rag.jpg");
  background-size: var(--grain-size), auto, auto, 320px;
  background-blend-mode: overlay, normal, normal, multiply;
  background-attachment: scroll, fixed, scroll, 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), #201F1D 0%, var(--paper-dark) 60%, var(--card-dark) 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%),
    url("textures/paper-rag.jpg");
  background-size: var(--grain-size), auto, auto, 320px;
  background-position: 0 0, 0 0, 0 0, -130px -210px;
  background-blend-mode: overlay, normal, normal, multiply;
  background-attachment: scroll, fixed, scroll, 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), #1B1A18 0%, var(--card-dark) 70%, #0B0A09 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);
}

/* ——— THE PRINT ——— (the director, 2026-11-11; tried in design/v-system-print)
   The page is printed paper, not a screen:
   · the stock is in tokens.css, the photographed paper in the rules above;
   · THE INK: every element that holds words and nothing else is marked .ink by print.js and passes through
     #print-ink: the edge follows the fibre, the ink spreads a little, its density varies. It is still text.
   What the print never touches (the director, 2026-11-11, after seeing it on the pages): PICTURES, small and medium
   ones above all, and DRAWINGS. Nothing lies over a picture: no lens, no grain, no ink, no paper. There is no layer
   over the page at all, and the scroll is the browser's own. A graph, a dial or a strip of frames is drawn exactly
   as the system draws it.
   · where a section builds and moves a great many elements (the World's wall) there is no ink and no rag paper;
   · the paper reveal (.pr) keeps the stock it was photographed with and takes no ink: its live sheet has to be the
     photograph's print at the hand-over.
   Without print.js the page has the stock and the paper and nothing else. html.print-off (?print=off) turns the ink
   and the moving light off for a review. @media print turns the ink off. */
html:not(.print-off) .ink { filter: url(#print-ink); }
html:not(.print-off) :is(.wte, [data-print-rest], .pr) .ink { filter: none; }
:is(.wte, [data-print-rest]) .paper-board-light {
  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%);
}
:is(.wte, [data-print-rest]) .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%);
}
.pr {
  --paper-board: #F2F3F6; --paper-card: #F9FAFD; --paper-tint: #E8EBF3; --paper-dark: #0B0A0A; --card-dark: #05090B;
  --datum-red: #C41622; --timeline-red: #E9453F; --laser-red-dark: #A42C2D;
  --ink-primary: #161717; --ink-secondary: #686C73; --ink-on-dark: #ECEFF4;
  --hairline-light: #D2D6DF; --mark: rgba(22, 23, 23, 0.34);
}
.pr .paper-board-light {
  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%);
}
.pr .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%);
}
@media print { .ink { filter: none !important; } }