/* src/film/film.css -> /film/film.css and /film/critical.css (both emitted by src/film/vite.config.mjs). The film's CSS for real
   pages. Blocks between the markers "@critical" and "@end" are the layout-reserving, first-paint rules: the build also writes
   them alone to /film/critical.css, which a page INLINES in its <head> (main's build.mjs at integration; the /lab/film/ demos do
   the same), then loads the whole film.css non-blocking (media="print" + a flip script) - no render-blocking film CSS.
   Every colour, duration and easing is a design token (design/tokens.css) by name; nothing here defines a font-face.

   1B-1 loader: .film-runway > figure.film-host[data-film] > .film-stage (+ .film-ctl, .film-text)
   1B-2 spine:  .rp-evap-canvas (all tiers: the GPU sprites in CINEMA, one 2D canvas in STANDARD / PRINT), .rp-evap-label
   1B-3 dive:   .dive > .dive-stage (sticky) + .dive-track (.dive-beat runways, .dive-card parchment cards)
   1B-4 accord: .accord-* ; 1B-5 ghost: .ghost-*                                                                                  */

/* ---------------------------------------------------------------- 1B-1 the opening ---------------------------------------------------------------- */
/* @critical */
.film-runway{position:relative;height:200vh;height:200svh}
.film-runway.is-still{height:auto}
.film-host{
  --film-ground:var(--rp-color-ground-emblem-black);--film-ink:var(--rp-color-brass-gold-soft);--film-ink-2:var(--rp-color-brass-gold);--film-rule:var(--rp-color-brass-gold);
  position:sticky;top:0;margin:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--film-ground);
}
.film-host[data-twin="parchment"],.film-host[data-twin-ground="parchment"]{--film-ground:var(--rp-color-ground-parchment);--film-ink:var(--rp-color-ink-sepia);--film-ink-2:var(--rp-color-ink-sepia-2);--film-rule:var(--rp-color-ink-sepia-2)}
.film-runway.is-still .film-host{position:relative;height:auto;min-height:0;padding:var(--rp-space-scale-8) 0;display:block}
.film-stage{position:relative;width:min(100vw,calc(100svh * var(--film-aspect,1.7778)));aspect-ratio:var(--film-aspect,16 / 9);container-type:inline-size;background:var(--film-ground)}
@supports not (height:1svh){.film-stage{width:min(100vw,calc(100vh * var(--film-aspect,1.7778)))}}
/* Home opening sizing (owner, 2026-09-27, revised).
   DESKTOP (a fine pointer, >= 1024 px): condensed and framed. Centred; width = the smallest of 1280 px, 1.25 x the film's real width
   (--film-px-w, set by the loader from the manifest: 960 px today -> 1200 px) and what keeps the whole frame, so the whole ring
   and rose, inside the window below the top bar. Its edges fade softly into the page's dark ground (no hard bars).
   PHONES AND TABLETS: unchanged. On a screen wider than 16:9 the stage fills the width and the crop is centred. */
