/* ============================================================
   VELVET STATIC — style
   palette: ink #0d060b · wine #4a1026 · ember #d98a3a
            rose #b4506b · cream #f2dfc7
   ============================================================ */

:root{
  --ink:      #0d060b;
  --wine:     #4a1026;
  --ember:    #d98a3a;
  --rose:     #b4506b;
  --cream:    #f2dfc7;
  --cream-40: rgba(242,223,199,.4);
  --cream-60: rgba(242,223,199,.6);
  --cream-75: rgba(242,223,199,.75);
  --line:     rgba(242,223,199,.14);
  --panel:    rgba(20,8,16,.55);
  --serif: "Fraunces", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

::selection{ background:rgba(217,138,58,.32); color:var(--cream); }
@supports (scrollbar-width: thin){
  html{ scrollbar-width:thin; scrollbar-color:rgba(217,138,58,.38) #0d060b; }
}
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0d060b; }
::-webkit-scrollbar-thumb{ background:rgba(242,223,199,.18); border-radius:99px; border:2px solid #0d060b; }
::-webkit-scrollbar-thumb:hover{ background:rgba(217,138,58,.5); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ember); outline-offset:3px; border-radius:4px;
}

html{overflow-x:hidden}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}

#scene{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block; z-index:0;
  background:radial-gradient(120% 90% at 50% 42%, #2a0a18 0%, #14050e 52%, #0d060b 100%);
}

.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(125% 100% at 50% 45%, transparent 55%, rgba(6,2,5,.55) 100%);
}

/* ---------- entrance choreography ---------- */
.reveal{ opacity:0; transform:translateY(18px); animation:rise 1.3s cubic-bezier(.16,1,.3,1) forwards; }
.r1{ animation-delay:.15s } .r2{ animation-delay:.35s } .r3{ animation-delay:.5s }
.r4{ animation-delay:.62s } .r5{ animation-delay:.85s } .r6{ animation-delay:1.05s }
.r7{ animation-delay:1.3s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- chrome / nav ---------- */
.chrome{
  position:fixed; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 34px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
}
.chrome-top{
  top:0;
  transition:padding .5s ease, background .5s ease, backdrop-filter .5s ease,
             border-color .5s ease;
  border-bottom:1px solid transparent;
}
.chrome-top.is-scrolled{
  padding:14px 34px;
  background:rgba(11,4,9,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

.wordmark{ display:flex; align-items:center; gap:10px; color:var(--cream-60); text-decoration:none;
  transition:color .4s; }
.wordmark:hover{ color:var(--cream); }
.wm-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 12px 2px rgba(217,138,58,.55);
  animation:wmPulse 4s ease-in-out infinite;
}
@keyframes wmPulse{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.35); opacity:1 } }

.nav-links{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:4px;
  opacity:0; pointer-events:none;
  transition:opacity .8s ease .2s;
}
body.is-entered .nav-links,
.chrome-top.is-scrolled .nav-links{ opacity:1; pointer-events:auto; }
.nav-links a{
  color:var(--cream-40); text-decoration:none;
  padding:8px 12px; border-radius:999px; position:relative;
  transition:color .35s ease, background .35s ease;
}
.nav-links a:hover{ color:var(--cream); background:rgba(242,223,199,.06); }
.nav-links a.is-active{ color:var(--ember); }
.nav-links a.is-active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 8px var(--ember);
}

