/* ARSA Tech. Every position is taken from the reference frame (736 x 519) and expressed in vw / vh,
   so the layout keeps the same proportions on any screen. */
:root{--ink:#fff;--soft:rgba(255,255,255,.78);--dim:rgba(255,255,255,.6);--dark:#2b2b2e;--wide:"Michroma","Eurostile","Helvetica Neue",Arial,sans-serif;--sans:"Manrope","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#cfcbcc;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

.stage{position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(60% 55% at 6% 2%,#f2f4f8 0%,rgba(242,244,248,0) 70%),
    radial-gradient(70% 60% at 50% 4%,#e6e7eb 0%,rgba(230,231,235,0) 75%),
    radial-gradient(55% 60% at 88% 62%,#ab9fa1 0%,rgba(171,159,161,0) 75%),
    radial-gradient(65% 55% at 46% 100%,#a3999a 0%,rgba(163,153,154,0) 80%),
    linear-gradient(180deg,#e2e2e6 0%,#d0cbcd 52%,#b3a9aa 100%)}
.fog{position:absolute;inset:-12%;pointer-events:none}
.fog.back{background:radial-gradient(40% 30% at 30% 40%,rgba(255,255,255,.35),transparent 70%),radial-gradient(35% 28% at 72% 30%,rgba(255,255,255,.22),transparent 70%);filter:blur(30px);animation:drift 26s ease-in-out infinite alternate}
.fog.front{background:radial-gradient(30% 22% at 22% 78%,rgba(240,236,238,.42),transparent 70%),radial-gradient(28% 20% at 80% 22%,rgba(255,255,255,.3),transparent 70%),radial-gradient(26% 18% at 55% 62%,rgba(236,230,232,.28),transparent 70%);filter:blur(36px);animation:drift 34s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2%,-1.5%,0) scale(1.05)}}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* the floating figure: centred where the reference puts it, drifting slowly */
.fig{position:absolute;left:50%;top:48.6%;width:124.6vw;max-width:none;transform:translate(-50%,-50%);pointer-events:none;user-select:none;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}

/* top bar */
.dots{position:absolute;left:1.1vw;top:3.9vh;width:1.95vw;height:1.95vw;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:.45vw}
.dots i{width:.42vw;height:.42vw;border-radius:50%;background:#2b2b2e}
.menu{position:absolute;left:6.4vw;top:4.4vh;font:400 .72vw/1 var(--wide);letter-spacing:.06em;color:#3a3a3e}
.mark{position:absolute;left:49.1vw;top:2.5vh;width:4.2vw;height:4.2vw;transform:translateX(-50%);display:block}
.mark svg{width:100%;height:100%;display:block;filter:drop-shadow(0 .3vw .8vw rgba(0,0,0,.12))}
.cta{position:absolute;right:2vw;top:3.1vh;width:14.5vw;height:3.3vw;border-radius:.55vw;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 .2vw 1.4vw rgba(0,0,0,.05);font:400 .7vw/1 var(--wide);letter-spacing:.04em;color:#3e3e42;transition:background .3s,transform .3s}
.cta:hover{background:#fff;transform:translateY(-1px)}

/* wordmark */
.word{position:absolute;left:49.2vw;top:42.8vh;width:36.6vw;transform:translateX(-50%);font-weight:400;text-align:center;filter:drop-shadow(0 .2vw 1.2vw rgba(0,0,0,.08))}
.word svg{width:100%;height:auto;display:block}
.tech{position:absolute;left:50%;top:calc(56.5vh - 42.8vh);transform:translateX(-50%);font:400 .95vw/1 var(--wide);letter-spacing:.9em;padding-left:.9em;color:rgba(255,255,255,.75)}

/* bottom left */
.cell{position:absolute;left:.35vw;top:75.1vh;width:6.5vw;height:6.5vw;border-radius:1vw;background:#2f2d30;display:grid;place-items:center;box-shadow:0 .4vw 1.6vw rgba(0,0,0,.12)}
.orb{width:4.6vw;height:4.6vw;border-radius:50%;background:radial-gradient(circle at 36% 32%,#c9858f 0%,#7a2231 16%,#2a080e 44%,#0e0405 72%),#0e0405;box-shadow:inset -.6vw -.6vw 1.2vw rgba(0,0,0,.7),0 0 1.4vw rgba(160,40,60,.25);position:relative;overflow:hidden;animation:spin 18s linear infinite}
.orb:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 64%,rgba(180,50,70,.65) 0 10%,transparent 26%),radial-gradient(circle at 30% 70%,rgba(120,20,35,.7) 0 8%,transparent 22%),radial-gradient(circle at 70% 30%,rgba(90,10,20,.8) 0 9%,transparent 24%);mix-blend-mode:screen}
@keyframes spin{to{transform:rotate(360deg)}}
.meter{position:absolute;left:.35vw;top:89.2vh;width:25.1vw}
.mrow{display:flex;align-items:flex-start;gap:4.1vw}
.mrow b em{font:300 .78em/1 var(--sans);font-style:normal;margin-left:.05em;vertical-align:.02em}
.mrow b{font:400 2.55vw/1 var(--wide);letter-spacing:-.02em;color:rgba(255,255,255,.92);min-width:6.2vw}
.mrow span{font:400 .62vw/1.35 var(--sans);color:var(--soft);margin-top:.1vw}
.bar{position:relative;margin-top:2.1vh;height:.95vw;border-radius:.15vw;background:rgba(255,255,255,.32);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,250,240,.75) 70%,#fff6e6 100%);box-shadow:0 0 1vw rgba(255,240,215,.9);transition:width 2.2s cubic-bezier(.2,.8,.2,1)}
.bar i:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1.6vw;background:linear-gradient(90deg,rgba(255,244,225,0),#fffaf0)}
.ticks{display:flex;gap:2.4vw;margin-top:1.2vh;padding-left:.8vw}
.ticks i{width:1px;height:.35vw;background:rgba(255,255,255,.55)}

/* bottom centre */
.specs{position:absolute;left:49vw;top:90.6vh;transform:translateX(-50%);display:grid;justify-items:center;gap:1.9vh;color:rgba(255,255,255,.8)}
.specs svg{width:1.8vw;height:1.8vw}
.specs span{font:400 .6vw/1 var(--wide);letter-spacing:.06em;white-space:nowrap}
.specs:hover{color:#fff}

/* bottom right */
.claim{position:absolute;left:77.6vw;top:79.4vh;width:20.4vw}
.claim h2{font:400 1.9vw/1.04 var(--wide);letter-spacing:.01em;color:#fff;white-space:nowrap}
.crow{display:flex;align-items:flex-end;justify-content:space-between;margin-top:5.2vh}
.crow p{font:400 .6vw/1.35 var(--sans);color:var(--soft)}
.arrow{position:relative;width:4.3vw;height:1px;background:rgba(255,255,255,.9);margin-bottom:.35vw}
.arrow:after{content:"";position:absolute;right:0;top:-.22vw;border-left:.45vw solid #fff;border-top:.22vw solid transparent;border-bottom:.22vw solid transparent}

/* entrance */
.stage>*:not(.fog):not(.grain):not(.fig){opacity:0;animation:rise 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.word{animation-delay:.35s!important}.claim,.meter,.cell,.specs{animation-delay:.6s!important}
@keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.fig{opacity:0;animation:figin 2.4s ease forwards .1s}
@keyframes figin{to{opacity:1}}

/* sheets: menu, bio-specs, ascension */
.sheet{position:fixed;inset:0;z-index:10;background:rgba(214,210,212,.72);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:grid;place-items:center;animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet .close{position:absolute;right:2vw;top:3.1vh;font:400 .72vw/1 var(--wide);letter-spacing:.06em;color:#3a3a3e;padding:1vw}
.sheet nav{display:grid;gap:1.4vw;text-align:center}
.sheet nav a{font:400 4.2vw/1 var(--wide);color:#fff;text-decoration:none;letter-spacing:.01em;transition:opacity .3s,letter-spacing .4s}
.sheet nav:hover a{opacity:.45}.sheet nav a:hover{opacity:1;letter-spacing:.05em}
.sheet .foot{position:absolute;bottom:4vh;font:400 .7vw/1 var(--wide);letter-spacing:.06em;color:rgba(60,58,62,.7)}
.panel .pin{width:min(640px,86vw)}
.panel .k{font:400 .72vw/1 var(--wide);letter-spacing:.12em;text-transform:uppercase;color:#4a474b}
.panel h3{font:400 clamp(26px,2.6vw,44px)/1.1 var(--wide);margin:1.6vw 0 2vw;color:#fff}
.panel ul{list-style:none;border-top:1px solid rgba(255,255,255,.45)}
.panel li{display:grid;grid-template-columns:30% 1fr;gap:1.4vw;padding:1.2vw 0;border-bottom:1px solid rgba(255,255,255,.45)}
.panel li b{font:400 clamp(11px,.8vw,14px)/1.4 var(--wide);color:#fff}
.panel li span,.panel .lead{font:400 clamp(14px,1vw,17px)/1.55 var(--sans);color:#3c393d}

/* phones and narrow windows: the same pieces, stacked so they stay legible */
@media (max-width:820px),(max-aspect-ratio:1/1){
  .dots{left:5vw;top:4vh;width:6vw;height:6vw;gap:1.4vw}.dots i{width:1.3vw;height:1.3vw}
  .menu{left:14vw;top:4.7vh;font-size:2.2vw}
  .mark{top:3vh;width:11vw;height:11vw}
  .cta{right:5vw;top:3.6vh;width:auto;height:auto;padding:2.2vw 2.6vw;font-size:2vw;border-radius:2vw;white-space:nowrap}
  .fig{width:205vw;top:45%;left:54%}
  .word{top:40vh;width:76vw}.tech{top:calc(13vw + 2vh);font-size:2.8vw}
  .cell{left:5vw;top:auto;bottom:30vh;width:15vw;height:15vw;border-radius:3vw}.orb{width:10.5vw;height:10.5vw}
  .meter{left:5vw;top:auto;bottom:6vh;width:52vw}.mrow{gap:4vw}.mrow b em{font:300 .78em/1 var(--sans);font-style:normal;margin-left:.05em;vertical-align:.02em}
.mrow b{font-size:7vw;min-width:auto}.mrow span{font-size:2.5vw}.bar{height:2.2vw}.ticks{gap:4.6vw}.ticks i{height:1vw}
  .specs{top:auto;bottom:18vh;left:auto;right:5vw;transform:none}.specs svg{width:5vw;height:5vw}.specs span{font-size:2.2vw}
  .claim{left:auto;right:5vw;top:auto;bottom:6vh;width:auto;text-align:right}.claim h2{font-size:3.5vw}.crow{display:none}
  .sheet .close{font-size:2.6vw;right:5vw}.sheet nav a{font-size:9vw}.sheet .foot{font-size:2.2vw}.panel .k{font-size:2.6vw}.panel li{grid-template-columns:1fr;gap:6px;padding:14px 0}
}
@media (prefers-reduced-motion:reduce){.fog,.orb,.fig{animation:none!important}.fig{opacity:1}}

/* ARSA Guard additions: links styled like the reference buttons, the MCP sheet */
a.cta{display:grid;place-items:center;text-decoration:none}
button.crow{width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit}
button.crow:hover .arrow{width:5.2vw}.arrow{transition:width .35s}
.panel .pin{width:min(720px,88vw);max-height:86vh;overflow:auto}
.panel code{font:400 .92em "JetBrains Mono",ui-monospace,monospace;color:#2a2a2e;background:rgba(255,255,255,.55);padding:1px 6px;border-radius:5px}
pre.cfg{margin:1.4vw 0 1vw;padding:14px 16px;border-radius:12px;background:rgba(20,20,22,.82);color:#e9e9ec;font:400 12.5px/1.55 "JetBrains Mono",ui-monospace,monospace;overflow:auto;white-space:pre}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.pill-btn{display:inline-grid;place-items:center;height:40px;padding:0 18px;border-radius:10px;border:0;background:#2b2b2e;color:#fff;font:400 12px/1 var(--wide);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.pill-btn.ghost{background:rgba(255,255,255,.7);color:#2b2b2e}
.panel .lead.small{margin-top:1.2vw;font-size:clamp(12.5px,.85vw,14px)}
/* sheets read in dark ink: white on the light fog was too faint */
.sheet nav a{color:#232326}.panel h3{color:#1f1f22}.panel li b{color:#232326}.panel li span,.panel .lead{color:#45424a}.panel .k{color:#5a5760}
.panel ul{border-top-color:rgba(35,35,38,.16)}.panel li{border-bottom-color:rgba(35,35,38,.16)}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .claim{bottom:15vh}.specs{bottom:6vh;right:5vw}.cell{bottom:31vh}
}

/* ===================== scrolling page (ARCHY-style chapters in the ARSA world) ===================== */
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
body{background:linear-gradient(180deg,#e2e2e6 0%,#d6d1d3 18%,#c6bfc1 42%,#aaa1a3 68%,#8f8789 100%)}
html{scroll-behavior:smooth}
.stage{position:relative;inset:auto;height:100vh;height:100svh;min-height:560px}
/* the top bar keeps its exact place and stays while you scroll */
.dots,.menu,.mark,.cta{position:fixed;z-index:30}
.hudbar{position:fixed;left:0;right:0;top:0;height:calc(2.5vh + 4.2vw + 2.5vh);z-index:25;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(214,209,211,.82),rgba(214,209,211,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(35,35,38,.08)}
body.past .hudbar{opacity:1}
body.past .menu,body.past .dots i{color:#2a2a2e}
.veil{position:absolute;inset:0;pointer-events:none;background:#d9d4d6;opacity:0;z-index:3}
.cue{position:absolute;left:50%;bottom:2.4vh;transform:translateX(-50%);font:400 .58vw/1 var(--wide);letter-spacing:.14em;color:rgba(255,255,255,.75);text-decoration:none;z-index:4;animation:cue 2.6s ease-in-out infinite;display:none}
@keyframes cue{0%,100%{translate:0 0;opacity:.55}50%{translate:0 6px;opacity:1}}

/* chapters */
.chapters{position:relative;z-index:5;color:#1f1f22;--side:max(6vw,24px)}
.chapter{position:relative;padding:clamp(80px,9vw,150px) 0}
.eyebrow{margin:0 0 18px;font:400 clamp(10px,.72vw,12px)/1.4 var(--wide);letter-spacing:.16em;text-transform:uppercase;color:rgba(31,31,34,.6)}
.chapter h2{margin:0;font:400 clamp(26px,2.7vw,46px)/1.12 var(--wide);letter-spacing:-.01em;color:#1c1c1f;text-transform:none}
.chapter h2 em,.closing h2 em{font-style:normal;color:rgba(31,31,34,.48)}
.sub{margin:22px 0 0;max-width:52ch;font:400 clamp(15px,1.05vw,18px)/1.6 var(--sans);color:#3d3a40}
.ch-head{display:grid;align-items:center;gap:clamp(28px,5vw,90px)}
.ch-head.left{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-right:var(--side)}
.ch-head.right{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding-left:var(--side)}
.ch-head.right .ch-media{order:2}
.ch-media{position:relative;margin:0;height:clamp(380px,72vh,760px);overflow:hidden}
.ch-head.left .ch-media{border-radius:0 30px 30px 0}.ch-head.right .ch-media{border-radius:30px 0 0 30px}
.ch-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07) translateY(var(--py,0px));transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.ch-media.in img{transform:scale(1) translateY(var(--py,0px))}
.ch-media::after{content:"";position:absolute;inset:0;pointer-events:none}
.ch-head.left .ch-media::after{background:linear-gradient(90deg,transparent 62%,rgba(205,199,201,.5)),linear-gradient(180deg,rgba(226,226,230,.3),transparent 25%,transparent 75%,rgba(190,183,185,.35))}
.ch-head.right .ch-media::after{background:linear-gradient(270deg,transparent 62%,rgba(205,199,201,.5)),linear-gradient(180deg,rgba(226,226,230,.3),transparent 25%,transparent 75%,rgba(190,183,185,.35))}
.ch-media figcaption{position:absolute;z-index:1;bottom:22px;font:400 10px/1 var(--wide);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ch-head.left .ch-media figcaption{left:var(--side)}.ch-head.right .ch-media figcaption{right:var(--side)}
.ch-kpi{display:flex;gap:clamp(20px,3vw,48px);margin-top:30px;padding-top:22px;border-top:1px solid rgba(31,31,34,.14)}
.ch-kpi b{display:block;font:400 clamp(20px,1.7vw,28px)/1.1 var(--wide);color:#1c1c1f}.ch-kpi span{display:block;margin-top:8px;font:400 12.5px/1.4 var(--sans);color:rgba(31,31,34,.6)}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font:400 clamp(10px,.7vw,12px)/1 var(--wide);letter-spacing:.1em;text-transform:uppercase;color:#1f1f22;text-decoration:none;border-bottom:1px solid rgba(31,31,34,.3);padding-bottom:6px}
.more i{font-style:normal;transition:transform .3s}.more:hover i{transform:translateX(5px)}
.dim{color:rgba(31,31,34,.55);font:400 14px var(--sans)}
.meters3{display:grid;gap:18px;margin-top:30px}
.m3 .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.m3 b{font:400 clamp(15px,1.15vw,19px)/1 var(--wide);color:#1c1c1f}.m3 span{font:400 13px var(--sans);color:rgba(31,31,34,.62)}
.m3 .track{margin-top:10px;height:.55vw;min-height:6px;border-radius:2px;background:rgba(255,255,255,.45);overflow:hidden}
.m3 .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(255,255,255,.65),#fff6e6);box-shadow:0 0 12px rgba(255,240,215,.9);transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
.m3 .track i.hot{background:linear-gradient(90deg,#e9c7cc,#b8334a);box-shadow:0 0 12px rgba(184,51,74,.5)}
/* the band */
.ch-band{position:relative;height:clamp(440px,78vh,820px);overflow:hidden;margin-bottom:clamp(36px,4vw,70px)}
.ch-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06) translateY(var(--py,0px));transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.ch-band.in img{transform:scale(1) translateY(var(--py,0px))}
.ch-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,209,211,.85) 0%,rgba(214,209,211,.45) 36%,rgba(214,209,211,0) 62%),linear-gradient(180deg,rgba(214,209,211,.9) 0%,transparent 18%,transparent 80%,rgba(190,183,185,.9) 100%)}
.band-text{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 var(--side);max-width:calc(560px + var(--side) * 2)}
.wrap{padding:0 var(--side)}
.rulegrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(31,31,34,.16)}
.rulegrid li{padding:20px 18px 22px 0;border-bottom:1px solid rgba(31,31,34,.12);min-height:120px}
.rulegrid .n{display:block;font:400 10px/1 var(--wide);letter-spacing:.16em;color:rgba(31,31,34,.5)}
.rulegrid b{display:block;margin:12px 0 8px;font:500 15px/1.35 var(--sans);color:#1c1c1f}
.rulegrid .st{font:400 10px/1 var(--wide);letter-spacing:.14em}.rulegrid .st.on{color:#2f6b52}.rulegrid .st.off{color:#a3324a}
.rulegrid li.off b{color:rgba(31,31,34,.45)}
.limits{display:grid;gap:14px;margin-top:26px}.limits p{margin:0;font:400 clamp(14px,.98vw,16.5px)/1.6 var(--sans);color:#3d3a40}.limits b{color:#1c1c1f;font-weight:500}
/* chapters 04-05: the page is darker here, so the media fade into it with matching tones */
#record .ch-media::after,#honest .ch-media::after{background:linear-gradient(180deg,rgba(170,161,163,.3),transparent 25%,transparent 75%,rgba(150,141,143,.35))}
/* closing */
.closing{position:relative;min-height:88vh;display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff}
.close-bg{position:absolute;inset:0;background:url(/img/figure-1600.webp) center/cover no-repeat;filter:brightness(.62) saturate(.9);transform:scale(1.08)}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#8f8789 0%,rgba(143,135,137,0) 30%,rgba(60,55,58,.25) 100%)}
.closing .wrap{position:relative;z-index:1}
.closing .eyebrow{color:rgba(255,255,255,.75)}
.closing h2{margin:0;font:400 clamp(30px,3.6vw,64px)/1.08 var(--wide);color:#fff}.closing h2 em{color:rgba(255,255,255,.62)}
.close-acts{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.close-acts .pill-btn{height:48px;padding:0 26px;font-size:12px}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.ch-media.reveal,.ch-band.reveal{transform:none}
@media (max-width:980px){
  .ch-head.left,.ch-head.right{grid-template-columns:1fr;padding:0}
  .ch-head.right .ch-media{order:0}
  .ch-head .ch-media{height:56vh;border-radius:0!important}
  .ch-text{padding:0 var(--side)}
  .rulegrid{grid-template-columns:1fr 1fr}
  .cue{font-size:2.2vw}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ch-media img,.ch-band img{transition:none;transform:none}.cue{animation:none}}
.stage>.veil{animation:none!important}

/* ===================== refined controls: no bracket labels, quiet type, soft pills ===================== */
.menu{display:flex;align-items:center;font:500 .8vw/1 var(--sans);letter-spacing:.02em;color:#3a3a3e;top:4.25vh}
.menu span{position:relative;padding:.3vw 0}
.menu span:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.menu:hover span:after{transform:scaleX(1);transform-origin:left}
.dots i{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.dots:hover i:nth-child(1){transform:translate(-15%,-15%)}.dots:hover i:nth-child(2){transform:translate(15%,-15%)}
.dots:hover i:nth-child(3){transform:translate(-15%,15%)}.dots:hover i:nth-child(4){transform:translate(15%,15%)}

a.cta{display:flex;align-items:center;gap:1.1vw;width:auto;height:3.2vw;padding:0 .3vw 0 1.5vw;border-radius:99px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7);box-shadow:0 .3vw 1.6vw rgba(40,30,35,.07),inset 0 1px 0 rgba(255,255,255,.8);
  font:500 .8vw/1 var(--sans);letter-spacing:.01em;color:#2b2b2e;top:2.95vh}
a.cta:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.go{display:grid;place-items:center;width:2.6vw;height:2.6vw;border-radius:50%;background:#2b2b2e;color:#fff;flex:none;overflow:hidden}
.go svg{width:42%;height:42%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
a.cta:hover .go svg,.pill-btn:hover .go svg{transform:translate(12%,-12%)}

.specs span{font:500 .66vw/1 var(--sans);letter-spacing:.04em}
.specs svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.specs:hover svg{transform:translateY(-3px)}

.sheet .close{display:flex;align-items:center;gap:.8vw;font:500 .8vw/1 var(--sans);letter-spacing:.02em;color:#2b2b2e;padding:.6vw}
.sheet .close i{display:grid;place-items:center;width:2.6vw;height:2.6vw;border-radius:50%;border:1px solid rgba(43,43,46,.28);transition:background .3s,color .3s,transform .4s}
.sheet .close i svg{width:40%;height:40%}
.sheet .close:hover i{background:#2b2b2e;color:#fff;transform:rotate(90deg)}

.pill-btn{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 22px;border-radius:99px;font:500 13.5px/1 var(--sans);letter-spacing:.01em;transition:background .3s,transform .3s}
.pill-btn:has(.go){padding-right:5px}
.pill-btn .go{width:34px;height:34px;background:#fff;color:#2b2b2e}
.pill-btn:hover{transform:translateY(-1px)}
.pill-btn.ghost{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.7)}
.close-acts .pill-btn{height:50px;padding:0 26px;font-size:14px}.close-acts .pill-btn:has(.go){padding-right:6px}
.close-acts .pill-btn .go{width:38px;height:38px}

@media (max-width:820px),(max-aspect-ratio:1/1){
  .menu{font-size:3.3vw;top:4.5vh}
  a.cta{height:auto;padding:1.2vw 1.2vw 1.2vw 3.6vw;gap:2.4vw;font-size:3.3vw;top:3.4vh}
  .go{width:7.5vw;height:7.5vw}
  .specs span{font-size:2.8vw}
  .sheet .close{font-size:3.3vw;gap:2vw}.sheet .close i{width:8vw;height:8vw}
}

/* top bar, filled in: live status on the left, section links + open app on the right */
.status{position:fixed;z-index:30;left:11.2vw;top:4.05vh;display:flex;align-items:center;gap:.6vw;padding:.55vw .9vw;border-radius:99px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6);font:500 .7vw/1 var(--sans);color:#3a3a3e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.status em{font-style:normal}
.status i{width:.45vw;height:.45vw;border-radius:50%;background:#9a9497;box-shadow:0 0 0 .2vw rgba(154,148,151,.18)}
.status.open i{background:#2f6b52;box-shadow:0 0 0 .2vw rgba(47,107,82,.18);animation:pulse 2.4s ease-in-out infinite}
.status .sep{width:1px;height:.8vw;background:rgba(35,35,38,.2)}
@keyframes pulse{50%{box-shadow:0 0 0 .4vw rgba(47,107,82,0)}}
.tr{position:fixed;z-index:30;right:2vw;top:2.95vh;display:flex;align-items:center;gap:1.4vw}
.tr a.cta{position:static;top:auto;right:auto}
.tnav{display:flex;align-items:center;gap:.2vw;padding:.3vw;border-radius:99px;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tnav a{font:500 .78vw/1 var(--sans);color:#3a3a3e;text-decoration:none;padding:.75vw 1vw;border-radius:99px;transition:background .3s,color .3s}
.tnav a:hover{background:rgba(255,255,255,.75);color:#111}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .status,.tnav{display:none}
  .tr{right:5vw;top:3.4vh}
}
/* the A mark: black on the fog, no tile */
.mark img{width:100%;height:100%;display:block}

/* top bar v3: logo on the left (no dots), section links centred, Get MCP + Open app on the right.
   The menu sheet stays only as the phone menu. */
.brand{position:fixed;z-index:30;left:2vw;top:2.95vh;width:3.2vw;height:3.2vw;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand img{width:100%;height:100%;display:block}
.brand:hover{transform:translateY(-1px) rotate(-4deg)}
.status{left:6.4vw;top:3.55vh}
.tnav{position:fixed;z-index:30;left:50%;top:2.95vh;transform:translateX(-50%);height:3.2vw;padding:0 .3vw}
.tnav a{padding:.85vw 1.05vw}
.tr .menu{display:none;position:static}
.ghostbtn{display:flex;align-items:center;height:3.2vw;padding:0 1.4vw;border-radius:99px;font:500 .8vw/1 var(--sans);color:#2b2b2e;text-decoration:none;border:1px solid rgba(43,43,46,.22);transition:background .3s,border-color .3s}
.ghostbtn:hover{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.8)}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .brand{left:5vw;top:3.6vh;width:10vw;height:10vw}
  .tnav,.status,.ghostbtn{display:none}
  .tr{gap:3vw}
  .tr .menu{display:flex;font-size:3.3vw}
}
.status{top:calc(2.95vh + 1.6vw);transform:translateY(-50%)}
@media (min-width:821px) and (min-aspect-ratio:1/1){.claim{top:auto;bottom:3.4vh}}