/* ============================================================
   RAGEPROOF  —  "The cape moved. He didn't."
   Art direction: sunlit arena. Sand field, ink type,
   and ONE rule — red only ever appears on things that move.
   ============================================================ */

:root{
  /* the four-colour system, lifted off the artwork */
  --sand-0:#F8F0DD;
  --sand-1:#EADCBE;
  --sand-2:#DDCAA4;
  --sand-3:#CBB693;
  --stone :#BEA881;

  --ink-0:#14100C;
  --ink-1:#241C15;
  --ink-2:#57493A;
  --ink-3:#8A7962;

  --cape  :#B4160F;
  --cape-d:#6E0A08;
  --cape-l:#E0402C;

  --rule:rgba(20,16,12,.16);
  --rule-2:rgba(20,16,12,.09);

  --maxw:1180px;
  --pad:clamp(1.1rem,4vw,2.6rem);

  --ff-d:"Bodoni Moda",  "Didot", "Times New Roman", serif;
  --ff-b:"Epilogue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-m:"Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease:cubic-bezier(.22,.68,.28,1);
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--sand-1);
  color:var(--ink-1);
  font-family:var(--ff-b);
  font-size:clamp(1rem,.96rem + .22vw,1.09rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the page sits on a faint sunlit gradient — the arena wall */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 78% at 72% -8%, var(--sand-0) 0%, rgba(248,240,221,0) 58%),
    radial-gradient(140% 90% at 12% 108%, rgba(190,168,129,.42) 0%, rgba(190,168,129,0) 55%),
    var(--sand-1);
}
/* soft vignette so the field never feels flat */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, rgba(20,16,12,0) 52%, rgba(20,16,12,.10) 100%);
}

img,svg,canvas{display:block;max-width:100%}
img{height:auto}

::selection{background:var(--ink-0);color:var(--sand-0)}

*:focus-visible{
  outline:2px solid var(--ink-0);
  outline-offset:3px;
  border-radius:2px;
}

/* custom scrollbar — a thin stone channel */
html{scrollbar-color:var(--ink-2) var(--sand-2);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--sand-2)}
::-webkit-scrollbar-thumb{background:var(--ink-2);border:3px solid var(--sand-2)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-0)}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink-0);color:var(--sand-0);
  padding:.7rem 1.1rem;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;
}
.skip:focus{left:.5rem;top:.5rem}

/* ─── shared bits ─────────────────────────────────────────── */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.sec{position:relative;padding-block:clamp(4.6rem,10vw,8.4rem)}
.sec + .sec{border-top:1px solid var(--rule-2)}
[id]{scroll-margin-top:calc(var(--nav-h) + 22px)}

.eyebrow{
  font-family:var(--ff-m);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::after{
  content:"";flex:1 1 auto;height:1px;background:var(--rule);max-width:min(280px,32%);
}

.h2{
  font-family:var(--ff-d);
  font-optical-sizing:auto;
  font-weight:800;
  font-size:clamp(2.15rem,1.25rem + 3.9vw,4.1rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--ink-0);
  margin:0 0 1.35rem;
  text-wrap:balance;
}
.h2 em{font-weight:400;font-style:italic;color:var(--ink-1)}

.lede{
  max-width:60ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  color:var(--ink-2);
  margin:0 0 2.6rem;
}

/* buttons — ink slabs on sand. the only red they carry is a
   thread along the bottom edge, and that thread never stops. */
.btn{
  --btn-pad:.92rem 1.5rem;
  position:relative;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:var(--btn-pad);
  font-family:var(--ff-m);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ink-0);
  background:transparent;
  color:var(--ink-0);
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  overflow:hidden;
}
.btn img{opacity:.9;transition:filter .25s var(--ease)}
.btn--sm{--btn-pad:.62rem 1.05rem;font-size:.66rem}
.btn--lg{--btn-pad:1.12rem 2rem;font-size:.8rem}

.btn--ink{background:var(--ink-0);color:var(--sand-0)}
.btn--ink img{filter:invert(1) brightness(1.6)}
.btn--ink:hover{background:var(--ink-1);transform:translateY(-2px)}

.btn--cape{background:var(--ink-0);color:var(--sand-0)}
.btn--cape img{filter:invert(1) brightness(1.6)}
.btn--cape::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--cape-d),var(--cape-l),var(--cape),var(--cape-l),var(--cape-d));
  background-size:220% 100%;
  animation:thread 3.4s linear infinite;
}
.btn--cape:hover{background:var(--ink-1);transform:translateY(-2px)}
@keyframes thread{to{background-position:-220% 0}}