@media (min-aspect-ratio:16/9) and (not ((min-width:1024px) and (pointer:fine))){.film-runway:not(.is-still) .film-stage{width:100vw;margin-top:calc((100svh - 100vw / var(--film-aspect,1.7778)) / 2);align-self:start}}
@media (min-width:1024px) and (pointer:fine){
  .film-runway:not(.is-still) .film-stage{
    width:min(1280px,calc(var(--film-px-w,960px) * 1.25),calc((100svh - 8rem) * var(--film-aspect,1.7778)));margin:0 auto;align-self:center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
}
@media (orientation:portrait) and (max-width:899px){.film-host{--film-aspect:var(--film-aspect-portrait,1.7778)}
  /* round 6: the S1 runway on a portrait phone - ONE 4:5 frame for the poster, the film and the twin: the 16:9 frames fitted so the
     whole ring shows (its 0.89-of-height diameter at 94 % of the box width: fit .84 of the stage height, 1.867 x its width), their
     top and bottom edges fading into the film's own dark ground; the loader then plays the 16:9 set, not the cropped portrait cut */
  .film-runway .film-host{--film-fit:.84;--film-fitx:1.8667}
  .film-runway .film-host .film-poster,.film-runway .film-host .film-frames{inset:auto;left:50%;top:50%;width:auto;max-width:none;height:84%;aspect-ratio:16 / 9;translate:-50% -50%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}}
.film-poster,.film-frames{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-frames{opacity:0;transition:opacity .9s var(--rp-motion-easing-standard,ease)}   /* owner 2026-09-28: the engraved poster crossfades into the film instead of cutting */
@media (prefers-reduced-motion:reduce){.film-frames{transition:none}}
.film-frames.is-on{opacity:1}
.film-drop{position:absolute;left:clamp(4%,(.5 + (var(--rp-drop-x,.5) - .5) * var(--film-fitx,1)) * 100%,96%);top:calc((.5 + (var(--rp-drop-y,.5) - .5) * var(--film-fit,1)) * 100%);width:clamp(10px,2.2cqi,22px);aspect-ratio:3 / 4;transform:translate(-50%,-50%);pointer-events:none}
.film-wordmark{
  /* ring numbers are fractions of the FRAME; --film-fit / --film-fitx (round 6: portrait phones show the frame fitted, not cropped) map them
     onto the stage - 1 everywhere else, so the formulas reduce to round 1's */
  position:absolute;margin:0;left:calc((.5 + (var(--rp-ring-cx,.5) - .5) * var(--film-fitx,1)) * 100%);top:calc((.5 + (var(--rp-ring-cy,.5) - .5) * var(--film-fit,1) + var(--rp-ring-d,.9) * var(--film-fit,1) * .07) * 100%);
  font-size:var(--rp-wm-size,calc(var(--rp-ring-d,.9) * var(--film-fit,1) * .78 * 100cqi / var(--film-aspect,1.7778) / 4.35));display:flex;flex-direction:column;align-items:stretch;transform:translate(-50%,-.74em);
  color:var(--film-ink);font-family:var(--rp-type-family-display);font-weight:900;line-height:1;text-align:center;white-space:nowrap;
  text-shadow:0 0 .04em var(--film-ground),0 0 .22em rgba(5,1,0,.55),0 0 .5em rgba(5,1,0,.28);   /* the engraver's clearance: the letters keep their own ground */
  animation:film-wm-reveal 1ms linear 1.5s both;
}
@keyframes film-wm-reveal{from{opacity:0}to{opacity:1}}   /* opacity, not visibility: the h1 stays in the accessibility tree while the film plays (round 4, axe page-has-heading-one) */
.film-wordmark .wm-a{display:block;font-size:1em;line-height:.74;letter-spacing:.012em;text-transform:uppercase;font-variation-settings:'wght' 900}
.film-wordmark .wm-b{display:flex;align-items:center;gap:.9em;margin-top:1em;color:var(--film-ink-2);font-size:max(11px,.16em);letter-spacing:.67em;font-weight:500;text-transform:uppercase;line-height:1}
.film-wordmark .wm-b i{flex:1 1 0;height:1px;background:var(--film-rule);opacity:.85}
.film-wordmark .wm-b i:last-child{margin-left:-.67em}
.film-wordmark.is-pending{opacity:0;animation:none}
.film-ctl{position:absolute;right:var(--rp-space-container-padding);bottom:var(--rp-space-scale-6);margin:0;z-index:2}
/* lane 16 (Fable vision check, 2026-09-30): on a phone a route masthead's plate label (.rp-mast-label, build.mjs: bottom-left) runs
   under the film's SKIP control at the bottom-right; the control moves to the stage's top-right corner there, the label keeps its place */
@media (max-width:599px){.film-host[data-film="masthead"] .film-ctl{bottom:auto;top:var(--rp-space-scale-3)}}
.film-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.film-host.is-still .film-text{position:static!important;width:auto;height:auto;margin:var(--rp-space-scale-4) auto 0;clip-path:none;white-space:normal;max-width:min(62ch,calc(100vw - 2 * var(--rp-space-container-padding)));font:400 var(--rp-type-scale-small)/1.6 var(--rp-type-family-body);color:var(--rp-color-ink-muted)}
.film-host.is-still .film-wordmark{animation:none;opacity:1}
.film-host.is-still .film-stage{margin:0 auto}
html.film-pinned [data-film-header-wordmark]{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  .film-runway{height:auto}
  .film-host{position:relative;height:auto;padding:var(--rp-space-scale-8) 0;display:block}
  .film-stage{margin:0 auto}
  .film-drop,.film-skip{display:none}
  .film-wordmark{animation:none;opacity:1}
  .film-text{position:static!important;width:auto;height:auto;margin:var(--rp-space-scale-4) auto 0;clip-path:none;white-space:normal;max-width:min(62ch,calc(100vw - 2 * var(--rp-space-container-padding)));font:400 var(--rp-type-scale-small)/1.6 var(--rp-type-family-body);color:var(--rp-color-ink-muted)}
}
/* @end */

/* the drop: its size is the bytes received / the manifest total (--p, set by loader.mjs); nothing is simulated */
.film-drop i{
  display:block;width:100%;height:100%;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 35% 62%,var(--rp-color-brass-ring-highlight) 0 14%,var(--rp-color-brass-amber) 36%,var(--rp-color-brass-amber-deep) 72%,var(--rp-color-brass-ring-shadow) 100%);
  box-shadow:0 0 0 1px var(--rp-color-brass-hairline);transform-origin:50% 20%;transform:scale(calc(.18 + var(--p,0) * .82));
  transition:transform var(--rp-motion-duration-fast) var(--rp-motion-easing-volatility-base);
}
.film-wordmark:focus{outline:none}
.film-wordmark:focus-visible{outline:2px solid var(--rp-color-brass-gold);outline-offset:6px}
.film-wordmark.is-engraved{animation:film-engrave var(--rp-motion-duration-slow) var(--rp-motion-easing-standard) both}
.film-wordmark.is-instant{animation:none}
@keyframes film-engrave{from{clip-path:inset(-1em 100% -1em -1em);opacity:.4}to{clip-path:inset(-1em -1em -1em -1em);opacity:1}}   /* the end state no longer clips the letters' soft glow to the h1 box (it read as a dark rectangle, owner 2026-09-27) */   /* the burin's cut, left to right (1B-10 refines it) */
.film-skip{
  appearance:none;border:0;border-bottom:1px solid var(--rp-color-brass-hairline);background:none;padding:.5em .1em;cursor:pointer;
  font:500 var(--rp-type-scale-label)/1 var(--rp-type-family-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rp-color-ink-muted);
  transition:color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard),border-color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard);
}
.film-host[data-twin-ground="parchment"] .film-skip{color:var(--rp-color-ink-sepia-2);border-bottom-color:var(--rp-color-ink-sepia-2)}
.film-skip:hover{color:var(--rp-color-ink-cream);border-bottom-color:var(--rp-color-brass-gold)}
.film-skip:focus-visible{outline:2px solid var(--rp-color-brass-gold);outline-offset:2px}
.film-skip:active{transform:translateY(1px)}

