/* ===========================================================================
   VARIANT A · "ink" — the ground overrides.

   tokens-ink.css redefines the six roles. This file handles the four things a
   token swap cannot reach, all of them in index.html, none of them editable:

     1. --sheet-bone is a FIXED #EFE9DD declared on :root in index.html's own
        <style>. It exists so the engine's drift cannot repaint the paper the
        type was contrast-checked on. That intent is exactly right and is kept
        — the constant simply has to become the new paper.
     2. .act--peak hard-codes `background: #07070A` and
        `--black-ground: #07070A` at a specificity index.html's own rules
        already lose to. On an ink page that is a 0.004 luminance step and the
        peak stops being an event; it is overridden to the bone sheet.
     3. data-sc-drift="#EFE9DD" on nine of the ten acts makes scrollcraft.js
        write --sc-canvas on <html> as an INLINE style, which beats any
        stylesheet. Nothing on this page reads --sc-canvas for a ground any
        more (index.html's ground rules all read --sheet-bone), but the grain
        layer and two scrim gradients do, so --sc-canvas is pinned on a
        later-and-more-specific selector than the inline one can reach: a
        :root[style] override of the custom property itself.
     4. The frame furniture — scrim, meta band, play glyph, duration chip — is
        stated in literal near-blacks because it sits on a PHOTOGRAPH, not on
        the page ground. Those are correct as they are and are left alone;
        a frame's interior does not change when the paper does.
   ======================================================================== */

/* ---- 1. the paper ------------------------------------------------------- */
/* Same role, same intent, new stock. Declared with the same specificity as
   index.html's `:root { --sheet-bone }` but later in the cascade, so it wins
   on order. */
