/* avril · pour Avril · the story.
   The page is her film: the gym at night, filmed and graded by her. Ink, film white, one mint accent (her story
   highlight covers). Geist for our titles and text, Newsreader italic for her phrases (lowercase, as she writes),
   DM Mono for timecodes, numbers, overlines and sources.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat mode: the readable document with end states and the one live phone.
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("media/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("media/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader italic"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader italic"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("media/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("media/fonts/dm-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("media/fonts/dm-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* size-adjusted local fallbacks, visible during the swap only */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia Italic"), local("Times New Roman Italic"), local("Georgia"); size-adjust: 96%; }
@font-face { font-family: "DM Mono Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); size-adjust: 98%; }

:root {
  --ink: #0D0D0C;
  --film: #F3EEE4;
  --grain: #1A1917;
  --line: #2E2C28;
  --mute: #A9A397;
  --veil: rgba(13, 13, 12, .70);
  --mint: #9BE8C8;
  --ink-rgb: 13, 13, 12;
  --film-rgb: 243, 238, 228;
  --mint-rgb: 155, 232, 200;

  --f-sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Newsreader italic", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --f-mono: "DM Mono", "DM Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --gut: 16px;
  --S: 100vh;
  --LH: 100vh;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--film); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--ink); color: var(--film);
  font: 400 17px/1.4 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b { font-weight: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--film); color: var(--ink); font: 500 15px/1.2 var(--f-sans); text-decoration: none; cursor: pointer;
  transform: translateY(calc(-100% - 90px));
}
.skip:focus-visible { transform: none; }
.skip--try { top: 60px; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }
.mint { color: var(--mint); }

/* ---------------------------------------------------------------------------------------------- the type roles (SPEC 3) */
.ov { font: 500 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.h1 { font: 600 38px/1.02 var(--f-sans); letter-spacing: -.03em; color: var(--film); }
.h2 { font: 600 30px/1.05 var(--f-sans); letter-spacing: -.025em; color: var(--film); text-wrap: balance; }
.key { font: 600 34px/1.02 var(--f-sans); letter-spacing: -.03em; color: var(--film); }
.lead { font: 500 21px/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--film); text-wrap: balance; }
.stat { font: 500 52px/1 var(--f-mono); letter-spacing: -.04em; color: var(--film); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { font: 500 26px/1 var(--f-mono); letter-spacing: -.02em; color: var(--film); font-variant-numeric: tabular-nums; white-space: nowrap; }
.label { font: 400 15px/1.3 var(--f-sans); color: var(--mute); }
.card { font: italic 400 27px/1.15 var(--f-serif); letter-spacing: -.01em; color: var(--film); }
.quote { font: italic 400 24px/1.2 var(--f-serif); letter-spacing: -.01em; color: var(--film); }
.row { font: 400 16px/1.35 var(--f-sans); color: var(--ink); }
.body { font: 400 17px/1.4 var(--f-sans); color: var(--film); }
.credit { font: 400 14px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--film); }
.small, .src { font: 400 11px/1.35 var(--f-mono); letter-spacing: .02em; color: var(--mute); }
.her { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
html.st-desk .ov { font-size: 14px; }
html.st-desk .h1 { font-size: 76px; }
html.st-desk .h2 { font-size: 56px; }
html.st-desk .key { font-size: 72px; }
html.st-desk .lead { font-size: 30px; }
html.st-desk .stat { font-size: 92px; }
html.st-desk .num { font-size: 38px; }
html.st-desk .label { font-size: 17px; }
html.st-desk .card { font-size: 38px; }
html.st-desk .quote { font-size: 34px; }
html.st-desk .row { font-size: 19px; }
html.st-desk .body { font-size: 20px; }
html.st-desk .credit { font-size: 18px; }
html.st-desk .small, html.st-desk .src { font-size: 12px; }

/* a word rises out of its mask; a letter appears as it is written */
html.st-on .w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
html.st-on .w > span { display: inline-block; }
html.st-on .lt { opacity: 0; }
html.st-on .lt.on { opacity: 1; }

/* ---------------------------------------------------------------------------------------------- grain, vignette, light */
.grain, .vig { display: none; }
html.st-on .grain, html.st-flat .grain { display: block; position: fixed; inset: 0; z-index: 800; pointer-events: none; overflow: hidden; opacity: .05; }
.grain__n {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.6 0 0 0 -1.1'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
html.st-on:not(.rmos) .grain__n { animation: st-grain .9s steps(6) infinite; }
@keyframes st-grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-7%, 4%, 0); } 33% { transform: translate3d(5%, -6%, 0); }
  50% { transform: translate3d(-4%, -3%, 0); } 67% { transform: translate3d(6%, 5%, 0); } 83% { transform: translate3d(-2%, 7%, 0); } 100% { transform: translate3d(0, 0, 0); }
}
html.st-on .vig { display: block; position: fixed; inset: 0; z-index: 799; pointer-events: none; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .55), inset 0 0 120px 10px rgba(0, 0, 0, .5); }
.toplight { display: none; }
html.st-on .toplight {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% -10%, rgba(255, 214, 170, .10), rgba(255, 214, 170, 0) 70%);
}