.btn--ghost{background:rgba(248,240,221,.42);color:var(--ink-0)}
.btn--ghost:hover{background:var(--ink-0);color:var(--sand-0);transform:translateY(-2px)}
.btn--ghost:hover img{filter:invert(1) brightness(1.6)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ─── PRELOADER ───────────────────────────────────────────── */

#preloader{
  position:fixed;inset:0;z-index:150;
  background:var(--sand-1);
  display:grid;place-items:center;
  overflow:hidden;
}
#preloader.gone{pointer-events:none}
.pre__stage{position:relative;z-index:2;text-align:center;padding-inline:1.2rem}
.pre__word{overflow:hidden}
.pre__word span{
  display:block;
  font-family:var(--ff-d);font-weight:900;
  font-size:clamp(2.1rem,9vw,4.6rem);
  letter-spacing:.02em;color:var(--ink-0);line-height:1.1;
  transform:translateY(105%);
  animation:preWord .9s .45s var(--ease) forwards;
}
@keyframes preWord{to{transform:translateY(0)}}
.pre__sub{
  font-family:var(--ff-m);font-size:.62rem;letter-spacing:.3em;color:var(--ink-2);
  margin:.85rem 0 0;opacity:0;animation:preSub .7s 1.05s var(--ease) forwards;
}
@keyframes preSub{to{opacity:1}}

/* a red cloth sweeps down the screen once */
.pre__cape{
  position:absolute;left:-6%;right:-6%;top:-46%;height:44%;
  background:linear-gradient(180deg,var(--cape-d),var(--cape) 42%,var(--cape-l) 70%,var(--cape-d));
  transform:rotate(-3deg);
  animation:preCape 1.5s .1s cubic-bezier(.5,0,.3,1) forwards;
  z-index:3;
}
@keyframes preCape{
  0%  {top:-52%;transform:rotate(-4deg) skewY(1.5deg)}
  55% {transform:rotate(2deg) skewY(-1.5deg)}
  100%{top:118%;transform:rotate(-1deg) skewY(1deg)}
}
.pre__panel{position:absolute;left:0;right:0;height:51%;background:var(--sand-1);z-index:4;transition:transform 1s var(--ease)}
.pre__panel--t{top:0}
.pre__panel--b{bottom:0}
#preloader.gone .pre__panel--t{transform:translateY(-101%)}
#preloader.gone .pre__panel--b{transform:translateY(101%)}
#preloader.gone .pre__stage,#preloader.gone .pre__cape{opacity:0;transition:opacity .45s}

/* ─── NAV ─────────────────────────────────────────────────── */

.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(234,220,190,.86);
  backdrop-filter:saturate(1.15) blur(9px);
  -webkit-backdrop-filter:saturate(1.15) blur(9px);
  border-bottom:1px solid var(--rule);
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.brand__mark{
  width:15px;height:15px;flex:none;
  background:var(--ink-0);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.brand__txt{
  font-family:var(--ff-d);font-weight:800;font-size:1.06rem;letter-spacing:.09em;color:var(--ink-0);
}
.nav__links{display:flex;gap:1.55rem;align-items:center}
.nav__links a{
  font-family:var(--ff-m);font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;position:relative;padding-block:.3rem;
  transition:color .22s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink-0);
  transition:right .3s var(--ease);
}
.nav__links a:hover{color:var(--ink-0)}
.nav__links a:hover::after{right:0}
.nav__act{display:flex;align-items:center;gap:.7rem}

.burger{
  display:none;width:38px;height:34px;border:1px solid var(--ink-0);
  background:transparent;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink-0);transition:transform .28s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* the agitation line — amplitude is your scroll velocity, and it
   always returns to flat. never a progress bar. */
.agitation{
  position:absolute;left:0;right:0;bottom:-6px;
  width:100%;height:12px;
  pointer-events:none;
}

