@import url('/world/tokens.css');
/* MAVYN — the world's components. The page's own stylesheet owns the nav, the buttons, the selling sections and the
   footer; this file owns the opening: the stage, the readout, the hero's words, the night's chapters, the
   desk labels, the HUD, the cursor and the sound prompt. Every value is a token. */
#stage{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;opacity:0;transition:opacity var(--d-6) var(--ease)}
#stage.on{opacity:1}
body.world-off #stage{opacity:0}
/* 2026-09-22 (Phase 3): NO GHOST AT THE EXIT - the moment the world stops filling the screen (body.world-leaving) it dims, so the
   orb and the wall do not hang in the black above the next section while the hand-off gradient catches up (the phone scroll showed it) */
body.world-exit #stage{opacity:0;transition:opacity .5s var(--ease)}   /* round 4: at half-covered, not at the first pixel (the phone's last chapter was dimmed) */
.fin,footer{position:relative;z-index:2;background-color:var(--ink)}   /* a colour UNDER .fin's own radial glow, not in place of it */
.act{position:relative;z-index:1}
html:not(.noworld) #stage.on~.act{z-index:3}   /* r6 b16: over .sell's hand-off gradient (it dimmed card 4's last lines) while the world runs - never the no-JS or
   no-world page, where the sticky readout would paint over the founder's note; here, as index.html's .act is in its <head> and this file loads after it */
/* 2026-09-22 (Phase 3): the opening stands on the site's ONE edge - the 1200px frame and side padding every section, the nav and
   every secondary page use (it was 72px against the sections' 120px at 1440) */
