/* =====================================================================
   PROVING GROUND — design system
   Art direction: financial broadsheet × trading terminal
   Type: Fraunces (display) · IBM Plex Sans (text) · IBM Plex Mono (data)
   ===================================================================== */

/* ---- fonts ---------------------------------------------------------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mono";src:url("../fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Mono";src:url("../fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---- tokens --------------------------------------------------------- */
:root{
  /* Re-skin: neon lime-green + black + off-white (Robinhood-grade fintech).
     Lime #CCFF00 is the brand accent; it carries the identity on black
     surfaces. On off-white, --signal is a darkened lime that stays AA-legible;
     --signal-bright is the neon used on dark data panels, tapes and meters. */
  --paper:#f3f3ec;
  --paper-2:#ebebe2;
  --paper-3:#e2e2d7;
  --ink:#0a0a08;
  --ink-2:#121210;
  --ink-3:#1c1c19;
  --muted:#67675d;
  --muted-2:#8a8a7f;
  --line:#dadace;
  --line-2:#c9c9bb;
  --line-dark:rgba(240,240,232,.12);
  --line-dark-2:rgba(240,240,232,.2);
  --lime:#CCFF00;          /* brand neon — sampled from the mark */
  --signal:#577700;        /* darkened lime — AA-legible on off-white */
  --signal-bright:#CCFF00;  /* neon lime on dark data panels */
  --burn:#c43a21;          /* vermilion — burn / deflation / down */
  --burn-bright:#f0603f;
  --paper-on-ink:#f0f0e8;
  --mute-on-ink:#908f84;

  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
  --radius:3px;

  --f-disp:"Fraunces",Georgia,serif;
  --f-text:"Plex","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Mono","SFMono-Regular",Menlo,monospace;
}

/* ---- reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.62;
  font-weight:400;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#c2c2b4;border:3px solid var(--paper-2)}

/* ---- layout helpers ------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sect{padding-block:clamp(72px,10vw,140px)}
.sect-tight{padding-block:clamp(52px,7vw,96px)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.ink{background:var(--ink);color:var(--paper-on-ink)}
.ink .rule{background:var(--line-dark)}
.ink-2{background:var(--ink-2);color:var(--paper-on-ink)}

/* mono label / eyebrow */
.kick{font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ink .kick,.ink-2 .kick{color:var(--mute-on-ink)}
.kick-sig{color:var(--signal)}
.ink .kick-sig{color:var(--signal-bright)}

/* numeric */
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}

/* display type */
.disp{font-family:var(--f-disp);font-weight:900;line-height:.92;
  letter-spacing:-.022em}
.disp-l{font-family:var(--f-disp);font-weight:600;line-height:1.0;
  letter-spacing:-.018em}
.serif-it{font-family:var(--f-disp);font-style:italic;font-weight:400}

