/* ═══════════════════════════════════════════════════════════
   THE QUANTITATIVE GUILD — Selius · XMQA
   Palette: obsidian, silver filament (the old node map), Selius gold,
   ember for the Crucible, glacier for the Light Castle.
   ═══════════════════════════════════════════════════════════ */
:root{
  --void:#050506;
  --obsidian:#0b0b0e;
  --stone:#15151a;
  --stone-2:#1d1d24;
  --line:rgba(220,228,255,.12);
  --line-2:rgba(220,228,255,.22);
  --silver:#dfe5f2;
  --text:#ecebe6;
  --dim:rgba(236,235,230,.64);
  --dim-2:rgba(236,235,230,.42);
  --gold:#d9b46a;
  --gold-2:#f3d693;
  --gold-deep:#8a6a2c;
  --ember:#ff6a3d;
  --ember-2:#ffb07a;
  --glacier:#cfe0ff;
  --emerald:#34d39a;
  --radius:4px;
  --wrap:1180px;
  --serif:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--void)}
body{background:var(--void);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:var(--mono);font-size:.86em;color:var(--gold-2)}
b,strong{font-weight:600;color:#fff}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Atmosphere ─────────────────────────────────────────── */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at var(--fx,50%) 0%,rgba(220,230,255,.9),rgba(160,180,255,.25) 45%,transparent 75%);mix-blend-mode:screen}
#grain{position:fixed;inset:-50%;z-index:59;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
main,footer,.topbar{position:relative;z-index:2}

/* ── Top bar ────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:14px clamp(16px,4vw,44px);background:linear-gradient(to bottom,rgba(5,5,6,.86),rgba(5,5,6,0));}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.25rem;
  color:var(--gold-2);background:radial-gradient(circle at 35% 30%,#f4f1ea,#b9b5ac 60%,#77736b);box-shadow:0 0 18px rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.45)}
.brand-text{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;color:var(--silver)}
.brand-text i{color:var(--gold);font-style:normal}
.toplinks{display:flex;gap:26px;margin-left:auto}
.toplinks a{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--dim);transition:color .3s}
.toplinks a:hover{color:#fff}
@media (max-width:820px){.toplinks{display:none}.topbar .btn{margin-left:auto}}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;padding:13px 22px;border-radius:2px;transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s;white-space:nowrap}
.btn-sm{padding:8px 14px;font-size:.6rem}
.btn-lg{padding:16px 28px}
.btn-gold{color:#1a1204;background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,#b88c3d);box-shadow:0 6px 24px rgba(217,180,106,.25)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(217,180,106,.4)}
.btn-ghost{color:var(--silver);border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--silver);background:rgba(255,255,255,.06)}

/* ── Vidette ribbon ─────────────────────────────────────── */
.vidette-ribbon{position:fixed;z-index:49;top:62px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--dim);
  padding:8px 16px;border:1px solid rgba(217,180,106,.28);background:rgba(10,9,6,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:40px;transition:opacity .5s,transform .5s var(--ease),border-color .3s;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.vidette-ribbon b{color:var(--gold-2);font-weight:700}
.vidette-ribbon:hover{border-color:var(--gold)}
.vidette-ribbon.hide{opacity:0;pointer-events:none;transform:translate(-50%,-12px)}
.vr-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);flex:none;animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{opacity:.35}}
@media (max-width:520px){.vidette-ribbon{font-size:.52rem;letter-spacing:.1em;padding:7px 12px}.vr-val{display:none}}