/* ─── HERO ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:clamp(600px,92svh,940px);
  display:flex;align-items:center;
  isolation:isolate;
  overflow:hidden;
}
.hero__art{position:absolute;inset:0;z-index:-1}
.hero__art picture,.hero__art img{width:100%;height:100%;display:block}
.hero__art img{object-fit:cover;object-position:20% 72%}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(234,220,190,0) 0%,rgba(234,220,190,.05) 28%,rgba(234,220,190,.72) 46%,rgba(234,220,190,.94) 62%,var(--sand-1) 80%),
    linear-gradient(180deg,rgba(234,220,190,.5) 0%,rgba(234,220,190,0) 22%);
}
.hero__cape{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.hero__in{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:clamp(3rem,9vw,5rem);
  display:flex;justify-content:flex-end;
}
.hero__copy{width:min(560px,100%)}

.hero__h1{margin:0 0 1.3rem;line-height:.92}
.hero__l1,.hero__l2{display:block;font-family:var(--ff-d);font-optical-sizing:auto;color:var(--ink-0)}
.hero__l1{
  font-weight:400;font-style:italic;
  font-size:clamp(1.85rem,1rem + 3.6vw,3.35rem);
  letter-spacing:-.005em;
  color:var(--ink-2);
}
.hero__l2{
  font-weight:900;
  font-size:clamp(3.1rem,1.1rem + 8.6vw,6.6rem);
  letter-spacing:-.025em;
  margin-top:.06em;
}
.hero__lede{
  max-width:44ch;font-size:clamp(1rem,.96rem + .28vw,1.14rem);
  color:var(--ink-2);margin:0 0 1.9rem;
}

.ca{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;max-width:100%}
.ca__label{
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.26em;color:var(--ink-3);
}
.ca__pill{
  display:inline-flex;align-items:center;gap:.7rem;min-width:0;flex:0 1 auto;
  padding:.6rem .95rem;
  border:1px dashed var(--ink-2);
  background:rgba(248,240,221,.55);
  font-family:var(--ff-m);font-size:.74rem;letter-spacing:.02em;color:var(--ink-0);
  cursor:pointer;max-width:100%;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.ca__pill span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca__pill:hover{background:rgba(248,240,221,.9);border-color:var(--ink-0)}
.ca__pill.copied{border-style:solid;border-color:var(--ink-0)}
.ca__ico{display:grid;place-items:center;color:var(--ink-2);flex:none}

.hero__btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero__note{margin:0;font-size:.85rem;color:var(--ink-3)}
.hero__note em{font-style:italic}

.scrollcue{
  position:absolute;left:50%;bottom:1.35rem;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  text-decoration:none;
}
.scrollcue__ln{
  width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--ink-2));
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.55);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.scrollcue__tx{
  font-family:var(--ff-m);font-size:.56rem;letter-spacing:.28em;color:var(--ink-2);
}

/* ─── MARQUEE — a red band whose contents never stop ──────── */

.mq{
  position:relative;
  background:linear-gradient(180deg,var(--cape-d) 0%,var(--cape) 30%,var(--cape) 70%,var(--cape-d) 100%);
  overflow:hidden;
  padding-block:.95rem;
  border-block:1px solid var(--ink-0);
}
.mq__edge{
  position:absolute;left:0;right:0;height:7px;
  background-repeat:repeat-x;
  background-size:44px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='7' viewBox='0 0 44 7'%3E%3Cpath d='M0 3.5 Q11 -1.5 22 3.5 T44 3.5 V0 H0 Z' fill='%2314100C'/%3E%3C/svg%3E");
  animation:edgeRun 4.2s linear infinite;
  pointer-events:none;
}
.mq__edge--t{top:0}
.mq__edge--b{bottom:0;transform:scaleY(-1);animation-duration:5.6s;animation-direction:reverse}
@keyframes edgeRun{to{background-position-x:-44px}}

.mq__track{display:flex;width:max-content;animation:mqRun 34s linear infinite}
.mq__grp{display:flex;align-items:center;flex:none}
.mq__it{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding-inline:1.5rem;
  font-family:var(--ff-d);font-weight:700;font-style:italic;
  font-size:clamp(1.05rem,.95rem + .55vw,1.5rem);
  letter-spacing:.01em;
  color:var(--sand-0);
  white-space:nowrap;
  animation:mqRipple 2.6s ease-in-out infinite;
}
.mq__it b{
  display:inline-block;width:5px;height:5px;background:var(--sand-0);opacity:.6;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
@keyframes mqRun{to{transform:translateX(-50%)}}
@keyframes mqRipple{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}

/* ─── I · THE MECHANISM ───────────────────────────────────── */

.beats{
  list-style:none;margin:2.8rem 0 0;padding:0;
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--rule);
  background:rgba(248,240,221,.4);
}
.beat{
  position:relative;
  padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;gap:.55rem;
}
.beat + .beat{border-left:1px solid var(--rule)}
.beat__n{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.24em;color:var(--ink-3)}
.beat__t{
  font-family:var(--ff-d);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);
  color:var(--ink-0);line-height:1.05;
}
.beat__d{font-size:.94rem;color:var(--ink-2);margin:0}

/* the red line that strikes the whole choreography out */
.beat__strike{
  position:absolute;left:0;top:50%;height:3px;width:0;
  background:linear-gradient(90deg,var(--cape-d),var(--cape-l) 50%,var(--cape));
  transform:translateY(-50%) rotate(-.6deg);
  transform-origin:left center;
  transition:width 1.15s cubic-bezier(.6,0,.25,1);
  list-style:none;
  pointer-events:none;
}
.beats.struck .beat__strike{width:100%}
.beats.struck .beat__t,.beats.struck .beat__n{opacity:.58;transition:opacity .7s .5s var(--ease)}