/* ============================================================================================== experience */
html.js:not(.st-on):not(.st-fail):not(.st-flat) #story,
html.js:not(.st-on):not(.st-fail):not(.st-flat) #dock { visibility: hidden; }
html.st-boot *, html.st-boot *::before, html.st-boot *::after { transition: none !important; }
html.st-on #run { position: relative; height: calc(var(--runL, 4080vh) + var(--LH)); }
html.st-on #end { position: absolute; left: 0; bottom: 0; width: 1px; }
html.st-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--ink);
}
/* a chapter is a scene of the stage: no stacking context of its own, its parts carry their z-index */
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; }
html.st-on .sc [data-x] { position: absolute; left: 0; top: 0; z-index: 22; opacity: 0; }
html.st-on .sc.is-on [data-x] { will-change: transform, opacity; }
html.st-on .hero0 { display: none; }

/* full-bleed backgrounds: her 16:9 cuts under a 70% veil */
.bgw, .side4, .dips6 { display: none; }
html.st-on .bgw { display: block; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; background: var(--grain); }
.bgw__img, .bgw__v, .side4__img, .side4__v, .dips6__img, .dips6__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bgw__v, .side4__v, .dips6__v, .reel__v, .reel4__v, .clip__v, .bn__v { opacity: 0; transition: opacity .3s linear; }
.bgw__v.on, .side4__v.on, .dips6__v.on, .reel__v.on, .reel4__v.on, .clip__v.on, .bn__v.on { opacity: 1; }
.bgw__veil { position: absolute; inset: 0; background: var(--veil); }
html.st-on .bgw--salle .bgw__veil { background: linear-gradient(90deg, rgba(var(--ink-rgb), .86) 0, rgba(var(--ink-rgb), .70) 55%, rgba(var(--ink-rgb), .62) 100%); }
/* the warm grade of her footage (a static tint, never a filter) */
.bgw::after, .reel__m::after, .side4::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 196, 140, .06), rgba(255, 170, 110, .04));
}

/* ---------------------------------------------------------------------------------------------- the REC and the timecode */
.rec, .leader, .vf { display: none; }
html.st-on .rec {
  display: flex; align-items: center; gap: 7px; position: absolute; z-index: 36; top: 14px; right: 16px; height: 16px;
  font: 400 11px/1 var(--f-mono); letter-spacing: .06em; color: var(--film); font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none; opacity: 0;
}
.rec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(var(--mint-rgb), .7); opacity: .25; transition: opacity .2s linear; }
.rec.lit .rec__dot { opacity: 1; }
html.st-on:not(.rmos) .rec.lit .rec__dot { animation: st-rec 1.2s steps(1, end) infinite; }
@keyframes st-rec { 0%, 64% { opacity: 1; } 65%, 100% { opacity: .2; } }
.rec__l { color: var(--film); }
.rec__tc { color: var(--mute); }
.rec.lit .rec__tc { color: var(--film); }
html.st-on.st-desk .rec { top: 40px; right: 56px; font-size: 12px; }

/* the viewfinder: four mint brackets (ch1, ch9) */
html.st-on .vf { display: block; position: absolute; z-index: 35; left: 0; top: 0; width: 100px; height: 100px; pointer-events: none; opacity: 0; }
.vf__c { position: absolute; width: 22px; height: 22px; border: 0 solid var(--mint); }
html.st-desk .vf__c { width: 34px; height: 34px; }
.vf__c--tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.vf__c--tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.vf__c--bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.vf__c--br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