/* ---- buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-mono);font-size:.82rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.82em 1.25em;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:var(--paper);transition:transform .14s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sig{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}
.btn--sig:hover{background:#d8ff33;border-color:#d8ff33;box-shadow:0 0 0 3px rgba(204,255,0,.22)}
.ink .btn,.ink-2 .btn{background:var(--paper-on-ink);border-color:var(--paper-on-ink);color:var(--ink)}
.ink .btn:hover,.ink-2 .btn:hover{background:#fff}
.ink .btn--ghost,.ink-2 .btn--ghost{background:transparent;color:var(--paper-on-ink);border-color:var(--line-dark-2)}
.ink .btn--ghost:hover{background:var(--paper-on-ink);color:var(--ink)}
.btn--sm{padding:.55em .9em;font-size:.74rem}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{transform:none}

.lnk{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:.45em;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:gap .16s ease,opacity .16s ease}
.lnk:hover{gap:.75em}
.lnk .arw{transition:transform .16s ease}
.lnk:hover .arw{transform:translateX(3px)}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  padding:.34em .62em;border:1px solid var(--line);border-radius:100px;color:var(--muted)}
.ink .pill,.ink-2 .pill{border-color:var(--line-dark-2);color:var(--mute-on-ink)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.pill--live .dot{background:var(--signal-bright);box-shadow:0 0 0 0 rgba(204,255,0,.6);animation:pulse 2.4s infinite}
.pill--open{color:var(--signal)}.pill--open .dot{background:var(--signal)}
.pill--won{color:var(--ink);background:var(--signal);border-color:var(--signal)}.pill--won .dot{background:var(--ink)}
.pill--grading{color:#9a7b16}.pill--grading .dot{background:#c79a1e}
.pill--paid{color:var(--muted)}.pill--paid .dot{background:var(--muted-2)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(204,255,0,.55)}70%{box-shadow:0 0 0 7px rgba(204,255,0,0)}100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}}

/* ---- nav ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:60;background:rgba(242,237,226,.82);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:1.4rem;height:62px;
  max-width:1480px;margin:0 auto;padding-inline:var(--gut);position:relative}
.brandmark{display:flex;align-items:baseline;gap:.5ch;font-family:var(--f-disp);
  font-weight:900;font-size:1.22rem;letter-spacing:-.02em}
.brandmark .tk{font-family:var(--f-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.06em;color:var(--signal);transform:translateY(-.55em);
  border:1px solid var(--signal);border-radius:3px;padding:.1em .3em}
/* centered nav: brand stays left, actions right, links optically centered */
.nav__links{display:flex;gap:1.2rem;margin:0;white-space:nowrap;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav__links a{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.01em;color:var(--muted);transition:color .15s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.nav__burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);align-items:center;justify-content:center}
.nav__burger span{width:16px;height:1.5px;background:var(--ink);position:relative;display:block}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
.nav__burger span::before{top:-5px}.nav__burger span::after{top:5px}

/* ---- ticker tape ---------------------------------------------------- */
.tape{overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  background:var(--ink);color:var(--paper-on-ink);padding-block:.7rem}
/* seamless loop: content is rendered twice; spacing lives on each item (not a
   flex gap) so ONE copy is exactly 50% of the track and translateX(-50%)
   lands the second copy flush where the first began — no seam, no jump */
.tape__row{display:flex;gap:0;width:max-content;will-change:transform;animation:tape 48s linear infinite}
.tape:hover .tape__row{animation-play-state:paused}
.tape__it{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);
  font-size:.82rem;letter-spacing:.01em;white-space:nowrap}