.verdict{margin-top:2.6rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.4rem}
.verdict__from,.verdict__to{
  margin:0;font-family:var(--ff-d);font-size:clamp(1.35rem,1rem + 1.6vw,2.3rem);
  line-height:1.2;color:var(--ink-2);font-weight:400;
}
.verdict__to{color:var(--ink-0);font-weight:800}
.strikeword{position:relative;font-style:italic}
.strikeword::after{
  content:"";position:absolute;left:-2%;right:102%;top:56%;height:2px;background:var(--cape);
  transition:right .8s .35s var(--ease);
}
.verdict.in .strikeword::after{right:-2%}
.hl{font-style:italic;font-weight:700}

.factbox{
  margin-top:3rem;
  border-left:3px solid var(--ink-0);
  padding:1.35rem 0 1.35rem 1.5rem;
  max-width:74ch;
}
.factbox__k{
  margin:0 0 .55rem;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.26em;color:var(--ink-3);
}
.factbox__v{margin:0;font-size:1rem;color:var(--ink-2)}
.factbox__v strong{color:var(--ink-0);font-weight:600}
.factbox__note{display:block;margin-top:.9rem;padding-left:.9rem;border-left:1px solid var(--rule);
  font-size:.92rem;color:var(--ink-3)}
.factbox__end{display:block;margin-top:.9rem;font-family:var(--ff-d);font-style:italic;
  font-size:1.28rem;color:var(--ink-0)}

/* ─── II · THE NIGHT ──────────────────────────────────────── */

.sec--night{background:rgba(190,168,129,.16)}
.night__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.4rem);align-items:center}
.night__p{margin:0 0 1.15rem;font-size:clamp(1.02rem,.98rem + .32vw,1.18rem);color:var(--ink-2);max-width:52ch}
.night__p--last{color:var(--ink-0);font-weight:500}
.night__pull{
  margin:1.9rem 0;
  font-family:var(--ff-d);font-weight:400;font-style:italic;
  font-size:clamp(2.4rem,1.3rem + 4.6vw,4.6rem);
  line-height:1;color:var(--ink-0);letter-spacing:-.02em;
}
.night__fig{margin:0;position:relative}
.night__fig img{
  width:100%;border:1px solid var(--rule);
  filter:saturate(.94) contrast(1.02);
}
.night__fig figcaption{
  margin-top:.85rem;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.22em;color:var(--ink-3);
}

/* ─── III · THE CAPE TEST ─────────────────────────────────── */

.test{
  border:1px solid var(--ink-0);
  background:var(--sand-2);
}
.test__stage{position:relative;aspect-ratio:25/14;width:100%;overflow:hidden;background:var(--sand-3)}
#capeCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#capeCanvas:active{cursor:grabbing}

.test__hud{position:absolute;z-index:3;pointer-events:none;font-family:var(--ff-m)}
.test__hud--tl{top:clamp(.7rem,2%,1.2rem);left:clamp(.7rem,2%,1.2rem)}
.test__hud--tr{top:clamp(.7rem,2%,1.2rem);right:clamp(.7rem,2%,1.2rem);text-align:right}
.hud__k{margin:0 0 .35rem;font-size:.56rem;letter-spacing:.24em;color:var(--ink-1)}
.hud__k--sp{margin-top:1.15rem}
.hud__mid{margin:0;font-family:var(--ff-d);font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink-0)}
.hud__bar{width:clamp(96px,15vw,170px);height:5px;background:rgba(20,16,12,.24);overflow:hidden}
.hud__bar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cape-d),var(--cape-l));
  transition:width .12s linear;
}
.hud__v{margin:.35rem 0 0;font-size:.62rem;letter-spacing:.14em;color:var(--ink-0)}
.hud__big{margin:0;font-family:var(--ff-d);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.35rem);
  line-height:1;color:var(--ink-0)}
.hud__big span{font-size:.5em;font-weight:400}
.hud__sub{margin:.25rem 0 0;font-size:.55rem;letter-spacing:.22em;color:var(--ink-1)}

.test__still{
  position:absolute;bottom:clamp(.7rem,2%,1.2rem);right:clamp(.7rem,2%,1.2rem);
  z-index:3;display:flex;align-items:center;gap:.6rem;pointer-events:none;
}
.test__still svg{transform:rotate(-90deg);flex:none}
.still__trk{fill:none;stroke:rgba(20,16,12,.18);stroke-width:3}
.still__arc{
  fill:none;stroke:var(--ink-0);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;
  transition:stroke-dashoffset .1s linear;
}
.test__still.armed .still__arc{stroke:var(--cape)}
.still__k{margin:0;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.22em;color:var(--ink-2);max-width:11ch}

.test__say{
  position:absolute;left:50%;bottom:clamp(1.1rem,7%,2.6rem);transform:translateX(-50%);
  z-index:3;margin:0;pointer-events:none;
  font-family:var(--ff-d);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,.9rem + .95vw,1.75rem);
  color:var(--ink-0);text-align:center;white-space:nowrap;
  text-shadow:0 1px 0 rgba(248,240,221,.55);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.test__say.swap{opacity:0;transform:translate(-50%,8px)}

