/* Spectralmoon Studio · Shopify edition · the first stitch (28 Oct 2026)
   One long scroll: tall sections with sticky stages for the films, then the page carries on.
   Every number comes from tokens.css. Check: python3 tools/grid-check.py */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis:none}
body{margin:0;background:var(--paper);color:var(--espresso);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking)}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
.muted{color:var(--muted)}
.kick{color:var(--rose-ink);margin-bottom:var(--space-2)}
.t-heading{font-family:var(--font-serif);font-weight:var(--weight-body)}

/* ---------- the header, as live (lab/journey-v2 index.html, its lines copied as they are; her rule 3 Nov: up to the hold,
   everything exactly as live). The --crystal and --hg clocks and the ring are written by edition.js, from live's own
   formulas. On the paper chapters it wears live's work page bar (.wp-bar): the lockup in the site's deeper golds, ink words,
   the same golden glass Work with us ---------- */

  /* header: the lockup in GOLDEN glass, so it holds against the cool sky */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
       padding:22px clamp(18px,3.2vw,48px);pointer-events:none}
  .site-header a{pointer-events:auto}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
  .sigil{position:relative;display:inline-flex;width:46px;height:46px}
  /* 2 Oct, her ask: the phone's gold progress ring on the desktop logo too. A hairline gold ring round the sigil fills clockwise from
     twelve as you travel: the walk to the two worlds = the first half, the Films room or Websites (journey, then the work page) the second */
  #brand,#wpBrand{position:relative}
  #brand .pring,#wpBrand .pring{position:absolute;left:-5px;top:calc(50% - 28px);width:56px;height:56px;pointer-events:none;overflow:visible;rotate:-90deg}
  #brand .pring circle,#wpBrand .pring circle{fill:none;stroke-width:1.6}
  #brand .pring .pr-t,#wpBrand .pring .pr-t{stroke:rgba(255,236,200,.22)}
  #brand .pring .pr-p,#wpBrand .pring .pr-p{stroke:#FFD98C;stroke-linecap:round;stroke-dasharray:163.36;stroke-dashoffset:163.36;filter:drop-shadow(0 0 3px rgba(255,214,150,.7));transition:stroke-dashoffset .35s ease}
  html.web-light #brand .pring{display:none}
  @media (prefers-reduced-motion:reduce){ #brand .pring .pr-p,#wpBrand .pring .pr-p{transition:none} }
  .sigil img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px .5px #fff3d6c0) drop-shadow(0 2px 10px #2a180066)}
  #sigilGlass{opacity:max(var(--crystal,1),calc(var(--hg,0) * var(--brandInk,1)))}   /* 1 Oct: crystal white over the gold hall too (--hg, see head-gold) */
  /* 24 Sep, her QA: in the Films room the crystal lockup clashed with her gold sky, so there the sigil and the name turn
     gold (the crystal overlays fade out); back at the hold they are crystal again (render's --crystal clock) */
  html.films-room #sigilGlass,html.films-room .brand>span::after,html.films-room .brand small::after{opacity:0;transition:opacity .9s ease}
  /* 24 Sep, her QA ("the logo color is barely visible" on the films crystal; gold or crystal, and help with the contrast): the deep
     bronze (brightness .3) read as a grey brown, 2:1 on the mid bronze shards and under 2:1 on the dark shards and the film cards,
     umber halo (the nav's own recipe, light words over a dark shade): crystal white on top, a brighter gold under it. Her dials:
     brandInk (1 crystal white, 0 bright gold), brandHalo (1 full, 0 off). Three 1px shadows make the halo dense right at the
     stroke, so STUDIO and the phone wordmark's hairlines keep it. Estimated at a 0.8px stroke on the WEAKEST ground (the cream
     shards, #F3E3C0): crystal 7.6:1, gold 5.7:1; crystal stays over 4.5:1 down to brandHalo .8, gold down to .9. Not yet
     measured on real frames. Static, no loop. On the words page it stays gold. */
  html.films-room #brand{filter:drop-shadow(0 0 1px rgba(24,13,4,var(--brandHalo,1))) drop-shadow(0 0 1px rgba(24,13,4,var(--brandHalo,1)))
       drop-shadow(0 0 1px rgba(24,13,4,var(--brandHalo,1))) drop-shadow(0 0 4px rgba(24,13,4,calc(.8 * var(--brandHalo,1)))) drop-shadow(0 0 12px rgba(24,13,4,calc(.45 * var(--brandHalo,1))))}
  html.films-room #brand>span{background-image:linear-gradient(135deg,#FFF8E6,#F6D48E 34%,#FFF3D6 58%,#E8B865)}
  html.films-room #sigilGlass,html.films-room #brand>span::after,html.films-room #brand small::after{opacity:var(--brandInk,1)}
  html.films-room #brand>span::after,html.films-room #brand small::after{background-image:linear-gradient(135deg,#fff,#EEF3F9 34%,#fff 62%,#D3DCE8)}
  /* 24 Sep, review: the lockup's cream bevel (a 1 px light shadow under every stroke, the sigil's too) lay between each stroke and the
     umber halo, so the lower edge read mid tone (about 2.8:1 on the pale shards, STUDIO's hairlines worst). On the crystal it goes;
     hover and focus keep their lift as brightness alone. Still to measure on real crystal frames. */
  html.films-room #brand>span,html.films-room #brand .sigil img{filter:none}
  html.films-room #brand:focus-visible>span{filter:brightness(1.2)}
  @media (hover:hover){ html.films-room #brand:hover>span{filter:brightness(1.2)} }
  /* 1 Oct, her QA: "the moment she crosses into that golden world, you barely see it", the logo, and the nav "disappearing against
     the gold". Measured on the walk film (journey-v21, the light behind the logo and behind the nav, 2 frames a second): the gold
     hall is bright from 11 s to 27 s behind the logo and to 32 s behind the nav (up to 214 of 255; the blue sky before it about
     100). On the page's own film % that is 39 to 86, the same span as the gold beads' fix (36 to 88). Over it the header wears the
     films crystal's recipe: the lockup crystal white (brandInk) on a tight dark umber halo (brandHalo), the nav's words on the
     same halo, the cream bevel fading out under it. Her QA the same day, "the black seems like a bit much": the halo is lighter and
     has its own dial (headHalo .55; the wide glow at .2, was .45), so the films crystal's brandHalo stays as it was. --hg (render) ramps it in and out with the scroll, so nothing snaps; the
     class is on only while --hg is above zero, so no filter runs on the blue sky. Her dials: headGoldFrom, headGoldTo. */
  html.head-gold:not(.films-room) #brand{filter:drop-shadow(0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55)))) drop-shadow(0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55)))) drop-shadow(0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55)))) drop-shadow(0 0 4px rgba(24,13,4,calc(.6 * var(--hg,0) * var(--headHalo,.55)))) drop-shadow(0 0 12px rgba(24,13,4,calc(.2 * var(--hg,0) * var(--headHalo,.55))))}
  html.head-gold:not(.films-room) #brand>span{filter:drop-shadow(0 1px .5px rgba(255,246,224,calc(.5 * (1 - var(--hg,0))))) drop-shadow(0 2px 10px #1a0e28aa)}
  html.head-gold:not(.films-room) #brand .sigil img{filter:drop-shadow(0 1px .5px rgba(255,243,214,calc(.75 * (1 - var(--hg,0))))) drop-shadow(0 2px 10px #2a180066)}
  html.head-gold:not(.films-room) .site-header nav a{text-shadow:0 1px 2px #1a0e28cc,0 2px 14px #1a0e2888,0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55))),0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55))),0 0 1px rgba(24,13,4,calc(var(--hg,0) * var(--headHalo,.55))),0 0 4px rgba(24,13,4,calc(.6 * var(--hg,0) * var(--headHalo,.55))),0 0 12px rgba(24,13,4,calc(.2 * var(--hg,0) * var(--headHalo,.55)))}
  .brand>span{position:relative;font:italic 1.55rem/.95 var(--font-logo);letter-spacing:-.03em;
       background-image:linear-gradient(135deg,#FFF6E2,#E7BE72 34%,#FFF1D2 58%,#B98B3C);-webkit-background-clip:text;background-clip:text;color:transparent;
       filter:drop-shadow(0 1px .5px #fff6e080) drop-shadow(0 2px 10px #1a0e28aa)}
  .brand>span::after{content:"Spectralmoon";position:absolute;left:0;top:0;opacity:max(var(--crystal,1),calc(var(--hg,0) * var(--brandInk,1)));
       background-image:linear-gradient(135deg,#f4f9ff,#9fb6d6 34%,#e8f1fc 62%,#6f86a8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand small{display:block;position:relative;font:500 .62rem/1 var(--font-ui);letter-spacing:.28em;margin:8px 0 0 2px;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
  /* 22 Sep, her QA: the name went crystal while STUDIO stayed gold. They are one lockup, so STUDIO carries the same
     crystal overlay on the same --crystal clock. */
  .brand small::after{content:"STUDIO";position:absolute;left:0;top:0;opacity:max(var(--crystal,1),calc(var(--hg,0) * var(--brandInk,1)));
       background-image:linear-gradient(135deg,#f4f9ff,#9fb6d6 34%,#e8f1fc 62%,#6f86a8);
       -webkit-background-clip:text;background-clip:text;color:transparent}
  .site-header nav{display:flex;gap:clamp(22px,2.6vw,44px)}
  .site-header nav a{font:500 .95rem/1 var(--font-ui);color:#FFF3DC;text-decoration:none;padding:14px 0;text-shadow:0 1px 2px #1a0e28cc,0 2px 14px #1a0e2888}
  /* 24 Sep, her QA: "some kind of micro-interaction... You click on it, and something happens to the button so you know where
     it's going." Hover or keyboard focus draws a gold line in from the left (it leaves to the right), in lineMs (her dial); the
     current page keeps its line drawn. A press sinks the link (scale .97). The click plays a short cue that says where it goes,
     380 ms, transform and opacity only: Films, a glint dropping down into the room; Websites, a water ring (it is the water
     world); Book a session, its arrow leaving up and out (a new tab). The brand: the sigil turns a little and the wordmark
     brightens. Reduce Motion: the line is simply there, nothing moves, and a click only turns the word gold. */
  .site-header nav a{position:relative;transition:color .3s ease,scale .18s cubic-bezier(.22,1,.36,1)}
  .site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;border-radius:1px;pointer-events:none;
       background:linear-gradient(90deg,#E7BE72,#FFE7B8 60%,#E3B25C);box-shadow:0 1px 6px rgba(26,14,40,.6);
       transform:scaleX(0);transform-origin:right center;transition:transform calc(var(--lineMs,420) * 1ms) cubic-bezier(.22,1,.36,1)}
  .site-header nav a[aria-current]::after,.site-header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
  .site-header nav a:focus-visible{color:#fff}
  @media (hover:hover){ .site-header nav a:hover{color:#fff} .site-header nav a:hover::after{transform:scaleX(1);transform-origin:left center} }
  .site-header nav a:active,#brand:active{scale:.97}
  .site-header nav a::before{content:"";position:absolute;pointer-events:none;opacity:0}
  #navFilms::before{left:50%;top:calc(100% - 9px);width:2px;height:12px;margin-left:-1px;border-radius:2px;
       background:linear-gradient(180deg,rgba(255,231,184,0),#FFE7B8 55%,#E3B25C);box-shadow:0 0 8px #FFCE7A}
  #navWeb::before{left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
       border:1px solid rgba(207,228,255,.9);box-shadow:0 0 10px rgba(207,228,255,.5),inset 0 0 8px rgba(207,228,255,.3)}
  #navFilms.mi-go::before{animation:miDrop .38s cubic-bezier(.22,1,.36,1)}
  #navWeb.mi-go::before{animation:miRing .38s cubic-bezier(.22,1,.36,1)}
  .mi-ar{position:absolute;left:100%;top:50%;margin:-.5em 0 0 .28em;font:400 .8rem/1 var(--font-ui);color:#FFE7B8;pointer-events:none;
       opacity:0;transform:translate(-4px,4px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
  #navBook:focus-visible .mi-ar{opacity:1;transform:none}
  @media (hover:hover){ #navBook:hover .mi-ar{opacity:1;transform:none} }
  #navBook.mi-go .mi-ar{animation:miOut .38s cubic-bezier(.22,1,.36,1)}
  /* 1 Oct, her pick from lab/book-compare ("number 4 feels the most in brand"): the whole nav one size up (.95 to 1.12rem) and
     Book a session in bold gold with its arrow and a 2px gold line always there, so the call to action reads first. Hover and
     focus still brighten it to white; the click still sends the arrow up and out. */
  .site-header nav a{font-size:1.12rem}
  #navBook{color:#FFD98C;font-weight:700}
  #navBook::after{transform:scaleX(1);height:2px}
  #navBook .mi-ar{opacity:1;transform:none;font-size:.95rem;color:#FFD98C}
  #navBook:focus-visible{color:#fff}
  @media (hover:hover){ #navBook:hover{color:#fff} }
  /* 5 Oct, her yes after the GLANCE audit (Crawford: "a soft link instead of a button" is the weak version): Tell us your idea is a
     real button. Her pick, same day: "just the golden glassmorphism button" (not the solid gold fill tried first): gold-tinted glass
     over a dark base so the cream letters hold on the bright sky (measured on the hero sky: 5.2:1; the first mix was 4.2), a gold edge, a soft top light, 44 px tall, no underline. Replaces
     the 1 Oct pick (bold gold text with a 2 px line, lab/book-compare no. 4). Backup index.pre-glassbutton.bak.html */
  #navBook{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;color:#FFF3DC;
    background:linear-gradient(160deg,rgba(255,217,140,.30),rgba(20,10,30,.56));-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
    box-shadow:inset 0 0 0 1px rgba(255,217,140,.8),inset 0 1px 0 rgba(255,246,222,.45),0 6px 18px rgba(10,6,20,.38);
    text-shadow:0 1px 2px rgba(20,10,4,.55) !important;transition:background .25s ease,box-shadow .25s ease,scale .18s cubic-bezier(.22,1,.36,1)}
  #navBook::after{display:none}
  #navBook .mi-ar{position:static;margin:0;color:#FFD98C}   /* inside the pill (it hung outside, at left:100%) */
  #navBook:focus-visible{color:#fff;outline:2px solid #FFF3DC;outline-offset:3px}
  @media (hover:hover){ #navBook:hover{color:#fff;background:linear-gradient(160deg,rgba(255,217,140,.46),rgba(20,10,30,.5));box-shadow:inset 0 0 0 1px #FFD98C,inset 0 1px 0 rgba(255,246,222,.6),0 8px 22px rgba(10,6,20,.42)} }
  @keyframes miDrop{0%{opacity:0;transform:translateY(-6px) scaleY(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(16px) scaleY(1)}}
  @keyframes miRing{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
  @keyframes miOut{0%{opacity:1;transform:none}55%{opacity:0;transform:translate(9px,-9px)}56%{opacity:0;transform:translate(-5px,5px)}100%{opacity:1;transform:none}}
  #brand .sigil{transition:rotate .7s cubic-bezier(.22,1,.36,1)}
  #brand>span{transition:filter .45s ease}
  #brand{transition:scale .18s cubic-bezier(.22,1,.36,1),filter .6s ease}   /* 24 Sep: filter too, for the dark halo on the films crystal */
  #brand:focus-visible .sigil{rotate:-14deg}
  #brand:focus-visible>span{filter:drop-shadow(0 1px .5px #fff6e080) drop-shadow(0 2px 10px #1a0e28aa) brightness(1.2)}
  @media (hover:hover){ #brand:hover .sigil{rotate:-14deg}
    #brand:hover>span{filter:drop-shadow(0 1px .5px #fff6e080) drop-shadow(0 2px 10px #1a0e28aa) brightness(1.2)} }
  @media (prefers-reduced-motion:reduce){
    .site-header nav a::after,.mi-ar{transition:none}
    .site-header nav a:active,#brand:active{scale:none}
    #brand .sigil{transition:none} #brand:hover .sigil,#brand:focus-visible .sigil{rotate:none}
    .mi-ar,#navBook:hover .mi-ar,#navBook:focus-visible .mi-ar{transform:none}
    #navFilms.mi-go::before,#navWeb.mi-go::before,#navBook.mi-go .mi-ar{animation:none}
    .site-header nav a.mi-go{color:#FFE7B8} }
body.on-paper .site-header{--crystal:0;--hg:0}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;
     background:linear-gradient(var(--light) 60%,transparent)}   /* live's .wp-bar ground, in this page's paper */
body.on-paper .site-header::before{opacity:1}
body.on-cream .site-header::before{background:linear-gradient(var(--cream-paper) 60%,transparent)}
body.on-paper .brand>span{background-image:linear-gradient(135deg,#B98B3C,#79624C 50%,#B98B3C);filter:none}   /* live .wp-brand: the deeper golds, the pale ones vanish on a light page */
body.on-paper .site-header nav a:not(#navBook){color:#141318;text-shadow:none}   /* live .wp-nl, --wink */
@media (hover:hover){ body.on-paper .site-header nav a:not(#navBook):hover{color:#141318} }
body.on-paper .site-header nav a:not(#navBook):focus-visible{color:#141318}
/* live's progress rail: how far into the world you are (edition.js, live's p) */
  /* the progress rail: how far into the world you are, gold on a hairline */
  .rail{position:fixed;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#ffffff10,#ffffff18);z-index:25;pointer-events:none}
  .rail i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#B98B3C,#E3B25C 45%,#FFE7B8);
       box-shadow:0 0 12px #E3B25C90;transition:width .12s linear}
  .rail b{position:absolute;top:-3px;left:var(--p,0%);width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
       background:#FFF3D6;box-shadow:0 0 10px #FFCE7A,0 0 22px #E3B25C80;transition:left .12s linear}
  @media (prefers-reduced-motion:reduce){.rail i,.rail b{transition:none}}
  /* 24 Sep, her QA: "The whole time, I want to have those bars there, like a progression bar." Over the gold hall the gold bar
     sank into the gold floor (film 60 to 70: a third of it under 3:1) and the empty track (6% white) was not there at all.
     The track is now a smoky band under a light hairline, and the gold rides on a dark edge, so the bar reads over bright gold
     and over night stone alike (measured on the film frames: the gold holds 3:1 or better along the whole bar at film 10, 50,
     60, 70 and 100). railShade is her dial: 0 = the old hairline, 1 = the darkest. */
  .rail{background:linear-gradient(180deg,rgba(255,248,234,calc(.10 + .08 * var(--railShade,.6))) 0 1px,rgba(8,10,22,calc(.62 * var(--railShade,.6))) 1px);
       box-shadow:0 -1px 0 rgba(8,10,22,calc(.5 * var(--railShade,.6)))}
  .rail i{box-shadow:0 -1px 0 rgba(20,12,4,calc(.75 * var(--railShade,.6))),0 0 12px #E3B25C90}
  .rail b{box-shadow:0 0 0 1px rgba(40,24,6,calc(.8 * var(--railShade,.6))),0 0 10px #FFCE7A,0 0 22px #E3B25C80}
.jump-veil{position:fixed;inset:0;z-index:50;background:var(--night);opacity:0;pointer-events:none;transition:opacity .32s var(--ease-io)}
.jump-veil.on{opacity:1}

/* ---------- sticky stages (the walk, the sky) ---------- */
.walk{height:800svh;background:var(--night)}
.sky{height:400svh;background:var(--night)}
/* the blue chapter (blue.js): its canvas stands under the page's stage, which takes over only for the two hand-offs */
.blue-world{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .5s ease}
.blue-world.in{visibility:visible;opacity:1}
.has-blue .sky{height:1080svh}
.has-blue #skyFilm,.has-blue #sky .stage-shade{display:none}
#liftFilm,.lift-lyra,.lift-ball{display:none}
.has-blue #liftFilm{display:block;opacity:0}   /* a texture for the stage, never shown itself */
.lift-lyra{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.lift-ball{position:absolute;left:0;top:0;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity}
.has-blue .lift-lyra.on,.has-blue .lift-ball.on{display:block}
.has-blue #sky .words{max-width:min(720px,44vw);text-wrap:balance;font:400 clamp(34px,4.1vw,92px)/1.06 var(--font-ui);letter-spacing:-.03em;
     opacity:calc(1 - var(--dz,1));translate:0 calc(var(--dz,1) * 18px);filter:blur(calc(var(--dz,1) * 16px)) var(--white-gold-glow);transition:none}   /* her QA 5 Nov: bigger, the front's letters, dissolving with the scroll (--dz, skyApply) */
.has-blue #sky .words b{font-weight:900;font-style:normal;letter-spacing:-.04em}
.has-blue #sky .words:not(.words--right){bottom:auto;top:clamp(96px,17svh,190px);max-width:min(620px,38vw)}   /* above Lyra, clear of the pyramid */
.has-blue #sky .words::before{content:"";position:absolute;inset:-60% -22%;z-index:-1;background:radial-gradient(closest-side,rgba(3,10,18,.42),rgba(3,10,18,0))}   /* the shade behind the words only, as live's sky moment: the picture stays clean */
.stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--cream)}
.stage-first,.stage-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#walkFilm{opacity:0;transition:opacity .6s var(--ease-io)}
#walkFilm.ready{opacity:1}
.phone-chain{position:absolute;inset:0}
.chain-film{opacity:0} .chain-film.on{opacity:1}
.hold-plate,.lyra-cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-io)}
.hold-plate.on,.lyra-cut.on{opacity:1}
.hold-plate.on{transition:opacity 1.4s var(--ease-io)}   /* the live pinkMs: her pink world comes in over 1.4 s, leaves in .35 s */
.lyra-cut.on{transition:none}                            /* as live: she IS the frame, so she snaps on */
@media (min-aspect-ratio:16/9){ #walkFirst,#walkFilm,.hold-plate,.lyra-cut{object-position:50% 0%} }

/* ---------- the walk's words, as live (lab/journey-v2, her tuned values): two lines on the walk, tilted signs we fly past.
   edition.js moves them (--bx, --by, --bs) in film percent, as live; phones fade them in place ---------- */
#walk{--beatS:4.10;--beatW:42;--beatY:55.87;--beatX:7;--beatTilt:20.38;--beatP:486.96px;--beatLight:500;--beatHeavy:900;--beatLead:1.05;--beatTrack:-3;--beatIndent:-0.78;--beatAlign:left;--web2Size:1.35;--web2Shade:.4}
.beat{position:absolute;left:calc(var(--beatX,7) * 1vw);top:calc(var(--beatY,46) * 1%);margin:0;z-index:11;
     transform:translate(var(--bx,0px),var(--by,0px)) translateY(-50%) scale(var(--bs,1)) perspective(var(--beatP,780px)) rotateY(calc(var(--beatTilt,46) * 1deg));
     transform-origin:left center;backface-visibility:hidden;max-width:min(calc(var(--beatW,32) * 1vw),620px);
     font:400 calc(var(--beatS,3.2) * 1vw)/var(--beatLead,1.08) var(--font-ui);font-weight:var(--beatLight,400);
     letter-spacing:calc(var(--beatTrack,-3) * 0.01em);color:#FFF8EA;
     text-align:var(--beatAlign,left);text-indent:calc(var(--beatIndent,0) * 1vw);
     padding-left:max(0px,calc(var(--beatIndent,0) * -1vw));
     text-shadow:0 4px 50px #0a1428aa,0 1px 3px #0a142860;pointer-events:none;opacity:0;text-wrap:balance}
.beat b{font-weight:var(--beatHeavy,900);letter-spacing:-.04em}
.beat.on-right{left:auto;right:calc(var(--beatX,7) * 1vw);text-align:right;white-space:nowrap;max-width:none;
     transform:translate(var(--bx,0px),var(--by,0px)) translateY(-50%) scale(var(--bs,1)) perspective(var(--beatP,780px)) rotateY(calc(var(--beatTilt,46) * -1deg));
     transform-origin:right center}
@media (max-width:700px){ .beat{left:6vw;max-width:76vw;font-size:30px} .beat.on-right{right:6vw;left:auto;white-space:normal;max-width:76vw} }
@media (min-width:701px){ #beat2{font-size:calc(var(--beatS,3.2) * var(--web2Size,1.35) * 1vw)} }
@media (max-width:700px){ #beat2{font-size:34px} }
#beat2{color:#FFFFFF;text-shadow:0 1px 2px rgba(20,12,4,.55),0 0 1px rgba(20,12,4,.35)}
#beat2::before{content:"";position:absolute;inset:-.55em -.9em;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(16,10,4,var(--web2Shade,.4)),rgba(16,10,4,calc(var(--web2Shade,.4) * .6)) 55%,rgba(16,10,4,0))}

/* ---------- the hold and the event, one stage (laptops). Her live pink world, as live: the still stands until the scene
   has drawn, then its canvas melts in; in over 1.4 s, out in .35 s ---------- */
.walk.has-event{height:calc((var(--walk) + var(--hold) + 100) * 1svh)}   /* the walk (edition.js WALK), then the hold (HOLD), then one screen */
/* her rule, 3 Nov: laptops as live. The film's poster is the first picture, no fade, no veil on the walk or the hold; the walk's
   shade comes back with the Films room, which was tuned with it (edition.js) */
.walk.has-event .stage-first{display:none}
.walk.has-event #walkFilm{opacity:1;transition:none}
#walkFilm,#unicorn{filter:var(--pw,none)}   /* the Behance colours on the Pyramid World (pyramidLook, edition.js) */
.walk.has-event #walkShade{opacity:0}
/* her QA (3 Nov, twice): "too much blackness ... the story reel should be right after it": the reel's page rises with the
   torn black (it enters as the tear starts, hold 1940, and stands at the top as the tear ends, 2040) */
.has-stage .walk.has-event + .films{position:relative;z-index:2;margin-top:-125svh}
:root:not(.ground-white) .has-stage .walk.past{background:transparent}
:root:not(.ground-white) .has-stage .walk.past > .stage{visibility:hidden}   /* the room has gone to night: the world stage stands in its place, so the rows' torn edge is never cut off by the hold's own bottom */
.hold-bg,.lyra-wrap{position:absolute;inset:0}
.lyra-wrap{transform-origin:50% 100%}
.uni-pink{filter:url(#lookSky);position:absolute;left:50%;top:50%;width:177.778vh;height:100vh;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.uni-pink.on{opacity:1;transition-duration:1.4s}
.land-clouds{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease;pointer-events:none}
.land-clouds.on{opacity:1;transition-duration:1.4s}
.uni-pink:not(.live) canvas{opacity:0}
.uni-pink canvas{transition:opacity .9s ease}
@media (min-aspect-ratio:16/9){ .uni-pink{width:100vw;height:56.25vw;top:0;transform:translate(-50%,0)} }
.ev-img,.ev-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;visibility:hidden}
@media (min-aspect-ratio:16/9){ .walk .ev-img,.walk .ev-vid{object-position:50% 0%} }
.ev-hand{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.ev-hand.on{visibility:visible}
.ev-src,.ev-room{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}   /* sources stay laid out (transparent), so their frames keep coming */
/* the studio line: big editorial lines that rise up the screen IN FRONT of her (Shopify: the word stands before the figure) */
/* her QA (3 Nov): the lines live in the open sky on her right. In the hold she reaches to the middle of the screen
   (the picture is cropped evenly on both sides, so her edge stays at 50 vw on every laptop), so they start past it */
.ev-line{position:absolute;right:var(--margin);top:0;max-width:calc(48vw - var(--margin));margin:0;text-align:right;text-wrap:balance;
     font:700 clamp(40px,4.9vw,112px)/.94 var(--font-ui);letter-spacing:-.045em;color:#FFF8EA;
     text-shadow:0 10px 60px rgba(10,20,40,.5),0 2px 6px rgba(10,20,40,.35);visibility:hidden;will-change:transform,opacity;pointer-events:none}
.ev-line i{font:italic 400 1em/.92 var(--font-serif);letter-spacing:-.03em}
/* the rising lines (?line=now) wear White gold (.wg) like every title. The other looks stay to compare:
   ?letters=white (as before) or ?letters=glass */
[data-letters="white"] .stage > .ev-line{background:none;color:#FFF8EA;filter:none;text-shadow:0 10px 60px rgba(10,20,40,.5),0 2px 6px rgba(10,20,40,.35)}
[data-letters="glass"] .stage > .ev-line{background:linear-gradient(180deg,rgba(255,252,244,.72),rgba(255,248,234,.1) 52%,rgba(255,248,234,.34));-webkit-background-clip:text;background-clip:text;color:transparent;
     -webkit-text-stroke:1.2px rgba(255,250,240,.82);text-shadow:none;filter:drop-shadow(0 6px 20px rgba(10,20,40,.32))}
/* the studio line's three ideas, to compare by eye (her ask, 3 Nov; edition.js studioIdea): ?line=a masked lines, b gold word
   fill, c one word changes, ?line=now today's rising lines. Same faces, same gold, standing in the sky on her right */
:is([data-line="a"],[data-line="b"],[data-line="c"]) .stage > .ev-line{display:none}
.ev-idea{position:absolute;right:var(--margin);top:43%;margin:0;text-align:right;white-space:nowrap;transform:translateY(-50%);
     font:700 clamp(46px,5.7vw,132px)/.94 var(--font-ui);letter-spacing:-.045em;visibility:hidden;pointer-events:none}
.ev-idea i{font:italic 400 1em/.92 var(--font-serif);letter-spacing:-.03em}
/* her gold (3 Nov, lab/studio-line-gold): White gold (.wg), laid over the whole line; Sunset gold melted into her pink sky */
.ev-idea .row{display:block;overflow:hidden;padding:.06em .12em .14em;margin:-.06em -.12em -.14em}
.ev-idea .row.next{margin-top:.38em}
.ev-idea .in{display:inline-block;will-change:transform}
.ev-idea .slot{position:relative}
.ev-idea .alt{position:absolute;right:.12em;top:.06em}
/* the changing word in Stardom, upright (her pick, 3 Nov: the italic serif read as AI-ish) */
.ev-idea .slot i{font:400 1.5em/.94 var(--font-word);font-style:normal;letter-spacing:0;perspective:520px}   /* her QA 5 Nov: websites and films the same size */
/* her QA (5 Nov, "barely noticeable"): the word changes as a wheel of letters, films lands bigger, with a warm light behind it (no flash: it rises over 60 svh and stays low) */
.ev-idea .row.slot{overflow:visible;clip-path:inset(-20% -30% -56% -60%)}
.ev-idea .ch{display:inline-block;padding:.1em .02em .24em;margin:-.1em -.02em -.24em;transform-origin:50% 60%;backface-visibility:hidden;will-change:transform,opacity}
.ev-idea .alt .ch{opacity:0}
.ev-idea .flare{position:absolute;right:-8%;top:-34%;width:118%;height:210%;z-index:-1;pointer-events:none;opacity:var(--fl,0);background:radial-gradient(closest-side,rgba(255,206,130,.55),rgba(255,176,98,.26) 52%,rgba(255,170,90,0))}
/* the label on each idea (her rule: 40 px or bigger on comparisons), on the grass below the line, with the switch */
.idea-tag{position:absolute;right:var(--margin);bottom:24px;z-index:6;max-width:min(460px,calc(50vw - var(--margin)));padding:16px 20px 14px;border-radius:14px;
     background:rgba(16,11,8,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#FFF8EA;font:400 16px/1.4 var(--font-ui);visibility:hidden;pointer-events:auto}
.idea-tag.on{visibility:visible}
.idea-tag b{display:block;margin-bottom:8px;font:700 44px/1 var(--font-ui);letter-spacing:-.03em;color:#F3D08C}
.idea-tag nav{display:flex;gap:8px;margin-top:12px}
.idea-tag a{padding:7px 12px;border:1px solid rgba(255,248,234,.35);border-radius:99px;font:600 13px/1 var(--font-ui);letter-spacing:.12em;color:#FFF8EA;text-decoration:none}
.idea-tag a[aria-current]{background:#E7BE72;border-color:#E7BE72;color:#1A120A}
/* the moment in the Films room: live's room words (lab/journey-v2 .glass-pane: faces, weights, colours, the thin dark edge
   on every letter) rising like the studio line, between her sky and her. Her silhouette masks them, framed as the room
   canvas frames its film (cover, pinned to the top on screens wider than 16:9). Each block keeps a soft shade behind it,
   under her too, so the words read over the bright sun */
.ev-moment{position:absolute;inset:0;pointer-events:none;visibility:hidden}   /* her silhouette mask went (4 Nov): the words stand in the sky on her right now, nothing passes behind her */
.ev-moment .ev-line{text-shadow:0 0 1px rgba(8,6,20,.85),0 0 2px rgba(8,6,20,.6),0 1px 14px rgba(20,14,40,.5)}
.ev-moment .ev-line::before{content:"";position:absolute;inset:-36px -56px;z-index:-1;pointer-events:none;
     background:radial-gradient(closest-side,rgba(16,10,4,.42),rgba(16,10,4,.26) 55%,rgba(16,10,4,0))}
/* her QA (3 Nov): the room's big lines in the studio line's own type (Satoshi bold, its size and tracking) and its White gold,
   in the sky on her right like it, so no word goes behind her */
.ev-head{font:700 clamp(46px,6.2vw,176px)/.94 var(--font-ui);letter-spacing:-.045em;max-width:calc(58vw - var(--margin))}   /* her QA 5 Nov: on a big monitor the letters felt small for the space */
.ev-lead{font:700 clamp(24px,2.6vw,52px)/1.05 var(--font-ui);letter-spacing:-.03em}
/* her QA (5 Nov, "some sort of divisions ... the rhythm is off, too many scrolls"): the way we work is one block that passes once, a gold line between the steps */
.ev-steps{left:50vw;right:auto;width:min(38em,calc(50vw - var(--margin)));max-width:none;text-align:left;
     font:400 clamp(15px,min(1.22vw,2.15vh),21px)/1.45 var(--font-ui);letter-spacing:0;color:#F6F2F8;text-wrap:pretty}
.ev-moment .ev-steps::before{inset:-70px -110px;background:radial-gradient(closest-side,rgba(16,10,4,.66),rgba(16,10,4,.44) 62%,rgba(16,10,4,0))}   /* her QA 5 Nov: no box, a little shade, the lines stay */
.ev-moment .ev-steps{text-shadow:0 0 1px rgba(8,6,20,.9),0 0 2px rgba(8,6,20,.7),0 1px 14px rgba(10,8,24,.5)}
.ev-step{display:grid;grid-template-columns:6em minmax(0,1fr);column-gap:14px;align-items:baseline;padding:clamp(9px,1vw,14px) 0;border-top:1px solid rgba(255,231,184,.26)}
.ev-steps .es-kick{margin:0 0 clamp(8px,1vw,14px);font:600 12px/1.2 var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:#FFE7B8}
.ev-step b{font:600 12px/1 var(--font-ui);letter-spacing:.24em;text-transform:uppercase;color:#FFE7B8}
.ev-step .es-tools{display:block;margin-top:5px;font:500 .84em/1.45 var(--font-ui);font-style:normal;letter-spacing:0;color:#E9C77B}
.walk:not(.has-event) :is(.ev-src,.ev-room,.ev-hand,.ev-line,.ev-moment,.uni-pink,.land-clouds){display:none}

/* ---------- the world stage: from the films on, the grounds are drawn by one fixed canvas behind the content, so the
   sections lend it their grounds and their films (edition.js adds .has-stage only when WebGL works) ---------- */
.world-stage{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;visibility:hidden}
.world-stage.on{visibility:visible}
.has-stage :is(.films,.films-rows,.reel,.sky,.websites,.interlude,.work,.studio){background:transparent}   /* the footer keeps its night: too short to finish a hand-off */
.has-stage #skyFilm,.has-stage .interlude > video{opacity:0}
.has-stage :is(.sky,.interlude) .stage-shade{opacity:var(--leave,1);background:linear-gradient(to top,transparent,var(--veil) 14%,transparent 56%)}   /* the shade stays behind the words, off the edge where the next ground rises; --leave: it goes with them before cream arrives (edition.js) */
.fade{opacity:0;transition:opacity .8s var(--ease-io)}
.fade.on{opacity:1}
.words b{font-weight:var(--weight-body);font-style:italic}
.stage-shade{position:absolute;inset:0;background:linear-gradient(to top,var(--veil),transparent 56%)}
.words{position:absolute;left:var(--margin);bottom:var(--space-9);max-width:720px;opacity:0;translate:0 var(--space-3);transition:opacity .8s var(--ease-io),translate .8s var(--ease-out);pointer-events:none}
.words.on{opacity:1;translate:0 0}
.words--right{left:auto;right:var(--margin);text-align:right}
.open-title,.intro-title{font-family:var(--font-serif);font-weight:var(--weight-body);font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
.open-title span{font-style:italic}
.words--open .t-lede{margin-top:var(--space-2)}
.words--intro .t-label{color:var(--gold-light);margin-bottom:var(--space-2)}
.words--intro .t-heading{margin-top:var(--space-2)}

/* ---------- the first screen's sky and the phoenix, as live (lab/journey-v2 index.html, its lines copied as they are; entrance.js
   runs them). Her Unicorn clouds, the gold nebula, the first scroll's ray, the vignette; #haze never draws on live, so it is not here ---------- */
  .guide{position:absolute;left:0;top:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.2s ease;will-change:transform}   /* 24 Sep: the phoenix guide, a small box that follows him */
  .guide.on{opacity:1}
  #vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 46%, #0000 28%, #05070Ccc 100%);opacity:0}
  #burst{position:absolute;left:50%;top:50%;width:max(100vw,177.778vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
  #nebula{position:absolute;left:50%;top:50%;width:max(100vw,177.778vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen}
  /* 21 Sep, her note "two images overlapping": inside her Unicorn project the pyramid picture is 1372x771 on the 1920x1080 canvas,
     centred at (0.489, 0.5275), not full frame. So the scene is scaled 1920/1372 and nudged until that picture sits exactly on the film. */
  .unicorn{position:absolute;left:50%;top:50%;width:max(100vw,177.778vh);height:max(56.25vw,100vh);transform:translate(-50%,-50%);pointer-events:none}
  .unicorn canvas{opacity:0;transition:opacity .6s ease}.unicorn.pic canvas{opacity:1}   /* 3 Oct: her scene shows only once its own picture is drawn (uniPic, by the SDK at the end of the page) */
  /* 21 Sep, the real cause of "two pyramids": on screens wider than 16:9 the film is pinned to the TOP (so the landing hands off
     to her plate without a jump), while these layers sat centred, about 77px lower on her screen. They pin to the top with it. */
  @media (min-aspect-ratio: 16/9){ .unicorn,#nebula,#burst{top:0;transform:translate(-50%,0)} }
<style>canvas.gl-lost{display:none!important}</style>
.walk:not(.has-event) :is(#unicorn,#nebula,#burst,#vig,.guide){display:none}

/* ---------- the scroll cue and her gold glass beads, as live (its lines copied as they are, in its order; the other cues' selectors
   are live's and harmless here). The word is Erode italic 500, weight 501 in tokens.css ---------- */
  /* 23 Sep, her QA: the dots and the word sit exactly under the pyramid's light, not the screen centre. That light is the
     ray's apex (burstX, JS sets --lightX); the plate and the ray are both cover-sized, so this calc tracks them at any size.
     The dots are gold glass beads now (specular, honey body, deeper rim) and run down to just above the word. */
  .motes{position:absolute;left:calc(50% + (var(--lightX,.49) - .5) * max(100vw,177.778vh) + var(--cueNudge,0px));bottom:calc(5vh + 22px);transform:translateX(-50%);width:18px;height:66px;pointer-events:none}
  .motes i,.jr-cue .jm i,.room-cue .rc-m i{position:absolute;left:50%;top:0;width:var(--cueDot,10px);height:var(--cueDot,10px);margin-left:calc(var(--cueDot,10px) / -2);border-radius:50%;
       background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.98) 0 11%,rgba(255,253,244,.55) 19%,rgba(255,253,244,0) 34%),
         radial-gradient(circle at 64% 74%,rgba(255,240,200,.6) 0 8%,rgba(255,240,200,0) 22%),
         radial-gradient(circle,rgba(255,231,176,.22) 0 42%,rgba(240,190,98,.55) 72%,rgba(176,122,46,.92) 100%);   /* 24 Sep, her QA: more glass: a clear body, a sharp highlight, a caustic, a bright rim */
       box-shadow:inset 0 0 0 1px rgba(255,246,222,.82),inset 0 -2px 3px rgba(255,236,200,.35),0 0 calc(12px * var(--cueGlow,1)) #FFCE7A,0 0 calc(28px * var(--cueGlow,1)) #E3B25C99;
       opacity:0;animation:mote 2.6s cubic-bezier(.4,0,.5,1) infinite}
  @keyframes mote{0%{opacity:0;transform:translateY(-10px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1)}
       70%{opacity:.9}100%{opacity:0;transform:translateY(58px) scale(.85)}}
  @media (prefers-reduced-motion:reduce){.motes{display:none}}
  .motes.rest{display:none}
  /* 30 Sep, her QA: over the gold bridge and hall (motesDarkFrom to motesDarkTo, film %) the beads turn to dark glass: a deep umber body,
     the same sharp highlight, a light rim and a soft light halo, so they read on gold as the gold ones read on the stone */
  .motes.dark i{background:radial-gradient(circle at 32% 28%,rgba(255,252,240,.95) 0 11%,rgba(255,252,240,0) 28%),
       radial-gradient(circle,rgba(92,56,18,.6) 0 40%,rgba(43,26,6,.92) 74%,rgba(22,13,3,.98) 100%);
       box-shadow:inset 0 0 0 1px rgba(255,240,210,.85),0 0 8px rgba(255,244,222,.45),0 1px 5px rgba(22,13,3,.55)}
  .cue,.jr-cue p,.room-cue em{font-size:12.5px!important;font-weight:600!important;letter-spacing:.26em!important}   /* 2 Oct, her: "so huge and out of proportion" (was 15) */
  /* a soft dark ground under the words so they read over the bright causeway and the gold (her tester: "much clearer, bigger") */
  .cue::before,.room-cue em::before{content:"";position:absolute;z-index:-1;inset:-14px -30px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(6,10,22,.5),rgba(6,10,22,0));}
  .cue.dark::before{background:radial-gradient(closest-side,rgba(255,240,214,.55),rgba(255,240,214,0))}
  .room-cue em{position:relative;isolation:isolate}
  .cue.nudge,.motes.nudge{animation:lpNudge .9s cubic-bezier(.3,0,.3,1) 2}
  /* 2 Oct evening, her call: her gold glass beads back (crystal in the Websites journey), the small size, more glow; awake = much more */
  .motes,.jr-cue .jm,.room-cue .rc-m{--cueDot:11px;--cueGlow:1.6}
  html.cue-awake .motes,html.cue-awake .jr-cue .jm,html.cue-awake .room-cue .rc-m{--cueGlow:2.6}
  html.cue-awake .motes i,html.cue-awake .jr-cue .jm i,html.cue-awake .room-cue .rc-m i{filter:brightness(1.18)}
  @keyframes lpNudge{50%{translate:0 -8px}}
  .cue,.jr-cue p,.room-cue em{font:italic 400 17px/1.1 var(--font-serif)!important;letter-spacing:.01em!important;text-transform:lowercase!important;padding-left:0!important;transition:text-shadow .8s ease,opacity .8s ease}
  html.cue-awake .cue,html.cue-awake .room-cue em{text-shadow:0 0 3px rgba(10,20,40,.6),0 0 14px rgba(255,214,140,.9),0 0 30px rgba(243,194,122,.55)!important;animation:rwWord 1.6s ease-in-out infinite}
  @keyframes rwWord{50%{opacity:.6}}
  @media (prefers-reduced-motion:reduce){ .lpath i,.lpath svg{animation:none!important;opacity:.85!important} html.cue-awake .cue,html.cue-awake .room-cue em,html.cue-awake .jr-cue p{animation:none} }
  @media (prefers-reduced-motion:reduce){ .lpath i,.lpath svg{animation:none!important;opacity:.9!important} .cue.nudge,.motes.nudge,.jr-cue p,.room-cue em{animation:none} }
  .cue,.room-cue em{font:italic 500 19px/1.1 var(--font-serif)!important;color:#FFF6E2!important;
    text-shadow:0 0 1px rgba(5,8,18,.95),0 1px 2px rgba(5,8,18,.95),0 0 10px rgba(5,8,18,.85),0 0 24px rgba(5,8,18,.6)!important}
  .cue::before,.room-cue em::before,.cue.dark::before{inset:-18px -40px;background:radial-gradient(closest-side,rgba(5,9,20,.62),rgba(5,9,20,0))}
  .cue::before,.cue.dark::before{display:none}
  .cue{text-shadow:0 0 1px rgba(5,8,18,.95),0 0 2px rgba(5,8,18,.9),0 1px 3px rgba(5,8,18,.8),0 0 7px rgba(5,8,18,.45)!important}
  html.cue-awake .cue{text-shadow:0 0 1px rgba(5,8,18,.95),0 0 2px rgba(5,8,18,.9),0 1px 3px rgba(5,8,18,.8),0 0 16px rgba(255,214,140,.75)!important}
  .cue,.jr-cue p,.room-cue em,html.cue-awake .cue,html.cue-awake .room-cue em,html.cue-awake .jr-cue p{animation:cueGrow 2.8s ease-in-out infinite}
  .cue{transform-origin:0 50%}
  html.cue-awake{--cueMax:1.16}   /* 2 Oct review: when nobody moves the SAME breath grows bigger (a second animation restarted it with a jump) */
  @keyframes cueGrow{0%,100%{scale:.94}50%{scale:var(--cueMax,1.08)}}
  /* 2 Oct review, heat (the 24 Sep rule: nothing animates unseen): the breath parks wherever the word is gone */
  .cue.rest,html.cue-awake .cue.rest,.room-cue.rest em,html.cue-awake .room-cue.rest em,.wh-cue.gone em,html.cue-awake .wh-cue.gone em,
  .web-page:not(.on) .wh-cue em,html.cue-awake .web-page:not(.on) .wh-cue em{animation:none}
  @media (prefers-reduced-motion:reduce){ .cue,.jr-cue p,.room-cue em,html.cue-awake .cue,html.cue-awake .room-cue em,html.cue-awake .jr-cue p{animation:none} }
  /* 23 Sep, her QA: just the word, under the dots, on the pyramid's light (same --lightX as .motes). No sweeping line.
     padding-left .34em balances the letter-spacing trailing after the last letter, so the word is optically centred. */
  .cue{position:absolute;left:calc(50% + (var(--lightX,.49) - .5) * max(100vw,177.778vh) + var(--cueNudge,0px));bottom:5vh;transform:translateX(-50%);margin:0;padding-left:.34em;white-space:nowrap;transition:color .6s ease,text-shadow .6s ease;
       font:500 11px/1 var(--font-ui);letter-spacing:.34em;text-transform:uppercase;color:#EDE4D4;text-shadow:0 1px 10px #0a1428;pointer-events:none}
  /* 24 Sep, her QA: "Can the scroll be golden when we are at the pyramids and the golden bridge?" The word takes the gold
     dots' honey (#F0BE62), mixed with the old bone white by her dial cueGold (0 = bone, 1 = the dots' honey; JS writes the
     mix as --cueInk). Over the gold hall it still goes dark (.cue.dark below wins, as before). A tight navy halo under the
     soft one keeps it at 4.7:1 or better on the causeway stone, film 0 to 50 (measured on the film frames). */
  .cue{color:var(--cueInk,#EFC87F);text-shadow:0 0 3px rgba(10,20,40,.55),0 1px 10px #0a1428}
  /* 23 Sep, her QA: over the gold hall the light cue disappears, so it turns deep brown there (JS toggles .dark between
     cueDarkFrom and cueDarkTo, film %) */
  .cue.dark{color:#2B1A06;text-shadow:0 1px 10px rgba(255,236,200,.55)}
  /* 5 Nov, the cue stays on the landing: from the first sky on it sits on her silk, where the cream word was lost, so it turns deep brown there */
  html .cue.on-silk,html.cue-awake .cue.on-silk{color:#FFF6E6!important;text-shadow:0 0 2px rgba(24,14,6,.95),0 1px 4px rgba(24,14,6,.9),0 0 16px rgba(24,14,6,.8)!important}   /* her QA 5 Nov: it must read on her silk */

/* ---------- the story reel ---------- */
.reel{background:var(--night);color:var(--cream)}
.reel .kick{color:var(--gold-light)}
.reel .muted{color:var(--gold-light)}
.reel-frame{position:relative;margin:var(--space-5) 0 var(--space-3);aspect-ratio:16/9;background:var(--espresso);border-radius:2px;overflow:hidden}
.reel-frame video{width:100%;height:100%;object-fit:cover}
.reel-sound{position:absolute;right:var(--space-3);bottom:var(--space-3);min-height:48px;padding:0 var(--space-3);border:1px solid var(--cream);border-radius:999px;background:var(--veil);color:var(--cream);font:inherit;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;cursor:pointer}

/* ---------- the films, two rows that drift ---------- */
.films{background:var(--cream-paper)}
/* her QA (4 Nov): the Studio's cloudy cream behind the rows, crisp white was too sharp after the night of the reel */
.films-rows{position:relative;overflow:clip;background:var(--cream-paper)}   /* clip, not hidden: the deck pins inside it */
.films-rows > *:not(.studio-clouds){position:relative;z-index:1}
/* the film deck (deck.js, her call 5 Nov): one row of her films as paper, on laptops. Phones keep the rows below */
:root:not(.ground-white) .films-rows.has-deck :is(.drift,.row-head){display:none}
/* her call (5 Nov): dots, no arrows, and the page's own scroll walks the films. The stage pins for --deckRun of scroll; the clouds stay with it */
.has-deck .deck-pin{height:calc(100svh + var(--deckRun,400svh))}
.has-deck .deck-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding-block:clamp(56px,8svh,84px) var(--space-3)}
.films-rows.has-deck > .studio-clouds{position:sticky;inset:auto;top:0;width:100%;height:100svh;margin-bottom:-100svh}
.deck{position:relative;flex:1 1 auto;min-height:0;isolation:isolate;touch-action:pan-y;outline:none;cursor:grab}   /* no clip: the warm shadow under the film fades out by itself, a clip cut it in a straight line */
.deck[hidden],.deck-cap[hidden],.deck-dots[hidden]{display:none}
.deck:active{cursor:grabbing}
.deck:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.deck canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.deck-shadow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,rgba(70,46,20,.9) 0%,rgba(70,46,20,0) 70%);opacity:0}
.deck-dots{flex:none;display:flex;justify-content:center;position:relative;z-index:1}
.deck-dot{position:relative;width:32px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.deck-dot::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--espresso);transition:transform .3s ease,background-color .3s ease}
.deck-dot[aria-current="true"]::before{background:var(--espresso);transform:scale(1.35)}
@media (hover:hover){ .deck-dot:hover::before{background:var(--espresso)} }
@media (prefers-reduced-motion:reduce){ .deck-dot::before{transition:none} }
.deck-dot:focus-visible,.deck-watch:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;border-radius:4px}
.deck-cap{flex:none;display:grid;justify-items:center;gap:var(--space-1);text-align:center;padding-inline:var(--margin);position:relative;z-index:1}
.deck-cap :is(.t-label,.t-body){margin-bottom:0}
.deck-cap .deck-watch{margin-top:0}
.deck-cap h3{font-family:var(--font-serif);font-weight:var(--weight-body);font-size:var(--text-heading);line-height:var(--leading-tight)}
.deck-watch{margin-top:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
:root.ground-white .deck-pin{display:none}   /* before and after, while she decides: today's rows. Delete with the flip */
.row-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3);margin-top:var(--space-6);margin-bottom:var(--space-3)}
.row-head h3{font-family:var(--font-serif);font-size:var(--text-heading);line-height:var(--leading-tight)}
.drift{overflow:hidden}
.drift-track{display:flex;gap:var(--gutter);width:max-content;list-style:none;margin:0;padding:0;animation:drift 96s linear infinite}
.drift[data-dir="right"] .drift-track{animation-direction:reverse}
.drift:hover .drift-track,.drift:focus-within .drift-track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.card{width:400px}
.card video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;background:var(--espresso)}
.card h4{margin-top:var(--space-2);font-family:var(--font-serif);font-weight:var(--weight-body);font-size:var(--text-lede);line-height:var(--leading-tight)}
.card p{margin-top:var(--space-1);color:var(--muted)}
.card{position:relative}
.card-hit{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:2px}
.card-hit:focus-visible{outline:2px solid var(--gold,#B98B3C);outline-offset:4px}
.card video{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.card:hover video{transform:scale(1.02)}
.film-open .drift-track{animation-play-state:paused}

/* the film, big (her call, 3 Nov): the card grows into the middle, its story beside it; buttons, never the page's scroll */
.ff{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(16px,5vw,88px) clamp(16px,6vw,120px)}
.ff[hidden]{display:none}
.ff-veil{position:absolute;inset:0;background:var(--veil-deep);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease}
.ff.on .ff-veil{opacity:1}
.ff-panel{position:relative;margin:0;width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3.2vw,56px);align-items:center;transform-origin:0 0;color:var(--cream)}
.ff-panel video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;background:var(--espresso)}
.ff-panel figcaption{opacity:0;transform:translateY(14px);transition:opacity .5s ease .3s,transform .6s cubic-bezier(.22,1,.36,1) .3s}
.ff.on .ff-panel figcaption{opacity:1;transform:none}
.ff-kind{color:#FFE7B8}
.ff h3{margin:calc(10px - .12em) -.18em calc(14px - .24em);font:italic 400 clamp(32px,3.4vw,58px)/1.02 var(--font-serif);letter-spacing:-.015em}   /* White gold (.wg) */
.ff-line{font:italic 400 clamp(18px,1.45vw,23px)/1.4 var(--font-serif);color:#FFE7B8}
.ff-story{margin-top:16px;font:400 clamp(15px,1.1vw,18px)/1.6 var(--font-ui);color:#F1E9DC}
.ff-btn{position:absolute;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,236,200,.5);border-radius:50%;background:rgba(25,21,18,.5);
     color:#FFF8EA;font:300 28px/1 var(--font-ui);cursor:pointer;transition:background .25s ease,border-color .25s ease}
.ff-btn:hover{background:rgba(185,139,60,.35);border-color:#E7BE72}
.ff-btn:focus-visible{outline:2px solid #E7BE72;outline-offset:3px}
.ff-close{top:clamp(14px,2.4vw,32px);right:clamp(14px,2.4vw,32px)}
.ff-prev,.ff-next{top:50%;translate:0 -50%}
.ff-prev{left:clamp(10px,1.6vw,32px)}
.ff-next{right:clamp(10px,1.6vw,32px)}
@media (max-width:800px){
  .ff{place-items:start center;overflow-y:auto;padding:76px 16px 40px}
  .ff-panel{grid-template-columns:1fr}
  .ff-close{position:fixed;top:14px;right:14px}
  .ff-prev,.ff-next{position:fixed;top:auto;bottom:14px;translate:none}
  .ff-prev{left:16px} .ff-next{right:16px}
}
.text-link{display:inline-flex;align-items:center;min-height:48px;margin-top:var(--space-4);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-underline-offset:4px}

/* ---------- websites by size ---------- */
.websites{background:var(--light)}
.size{position:relative;padding-block:var(--pad-l)}
.size > *:not(.studio-clouds){position:relative;z-index:1}
.size > .studio-clouds{left:calc(50% - 50vw);right:calc(50% - 50vw)}   /* .size is a container: her clouds run the full width */
.websites > .size:first-child::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;height:min(150svh,100%);z-index:0;pointer-events:none;
     background:linear-gradient(90deg,rgba(255,245,222,.72),rgba(255,245,222,0) 26%,rgba(255,245,222,0) 74%,rgba(255,245,222,.72));-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}   /* her QA 5 Nov: the gold lighter, a gradient on the sides */
.websites > .size:first-child .size-head :is(.muted,.kick){color:var(--espresso)}   /* the ground is still sand here (edition.js) */
.size-head{display:grid;gap:var(--space-2);max-width:720px;margin-bottom:var(--space-6)}
.size-head h2{font-family:var(--font-serif);font-weight:var(--weight-body);font-size:var(--text-heading);line-height:var(--leading-tight)}
/* her QA (5 Nov, "this is what we're selling"): the light boxes run the full width and read as glass, every picture the same 16:10 */
.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(18px,2.2vw,36px);margin-inline:calc(50% - 50vw + var(--margin))}
.site{--gl:clamp(10px,1vw,16px);margin:0;padding:var(--gl) var(--gl) clamp(16px,1.5vw,24px);border-radius:24px;background:linear-gradient(150deg,rgba(255,253,248,.82),rgba(255,246,232,.44));
     box-shadow:0 0 0 1px rgba(122,88,44,.16),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 40px rgba(255,255,255,.22),0 26px 60px rgba(82,54,24,.14);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.site :is(video,img){display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;background:var(--espresso)}
.site h3{margin-top:clamp(12px,1.2vw,18px);padding-inline:8px;font-family:var(--font-serif);font-weight:var(--weight-body);font-size:clamp(24px,2.3vw,40px);line-height:1.1}
.site p{padding-inline:8px}
.site a{display:block;text-decoration:none}
.site a:focus-visible{outline:2px solid var(--espresso);outline-offset:4px}
.review{margin-top:var(--space-6);max-width:720px;padding-left:var(--space-3);border-left:1px solid var(--gold)}
.review p{font-family:var(--font-serif);font-style:italic;font-size:var(--text-lede);line-height:var(--leading-body)}
.review cite{display:block;margin-top:var(--space-2);font-style:normal;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.interlude{position:relative;height:100svh;overflow:hidden;background:var(--night);color:var(--cream)}
.interlude video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.interlude .words{opacity:var(--leave,1);translate:0 0;transition:none}
.interlude .t-label{color:var(--gold-light);margin-bottom:var(--space-1)}

/* ---------- work with us ---------- */
.work{position:relative;overflow:hidden;background:var(--light)}
.work > .container{position:relative;z-index:1}
.ways{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-1)}
.ways a{display:inline-flex;align-items:center;min-height:48px}
.form{display:grid;gap:var(--space-3)}
.form label{display:grid;gap:var(--space-1);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.form input,.form textarea{width:100%;min-height:48px;padding:var(--space-1) 0;border:0;border-bottom:1px solid var(--espresso);background:transparent;color:var(--espresso);font:inherit;font-size:var(--text-body);letter-spacing:var(--tracking);text-transform:none}
.form fieldset{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;border:0}
.form legend{width:100%;margin-bottom:var(--space-1);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.form .chip{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--space-3);border:1px solid var(--espresso);border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:var(--tracking);font-size:var(--text-body)}
.form .chip input{position:absolute;opacity:0;width:1px;height:1px}
.form .chip:has(input:checked){background:var(--espresso);color:var(--paper)}
.form .chip:has(input:focus-visible){outline:2px solid var(--espresso);outline-offset:2px}
.btn{justify-self:start;min-height:48px;padding:0 var(--space-5);border:0;border-radius:999px;background:var(--espresso);color:var(--paper);font:inherit;cursor:pointer}

/* Work with us in the crawl: live's contact (her ask, 5 Nov), a real brown, softly melted into the cream on both sides */
.work-host{position:relative;z-index:1;min-height:82svh}
.work-host::before{content:"";display:block;height:clamp(90px,15vh,190px);background:linear-gradient(180deg,rgba(110,74,46,0),#6E4A2E)}
.work-host::after{content:"";display:block;height:clamp(110px,18vh,220px);margin-top:-1px;background:linear-gradient(180deg,#7E5A3C,#A9845F 36%,#D9BE9C 70%,rgba(248,237,223,0))}
/* its film and letters keep their own size (the page's img reset cut them), the send word as live */
.sm-page .ct-studio :is(img,video){max-width:none}
.ct-send .sm-word{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;font:700 14px/1 var(--font-ui);letter-spacing:0;text-transform:none;color:#FFF3DC;
     background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 44%),linear-gradient(160deg,rgba(255,217,140,.22),rgba(20,10,30,.48));-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
     box-shadow:inset 0 0 0 1px rgba(255,217,140,.8),inset 0 1px 0 rgba(255,250,235,.62),inset 0 -10px 18px rgba(255,217,140,.14),0 8px 22px rgba(6,4,16,.34);text-shadow:0 1px 2px rgba(20,10,4,.55)}
.ct-send .sm-word .sw-a{font-size:1.25em;color:#FFD98C}
.sm-page :is(.ct-note,.ct-lede,.ct-alt,.ct-f,.ct-choice,.ct-k),.sm-page :is(.ct-f,.ct-choice) :is(label,legend,span,input,textarea){color:#FFF6E6}
.sm-page ::placeholder{color:rgba(255,246,230,.86);opacity:1}
.to-prices{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:clamp(6px,1vh,12px);color:#FFE7B8;font:600 13px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;text-underline-offset:5px}
.to-prices span{font-size:1.3em;letter-spacing:0}
/* the studio in the crawl (her QA 5 Nov) */

/* ---------- studio ---------- */
/* her ask (3 Nov), as the live About the Studio (lab/studio): a warm cream paper (#F8EDDF) with her clouds passing slowly
   (built from the live page's own sky, edition.js) */
.studio{position:relative;overflow:hidden;background:var(--cream-paper)}
.studio > .container{position:relative;z-index:1}
.studio-clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.studio-clouds canvas{position:absolute;left:0;top:0;will-change:transform}
.studio-clouds.is-still canvas{will-change:auto}   /* the same clouds, held still: nothing loops where the page rests (the heat rule) */

/* ---------- footer with the four standards ---------- */

/* before and after, while she decides (5 Nov). Delete with the flip */
:root.ground-white .studio-clouds.is-still{display:none}
:root.ground-white :is(.films-rows,.studio) .muted{color:#665950}
.ground-flip{position:fixed;left:var(--space-2);bottom:var(--space-3);z-index:70;display:flex;gap:var(--space-1)}
.ground-flip button{min-height:44px;padding:0 var(--space-2);border:1px solid rgba(255,236,200,.5);border-radius:999px;background:var(--veil-deep);color:var(--cream);font:inherit;font-size:14px;cursor:pointer}

/* ---------- tablet + phone ---------- */
@media (max-width:1023px){
}
@media (max-width:639px){
  .card{width:280px}
  .sites{grid-template-columns:1fr}
  .words,.words--right{left:var(--margin);right:var(--margin);text-align:left;bottom:var(--space-8)}
  .standards li,.standards li:first-child{padding:var(--space-2);border:1px solid var(--cream);border-radius:2px}
}

/* ---------- reduce motion: the films stay, the drift stops (her rule) ---------- */
@media (prefers-reduced-motion:reduce){
  .drift{overflow-x:auto}
  .drift-track{animation:none}
}

/* ---------- White gold, last so it wins over each title's own colour ---------- */
/* White gold, the one title style (her rule, 3 Nov; tokens.css): the gradient laid over the whole block, clipped to its letters,
   the two soft shadows as a filter (a text-shadow would paint over clipped letters). A block whose words move on their own
   carries .wg-part on each piece and edition.js whiteGold() gives every piece its own part of the one gradient */
.wg{background:var(--white-gold) no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:var(--white-gold-glow)}
.wg *{color:transparent;text-shadow:none}
/* her QA (5 Nov, "a little bit chunkier, especially for the titles"): Stardom has one weight and nothing fakes bold, so its titles carry a hair of the gold's own pale as an edge. Dial: --wg-edge */
.t-heading.wg,span.wg.t-heading{-webkit-text-stroke:var(--wg-edge,.016em) #F2E5C9;paint-order:stroke fill}
.wg.wg-split{background:none}
.wg-split .wg-part{background:var(--white-gold) no-repeat;-webkit-background-clip:text;background-clip:text}
/* her QA (4 Nov, "the Y and the W are cut off"): the gold is painted only inside the box, and a letter can leave the box (descenders,
   hanging first letters), so the box grows by this much on each side and the margin gives it back: the words stay where they are */
.wg:not(.ev-idea){padding:.12em .18em .24em;margin:-.12em -.18em -.24em}
/* a title wrapped for White gold inside a block that keeps its own shade (::before) or tilt: the span carries the gold */
span.wg{display:inline-block}
/* the beat's hanging first line (--beatIndent) moves onto the span, so it stays inside the box the gold paints */
.beat:has(> .wg){text-indent:0;padding-left:0}
.beat > .wg{text-indent:calc(var(--beatIndent,0) * 1vw);padding-left:calc(max(0px,calc(var(--beatIndent,0) * -1vw)) + .18em)}
/* "worlds" in White gold (her rule, 3 Nov): live's picture stays exactly where align-words.js puts it, and this layer has that picture's
   exact box, the gradient masked by the O-less word, so the letters keep their shape and place and the particle O stays on top */
.opening .gem .gem-wg{position:absolute;left:0;top:0;width:100%;height:100%;margin-left:-1.35%;filter:var(--white-gold-glow);pointer-events:none}
.opening .gem .gem-wg::before{content:"";position:absolute;inset:0;background:var(--white-gold) no-repeat;
     -webkit-mask:url(../spectralmoon-journey-preview/assets/worlds-no-o.png?v=1) center/contain no-repeat;mask:url(../spectralmoon-journey-preview/assets/worlds-no-o.png?v=1) center/contain no-repeat}

/* the loader's count and its word wear it too (her ask, 4 Nov): live's shapes, size, place and timing, only the letter colour. The box
   grows as .wg's does so the gradient reaches every letter, and the margin gives it back: nothing moves (the word keeps live's .42em) */
.sm-loader .sl-count,.sm-loader .sl-word{background:var(--white-gold) no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--white-gold-glow)}
.sm-loader .sl-count{padding:.12em .18em .24em;margin:-.12em -.18em -.24em}
.sm-loader .sl-word{padding:.12em .18em .24em .6em;margin:-.12em -.18em -.24em}
/* her yes (4 Nov, "Yes, both"): the nav bar name in White gold on the dark and film grounds, in every state of live's clock, so the
   crystal overlays rest. The moon and the ring keep live's clock, and on paper the name keeps live's deep golds */
body:not(.on-paper) #brand>span{background-image:var(--white-gold)}
body:not(.on-paper) #brand>span::after,body:not(.on-paper) #brand small::after{opacity:0}
/* on paper the glass has nothing dark behind it and its cream letters went pale, so its base deepens there: same pill, same gold edge */
body.on-paper #navBook{background:linear-gradient(160deg,rgba(150,112,52,.94),rgba(58,38,22,.94))}

/* her gold button (localhost only, edition.js): three trims on the gold hall, shown while the hall is on screen */
.gold-dial{position:fixed;left:24px;bottom:52px;z-index:70;display:none;font:500 13px/1.2 var(--font-ui);color:#FFF8EA}
.gold-dial.on{display:block}
.gold-dial button{min-height:44px;padding:0 18px;border:1px solid rgba(255,217,140,.6);border-radius:999px;background:rgba(20,12,6,.72);color:#FFF3DC;font:inherit;cursor:pointer}
.gold-dial button:focus-visible,.gold-dial input:focus-visible{outline:2px solid #FFF3DC;outline-offset:2px}
.gold-dial .pn{width:264px;margin-bottom:10px;padding:16px;border-radius:14px;background:rgba(20,12,6,.86)}
.gold-dial label{display:grid;grid-template-columns:1fr auto;gap:6px 8px;margin-bottom:14px}
.gold-dial output{color:#E7BE72;font-variant-numeric:tabular-nums}
.gold-dial input{grid-column:1 / 3;width:100%;margin:0;accent-color:#D7B26E}
.gold-dial .ro{display:flex;gap:8px}
.gold-dial .ro button{flex:1;padding:0 10px}


/* ---------- the studio, her QA 5 Nov: "my picture is there and break up all the text" ---------- */
.studio-sky{position:relative;height:clamp(560px,88svh,960px);color:#FFF3DC;overflow:hidden}
.ss-pic{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 62%,transparent 98%)}   /* out of the paper and back into it, never a line */
.ss-poster,#studioFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;border:0}
.ss-her{position:absolute;left:53%;bottom:-2%;height:92%;width:auto;max-width:none;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 0 40px rgba(18,12,8,.18))}   /* clouds.html's own place for her, so the frame lands on her exactly */
#studioFrame{opacity:0;transition:opacity .8s ease}
#studioFrame.on{opacity:1}
.ss-words{position:absolute;left:var(--margin);top:34%;width:min(520px,36vw);display:grid;gap:var(--space-2);text-shadow:0 1px 2px rgba(14,9,6,.8),0 0 26px rgba(14,9,6,.55)}
.ss-words::before{content:"";position:absolute;inset:-90px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(14,9,6,.5),rgba(14,9,6,0))}
.ss-words .t-label{color:#FFE7B8}
.ss-words .t-heading{text-shadow:none}
.studio-body{position:relative;z-index:1;padding-block:var(--space-5) var(--space-9)}
.who{align-items:start}
.who .t-heading{font-family:var(--font-serif);font-weight:var(--weight-body)}
.who-text{grid-column:7 / span 6;display:grid;gap:var(--space-3)}
.who-text .t-lede{font-family:var(--font-serif);line-height:var(--leading-tight)}
.more summary{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{margin-bottom:var(--space-2)}
.more p + p{margin-top:var(--space-2)}
.studio-motto{max-width:20ch;margin:var(--space-10) auto;font-family:var(--font-serif);font-size:clamp(34px,4.4vw,72px);line-height:1.06;text-align:center;text-wrap:balance}
.qa{display:grid}
.qa details{border-top:1px solid rgba(74,52,30,.24)}
.qa details:last-child{border-bottom:1px solid rgba(74,52,30,.24)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:72px;font-family:var(--font-serif);font-size:var(--text-lede);line-height:1.2;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;font-family:var(--font-ui);font-size:24px;line-height:1;transition:rotate .3s ease}
.qa details[open] summary::after{rotate:45deg}
.qa details p{max-width:62ch;padding-bottom:var(--space-3)}
.qa summary:focus-visible,.more summary:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){ .qa summary::after{transition:none} }
@media (max-width:800px){
  .studio-sky{height:auto;overflow:visible;color:var(--espresso)}
  .ss-pic{position:relative;inset:auto;height:66svh;overflow:hidden}
  .ss-words{position:relative;left:auto;top:auto;width:auto;padding:var(--space-3) var(--margin) 0;text-shadow:none}
  .ss-words::before{display:none}
  .ss-words .t-label{color:var(--rose-ink)}
  .ss-words .wg{background:none;color:var(--espresso);-webkit-text-fill-color:currentColor;filter:none}   /* on the paper here: white gold would vanish */
  .ss-words .t-body{color:var(--espresso)}
  .who-text{grid-column:1 / -1}
  .who .span-5,.faq .kick{grid-column:1 / -1}
  .studio-motto{margin-block:var(--space-8)}
}

/* ---------- the footer: live's one standard (lab/site-foot.css), on her sand ---------- */
#smFoot{--wbg:var(--foot);--wink:var(--espresso);--wmute:#4A3A2A;--wgold:#5E3546}
#smFoot.foot{background:linear-gradient(to bottom,var(--light),var(--foot) 110px)}
:root:is(.ground-white,.foot-dark) #smFoot{--wbg:var(--night);--wink:#EFE6D6;--wmute:#A9A7A2;--wgold:#FFE7B8}
:root:is(.ground-white,.foot-dark) #smFoot.foot{background:var(--night)}
@media (max-width:700px){ #smFoot .wf-mark::before{background-image:url(../spectralmoon-journey-preview/assets/sigil-gold.svg)} }

/* ---------- Skip animation, live's button (her ask 5 Nov), over the Websites journey ---------- */
  .sm-word{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 2px;border:0;border-radius:0;background:none;cursor:pointer;
    text-decoration:none;white-space:nowrap;color:var(--sw-ink,#FFF3DC);font:500 13px/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;
    text-shadow:var(--sw-halo,0 1px 3px rgba(4,10,20,.95),0 0 16px rgba(4,10,20,.8));
    transform:translate(var(--mx,0px),var(--my,0px));transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .sm-word::before{content:"";position:absolute;left:2px;right:2px;bottom:calc(50% - 1.05em);height:1px;background:currentColor;opacity:.55;
    transform-origin:left center;transition:opacity .3s;pointer-events:none;box-shadow:var(--sw-lineglow,0 1px 3px rgba(4,10,20,.6))}
  .sm-word::after{content:"";position:absolute;left:2px;bottom:calc(50% - 1.05em - 1px);width:30%;height:3px;border-radius:2px;pointer-events:none;opacity:0;
    background:radial-gradient(closest-side,#FFF8E6,rgba(255,231,184,.85) 45%,rgba(255,231,184,0));transform:translateX(-110%)}
  .sm-word .sw-t,.sm-word .sw-a{position:relative;display:inline-block}
  .sm-word .sw-t{transition:scale .25s cubic-bezier(.22,1,.36,1)}
  .sm-word .sw-a{letter-spacing:0;font-size:1.25em;transition:translate .35s cubic-bezier(.22,1,.36,1)}
  .sm-word.breath::before{animation:swDraw 1s cubic-bezier(.65,0,.35,1) .25s both} .sm-word.breath::after{animation:swGlint 1.1s cubic-bezier(.4,0,.2,1) 1.15s}
  @media (hover:hover){ .sm-word:hover::before{opacity:1;animation:swRedraw .6s cubic-bezier(.65,0,.35,1)} .sm-word:hover::after{animation:swGlint .9s cubic-bezier(.4,0,.2,1) .3s}
    .sm-word:hover .sw-a{translate:var(--sw-dx,4px) var(--sw-dy,0px)} }
  .sm-word:focus-visible{outline:2px solid #FFE7B8;outline-offset:6px}
  .sm-word:focus-visible::before{opacity:1} .sm-word:focus-visible::after{animation:swGlint .9s cubic-bezier(.4,0,.2,1) .1s}
  .sm-word:active .sw-t{scale:.97}
  .sm-word.go::before{transform-origin:var(--rx,50%) center;animation:swPinch .5s cubic-bezier(.22,1,.36,1)}
  @keyframes swDraw{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
  @keyframes swRedraw{0%{transform-origin:right center;transform:scaleX(1)}45%{transform-origin:right center;transform:scaleX(0)}46%{transform-origin:left center;transform:scaleX(0)}100%{transform-origin:left center;transform:scaleX(1)}}
  @keyframes swPinch{0%{transform:scaleX(1)}35%{transform:scaleX(.06)}100%{transform:scaleX(1)}}
  @keyframes swGlint{0%{opacity:0;transform:translateX(-110%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(340%)}}
  @media (prefers-reduced-motion:reduce){ .sm-word,.sm-word .sw-a,.sm-word .sw-t{transition:none} .sm-word{transform:none}
    .sm-word::before,.sm-word::after,.sm-word:hover::before,.sm-word:hover::after,.sm-word.go::before,.sm-word.breath::before,.sm-word.breath::after,.sm-word:focus-visible::after{animation:none} }
  .sm-skip{position:fixed;right:clamp(20px,3.4vw,48px);bottom:calc(clamp(18px,3.4vh,36px) + env(safe-area-inset-bottom,0px));z-index:36;
    opacity:0;visibility:hidden;translate:0 12px;transition:opacity .8s ease,translate 1s cubic-bezier(.22,1,.36,1),visibility 0s linear .8s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .4s}
  .sm-skip.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .8s ease,translate 1s cubic-bezier(.22,1,.36,1),visibility 0s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .4s}
  .sm-skip.sm-word{min-height:34px;padding:0 2px;gap:8px;font-size:10.5px;letter-spacing:.18em}   /* 24 Sep, her QA: "looks huge, diminish it" */
  .sm-skip.sm-word .sw-a{font-size:1.15em}
  @media (pointer:coarse){ .sm-skip.sm-word{min-height:44px} }   /* a finger still gets 44 px */
  /* 2 Oct, her QA: "Skip animation is too big ... put it into a ball, a button, something that doesn't look as present". Her pick:
     a small round glass button with », the words only when the pointer is on it (or focus). The aria-label still says it all. */
  /* 2 Oct, her: "that little button in the corner should be bigger ... as soon as you hover over it, it should tell you what it does": a 50 px
     glass ball that opens into a pill on hover or focus, "Skip animation »" written inside it */
  .sm-skip.sm-word{width:auto;min-width:50px;height:50px;min-height:0;padding:0 16px;gap:0;justify-content:center;border-radius:999px;color:#FFF3DC;transition:padding .45s cubic-bezier(.22,1,.36,1),opacity .8s ease,translate 1s cubic-bezier(.22,1,.36,1),visibility 0s;
    background:rgba(14,9,26,.4);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,236,200,.42),0 6px 18px rgba(6,4,16,.3)}
  .sm-skip.sm-word::before,.sm-skip.sm-word::after{display:none}
  .sm-skip.sm-word .sw-a{font-size:21px;line-height:1;margin-top:-2px}
  .sm-skip.sm-word .sw-t{position:static;display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;padding:0;margin:0;background:none;box-shadow:none;opacity:0;translate:none;
    font:600 12px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;pointer-events:none;transition:max-width .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin .45s cubic-bezier(.22,1,.36,1)}
  @media (hover:hover){ .sm-skip.sm-word:hover{padding:0 18px 0 22px} .sm-skip.sm-word:hover .sw-t{max-width:190px;opacity:1;margin-right:12px} .sm-skip.sm-word:hover .sw-a{translate:2px 0} }
  .sm-skip.sm-word:focus-visible{padding:0 18px 0 22px} .sm-skip.sm-word:focus-visible .sw-t{max-width:190px;opacity:1;margin-right:12px}
  @media (pointer:coarse){ .sm-skip.sm-word{height:50px;min-height:50px} }
  @media (prefers-reduced-motion:reduce){ .sm-skip,.sm-skip.on{transition:opacity .3s ease,visibility 0s;translate:none} }

/* ---------- words that leave go on the wind, live's dust (her ask 5 Nov) ---------- */
.dust-cv{position:fixed;inset:0;width:100%;height:100%;z-index:19;display:none;pointer-events:none}
.words.held,.interlude .words.held,.has-blue #sky .words.held{opacity:1;translate:0 0;transition:none}

/* phones: the five links fit beside the sigil, the name gives way (her friends open it on phones, 6 Nov) */
@media (max-width:640px){
  .site-header #brand>span{display:none}
  .site-header nav{gap:0 10px}
  .site-header nav a{font-size:13px;letter-spacing:0;padding-inline:2px}
  .site-header nav #navBook{padding-inline:10px;font-size:12.5px;white-space:nowrap}
  .site-header nav #navBook .mi-ar{display:none}
}