/* NovaStrum — the ten heavens.
   One film behind the page, ten heavens of copy over it. Tokens and the look come from the
   approved prototype (deep space, cream, gilt; Archivo + Cormorant Garamond). The page is
   native scrolling: each .heaven is 100svh plus its scrub distance, its .stage sticks while
   the film plays through, the copy reveals on .is-live and fades out through --out. */

:root{
  --space:#07060F; --cream:#F1EEE0; --ink:#07060F; --gilt:#D9B46A; --blaze:#F0721A; --coral:#FB7185;
  --muted:rgba(241,238,224,.8); --body:rgba(241,238,224,.92); --ink-muted:rgba(7,6,15,.72); --ink-body:#1E1810; --ink-label:#5A4A2A; --rule:rgba(217,180,106,.38);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
/* Greek: neither Archivo nor Cormorant Garamond ships Greek glyphs, so /el/ uses two faces that do
   (loaded only on that page, see pages/home.ts); the wordmark keeps Archivo for its width axis */
html[lang="el"]{ --serif:"EB Garamond","Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:"Noto Sans","Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto; }
html,body{ margin:0; background:var(--space); color:var(--cream); overflow-x:clip; }
body{ font:300 16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; border-radius:4px; }
html.sheet-open, html.sheet-open body, html.chapters-open, html.chapters-open body, html.lore-open, html.lore-open body{ overflow:hidden; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.005em; margin:0; }

/* ---------- the film ---------- */
#lvh-probe{ position:absolute; top:0; left:-9999px; width:1px; height:100lvh; visibility:hidden; pointer-events:none; }
#film{ position:fixed; top:0; left:0; width:100%; height:100lvh; z-index:0; background:var(--space); }
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; transition:opacity .6s;
  background:linear-gradient(180deg, rgba(7,6,15,.42) 0, transparent 22%, transparent 72%, rgba(7,6,15,.35) 100%); }
html.tone-light body::before{ opacity:0; }   /* bright heavens: the veil does the work, no muddy band */
@media (min-width:960px){
  body::before{ background:linear-gradient(90deg, rgba(7,6,15,.38) 0, transparent 26%, transparent 74%, rgba(7,6,15,.38) 100%),
    linear-gradient(180deg, rgba(7,6,15,.4) 0, transparent 16%, transparent 84%, rgba(7,6,15,.35) 100%); }
}

/* the warp: poster + skeleton while a far heaven loads */
#warp{ position:fixed; inset:0; z-index:2; background:var(--space); opacity:0; transition:opacity .42s ease; }
#warp.on{ opacity:1; }
#warp[hidden]{ display:none; }
#warp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background-size:cover; background-position:center; }
#warp .skel{ position:absolute; left:22px; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); width:min(22rem, 70vw); display:grid; gap:.5rem; transition:opacity .25s; }
#warp .skel[hidden]{ display:none; }
#warp .skel.off{ opacity:0; }
#warp .warp-label{ margin:0; font:500 .62rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gilt); text-shadow:0 0 14px rgba(7,6,15,.9), 0 0 2px rgba(7,6,15,.9); }
#warp .sk-line{ display:block; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(217,180,106,.12) 0%, rgba(217,180,106,.9) 50%, rgba(217,180,106,.12) 100%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (min-width:960px){ #warp .skel{ left:calc(4.5vw + 2.2rem); bottom:5vh; } }

/* ---------- bar ---------- */
.bar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px; pointer-events:none; transition:padding .6s var(--ease), background .6s, border-color .6s; }
.bar > *{ pointer-events:auto; }
.mark{ display:inline-flex; align-items:center; gap:.6rem; font-family:"Archivo",var(--sans); font-variation-settings:"wdth" 112; font-weight:300; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; font-size:.82rem; color:var(--cream); }
.mark .dot{ width:7px; height:7px; border-radius:50%; background:var(--gilt); flex:none;
  box-shadow:0 0 0 1px rgba(217,180,106,.35), 0 0 14px 2px rgba(217,180,106,.5); transition:transform .4s; }
.lang{ margin-left:0; font:500 .7rem/1 var(--sans); letter-spacing:.14em; text-decoration:none; padding:.55rem .7rem; border-radius:999px;
  border:1px solid rgba(241,238,224,.28); color:var(--cream); }
.lang:hover{ border-color:var(--gilt); color:var(--gilt); }
/* chapters: the current numeral in the bar, the ten in a drawer */
.chap{ all:unset; pointer-events:auto; cursor:pointer; margin-left:auto; display:inline-flex; align-items:center; gap:.55rem; height:34px; padding:0 .8rem 0 .7rem; border-radius:999px;
  border:1px solid rgba(241,238,224,.28); color:var(--cream); font:500 .72rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; max-width:9rem;
  background:rgba(7,6,15,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .3s, color .3s; }
.chap:hover, .chap[aria-expanded="true"]{ border-color:var(--gilt); color:var(--gilt); }
.chap:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; }
.chap-i{ display:grid; gap:3px; width:12px; flex:none; } .chap-i b{ display:block; height:1px; background:currentColor; } .chap-i b:nth-child(2){ width:8px; }
.chap-n{ font:400 .82rem/1 var(--serif); letter-spacing:.04em; color:var(--gilt); } .chap-n:empty{ display:none; }
.chap-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:599px){ .chap-t{ display:none; } .chap-n:empty + .chap-t{ display:inline; } }   /* “☰ IV” on phones; “☰ Chapters” at the ground */
@media (max-width:379px){ .chap-t{ display:none !important; } }
@media (min-width:960px){ .chap{ margin-left:0; margin-right:.9rem; max-width:13rem; } }
.nav{ display:none; }
html.sailed .bar{ padding-top:calc(env(safe-area-inset-top,0px) + 10px); padding-bottom:10px;
  background:linear-gradient(rgba(7,6,15,.82), rgba(7,6,15,.5) 62%, rgba(7,6,15,0)); }
@media (min-width:960px){
  .bar{ padding:26px 4.5vw 22px; }
  .lang{ margin-left:0; }
  .nav{ display:flex; gap:0; margin-left:auto; margin-right:1.4rem; align-items:stretch; }
  .nav a{ position:relative; display:grid; justify-items:center; align-content:center; gap:.5rem; padding:0 1.5rem .55rem; text-decoration:none; }
  .nav a + a{ border-left:1px solid rgba(241,238,224,.14); }
  .nav .rn{ font:300 .62rem/1 var(--sans); letter-spacing:.3em; color:var(--gilt); opacity:.85; transition:opacity .35s, transform .45s, height .45s; }
  .nav .lb{ font:400 .78rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--cream); opacity:.78; white-space:nowrap; transition:opacity .35s, font-size .4s; }
  .nav a::after{ content:""; position:absolute; left:1.4rem; right:1.4rem; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--gilt), transparent);
    transform:scaleX(0); transition:transform .5s var(--ease); }
  .nav a:hover::after, .nav a.on::after{ transform:scaleX(1); }
  .nav a:hover .lb, .nav a.on .lb{ opacity:1; }
  .nav .star{ position:absolute; top:-9px; left:50%; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--cream); opacity:0; transform:scale(.4);
    transition:opacity .45s, transform .45s; box-shadow:0 0 10px 2px rgba(241,238,224,.65); }
  .nav a:hover .star, .nav a.on .star{ opacity:1; transform:scale(1); }
  html.sailed .bar{ padding-top:14px; padding-bottom:14px; backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
    background:linear-gradient(rgba(7,6,15,.5), rgba(7,6,15,.3)); border-bottom:1px solid rgba(217,180,106,.18); }
  html.sailed .nav a{ padding-bottom:.35rem; }
  html.sailed .nav .rn{ opacity:0; transform:translateY(-6px); height:0; }
  html.sailed .nav .lb{ font-size:.72rem; letter-spacing:.18em; }
  html.sailed .mark .dot{ transform:scale(.8); }
}

/* Start a project: a gilded drop */
.cta-start{ position:relative; display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; text-transform:uppercase; letter-spacing:.18em;
  padding:.72rem 1.15rem .72rem 1.25rem; border:1px solid var(--rule); border-radius:999px; overflow:hidden;
  background:linear-gradient(120deg, rgba(217,180,106,.14), rgba(217,180,106,.04)); color:var(--cream); text-decoration:none; font:500 .74rem/1 var(--sans);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .45s, background .45s, transform .25s, box-shadow .45s; }