.act{--max:calc(1200px + 2 * clamp(20px,6vw,80px));--gutter:clamp(20px,6vw,80px)}
.sell{border-top:0!important}
.sell::before{content:'';position:absolute;left:0;right:0;top:-44vh;height:44vh;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,13,0) 0%,rgba(5,7,13,.55) 55%,var(--ink) 100%)}
/* the night line: the story's progress, under the nav */
.nightline{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-dawn);opacity:.9;pointer-events:none;transition:opacity var(--d-4)}
body.world-off .nightline{opacity:0}
/* the hero */
.hero.night{min-height:100svh;display:grid;align-content:center;padding:calc(var(--s-10) + var(--s-6)) var(--gutter) var(--s-9);max-width:var(--max);margin:0 auto;position:relative}
.hero.night::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 620px at 20% 52%, rgba(5,7,13,.66), transparent 70%);z-index:-1}
.hero.night h1{font-family:var(--disp);font-weight:700;font-size:var(--t-display);line-height:var(--t-display-lh);letter-spacing:var(--t-display-ls);max-width:14ch;margin:0 0 var(--s-5);text-wrap:balance}
.hero.night .sub{font-size:var(--t-lede);line-height:1.55;color:var(--text-2);max-width:52ch;margin:0 0 var(--s-6);text-wrap:pretty}
.hero.night .sub strong{color:var(--text);font-weight:500}
@media (max-width:560px){.hero.night .sub .lede-cut{display:none}}   /* r6 (R7-4): the phone lede is the full one with words deleted - four lines */
.hero.night .grad{background:linear-gradient(135deg,var(--g0,#2CCCD3),var(--g1,#6B54D3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero.night .ctas{display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero.night .editions-line a{white-space:nowrap}
.act>.readout{position:sticky;top:92px;z-index:3;height:0;box-sizing:border-box;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:baseline;gap:var(--s-4);font-family:var(--mono);color:var(--cyan-bright);pointer-events:none}
.act>.readout .time,.act>.readout .note{transition:font-size var(--d-4) var(--ease)}
.act>.readout.compact .time{font-size:20px}.act>.readout.compact .note{font-size:11.5px}
body.world-leaving .act.in>.readout,body.world-off .act.in>.readout{opacity:0;transition-delay:0s}
.readout .time{font-size:var(--t-readout);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;flex:none;white-space:nowrap}
.readout .time i{font-style:normal;animation:blink 1.1s ease-in-out infinite}
.readout .note{font-size:var(--t-eyebrow);letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--text-2);transition:opacity var(--d-3);min-width:0}
.readout .note.swap{opacity:0}
@keyframes blink{50%{opacity:.25}}
/* the opening (2026-09-22, Phase 3): the headline, the lede, the buttons and the nav are READABLE AT FIRST PAINT - no curtain, no
   masked words - and the world lights up behind them. Stripe paints content first; the curtain held the headline ~1.6 s (7.9 s on a
   slow phone), which the budget now measures. The word spans stay (the gradient words need them) and carry no motion. */
.w{display:inline-block;padding:0 .04em .1em 0;margin:0 -.04em -.1em 0}
.w i{display:inline-block;font-style:normal}
.nav{transition:opacity var(--d-5) var(--ease-out),transform var(--d-5) var(--ease-out),background .35s,border-color .35s}
/* the night's chapters */
.night .chap{min-height:100vh;display:grid;align-content:center;padding:0 var(--gutter) var(--s-9);max-width:var(--max);margin:0 auto}
@media (max-width:760px){.night .chap{min-height:80vh}   /* five viewports of sky before the product was the phone's first complaint */
  .night .chap:last-child{align-content:end;padding-bottom:max(6vh,96px)}}   /* r6 b16: card 4 at its chapter's foot, the wall whole above it. Not 130vh: the stops are quarters of the act (50vh more left cards 3 and 4 unlit at theirs); 96px = the HUD band (68) + an unlit card's 24px drop */
.night .chap:last-child .card{max-width:440px}
@media (min-width:1024px){.night .chap:last-child .card{max-width:max(360px,var(--span-4))}}   /* r6: card 4 on the grid's span-4 (from 1280; 360px under it, not 9 lines at 1024); the 7:10 wall is solved from its measured rect */
.night .chap.right{justify-items:end}
.night .chap .card{max-width:520px;padding:var(--s-5) var(--s-6);border:1px solid var(--hair-2);border-radius:var(--r-3);background:rgba(8,11,20,.88);transform:translateY(var(--s-5));opacity:0;transition:transform var(--d-4) var(--ease-out),opacity var(--d-4)}
.night .chap.in .card{transform:none;opacity:1}
.night .chap .card .eyebrow{display:flex;gap:var(--s-3);align-items:center;color:var(--cyan);margin-bottom:var(--s-4)}
.night .chap .card .eyebrow b{font-weight:400;color:var(--cyan-bright);white-space:nowrap}
@media(max-width:760px){.night .chap .card .eyebrow{letter-spacing:.14em;font-size:11px;flex-wrap:wrap;row-gap:4px}}   /* round 4: '7:02 / AM · THE FOLLOW- / THROUGH' broke three ways on a phone */
.night .chap h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.08;margin:0 0 var(--s-4)}
.night .chap p{color:var(--text-2);line-height:1.6;margin:0;font-size:1.05rem}
/* desk labels, projected from the world at 7:10 */
.desklabels{position:fixed;inset:0;z-index:1;pointer-events:none}
.dl{position:absolute;left:0;top:0;transform:translate(-50%,-100%);font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;opacity:0;transition:opacity var(--d-4)}
.dl::after{content:'';display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(180deg,var(--hair-3),transparent)}
.dl.on{opacity:1}
body.world-off .dl{opacity:0;transition:none}
/* the HUD: motion (the page's) + sound (the world's), and the legend */
.hud,.legend{--hud-in:16px}   /* r6 b16: from 1280 the HUD and the legend sit min(48, (gutter - 44) / 2) into the gutter */
@media (min-width:1280px){.hud,.legend{--hud-in:clamp(16px,calc((max(clamp(20px,6vw,80px),(100vw - 1200px) / 2) - 44px) / 2),48px)}}
.hud{position:fixed;left:var(--hud-in);bottom:var(--hud-in);z-index:60;display:flex;gap:8px;transition:opacity .25s}
body:not(.hud-placed) .hud{opacity:0}body.hud-side:not(.world-leaving):not(.world-off) .hud{left:auto;right:var(--hud-r)}   /* r6 b16: placed over a laptop's hero (placeHUD), a cut */
.hud button{font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);background:rgba(5,7,13,.6);border:1px solid var(--hair-2);border-radius:var(--r-pill);padding:0 var(--s-4);min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(10px);cursor:pointer;transition:color .2s,border-color .2s}
.hud button:hover{color:var(--cyan-bright);border-color:var(--cyan)}
.hud .led{width:6px;height:6px;border-radius:50%;background:var(--text-3);transition:background .2s,box-shadow .2s}
/* r6 b16 (fixer): Motion speaks like Sound - a 16 px glyph, pause bars while the page moves (cyan, as Sound's waves), a play mark once it
   is paused, by the user or the system (aria-pressed, which motionPaint keeps) */