.guide-link{
  color:var(--cream-60); text-decoration:none;
  padding:9px 16px; border:1px solid rgba(242,223,199,.18); border-radius:999px;
  transition:color .45s ease, border-color .45s ease, background .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.guide-link .arr{ display:inline-block; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.guide-link:hover{
  color:var(--ink); background:var(--cream); border-color:var(--cream);
  transform:translateY(-2px);
}
.guide-link:hover .arr{ transform:translate(2px,-2px); }

/* ---------- the room (hero) ---------- */
.room{
  position:relative; z-index:5;
  height:100svh; min-height:600px;
}

/* ---------- overlay (the curtain) ---------- */
.overlay{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px;
  transition:opacity 1.25s ease .3s, visibility 1.7s;
}
.overlay.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.overlay.is-gone .reveal{ animation:none; }

/* the curtain itself: a velvet gradient that rises on entry */
.curtain{
  position:absolute; left:0; right:0; top:-4%; height:108%;
  background:
    linear-gradient(180deg,
      rgba(9,3,7,.92) 0%, rgba(19,5,12,.82) 42%,
      rgba(30,8,18,.55) 74%, rgba(30,8,18,.18) 92%, transparent 100%);
  transition:transform 1.9s cubic-bezier(.76,0,.19,1);
  will-change:transform;
}
.curtain::after{ /* soft hem of light at the curtain's bottom edge */
  content:""; position:absolute; left:0; right:0; bottom:6%;
  height:1px; background:linear-gradient(90deg, transparent, rgba(217,138,58,.28), transparent);
}
.overlay.is-gone .curtain{ transform:translateY(-114%); }

/* text lifts with the curtain, staggered like rigging */
.overlay .overline, .overlay .title, .overlay .lede, .overlay .enter, .overlay .hint{
  position:relative;
  transition:opacity .8s ease, transform 1.1s cubic-bezier(.6,0,.2,1);
}
.overlay.is-gone .hint   { opacity:0; transform:translateY(-30px); transition-delay:0s; }
.overlay.is-gone .enter  { opacity:0; transform:translateY(-46px) scale(.9); transition-delay:.06s; }
.overlay.is-gone .lede   { opacity:0; transform:translateY(-56px); transition-delay:.12s; }
.overlay.is-gone .title  { opacity:0; transform:translateY(-72px); transition-delay:.18s; }
.overlay.is-gone .overline{ opacity:0; transform:translateY(-80px); transition-delay:.24s; }

.overline{
  font-family:var(--mono); font-size:11px; letter-spacing:.5em; text-indent:.5em;
  color:var(--rose); margin-bottom:26px;
}

.title{
  font-weight:340; font-size:clamp(64px, 11.5vw, 158px);
  line-height:.92; letter-spacing:-.015em;
  font-variation-settings:"opsz" 144;
  text-shadow:0 0 90px rgba(180,80,107,.35);
}
.t-word{ display:inline-block; }
.t-italic{
  display:inline-block;
  font-style:italic; font-weight:300;
  padding-right:.06em; /* keep the italic terminal from clipping */
  color:transparent;
  background:linear-gradient(105deg, var(--ember) 10%, var(--rose) 55%, var(--ember) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }

.lede{
  margin-top:30px;
  font-style:italic; font-weight:300;
  font-size:clamp(15px, 1.6vw, 19px); line-height:1.65;
  color:var(--cream-60);
}

/* enter button */
.enter{
  position:relative; margin-top:52px;
  width:118px; height:118px; border-radius:50%;
  background:transparent; border:none; color:var(--cream);
  font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-indent:.34em;
  cursor:pointer;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.enter:hover{ transform:scale(1.07); }
.enter:active{ transform:scale(.97); }
.enter-label{ position:relative; z-index:2; }
.enter-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(242,223,199,.55);
  transition:border-color .5s, box-shadow .5s;
  animation:ringBreath 3.6s ease-in-out infinite;
}
.enter:hover .enter-ring{ border-color:var(--ember); box-shadow:0 0 34px rgba(217,138,58,.35), inset 0 0 22px rgba(217,138,58,.14); }
.enter-ring2{
  border-color:rgba(180,80,107,.35);
  animation:ringGrow 3.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes ringBreath{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.045) } }
@keyframes ringGrow{
  0%  { transform:scale(1);   opacity:.8 }
  70% { transform:scale(1.55); opacity:0 }
  100%{ transform:scale(1.55); opacity:0 }
}

.hint{
  margin-top:46px;
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  color:var(--cream-40);
}

/* ---------- hud ---------- */
.chrome-bottom{
  position:absolute; bottom:0; z-index:7;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity 1.2s ease .5s, transform 1.2s cubic-bezier(.16,1,.3,1) .5s;
}
.chrome-bottom.is-live{ opacity:1; transform:none; pointer-events:auto; }

.hud-left{ display:flex; align-items:center; gap:18px; }
.hud-sep{ width:1px; height:16px; background:rgba(242,223,199,.16); }

.hud-btn, .mood{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(13,6,11,.35); backdrop-filter:blur(6px);
  border:1px solid rgba(242,223,199,.16); border-radius:999px;
  color:var(--cream-60);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  padding:9px 15px; cursor:pointer;
  transition:color .4s, border-color .4s, background .4s, transform .4s cubic-bezier(.16,1,.3,1);
}
.hud-btn:hover, .mood:hover{ color:var(--cream); border-color:rgba(242,223,199,.45); transform:translateY(-2px); }

.hud-btn .ic-off{ display:none; }
.hud-btn.is-muted .ic-on{ display:none; }
.hud-btn.is-muted .ic-off{ display:inline; }

.moods{ display:flex; gap:8px; }
.mood-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--c); box-shadow:0 0 8px var(--c);
  opacity:.6; transition:opacity .4s, transform .4s;
}
.mood.is-active{ color:var(--cream); border-color:rgba(242,223,199,.5); background:rgba(242,223,199,.07); }
.mood.is-active .mood-dot{ opacity:1; transform:scale(1.25); }