/* ── Type ───────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.eyebrow small{color:var(--dim-2);letter-spacing:.14em;font-size:.9em}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;line-height:1.02;color:#fff}
h1{font-size:clamp(2.8rem,7.4vw,6.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.8rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:6px 0 12px}
.lede{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--dim);max-width:62ch}
.muted{color:var(--dim);font-size:.95rem}
.fineprint{color:var(--dim-2);font-size:.78rem;line-height:1.55;margin-top:14px}
.mono{font-family:var(--mono);letter-spacing:.12em;font-size:1rem}
.mt{margin-top:22px}.mt-s{margin-top:12px}

/* ── 0 · World ──────────────────────────────────────────── */
.world{position:relative;height:100vh;min-height:620px;overflow:hidden;z-index:3}
@supports (height:100svh){.world{height:100svh}}
#worldmap{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
#worldmap.engaged{cursor:move}
#worldmap.on-node{cursor:pointer}
.world-copy{position:absolute;left:clamp(16px,5vw,64px);top:clamp(110px,16vh,170px);max-width:560px;pointer-events:none;
  animation:rise 1.4s var(--ease) .4s both}
.world-copy{z-index:2;isolation:isolate}
.world-copy::before{content:"";position:absolute;inset:-90px -160px -90px -120px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 40% 50%,rgba(5,5,6,.82),rgba(5,5,6,.55) 45%,transparent 75%)}
.world-copy h1{margin:12px 0 16px;text-shadow:0 4px 40px rgba(0,0,0,.9)}
.world-copy .lede{text-shadow:0 2px 18px #000}
.world-flow{margin-top:18px;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.world-flow i{color:var(--gold);font-style:normal}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.world-tip{position:absolute;z-index:4;pointer-events:none;padding:10px 14px;min-width:160px;max-width:260px;border:1px solid var(--line-2);background:rgba(8,8,10,.9);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.world-tip.show{opacity:1;transform:none}
.world-tip small{display:block;color:var(--gold);margin-top:4px;letter-spacing:.2em}
.world-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:92px;width:max-content;max-width:calc(100% - 32px);text-align:center;background:rgba(5,5,6,.72);border-radius:30px;padding:7px 16px!important;font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(236,235,230,.34);pointer-events:none;padding:0 16px}
.world-hint.engaged{color:var(--gold)}
.descend{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--silver);opacity:.7}
.descend svg{width:14px;height:26px;fill:none;stroke:var(--silver);stroke-width:1.4;animation:drop 2.4s ease-in-out infinite}
@keyframes drop{50%{transform:translateY(6px);opacity:.4}}
.chapter-list{display:none}
@media (max-width:700px){
  .world-copy{top:104px;right:16px}
  .world-flow{display:none}
  .world-hint{bottom:132px;font-size:.52rem;letter-spacing:.16em}
  .chapter-list{position:absolute;left:0;right:0;bottom:72px;display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none;z-index:4}
  .chapter-list::-webkit-scrollbar{display:none}
  .chapter-list a{flex:none;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--silver);
    padding:7px 11px;border:1px solid var(--line-2);border-radius:30px;background:rgba(5,5,6,.6)}
}