/* the film leader (T1): a countdown on ink, then the strip runs up */
html.st-on .leader { display: block; position: absolute; inset: 0; z-index: 40; background: var(--grain); pointer-events: none; overflow: hidden; }
.leader__svg { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; overflow: visible; }
html.st-desk .leader__svg { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
.leader__o, .leader__i { fill: none; stroke: rgba(var(--film-rgb), .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.leader__i { stroke: rgba(var(--film-rgb), .4); }
.leader__x { fill: none; stroke: rgba(var(--film-rgb), .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.leader__sw {
  position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: conic-gradient(rgba(var(--film-rgb), .14) 0deg, rgba(var(--film-rgb), .14) var(--sw, 0deg), transparent var(--sw, 0deg));
}
html.st-desk .leader__sw { width: 860px; height: 860px; margin: -430px 0 0 -430px; }
.leader__n {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -.5em; text-align: center;
  font: 500 128px/1 var(--f-mono); color: var(--film); font-variant-numeric: tabular-nums;
}
html.st-desk .leader__n { font-size: 210px; }
.leader__fl { position: absolute; inset: 0; background: var(--film); opacity: 0; }

/* ---------------------------------------------------------------------------------------------- the opening reel (ch1) */
.reel { display: none; }
html.st-on .reel { display: block; position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; visibility: hidden; }
html.st-on .reel__m { position: absolute; inset: 0; overflow: hidden; background: var(--grain); }
.reel__img, .reel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.reel__img { color: transparent; font-size: 0; }
.reel__v { z-index: 1; }
/* the two veils of the phone layout: the top band (overline, H1), the bottom band (counters, source, her line) */
.reel__top, .reel__bot { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.reel__top { top: 0; height: 30%; background: linear-gradient(180deg, rgba(var(--ink-rgb), .82) 0, rgba(var(--ink-rgb), .62) 55%, rgba(var(--ink-rgb), 0) 100%); }
.reel__bot { bottom: 0; height: 42%; background: linear-gradient(0deg, rgba(var(--ink-rgb), .9) 0, rgba(var(--ink-rgb), .72) 55%, rgba(var(--ink-rgb), 0) 100%); }
html.st-desk .reel__top, html.st-desk .reel__bot { display: none; }
html.st-on .sc-1.is-on ~ .reel, html.st-on .reel.is-on { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- 1 · Ça tourne. */
.cue { display: flex; align-items: center; gap: 6px; }
.cue__i { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.st-on:not(.rmos) .cue.bob .cue__i { animation: st-bob 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.cnt__p { display: block; }
.cnt__n, .cnt__t { display: block; }
html.st-on .c1__q { text-wrap: balance; }
html.st-on .stat .tcd { color: var(--mute); }

/* ---------------------------------------------------------------------------------------------- 2 · Tes rushes: the timeline */
.c2__h1, .c2__h2 { display: block; }
.tl { position: relative; }
.clip__f { position: relative; overflow: hidden; background: var(--grain); border-radius: 4px; aspect-ratio: 4 / 5; }
.clip__img, .clip__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* sprocket edges: two rows of holes on the frame of every rush and every reel of the bin */
.clip__f::before, .clip__f::after, .bn__f::before, .bn__f::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(var(--ink-rgb), .95) 0 2.1px, transparent 2.6px) 0 0 / 11px 9px repeat-x, rgba(var(--ink-rgb), .55);
}
.clip__f::before, .bn__f::before { top: 0; }
.clip__f::after, .bn__f::after { bottom: 0; }
/* the rushes' tiles outside the desktop story: the holes run down the sides, as on the vertical track (her burned-in
   text sits at the top of rushes/muscleup, 0.07 to 0.15 of the frame: nothing of ours crosses it) */
html:not(.st-desk) .clip__f::before, html:not(.st-on) .clip__f::before,
html:not(.st-desk) .clip__f::after, html:not(.st-on) .clip__f::after {
  top: 0; bottom: 0; left: 0; right: auto; width: 7px; height: auto;
  background: radial-gradient(circle at 50% 50%, rgba(var(--ink-rgb), .95) 0 1.8px, transparent 2.3px) 0 0 / 7px 9px repeat-y, rgba(var(--ink-rgb), .55);
}
html:not(.st-desk) .clip__f::after, html:not(.st-on) .clip__f::after { left: auto; right: 0; }
.clip__n--ty { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
html.st-on .tl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 21; }
html.st-on .tl__track {
  position: absolute; left: 0; top: 0; display: block; background: var(--grain); border-radius: 6px; opacity: 0; transform-origin: 0 0;
  box-shadow: inset 0 0 0 1px var(--line);
}
html.st-on .tl__track::before, html.st-on .tl__track::after {
  content: ""; position: absolute; background: radial-gradient(circle, rgba(var(--film-rgb), .14) 0 1.6px, transparent 2px) 0 0 / 12px 12px repeat;
}
html.st-on .tl__track::before { left: 0; top: 0; bottom: 0; width: 12px; background-repeat: repeat-y; }
html.st-on .tl__track::after { right: 0; top: 0; bottom: 0; width: 12px; background-repeat: repeat-y; }
html.st-desk .tl__track::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 12px; background-repeat: repeat-x; }
html.st-desk .tl__track::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 12px; background-repeat: repeat-x; }
/* the playhead: a mint line with its head */
html.st-on .tl__ph { position: absolute; left: 0; top: 0; z-index: 3; display: block; background: var(--mint); opacity: 0; box-shadow: 0 0 12px rgba(var(--mint-rgb), .6); }
html.st-on .tl__ph::before { content: ""; position: absolute; width: 10px; height: 10px; background: var(--mint); transform: rotate(45deg); }
html:not(.st-desk) .tl__ph::before { left: -5px; top: -4px; }
html.st-desk .tl__ph::before { left: -4px; top: -5px; }
html.st-on .tl__clips { position: absolute; inset: 0; }
html.st-on .clip { position: absolute; left: 0; top: 0; }
html.st-on .clip__f { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(var(--film-rgb), .08); }
html.st-on .clip__f.is-act { box-shadow: 0 0 0 2px var(--mint); }
html.st-on .clip__n, html.st-on .clip__l { position: absolute; left: 0; top: 0; opacity: 0; }
html.st-on .clip__l { color: var(--film); opacity: 0; }
html.st-on .sc-2.is-on .clip__f, html.st-on .sc-2.is-on .tl__ph, html.st-on .sc-2.is-on .clip__n, html.st-on .sc-2.is-on .clip__l { will-change: transform, opacity; }
html.st-on .rip { position: absolute; left: 0; top: 0; border: 1.5px solid var(--mint); border-radius: 6px; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------------------------------- 3 · Ta méthode: the bin */
.bn__f { position: relative; overflow: hidden; background: var(--grain); border-radius: 4px; aspect-ratio: 4 / 5; }
.bn__f::before, .bn__f::after { height: 11px; background: radial-gradient(circle at 50% 50%, rgba(var(--ink-rgb), .95) 0 2.4px, transparent 3px) 0 0 / 13px 11px repeat-x, rgba(var(--ink-rgb), .6); }
.bn__img, .bn__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bn__q { text-wrap: balance; }
html.st-on .bin { position: absolute; inset: 0; z-index: 15; }
html.st-on .bn { position: static; }
html.st-on .bn__f { position: absolute; left: 0; top: 0; width: 100%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
html.st-on .bn__q, html.st-on .bn__s { position: absolute; left: 0; top: 0; opacity: 0; }
html.st-desk .bn__q { font-size: 30px; }
html.st-on .bn__q { text-align: left; }
html.st-on:not(.st-desk) .bn__q, html.st-on:not(.st-desk) .bn__s { text-align: center; }
html.st-on .bn__q .cr { display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.08em; background: var(--mint); opacity: 0; }
html.st-on .sc-3.is-on .bn, html.st-on .sc-3.is-on .bn__q, html.st-on .sc-3.is-on .bn__s { will-change: transform, opacity; }
/* the band under the reels on desktop: a strip of film the reels sit in */
.bin__band { display: none; }
html.st-on.st-desk .bin__band { display: block; position: absolute; left: 0; top: 0; z-index: 14; background: var(--grain); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; opacity: 0; }
html.st-on.st-desk .bin__band::before, html.st-on.st-desk .bin__band::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 12px; background: radial-gradient(circle, rgba(var(--film-rgb), .14) 0 2.2px, transparent 2.8px) 0 0 / 16px 12px repeat-x;
}
html.st-on.st-desk .bin__band::before { top: 7px; }
html.st-on.st-desk .bin__band::after { bottom: 7px; }
/* the four empty frames of the strip (desktop): a hairline frame and a centre mark, filled one by one by her reels */
.bn__slot { display: none; }
html.st-on.st-desk .bn__slot {
  display: block; position: absolute; left: 0; top: 0; z-index: 14; border-radius: 4px; opacity: 0; visibility: hidden; pointer-events: none;
  background:
    linear-gradient(rgba(var(--film-rgb), .2), rgba(var(--film-rgb), .2)) 50% 50% / 22px 1px no-repeat,
    linear-gradient(rgba(var(--film-rgb), .2), rgba(var(--film-rgb), .2)) 50% 50% / 1px 22px no-repeat,
    rgba(var(--ink-rgb), .62);
  box-shadow: inset 0 0 0 1px rgba(var(--film-rgb), .1);
}
html.st-on.st-desk .bn__slot::before, html.st-on.st-desk .bn__slot::after {
  content: ""; position: absolute; left: 0; right: 0; height: 11px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--film-rgb), .1) 0 2.4px, transparent 3px) 0 0 / 13px 11px repeat-x;
}
html.st-on.st-desk .bn__slot::before { top: 0; }
html.st-on.st-desk .bn__slot::after { bottom: 0; }
/* the texts that live in the flow of their object (the call sheet, the figures, the credits) */
html.st-on .cs [data-x], html.st-on .figs [data-x], html.st-on .roll [data-x], html.st-on .end9 [data-x] { position: relative; left: auto; top: auto; z-index: auto; }
html.st-on .clip, html.st-on .bn { position: static; }

/* ---------------------------------------------------------------------------------------------- 4 · Le montage */
.key__1, .key__2 { display: block; }
.reel4, .wipe, .isl4 { display: none; }
html.st-on .reel4 { display: block; position: absolute; left: 0; top: 0; z-index: 16; transform-origin: 0 0; pointer-events: none; visibility: hidden; }
html.st-on .reel4.is-on { will-change: transform, opacity, clip-path; }
html.st-on .reel4__m { position: absolute; inset: 0; overflow: hidden; background: var(--grain); }
.reel4__img, .reel4__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.reel4__top { position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 2; background: linear-gradient(180deg, rgba(var(--ink-rgb), .84) 0, rgba(var(--ink-rgb), .66) 60%, rgba(var(--ink-rgb), 0) 100%); opacity: 0; }
/* the raw, flat look of an ungraded clip (log footage) before the grading wipe */
.reel4__raw { position: absolute; inset: 0; z-index: 3; background: rgba(128, 132, 134, .42); mix-blend-mode: normal; opacity: 0; }
.reel4__flash { position: absolute; inset: 0; z-index: 4; background: var(--film); opacity: 0; }
/* the cut mark: a vertical film-white bar with its two brackets, flashed across the frame */
.reel4__cut { position: absolute; left: 0; top: 0; z-index: 5; width: 3px; height: 100%; background: var(--film); opacity: 0; box-shadow: 0 0 14px rgba(var(--film-rgb), .8); }
html.st-on .wipe { display: block; position: absolute; left: 0; top: 0; z-index: 17; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.wipe__l { position: absolute; left: -10px; top: 0; width: 20px; height: 100%; background: linear-gradient(90deg, rgba(var(--mint-rgb), 0), rgba(var(--mint-rgb), .55) 45%, var(--mint) 50%, rgba(var(--mint-rgb), .55) 55%, rgba(var(--mint-rgb), 0)); }
html.st-on .isl4 { display: block; position: absolute; left: 0; top: 0; z-index: 17; width: 126px; height: 37px; border-radius: 18.5px; background: #000; transform-origin: 0 0; opacity: 0; pointer-events: none; }
html.st-on .side4 { display: block; position: absolute; left: 0; top: 0; z-index: 3; overflow: hidden; border-radius: 4px; opacity: 0; pointer-events: none; background: var(--grain); }
.side4__veil { position: absolute; inset: 0; background: rgba(var(--ink-rgb), .45); }
html:not(.st-desk) .side4 { display: none; }

/* ---------------------------------------------------------------------------------------------- 5 · Plan par plan */
.slate { display: none; }
html.st-on .slate { display: block; position: absolute; left: 0; top: 0; z-index: 22; width: 64px; height: 44px; opacity: 0; }
.slate__svg { width: 100%; height: 100%; overflow: visible; }
.slate__stick { transform-box: view-box; transform-origin: 1px 12px; }
.slate__stick rect, .slate__body { fill: var(--grain); stroke: var(--film); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.slate__z, .slate__body-z { fill: none; stroke: var(--film); stroke-width: 3.2; clip-path: inset(0); }
.slate__body-z { opacity: .9; }
.slate__t { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 500 9.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--film); white-space: nowrap; }
.slate__n { color: var(--mint); }
html:not(.st-desk) .slate { width: 72px; height: 50px; }
html:not(.st-desk) .slate__t { font-size: 10.5px; bottom: 7px; }
html.st-desk .slate { width: 92px; height: 63px; }
html.st-desk .slate__t { font-size: 13px; bottom: 9px; }
.shot__i { display: none; }
html.st-on .shot { width: 300px; }
html.st-on:not(.st-desk) .shot .card { font-size: 21px; line-height: 1.15; }
html.st-on .shot .card { color: var(--film); transition: color .25s linear; }
html.st-desk .shot__i { display: block; position: absolute; left: -64px; top: .35em; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--mute); }
html.st-desk .shot.is-act .card { color: var(--mint); }
html.st-desk .shot.is-act .shot__i { color: var(--mint); }
html.st-desk .shot .card { font-size: 30px; line-height: 1.15; }
.strip { display: none; }
html.st-on.st-desk .strip { display: flex; position: absolute; left: 0; top: 0; z-index: 21; gap: 6px; padding: 9px 8px; background: var(--grain); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; }
html.st-on.st-desk .strip::before, html.st-on.st-desk .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; background: radial-gradient(circle, rgba(var(--film-rgb), .16) 0 1.6px, transparent 2px) 0 0 / 11px 9px repeat-x;
}
html.st-on.st-desk .strip::before { top: 0; }
html.st-on.st-desk .strip::after { bottom: 0; }
.fr { position: relative; flex: none; width: 48px; height: 60px; border-radius: 2px; overflow: hidden; background: var(--line); opacity: .4; transition: opacity .25s linear; }
.fr img { width: 100%; height: 100%; object-fit: cover; }
.fr.is-done { opacity: .75; }
.fr.is-act { opacity: 1; box-shadow: 0 0 0 2px var(--mint); }

/* ---------------------------------------------------------------------------------------------- 6 · La série compte */
html.st-on .dips6 { display: block; position: absolute; left: 0; top: 0; z-index: 12; overflow: hidden; border-radius: 4px; opacity: 0; pointer-events: none; background: var(--grain); }
html:not(.st-desk) .dips6 { display: none; }
.reps { display: none; }
html.st-on.st-desk .reps { display: block; position: absolute; left: 0; top: 0; z-index: 22; width: 132px; height: 132px; opacity: 0; }
.reps__r { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.reps__t { fill: none; stroke: var(--line); stroke-width: 6; }
.reps__a { fill: none; stroke: var(--mint); stroke-width: 6; stroke-linecap: butt; opacity: 0; }
.reps__n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 500 30px/1 var(--f-mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.reps__v { color: var(--film); }
.reps.is-done .reps__v { color: var(--mint); }
.bounce { display: none; }
html.st-on .bounce {
  display: block; position: absolute; left: 0; top: 0; z-index: 11; width: 520px; height: 180px; margin: -90px 0 0 -260px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--mint-rgb), .32), rgba(var(--mint-rgb), .12) 50%, rgba(var(--mint-rgb), 0));
}
/* the scroll reminder: never on the phone's glass (story.js places it) */
.nudge { display: none; }
html.st-on .nudge {
  display: flex; position: absolute; z-index: 27; left: 0; top: 0; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border-radius: 24px; background: var(--film); color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s linear .42s;
}
html.st-on .nudge.on { opacity: 1; visibility: inherit; translate: 0 0; transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s; }
.nudge__c { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); }
.nudge__chev { width: 18px; height: 18px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nudge__t { display: flex; flex-direction: column; gap: 1px; }
.nudge__t b { font: 600 15px/1.2 var(--f-sans); }
.nudge__t span { font: 400 13px/1.25 var(--f-sans); color: #4D4A44; }
html.st-on:not(.rmos) .nudge.on .nudge__chev { animation: st-nudge 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · 6 · the phone (graphite titanium) */
html.st-on .phone {
  position: absolute; left: 0; top: 0; z-index: 13;
  width: var(--cw, 393px); height: var(--chh, 852px);
  transform-origin: 0 0; pointer-events: none;
}
html.st-on .phone__screen { pointer-events: auto; }
html.st-on .phone.ph-off { opacity: 0; visibility: hidden; }
html.st-on .phone.is-anim { will-change: transform, opacity; }
.phone { --R: 55px; --bz: 11px; --band: 6px; }
.phone__frame {
  position: absolute; inset: calc((var(--bz) + var(--band)) * -1);
  border-radius: calc(var(--R) + var(--bz) + var(--band));
  border: var(--band) solid transparent;
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(162deg, #5A5850 0%, #47453F 10%, #2A2925 26%, #3A3833 42%, #47453F 54%, #2F2E2A 70%, #2A2925 84%, #4B4943 100%) border-box;
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .7), inset 0 0 0 .6px rgba(255, 255, 255, .06);
  pointer-events: none;
}
.phone__frame::after {
  content: ""; position: absolute; inset: calc(var(--band) * -1); border-radius: inherit; pointer-events: none;
  border-top: 1px solid rgba(255, 236, 214, .28);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%);
}
.phone::before {
  content: ""; position: absolute; inset: calc((var(--bz) + var(--band)) * -1); border-radius: calc(var(--R) + var(--bz) + var(--band));
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 14px 30px -18px rgba(0, 0, 0, .7); pointer-events: none;
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #030303;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 .75px rgba(255, 255, 255, .04);
}
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(150, 146, 138, .35); }
.pa--1 { left: calc(var(--band) * -1); top: 92px; }
.pa--2 { left: calc(var(--band) * -1); bottom: 92px; }
.pa--3 { right: calc(var(--band) * -1); top: 92px; }
.pa--4 { right: calc(var(--band) * -1); bottom: 92px; }
.pb { position: absolute; width: 5px; border-radius: 2px; background: linear-gradient(90deg, #26251F 0%, #4A4842 40%, #5A5850 55%, #2E2D28 100%); box-shadow: 0 0 0 .6px rgba(0, 0, 0, .6); }
.pb--act { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 122px; height: 32px; }
.pb--vu { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 182px; height: 60px; }
.pb--vd { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 254px; height: 60px; }
.pb--pw { right: calc(0px - var(--bz) - var(--band) - 3.5px); top: 214px; height: 94px; background: linear-gradient(270deg, #26251F 0%, #4A4842 40%, #5A5850 55%, #2E2D28 100%); }
.phone__screen { position: absolute; inset: 0; border-radius: var(--R); overflow: hidden; overflow: clip; background: var(--ink); transform: translateZ(0); }
#avril-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; contain: strict; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 20%, rgba(255, 255, 255, 0) 38%);
}
.phone__island { position: absolute; top: 11px; left: 50%; z-index: 41; width: 126px; height: 37px; margin-left: -63px; pointer-events: none; contain: strict; }
.isl__body { position: absolute; inset: 0; border-radius: 18.5px; background: #000; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05); }
.isl__body::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3A4656 0, #121821 38%, #05070A 62%, #000 72%);
}
/* the static splash: only when the app is missing, or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--ink); color: var(--film); text-align: center; }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #avril-app, html[data-noapp] #avril-app, html:not(.st-on):not(.st-flat) #avril-app { display: none; }
.fb__av { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 260px auto 0; box-shadow: 0 0 0 2px var(--mint); }
.fb__w { margin-top: 26px; font: italic 400 64px/1 var(--f-serif); letter-spacing: -.02em; }
.fb__dot { display: inline-block; width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; background: var(--mint); }
.fb__t { margin-top: 12px; font: italic 400 22px/1.2 var(--f-serif); color: var(--mute); }
html.no-js img[data-src] { display: none; }

/* ---------------------------------------------------------------------------------------------- 7 · the call sheet */
.cs { background: var(--film); color: var(--ink); border-radius: 3px; padding: 0 14px 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); }
.cs__hd { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 10px; border-bottom: 1.5px solid var(--ink); }
.cs__app { font: italic 400 24px/1 var(--f-serif); letter-spacing: -.01em; }
.cs__dot { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: #2FA57B; vertical-align: .05em; }
.cs__tc0 { font: 400 11px/1 var(--f-mono); color: #6B665D; letter-spacing: .04em; }
.cs__r { display: grid; grid-template-columns: 60px 1fr; column-gap: 8px; align-items: baseline; padding: 9px 0 8px; border-bottom: 1px dashed rgba(var(--ink-rgb), .3); }
.cs__r:last-child { border-bottom: 0; }
.cs__tc { font: 400 11px/1.35 var(--f-mono); color: #6B665D; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs__x { color: var(--ink); }
.cs__k { font-family: var(--f-mono); font-weight: 500; font-size: .86em; letter-spacing: 0; color: #4D4A44; }
.cs__r--end .cs__v { font-weight: 600; }
.wd { white-space: nowrap; }
html.st-desk .cs { padding: 0 22px 8px; }
html.st-desk .cs__hd { padding: 16px 0 12px; }
html.st-desk .cs__app { font-size: 30px; }
html.st-desk .cs__tc0 { font-size: 12px; }
html.st-desk .cs__r { grid-template-columns: 96px 1fr; padding: 11px 0 10px; }
html.st-desk .cs__tc { font-size: 12px; }
html.st-on .cs { position: absolute; left: 0; top: 0; z-index: 21; transform-origin: 50% 0; opacity: 0; }
html.st-on .cs.is-on { will-change: transform, opacity, clip-path; }
html.st-on .cs__rows .cs__r { opacity: 0; }

/* ---------------------------------------------------------------------------------------------- 8 · Les chiffres */
.fig b { font-family: var(--f-mono); font-weight: 500; font-size: .96em; letter-spacing: -.01em; color: var(--film); }
.fig { color: var(--mute); }
html.st-on .figs { position: absolute; left: 0; top: 0; z-index: 22; }
html.st-on .fig + .fig { margin-top: 12px; }
/* desktop: a strip of film, three frames, one figure per frame */
html.st-on.st-desk .figs {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; padding: 30px 0;
  background: rgba(26, 25, 23, .92); border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, .9);
}
html.st-on.st-desk .figs::before, html.st-on.st-desk .figs::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 12px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--film-rgb), .14) 0 2.2px, transparent 2.8px) 0 0 / 16px 12px repeat-x;
}
html.st-on.st-desk .figs::before { top: 9px; }
html.st-on.st-desk .figs::after { bottom: 9px; }
html.st-on.st-desk .fig + .fig { margin-top: 0; box-shadow: inset 1px 0 0 var(--line); }
html.st-on.st-desk .fig { padding: 40px 44px 42px; color: rgba(var(--film-rgb), .78); }
html.st-on.st-desk .fig b { font-size: 1.12em; }
html.st-on.st-desk .c8__n4 { color: var(--film); }

/* ---------------------------------------------------------------------------------------------- 9 · Générique */
.c9__h1, .c9__h2 { display: block; }
.c9__h2 { color: var(--mint); }
.c9__c { color: var(--mute); }
.c9__c + .c9__c { margin-top: 4px; }
.c9__d { margin-top: 2px; }
.c9__c + .c9__d { margin-top: 14px; }
.c9__h { margin-top: 18px; }
.clap { position: relative; width: 220px; height: 64px; }
.clap__svg { width: 100%; height: 100%; overflow: visible; }
.clap__stick { transform-box: view-box; transform-origin: 1px 20px; }
.clap__stick rect, .clap__body { fill: var(--grain); stroke: var(--film); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.clap__z { fill: none; stroke: var(--film); stroke-width: 7; }
.clap__t { position: absolute; left: 0; right: 0; top: 22px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--mint); letter-spacing: .3em; }
.card9 { display: grid; gap: 10px; padding: 12px; border-radius: 6px; background: var(--grain); box-shadow: inset 0 0 0 1px var(--line); }
.card9:focus { outline: none; }
.who9 { display: grid; grid-template-columns: 52px 1fr 1fr; column-gap: 8px; align-items: center; }
.who9__f { grid-row: 1; grid-column: 1; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; justify-self: center; align-self: start; box-shadow: 0 0 0 1.5px var(--line); }
.who9__n { grid-row: 1; grid-column: 1; align-self: end; justify-self: center; margin-top: 38px; font: 400 10px/1 var(--f-mono); letter-spacing: .04em; color: var(--mute); }
.who9__b { grid-row: 1; grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 48px; padding: 0 10px;
  border-radius: 10px; background: var(--film); color: var(--ink); text-decoration: none; font: 500 15px/1.15 var(--f-sans); letter-spacing: -.005em;
  transition: transform .14s var(--ease-out); touch-action: manipulation; white-space: nowrap;
}
.btn--2 { background: transparent; color: var(--film); box-shadow: inset 0 0 0 1.5px rgba(var(--film-rgb), .5); }
.btn:active { transform: scale(.97); }
.btn span { min-width: 0; overflow: hidden; text-overflow: clip; }
.btn .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico__dot { stroke-width: 2.6; }
.card9 .btn:first-child { background: var(--mint); color: var(--ink); }
html.st-desk .card9 { padding: 18px; gap: 14px; }
html.st-desk .who9 { grid-template-columns: 64px 1fr 1fr; column-gap: 12px; }
html.st-desk .who9__f { width: 42px; height: 42px; }
html.st-desk .who9__n { margin-top: 46px; font-size: 11px; }
html.st-desk .btn { height: 54px; font-size: 16px; }
html.st-on .roll, html.st-on .end9 { position: absolute; left: 0; top: 0; z-index: 22; }
html.st-on .clap { opacity: 0; }
html.st-on .card9 .who9 { opacity: 0; }
html.st-on .card9 .btn { pointer-events: none; }
html.st-on .card9.live .btn { pointer-events: auto; }
html.st-on .end9 { pointer-events: none; }
html.st-on .end9 .card9.live { pointer-events: auto; }
html.st-on .sc-9.is-on .roll [data-x], html.st-on .sc-9.is-on .clap, html.st-on .sc-9.is-on .who9 { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear;
}
#dock.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; }
.pill {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 9px;
  border-radius: 24px; background: rgba(var(--film-rgb), .96); color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  font: 500 15px/1 var(--f-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease-out), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--film); }
.pill__faces img + img { margin-left: -8px; }
#dock.open .pill { opacity: 0; }
/* the autoplay control: bottom left, the contact pill keeps bottom right (as alan) */
#autoplay {
  position: fixed; z-index: 900; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
html.js:not(.st-on) #autoplay, html.st-flat #autoplay, html.st-fail #autoplay { display: none; }
#autoplay.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.auto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 17px 0 11px;
  border-radius: 24px; background: rgba(var(--film-rgb), .96); color: var(--ink); border: 0;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  font: 500 15px/1 var(--f-sans); white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out);
}
.auto:active { transform: scale(.96); }
.auto__i { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--mint); display: grid; place-items: center; flex: none; }
.auto__i svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.auto__i svg[fill="none"] { fill: none; width: 12px; height: 12px; }
.auto__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: rgba(var(--ink-rgb), .14); overflow: hidden; }
.auto__bar i { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
.auto-off { opacity: 0 !important; visibility: hidden !important; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .22s linear; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 22px; background: var(--grain); color: var(--film);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -24px rgba(0, 0, 0, .9);
  transform: translate3d(0, 112%, 0); transition: transform .4s var(--ease-ios);
}
#sheet.on { transform: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(var(--film-rgb), .2); margin: -8px auto 14px; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--film); }
.sheet__h { font: 600 26px/1.1 var(--f-sans); letter-spacing: -.02em; padding-right: 40px; }
.sheet__s { margin-top: 6px; font: 400 15px/1.3 var(--f-sans); color: var(--mute); }
.who { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--line); }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 600 17px/1.2 var(--f-sans); }
.who__n span { font: 400 13px/1.2 var(--f-mono); color: var(--mute); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }
.btn--s { flex: 1; }
#sheet .who__b .btn:first-child { background: var(--mint); }

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable, end states. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .bgw, html:not(.st-on) .reel, html:not(.st-on) .leader, html:not(.st-on) .vf, html:not(.st-on) .rec, html:not(.st-on) .reel4,
html:not(.st-on) .wipe, html:not(.st-on) .isl4, html:not(.st-on) .side4, html:not(.st-on) .slate, html:not(.st-on) .strip, html:not(.st-on) .dips6,
html:not(.st-on) .reps, html:not(.st-on) .bounce, html:not(.st-on) .nudge, html:not(.st-on) .tl__track, html:not(.st-on) .tl__ph,
html:not(.st-on) .clip__v, html:not(.st-on) .bn__v, html:not(.st-on) .cue, html:not(.st-on) .bin__band, html:not(.st-on) .cs__hd,
html:not(.st-on) .cs__tc, html:not(.st-on) .clap, html:not(.st-on) .toplight { display: none; }
html:not(.st-on) .sc { position: relative; padding: 72px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 24px; }
html:not(.st-on) .hero0 { margin: 0 auto 24px; aspect-ratio: 9 / 16; max-height: 78vh; overflow: hidden; }
html:not(.st-on) .hero0 img { width: 100%; height: 100%; object-fit: cover; }
html:not(.st-on) .ov { margin-bottom: 12px; }
html:not(.st-on) .cnt { margin-top: 22px; display: grid; gap: 16px; }
html:not(.st-on) .cnt__n { font-size: 44px; }
html:not(.st-on) .src { margin-top: 12px; }
html:not(.st-on) .c1__q { margin-top: 18px; }
html:not(.st-on) .tl__clips { display: grid; gap: 16px; margin-top: 22px; }
html:not(.st-on) .clip { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; }
html:not(.st-on) .clip__f { grid-row: span 2; }
html:not(.st-on) .clip__l { margin-top: 4px; }
html:not(.st-on) .c2__close { margin-top: 26px; }
html:not(.st-on) .c3__sub { margin-top: 8px; }
html:not(.st-on) .bin { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 22px; }
html:not(.st-on) .bn__q { margin-top: 12px; font-size: 22px; }
html:not(.st-on) .bn__s { margin-top: 6px; }
html:not(.st-on) .c4__cap { margin-top: 14px; }
html:not(.st-on) .c5__h { margin-bottom: 16px; }
html:not(.st-on) .shots { display: grid; gap: 12px; }
html:not(.st-on) .shot .card { font-size: 22px; }
html:not(.st-on) .c6__s, html:not(.st-on) .c6__a2 { margin-top: 10px; }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 34px 0 calc(852px * -.28 + 10px) calc(50% - 196.5px); transform: scale(.72); transform-origin: 50% 0; }
html:not(.st-on) .phone__fb { border-radius: 55px; }
html:not(.st-on) .c7__s { margin-top: 8px; }
html:not(.st-on) .cs { margin-top: 22px; padding-top: 6px; }
html:not(.st-on) .cs__r { grid-template-columns: 1fr; }
html:not(.st-on) .c7__tot { margin-top: 22px; }
html:not(.st-on) .figs { display: grid; gap: 12px; }
html:not(.st-on) .c8__n4 { margin-top: 14px; }
html:not(.st-on) .roll { margin-top: 8px; }
html:not(.st-on) .end9 { margin-top: 28px; }
html:not(.st-on) .card9 { margin-top: 16px; }
html:not(.st-on) .c9__foot { margin-top: 16px; }
html:not(.st-on) .sc-9 { padding-bottom: 110px; }
@media (min-width: 760px) {
  html:not(.st-on) .bin { grid-template-columns: repeat(4, 1fr); }
  html:not(.st-on) .hero0 { max-width: 420px; margin: 0 auto 24px; }
}
html.st-on .cs.cs--tight .cs__r { padding: 6px 0 5px; }
html.st-on .cs.cs--tight .cs__hd { padding: 9px 0 7px; }
html.st-on .card9 { opacity: 0; }
html.st-on .card9 .who9 { opacity: 0; }