.hud-right{ display:flex; align-items:center; gap:18px; }
.now{ color:var(--cream-40); }

/* intensity fader */
.intensity{
  display:flex; align-items:center; gap:12px;
  background:rgba(13,6,11,.35); backdrop-filter:blur(6px);
  border:1px solid rgba(242,223,199,.16); border-radius:999px;
  padding:9px 16px;
}
.int-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--cream-60); min-width:44px; text-align:left;
}
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:120px; height:16px; background:transparent; cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--rose), var(--ember));
  opacity:.75;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; margin-top:-5px; border-radius:50%;
  background:var(--cream); border:none;
  box-shadow:0 0 10px rgba(217,138,58,.7);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.3); }
input[type="range"]::-moz-range-track{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--rose), var(--ember));
  opacity:.75;
}
input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--cream); border:none;
  box-shadow:0 0 10px rgba(217,138,58,.7);
}

/* scroll cue */
.cue{
  position:absolute; left:50%; bottom:82px; transform:translateX(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; opacity:0; pointer-events:none;
  transition:opacity 1.2s ease 1.6s;
}
body.is-entered .cue{ opacity:1; pointer-events:auto; }
.cue-line{
  width:1px; height:34px; overflow:hidden; position:relative;
  background:rgba(242,223,199,.14);
}
.cue-line::after{
  content:""; position:absolute; left:0; top:-50%;
  width:1px; height:50%;
  background:linear-gradient(180deg, transparent, var(--ember));
  animation:cueDrop 2.4s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cueDrop{ 0%{ top:-50% } 60%,100%{ top:110% } }
.cue-text{
  font-family:var(--mono); font-size:9px; letter-spacing:.32em; text-indent:.32em;
  color:var(--cream-40); transition:color .4s;
}
.cue:hover .cue-text{ color:var(--cream); }

/* ============================================================
   THE PAGE BELOW THE ROOM
   ============================================================ */
.page{
  position:relative; z-index:8;
  background:linear-gradient(180deg,
    rgba(13,6,11,0) 0%, rgba(13,6,11,.75) 160px, rgba(13,6,11,.96) 340px, rgba(13,6,11,.96) 100%);
}

.sec{ padding:130px 34px 30px; }
.sec-inner{ max-width:1060px; margin:0 auto; }

.sec-head{
  display:flex; align-items:baseline; gap:20px;
  border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:34px;
}
.sec-num{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--ember); }
.sec h2{
  font-weight:380; font-size:clamp(30px, 4.4vw, 46px); letter-spacing:-.01em;
  font-variation-settings:"opsz" 100;
}
.sec h2 em{
  font-style:italic; font-weight:300; color:transparent;
  background:linear-gradient(105deg, var(--ember), var(--rose));
  -webkit-background-clip:text; background-clip:text;
}
.sec-lede{
  font-size:clamp(15.5px, 1.5vw, 18px); line-height:1.75; font-weight:300;
  color:var(--cream-75); max-width:68ch; margin-bottom:18px;
}
.sec-lede strong{ color:var(--cream); font-weight:500; }

/* live state line */
.state-line{
  display:flex; align-items:center; gap:12px;
  margin:26px 0 6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  color:var(--cream-40);
}
.state-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:rgba(242,223,199,.25);
  transition:background .6s, box-shadow .6s;
}
body.is-entered .state-dot{
  background:var(--ember);
  box-shadow:0 0 10px 2px rgba(217,138,58,.55);
  animation:wmPulse 3s ease-in-out infinite;
}