.tape__it .sym{font-weight:600}
.tape__it .up{color:var(--signal-bright)}
.tape__it .dn{color:var(--burn-bright)}
.tape__it .sep{color:var(--line-dark-2)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape__it{margin-right:2.6rem}
@media (prefers-reduced-motion:reduce){.tape__row{animation:none}}

/* ---- tables (broadsheet listings) ----------------------------------- */
.ledger{width:100%;border-collapse:collapse;font-size:.95rem}
.ledger thead th{font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:0 1rem .7rem;border-bottom:1px solid var(--ink);white-space:nowrap}
.ledger tbody td{padding:1.05rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.ledger tbody tr:hover{background:var(--paper-2)}
.ledger .r{text-align:right}
.ink .ledger thead th{color:var(--mute-on-ink);border-bottom-color:var(--line-dark-2)}
.ink .ledger tbody td{border-bottom-color:var(--line-dark)}
.ink .ledger tbody tr:hover{background:var(--ink-3)}
.ledger .big{font-family:var(--f-disp);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.ledger .sub{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.ink .ledger .sub{color:var(--mute-on-ink)}

/* ---- panels / cards ------------------------------------------------- */
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.ink .panel,.ink-2 .panel{border-color:var(--line-dark-2);background:var(--ink-2)}

/* code / terminal */
.term{font-family:var(--f-mono);font-size:.82rem;line-height:1.7;
  background:#0a0a08;color:#d7d7cc;border:1px solid var(--line-dark-2);
  border-radius:var(--radius);overflow:hidden}
.term__bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--line-dark);color:var(--mute-on-ink);font-size:.72rem;letter-spacing:.08em}
.term__bar .d{width:9px;height:9px;border-radius:50%;background:#3a352b}
.term__body{padding:1.1rem .95rem;overflow-x:auto;white-space:pre;scrollbar-width:thin;scrollbar-color:#2c2c24 #0a0a08}
.term__body::-webkit-scrollbar{height:9px;width:9px}
.term__body::-webkit-scrollbar-track{background:#0a0a08}
.term__body::-webkit-scrollbar-thumb{background:#2c2c24;border:2px solid #0a0a08;border-radius:6px}
.term__body::-webkit-scrollbar-thumb:hover{background:#3a3a30}
.term .c-cmt{color:#6f6f64}.term .c-kw{color:#f0603f}.term .c-str{color:#CCFF00}
.term .c-fn{color:#e7c35a}.term .c-pr{color:#7fb0d8}.term .c-num{color:#CCFF00}

/* grain overlay */
.grain::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

/* reveal — only hide when JS is confirmed present (html.js), so content
   is fully visible with JS off or if the observer never fires */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---- footer --------------------------------------------------------- */
.foot{background:var(--ink);color:var(--paper-on-ink)}
.foot a{color:var(--mute-on-ink);transition:color .15s}
.foot a:hover{color:var(--paper-on-ink)}
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}
.foot__cols h5{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute-on-ink);margin-bottom:1rem}
.foot__cols li{margin-bottom:.6rem;font-size:.92rem}
.foot__note{font-family:var(--f-mono);font-size:.74rem;color:var(--mute-on-ink);line-height:1.7}

/* ---- utility -------------------------------------------------------- */
.mw-62{max-width:62ch}.mw-50{max-width:50ch}.mw-44{max-width:44ch}.mw-34{max-width:34ch}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}.mt-6{margin-top:3.6rem}
.flex{display:flex}.ai-c{align-items:center}.jc-sb{justify-content:space-between}.gap-1{gap:.6rem}.gap-2{gap:1rem}.gap-3{gap:1.6rem}.wrapf{flex-wrap:wrap}
.sig{color:var(--signal)}.ink .sig,.ink-2 .sig{color:var(--signal-bright)}
.brn{color:var(--burn)}.ink .brn,.ink-2 .brn{color:var(--burn-bright)}
.mut{color:var(--muted)}.ink .mut,.ink-2 .mut{color:var(--mute-on-ink)}

/* ---- responsive ----------------------------------------------------- */
/* centered nav collapses to the burger earlier so the 8 links never crowd
   the wordmark/actions at tablet widths */
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  #pg-ident{display:none}
}
.nav__right .btn{white-space:nowrap}
#pg-ident{white-space:nowrap}
@media (max-width:860px){
  .foot__cols{grid-template-columns:1fr 1fr;gap:1.8rem}
  body{font-size:16px}
  .ledger{font-size:.86rem}
  .ledger thead th,.ledger tbody td{padding-left:.6rem;padding-right:.6rem}
}
@media (max-width:560px){
  .foot__cols{grid-template-columns:1fr}
  .hide-sm{display:none}
}

/* mobile nav drawer */
.drawer{position:fixed;inset:0;z-index:70;background:var(--paper);transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:var(--gut)}
.drawer.open{transform:none}
.drawer a{font-family:var(--f-disp);font-weight:600;font-size:1.8rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.drawer .x{align-self:flex-end;font-family:var(--f-mono);font-size:.9rem;margin-bottom:1rem}

.sig-stock{color:var(--signal-bright);text-shadow:.5px 0 0 #0a0a08,-.5px 0 0 #0a0a08,0 .5px 0 #0a0a08,0 -.5px 0 #0a0a08,.5px .5px 0 #0a0a08,-.5px -.5px 0 #0a0a08,.5px -.5px 0 #0a0a08,-.5px .5px 0 #0a0a08}

.brandmark__logo{height:26px;width:26px;border-radius:6px;vertical-align:middle;display:block}

/* Hero with the brand banner as background + centered text */
.hero--bg{position:relative;background:#0a0a08 url('/assets/img/og2.png') center/cover no-repeat;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.hero--bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,8,.48),rgba(10,10,8,.7));z-index:0}
.hero--bg .wrap{position:relative;z-index:1}
.hero__center{max-width:760px;margin:0 auto;text-align:center;padding:clamp(2.2rem,6vw,4.8rem) 0}
.hero--bg .hero__h--sm,.hero--bg .hero__h--sm .it{color:#f5f5ee}
.hero--bg .hero__deck{color:#dad9ce;margin:1rem auto 0;max-width:620px}
.hero--bg .hero__cta{justify-content:center}
.hero--bg .btn--ghost{color:#f3f3ec;border-color:rgba(243,243,236,.45)}
.hero--bg .btn--ghost:hover{border-color:#f3f3ec}

/* Arena: status segment + live activity feed */
.bseg{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--paper)}
.bseg__b{font-family:var(--f-mono);font-size:.74rem;padding:.35rem .8rem;border:0;background:none;cursor:pointer;color:var(--muted)}
.bseg__b.on{background:var(--ink);color:var(--paper)}
.feedbox{border:1px solid var(--line);border-radius:12px;margin-top:1.2rem;overflow:hidden;background:var(--paper-2,#efeadf)}
.feedbox__h{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feedbox__body{max-height:480px;overflow-y:auto;padding:.2rem .1rem}
.feed-row{display:flex;align-items:baseline;gap:.4rem;flex-wrap:nowrap;white-space:nowrap;padding:.5rem .9rem;font-family:var(--f-mono);font-size:.8rem;border-bottom:1px solid var(--line)}
.feed-row>b{flex:none}
.feed-row:last-child{border-bottom:0}
.feed-b{color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-ago{flex:none;color:var(--muted);font-size:.72rem;padding-left:.4rem}
.feed-empty{font-family:var(--f-mono);font-size:.82rem;color:var(--muted);padding:1rem .9rem;margin:0}
.lb-row{display:flex;align-items:baseline;gap:.55rem;padding:.5rem .9rem;font-family:var(--f-mono);font-size:.82rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.lb-row:last-child{border-bottom:0}
.lb-row .lb-rank{color:var(--muted);font-size:.72rem;flex:none}
.lb-row b{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .lb-stat{margin-left:auto;color:var(--muted);font-size:.72rem;white-space:nowrap;flex:none}
.lb-row:hover b{color:var(--signal)}

/* Arena two-column: bounties left (full), stats + activity right */
.arena-layout{display:grid;grid-template-columns:1fr clamp(260px,24vw,320px);gap:clamp(1rem,2.4vw,2rem);align-items:start;margin-top:1.4rem}
.arena-main{min-width:0}
.arena-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:1.1rem}
@media (max-width:900px){.arena-layout{grid-template-columns:1fr}.arena-side{position:static}}
.statbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2,#efeadf)}
.statbox__h{padding:.6rem .9rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.statbox__row{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem .9rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.82rem}
.statbox__row:last-child{border-bottom:0}
.statbox__row span{color:var(--muted)}
.statbox__row b{font-family:var(--f-disp);font-weight:700;font-size:1.05rem}

/* Beta banner (free-entry phase, before token launch) */
.beta-bar{position:relative;z-index:60;background:var(--signal-bright,#CCFF00);color:#0a0a08;font-family:var(--f-mono);font-size:.78rem;line-height:1.4;padding:.5rem var(--gut,16px);display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;border-bottom:1px solid #0a0a08}
.beta-bar b{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.beta-bar a{color:#0a0a08;font-weight:600;border-bottom:1px solid currentColor;text-decoration:none;white-space:nowrap}