/* ---------------------------------------------------------------- 1B-2 the spine ---------------------------------------------------------------- */
/* one fixed canvas in every tier (GPU sprites in CINEMA, 2D in STANDARD/PRINT): no DOM per sprite, no CSS animation, no style
   recalc (perf review, staging-3). Stacking: --rp-evap-z (default 0 = behind positioned content with z-index >= 1; a page sets
   2 to float the sprites over opaque section grounds - then the sprites must sit outside text columns, see spine-demo.css) */
/* @critical */
.rp-evap-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--rp-evap-z,0);display:block}
/* @end */
.rp-evap-label{margin:0;font:500 var(--rp-type-scale-label)/1.4 var(--rp-type-family-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-color-ink-muted)}
/* round 4, the real pages: the sprites live in the GUTTERS beside the content column, above the section grounds (which are
   opaque) and never over the text - a mask clears the central column (--rp-evap-clear = half its width, the container's 1360 px
   by default); the spine draws only where a gutter exists (data-spine-min-width on the host) and hides while the S1 opening is
   pinned. The honest label rides in the left gutter beside them (aria-hidden: the footer carries the same words as text). */
/* @critical */
.rp-evap-canvas.is-gutters{z-index:2;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(50% - var(--rp-evap-clear,680px) - 2rem),transparent calc(50% - var(--rp-evap-clear,680px)),transparent calc(50% + var(--rp-evap-clear,680px)),#000 calc(50% + var(--rp-evap-clear,680px) + 2rem));mask-image:linear-gradient(to right,#000 0,#000 calc(50% - var(--rp-evap-clear,680px) - 2rem),transparent calc(50% - var(--rp-evap-clear,680px)),transparent calc(50% + var(--rp-evap-clear,680px)),#000 calc(50% + var(--rp-evap-clear,680px) + 2rem))}
.rp-evap-float{position:fixed;left:.9rem;bottom:.9rem;z-index:2;margin:0;max-width:calc(50vw - var(--rp-evap-clear,680px) - 1.8rem);font:500 .62rem/1.35 var(--rp-type-family-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-color-ink-muted);pointer-events:none}
html.film-pinned .rp-evap-canvas,html.film-pinned .rp-evap-float{visibility:hidden}
/* @end */

/* ---------------------------------------------------------------- 1B-3 the dive ---------------------------------------------------------------- */
/* @critical */
.dive{position:relative}
.dive-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--rp-color-ground-emblem-black)}
.dive-frame{position:relative;width:min(100vw,calc(100svh * var(--dive-aspect,1.7778)));aspect-ratio:var(--dive-aspect,16 / 9)}
/* Lane 21 (item 17, decided on Opus - recheck on Fable): on a portrait phone the 16:9 frame was a 390 x 219 band in a black screen; a square
   centre crop of the same frames (object-fit: cover) fills 390 x 390. The stills and the PRINT edition keep 16:9 (only the pinned stage's
   frame changes). The better fix is a rendered 4:5 phone cut of the dive (for main's queue). */