/* movement cards */
.movs{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-top:30px;
}
.mov{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 26px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, background .5s, box-shadow .5s;
}
.mov:hover{ transform:translateY(-4px); border-color:rgba(242,223,199,.3); }
.mov.is-live{
  border-color:rgba(217,138,58,.55);
  background:rgba(30,10,20,.6);
  box-shadow:0 24px 60px -30px rgba(217,138,58,.25), inset 0 0 40px rgba(217,138,58,.04);
}
.mov-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); letter-spacing:.2em; margin-bottom:14px;
}
.mov-num{ font-size:15px; color:var(--rose); transition:color .5s; }
.mov.is-live .mov-num{ color:var(--ember); }
.mov-dur{ font-size:10px; color:var(--cream-40); }
.mov h3{
  font-weight:400; font-size:26px; letter-spacing:-.01em; margin-bottom:10px;
  font-style:italic;
}
.mov p{ font-size:13.5px; line-height:1.7; color:var(--cream-60); font-weight:300; }
.mov-tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;
}
.mov-tags span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  color:var(--cream-40);
  border:1px solid var(--line); border-radius:999px; padding:4px 9px;
  transition:color .5s, border-color .5s;
}
.mov.is-live .mov-tags span{ color:var(--ember); border-color:rgba(217,138,58,.35); }
.mov-bar{
  position:absolute; left:22px; right:22px; bottom:14px;
  height:2px; border-radius:2px; background:rgba(242,223,199,.08); overflow:hidden;
}
.mov-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--rose), var(--ember));
  border-radius:2px;
  transition:width .9s linear;
}

/* voice cards */
.voices-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-top:30px;
}
.voice{
  background:var(--panel);
  border:1px solid var(--line); border-radius:14px;
  padding:24px;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .5s, box-shadow .5s;
}
.voice:hover{
  transform:translateY(-4px);
  border-color:rgba(217,138,58,.4);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
}
.voice-wide{ grid-column:span 2; }
.v-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--rose);
}
.voice h3{
  font-weight:400; font-size:22px; margin:10px 0 10px; letter-spacing:-.01em;
}
.voice p{ font-size:13.5px; line-height:1.7; color:var(--cream-60); font-weight:300; }
.v-spec{
  display:inline-block; margin-top:16px;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  color:var(--ember);
  background:rgba(217,138,58,.08); border:1px solid rgba(217,138,58,.2);
  border-radius:999px; padding:5px 11px;
}

/* signal path */
.signal{
  margin-top:26px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px;
}
.sig-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
}
.sig-node{
  color:var(--cream-60); border:1px solid var(--line); border-radius:8px;
  padding:8px 14px; transition:color .4s, border-color .4s;
}
.sig-node:hover{ color:var(--cream); border-color:rgba(242,223,199,.35); }
.sig-hot{
  color:var(--ember); border-color:rgba(217,138,58,.45);
  box-shadow:0 0 24px -6px rgba(217,138,58,.4);
}
.sig-arr{ color:var(--cream-40); }
.sig-cap{
  margin-top:16px; font-size:13.5px; font-weight:300;
  color:var(--cream-60); line-height:1.7; max-width:62ch;
}