.hud #motionBtn .led{width:16px;height:16px;flex:none;border-radius:0;box-shadow:none;color:var(--cyan-bright);background:linear-gradient(currentColor,currentColor) 4.75px 3.5px/1.5px 9px no-repeat,linear-gradient(currentColor,currentColor) 9.75px 3.5px/1.5px 9px no-repeat}
.hud #motionBtn[aria-pressed="true"] .led{color:inherit;background:linear-gradient(currentColor,currentColor);clip-path:polygon(31% 22%,31% 78%,78% 50%)}
.spk{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.spk .b{fill:currentColor}.spk .k{stroke:#05070D;stroke-width:4}
#hudSound[aria-pressed="true"] .spk{color:var(--cyan-bright)}#hudSound[aria-pressed="true"] .spk .x,#hudSound:not([aria-pressed="true"]) .spk .w{display:none}   /* r6 b16: muted (a slash) or on (waves) */
.legend{position:fixed;right:var(--hud-in);bottom:var(--hud-in);min-height:44px;z-index:60;font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);display:flex;gap:14px;align-items:center;transition:opacity var(--d-4)}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
body.world-off .legend,body.world-leaving .legend{opacity:0}
.dbg{position:fixed;right:16px;top:76px;z-index:90;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-bright);background:rgba(5,7,13,.75);border:1px solid var(--accent-hair);border-radius:var(--r-1);padding:8px 10px}
/* the sound prompt: an offer, never a gate */
.prompt{position:static;z-index:61;font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--text);background:rgba(5,7,13,.72);border:1px solid var(--accent-hair);border-radius:var(--r-pill);padding:0 16px;min-height:44px;display:inline-flex;align-items:center;gap:10px;backdrop-filter:blur(10px);opacity:0;transform:translateY(8px);transition:opacity var(--d-4) var(--ease),transform var(--d-4) var(--ease);pointer-events:none;cursor:pointer}
.prompt.on{opacity:1;transform:none;pointer-events:auto}
.prompt .led{width:6px;height:6px;border-radius:50%;background:var(--text-3)}   /* an offer, not a status: unlit until it is taken */
@media (max-width:760px){.legend{display:none}.hero.night{padding-top:120px}.act>.readout{top:84px}.act>.readout .time{font-size:20px}.act>.readout .note{font-size:11.5px}
  .dl{font-size:10px;letter-spacing:.14em}.dl::after{height:14px;margin-top:4px}
  .hud #motionBtn,.hud .prompt{display:none}.hud #hudSound{width:44px;min-width:44px;padding:0;justify-content:center}.hud #hudSound .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:480px){.hero.night .ctas{display:grid;grid-template-columns:1fr}   /* Phase 3: the ask's longer label wrapped in a 2-up row */
  .hero.night .ctas .btn{width:100%}.hero.night .btn{min-height:48px;justify-content:center;padding-left:var(--s-3);padding-right:var(--s-3)}}
@media (prefers-reduced-motion:reduce){.readout .time i{animation:none}.prompt{transition:none}.night .chap .card{transition:none}}
html.motion-off .readout .time i{animation:none}html.motion-off .night .chap .card{transition:none}

/* the prompt inside the HUD row: slides out to the right of the Sound button, never over the page's words */
.hud .prompt{position:static;min-width:0;max-width:0;padding:0;border-width:0;opacity:1;transform:none;overflow:hidden;white-space:nowrap;transition:max-width var(--d-5) var(--ease),padding var(--d-5) var(--ease),border-width var(--d-2),opacity var(--d-4)}
.hud .prompt.on{max-width:240px;padding:0 16px;border-width:1px}

/* r6 b16: from the hand-off (was: once parked - the pills covered body copy at 1280) the HUD leaves the reading column: from 1024 two
   44px discs STACKED in the gutter (x 16-60 at 1024; side by side need 96px) that open rightward on hover or focus; at 761-1023 none
   (the nav sheet carries both toggles); a phone as before */
.hud button{position:relative}
@media (min-width:1024px){
  body:is(.world-leaving,.world-off) .hud{flex-direction:column;align-items:flex-start}
  body:is(.world-leaving,.world-off) .hud button:not(.prompt){width:44px;min-width:44px;padding:0;justify-content:center;transition:width var(--d-3) var(--ease),padding var(--d-3) var(--ease),color .2s,border-color .2s}
  body:is(.world-leaving,.world-off) .hud button:not(.prompt) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body:is(.world-leaving,.world-off) .hud button:not(.prompt):is(:hover,:focus-visible){width:auto;padding:0 14px;background:var(--surface-1)}   /* opened over the page: opaque */
  body:is(.world-leaving,.world-off) .hud button:not(.prompt):is(:hover,:focus-visible) .lbl{position:static;width:auto;height:auto;clip:auto}
}
/* r6 b16 (fixer): under 1280 the discs sit in the MIDDLE of the gutter (8.7 px off the screen and off the text at 1024, where x 16-60
   left the headline 1.4 px) - the same rule as the inset from 1280 (16.4 there), without its 16 px floor */