.test__done{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  background:rgba(234,220,190,.9);
  backdrop-filter:blur(3px);
  padding:1.4rem;text-align:center;
  animation:doneIn .8s var(--ease) both;
}
@keyframes doneIn{from{opacity:0}to{opacity:1}}
.done__k{margin:0;font-family:var(--ff-d);font-weight:900;font-size:clamp(2rem,5.5vw,3.6rem);
  color:var(--ink-0);line-height:1;letter-spacing:-.02em}
.done__v{margin:0;max-width:42ch;color:var(--ink-2);font-size:.98rem}
.done__rec{margin:.2rem 0 .7rem;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.2em;color:var(--ink-3)}

.test__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem clamp(.9rem,2vw,1.3rem);
  border-top:1px solid var(--ink-0);
  background:var(--sand-1);
}
.test__hint{margin:0;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.1em;color:var(--ink-2)}
.test__hint span{color:var(--ink-3)}

.test__log{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.test__log li{
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.14em;
  border:1px solid var(--rule);padding:.42rem .7rem;color:var(--ink-2);
  background:rgba(248,240,221,.5);
  animation:logIn .45s var(--ease) both;
}
.test__log li b{color:var(--cape);font-weight:500}
@keyframes logIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── IV · FOUR CAPES ─────────────────────────────────────── */

.capes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--rule);
  background:rgba(248,240,221,.4)}
.cape-card{
  position:relative;padding:clamp(1.25rem,2.1vw,1.7rem);
  padding-right:calc(clamp(1.25rem,2.1vw,1.7rem) + 26px);overflow:hidden;
  transition:background .3s var(--ease);
}
.cape-card + .cape-card{border-left:1px solid var(--rule)}
.cape-card:hover{background:rgba(248,240,221,.85)}
/* every card keeps a small piece of cloth, and it always stirs */
.cape-card__cloth{
  position:absolute;top:0;right:clamp(.8rem,1.4vw,1.1rem);width:17px;height:92px;
  background:linear-gradient(178deg,var(--cape-l),var(--cape) 34%,var(--cape-d));
  clip-path:polygon(0 0,100% 0,100% 88%,50% 74%,0 100%);
  transform-origin:50% 0;
  animation:clothIdle 7s ease-in-out infinite;
}
.cape-card:hover .cape-card__cloth{animation:clothStir 1.5s ease-in-out infinite}
@keyframes clothIdle{0%,100%{transform:rotate(-.8deg) skewX(.6deg)}50%{transform:rotate(1.4deg) skewX(-1deg)}}
@keyframes clothStir{0%,100%{transform:rotate(-5deg) skewX(3.5deg)}50%{transform:rotate(5deg) skewX(-3.5deg)}}
.cape-card__n{margin:0 0 .95rem;position:relative;z-index:1;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.24em;color:var(--ink-3)}
.cape-card__t{margin:0 0 .6rem;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.25rem,1rem + .9vw,1.7rem);color:var(--ink-0);line-height:1.08;max-width:9ch}
.cape-card__d{margin:0 0 .9rem;font-size:.88rem;color:var(--ink-2)}
.cape-card__r{margin:0;font-family:var(--ff-d);font-style:italic;font-size:.98rem;line-height:1.3;color:var(--ink-0)}

.arena__close{
  margin:2.8rem 0 0;font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.6vw,2.3rem);line-height:1.25;color:var(--ink-2);max-width:30ch;
}
.arena__close em{font-style:italic;font-weight:700;color:var(--ink-0)}

/* ─── V · THE CAPE RACK ───────────────────────────────────── */