.cta-start .t{ position:relative; z-index:2; white-space:nowrap; }
.cta-start .drop{ position:relative; z-index:2; width:9px; height:9px; flex:none; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(circle at 34% 30%, #FBE6B4, var(--gilt) 55%, #8A6420);
  box-shadow:0 0 0 1px rgba(217,180,106,.4), 0 0 12px 2px rgba(217,180,106,.55); transition:transform .55s var(--ease), box-shadow .55s; }
.cta-start::before{ content:""; position:absolute; inset:0; z-index:1; opacity:0; background:radial-gradient(120% 160% at 88% 50%, rgba(217,180,106,.5), transparent 62%); transition:opacity .55s; }
.cta-start .edge{ position:absolute; inset:-1px; border-radius:inherit; padding:1px; opacity:0; z-index:1;
  background:linear-gradient(120deg, rgba(217,180,106,.15), #FBE6B4, var(--gilt), #FBE6B4, rgba(217,180,106,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .45s; }
.cta-start:hover{ border-color:transparent; transform:translateY(-1px); background:linear-gradient(120deg, rgba(217,180,106,.26), rgba(217,180,106,.1));
  box-shadow:0 14px 36px -16px rgba(217,180,106,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.cta-start:hover .edge, .cta-start:hover::before{ opacity:1; }
.cta-start:hover .drop{ transform:translateY(3px) scale(1.06); box-shadow:0 0 0 1px rgba(217,180,106,.55), 0 0 20px 4px rgba(217,180,106,.75); }
.cta-start:active{ transform:translateY(0) scale(.985); }
.cta-lg{ padding:.9rem 1.5rem .9rem 1.65rem; font-size:.78rem; }
.cta-lg .drop{ width:11px; height:11px; }
.bar .cta-start{ padding:.6rem .9rem .6rem 1rem; font-size:.66rem; }
.bar .cta-start .t{ display:none; }
@media (min-width:600px){ .bar .cta-start .t{ display:inline; } .bar .cta-start{ padding:.72rem 1.15rem .72rem 1.25rem; font-size:.74rem; } }

.ghost{ position:relative; display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; text-decoration:none; text-transform:uppercase; letter-spacing:.18em;
  font:500 .74rem/1 var(--sans); color:var(--cream); padding:.72rem 1.35rem; border:1px solid rgba(241,238,224,.42); border-radius:999px; overflow:hidden;
  background:rgba(7,6,15,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .45s, background .45s, transform .25s; }
.ghost::after{ content:""; width:14px; height:1px; background:currentColor; opacity:.7; transition:width .45s var(--ease); }
.ghost:hover{ border-color:var(--gilt); background:rgba(241,238,224,.14); transform:translateY(-1px); box-shadow:0 12px 34px -16px rgba(217,180,106,.8); }
.ghost:hover::after{ width:22px; }
.ctas{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1.3rem; }
.ctas .ghost, .ctas .cta-start{ height:46px; padding-top:0; padding-bottom:0; }
@media (min-width:960px){ .ctas .ghost, .ctas .cta-start{ height:52px; font-size:.9rem; padding-left:1.5rem; padding-right:1.5rem; } }

/* ---------- the rail: ten rungs ---------- */
.rail{ position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:.55rem; align-items:flex-end; transition:opacity .5s; }
.rail button{ all:unset; cursor:pointer; display:flex; align-items:center; gap:.6rem; opacity:.5; transition:opacity .3s; padding:2px 0; }
.rail button:hover, .rail button.on{ opacity:1; }
.rail button:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; border-radius:4px; }
.rail .lbl{ display:none; font:300 .62rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--cream); opacity:0; transform:translateX(6px); transition:opacity .3s, transform .3s; white-space:nowrap; }
.rail b{ font:400 .6rem/1 var(--serif); color:var(--cream); min-width:1.4rem; text-align:right; letter-spacing:.04em; }
.rail i{ display:block; width:12px; height:1px; background:var(--cream); transition:width .3s, background .3s; }
.rail button.on i{ width:22px; background:var(--gilt); }
.rail button.on b{ color:var(--gilt); }
html.fullframe .rail{ opacity:.35; }
html.fullframe .rail .lbl{ opacity:0 !important; }
@media (min-width:960px){
  .rail{ right:3vw; gap:.85rem; }
  .rail .lbl{ display:block; }
  .rail button:hover .lbl, .rail button.on .lbl{ opacity:.9; transform:none; }
  .rail b{ font-size:.7rem; }
  .rail i{ width:22px; } .rail button.on i{ width:38px; }
}
@media (max-width:959px){ .rail{ display:none; } }   /* the chapters drawer does this job on phones */
html.tone-light .rail b, html.tone-light .rail .lbl{ color:#2A2213; text-shadow:0 0 8px rgba(252,249,240,.8); }
html.tone-light .rail i{ background:#2A2213; }
html.tone-light .rail button.on b{ color:#8A6420; } html.tone-light .rail button.on i{ background:#8A6420; }

/* ---------- heavens ---------- */
main{ position:relative; z-index:3; }
.heaven{ position:relative; height:calc(100svh + var(--scrub-vh, 0) * 1svh); }
.heaven--flow{ height:auto; min-height:100svh; }
.stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.heaven--flow .stage{ position:relative; height:auto; min-height:100svh; overflow:visible; }
.poster{ position:absolute; inset:0; display:none; }
.poster img{ display:block; width:100%; height:100%; object-fit:cover; }
html:not(.film-live) [data-h="0"] .poster{ display:block; }

.chapter{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:center; padding:0 22px; text-align:center; pointer-events:none; opacity:0; transition:opacity .35s; }
/* the card sits on its own dark plaque, so the name reads on the brightest frame (CJ, 27 Oct); no blur — it is on screen while the stage slides */
.ch-card{ display:inline-flex; flex-direction:column; align-items:center; max-width:100%; padding:1.1rem 1.8rem 1.3rem; border-radius:22px; border:1px solid rgba(217,180,106,.55);
  background:linear-gradient(160deg, rgba(28,22,15,.74), rgba(7,6,15,.64) 55%, rgba(20,15,10,.72));
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95), 0 0 60px -20px rgba(217,180,106,.35), inset 0 1px 0 rgba(255,244,214,.14); }
.stage.is-arriving .chapter{ opacity:1; }
/* the chapter card, while a stage slides in: the numeral and the chapter's name, both at title size */
.ch-num{ display:block; font:300 clamp(4.5rem, 12vw, 8.5rem)/1 var(--serif); color:var(--gilt); text-shadow:0 0 30px rgba(7,6,15,.9), 0 0 2px rgba(7,6,15,.9); }
.ch-name{ display:block; margin:.35rem 0 0; font:400 clamp(2rem, 8vw, 3.6rem)/1.1 var(--serif); letter-spacing:.01em; color:var(--cream);
  text-shadow:0 2px 28px rgba(7,6,15,.9), 0 0 10px rgba(7,6,15,.7), 0 0 2px rgba(7,6,15,.85); }
@media (min-width:960px){ .ch-name{ font-size:clamp(2.6rem, 3.6vw, 4rem); } }


/* copy over the film. The .copy box itself never carries opacity, filter or mask: it is the
   backdrop root for the veil, and any of those would cut the veil's blur off from the canvas. */
.copy{ position:absolute; left:22px; right:22px; bottom:calc(env(safe-area-inset-bottom,0px) + 30px); max-width:34rem; z-index:2; color:var(--cream);
  --vx:64px; --vy:60px; --vf:36px; --vblur:14px; --vsat:1.08; --vtint:rgba(7,6,15,.62); }
/* the veil: the film behind the words, blurred and tinted, feathered on every side by a mask — no card.
   --vx/--vy = reach beyond the text box, --vf = feather depth inside that reach */
.copy > .veil{ position:absolute; z-index:-1; inset:calc(-1 * var(--vy)) calc(-1 * var(--vx)); pointer-events:none; border-radius:28px;
  background:var(--vtint);
  -webkit-backdrop-filter:blur(var(--vblur)) saturate(var(--vsat)); backdrop-filter:blur(var(--vblur)) saturate(var(--vsat));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--vf), #000 calc(100% - var(--vf)), transparent),
                     linear-gradient(180deg, transparent, #000 var(--vf), #000 calc(100% - var(--vf)), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 var(--vf), #000 calc(100% - var(--vf)), transparent),
             linear-gradient(180deg, transparent, #000 var(--vf), #000 calc(100% - var(--vf)), transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity:0; transform:none; transition:opacity .5s ease; }
.copy > *{ opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i, 0) * 80ms); }
.stage.is-live .copy > *{ opacity:1; transform:none; }
/* the chapter title: big, and ruled off from what follows, like a markdown heading */
.copy h2{ font-size:clamp(2.4rem, 9.4vw, 3.4rem); line-height:1.04; padding-bottom:.6rem; margin-bottom:.25rem; border-bottom:1px solid rgba(217,180,106,.5); }
.lede{ margin:.9rem 0 0; font-size:1.06rem; line-height:1.6; max-width:30rem; color:var(--body); }
/* shadows are a hairline of definition now; the veil does the work (.copy .climb-h / .copy blockquote p outrank .copy p) */
h1, .copy h2, .copy .climb-h, .copy blockquote p, .quiet{ text-shadow:0 1px 18px rgba(7,6,15,.35), 0 0 1px rgba(7,6,15,.5); }
.copy p, .copy li, .copy small{ text-shadow:0 0 8px rgba(7,6,15,.4); }

/* bright stretches of the film: the same dark veil, a touch deeper, cream type throughout (CJ, 27 Oct: no pale backings) */
.stage[data-tone="light"] .copy{ --vtint:rgba(7,6,15,.7); --vsat:1; }
/* on a wide screen the darker pool needs a deeper feather, or its corners read as a panel */
@media (min-width:960px){ .stage[data-tone="light"] .copy{ --vx:150px; --vy:160px; --vf:130px; } }

@media (min-width:960px){
  .copy{ left:4.5vw; right:auto; bottom:auto; top:50%; transform:translateY(-50%); width:min(33rem, 38vw); max-width:none; padding-left:2.2rem;
    border-left:1px solid rgba(217,180,106,.4); --vx:104px; --vy:116px; --vf:80px; --vblur:18px; }   /* deep feather: a pool, not a panel */
  .copy::before{ content:attr(data-num); position:absolute; left:2.2rem; top:-2.4rem; font:500 .72rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
    color:var(--gilt); white-space:nowrap; text-shadow:0 0 18px rgba(217,180,106,.5); }
  .copy h2{ font-size:clamp(3rem, 4.4vw, 4.6rem); line-height:1.02; letter-spacing:-.012em; }
  .lede{ font-size:1.08rem; line-height:1.62; max-width:28rem; }
}

/* the ground */
.copy--hero{ left:0; right:0; bottom:auto; top:calc(env(safe-area-inset-top, 0px) + 140px); transform:none; max-width:none; text-align:center; padding:0 22px; border:0; }   /* above the drop, in the dark sky (CJ, 27 Oct) */
.copy--hero::before{ content:none; }
/* the ground has no veil (CJ, 27 Oct): the golden drop stays in full view; the words carry shadows instead */
.copy--hero > .veil{ display:none; }
.word{ font-family:"Archivo",var(--sans); text-shadow:0 2px 30px rgba(7,6,15,.9), 0 0 12px rgba(7,6,15,.7), 0 0 3px rgba(7,6,15,.85); font-variation-settings:"wdth" 112; font-weight:300; letter-spacing:.2em; text-transform:uppercase; font-size:clamp(1.9rem, 8.6vw, 4.8rem); line-height:1; margin:0 -.2em 0 0; white-space:nowrap; }
.copy--hero .lede{ margin:1.1rem auto 0; text-align:center; color:var(--cream); text-shadow:0 1px 18px rgba(7,6,15,.9), 0 0 8px rgba(7,6,15,.7), 0 0 2px rgba(7,6,15,.85); }
.copy--hero .cue{ color:var(--cream); text-shadow:0 1px 12px rgba(7,6,15,.9), 0 0 2px rgba(7,6,15,.8); }
.cue{ display:inline-flex; flex-direction:column; align-items:center; gap:.7rem; margin-top:1.8rem; text-decoration:none; color:var(--muted); font:500 .68rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; }
.cue i{ display:block; width:1px; height:46px; background:linear-gradient(var(--gilt), transparent); position:relative; overflow:hidden; }
.cue i::after{ content:""; position:absolute; left:0; top:-30%; width:1px; height:30%; background:var(--cream); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ to{ top:110%; } }
@media (min-width:960px){
  .copy--hero{ left:3.4vw; right:auto; top:50%; transform:translateY(-50%); width:min(40rem, 44vw); text-align:left; padding:0 0 0 2.2rem; }
  .copy--hero .lede{ margin-left:0; text-align:left; }
  .word{ font-size:clamp(3.1rem, 4.4vw, 4.8rem); letter-spacing:.17em; }
}

/* I · the treasuries */
.strip{ margin:1.1rem 0 0; padding-top:.8rem; border-top:1px solid rgba(217,180,106,.3); font-size:.84rem; letter-spacing:.02em; color:var(--muted); line-height:1.7; }
.strip .est{ color:var(--gilt); }

/* II · the gate */
.stack{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.6rem; }
/* what the page shows only without JavaScript (the lore boxes need the script; the client quotes must not) */
html.js .nojs{ display:none; }
.nojs blockquote{ margin-top:1rem; }

/* the plaques: every bordered block on the page — dark glass with a gilt hairline, a warm sheen in the
   top-left corner, a glow when pointed at. The entrance (opacity/transform) has its own delay per row;
   the hover (box-shadow/border) has none, so a pointer never waits for the stagger. */
.plaque{ position:relative; border:1px solid rgba(217,180,106,.36); border-radius:14px; --dly:calc(var(--i, 0) * 90ms + .2s);
  background:linear-gradient(135deg, rgba(28,22,15,.6), rgba(7,6,15,.44) 55%, rgba(20,15,10,.56));
  box-shadow:inset 0 1px 0 rgba(255,244,214,.1), 0 18px 40px -30px rgba(7,6,15,.9);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s var(--ease) var(--dly), transform .6s var(--ease) var(--dly), box-shadow .4s ease, border-color .4s ease; }
.plaque::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(130% 90% at 0% 0%, rgba(217,180,106,.14), transparent 58%); }
.stage.is-live .plaque{ opacity:1; transform:none; }
@media (hover:hover){ .plaque:hover{ border-color:rgba(217,180,106,.72); box-shadow:inset 0 1px 0 rgba(255,244,214,.14), 0 0 28px -8px rgba(217,180,106,.55), 0 22px 44px -28px rgba(7,6,15,.9); } }
.plaque:focus-within{ border-color:rgba(217,180,106,.72); }
.plaque.has-lore{ cursor:pointer; }
/* the star on a plaque's right: the way into its lore (a 44px target around an 18px glyph) */
.lore-star{ all:unset; cursor:pointer; position:absolute; z-index:1; right:.35rem; top:50%; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; border-radius:50%; -webkit-tap-highlight-color:transparent; }
.lore-star svg{ width:18px; height:18px; fill:var(--gilt); filter:drop-shadow(0 0 6px rgba(226,190,120,.75)); transition:transform .5s var(--ease), filter .4s; }
@keyframes twinkle{ 0%, 100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.16); opacity:1; } }
.stage.is-live .lore-star svg{ animation:twinkle 3.8s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .65s); }
.lore-star:hover svg, .lore-star:focus-visible svg{ animation:none; transform:scale(1.25) rotate(45deg); filter:drop-shadow(0 0 10px rgba(226,190,120,1)); }
.lore-star:focus-visible{ outline:2px solid var(--gilt); outline-offset:-2px; }

.stack li{ padding:.8rem 3rem .85rem 2.3rem; }
.stack li::before{ content:""; position:absolute; left:1rem; top:1.3rem; width:6px; height:6px; transform:rotate(45deg); background:var(--gilt); box-shadow:0 0 10px 2px rgba(217,180,106,.5); }
.stack small{ display:block; font:400 .72rem/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.22rem; }
.stack b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.55rem; line-height:1.08; letter-spacing:-.01em; }
@media (min-width:960px){ .stack{ gap:.7rem; margin-top:1.5rem; } .stack b{ font-size:2rem; } .stack small{ font-size:.72rem; } }

/* III · the garden */
.kick{ font:500 .72rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gilt); margin:1.2rem 0 .7rem; }
.flow, .disc{ list-style:none; padding:0; margin:0; }
.flow li, .disc li{ padding:.7rem .9rem .75rem; }
.disc li{ border:1px solid rgba(217,180,106,.32); border-radius:12px; background:rgba(7,6,15,.34); }
/* a stage on a phone: the numeral at the left, like an ordered list, the star at the right */
.flow li{ margin:.5rem 0; padding:.75rem 3rem .8rem 1rem; display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; }
.flow .gn{ display:block; grid-row:span 2; align-self:start; padding-top:.3rem; font:300 1.3rem/1 var(--serif); letter-spacing:.02em; color:var(--gilt); text-shadow:0 0 12px rgba(217,180,106,.5); }
.flow b{ grid-column:2; font-family:var(--serif); font-weight:500; font-size:1.3rem; display:block; }
.flow .d, .disc span{ font-size:.95rem; color:var(--body); display:block; }
.flow .d{ grid-column:2; }
.disc li{ margin:.45rem 0; } .disc a{ text-decoration:none; display:block; }
.disc b{ font-family:var(--serif); font-weight:500; font-size:1.1rem; display:block; }
.foot-note{ position:relative; margin-top:.9rem; padding:.8rem .9rem .85rem 2.1rem; border:1px solid rgba(217,180,106,.36); border-radius:14px;
  background:linear-gradient(135deg, rgba(28,22,15,.6), rgba(7,6,15,.44) 55%, rgba(20,15,10,.56)); box-shadow:inset 0 1px 0 rgba(255,244,214,.1);
  font:400 1.02rem/1.45 var(--serif); color:var(--cream); }