/* ── Marquee ────────────────────────────────────────────── */
.marquee{position:relative;z-index:3;overflow:hidden;border-block:1px solid var(--line);background:rgba(5,5,6,.7);padding:14px 0}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 48s linear infinite}
.marquee span{font-family:var(--mono);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--dim-2)}
.marquee span:nth-child(3n+1){color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── Portals (sticky 3D stages, forward camera) ─────────── */
.portal{position:relative;height:230vh;z-index:3}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1100px;perspective-origin:50% 45%;background:#030304}
@supports (height:100svh){.stage{height:100svh}}
.layer{position:absolute;inset:-6%;will-change:transform}
.backdrop{transform:translate3d(var(--sx,0px),var(--sy,0px),0) scale(var(--cam,1.06)) rotate(var(--rot,0deg));transition:filter .12s}
.backdrop.struck{filter:brightness(1.9) contrast(1.08)}
.media-slot{position:absolute;inset:0}
.media-slot>img,.media-slot>video,.media-slot>svg{width:100%;height:100%;object-fit:cover}
.media-slot>svg{display:block}
.fog{inset:-10%;pointer-events:none;background:
  radial-gradient(ellipse 80% 40% at 50% 100%,rgba(5,5,6,.95),transparent 70%),
  linear-gradient(to bottom,rgba(3,3,4,.55),transparent 22%,transparent 62%,rgba(3,3,4,.96));
  transform:translate3d(0,var(--fogy,0px),0) scale(var(--fogs,1.1))}
.portal-copy{position:absolute;z-index:5;left:clamp(16px,6vw,90px);bottom:clamp(64px,14vh,140px);max-width:560px;
  opacity:var(--copy-o,0);transform:translate3d(0,var(--copy-y,40px),var(--copy-z,-300px));transform-style:preserve-3d}
.portal-tunnel .portal-copy{bottom:auto;top:clamp(96px,15vh,150px)}
.portal-copy h2{margin:12px 0 16px;text-shadow:0 6px 40px rgba(0,0,0,.95)}
.portal-copy p{color:var(--dim);text-shadow:0 2px 16px #000;max-width:48ch}
.portal-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* Light castle mood */
[data-mood="light"] .stage{background:#0a0d16}
.rays{inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 180deg at 55% 20%,transparent 0deg,rgba(255,245,220,.12) 8deg,transparent 16deg,transparent 30deg,rgba(255,245,220,.08) 36deg,transparent 44deg,transparent 330deg,rgba(255,245,220,.1) 340deg,transparent 350deg);
  animation:rays 18s ease-in-out infinite alternate}
@keyframes rays{to{transform:rotate(6deg) scale(1.05);opacity:.75}}

/* Raccoon mood: file glyphs drift toward it */
.files{inset:0;pointer-events:none}
.files span{position:absolute;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:rgba(160,255,230,.72);text-shadow:0 0 12px rgba(80,255,210,.5);
  padding:4px 8px;border:1px solid rgba(120,255,220,.25);background:rgba(4,14,12,.55);animation:fileDrift 11s linear infinite;opacity:0}
.files span:nth-child(1){left:8%;top:30%;animation-delay:0s}
.files span:nth-child(2){left:82%;top:22%;animation-delay:1.4s}
.files span:nth-child(3){left:14%;top:64%;animation-delay:2.8s}
.files span:nth-child(4){left:76%;top:70%;animation-delay:4.2s}
.files span:nth-child(5){left:30%;top:14%;animation-delay:5.6s}
.files span:nth-child(6){left:66%;top:42%;animation-delay:7s}
.files span:nth-child(7){left:4%;top:46%;animation-delay:8.4s}
.files span:nth-child(8){left:90%;top:52%;animation-delay:9.8s}
.files span:nth-child(odd){--tx:18vw}.files span:nth-child(even){--tx:-18vw}
@keyframes fileDrift{0%{opacity:0;transform:translate(0,0) scale(.9)}12%{opacity:1}80%{opacity:.85}100%{opacity:0;transform:translate(var(--tx,0px),6vh) scale(.55)}}

/* Tunnel mood */
.portal-tunnel .stage{background:#020203}
.tunnel{inset:0;width:100%;height:100%}
.glitch{inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,60,60,.08) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(60,220,255,.06) 0 1px,transparent 1px 7px)}
.glitch.on{animation:glitch .38s steps(3) 1}
@keyframes glitch{0%{opacity:.9;transform:translateX(-6px)}33%{opacity:.6;transform:translateX(5px) skewX(-4deg)}66%{opacity:.8;transform:translateX(-2px)}100%{opacity:0;transform:none}}
.portal-tunnel.shake .stage{animation:shake .42s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes shake{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(4px,-2px,0)}30%,50%,70%{transform:translate3d(-7px,3px,0)}40%,60%{transform:translate3d(7px,-3px,0)}}

/* Dark castle mood */
[data-mood="dark"] .stage{background:#050304}
.embers{inset:0;pointer-events:none;background-image:
  radial-gradient(2px 2px at 20% 80%,rgba(255,140,80,.9),transparent),radial-gradient(1.5px 1.5px at 70% 90%,rgba(255,110,60,.8),transparent),
  radial-gradient(2px 2px at 45% 95%,rgba(255,170,90,.9),transparent),radial-gradient(1px 1px at 85% 70%,rgba(255,120,70,.8),transparent),
  radial-gradient(1.5px 1.5px at 10% 60%,rgba(255,150,90,.7),transparent),radial-gradient(1px 1px at 60% 75%,rgba(255,100,60,.9),transparent);
  background-size:100% 100%;animation:embers 7s linear infinite}
@keyframes embers{from{transform:translateY(0);opacity:1}to{transform:translateY(-60vh);opacity:0}}

/* ── Chambers ───────────────────────────────────────────── */
.chamber{position:relative;z-index:3;padding:clamp(80px,12vh,140px) 0;background:linear-gradient(to bottom,rgba(5,5,6,.94),rgba(5,5,6,.88) 20%,rgba(5,5,6,.88) 80%,rgba(5,5,6,.96))}
.chamber-dark{background:linear-gradient(to bottom,rgba(6,3,3,.96),rgba(10,4,4,.9) 40%,rgba(5,5,6,.95))}
.chamber-exchange{padding-top:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,32px);perspective:1400px}
.chamber-head{margin-bottom:34px}
.chamber-head h2{margin:12px 0 14px;max-width:18ch}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Reveal: cards arrive from depth */
.reveal{opacity:0;transform:translate3d(0,40px,-220px) rotateX(10deg);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Cards */
.card{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(26,26,32,.82),rgba(10,10,13,.9));box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;transform-style:preserve-3d}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 45%)}
.card:hover::before{opacity:1}
.tilt.in{transition:transform .5s var(--ease),opacity 1s var(--ease)}
.card-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px}
.card-feature{border-color:rgba(217,180,106,.36);background:linear-gradient(160deg,rgba(40,33,20,.86),rgba(12,11,9,.92))}
.price{font-family:var(--serif);font-size:3.2rem;line-height:1;margin:6px 0 16px;color:#fff}
.price small{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dim);margin-left:6px}
.ticks{list-style:none;display:grid;gap:8px;margin:0 0 20px}
.ticks li{position:relative;padding-left:20px;color:var(--dim);font-size:.93rem}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:1px;background:var(--gold)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips li{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line-2);color:var(--silver);border-radius:2px}
.chips-ember li{border-color:rgba(255,106,61,.35);color:var(--ember-2)}
.type-list{list-style:none;display:grid;gap:10px;margin-top:14px}
.type-list li{display:flex;gap:12px;align-items:baseline;color:var(--dim);font-size:.92rem}
.type-list span{flex:none;width:44px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--gold);border:1px solid rgba(217,180,106,.3);text-align:center;padding:3px 0}
.kv{display:grid;gap:0;margin:14px 0}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line)}
.kv dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.kv dd{font-family:var(--mono);font-size:.78rem;color:var(--silver);text-align:right}
.kv-tight div{padding:7px 0}
.status{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:4px 9px;border-radius:30px;border:1px solid var(--line-2);color:var(--dim)}
.status-live{color:#ff6b6b;border-color:rgba(255,107,107,.5)}
.match-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--dim-2);display:inline-block}
.live-card.active .pulse-dot{background:#ff5252;box-shadow:0 0 10px #ff5252;animation:beat 1.4s infinite}
.live-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.live-stats div{border:1px solid var(--line);padding:10px 12px}
.live-stats b{display:block;font-family:var(--serif);font-size:1.8rem;line-height:1}
.live-stats span{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.event-list{list-style:none;margin-top:12px;display:grid;gap:6px}
.event-list li{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--silver);border-left:1px solid var(--gold);padding-left:10px}
.segment-bar{height:3px;background:var(--line);margin:8px 0 16px;overflow:hidden}
.segment-bar span{display:block;height:100%;background:var(--gold)}

/* Vidette card */
.card-vidette{border-color:rgba(217,180,106,.5);background:radial-gradient(120% 80% at 50% 0%,rgba(217,180,106,.14),transparent 60%),linear-gradient(160deg,rgba(24,20,14,.95),rgba(8,8,8,.95))}
.vidette-art{position:relative!important;height:150px;margin:-26px -24px 18px;overflow:hidden;border-bottom:1px solid rgba(217,180,106,.25)}
.vidette-kind{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.vidette-value{margin:14px 0;font-family:var(--serif);font-size:1.6rem;color:#fff}
.vidette-value s{color:var(--dim-2);font-size:1.2rem}
.vidette-value b{color:var(--gold-2);font-size:2.2rem;font-weight:600;margin:0 6px}
.vidette-value small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* Journey */
.journey{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin-top:40px;counter-reset:j;border-top:1px solid var(--line)}
.journey li{position:relative;padding:22px 14px 0 0;font-size:.82rem;color:var(--dim);counter-increment:j}
.journey li::before{content:counter(j,decimal-leading-zero);position:absolute;top:-9px;left:0;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;color:var(--gold);background:var(--void);padding-right:8px}
.journey b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:#fff;margin-bottom:4px}
@media (max-width:900px){.journey{grid-template-columns:repeat(2,1fr);row-gap:24px}}
.verity-line{margin-top:34px;padding:22px 26px;border-left:2px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);color:#fff;background:rgba(217,180,106,.05)}
.verity-line span{display:block;font-family:var(--mono);font-style:normal;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* Scanner tree */
.tree{font-family:var(--mono);font-size:.8rem;margin-top:14px;display:grid;gap:4px}
.tree .node{display:flex;align-items:center;gap:10px;padding:6px 0 6px calc(var(--lvl,0) * 22px);position:relative;color:var(--silver)}
.tree .node::before{content:"";position:absolute;left:calc(var(--lvl,0) * 22px - 14px);top:50%;width:10px;height:1px;background:var(--line-2)}
.tree .node[style*="--lvl:0"]::before{display:none}
.tree .node em{font-style:normal;font-size:.6rem;letter-spacing:.14em;color:var(--dim-2);text-transform:uppercase}
.tree .ext{color:#8ff5d8}
.tree .node.lit{color:#fff}
.tree .node.lit .ext{text-shadow:0 0 12px rgba(143,245,216,.9)}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);margin:14px 0}
.seg button{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 4px;color:var(--dim);border-right:1px solid var(--line);transition:background .3s,color .3s}
.seg button:last-child{border-right:0}
.seg button[aria-checked="true"]{background:rgba(217,180,106,.14);color:var(--gold-2)}
@media (max-width:480px){.seg{grid-template-columns:repeat(2,1fr)}.seg button:nth-child(2){border-right:0}.seg button:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.privacy-rows{list-style:none;display:grid;gap:6px}
.privacy-rows li{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.7rem;padding:8px 10px;border:1px solid var(--line);color:var(--silver)}
.privacy-rows li span:last-child{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.privacy-rows .stay{color:var(--dim-2)}
.privacy-rows .go{color:var(--gold-2)}
.privacy-rows .never{color:#8ff5d8}

/* Crucible */
.checkpoint{border-color:rgba(255,106,61,.3);background:linear-gradient(160deg,rgba(40,14,10,.86),rgba(10,8,8,.92))}
.rules{margin:14px 0 0 18px;display:grid;gap:10px;color:var(--dim);font-size:.92rem}
.rules li::marker{color:var(--ember);font-family:var(--mono)}
.bars{display:grid;gap:12px;margin-top:16px}
.bar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:.84rem;color:var(--dim)}
.bar b{font-family:var(--mono);font-weight:400;font-size:.7rem;color:var(--ember-2)}
.bar i{grid-column:1/-1;height:3px;background:var(--line);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--ember),var(--ember-2));transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.in .bar i::after,.bar.in i::after{transform:scaleX(1)}
.trophy-art{position:relative!important;height:220px;margin:-26px -24px 18px;border-bottom:1px solid var(--line)}
/* Trophy photos are shown whole, never cropped */
.trophy-art{height:300px;background:radial-gradient(circle at 50% 40%,#fbfbf9,#e9e8e4 70%)}
.trophy-art>img{object-fit:contain!important;padding:14px}
.board table{width:100%;border-collapse:collapse;margin-top:14px;min-width:720px}
.table-scroll{overflow-x:auto}
.board th{text-align:left;border-bottom:1px solid var(--line-2)}
.board th button{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px 8px 10px 0}
.board th button:hover{color:#fff}
.board th button::after{content:" ↕";color:var(--dim-2)}
.board td{padding:26px 0;color:var(--dim-2);font-size:.86rem;text-align:center;font-style:italic;font-family:var(--serif);font-size:1.05rem}

/* Exchange */
.ticker{border-block:1px solid rgba(217,180,106,.24);background:rgba(12,10,6,.9);overflow:hidden;padding:11px 0;margin-bottom:clamp(60px,9vh,110px)}
.ticker-track{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.ticker span{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.ticker span::before{content:"◆ ";color:var(--gold-deep)}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);color:var(--dim);transition:all .3s}
.tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold-2);background:rgba(217,180,106,.08)}
.ex-empty{padding:40px 24px;text-align:center;border:1px dashed var(--line-2);color:var(--dim);font-family:var(--serif);font-size:1.2rem;font-style:italic}
.book-side{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding:12px 0}
.book-side span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.book-side em{font-family:var(--serif);font-size:1rem;color:var(--dim-2)}
.layers{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.layers button{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--line);color:var(--dim-2);cursor:not-allowed}
.heat{display:grid;grid-template-columns:44px repeat(6,1fr);gap:3px;font-family:var(--mono);font-size:.56rem;color:var(--dim-2)}
.heat .ax{display:flex;align-items:center;justify-content:center}
.heat .cell{aspect-ratio:1.6;border:1px solid var(--line);background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 3px,transparent 3px 7px)}
.heat .corner{font-size:.5rem;letter-spacing:.1em;color:var(--gold)}
.pipeline{list-style:none;display:grid;gap:0;margin:14px 0;counter-reset:p}
.pipeline li{position:relative;padding:8px 0 8px 30px;font-size:.86rem;color:var(--dim);counter-increment:p;border-left:1px solid var(--line-2);margin-left:8px}
.pipeline li::before{content:"";position:absolute;left:-4px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--stone-2);border:1px solid var(--gold-deep)}
.pipeline li.flow::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.pipeline li.flow{color:#fff}
.error-demo{border:1px solid rgba(255,106,61,.35);background:rgba(255,106,61,.05);padding:14px 16px}
.error-demo .mono{color:var(--ember);font-size:.72rem;letter-spacing:.2em;margin-bottom:6px}
.compose{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0}
.compose span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line-2);color:var(--silver)}
.compose i{font-style:normal;color:var(--gold);font-family:var(--mono)}
.compose .compiled{border-color:var(--gold);color:var(--gold-2);background:rgba(217,180,106,.08)}

/* Founders: stone cards */
.stones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;perspective:1200px}
@media (max-width:1020px){.stones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.stones{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.stone{position:relative;aspect-ratio:.63;border-radius:10px;padding:16px 14px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(140% 90% at 20% 0%,rgba(255,255,255,.07),transparent 50%),
    radial-gradient(90% 60% at 80% 100%,rgba(52,211,154,.06),transparent 60%),
    linear-gradient(155deg,#1b1b20 0%,#0c0c0f 45%,#131317 70%,#08080a 100%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 50px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6);
  transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s;overflow:hidden;cursor:pointer}
.stone::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .8 0 0 0 0 .85 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:cover}
.stone:hover{box-shadow:0 40px 70px -24px rgba(0,0,0,1),0 0 0 1px rgba(217,180,106,.25),inset 0 1px 0 rgba(255,255,255,.1)}
.stone .gem{position:absolute;top:16px;right:14px;width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,#a8ffe0,var(--emerald) 50%,#0b6b4a);box-shadow:0 0 12px rgba(52,211,154,.6)}
.stone .num{font-family:var(--mono);font-size:.56rem;letter-spacing:.3em;color:var(--dim-2);text-transform:uppercase}
.stone .engrave{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:#2a2a31;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 -1px 0 rgba(0,0,0,.8);transition:color .8s,text-shadow .8s}
.stone:hover .engrave,.stone:focus-visible .engrave{color:var(--gold-2);text-shadow:0 0 18px rgba(243,214,147,.6),0 1px 0 rgba(0,0,0,.6)}
.stone .meta{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);line-height:1.7}
.stone .seat{display:inline-block;margin-top:8px;color:var(--emerald);border:1px solid rgba(52,211,154,.35);padding:3px 7px;border-radius:20px}
.stone .seat.taken{color:var(--gold-2);border-color:rgba(217,180,106,.45)}
.stone .mark{position:absolute;left:14px;bottom:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,180,106,.4),transparent)}

/* Membership ladder */
.ladder{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
@media (max-width:1020px){.ladder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.ladder{grid-template-columns:1fr 1fr}.rung{min-height:0}}
.rung{border:1px solid var(--line);padding:18px 16px;background:rgba(14,14,18,.85);min-height:calc(150px + var(--i,0) * 16px);display:flex;flex-direction:column;gap:8px}
.rung .rn{font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;color:var(--dim-2)}
.rung h3{font-size:1.25rem;margin:0}
.rung .rp{font-family:var(--serif);font-size:1.7rem;color:#fff;line-height:1}
.rung .rp small{font-family:var(--mono);font-size:.56rem;color:var(--dim);letter-spacing:.1em}
.rung .rp.tbd{font-size:.95rem;font-style:italic;color:var(--dim)}
.rung p{font-size:.8rem;color:var(--dim)}
.rung.featured{border-color:var(--gold);background:linear-gradient(170deg,rgba(40,33,20,.9),rgba(12,11,9,.92));box-shadow:0 0 40px -10px rgba(217,180,106,.35)}
.rung .gift{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);border-top:1px dashed rgba(217,180,106,.35);padding-top:8px;margin-top:auto}
.badges div{border-top:1px solid var(--line-2);padding-top:14px}
.badges b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500}
.badges span{font-size:.84rem;color:var(--dim)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* Archive */
.chamber-archive{background:linear-gradient(to bottom,rgba(5,5,6,.96),rgba(12,12,14,.94),rgba(5,5,6,.96))}
.archive{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;min-height:360px;border:1px solid var(--line)}
.archive-col{display:flex;flex-direction:column;justify-content:space-around;padding:30px 20px;border-right:1px solid var(--line);position:relative}
.archive-col:last-of-type{border-right:0}
.archive-col span{position:relative;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);padding:14px 0 14px 18px}
.archive-col span::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(217,180,106,.7),transparent);animation:lineGlow 5s ease-in-out infinite;animation-delay:calc(var(--k,0) * .6s)}
@keyframes lineGlow{50%{opacity:.2}}
.archive-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);color:#fff;text-align:center;
  background:radial-gradient(closest-side,rgba(5,5,6,.95),rgba(5,5,6,.6),transparent);padding:30px 50px;white-space:nowrap}
