/* DESKTOP hero ring (≥921px): layout and controls. One constant headline, the
   current page's name + line under it, the window with the other four pages
   around it, ← → beside it, one install button under it. Loaded after
   lantern-hero.css, so these rules win over its older two-column layout.
     layout (this): tokens, copy, stage, controls
     sides: still frame, side pages, page slide · pages: window content, Shelves
   Scripts: lantern-hero-ring.js, -carousel.js, -traps.js, -home-auto.js, lantern-deck.js.
   No width @media in these files: their <link media> in index.html gates them
   (desktop; phones too in ring mode — then lantern-hero-ring-phone.css adapts). */

/* ── tokens: the window, the cover-flow slots, the timing ──────────────── */
:root {
  /* narrower and lower than a real browser, with bigger type */
  --car-w: max(480px, min(680px, 46vw));
  --car-h: calc(var(--car-w) * .64);
  --car-s1: .74;
  --car-s2: .56;
  --car-dx1: calc(var(--car-w) * .6);
  --car-dx2: calc(var(--car-w) * .98);
  --car-dx3: calc(var(--car-w) * 1.3);
  --car-rot1: 24deg;
  --car-rot2: 34deg;
  /* near pages solid (a paper veil, not blur), far ones see-through */
  --car-o1: 1;
  --car-o2: .3;
  --car-persp: perspective(1600px);
  --car-t1r: var(--car-persp) translateX(var(--car-dx1)) rotateY(calc(-1 * var(--car-rot1))) scale(var(--car-s1));
  --car-t1l: var(--car-persp) translateX(calc(-1 * var(--car-dx1))) rotateY(var(--car-rot1)) scale(var(--car-s1));
  --car-t2r: var(--car-persp) translateX(var(--car-dx2)) rotateY(calc(-1 * var(--car-rot2))) scale(var(--car-s2));
  --car-t2l: var(--car-persp) translateX(calc(-1 * var(--car-dx2))) rotateY(var(--car-rot2)) scale(var(--car-s2));
  --car-t3r: var(--car-persp) translateX(var(--car-dx3)) rotateY(calc(-1 * var(--car-rot2))) scale(.4);
  --car-t3l: var(--car-persp) translateX(calc(-1 * var(--car-dx3))) rotateY(var(--car-rot2)) scale(.4);
  /* quick off the mark, soft landing: a press answers on the next frame */
  --car-dur: .44s;
  --car-ease: cubic-bezier(.22, .8, .24, 1);
}
/* the headline + the window + the button must fit one screen: the whole
   stage scales down on shorter screens (--car-z) */
  #hero {
    --car-z: 1;
    /* the headline's own height, so each page's line sits where Home's does */
    --h1-slot: calc(clamp(30px, 2.75vw, 42px) * 1.06 + 18px);
    /* the subhead's slot, then the install button's row, then the window */
    --car-line-h: 64px;
    --car-cta-h: 132px;
    --car-copy-h: calc(var(--h1-slot) + var(--car-line-h) + var(--car-cta-h));
    --hero-stage-x: 0px;
    --hero-stage-drift: 0px;
    padding-top: 64px;
  }