.foot-note::before{ content:""; position:absolute; left:.85rem; top:1.15rem; width:6px; height:6px; transform:rotate(45deg); background:var(--gilt); box-shadow:0 0 10px 2px rgba(217,180,106,.5); }
@media (max-width:959px){ .copy--garden .disc{ display:none; } .copy--garden .kick.k2{ display:none; } }
@media (min-width:960px){
  .copy--garden{ left:50%; right:auto; top:calc(50% + 2vh); transform:translate(-50%,-50%); width:min(74rem, 88vw); max-width:none; border:0; padding:0;
    display:flex; flex-direction:column; align-items:center; text-align:center; }
  .copy--garden::before{ content:none; } .copy--garden > .veil{ display:none; }   /* the garden's cards carry their own glass */
  .copy--garden h2, .copy--garden .kick, .copy--garden .flow li, .copy--garden .disc li, .copy--garden .foot-note{
    position:relative; overflow:hidden; border:0; border-radius:18px; color:var(--cream); text-shadow:none;
    background:linear-gradient(135deg, rgba(20,16,12,.84), rgba(7,6,15,.74) 50%, rgba(14,11,8,.82));
    backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
    box-shadow:0 0 0 1px rgba(217,180,106,.5), 0 26px 50px -26px rgba(7,6,15,.7), inset 0 1px 0 rgba(255,244,214,.14); }
  .copy--garden h2{ margin:0; padding:.7rem 2.2rem .8rem; white-space:nowrap; font-size:clamp(2.8rem, 4vw, 4.2rem); color:var(--cream); border-bottom:0; }
  .copy--garden .kick{ margin:1.4rem 0 .8rem; padding:.42rem .95rem; border-radius:999px; color:var(--gilt); font-size:.72rem; }
  .copy--garden .flow{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; width:100%; }
  .copy--garden .flow::before{ content:""; position:absolute; left:6%; right:6%; top:50%; height:2px; z-index:0;
    background:linear-gradient(90deg, transparent, #E2BE78 12%, #E2BE78 88%, transparent); box-shadow:0 0 12px 1px rgba(226,190,120,.55); }
  .copy--garden .flow li{ margin:0; z-index:1; display:block; padding:1.1rem 3rem 1.2rem 1.2rem; text-align:left; min-height:7rem; --dly:calc(var(--i) * 110ms + .2s); }
  .stage.is-live .copy--garden .disc li{ opacity:1; }
  .copy--garden .flow .gn{ display:block; position:absolute; right:.5rem; bottom:-.95rem; padding:0; font:300 5.6rem/1 var(--serif); letter-spacing:-.04em; color:transparent; text-shadow:none;
    background:linear-gradient(180deg, rgba(217,180,106,.34), rgba(217,180,106,.06)); -webkit-background-clip:text; background-clip:text; }
  .copy--garden .flow b{ position:relative; font-size:1.55rem; color:var(--cream); }
  .copy--garden .flow .d{ position:relative; color:var(--body); font-size:.92rem; margin-top:.2rem; }
  .copy--garden .disc{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.8rem; width:100%; }
  .copy--garden .disc li{ margin:0; padding:.9rem 1rem 1rem; text-align:left; border-radius:14px; opacity:0; transition:opacity .6s ease, transform .4s, box-shadow .4s; transition-delay:calc(var(--i) * 90ms + .6s); }
  .copy--garden .disc li:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px #D9B46A, 0 0 28px -6px rgba(217,180,106,.6), 0 26px 50px -26px rgba(7,6,15,.55); }
  .copy--garden .disc b{ font-size:1.08rem; line-height:1.15; color:var(--cream); }
  .copy--garden .disc span{ color:var(--body); font-size:.8rem; line-height:1.4; margin-top:.3rem; }
  .copy--garden .foot-note{ margin-top:1.3rem; padding:.55rem 1.2rem; border-radius:999px; border-top:0; color:var(--body); font-size:.88rem; }
}
@media (min-width:960px) and (max-height:760px){
  .copy--garden h2{ font-size:2.6rem; padding:.5rem 1.6rem .6rem; }
  .copy--garden .flow li{ min-height:6rem; padding:.9rem 1rem; }
  .copy--garden .disc li{ padding:.7rem .8rem .8rem; }
  .copy--garden .foot-note{ display:none; }
}

/* IV · sun and moon */
.pillars{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem .8rem; }
.pillars li{ padding:.8rem 3rem .85rem .95rem; }
.pillars b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.1; }
.pillars span{ display:block; font-size:.95rem; color:var(--body); margin-top:.2rem; }
/* the references read as part of the system: serif names on a gilt hairline, no pills */
.refs{ margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid rgba(217,180,106,.3); display:flex; flex-wrap:wrap; gap:.35rem .8rem; align-items:baseline; }
.refs span{ font:500 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--gilt); margin-right:.2rem; }
.refs a{ font:500 1.05rem/1.3 var(--serif); letter-spacing:.005em; text-decoration:none; color:inherit; padding:0 0 .1rem; border-bottom:1px solid var(--rule); transition:color .3s, border-color .3s; }
.refs a:hover, .refs a:focus-visible{ color:var(--gilt); border-bottom-color:var(--gilt); }
@media (min-width:960px){ .pillars b{ font-size:1.42rem; } }
@media (max-width:959px){ .pillars{ grid-template-columns:1fr; gap:.6rem; } .pillars li:nth-child(n+3){ display:none; } }