/* shader steps */
.steps{ list-style:none; margin-top:26px; }
.step{
  display:flex; gap:24px; align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding:24px 6px;
  transition:background .5s, padding-left .5s cubic-bezier(.16,1,.3,1);
}
.step:hover{ background:rgba(242,223,199,.025); padding-left:16px; }
.step-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--rose);
  padding-top:6px; flex:none;
}
.step h3{ font-weight:400; font-size:21px; margin-bottom:6px; }
.step p{ font-size:14px; line-height:1.7; color:var(--cream-60); font-weight:300; max-width:66ch; }

.sub-head{
  margin-top:56px; margin-bottom:12px;
  font-weight:400; font-size:24px; letter-spacing:-.01em;
}

/* mood palettes (clickable) */
.palettes{ display:grid; gap:12px; margin-top:24px; }
.palette{
  display:flex; align-items:center; gap:22px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 22px; cursor:pointer; text-align:left;
  color:var(--cream-60);
  font-family:var(--mono); letter-spacing:.2em;
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, color .45s, background .45s;
}
.palette:hover{ transform:translateX(6px); border-color:rgba(242,223,199,.3); color:var(--cream); }
.palette.is-active{ border-color:rgba(217,138,58,.5); color:var(--cream); background:rgba(30,10,20,.55); }
.pal-name{ font-size:11px; min-width:96px; }
.pal-chips{ display:flex; gap:6px; flex:1; }
.pal-chips i{
  width:34px; height:22px; border-radius:5px; background:var(--c);
  border:1px solid rgba(242,223,199,.1);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.palette:hover .pal-chips i{ transform:translateY(-2px); }
.palette:hover .pal-chips i:nth-child(2){ transition-delay:.04s }
.palette:hover .pal-chips i:nth-child(3){ transition-delay:.08s }
.palette:hover .pal-chips i:nth-child(4){ transition-delay:.12s }
.pal-key{ font-size:10px; color:var(--cream-40); }
.palette.is-active .pal-key{ color:var(--ember); }

/* console */
.console-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px;
}
.con-col{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px;
}
.con-col-wide{ grid-column:span 2; }
.con-col h3{ font-weight:400; font-size:21px; margin-bottom:18px; }
.con-col p{ font-size:14px; line-height:1.75; color:var(--cream-60); font-weight:300; max-width:74ch; }
.con-col p strong{ color:var(--ember); font-weight:500; font-family:var(--mono); font-size:.85em; letter-spacing:.1em; }
.con-list dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--ember);
  margin-top:16px;
}
.con-list dt:first-child{ margin-top:0; }
.con-list dd{
  font-size:13.5px; line-height:1.7; color:var(--cream-60); font-weight:300;
  margin-top:5px;
}
.keys{ display:flex; flex-direction:column; gap:14px; }
.key-row{ display:flex; align-items:center; gap:10px; }
.keycap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--cream-60);
  background:rgba(13,6,11,.5);
  border:1px solid rgba(242,223,199,.22); border-bottom-width:3px; border-radius:8px;
  transition:transform .15s ease, color .3s, border-color .3s, box-shadow .3s;
}
.keycap-wide{ padding:0 22px; }
.keycap.is-hit{
  transform:translateY(2px);
  color:var(--ink); background:var(--ember); border-color:var(--ember);
  box-shadow:0 0 24px rgba(217,138,58,.5);
}
.key-does{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--cream-40);
  margin-left:6px;
}
.con-note{
  margin-top:18px; font-style:italic; font-size:13px !important; color:var(--cream-40) !important;
}