@media (orientation:portrait) and (max-width:599px){.dive-stage .dive-frame{--dive-aspect:1}}
.dive-poster,.dive-frames{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dive-frames{opacity:0}
.dive-frames.is-on{opacity:1}
.dive-track{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
.dive-beat{height:var(--dive-beat-h,160vh)}
.dive-beat .dive-still{display:none}
.dive.is-still .dive-stage{display:none}
.dive.is-still .dive-track{margin-top:0}
.dive.is-still .dive-beat{height:auto;padding:var(--rp-space-scale-8) var(--rp-space-container-padding)}
.dive.is-still .dive-beat .dive-still{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;aspect-ratio:var(--dive-aspect,16 / 9)}
/* the back-out runway (STORYBOARD-S5 "back out"): a quarter of the six beat runways (6 x 160vh / 4 = 240vh) for the reverse, 40vh for
   the settle into the plate, 20vh of the plate held, and the half screen over which the sticky stage lets go - reserved in CSS, so the
   page is the same height before and after the player mounts. PRINT / reduced motion: the engraved plate as a still, under its line. */
.dive-back{position:relative;box-sizing:border-box;height:var(--dive-back-h,350vh);padding-top:var(--rp-space-scale-8)}
.dive-back .dive-still{display:none}
.dive-back-frames{z-index:1}
.dive-back-note{max-width:min(38rem,calc(100vw - 2 * var(--rp-space-container-padding)));margin:0 auto;padding:.9em 1.2em;background:var(--rp-color-ground-parchment-card);color:var(--rp-color-ink-sepia);border:1px solid var(--rp-color-brass-hairline);font:400 var(--rp-type-scale-label)/1.5 var(--rp-type-family-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.dive.is-still .dive-back{height:auto;padding:var(--rp-space-scale-8) var(--rp-space-container-padding)}
.dive.is-still .dive-back .dive-still{display:block;width:100%;max-width:960px;height:auto;margin:var(--rp-space-scale-6) auto 0;aspect-ratio:var(--dive-aspect,16 / 9)}
@media (prefers-reduced-motion:reduce){
  .dive-back{height:auto;padding:var(--rp-space-scale-8) var(--rp-space-container-padding)}
  .dive-back .dive-still{display:block;width:100%;max-width:960px;height:auto;margin:var(--rp-space-scale-6) auto 0;aspect-ratio:var(--dive-aspect,16 / 9)}
}
@media (prefers-reduced-motion:reduce){
  .dive-stage{display:none}
  .dive-track{margin-top:0}
  .dive-beat{height:auto;padding:var(--rp-space-scale-8) var(--rp-space-container-padding)}
  .dive-beat .dive-still{display:block;width:100%;max-width:960px;height:auto;margin:0 auto;aspect-ratio:var(--dive-aspect,16 / 9)}
}
.dive-card{position:relative;max-width:min(38rem,calc(100vw - 2 * var(--rp-space-container-padding)));margin:0 auto;padding:var(--rp-space-scale-8) var(--rp-space-scale-8) var(--rp-space-scale-6);background:var(--rp-color-ground-parchment-card);color:var(--rp-color-ink-sepia)}
/* @end */
.dive-card{box-shadow:var(--rp-shadow-card);border:1px solid var(--rp-color-brass-hairline)}
.dive-card h2,.dive-card h3{margin:0 0 .5em;font:500 var(--rp-type-scale-h3)/1.2 var(--rp-type-family-display);color:var(--rp-color-ink-sepia);text-transform:uppercase;letter-spacing:.04em}
.dive-card p{margin:0 0 .9em;font:400 var(--rp-type-scale-body)/1.65 var(--rp-type-family-body)}
.dive-card .dive-card-note{font:400 var(--rp-type-scale-label)/1.5 var(--rp-type-family-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rp-color-ink-sepia-2)}
.dive-progress{position:absolute;left:50%;bottom:var(--rp-space-scale-6);width:min(12rem,40vw);height:1px;transform:translateX(-50%);background:var(--rp-color-brass-hairline)}
.dive-progress i{display:block;height:100%;background:var(--rp-color-brass-gold);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform var(--rp-motion-duration-fast) var(--rp-motion-easing-standard)}

/* ---------------------------------------------------------------- 1B-5 the Iso E Super ghost ---------------------------------------------------------------- */
/* @critical */
.ghost-stage{position:relative;aspect-ratio:4 / 3;width:100%;max-width:720px;margin:0 auto;background:var(--rp-color-ground-emblem-black)}
.ghost-stage canvas,.ghost-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ghost-assigned{display:block;min-height:1.6em}
.ghost-ctl{min-height:2.6rem}
.accord-compose-row{min-height:2.6rem}
/* @end */
.ghost-banner{margin:0 0 var(--rp-space-scale-4);font:500 var(--rp-type-scale-small)/1.6 var(--rp-type-family-mono);letter-spacing:.04em;color:var(--rp-color-brass-gold-soft)}
.ghost-source{margin-top:var(--rp-space-scale-3);font:400 var(--rp-type-scale-label)/1.6 var(--rp-type-family-mono);color:var(--rp-color-ink-muted)}
.ghost-toggle,.accord-compose{
  appearance:none;cursor:pointer;padding:.7em 1.2em;border:1px solid var(--rp-color-brass-gold);background:none;color:var(--rp-color-brass-gold-soft);
  font:500 var(--rp-type-scale-label)/1 var(--rp-type-family-mono);letter-spacing:.16em;text-transform:uppercase;
  transition:background-color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard),color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard);
}
.ghost-toggle:hover,.accord-compose:hover{background:var(--rp-color-brass-gold);color:var(--rp-color-ground-oxblood)}
.ghost-toggle:focus-visible,.accord-compose:focus-visible,.accord-download:focus-visible{outline:2px solid var(--rp-color-brass-gold);outline-offset:2px}
.ghost-toggle[aria-pressed="true"]{background:var(--rp-color-brass-gold-dim);color:var(--rp-color-ground-oxblood)}
.accord-compose[disabled]{opacity:.6;cursor:progress}

/* ---------------------------------------------------------------- 1B-4 the accord ---------------------------------------------------------------- */
/* @critical */
.accord-fig{margin:0}
.accord-preview{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:2 / 3}
.accord-preview[hidden]{display:none}   /* round 6 (review): display:block above beat the hidden attribute - a blank 1080 x 1620 box showed at rest */
/* @end */
.accord-preview{box-shadow:var(--rp-shadow-card)}
.accord-rows{display:grid;grid-template-columns:max-content 1fr;gap:.3em 1.2em;margin:0 0 1em;font:400 var(--rp-type-scale-small)/1.5 var(--rp-type-family-mono)}
.accord-rows dt{text-transform:uppercase;letter-spacing:.14em;color:var(--rp-color-brass-gold)}
.accord-rows dd{margin:0}
.accord-privacy{font:400 var(--rp-type-scale-label)/1.6 var(--rp-type-family-mono);letter-spacing:.06em;color:var(--rp-color-ink-muted)}
.accord-download{font:500 var(--rp-type-scale-label)/1 var(--rp-type-family-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rp-color-brass-gold)}

/* ---------------------------------------------------------------- round 3: 1B-7 flacon, 1B-8 AR, 1B-6 fly-over, 1B-9 globe ----------------------------------------------------------------
   Every layer the modules add sits ABSOLUTELY inside the host's own reserved plate stage (lane K / L markup), so nothing shifts;
   the host's still / SVG stays underneath (PRINT, reduced motion, failures). The AR row reserves its height (critical). */
/* @critical */
[data-film-flacon] .rp-plate-stage,.go-globe-stage,[data-gcms-plate]{position:relative}
.flacon-canvas,.globe-canvas,.fly-stage,.fly-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.flacon-canvas,.globe-canvas{opacity:0}
.film-ar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rp-space-scale-4);min-height:17.5rem}@media (max-width:599px){.film-ar{min-height:21rem}}
/* @end */
.flacon-canvas,.globe-canvas{transition:opacity var(--rp-motion-duration-base) var(--rp-motion-easing-standard)}
[data-film-flacon] .is-live .flacon-canvas,.go-globe-stage.is-live .globe-canvas{opacity:1}
.flacon-proof{position:absolute;left:var(--rp-space-scale-3);top:var(--rp-space-scale-3);z-index:2;font:500 var(--rp-type-scale-label)/1.3 var(--rp-type-family-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rp-color-ink-sepia-2);background:color-mix(in srgb,var(--rp-color-ground-parchment) 82%,transparent);padding:.2em .45em}
.flacon-ctl{position:absolute;left:var(--rp-space-scale-3);right:var(--rp-space-scale-3);bottom:var(--rp-space-scale-3);z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:0}
.flacon-btn,.fly-toggle,.film-ar-copy{
  appearance:none;cursor:pointer;min-height:44px;padding:.55em 1em;border:1px solid var(--rp-color-ink-sepia-2);background:color-mix(in srgb,var(--rp-color-ground-parchment) 88%,transparent);color:var(--rp-color-ink-sepia);
  font:500 var(--rp-type-scale-label)/1 var(--rp-type-family-mono);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard),color var(--rp-motion-duration-fast) var(--rp-motion-easing-standard);
}
.flacon-btn:hover,.fly-toggle:hover,.film-ar-copy:hover{background:var(--rp-color-ink-sepia);color:var(--rp-color-ground-parchment)}
.flacon-btn[aria-pressed="true"],.fly-toggle[aria-pressed="true"]{background:var(--rp-color-ink-sepia);color:var(--rp-color-ground-parchment)}
.flacon-btn:focus-visible,.fly-toggle:focus-visible,.film-ar-copy:focus-visible,.film-ar-link:focus-visible{outline:2px solid var(--rp-color-ink-sepia);outline-offset:2px}
.flacon-status{font:400 var(--rp-type-scale-label)/1.4 var(--rp-type-family-mono);color:var(--rp-color-ink-sepia);background:color-mix(in srgb,var(--rp-color-ground-parchment) 88%,transparent)}
.flacon-status:empty{display:none}
/* fly-over */
.fly-labels,.globe-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fly-label,.globe-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;white-space:nowrap;transform:translate(-9999px,0);transition:opacity var(--rp-motion-duration-fast) var(--rp-motion-easing-standard);translate:-50% -100%}
.fly-label b{font:500 .78rem/1.1 var(--rp-type-family-display);color:var(--rp-color-ink-sepia)}
.fly-label i,.globe-label i{font:400 .72rem/1.2 var(--rp-type-family-mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--rp-color-ink-sepia-2)}
.fly-honest{position:absolute;right:.6rem;top:.5rem;font:500 .62rem/1 var(--rp-type-family-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rp-color-ink-sepia-2);background:color-mix(in srgb,var(--rp-color-ground-parchment) 85%,transparent);padding:.15em .35em}
.fly-toggle{position:absolute;left:.5rem;bottom:.5rem;min-height:32px;padding:.35em .7em;font-size:.62rem}
.fly-stage.is-2d .fly-canvas,.fly-stage.is-2d .fly-labels{visibility:hidden}
/* globe */
.globe-label{translate:-50% calc(-100% - 6px)}
.globe-label b{font:500 .74rem/1.1 var(--rp-type-family-display);color:var(--rp-color-ink-sepia)}
.globe-label.is-chosen b{color:var(--rp-color-brass-ring-shadow)}
.globe-note{position:absolute;left:.6rem;right:.6rem;bottom:.45rem;font:400 .62rem/1.35 var(--rp-type-family-mono);color:var(--rp-color-ink-sepia-2);text-align:center;pointer-events:none}
/* labels over the live plate: a paper knock-out behind each line (the engraver's cartouche), so the ink never sits on hatching (contrast hand-check) */
.fly-label b,.fly-label i,.globe-label b,.globe-label i{background:var(--rp-color-ground-parchment);padding:0 .25em}
.globe-note{left:50%;right:auto;translate:-50% 0;width:max-content;max-width:calc(100% - 1.2rem);white-space:normal;background:var(--rp-color-ground-parchment);padding:.1em .4em}
/* AR */
.film-ar-link{display:inline-flex;align-items:center;gap:var(--rp-space-scale-4);text-decoration:none;color:inherit}
.film-ar-poster{display:block;width:160px;height:auto;aspect-ratio:4 / 5;object-fit:cover;background:var(--rp-color-ground-parchment-card)}
.film-ar-label{font:500 var(--rp-type-scale-label)/1.2 var(--rp-type-family-mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:.2em}
.film-ar-note,.film-ar-status{flex:1 1 16rem;font:400 var(--rp-type-scale-small)/1.55 var(--rp-type-family-body)}
@media (max-width:599px){.film-ar-poster{width:96px}}

/* ---------------------------------------------------------------- round 4: the real pages ---------------------------------------------------------------- */
/* the header's "Sound on" (src/film/sound.mjs + lane G's control): the menu button's box, beside it; hidden until the control is
   bound after load, and it takes the free space left of the menu button, so showing it moves nothing else. The captions region is
   fixed at the foot of the viewport and shown only while it holds a caption (no layout effect). */
/* @critical */
.topbar .rp-sound{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:.5rem .9rem;background:transparent;color:var(--cream,#f4eee4);border:1px solid var(--hair,rgba(241,235,225,.18));border-radius:1px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer}
.topbar .rp-sound[hidden]{display:none}
.rp-sound-cc{position:fixed;left:50%;bottom:.9rem;z-index:6;translate:-50% 0;margin:0;max-width:min(40rem,calc(100vw - 2rem));padding:.45em .9em;background:var(--rp-color-ground-emblem-black,#050100);border:1px solid var(--rp-color-brass-hairline,rgba(198,162,74,.35));color:var(--rp-color-ground-parchment,#f4eee4);font:400 .72rem/1.45 var(--rp-type-family-mono,monospace);letter-spacing:.04em}
.rp-sound-cc:empty{visibility:hidden}
/* @end */
.topbar .rp-sound:hover,.topbar .rp-sound:focus-visible{border-color:var(--gold,#c6a24a);color:var(--gold-soft,#e3c77e)}
.topbar .rp-sound[aria-pressed="true"]{border-color:var(--gold,#c6a24a);color:var(--gold-soft,#e3c77e)}
.topbar .rp-sound[aria-pressed="true"]::before{content:"";width:.45em;height:.45em;margin-right:.6em;border-radius:50%;background:currentColor}
@media (max-width:420px){.topbar .rp-sound{padding:.5rem .6rem;letter-spacing:.18em}}

/* the home opening (1B-1 on /): the lede under the runway carries the old hero's words; the stand-in line says what the frames are */
/* round 6: the primary button - the legacy rule section[id] .btn.btn-primary paints it with var(--zone), which #lede never set (text
   #140b0a on a transparent fill, ~1.1:1); #lede sets --zone to the old #hero fill, brass amber, deeper on hover and focus */
#lede{--zone:var(--rp-color-brass-amber,#f2b657)}
#lede .btn.btn-primary:hover,#lede .btn.btn-primary:focus-visible{--zone:var(--rp-color-brass-amber-deep,#cf9438)}
.s1-lede .hero-sig{margin-top:var(--rp-space-scale-6);font:400 var(--rp-type-scale-small)/1.5 var(--rp-type-family-body);color:var(--rp-color-ink-muted)}
.s1-lede .s1-meta{font:500 var(--rp-type-scale-label)/1.5 var(--rp-type-family-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-color-ink-muted)}
/* @critical */
/* the site's sticky topbar is in flow above the runway (44 px menu button + .95 rem padding twice + a 1 px rule): the runway slides
   up under it, so the pinned host is the whole viewport and its Skip / stand-in line sit on screen from the first frame */
.film-runway[data-under-topbar]{margin-top:calc(-1 * (44px + 1.9rem + 1px))}
.film-runway[data-under-topbar].is-still .film-host{padding-top:calc(var(--rp-space-scale-8) + 44px + 1.9rem + 1px)}
@media (prefers-reduced-motion:reduce){.film-runway[data-under-topbar] .film-host{padding-top:calc(var(--rp-space-scale-8) + 44px + 1.9rem + 1px)}}
/* round 6: the still (PRINT, reduced motion) is sized so the stage AND the placeholder label under it fit the first screen - BLOCKED 3:
   the label wherever the placeholder rose appears (at 1440 x 900 the stage was 810 px tall and the label fell below the fold) */
.film-runway[data-under-topbar].is-still .film-stage{width:min(100vw,calc((100svh - 44px - 1.9rem - 1px - var(--rp-space-scale-8) - 5rem) * var(--film-aspect,1.7778)))}
@media (prefers-reduced-motion:reduce){.film-runway[data-under-topbar] .film-stage{width:min(100vw,calc((100svh - 44px - 1.9rem - 1px - var(--rp-space-scale-8) - 5rem) * var(--film-aspect,1.7778)))}}
/* @end */

/* the footer invitation (1B-4): a compact composer under the footer's columns; the card appears only after the reader asks */
.ft-accord{max-width:var(--rp-space-container-max,1360px);margin:var(--rp-space-scale-8) auto 0;padding:var(--rp-space-scale-6) var(--rp-space-container-padding,1rem) 0;border-top:1px solid var(--rp-color-brass-hairline,rgba(198,162,74,.35));display:grid;gap:var(--rp-space-scale-3);justify-items:start}
.ft-accord-h{margin:0;font:500 var(--rp-type-scale-label)/1.4 var(--rp-type-family-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rp-color-brass-gold-soft)}
.ft-accord .accord-privacy{margin:0;max-width:62ch;font:400 var(--rp-type-scale-small)/1.55 var(--rp-type-family-body);color:var(--rp-color-ink-muted)}
.ft-accord .accord-preview{max-width:min(320px,100%)}
/* round 6 (review, /atelier): on the parchment tool the privacy note is sepia (it was ink-muted cream, 1.73:1); the empty state is one
   display-face line and a pointer to /materials, never an empty card */
.rp-tool .accord-privacy,.rp-paper .accord-privacy{color:var(--rp-color-ink-sepia-2)}
.accord-empty{margin:0;max-width:62ch}
.accord-empty-h{display:block;margin:0 0 .35em;font:500 var(--rp-type-scale-h3,1.4rem)/1.2 var(--rp-type-family-display)}
.rp-tool .accord-empty a{color:var(--rp-color-ink-sepia)}
.ft-accord .accord-empty a{color:var(--rp-color-brass-gold-soft)}

/* ---------------------------------------------------------------- round 7: 1B-8 the engraved viewer (/science #extraction) and the home proof flacon ---------------------------------------------------------------- */
/* @critical */
/* the viewer's plate: a parchment window, 4:5, reserved from the first paint (the poster is the still until the canvas is up) */
.film-viewer{max-width:26rem;margin:var(--rp-space-scale-8) auto}
.film-viewer-stage{position:relative;overflow:hidden;aspect-ratio:4 / 5;background:var(--rp-color-ground-parchment,#f4eee4)}
.film-viewer-still{display:block;width:100%;height:100%;object-fit:cover}
.film-viewer-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.film-viewer-ctl{position:absolute;left:var(--rp-space-scale-3,.75rem);bottom:var(--rp-space-scale-3,.75rem);z-index:2;margin:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* the home proof flacon (1B-7 on /): /history's .vb-proof sizing (src/sections/history/index.css, not loaded on /), repeated here so
   the plate's box is reserved on / from the first paint */
.home-proof.vb-proof{max-width:22rem;margin:var(--rp-space-scale-8) auto 0}
.home-proof .vb-proof-stage{position:relative;overflow:hidden;aspect-ratio:4 / 5;--rp-plate-aspect:4 / 5}
.home-proof .vb-proof-still{display:block;width:100%;height:100%;object-fit:contain}
/* @end */
.film-viewer-stage.is-live .film-viewer-canvas{opacity:1;transition:opacity var(--rp-motion-duration-base) var(--rp-motion-easing-standard)}
.film-viewer-stage:focus-visible{outline:2px solid var(--rp-color-brass-gold,#c6a24a);outline-offset:3px}
.film-viewer-canvas{cursor:grab;touch-action:pan-y}
.film-viewer-canvas:active{cursor:grabbing}
.film-viewer-status{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.film-viewer figcaption{margin-top:.6rem}
.home-proof figcaption{margin-top:.6rem;display:grid;gap:.2rem;font:400 var(--rp-type-scale-small)/1.5 var(--rp-type-family-body);color:var(--rp-color-ink-muted)}
.home-proof .rp-plate-no{font:500 var(--rp-type-scale-label)/1.4 var(--rp-type-family-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rp-color-brass-gold)}
.ft-accord .accord-text p,.ft-accord .accord-rows{max-width:62ch;font:400 var(--rp-type-scale-small)/1.55 var(--rp-type-family-body);color:var(--rp-color-ground-parchment)}