/* V · the climb */
.climb-h{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(2.4rem, 9vw, 3.6rem); line-height:1.02; padding-bottom:.6rem; border-bottom:1px solid rgba(217,180,106,.5); }
.climb-s{ margin:.9rem 0 0; max-width:none; font-size:1rem; line-height:1.55; color:var(--body); }
.climb-blocks{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem .65rem; }
.climb-blocks li{ padding:.7rem .8rem .75rem; }
.climb-blocks b{ display:block; font:500 1.08rem/1.15 var(--serif); }
.climb-blocks span{ display:block; margin-top:.25rem; font-size:.82rem; line-height:1.4; color:var(--body); }
@media (min-width:960px){
  .copy--climb{ width:min(40rem, 44vw); }
  .climb-h{ font-size:clamp(3rem, 4.2vw, 4.4rem); } .climb-s{ font-size:1.08rem; line-height:1.6; }
  .climb-blocks{ gap:.7rem; margin-top:1.2rem; } .climb-blocks li{ padding:1rem 1rem 1.05rem; } .climb-blocks b{ font-size:1.3rem; } .climb-blocks span{ font-size:.9rem; }
}
@media (max-width:959px) and (max-height:700px){ .climb-blocks span{ display:none; } }

/* VI · the constellation */
#sky-host{ position:absolute; inset:0; z-index:1; }
.copy--work{ max-width:34rem; }
.wk-group{ margin:1.1rem 0 .35rem; font:600 .72rem/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--gilt); }
.wk-group span{ margin-left:.6rem; font-weight:400; letter-spacing:.06em; text-transform:none; color:var(--body); }
.work{ list-style:none; margin:0; padding:0; }
.work li{ padding:.42rem 0; border-top:1px solid rgba(241,238,224,.16); }
.work a.wk{ display:grid; grid-template-columns:auto auto 1fr; gap:0 .7rem; color:inherit; text-decoration:none; align-items:center; }
.work .wk-thumb{ display:block; grid-row:span 2; width:68px; aspect-ratio:16/9; align-self:center; border-radius:7px; background-size:cover; background-position:center; background-color:#111; box-shadow:0 0 0 1px rgba(217,180,106,.45); }
.work .num{ grid-row:span 2; font:300 .7rem/1.6 var(--sans); letter-spacing:.12em; color:var(--gilt); }
.work .n{ font-family:var(--serif); font-size:1.24rem; line-height:1.15; }
.work .tl{ font-size:.9rem; color:var(--body); }
.work .t{ display:none; }
.work a.wk:hover .n, .work a.wk:focus-visible .n{ color:var(--gilt); }
.wk-visit, .sheet-visit{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; white-space:nowrap; font:500 .62rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gilt); }
.wk-visit{ display:none; }
.wk-visit i, .sheet-visit i{ font-style:normal; transition:transform .3s; }
.sheet-visit:hover i{ transform:translate(2px,-2px); }
/* the sky: stars on the film at every width (the static page hides #sky-host and shows the list) */
.copy--work .wk-col{ display:none; }
.sky{ display:block; position:absolute; inset:0; z-index:2; contain:layout style; opacity:calc(1 - var(--out, 0));
  --dusk:clamp(0, calc((var(--p, 0) - .42) / .25), 1); --cx:47%; --cy:40%; }
/* once the film blooms to cream the stars need a pool of dusk under them */
.sky::before{ content:""; position:absolute; inset:-10%; pointer-events:none; opacity:var(--dusk);
  background:radial-gradient(55% 40% at var(--cx) var(--cy), rgba(7,6,15,.58), rgba(7,6,15,.32) 50%, transparent 76%); }