/* colophon */
.big-claim{
  font-size:clamp(32px, 5.2vw, 58px); font-weight:340; letter-spacing:-.015em;
  line-height:1.12; margin:10px 0 22px;
  font-variation-settings:"opsz" 144;
}
.big-claim em{
  font-style:italic; font-weight:300; color:transparent;
  background:linear-gradient(105deg, var(--ember), var(--rose));
  -webkit-background-clip:text; background-clip:text;
}
.credits{ margin-top:34px; border-top:1px solid var(--line); }
.cred{
  display:grid; grid-template-columns:140px 1fr; gap:20px;
  padding:16px 6px; border-bottom:1px solid var(--line);
  transition:background .4s, padding-left .4s cubic-bezier(.16,1,.3,1);
}
.cred:hover{ background:rgba(242,223,199,.025); padding-left:14px; }
.cred-k{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--ember); padding-top:4px; }
.cred-v{ font-size:14.5px; font-weight:300; color:var(--cream-60); line-height:1.6; }

.guide-cta{ margin-top:44px; }
.guide-cta a{
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.28em;
  color:var(--cream); text-decoration:none;
  border:1px solid rgba(242,223,199,.3); border-radius:999px; padding:17px 34px;
  transition:all .45s cubic-bezier(.16,1,.3,1);
}
.guide-cta a .arr{ display:inline-block; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.guide-cta a:hover{
  background:var(--cream); color:var(--ink); border-color:var(--cream);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -18px rgba(242,223,199,.35);
}
.guide-cta a:hover .arr{ transform:translate(2px,-2px); }

/* footer */
.site-footer{
  margin-top:110px; padding:0 34px 44px;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.foot-ghost{
  font-weight:340; font-size:clamp(64px, 12vw, 190px);
  line-height:1; letter-spacing:-.02em; text-align:center;
  font-variation-settings:"opsz" 144;
  color:transparent;
  background:linear-gradient(180deg, rgba(242,223,199,.14), rgba(242,223,199,.015));
  -webkit-background-clip:text; background-clip:text;
  padding:56px 0 8px;
  white-space:nowrap;
  user-select:none;
}
.foot-row{
  max-width:1060px; margin:26px auto 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
}
.foot-tag{ color:var(--cream-40); font-style:italic; }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ color:var(--cream-60); text-decoration:none; transition:color .4s; }
.foot-links a:hover{ color:var(--ember); }
.foot-line{
  max-width:1060px; margin:30px auto 0; padding-top:22px;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; color:var(--cream-40);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .movs{ grid-template-columns:repeat(2, 1fr); }
  .voices-grid{ grid-template-columns:repeat(2, 1fr); }
  .voice-wide{ grid-column:span 2; }
  .nav-links{ display:none; }
}
@media (max-width:640px){
  .chrome{ padding:20px 20px; }
  .chrome-top.is-scrolled{ padding:12px 20px; }
  .lede br{ display:none; }
  .lede{ max-width:30ch; }
  .hud-right{ display:none; }
  .hud-left{ width:100%; justify-content:center; flex-wrap:wrap; gap:10px; }
  .hud-sep{ display:none; }
  .title{ font-size:clamp(56px, 17vw, 96px); }
  .enter{ margin-top:40px; }
  .hint{ margin-top:36px; }
  .cue{ bottom:96px; }
  .sec{ padding:90px 20px 20px; }
  .movs{ grid-template-columns:1fr; }
  .voices-grid{ grid-template-columns:1fr; }
  .voice-wide{ grid-column:span 1; }
  .console-grid{ grid-template-columns:1fr; }
  .con-col-wide{ grid-column:span 1; }
  .cred{ grid-template-columns:1fr; gap:6px; padding:14px 6px; }
  .palette{ flex-wrap:wrap; gap:12px; }
  .pal-chips{ order:3; width:100%; }
  .foot-row{ flex-direction:column; text-align:center; }
  .site-footer{ padding:0 20px 40px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ animation-duration:.01s; animation-delay:0s; }
  .enter-ring, .enter-ring2, .wm-dot, .t-italic, .cue-line::after,
  body.is-entered .state-dot{ animation:none; }
  .curtain{ transition-duration:.5s; }
  .overlay .overline, .overlay .title, .overlay .lede, .overlay .enter, .overlay .hint{
    transition-duration:.4s; transition-delay:0s;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* mobile: allow the long score-state line to wrap instead of overflowing */
.state-text{overflow-wrap:anywhere;max-width:100%;display:inline-block}