#hero .hero-copy-sh { display: none; }
@media (min-width: 921px) and (max-height: 1000px) { #hero { --car-z: .84; } }
@media (min-width: 921px) and (max-height: 900px) { #hero { --car-z: .78; } }
@media (min-width: 921px) and (max-height: 800px) { #hero { --car-z: .68; } }
@media (min-width: 921px) and (max-height: 720px) { #hero { --car-z: .6; } }

  /* ── one column: copy on top, stage under it ─────────────────────────── */
  #hero .hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--car-copy-h) auto;
    justify-items: center;
    align-items: start;
    align-content: start !important;
    row-gap: 18px;
    text-align: center;
  }

  /* ── the copy: every page's block shares the top cell. Home's block carries
     the ONE headline for the whole ring and never fades (only its line does);
     the others sit under it (padding-top = its height): gold name + one line. */
  #hero .hero-copy,
  #hero .hero-copy-p2,
  #hero .hero-copy-imm,
  #hero .hero-copy-p5,
  #hero .hero-copy-sh {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: center;
    width: min(760px, 100%);
    max-width: none !important;
    text-align: center;
  }
  #hero .hero-copy,
  #hero .hero-copy-sh { width: min(940px, 100%); }
  #hero .hero-copy-p2,
  #hero .hero-copy-imm,
  #hero .hero-copy-p5,
  #hero .hero-copy-sh { padding-top: var(--h1-slot); position: relative; }

  /* each page's block fades in place with a small lift */
  #hero .hero-copy-p2,
  #hero .hero-copy-imm,
  #hero .hero-copy-p5 { transform: translateY(14px); }
  body.hero-imm #hero .hero-copy-p2,
  body.hero-p5 #hero .hero-copy-imm { transform: translateY(-14px); }
  body.hero-p2 #hero .hero-copy-p2,
  body.hero-imm #hero .hero-copy-imm,
  body.hero-p5 #hero .hero-copy-p5 { transform: none; }
  /* Shelves is a page over Practice (body.hero-shelves, lantern-hero-ring.js) */
  #hero .hero-copy-sh {
    display: block; min-width: 0;
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity var(--dur-4) ease .28s, transform .72s var(--ease-out) .18s;
  }
  body.hero-shelves #hero .hero-copy-sh { opacity: 1; transform: none; pointer-events: auto; }
  body.hero-shelves #hero .hero-copy-p5 { opacity: 0 !important; transform: translateY(-14px) !important; pointer-events: none !important; }

  /* Home's block stays up on every page: only its line (and anything but the
     headline and the button) fades */
  #hero .hero-copy { position: relative; transform: none; }
  body.hero-p2 #hero .hero-copy,
  body.hero-imm #hero .hero-copy,
  body.hero-p5 #hero .hero-copy { opacity: 1 !important; transform: none !important; pointer-events: none; }
  #hero .hero-copy > .d-only > :not(.hcta):not(h1) { transition: opacity .35s ease, transform .5s var(--ease-out); }
  body.hero-p2 #hero .hero-copy > .d-only > :not(.hcta):not(h1),
  body.hero-imm #hero .hero-copy > .d-only > :not(.hcta):not(h1),
  body.hero-p5 #hero .hero-copy > .d-only > :not(.hcta):not(h1) { opacity: 0; transform: translateY(-14px); }

  /* the headline: one line, its second half amber. splitLines() wraps each
     <br>-separated half in a block .ln — inlined here; phones keep two lines */
  #hero .hero-copy h1 {
    white-space: nowrap;
    font-size: clamp(30px, 2.75vw, 42px) !important;
    line-height: 1.06;
    margin: 0 0 14px !important;
  }
  #hero .hero-copy h1 .ln,
  #hero .hero-copy h1 .ln > .i { display: inline-block; }
  /* the space before the <br> collapses inside the inline-block — put it back */
  #hero .hero-copy h1 .ln + .ln { margin-left: .26em; }
  #hero .hero-copy h1 .hero-h1-brk { display: none; }
  /* the amber half in General Sans semibold italic (601, loaded in index.html);
     the slant needs looser tracking or the letters and full stop run together */
  #hero .hero-copy h1 .hl-am { color: var(--amber-deep); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
  /* the Ukrainian subhead breaks after the comma */
  #hero .hero-copy .hsub .hsub-brk { display: inline; }
  #hero .hero-copy .hsub {
    text-wrap: balance;
    max-width: 64ch !important;
    margin: 0 auto !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
  }
  /* the "A Chrome extension" eyebrow is gone (it lives under the button now) */
  #hero .hero-copy .hero-eyebrow { display: none !important; }

  /* a page's name (gold) and its line */
  #hero .p2-eyebrow { display: none !important; }
  #hero .hero-copy-p2 .p2-eyebrow,
  #hero .hero-copy-imm .p2-eyebrow,
  #hero .hero-copy-p5 .p2-eyebrow,
  #hero .hero-copy-sh .p2-eyebrow {
    display: block !important; margin: 0 0 6px !important;
    font-family: var(--mono); font-size: var(--fs-eyebrow) !important; letter-spacing: .2em;
    text-transform: uppercase; color: var(--amber-deep) !important;
    /* the page's name sits under the window (owner 2026-09-27); its line
       stays up top. --car-cap-top: lantern-hero-carousel.js */
    position: absolute; left: 0; right: 0; top: var(--car-cap-top, 100vh);
  }
  #hero .hero-copy-p2 h2,
  #hero .hero-copy-imm h2,
  #hero .hero-copy-p5 h2,
  #hero .hero-copy-sh h2 {
    font-family: var(--sans); font-weight: 400 !important; letter-spacing: 0 !important;
    font-size: clamp(15px, 1.25vw, 18px) !important; line-height: 1.5 !important;
    color: var(--ink-70); margin: 0 !important;
  }
  #hero .hero-copy-p2 h2 br,
  #hero .hero-copy-imm h2 br,
  #hero .hero-copy-p5 h2 br { display: none; }
  #hero .hero-copy-p2 h2 .hl-am,
  #hero .hero-copy-imm h2 .hl-am,
  #hero .hero-copy-p5 h2 .hl-am,
  #hero .hero-copy-sh h2 .hl-am { color: var(--ink); font-weight: 600; }
  #hero .hero-copy-p2 .p2-sub,
  #hero .hero-copy-imm .p2-sub,
  #hero .hero-copy-p5 .p2-sub,
  #hero .hero-copy-sh .p2-sub { display: none !important; }

  /* ── one install button right under the subhead on every page, above the
     window, its fine print under it (owner 2026-09-27) ────────────────── */
  #hero .hero-copy .hcta {
    flex-direction: column; justify-content: center !important; align-items: center; row-gap: 10px;
    position: absolute; left: 0; right: 0; top: calc(var(--h1-slot) + var(--car-line-h) + 18px);
    margin: 0 !important; z-index: 6; pointer-events: auto;
  }
  #hero .hero-copy .hcta-fine { flex-basis: auto !important; width: auto !important; margin: 0 !important; text-align: center; }

  /* ── the stage: exactly the window's box, centred, never moving ────────── */
  #hero .hero-stage,
  body.hero-p2 #hero .hero-stage,
  body.hero-p3 #hero .hero-stage,
  body.hero-p5 #hero .hero-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center;
    width: var(--car-w);
    height: calc(var(--car-h) * var(--car-z));
    margin: 0 !important;
    transform: none;
    /* `scale` composes with the inline transform the phase engine writes here */
    scale: var(--car-z);
    transform-origin: 50% 0;
  }
  /* nothing drifts: lantern-v3.js moves [data-speed] .float with the mouse and
     scroll, and the window and Home word cards bob — the side pages and the
     still frame never follow, so all of it is off */
  #hero .hero-stage > .float { top: 0 !important; left: 0 !important; transform: none !important; }
  #hero .floatwrap,
  #hero .hw-card.rested { animation: none !important; }
  #worddeck .wd-card { --cdx: 0px !important; --crot: 0deg !important; }
  #worddeck .wd-card.in:hover:not(.ring-ready) { transform: none; }

  /* ── controls: ← → beside the window (spots measured by
     lantern-hero-carousel.js into --car-al / --car-ar / --car-ay). The caption
     row shows only on the wall and Install. The box spans the install button's
     slot — only the arrows and captions take clicks. */
  #d-deck { pointer-events: none; }
  #d-deck .d-arrow,
  #d-deck .d-chap { pointer-events: auto; }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-rail { visibility: hidden; }
  .d-rail .d-chap:not(.on) { display: none; }
  .d-rail .d-chap.on { cursor: default; }
  .d-rail .d-chap-num { display: none; }
  .d-chap.on,
  .d-chap.on:hover { background: none; }
  .d-chap.on .d-chap-name { color: var(--amber-deep); }

  /* one fixed width, or the measured arrow spots shift with the caption text */
  body:not(.ph-ev):not(.ph-cta) #d-deck { width: 360px; }
  /* amber discs beside the window; hover only lifts. lantern-hero.css keeps
     the base ink disc for the wall and Install bar. */
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow {
    position: absolute; top: var(--car-ay, 0px);
    transition: transform .18s cubic-bezier(.3, .7, .3, 1), background-color .18s ease, color .18s ease;
    background: var(--amber-deep); color: #fff;
    box-shadow: var(--shadow-1);
  }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-prev { left: var(--car-al, 0px); }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-next { left: var(--car-ar, 0px); }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow[aria-disabled="true"] { visibility: hidden; }
  /* the spots don't animate on ordinary page swaps (no left transition — that
     was the shimmy: the caption-width-driven --car-al/--car-ar jitter on every
     render). --car-ay only ever moves once, at the Shelves page's taller
     window (27.09) — that lone jump is what got the second click to miss, so
     top alone gets a short ease; it's a no-op everywhere else. */
  body:not(.ph-ev):not(.ph-cta) #d-deck.car-placed .d-arrow {
    transition: top .22s ease, transform .18s cubic-bezier(.3, .7, .3, 1), background-color .18s ease, color .18s ease, opacity .5s ease;
  }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow svg { color: #fff; }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow:hover:not([aria-disabled="true"]) {
    transform: scale(1.06);
  }
  body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow:active:not([aria-disabled="true"]) { transform: scale(.93); }

  /* ── the opening move: side pages and arrows start tucked behind the first
     page and glide out once (html.car-intro → car-intro-run) ─────────────── */
  html.car-intro #hero .car-side[data-rel] { transform: var(--car-persp) scale(.9) !important; }
  html.car-intro #d-deck .d-prev { opacity: 0; transform: translateX(70px); }
  html.car-intro #d-deck .d-next { opacity: 0; transform: translateX(-70px); }
  html.car-intro-run #hero .car-side {
    transition: transform 1.1s cubic-bezier(.2, .75, .2, 1), opacity .6s ease;
  }
  html.car-intro-run #hero .car-side[data-rel="2"],
  html.car-intro-run #hero .car-side[data-rel="-2"] { transition-delay: .1s; }
  html.car-intro-run body:not(.ph-ev):not(.ph-cta) #d-deck .d-arrow {
    transition: transform 1.1s cubic-bezier(.2, .75, .2, 1), opacity .6s ease .15s;
  }

  /* the #shelves section's traps are the ring's fifth page (phones in ring
     mode too); /#shelves opens the hero on Shelves. */
  #shelves { display: none !important; }