@media (max-width:680px){.archive{grid-template-columns:1fr}.archive-col{border-right:0;border-bottom:1px solid var(--line)}.archive-empty{position:static;transform:none;white-space:normal;padding:26px 18px}}

/* Loop */
.loop svg{width:100%;height:auto;overflow:visible}
.loop text{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;fill:var(--dim);text-transform:uppercase}
.loop .hub{font-family:var(--serif);font-size:30px;fill:#fff;letter-spacing:0}
.moat dl{display:grid;gap:0;margin-top:14px}
.moat div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.moat dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.moat dd{color:var(--dim);font-size:.9rem}
@media (max-width:480px){.moat div{grid-template-columns:1fr;gap:2px}}

/* Legal */
.legal{padding:60px 0 90px;border-top:1px solid var(--line);background:#040405}
.legal p{color:var(--dim-2);font-size:.8rem;max-width:90ch;margin-bottom:10px}
.legal .shield{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.foot-links{margin-top:22px}
.foot-links a{color:var(--dim);text-decoration:none}
.foot-links a:hover{color:#fff}

/* ── HUD ────────────────────────────────────────────────── */
.sound{position:fixed;left:16px;bottom:16px;z-index:55;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:30px;background:rgba(5,5,6,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.sound svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.sound[aria-pressed="true"]{color:var(--gold-2);border-color:rgba(217,180,106,.5)}
@media (max-width:600px){.sound{padding:10px;left:12px;bottom:12px}.sound span{display:none}.sound svg{width:15px;height:15px}}
.sound[aria-pressed="true"] svg{fill:rgba(243,214,147,.25)}
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:12px}
.rail a{position:relative;display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--line-2);transition:all .3s}
.rail a.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold)}
.rail a span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.rail a:hover span,.rail a.on span{opacity:1}
.rail a.on span{color:var(--gold)}
@media (max-width:760px){.rail{display:none}}

/* ── Founder Room ───────────────────────────────────────── */
.room{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(2,2,3,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:16px}
.room[hidden]{display:none}
.room-stone{position:absolute;width:min(360px,70vw);aspect-ratio:.63;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(155deg,#1d1d22,#0a0a0c 50%,#141418);box-shadow:0 60px 120px -30px #000,inset 0 1px 0 rgba(255,255,255,.08);
  animation:stoneIn 1s var(--ease) both}
.room-engrave{font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.06em;color:#26262c;text-shadow:0 1px 0 rgba(255,255,255,.07)}
.room.lit .room-engrave{animation:engrave 1.1s ease forwards}
.room.resolved .room-stone{animation:stoneOut .9s var(--ease) forwards}
@keyframes stoneIn{from{opacity:0;transform:scale(.8) rotateX(30deg)}to{opacity:1;transform:none}}
@keyframes engrave{to{color:var(--gold-2);text-shadow:0 0 30px rgba(243,214,147,.8),0 0 60px rgba(217,180,106,.4)}}
@keyframes stoneOut{to{opacity:0;transform:scale(1.6) translateZ(200px);filter:blur(6px)}}
.room-panel{position:relative;width:min(640px,100%);max-height:88vh;overflow:auto;padding:34px 30px;border:1px solid var(--line-2);background:linear-gradient(170deg,#101014,#070708);
  opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.room.open .room-panel{opacity:1;transform:none;pointer-events:auto}
.room-panel h2{font-size:clamp(2rem,5vw,3rem);margin:8px 0 18px}
.room-close{position:absolute;top:12px;right:16px;font-size:1.6rem;color:var(--dim);line-height:1;padding:6px}
.room-close:hover{color:#fff}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.room-grid div{border:1px solid var(--line);padding:12px}
.room-grid b{display:block;font-family:var(--serif);font-size:1.6rem;line-height:1.1}
.room-grid span{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}

/* Fallback art helpers */
.fallback-note{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.18);pointer-events:none}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #grain,.marquee-track,.ticker-track,.rays,.embers,.files span,.descend svg,.vr-dot,.archive-col span::before{animation:none!important}
  .files span{opacity:.7}
  .reveal{opacity:1;transform:none;transition:none}
  .portal{height:auto}
  .stage{position:relative;height:100vh}
  .portal-copy{opacity:1!important;transform:none!important}
  .portal-tunnel.shake .stage{animation:none}
}

/* Lite mode (weak machines / slow frames): drop the costliest compositing effects */
.lite #grain,.lite .rays{display:none}
.lite .vidette-ribbon,.lite .sound,.lite .room{backdrop-filter:none;-webkit-backdrop-filter:none}
.lite .marquee-track,.lite .ticker-track{animation-duration:90s}