@media (min-width:1024px) and (max-width:1279px){body:is(.world-leaving,.world-off) .hud{--hud-in:max(8px,calc((clamp(20px,6vw,80px) - 44px) / 2))}}
@media (min-width:761px) and (max-width:1023px){body:is(.world-leaving,.world-off) .hud{opacity:0;visibility:hidden;pointer-events:none}}
@media (max-width:760px){body.world-off .hud{display:none}}
body:is(.world-leaving,.world-off) .hud .prompt{display:none}
.sheet-tog{display:flex;gap:8px;padding:14px 0 4px;border-top:1px solid var(--hair);margin-top:8px}
.sheet-tog button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);background:rgba(255,255,255,.03);border:1px solid var(--hair-2);border-radius:var(--r-pill);padding:0 var(--s-4);min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.sheet-tog .led{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.sheet-tog [data-proxy="motionBtn"] .led,.sheet-tog [data-proxy="hudSound"].on .led{background:var(--cyan-bright);box-shadow:0 0 10px var(--cyan-bright)}
html.motion-off .sheet-tog [data-proxy="motionBtn"] .led{background:var(--text-3);box-shadow:none}
/* 2026-09-18 (4b): the chrome yields to a lit card; the sound offer takes the toggle's place while it shows; on a phone the HUD
   leaves with the world so its ring never lands on the first product heading */
body.hud-yield .hud,body.hud-yield .legend,body.hud-lone .hud{opacity:0;pointer-events:none}body.legend-yield .legend{opacity:0}   /* r6 b16: each alone, over the hero (placeHUD, yieldHUD) */
body.readout-yield .act>.readout{opacity:0;transition:opacity .2s}
.prompt:not(.on){display:none}
body:not(.world-leaving) .hud:has(.prompt.on) #hudSound{display:none}
@media (max-width:760px){body.world-leaving .hud{opacity:0;pointer-events:none}}
/* r6 phone-edges (A): THE NIGHT SETTLES INTO SAFARI'S BAR. iOS 26 paints the page's own ground (--ink) in the band behind its floating
   bar, while the fixed world (#stage) stops at the visible viewport's foot: a navy-purple world on a flat ink band read as "cut off".
   On a phone the viewport's foot fades to exactly --ink (its last 2 px solid), so the band continues the screen at every scroll. It is a
   fixed, pointer-events:none layer at z 0, last in the tree: over the world (#stage, z 0, earlier) and under every word and control
   (.act z 1/3, .sell and .fin z 2, the seat names z 1, the HUD z 60). A laptop has no bottom bar - none there; a landscape phone has one */
@media (max-width:760px),(hover:none) and (pointer:coarse) and (max-height:540px){
  body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:clamp(112px,19vh,168px);z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,7,13,0),rgba(5,7,13,.03) 30%,rgba(5,7,13,.1) 50%,rgba(5,7,13,.22) 65%,rgba(5,7,13,.4) 76%,rgba(5,7,13,.6) 85%,rgba(5,7,13,.82) 93%,var(--ink) calc(100% - 2px))}}
/* r6 phone-edges (B): THE EDITIONS LINE IS ONE UNIT on a phone - built from its own markup, untouched (a span around the label or the
   pair changed what a Range reads off the line, and with it the hero's camera and MAVIS's keep-out on every touch screen over 760: the
   hazard review, round 1). The line is a wrapping flex row: its label is the line's own text (an anonymous item), a zero-height break
   (::after, order 1) stands between it and the pair (order 2). Its own width decides (a container query, so Inter, a fallback face or a
   larger text size each measure themselves): the pair on one line with its dot where it fits (>= 22em: 430 to 360), else the dot is
   the break and it is a link a row (320); the whole line on one where that fits (>= 29em). Under a coarse pointer each link keeps its
   44 px; the pair's row is drawn up by half its excess, so label and pair read on the line's own 1.5 rhythm, and a stack keeps 44 */
@media (max-width:760px){
  .hero.night .editions-line{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:baseline;line-height:1.5}
  .hero.night .editions-line::after{content:'';order:1;flex:0 0 100%;height:0}
  .hero.night .editions-line a,.hero.night .editions-line .sep{order:2}
  .hero.night .editions-line a{margin-right:0}
  .hero.night .editions-line .sep{display:block;white-space:pre;flex:0 0 100%;height:0;overflow:hidden;visibility:hidden}
  @container (min-width:22em){.hero.night .editions-line .sep{flex:none;height:auto;overflow:visible;visibility:visible}}
  @container (min-width:29em){
    .hero.night .editions-line a,.hero.night .editions-line .sep{order:0}
    .hero.night .editions-line a:first-of-type{margin-left:.28em}}}
@media (max-width:760px) and (pointer:coarse){
  @container (min-width:22em) and (width < 29em){
    .hero.night .editions-line a,.hero.night .editions-line .sep{margin-top:calc((1.5em - 44px) / 2)}}}