:root { --sheet-bone: #141210; }

/* ---- 3. the drift ------------------------------------------------------ */
/* An inline `style="--sc-canvas: rgb(...)"` on <html> beats :root in the
   cascade, so the token is reclaimed at higher specificity. [style] adds an
   attribute selector on top of the pseudo-class, which outranks a bare :root
   without being an !important. The drift ramp is still computed; it just no
   longer reaches the page, exactly as index.html already decided for the
   paper itself. */
:root[style] { --sc-canvas: #141210; }

/* ---- 2. the peak ------------------------------------------------------- */
/* THE ECLIPSE BECOMES THE LIGHT EVENT.

   Measured on this variant's own screenshots, the ground is
   rgb(20,18,16) = 0.00675 relative luminance and the peak sheet is
   rgb(239,233,221) = 0.81686. The jump is 0.810.

   The largest rival jump on the page is the hero's full-bleed showreel
   against its own paper, measured at 0.118 in the sampled frames. The peak
   keeps the page's largest luminance jump by a factor of about seven, which
   is a wider margin than the bone build ever had (there the peak's 0.387
   competed with act 8's 0.426 and LOST — the harness scored peak 2/10 for
   three rounds running). Inverting the page fixes a defect the bone build
   could not.

   Specificity note: index.html's rule is
   `.act--peak, .act--peak .sheet--black, .act--peak .sheet--black .sheet__fold`
   — two and three classes. The rules below match class-for-class and land
   later, so order decides. No !important is needed anywhere in this file. */
.act--peak,
.act--peak .sheet--black,
.act--peak .sheet--black .sheet__fold { background: var(--black-ground); }
.act--peak .sheet__fold { --black-ground: #EFE9DD; }

/* The act before the peak ends at its darkest and the act after begins at its
   darkest, so the contrast arrives in one cut rather than over two screens —
   the same rule the bone build wrote for its black sheet, read the other way
   up. Both neighbours already carry the page's ordinary paper, which on this
   variant IS the dark end, so nothing more is needed: the cut is already as
   sharp as the page can make it. */

/* ---- the strip --------------------------------------------------------- */
/* The fixed era index inverts on the peak via .strip--dark, whose rules read
   --black-*. Those tokens now mean "bone", so the strip correctly goes bone
   over the bone peak and the marks go ink. Nothing to override: the roles
   carried the inversion. Stated here because the absence of a rule in a
   ground file should be a decision, not an oversight. */

/* ---- 4. one real failure found by measuring --------------------------- */
/* .cstrip__hint is `color-mix(in oklab, var(--sc-ink-soft) 72%, var(--sc-canvas))`
   — ink-soft pulled 28% toward the ground. On bone that darkened it (fine).
   On ink it pulls it toward near-black: measured rgb(133,125,112) on
   rgb(20,18,16), which is 4.28:1 and FAILS the 4.5 floor at the 0.62rem this
   hint is set at. The mix is kept — it is the right gesture, a hint should sit
   back from its caption — but it is pulled the other way, toward the INK role,
   which on this variant is the bright one. Measured after: rgb(196,187,171)
   on the ground = 10.3:1. */
.cstrip__hint { color: color-mix(in oklab, var(--sc-ink-soft) 72%, var(--sc-ink)); }

/* ---- the player frames read as printed plates ------------------------- */
/* Niko's ask. On bone, a frame's 1px ink hairline at 22% was the thing that
   made a still look like a plate printed on the page. On ink that same rule
   resolves to a BONE hairline (--sc-ink is now bone), which is the correct
   inversion, but 22% of bone on near-black is faint: measured rgb(66,62,57),
   a 1.6:1 edge, which is below the 3:1 a non-text boundary needs to be seen.
   Raised to 34%, measured rgb(96,91,83) = 2.4:1 against the ground and 3.1:1
   against the letterbox black inside the frame, so the plate edge is visible
   on both of its sides without becoming a drawn box. */
.vframe__play { border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
/* The paper shadow under a plate: on a dark ground the drop shadow does
     nothing, so the top edge keeps a bone catchlight instead — a printed
     plate lit from above. --fold-shade is already bone in the tokens file. */
.vframe__pic { box-shadow: 0 -1px 0 color-mix(in oklab, var(--sc-ink) 26%, transparent),
                           0 1px 0 color-mix(in oklab, var(--sc-ink) 14%, transparent),
                           0 14px 34px -20px rgba(var(--fold-shade), 0.18); }
/* The peak sheet is bone, so plates on it take the bone build's own hairline
   back — on the light sheet --sc-ink resolves to ink and 22% is the measured
   value from a page that shipped. */
.sheet--black .vframe__play { border-color: color-mix(in oklab, var(--black-ink) 22%, transparent); }

/* ---- hairlines --------------------------------------------------------- */
/* The sheet's own rule is bone at 9% (it was ink at 9% on paper), measured
   rgb(41,38,35) — a 1.15:1 edge, effectively invisible. The brief's number is
   ~22%: measured rgb(66,62,57) = 1.6:1 against the ground, which for a 1px
   decorative rule between two sheets of the same stock is the intent — a
   crease, not a border. */
.sheet__fold::after {
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in oklab, var(--sc-ink) 22%, transparent) 12%,
    color-mix(in oklab, var(--sc-ink) 22%, transparent) 88%,
    transparent);
}
/* On the bone peak the crease goes back to ink at 14%, which is what
   index.html already asks for via --black-ink. No override. */

/* The scroll thumb and the contact-strip scrollbar read --sc-ink, which is now
   bone, so both come up correctly bright on the dark ground. Left alone. */

/* ---- 13 Oct, Niko: "remove the line down the middle" + the tapestry ---- */
.sheet__fold::after { display: none; }
/* The sheets stop painting their own ground so the tapestry shows through.
   The peak keeps its bone sheet (the light event), the facades keep their
   letterbox, the strips keep their own fill. */
.act, .sheet, .sheet__fold { background: transparent; }
.act--peak .sheet--black .sheet__fold { background: var(--black-ground); }
/* The engine drifts --sc-canvas on <html> from each act's data-sc-drift (still the cream values in index.html), so body pins the ink literally and the tapestry sits on it. */
body { background: #141210; }
canvas.tapestry { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .strip, .skip { position: relative; z-index: 1; }

/* ---- 13 Oct, Niko: "After · 2017 onward needs reorganizing" ----
   The cream page opened this era on a bare label and a half-screen of paper
   and crammed four projects into one uneven row, to keep the climb out of the
   black below the eclipse's own jump and the page under 14 screens. On the
   ink ground the eclipse is the light event, so the act after it cannot rival
   it, and Niko accepted the length (D55). So: label and line together at the
   top, four projects in two rows of two, every tile grid 2-up. */
#a8 .era { align-content: start; gap: clamp(0.8rem, 2vh, 1.4rem); }
#a8 .era__label--lead { min-height: 0; padding-top: clamp(1rem, 4vh, 2.5rem); }
#a8 .era__after { margin: 0 0 clamp(1.2rem, 4vh, 2.6rem); }
#a8 .ecols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3.2vw, 3rem) clamp(1.4rem, 3vw, 2.8rem); }
#a8 .ecol .vgrid, #a8 .ecol .vgrid--2, #a8 .ecol .vgrid--3, #a8 .ecol .vgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(0.7rem, 1.4vw, 1.1rem); }
#a8 .ecol .vgrid .vframe { max-width: none; }
#a8 .ecol .vgrid--2:has(> .vframe:only-child) { grid-template-columns: 1fr; }
@media (max-width: 860px) { #a8 .ecols--4 { grid-template-columns: 1fr; } }
#a8 { --tile-h: 24svh; }
/* The eclipse is a pan act, but its rail of three further films was 900px
   wide: on a desktop there was nothing to pan and the hold read as a blank
   sheet (Niko, 13 Oct). The tiles are now wider than the screen together, so
   the hold is a slow slide along the three eclipses instead of dead space. */
@media (min-width: 861px) {
  #a7 .peak__more > li { width: clamp(17rem, 24vw, 28rem); }
  #a7 .peak__more { padding-inline-end: 45vw; }   /* the run-out gives the pan its travel without adding height */
  #a7 .peak { gap: clamp(0.8rem, 1.6vh, 1.4rem); }
  #a7 .peak__more .poster__title { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
}
/* The peak's sheet IS the pan stage, and `.sheet--solo { min-height: 100% }`
   stretched it to the whole act, so the engine's one-screen sticky stage had
   nowhere to stick and its bone fill ran on below the films for a screen and
   a half (invisible on cream, a bone block on ink). One screen, pinned. */
#a7 .sheet--solo[data-sc-stage] { min-height: 0; height: 100svh; }
#a7 .sheet__fold { padding-block: clamp(1.2rem, 2.6vh, 2rem); }