.rack{position:relative;padding-top:26px;margin-top:2.4rem}
.rack__rail{position:absolute;left:0;right:0;top:22px;height:3px;background:var(--ink-0)}
.rack__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.6rem)}
.rk{
  position:relative;padding:2.2rem 1.2rem 1.6rem;
  text-align:center;cursor:default;
  outline-offset:4px;
}
.rk::before{ /* the ring the cape hangs from */
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border:2px solid var(--ink-0);border-radius:50%;
  background:var(--sand-1);z-index:2;
}
.rk__cloth{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(168deg,var(--cape-l) 0%,var(--cape) 34%,var(--cape-d) 100%);
  clip-path:polygon(50% 0,100% 6%,94% 88%,72% 100%,50% 92%,28% 100%,6% 88%,0 6%);
  transform-origin:50% 0;
  animation:rkIdle 9s ease-in-out infinite;
  box-shadow:inset 0 0 40px rgba(110,10,8,.5);
}
.rk:nth-child(2) .rk__cloth{animation-delay:-1.4s;animation-duration:10.5s}
.rk:nth-child(3) .rk__cloth{animation-delay:-3.1s;animation-duration:8.4s}
.rk:nth-child(4) .rk__cloth{animation-delay:-4.6s;animation-duration:11.2s}
@keyframes rkIdle{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}
.rk:hover .rk__cloth,.rk:focus-visible .rk__cloth{animation:rkSwing 1.7s ease-in-out infinite}
@keyframes rkSwing{0%,100%{transform:rotate(-2.6deg) skewX(1.6deg)}50%{transform:rotate(2.6deg) skewX(-1.6deg)}}
.rk__k,.rk__v{position:relative;z-index:1;display:block;color:var(--sand-0)}
.rk__k{font-family:var(--ff-m);font-size:.56rem;letter-spacing:.24em;opacity:.78;margin-bottom:.75rem}
.rk__v{
  font-family:var(--ff-d);font-weight:800;line-height:1;
  font-size:clamp(1.15rem,.85rem + 1.1vw,1.75rem);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.rk__v--word{font-size:clamp(1.05rem,.8rem + .85vw,1.5rem);letter-spacing:.02em}

/* telemetry */
.tele{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  border:1px solid var(--ink-0);
  background:rgba(248,240,221,.55);
}
.tele__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,2.2vw,1.5rem);
  border-bottom:1px solid var(--rule);
}
.tele__k{margin:0;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.26em;color:var(--ink-0)}
.tele__state{margin:0;display:flex;align-items:center;gap:.5rem;
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.18em;color:var(--ink-2)}
.tele__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ink-3)}
.tele[data-state="live"] .tele__dot{background:var(--cape);animation:pulse 1.9s ease-in-out infinite}
.tele[data-state="warming"] .tele__dot{background:var(--ink-2);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.tele__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tele__cell{padding:clamp(1rem,2.2vw,1.5rem);}
.tele__cell + .tele__cell{border-left:1px solid var(--rule)}
.tele__ck{margin:0 0 .5rem;font-family:var(--ff-m);font-size:.55rem;letter-spacing:.22em;color:var(--ink-3)}
.tele__cv{margin:0;font-family:var(--ff-d);font-weight:800;
  font-size:clamp(1.1rem,.85rem + .95vw,1.6rem);color:var(--ink-0);line-height:1;
  font-variant-numeric:tabular-nums}
.tele__cv.up{color:var(--cape)}
.tele__cv.dn{color:var(--ink-2)}
.tele__foot{margin:0;padding:.8rem clamp(1rem,2.2vw,1.5rem);border-top:1px solid var(--rule);
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.1em;color:var(--ink-3)}

/* ─── VI · THE PROCEDURE ──────────────────────────────────── */

.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.9rem);margin-top:2.4rem}
.act{
  position:relative;border:1px solid var(--rule);background:rgba(248,240,221,.5);
  padding:clamp(1.5rem,2.8vw,2.1rem);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.act:hover{border-color:var(--ink-0);transform:translateY(-4px);background:rgba(248,240,221,.9)}
.act__n{margin:0 0 1.4rem;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.26em;color:var(--ink-3)}
.act__t{margin:0 0 .7rem;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);color:var(--ink-0);line-height:1.05}
.act__d{margin:0;font-size:.94rem;color:var(--ink-2)}
.act__d a{color:var(--ink-0);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.act__d a:hover{text-decoration-color:var(--cape);text-decoration-thickness:2px}
.act__ico{position:absolute;top:clamp(1.3rem,2.6vw,1.9rem);right:clamp(1.3rem,2.6vw,1.9rem);opacity:.5}
.acts__none{
  margin:2.4rem 0 0;font-family:var(--ff-d);font-size:clamp(1.2rem,1rem + 1.1vw,1.85rem);
  color:var(--ink-2);
}
.acts__none em{font-style:italic;color:var(--ink-0)}

/* ─── VII · THE PROGRAMME ─────────────────────────────────── */

.bill{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--ink-0)}
.ep{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1.3rem,2.6vw,1.9rem) 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .35s var(--ease);
}
.ep:hover{padding-left:.7rem}
.ep__n{
  font-family:var(--ff-d);font-weight:900;font-size:clamp(1.7rem,1.1rem + 2.2vw,3rem);
  color:var(--ink-0);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ep[data-state="sealed"] .ep__n,.ep[data-state="soon"] .ep__n{color:var(--ink-3)}
.ep__body{min-width:0}
.ep__t{margin:0 0 .25rem;font-family:var(--ff-d);font-weight:700;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--ink-0);line-height:1.1}
.ep__d{margin:0;font-size:.92rem;color:var(--ink-2)}
.ep__s{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.2em;color:var(--ink-2);
  border:1px solid var(--rule);padding:.42rem .7rem;
}
.ep__s i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.ep[data-state="live"] .ep__s{border-color:var(--ink-0);color:var(--ink-0)}
.ep[data-state="live"] .ep__s i{background:var(--cape);animation:pulse 1.9s ease-in-out infinite}
.ep[data-state="sealed"] .ep__s{color:var(--ink-3)}
.ep[data-state="sealed"] .ep__t,.ep[data-state="sealed"] .ep__d{opacity:.66}