.sky svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; shape-rendering:geometricPrecision; }
.sky polyline{ fill:none; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dashoffset:var(--len); transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.2,1) .5s, opacity .4s; }
.stage.is-live .sky polyline{ stroke-dashoffset:0; }
.sky polyline.ln{ stroke:url(#skyline); stroke-width:1.4; }
.sky polyline.glow{ stroke:rgba(217,180,106,.22); stroke-width:7; }   /* a wide soft stroke, not a filter: no re-blur per frame */
.sky polyline.dusk{ stroke:#8A6420; stroke-width:1.4; opacity:var(--dusk); }
.sky.pointing polyline{ opacity:.45; } .sky.pointing polyline.dusk{ opacity:calc(var(--dusk) * .45); }
.sky-lede{ margin-top:.7rem; font-size:.95rem; line-height:1.45; max-width:none; }
@media (min-width:960px){ .sky-lede{ font-size:1.02rem; max-width:28rem; } }
.sky-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 0; font:400 .78rem/1.4 var(--sans); color:var(--body); }
.sky-legend i{ width:9px; height:9px; border-radius:50%; border:1.5px solid #F1EEE0; margin-left:.4rem; flex:none; }
.sky-legend i.real{ background:#F1EEE0; border:0; margin-left:0; box-shadow:0 0 10px 2px rgba(255,240,210,.5); }
.sky-legend span{ color:var(--muted); }
.sky-legend .tap{ display:none; }
@media (hover:none){ .sky-legend .point{ display:none; } .sky-legend .tap{ display:inline; } }
.star{ position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; display:block; text-decoration:none; color:inherit; opacity:0; transition:opacity .9s ease; pointer-events:auto; }
.star::before{ content:""; position:absolute; inset:-15px; }   /* a 44px target for fingers and mice */
.stage.is-live .star{ opacity:1; transition-delay:var(--d); }
.star i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid #F1EEE0; box-shadow:0 0 0 1px rgba(7,6,15,.55), 0 0 12px 2px rgba(255,240,210,.4);
  animation:twinkle 4.8s ease-in-out infinite; animation-delay:var(--d); transition:transform .35s, box-shadow .35s, background .35s; }
.star.real i{ background:#F1EEE0; border:0; box-shadow:0 0 0 1px rgba(7,6,15,.55), 0 0 16px 3px rgba(255,240,210,.6); }
.stage:not(.is-live) .star i{ animation-play-state:paused; }
.star span{ position:absolute; left:50%; transform:translateX(-50%); font:500 .7rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(241,238,224,.9); text-shadow:0 0 2px rgba(7,6,15,.95), 0 0 10px rgba(7,6,15,.75); white-space:nowrap; transition:color .3s; }
.star.above span{ bottom:calc(100% + 14px); } .star.below span{ top:calc(100% + 14px); }
.star:hover i, .star:focus-visible i, .star.lit i{ transform:scale(1.35); background:#FFF4D6; border-color:#FFF4D6; box-shadow:0 0 0 7px rgba(217,180,106,.22), 0 0 34px 10px rgba(255,236,190,.8); animation:none; }
.star:hover span, .star:focus-visible span, .star.lit span{ color:var(--gilt); }
.star:focus-visible{ outline:none; } .star:focus-visible span{ text-decoration:underline; text-underline-offset:5px; }
@keyframes twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.wk-peek{ display:none; }
.sky-card{ display:none; }
/* phones: the stars sit on the film's own fan, a tap shows the card at the foot of the stage */
@media (max-width:959px){
  #sky-host{ z-index:3; }
  html:not([data-film="static"]) .copy--work{ pointer-events:none; }   /* the static page's list must stay tappable */
  .copy--work > *{ transition:opacity .25s, transform .3s var(--ease); }
  .stage.has-pick .copy--work > *{ opacity:0; transform:translateY(8px); }
  .sky{ --cx:47%; --cy:38%; }
  .sky polyline{ transition-duration:1.6s, .4s; transition-delay:.2s, 0s; }
  .star{ width:12px; height:12px; margin:-6px 0 0 -6px; }
  .star span{ font:500 .72rem/1 var(--sans); letter-spacing:.1em; }
  .star.above span{ bottom:calc(100% + 7px); } .star.below span{ top:calc(100% + 7px); }
  .sky-card{ display:block; position:absolute; left:14px; right:14px; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); z-index:4; padding:10px 10px 12px; border-radius:20px;
    background:linear-gradient(160deg, rgba(20,16,12,.96), rgba(10,8,14,.97));
    box-shadow:0 0 0 1px rgba(217,180,106,.55), 0 26px 60px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,244,214,.14);
    visibility:hidden; opacity:0; transform:translateY(24px) scale(.98); transition:opacity .3s ease, transform .42s var(--ease), visibility 0s .42s; }
  .sky-card.on{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .sc-img{ margin:0; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#111; }
  .sc-img img{ display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; } .sc-img img.ok{ opacity:1; }
  .sc-cap{ display:grid; gap:.2rem; padding:.7rem .3rem 0; }
  .sc-idx{ font:500 .72rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gilt); }
  .sc-name{ font:500 1.25rem/1.1 var(--serif); }
  .sc-line{ font-size:.86rem; line-height:1.4; color:var(--body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sc-row{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.7rem .3rem 0; }
  .sky-legend{ font-size:.72rem; margin-top:.5rem; }
}
@media (max-width:959px) and (max-height:720px){ .sky-card{ display:grid; grid-template-columns:38% 1fr; gap:.5rem .8rem; } .sc-img{ grid-row:1 / span 2; } .sc-cap, .sc-row{ padding-top:0; grid-column:2; } }
/* the static page's list, on phones */
@media (max-width:959px){
  .copy--work .work li{ padding:.3rem 0; }
  .copy--work .work a.wk{ grid-template-columns:auto auto 1fr; align-items:center; }
  .copy--work .work .wk-thumb{ width:54px; grid-row:auto; }
  .copy--work .work .num{ grid-row:auto; }
  .copy--work .work .n{ font-size:1.1rem; }
  .copy--work .work .tl{ display:none; }
  .copy--work .wk-group{ margin:.8rem 0 .25rem; }
  .copy--work .wk-group span{ display:none; }
  .copy--work .work li:nth-child(n+5){ display:none; }
}
@media (min-width:960px){
  .copy--work{ left:5vw; top:calc(84px + 5vh); transform:none; width:auto; border:0; padding:0; --vx:80px; --vy:56px; --vf:48px; }
  .copy--work::before{ top:-1.6rem; left:0; }
  .copy--work > .veil{ bottom:-28px; }
  .sky{ --cx:45%; --cy:58%; }
  .sky-legend{ margin-top:.9rem; }
  .wk-peek{ display:block; position:fixed; z-index:30; left:0; top:0; width:420px; padding:10px; border-radius:18px; pointer-events:none; opacity:0; transform:translateY(8px) scale(.97);
    transition:opacity .35s ease, transform .45s var(--ease), top .35s var(--ease);
    background:linear-gradient(135deg, rgba(20,16,12,.74), rgba(10,8,14,.62)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 0 0 1px rgba(217,180,106,.55), 0 30px 60px -24px rgba(0,0,0,.85), 0 0 46px -12px rgba(217,180,106,.45); }
  .wk-peek.on{ opacity:1; transform:none; }
  .pk-img{ aspect-ratio:16/9; border-radius:10px; background-size:cover; background-position:center; background-color:#111; }
  .pk-cap{ display:flex; justify-content:space-between; padding:10px 4px 2px; font:500 .6rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
  .pk-kind{ color:var(--gilt); } .pk-go{ color:rgba(241,238,224,.72); }
}
@media (min-width:960px) and (max-width:1280px){ .wk-peek{ width:360px; } }

/* VII · clients */
blockquote{ margin:0; padding:.15rem 0 .15rem 1rem; border-left:2px solid var(--gilt); }
blockquote + blockquote{ margin-top:1.4rem; }
blockquote p{ font-family:var(--serif); font-size:clamp(1.15rem, 4.4vw, 1.45rem); line-height:1.3; margin:0; }
blockquote cite{ display:block; margin-top:.7rem; font-style:normal; font-size:.88rem; color:var(--body); }
@media (min-width:960px){ blockquote p{ font-size:clamp(1.4rem, 1.9vw, 1.85rem); } }
@media (max-width:959px){ .copy blockquote + blockquote{ display:none; } }
/* one planet per delivered platform; a tap opens its words in the lore box. Ten orbs, each its own
   colour, each on a thin orbit ring; the ones carrying a client's words wear a small gilt star. */
.orbit{ list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem .3rem; }
.orbit li{ opacity:0; transform:translateY(8px); --dly:calc(var(--i) * 70ms + .25s); transition:opacity .6s var(--ease) var(--dly), transform .6s var(--ease) var(--dly); }
.stage.is-live .orbit li{ opacity:1; transform:none; }
.planet{ all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.55rem; width:100%; padding:.3rem 0; text-align:center; -webkit-tap-highlight-color:transparent; border-radius:12px; }
.planet:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }
.pl-orb{ position:relative; display:block; width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--o1), var(--o2) 52%, var(--o3) 100%);
  box-shadow:inset -8px -10px 18px rgba(7,6,15,.6), inset 4px 4px 10px rgba(255,244,214,.2), 0 0 0 1px rgba(217,180,106,.3), 0 0 26px -6px var(--o2);
  transition:transform .5s var(--ease), box-shadow .5s; }
.pl-orb::before{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(217,180,106,.45); border-right-color:transparent; border-bottom-color:transparent; transform:rotate(-30deg); transition:transform .9s var(--ease); }
.pl-orb.spoken::after{ content:""; position:absolute; right:-3px; top:-3px; width:13px; height:13px; background:var(--gilt); filter:drop-shadow(0 0 4px rgba(226,190,120,.9));
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.planet:hover .pl-orb, .planet:focus-visible .pl-orb{ transform:scale(1.1); box-shadow:inset -8px -10px 18px rgba(7,6,15,.6), inset 4px 4px 10px rgba(255,244,214,.24), 0 0 0 1px rgba(217,180,106,.7), 0 0 34px -4px var(--o2); }
.planet:hover .pl-orb::before{ transform:rotate(150deg); }
.pl-name{ font:500 .74rem/1.2 var(--sans); letter-spacing:.03em; color:var(--cream); }
.pl-orb--0{ --o1:#F7E3B4; --o2:#D9B46A; --o3:#5E431A; }   /* gilt */
.pl-orb--1{ --o1:#FFF8E6; --o2:#E6D6B0; --o3:#7A6A48; }   /* cream */
.pl-orb--2{ --o1:#D3CDF4; --o2:#7E74B8; --o3:#2A2448; }   /* dusk */
.pl-orb--3{ --o1:#F8D6C6; --o2:#D29A86; --o3:#5E3528; }   /* rose gold */
.pl-orb--4{ --o1:#E8EEF8; --o2:#9CB4D4; --o3:#33455F; }   /* pale blue */
.pl-orb--5{ --o1:#FFDCA6; --o2:#DE9A3E; --o3:#5C3310; }   /* amber */
.pl-orb--6{ --o1:#E0E9CC; --o2:#94A86C; --o3:#303E1C; }   /* moss */
.pl-orb--7{ --o1:#F3C9A8; --o2:#C47A48; --o3:#4F2912; }   /* copper */
.pl-orb--8{ --o1:#D2E8E0; --o2:#6FAE9A; --o3:#1F4236; }   /* jade */
.pl-orb--9{ --o1:#FFFFFF; --o2:#D6CFC0; --o3:#625A4A; }   /* pearl */
@media (min-width:960px){
  .orbit{ grid-template-columns:repeat(5, 1fr); gap:1.3rem .5rem; margin-top:1.3rem; }
  .pl-orb{ width:64px; height:64px; } .pl-name{ font-size:.8rem; }
}

/* VIII · in numbers */
.truths{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem .65rem; }
.truths li{ padding:.75rem .85rem .8rem; overflow:hidden; }
.truths b{ position:relative; display:block; font-family:var(--serif); font-weight:400; font-size:2.5rem; line-height:1; letter-spacing:-.01em; font-variant-numeric:lining-nums; color:#EBCB86;
  text-shadow:0 0 18px rgba(217,180,106,.45), 0 1px 1px rgba(7,6,15,.6); }
.truths span{ position:relative; display:block; margin-top:.3rem; font:500 .7rem/1.25 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--cream); }
.truths .t{ position:relative; display:block; margin-top:.3rem; font-style:normal; font-size:.82rem; line-height:1.4; color:var(--body); }
/* the ring: a thin orbit behind the number, lit on one side */
.tr-ring{ position:absolute; right:-1.4rem; top:-1.6rem; width:5.2rem; height:5.2rem; border-radius:50%; border:1px solid rgba(217,180,106,.38); border-left-color:transparent; border-bottom-color:transparent; transform:rotate(20deg); pointer-events:none; }
.tr-ring::after{ content:""; position:absolute; inset:.7rem; border-radius:50%; border:1px solid rgba(217,180,106,.16); }
.copy--numbers .foot-note{ margin-top:.9rem; }
@media (min-width:960px){
  .copy--numbers{ width:min(40rem, 44vw); }
  .truths{ grid-template-columns:repeat(3, 1fr); gap:.7rem; }
  .truths li{ padding:1rem 1rem 1.05rem; }
  .truths b{ font-size:3.2rem; } .truths .t{ font-size:.86rem; }
}
@media (max-width:959px) and (max-height:760px){ .truths .t{ display:none; } .copy--numbers .foot-note{ display:none; } }

/* IX · before we build */
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.chips button{ font:500 .84rem/1 var(--sans); letter-spacing:.02em; color:var(--cream); cursor:pointer; padding:.6rem .95rem; border-radius:999px; border:1px solid rgba(217,180,106,.4);
  background:linear-gradient(135deg, rgba(28,22,15,.62), rgba(7,6,15,.46) 55%, rgba(20,15,10,.58)); box-shadow:inset 0 1px 0 rgba(255,244,214,.1);
  transition:border-color .3s, box-shadow .3s, background .3s, color .3s; }
.chips button:hover{ border-color:rgba(217,180,106,.8); box-shadow:inset 0 1px 0 rgba(255,244,214,.12), 0 0 22px -6px rgba(217,180,106,.6); }
.chips button:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }
.chips button[aria-selected="true"]{ background:linear-gradient(135deg, #F1D79A, #D9B46A 60%, #C49A4A); border-color:#EBCB86; color:var(--ink); box-shadow:0 0 24px -6px rgba(217,180,106,.7), inset 0 1px 0 rgba(255,250,235,.6); }
.answer{ position:relative; margin:.9rem 0 0; padding:.85rem .95rem .9rem 2.1rem; border:1px solid rgba(217,180,106,.36); border-radius:14px;
  background:linear-gradient(135deg, rgba(28,22,15,.6), rgba(7,6,15,.44) 55%, rgba(20,15,10,.56)); box-shadow:inset 0 1px 0 rgba(255,244,214,.1);
  font-size:1rem; line-height:1.6; max-width:30rem; color:var(--body); }
.answer::before{ content:""; position:absolute; left:.85rem; top:1.25rem; width:6px; height:6px; transform:rotate(45deg); background:var(--gilt); box-shadow:0 0 10px 2px rgba(217,180,106,.5); }
.answer b{ color:var(--gilt); font-weight:500; }

/* X · the drop */
.copy--drop{ position:relative; left:auto; right:auto; bottom:auto; top:auto; transform:none; max-width:40rem; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 110px) 22px calc(env(safe-area-inset-bottom,0px) + 56px); --vx:40px; }
/* the flow stage has overflow visible, so the veil never overhangs it (that would add scroll height) */
.copy--drop > .veil{ top:calc(env(safe-area-inset-top,0px) + 50px); bottom:0; }
@media (min-width:960px){
  .copy--drop{ width:min(44rem, 60vw); max-width:none; margin:0 0 0 4.5vw; padding-top:calc(84px + 10vh); padding-bottom:8vh; padding-left:2.2rem; border-left:1px solid rgba(217,180,106,.4); --vx:72px; }
  .copy--drop::before{ top:calc(84px + 10vh - 2.4rem); }
  .copy--drop > .veil{ top:calc(84px + 10vh - 88px); bottom:0; }
}
.cform{ display:grid; gap:.7rem; margin-top:1.2rem; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:560px){ .cf-row{ grid-template-columns:1fr; } }
.cf-field{ display:grid; gap:.3rem; font-size:.82rem; color:var(--body); }
.cf-field[hidden]{ display:none; }
.cf-field input, .cf-field select, .cf-field textarea{ font:400 16px/1.4 var(--sans); color:var(--cream); background:rgba(7,6,15,.55); border:1px solid rgba(241,238,224,.26);
  border-radius:12px; padding:.72rem .85rem; width:100%; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); resize:none; }
.cf-field select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--gilt) 50%), linear-gradient(135deg, var(--gilt) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.cf-field select option{ color:var(--ink); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ outline:none; border-color:var(--gilt); }
.cf-field.bad input, .cf-field.bad textarea{ border-color:var(--coral); }
.cf-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.3rem; }
.cf-note{ margin:0; font-size:.9rem; color:var(--body); }
.cf-note.ok{ color:var(--gilt); } .cf-note.bad{ color:var(--coral); }
.sitefoot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem 1.4rem; margin-top:2.2rem; padding-top:1rem; border-top:1px solid rgba(241,238,224,.18); }
.sitefoot .mark{ font-size:.72rem; }
.flinks{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.flinks a{ font-size:.78rem; color:var(--body); text-decoration:none; }
.flinks a:hover{ color:var(--gilt); }
.foot{ font-size:.74rem; color:rgba(241,238,224,.5); }

/* ---------- case-study sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:60; display:grid; place-items:end center; }
.sheet[hidden]{ display:none; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(7,6,15,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity .38s ease; }
.sheet-panel{ position:relative; width:min(72rem, 100vw); height:min(88vh, 100%); display:grid; grid-template-rows:auto 1fr auto; border-radius:26px 26px 0 0; overflow:hidden; color:var(--cream);
  background:linear-gradient(160deg, rgba(20,16,12,.94), rgba(10,8,14,.96));
  box-shadow:0 0 0 1px rgba(217,180,106,.55), 0 -30px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,244,214,.18);
  transform:translateY(100%); transition:transform .5s var(--ease); }
.sheet.on .sheet-scrim{ opacity:1; } .sheet.on .sheet-panel{ transform:none; }
.sheet-head{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem; border-bottom:1px solid rgba(217,180,106,.2); }
.sheet-idx{ font:400 .9rem/1 var(--serif); color:var(--gilt); letter-spacing:.06em; white-space:nowrap; }
.sheet-head h3{ margin:0; font:500 1.35rem/1.1 var(--serif); flex:1; }
.sheet-visit{ padding:.7rem 1.05rem; border-radius:999px; box-shadow:0 0 0 1px rgba(217,180,106,.6); }
.sheet-visit:hover{ box-shadow:0 0 0 1px var(--gilt), 0 0 22px -4px rgba(217,180,106,.7); }
.sheet-visit[hidden]{ display:none; }
.sheet-x{ all:unset; cursor:pointer; position:relative; width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 1px rgba(217,180,106,.6); flex:none; }
.sheet-x i{ position:absolute; left:12px; right:12px; top:50%; height:1px; background:var(--gilt); }
.sheet-x i:first-child{ transform:rotate(45deg); } .sheet-x i:last-child{ transform:rotate(-45deg); }
.sheet-x:hover{ box-shadow:0 0 0 1px var(--gilt), 0 0 22px -4px rgba(217,180,106,.7); }
.sheet-x:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; }
.sheet-viewport{ position:relative; min-height:0; display:grid; }
.sheet-stage{ position:relative; display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1.2rem 1.4rem; overscroll-behavior:contain; min-height:0; height:100%; scrollbar-width:none; }
.sheet-stage::-webkit-scrollbar{ display:none; }
.slide{ flex:0 0 100%; margin:0; scroll-snap-align:center; display:grid; place-items:center; height:100%; min-height:0; }
.slide img{ width:100%; height:100%; object-fit:contain; border-radius:12px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.sheet-cover{ flex:1; display:grid; place-content:center; justify-items:center; gap:.7rem; text-align:center; border-radius:18px; padding:2rem;
  background:radial-gradient(70% 80% at 50% 30%, rgba(217,180,106,.16), transparent 70%); box-shadow:inset 0 0 0 1px rgba(217,180,106,.25); }
.sheet-cover .cv-n{ font:300 6rem/1 var(--serif); color:transparent; background:linear-gradient(180deg, rgba(217,180,106,.5), rgba(217,180,106,.05)); -webkit-background-clip:text; background-clip:text; }
.sheet-cover b{ font:500 clamp(2rem, 4vw, 3.6rem)/1.05 var(--serif); }
.sl-btn{ all:unset; cursor:pointer; position:absolute; top:50%; width:46px; height:46px; margin-top:-23px; border-radius:50%; display:none; place-items:center; font:300 1.8rem/1 var(--serif); color:var(--cream);
  background:rgba(14,11,8,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 0 0 1px rgba(217,180,106,.55); transition:box-shadow .3s; }
.sl-btn:hover{ box-shadow:0 0 0 1px var(--gilt), 0 0 22px -4px rgba(217,180,106,.75); }
.sl-btn:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; }
.sl-prev{ left:.9rem; } .sl-next{ right:.9rem; }
.sheet.has-slides .sl-btn{ display:grid; }
.sl-count{ position:absolute; right:1.6rem; bottom:1.3rem; padding:.3rem .65rem; border-radius:999px; font:500 .7rem/1 var(--sans); letter-spacing:.12em; color:var(--cream); background:rgba(14,11,8,.62); box-shadow:0 0 0 1px rgba(217,180,106,.4); }
.sl-count:empty{ display:none; }
.sheet-foot{ display:grid; grid-template-columns:1fr auto; gap:.3rem 1.5rem; align-items:center; padding:1rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(217,180,106,.2); }
.sheet-line{ margin:0; font-size:.98rem; }
.sheet-tags{ margin:0; grid-column:1; font:500 .64rem/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--gilt); }
.sheet-nav{ grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:.8rem; font-size:.8rem; color:rgba(241,238,224,.7); }
.sheet-nav button{ all:unset; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--gilt); box-shadow:0 0 0 1px rgba(217,180,106,.5); }
.sheet-nav button:hover{ box-shadow:0 0 0 1px var(--gilt), 0 0 18px -4px rgba(217,180,106,.7); }
@media (min-width:960px){
  .sheet{ place-items:center; }
  .sheet-panel{ border-radius:26px; height:min(84vh, 52rem); transform:translateY(30px) scale(.98); opacity:0; transition:transform .5s var(--ease), opacity .38s ease; }
  .sheet.on .sheet-panel{ opacity:1; }
}
@media (max-width:959px){ .sl-btn{ width:38px; height:38px; margin-top:-19px; font-size:1.5rem; } .sheet-visit{ display:none; }
  .sheet-panel{ height:min(92svh, 100%); } .sheet-stage{ padding:.9rem; gap:.9rem; } .slide img{ height:auto; max-height:100%; } }

/* ---------- chapters drawer ---------- */
.chapters{ position:fixed; inset:0; z-index:50; }
.chapters[hidden]{ display:none; }
.chapters-scrim{ position:absolute; inset:0; background:rgba(7,6,15,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .32s ease; }
.chapters-panel{ position:absolute; top:0; right:0; bottom:0; width:min(22rem, 86vw); display:flex; flex-direction:column; color:var(--cream); overflow-y:auto; overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 calc(env(safe-area-inset-bottom,0px) + 16px);
  background:linear-gradient(160deg, rgba(20,16,12,.94), rgba(10,8,14,.96)); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:-1px 0 0 rgba(217,180,106,.35), -30px 0 80px -30px rgba(0,0,0,.9); transform:translateX(100%); transition:transform .42s var(--ease); }
.chapters.on .chapters-scrim{ opacity:1; } .chapters.on .chapters-panel{ transform:none; }
.chapters-head{ display:flex; align-items:center; justify-content:space-between; padding:.3rem 1rem .9rem 1.4rem; }
.chapters-head h2{ font:500 .72rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gilt); }
.chapters-list{ list-style:none; margin:0; padding:0; }
.chapters-list a{ display:grid; grid-template-columns:2.4rem 1fr auto; grid-template-rows:auto auto; column-gap:.6rem; align-items:baseline; padding:.7rem 1.4rem; text-decoration:none; color:inherit; border-top:1px solid rgba(241,238,224,.08); }
.chapters-list a:focus-visible{ outline-offset:-4px; border-radius:12px; }
.chapters-list .cl-n{ grid-row:span 2; font:400 1rem/1 var(--serif); letter-spacing:.04em; color:rgba(241,238,224,.6); }
.chapters-list .cl-name{ font:500 1.2rem/1.15 var(--serif); }
.chapters-list .cl-sub{ grid-column:2; font:400 .74rem/1.3 var(--sans); letter-spacing:.02em; color:var(--muted); }
.chapters-list .cl-tick{ grid-row:span 2; align-self:center; width:14px; height:1px; background:rgba(241,238,224,.35); transition:width .3s, background .3s; }
.chapters-list a:hover .ch-name, .chapters-list a:focus-visible .ch-name{ color:var(--gilt); }
.chapters-list a[aria-current="true"]{ background:linear-gradient(90deg, rgba(217,180,106,.12), transparent 70%); }
.chapters-list a[aria-current="true"] .ch-n{ color:var(--gilt); } .chapters-list a[aria-current="true"] .ch-tick{ width:26px; background:var(--gilt); }
.chapters-keys{ display:none; margin:auto 1.4rem 0; padding-top:1rem; font:400 .72rem/1.5 var(--sans); letter-spacing:.04em; color:rgba(241,238,224,.5); }
@media (hover:hover) and (pointer:fine){ .chapters-keys{ display:block; } }
@media (min-width:960px){ .chapters-panel{ width:min(21rem, 30vw); } }

/* ---------- the static page: no film (reduced motion, Save-Data, small devices, no JS) ---------- */
html[data-film="static"] #film, html[data-film="static"] #warp, html[data-film="static"] body::before{ display:none; }
html[data-film="static"] .heaven{ height:auto; min-height:100svh; }
html[data-film="static"] .stage{ position:relative; height:auto; min-height:100svh; overflow:visible; }
html[data-film="static"] .poster{ display:block; }
html[data-film="static"] .poster::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,6,15,.2), rgba(7,6,15,.72)); }
html[data-film="static"] .chapter{ display:none; }
html[data-film="static"] .copy{ position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; margin:0 auto; opacity:1;
  padding:calc(env(safe-area-inset-top,0px) + 110px) 22px 60px; max-width:40rem; width:auto; border:0; }
html[data-film="static"] .copy > *, html[data-film="static"] .plaque, html[data-film="static"] .disc li, html[data-film="static"] .orbit li{ opacity:1; transform:none; transition:none; }
html[data-film="static"] .copy--hero{ text-align:center; min-height:80svh; display:grid; align-content:center; }
html[data-film="static"] .copy--garden, html[data-film="static"] .copy--work{ transform:none; width:auto; }
html[data-film="static"] .copy--work .wk-col, html[data-film="static"] .copy--garden .disc, html[data-film="static"] .copy--garden .kick.k2{ display:block; }
html[data-film="static"] .copy--work .work li, html[data-film="static"] .copy--work .wk-group{ display:block; }
html[data-film="static"] #sky-host, html[data-film="static"] .wk-peek, html[data-film="static"] .sky-legend{ display:none; }
html[data-film="static"] .copy blockquote + blockquote, html[data-film="static"] .pillars li{ display:block; }
html[data-film="static"] .copy--drop{ padding-top:60px; }
/* the copy's own chrome (caption, hairline, veil) arrives with the words, not before */
.copy::before{ transition:opacity .5s ease; }
.copy{ transition:border-color .5s ease; }
.stage:not(.is-live) .copy::before{ opacity:0; }
.stage:not(.is-live) .copy > .veil{ opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; }
.stage.is-live .copy > .veil{ opacity:1; visibility:visible; transition:opacity .5s ease, visibility 0s; }
.stage:not(.is-live) .copy{ border-left-color:transparent; }
/* the exit is scroll-driven (no transition) and runs on the children: an ancestor with opacity < 1 is a
   backdrop root and would cut the veil's blur off from the film; the veil fades on its own opacity */
.stage.is-out .copy > *, .stage.is-out .copy > .veil{ opacity:calc(1 - var(--out, 0)); transition:none; }
.heaven--flow .stage .copy::before, .heaven--flow .stage .copy > .veil{ opacity:1; visibility:visible; }
.heaven--flow .stage .copy{ border-left-color:rgba(217,180,106,.4); }
@media (max-width:959px){ .heaven--flow .stage .copy{ border:0; } }
html:not(.js) .copy > *{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .copy > *, .veil, .plaque, .disc li, .orbit li, .chapter, .cta-start, .ghost, .star, .sky polyline, .sheet-panel, .sheet-scrim, .wk-peek, .chapters-panel, .chapters-scrim, .sky-card, .sc-img img, .copy--work > *, .lore-box, .lore-scrim, .pl-orb, .lore-star svg{ transition:none !important; animation:none !important; }
  .cue i::after, .star i, #warp .skel i{ animation:none !important; }
}
/* static: the veil is always on (it blurs the poster), inset to the copy's own padding */
/* (written with .stage so they outrank the .stage:not(.is-live) hiding rule: the static page never sets is-live) */
html[data-film="static"] .stage .copy > .veil{ opacity:1; visibility:visible; transition:none; inset:calc(env(safe-area-inset-top,0px) + 70px) -18px 24px; }
html[data-film="static"] .stage .copy--garden > .veil{ display:block; }
html[data-film="static"] [data-h="0"] .poster::after{ background:linear-gradient(180deg, transparent 55%, rgba(7,6,15,.45)); }   /* the ground's drop stays in view on the static page too */
/* no backdrop-filter: a heavier tint carries the words; last, so it wins over every per-block tint above */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .copy{ --vtint:rgba(7,6,15,.84); } .stage[data-tone="light"] .copy{ --vtint:rgba(7,6,15,.9); }
}

/* ---------- the lore box: behind every plaque's star and every planet ---------- */
.lore{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.lore[hidden]{ display:none; }   /* display:flex above would otherwise beat the hidden attribute and the overlay would swallow every tap */
.lore-scrim{ position:fixed; inset:0; background:rgba(7,6,15,.58); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity .36s ease; }
.lore-box{ position:relative; margin:auto; width:min(34rem, 100%); color:var(--cream); padding:1.35rem 1.3rem 1.1rem; border-radius:24px;
  background:linear-gradient(160deg, rgba(30,23,15,.97), rgba(7,6,15,.95) 50%, rgba(22,16,10,.97));
  box-shadow:0 0 0 1px rgba(217,180,106,.55), inset 0 1px 0 rgba(255,244,214,.14), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 70px -24px rgba(217,180,106,.4);
  opacity:0; transform:translateY(18px) scale(.985); transition:opacity .42s var(--ease), transform .42s var(--ease); }
.lore-box::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(90% 60% at 100% 0%, rgba(217,180,106,.16), transparent 60%); }
.lore.on .lore-scrim{ opacity:1; } .lore.on .lore-box{ opacity:1; transform:none; }
.lore-x{ position:absolute; right:.9rem; top:.9rem; z-index:2; }
.lore-entry{ position:relative; }
.lore-kick{ font:500 .7rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gilt); padding-right:3rem; }
.lore-num{ position:absolute; right:-.2rem; top:1.6rem; font:300 6rem/1 var(--serif); letter-spacing:-.04em; color:transparent; pointer-events:none;
  background:linear-gradient(180deg, rgba(217,180,106,.34), rgba(217,180,106,.04)); -webkit-background-clip:text; background-clip:text; }
.lore-title{ position:relative; margin:1rem 0 0; font:400 clamp(2rem, 7.6vw, 2.7rem)/1.05 var(--serif); letter-spacing:-.01em; padding:0 3.5rem .6rem 0; border-bottom:1px solid rgba(217,180,106,.45); }
.lore-lede{ position:relative; margin:.85rem 0 0; font:400 1.22rem/1.35 var(--serif); color:#F3DCA6; }
.lore-sub{ position:relative; margin:.6rem 0 0; font:500 .7rem/1.3 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.lore-parts{ position:relative; margin:1rem 0 0; display:grid; gap:.7rem; }
.lore-parts > div{ position:relative; padding:.75rem .9rem .8rem 2.1rem; border:1px solid rgba(217,180,106,.28); border-radius:12px;
  background:linear-gradient(135deg, rgba(255,244,214,.05), rgba(255,244,214,.015)); }
.lore-parts > div::before{ content:""; position:absolute; left:.85rem; top:1.02rem; width:6px; height:6px; transform:rotate(45deg); background:var(--gilt); box-shadow:0 0 10px 2px rgba(217,180,106,.5); }
.lore-parts dt{ font:500 .68rem/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--gilt); margin-bottom:.4rem; }
.lore-parts dd{ margin:0; font-size:.97rem; line-height:1.55; color:var(--body); }
.lore-quote{ position:relative; margin:1rem 0 0; padding:.2rem 0 .2rem 1rem; border-left:2px solid var(--gilt); }
.lore-quote p{ margin:0; font:400 1.18rem/1.38 var(--serif); color:var(--cream); }
.lore-quote cite{ display:block; margin-top:.6rem; font-style:normal; font-size:.86rem; color:var(--body); }
.lore-visit{ position:relative; display:inline-block; margin-top:1rem; font:500 .74rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gilt); text-decoration:none; border-bottom:1px solid rgba(217,180,106,.5); padding-bottom:.25rem; }
.lore-visit:hover{ border-bottom-color:var(--gilt); }
.lore-visit:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; }
.lore-foot{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1.1rem; padding-top:.8rem; border-top:1px solid rgba(217,180,106,.3); }
.lore-foot button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; max-width:40%; font:500 .8rem/1 var(--sans); letter-spacing:.03em; color:var(--muted); padding:.5rem .2rem; }
.lore-foot button span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lore-foot button:hover, .lore-foot button:focus-visible{ color:var(--gilt); }
.lore-foot button:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; border-radius:4px; }
.lore-idx{ font:400 .92rem/1 var(--serif); letter-spacing:.08em; font-variant-numeric:lining-nums; color:rgba(241,238,224,.6); white-space:nowrap; }
@media (min-width:960px){
  .lore-box{ width:min(38rem, 100%); padding:1.6rem 1.8rem 1.3rem; }
  .lore-title{ font-size:2.9rem; } .lore-lede{ font-size:1.3rem; } .lore-parts dd{ font-size:1rem; } .lore-quote p{ font-size:1.3rem; }
  .lore-x{ right:1.2rem; top:1.2rem; }
}