/* ─── CTA ─────────────────────────────────────────────────── */

.sec--cta{background:var(--ink-0);color:var(--sand-1);text-align:center;border-top:none}
.cta__in{display:flex;flex-direction:column;align-items:center}
.cta__h{
  margin:0 0 1rem;font-family:var(--ff-d);font-weight:900;
  font-size:clamp(2.4rem,1.3rem + 5.2vw,5.2rem);line-height:.98;letter-spacing:-.025em;
  color:var(--sand-0);
}
.cta__h em{font-style:italic;font-weight:400;color:var(--sand-2)}
.cta__d{margin:0 0 2.4rem;color:var(--sand-3);font-size:clamp(1rem,.96rem + .3vw,1.16rem);max-width:38ch;text-wrap:balance}
.cta__btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.sec--cta .btn--cape{background:var(--sand-0);color:var(--ink-0);border-color:var(--sand-0)}
.sec--cta .btn--cape img{filter:none}
.sec--cta .btn--cape:hover{background:var(--sand-1)}
.sec--cta .btn--ghost{background:transparent;color:var(--sand-1);border-color:rgba(234,220,190,.42)}
.sec--cta .btn--ghost img{filter:invert(1) brightness(1.6)}
.sec--cta .btn--ghost:hover{background:var(--sand-0);color:var(--ink-0);border-color:var(--sand-0)}
.sec--cta .btn--ghost:hover img{filter:none}
.sec--cta *:focus-visible{outline-color:var(--sand-0)}

/* ─── FOOTER ──────────────────────────────────────────────── */

.foot{background:var(--ink-0);color:var(--sand-3);padding-block:clamp(2.6rem,6vw,4rem) 2rem}
.foot__in{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-bottom:2rem;border-bottom:1px solid rgba(234,220,190,.14)}
.foot__mark{margin:0;font-family:var(--ff-d);font-weight:800;font-size:1.35rem;letter-spacing:.08em;color:var(--sand-0)}
.foot__tag{margin:.3rem 0 0;font-family:var(--ff-d);font-style:italic;font-size:.98rem;color:var(--sand-3)}
.foot__links{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem}
.foot__links a{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand-3);text-decoration:none;transition:color .22s var(--ease)}
.foot__links a:hover{color:var(--sand-0)}
.foot__soc{display:flex;gap:.55rem}
.foot__soc a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(234,220,190,.24);
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.foot__soc a img{filter:invert(1) brightness(1.7);opacity:.75;transition:opacity .22s}
.foot__soc a:hover{background:var(--sand-0);border-color:var(--sand-0)}
.foot__soc a:hover img{filter:none;opacity:1}
.foot__ca{margin:1.6rem auto 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem}
.foot__ca-k{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.26em;color:rgba(190,168,129,.6);flex:none}
.foot__ca-v{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.01em;color:var(--sand-0);
  word-break:break-all;min-width:0}
.foot__ca-n{flex:1 1 100%;font-size:.74rem;color:rgba(190,168,129,.62)}
.foot__dis{margin:1.4rem auto 0;font-size:.78rem;line-height:1.65;color:rgba(190,168,129,.72);max-width:80ch}
.foot__cr{margin:1.1rem auto 0;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.16em;color:rgba(190,168,129,.5)}
.foot__cr span{font-style:italic;font-family:var(--ff-d);letter-spacing:0;font-size:.8rem}
.foot *:focus-visible{outline-color:var(--sand-0)}

/* ─── EGGS + TOAST ────────────────────────────────────────── */

/* CAPS LOCK — your own shouting, unfurled as a cape, then dropped */
.egg-shout{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  display:grid;place-items:center;
  opacity:0;
}
.egg-shout.on{animation:shoutSeq 3.3s var(--ease) forwards}
.egg-shout span{
  display:block;max-width:92vw;
  background:linear-gradient(168deg,var(--cape-l),var(--cape) 40%,var(--cape-d));
  color:var(--sand-0);
  font-family:var(--ff-d);font-weight:900;font-style:italic;
  font-size:clamp(1.5rem,7vw,4.2rem);line-height:1;letter-spacing:-.01em;
  padding:1.1rem 1.8rem;text-align:center;
  clip-path:polygon(0 0,100% 0,100% 88%,76% 100%,50% 90%,24% 100%,0 88%);
  transform:rotate(-2deg);
  box-shadow:0 24px 60px rgba(20,16,12,.35);
}
@keyframes shoutSeq{
  0%  {opacity:0;transform:translateY(-46vh) rotate(-6deg)}
  16% {opacity:1;transform:translateY(0) rotate(0deg)}
  62% {opacity:1;transform:translateY(0) rotate(0deg)}
  100%{opacity:0;transform:translateY(52vh) rotate(4deg)}
}

/* SCROLL THRASH — the page declines to be chased */
.egg-calm{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,120%);
  z-index:120;max-width:min(420px,92vw);
  background:var(--ink-0);color:var(--sand-1);
  padding:1rem 1.25rem;
  transition:transform .55s var(--ease);
  border-left:3px solid var(--cape);
}
.egg-calm.on{transform:translate(-50%,0)}
.egg-calm__k{margin:0 0 .35rem;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.24em;color:var(--sand-0)}
.egg-calm__v{margin:0;font-family:var(--ff-d);font-style:italic;font-size:1.05rem;color:var(--sand-3)}

.toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,150%);
  z-index:125;
  background:var(--ink-0);color:var(--sand-0);
  font-family:var(--ff-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.75rem 1.2rem;
  transition:transform .4s var(--ease);
  max-width:92vw;
}
.toast.on{transform:translate(-50%,0)}

/* ─── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width:1100px){
  .capes{grid-template-columns:repeat(2,1fr)}
  .cape-card:nth-child(3){border-left:none}
  .cape-card:nth-child(n+3){border-top:1px solid var(--rule)}
  .tele__grid{grid-template-columns:repeat(2,1fr)}
  .tele__cell:nth-child(3){border-left:none}
  .tele__cell:nth-child(n+3){border-top:1px solid var(--rule)}
}

@media (max-width:900px){
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--sand-1);
    border-bottom:1px solid var(--ink-0);
    padding:.4rem var(--pad) 1rem;
  }
  .nav__links.open{display:flex}
  .nav__links a{width:100%;padding-block:.85rem;border-bottom:1px solid var(--rule-2);font-size:.72rem}
  .nav__links a::after{display:none}
  .burger{display:flex}
  .night__grid{grid-template-columns:1fr}
  .night__fig{max-width:420px}
  .beats{grid-template-columns:1fr}
  .beat + .beat{border-left:none;border-top:1px solid var(--rule)}
  .beat__strike{display:none}
  .beat__t{position:relative;align-self:flex-start}
  .beat__t::after{
    content:"";position:absolute;left:-3%;right:103%;top:56%;height:3px;
    background:linear-gradient(90deg,var(--cape-d),var(--cape-l) 55%,var(--cape));
    transition:right .8s cubic-bezier(.6,0,.25,1);
  }
  .beats.struck .beat__t::after{right:-3%}
  .beats.struck .beat:nth-child(2) .beat__t::after{transition-delay:.16s}
  .beats.struck .beat:nth-child(3) .beat__t::after{transition-delay:.32s}
  .acts{grid-template-columns:1fr}
  .rack__list{grid-template-columns:repeat(2,1fr);gap:1rem}
  .rack__rail{display:none}
  .rk::before{display:none}
  .rack{padding-top:0}
  .ep{grid-template-columns:auto minmax(0,1fr);row-gap:.7rem}
  .ep__s{grid-column:2}
}

@media (max-width:760px){
  :root{--nav-h:60px}
  .hero{min-height:auto;padding-top:2.2rem}
  .hero__cape{display:none}
  .hero__art img{object-position:50% 20%}
  .hero__scrim{
    background:
      linear-gradient(180deg,rgba(234,220,190,.10) 0%,rgba(234,220,190,.06) 26%,rgba(234,220,190,.72) 42%,rgba(234,220,190,.97) 54%,var(--sand-1) 62%);
  }
  .hero__in{justify-content:flex-start;padding-block:min(88vw,460px) 4rem}
  .hero .eyebrow{color:var(--ink-1)}
  .hero__copy{width:100%}
  .hero__lede{max-width:none}
  .scrollcue{display:none}
  .test__stage{aspect-ratio:5/4}
    .test__still{bottom:.7rem;right:.7rem}
  .still__k{display:none}
  .test__say{font-size:1rem;white-space:normal;width:min(88%,32ch)}
  .capes{grid-template-columns:1fr}
  .cape-card{border-left:none !important}
  .cape-card + .cape-card{border-top:1px solid var(--rule)}
  .cape-card__t{max-width:none}
  .tele__grid{grid-template-columns:1fr}
  .tele__cell + .tele__cell{border-left:none;border-top:1px solid var(--rule)}
  .foot__in{flex-direction:column;gap:1.6rem}
}

@media (max-width:420px){
  .rack__list{grid-template-columns:1fr}
  .hero__btns .btn{flex:1 1 100%;justify-content:center}
}

/* ─── HEADLESS CAPTURE MODE ───────────────────────────────── */
html.shot #preloader{display:none}
html.shot .reveal{opacity:1 !important;transform:none !important;transition:none !important}
html.shot .beats .beat__strike{width:100%}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html:not(.motion) *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html:not(.motion) .reveal{opacity:1;transform:none}
  html:not(.motion) #preloader{display:none}
}