/* DELTA NEUTRAL — site styles. Direction: "Brutal" — an exchange poster.
   Cream paper, black ink, 3px rules, hard offset shadows, one acid accent.
   No gradients, no glow, no rounded corners.

   Tiers are told apart by LIGHTNESS, not hue, so they survive colour
   blindness and greyscale:
     Perfectly Neutral  acid     (lightest, the only colour on the page)
     Slightly Skewed    white
     Directional Drift  grey
     Rogue Position     black    (darkest)
   Each .t-* class sets --tc (fill) and --tx (text on that fill). Tier
   colour is only ever used as a FILL with --tx on top, never as text.
   Long vs short: black block vs white block, plus ▲ / ▼.
   Matches src/card.js and og.png. */

:root{
  --bg: #F3F1EA;
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --acid: #D4FF3F;
  --grey: #BDB8AC;
  --dim: #3F3C36;
  --mute: #6A665C;
  --rule: 3px;
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --mono: 'Space Mono', ui-monospace, Consolas, monospace;

  /* legacy names still referenced from markup */
  --text: var(--ink);
  --line: var(--ink);
  --long: var(--ink);
  --short: var(--ink);
  --pn: var(--acid);
  --ss: var(--paper);
  --dd: var(--grey);
  --rg: var(--ink);
}

*{ box-sizing: border-box; }
/* [hidden] must win over component display rules (.btn is inline-flex) */
[hidden]{ display: none !important; }
html{ -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--mono); min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: clip;
}
::selection{ background: var(--acid); color: var(--ink); }
a{ color: inherit; }
:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--acid); }
main{ flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px 80px; }
h1, h2, h3{ font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.mono{ font-family: var(--mono); }

/* --- tiers -------------------------------------------------------------- */
.t-perfectly-neutral{ --tc: var(--acid);  --tx: var(--ink); }
.t-slightly-skewed{   --tc: var(--paper); --tx: var(--ink); }
.t-directional-drift{ --tc: var(--grey);  --tx: var(--ink); }
.t-rogue-position{    --tc: var(--ink);   --tx: var(--paper); }

.tag, .chip{
  display: inline-block; white-space: nowrap; font-family: var(--mono); font-weight: 700;
  background: var(--tc, var(--paper)); color: var(--tx, var(--ink)); border: 2px solid var(--ink);
}
.tag{ font-size: 11px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; }
.chip{ padding: 0 8px; }
.long, .short{ font-weight: 700; }
.long::after{ content: ' ▲'; font-size: .8em; }
.short::after{ content: ' ▼'; font-size: .8em; }
.holder-link{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.holder-link:hover{ background: var(--acid); }

/* --- top bar --------------------------------------------------------------- */
.topbar{
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: var(--paper); border-bottom: var(--rule) solid var(--ink);
  position: sticky; top: 0; z-index: 20;
}
.logo{ display: inline-flex; align-items: center; gap: 0; text-decoration: none; font: 400 20px var(--display); white-space: nowrap; }
.logo b{ display: grid; place-items: center; width: 38px; height: 38px; background: var(--acid); border: var(--rule) solid var(--ink); font-weight: 400; }
.logo span{ display: grid; place-items: center; height: 38px; padding: 0 12px; background: var(--ink); color: var(--paper); border: var(--rule) solid var(--ink); border-left: 0; }
.nav{ display: flex; gap: 8px; margin-left: auto; }
.nav a{
  text-decoration: none; font: 700 13px var(--mono); padding: 7px 12px; text-transform: uppercase;
  border: var(--rule) solid var(--ink); background: var(--paper);
}
.nav a:hover{ background: var(--bg); }
.nav a[aria-current="page"]{ background: var(--acid); }
@media (max-width: 640px){
  /* four links: they get their own full-width row under the logo */
  .topbar{ flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .nav{ width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nav a{ padding: 7px 0; font-size: 10px; letter-spacing: -.3px; text-align: center; border-width: 2px; }
}

/* --- ticker: black tape --------------------------------------------------- */
.ticker{ overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--paper); font: 700 12px var(--mono); border-bottom: var(--rule) solid var(--ink); }
.ticker > span{ display: inline-block; padding: 9px 16px; }
.ticker-track{ display: inline-flex; animation: tape 45s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes tape{ to{ transform: translateX(-50%); } }
.ticker-track > div > span{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-right: 2px solid #333; text-transform: uppercase; }
.ticker b{ font-weight: 700; }
.ticker .tnum{ background: var(--tc, var(--paper)); color: var(--tx, var(--ink)); padding: 0 6px; border: 1px solid var(--paper); }
.ticker .tpct{ color: #9A968C; font-weight: 400; }
.ticker .dot{ display: inline-block; width: 9px; height: 9px; background: #555; margin-right: 2px; }
.ticker .dot.live{ background: var(--acid); animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink{ 50%{ opacity: .15; } }

/* --- panels ------------------------------------------------------------------ */
.panel{ background: var(--paper); border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.panel-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: var(--rule) solid var(--ink); flex-wrap: wrap; }
.panel-h h2{ margin: 0; font-size: 22px; line-height: 1.1; }
.panel-h .meta, .panel-h > span{ font: 700 12px var(--mono) !important; color: var(--mute) !important; text-transform: uppercase; }
.panel-b{ padding: 18px; }
section{ margin-top: 32px; }

/* --- buttons & inputs ------------------------------------------------------ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 700 14px var(--mono); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: 12px 20px; color: var(--paper); background: var(--ink); border: var(--rule) solid var(--ink);
  box-shadow: 5px 5px 0 var(--acid), 5px 5px 0 var(--rule) var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover{ transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--acid), 7px 7px 0 var(--rule) var(--ink); }
.btn:active{ transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--acid), 1px 1px 0 var(--rule) var(--ink); }
.btn.ghost{ color: var(--ink); background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost:hover{ background: var(--acid); box-shadow: 6px 6px 0 var(--ink); }
.btn.ghost:active{ box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled{ opacity: .6; cursor: progress; transform: none; }

.lookup{ display: flex; flex-wrap: wrap; gap: 12px; max-width: 640px; }
.lookup input{
  flex: 1 1 260px; min-width: 0; height: 56px; padding: 0 16px; font: 16px var(--mono); color: var(--ink);
  background: var(--paper); border: var(--rule) solid var(--ink); border-radius: 0; outline: none;
}
.lookup input::placeholder{ color: var(--mute); }
.lookup input:focus{ box-shadow: 5px 5px 0 var(--acid), 5px 5px 0 var(--rule) var(--ink); }
.lookup input[aria-invalid="true"]{ background: #FFE9E4; }
.lookup .btn{ height: 56px; }
.hint{ font: 13px var(--mono); color: var(--mute); margin-top: 12px; min-height: 18px; }
.hint.err{ color: var(--ink); background: var(--acid); display: inline-block; padding: 2px 6px; font-weight: 700; }

/* --- home: hero -------------------------------------------------------------- */
.hero{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; margin-top: 44px; }
.pill{ display: inline-block; padding: 5px 10px; font: 700 12px var(--mono); text-transform: uppercase; background: var(--ink); color: var(--paper); }
.pill i{ display: none; }
.hero h1{ font-size: clamp(44px, 7.4vw, 96px); line-height: .92; letter-spacing: -2px; margin: 18px 0 26px; }
.hero h1 em{ display: inline-block; font-style: normal; line-height: .95; margin-top: 10px; padding: 6px 12px 2px; background: var(--acid); border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.hero p.lede{ font-size: 18px; line-height: 1.5; max-width: 34em; margin: 0 0 26px; }

.stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; max-width: 640px; }
.stats div{ background: var(--tc, var(--paper)); color: var(--tx, var(--ink)); border: var(--rule) solid var(--ink); padding: 10px 12px; }
.stats dt{ font: 700 11px var(--mono); text-transform: uppercase; }
.stats dd{ margin: 2px 0 0; font: 400 32px/1.1 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 560px){ .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* three latest cards, stacked like dropped posters */
.stack{ position: relative; width: min(100%, 420px); aspect-ratio: 800 / 1000; margin: 8px auto 0; }
.stack .c{ position: absolute; inset: 0; display: block; transition: transform .25s cubic-bezier(.3,.7,.2,1); box-shadow: 10px 10px 0 var(--ink); }
.stack .c svg{ width: 100%; height: 100%; display: block; }
.stack .c1{ z-index: 3; transform: rotate(-1.5deg); }
.stack .c2{ z-index: 2; transform: translate(-9%, 3%) rotate(-7deg) scale(.94); }
.stack .c3{ z-index: 1; transform: translate(9%, 4%) rotate(6deg) scale(.94); }
.stack:hover .c1{ transform: rotate(0deg) translateY(-6px); }
.stack:hover .c2{ transform: translate(-22%, 2%) rotate(-11deg) scale(.92); }
.stack:hover .c3{ transform: translate(22%, 3%) rotate(10deg) scale(.92); }
.stack-cap{ font: 700 12px var(--mono); text-transform: uppercase; text-align: center; margin-top: 26px; }
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 20px; }
  .stack{ width: min(74%, 360px); }
}

/* how it works */
.steps{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step{ padding: 20px; }
.step svg{ display: none; }
.step .n{ display: inline-block; font: 400 26px/1 var(--display); background: var(--acid); border: var(--rule) solid var(--ink); padding: 6px 10px; }
.step h3{ margin: 14px 0 8px; font-size: 24px; line-height: 1; }
.step p{ margin: 0; font-size: 14.5px; }
.step code{ display: inline-block; margin: 2px 0 4px; font: 700 13px var(--mono); background: var(--ink); color: var(--paper); padding: 2px 6px; }
@media (max-width: 860px){ .steps{ grid-template-columns: 1fr; } }

/* poster band: a tilted strip of big type running across the page */
.band{
  margin: 44px calc(50% - 50vw) 8px; transform: rotate(-1.2deg);
  background: var(--ink); color: var(--acid); border-block: var(--rule) solid var(--ink);
  overflow: hidden; white-space: nowrap;
}
.band-track{ display: inline-flex; animation: tape 30s linear infinite; }
.band-track > div{ display: inline-flex; }
.band span{ font: 400 clamp(26px, 4vw, 44px)/1 var(--display); padding: 16px 28px; }
.band span:nth-child(even){ color: var(--paper); }

.more-row{ padding: 16px; text-align: center; border-top: var(--rule) solid var(--ink); background: var(--bg); }

/* --- tables ---------------------------------------------------------------------- */
.table-wrap{ overflow-x: auto; }
table{ width: 100%; border-collapse: collapse; font: 14px var(--mono); }
th{ text-align: left; font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 10px 16px; border-bottom: var(--rule) solid var(--ink); white-space: nowrap; background: var(--bg); }
td{ padding: 12px 16px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
tbody tr{ cursor: pointer; }
tbody tr:hover td{ background: var(--bg); }
tbody tr:last-child td{ border-bottom: 0; }
td.num, th.num{ text-align: right; font-variant-numeric: tabular-nums; }
tr[data-href]{ cursor: pointer; }
td a{ font-weight: 700; }

/* score meter: the card's tier-zone ruler in miniature, same zone edges */
.score-cell{ display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; font: 400 18px var(--display); }
.meter{
  position: relative; width: 96px; height: 14px; border: 2px solid var(--ink);
  background: linear-gradient(90deg,
    var(--ink) 0 19.5%, var(--grey) 19.5% 34.5%, var(--paper) 34.5% 47.5%, var(--acid) 47.5% 52.5%,
    var(--paper) 52.5% 65.5%, var(--grey) 65.5% 80.5%, var(--ink) 80.5% 100%);
}
.meter i{ position: absolute; top: -5px; bottom: -5px; width: 8px; margin-left: -3px; background: var(--acid); border: 2px solid var(--ink); }
@media (max-width: 720px){ .hide-sm{ display: none; } th, td{ padding-left: 10px; padding-right: 10px; } }

.empty{ padding: 44px 16px; text-align: center; font: 700 14px var(--mono); text-transform: uppercase; }

/* tier filter */
.filters{ display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: var(--rule) solid var(--ink); background: var(--bg); }
.filters button{
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 700 12px var(--mono); text-transform: uppercase; padding: 6px 10px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
}
.filters button[data-tier]:not([data-tier=""])::before{ content: ''; width: 10px; height: 10px; background: var(--tc); border: 2px solid var(--ink); }
.filters button em{ font-style: normal; opacity: .7; }
.filters button:hover{ box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.filters button[aria-pressed="true"]{ background: var(--tc, var(--ink)); color: var(--tx, var(--paper)); box-shadow: 3px 3px 0 var(--ink); }
.filters button[aria-pressed="true"]::before{ border-color: currentColor; }

/* --- position page ------------------------------------------------------------------ */
.pos{ display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px; margin-top: 40px; align-items: start; }
@media (max-width: 920px){ .pos{ grid-template-columns: minmax(0, 1fr); } .card-wrap{ max-width: 480px; margin: 0 auto; width: 100%; } }
.card-wrap{ position: relative; }
.card-wrap svg, .hero-card svg{ width: 100%; height: auto; display: block; box-shadow: 10px 10px 0 var(--ink); }
.card-wrap.unverified svg{ opacity: .45; filter: grayscale(1); }
.card-wrap .stamp{ position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.card-wrap.unverified .stamp{ display: grid; }
.card-wrap .stamp span{ font: 400 30px var(--display); color: var(--ink); background: var(--acid); border: var(--rule) solid var(--ink); padding: 8px 18px; transform: rotate(-8deg); box-shadow: 6px 6px 0 var(--ink); }

.status{ display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font: 14px/1.5 var(--mono); margin-bottom: 18px; border: var(--rule) solid var(--ink); background: var(--paper); }
.status > span:first-child{ font-weight: 700; }
.status b{ text-transform: uppercase; }
.status.ok{ background: var(--acid); }
.status.warn{ background: var(--grey); }
.status.bad{ background: var(--ink); color: var(--paper); }

.legs{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.leg{ background: var(--ink); color: var(--paper); padding: 16px 18px; }
.leg.s{ background: var(--paper); color: var(--ink); border-left: var(--rule) solid var(--ink); text-align: right; }
.leg small{ font: 700 12px var(--mono); text-transform: uppercase; color: inherit !important; }
.leg small::after{ content: none; }
.leg strong{ display: block; font: 400 28px/1.05 var(--display); text-transform: uppercase; margin: 4px 0; }
.leg span{ font: 700 18px var(--mono); color: inherit !important; }
.leg span::after{ content: none; }
@media (max-width: 560px){
  .legs{ grid-template-columns: minmax(0, 1fr); }
  .leg.s{ border-left: 0; border-top: var(--rule) solid var(--ink); }
}

.kv{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule); background: var(--ink); border: var(--rule) solid var(--ink); margin: 20px 0; box-shadow: 6px 6px 0 var(--ink); }
.kv.kv-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv div{ background: var(--paper); padding: 12px 14px; }
.kv dt{ font: 700 11px var(--mono); text-transform: uppercase; color: var(--mute); }
.kv dd{ margin: 4px 0 0; font: 700 20px var(--mono); overflow: hidden; text-overflow: ellipsis; }
.kv dd .tag{ font-size: 10px; }
.kv dd small{ font-size: 12px; color: var(--mute); font-weight: 400; }
@media (max-width: 720px){ .kv.kv-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .kv{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.actions{ display: flex; flex-wrap: wrap; gap: 14px; }

/* the math: an equation of boxes */
.eq{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 4px; padding: 18px 16px 6px; }
.eq .term{ display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.eq .term b{ font: 400 22px/1 var(--display); padding: 7px 8px; border: var(--rule) solid var(--ink); background: var(--paper); font-weight: 400; }
.eq .term small{ font: 700 10px var(--mono); text-transform: uppercase; color: var(--mute); }
.eq .term.long-t b{ background: var(--ink); color: var(--paper); }
.eq .term.score-t b{ background: var(--tc, var(--acid)); color: var(--tx, var(--ink)); box-shadow: 4px 4px 0 var(--ink); }
.eq .op{ font: 400 22px/1 var(--display); padding: 10px 1px 0; }
.eq-note{ margin: 0; padding: 12px 16px 18px; font-size: 14px; line-height: 1.8; }

/* --- distribution ------------------------------------------------------------------------ */
.dist-row{ display: grid; grid-template-columns: 180px 1fr 140px; gap: 18px; align-items: center; padding: 16px; border-bottom: 2px solid var(--ink); }
.dist-row:last-child{ border-bottom: 0; }
.dist-row .bars{ position: relative; height: 34px; }
.dist-row .bar{ position: absolute; left: 0; top: 0; height: 24px; min-width: 4px; background: var(--tc); border: 2px solid var(--ink); transition: width .5s; }
.dist-row .exp{ position: absolute; top: -5px; width: 8px; height: 34px; background: var(--acid); border: 2px solid var(--ink); margin-left: -4px; }
.dist-row .exp::after{ content: 'TARGET'; position: absolute; top: 32px; left: -16px; font: 700 9px var(--mono); }
.dist-row .n{ text-align: right; font: 400 24px var(--display); }
.dist-row .n small{ display: block; font: 700 11px var(--mono); color: var(--mute); text-transform: uppercase; }
@media (max-width: 640px){ .dist-row{ grid-template-columns: minmax(0, 1fr) auto; gap: 12px; } .dist-row .bars{ grid-column: 1 / -1; order: 3; } .dist-row .n{ font-size: 20px; } }

/* histogram: exact odds of every score */
.hist-wrap{ padding: 18px 16px 4px; }
.hist{ width: 100%; height: auto; display: block; overflow: visible; }
.hist rect{ fill: var(--tc); stroke: var(--ink); stroke-width: 1.5; }
.hist rect:hover{ fill: var(--acid); }
.hist .axis, .hist line{ stroke: var(--ink); stroke-width: 3; }
.hist text{ font: 700 13px var(--mono); fill: var(--ink); }
.hist .wall{ font: 400 13px var(--display); }
.hist-note{ margin: 0; padding: 8px 16px 18px; font-size: 14px; line-height: 1.8; max-width: 70em; }
.hist-note b{ background: var(--acid); padding: 0 4px; }

.how{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.how h3{ margin: 0 0 10px; font-size: 20px; }
.how p, .how li{ font-size: 14px; }
.how code{ font: 700 13px var(--mono); background: var(--ink); color: var(--paper); padding: 2px 6px; }
.chips{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.chips li{ font: 700 12px var(--mono); text-transform: uppercase; border: 2px solid var(--ink); padding: 3px 8px; background: var(--bg); }
.mini{ width: 100%; font-size: 13px; }
.mini td, .mini th{ padding: 8px 0; background: none; }
.mini td:last-child, .mini th:last-child{ text-align: right; padding-left: 12px; white-space: nowrap; }
.mini .tag{ font-size: 10px; padding: 1px 6px; }
.mini tbody tr{ cursor: default; }
.mini tbody tr:hover td{ background: none; }

/* --- holder --------------------------------------------------------------------------------- */
.holder-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.eyebrow{ display: inline-block; margin: 0; font: 700 12px var(--mono); text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 8px; }
.holder-head h1{ margin: 10px 0 0; font: 700 clamp(15px, 2.4vw, 24px) var(--mono); text-transform: none; word-break: break-all; }
.mix{ padding: 18px; }
.mix-bar{ display: flex; height: 26px; border: var(--rule) solid var(--ink); }
.mix-bar i{ background: var(--tc); min-width: 6px; border-right: 2px solid var(--ink); }
.mix-bar i:last-child{ border-right: 0; }
.mix-legend{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font: 700 12px var(--mono); text-transform: uppercase; }
.mix-legend b{ display: inline-block; width: 12px; height: 12px; margin-right: 6px; border: 2px solid var(--ink); vertical-align: -1px; }
.mix-legend em{ font-style: normal; margin-left: 4px; }
.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; padding: 18px; }
.tile{ display: block; text-decoration: none; transition: transform .1s; }
.tile svg{ width: 100%; height: auto; display: block; box-shadow: 6px 6px 0 var(--ink); }
.tile:hover{ transform: translate(-3px, -3px); }
.tile:hover svg{ box-shadow: 9px 9px 0 var(--ink); }
.tile span{ display: block; font: 700 11px var(--mono); text-align: center; margin-top: 10px; }
@media (max-width: 420px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 12px; } }

/* --- leaderboard ------------------------------------------------------------------------------ */
.podium{ display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 20px; align-items: end; margin-top: 40px; }
.podium > a{ text-decoration: none; display: block; padding: 18px; text-align: center; transition: transform .1s; }
.podium > a:hover{ transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.podium .p1{ background: var(--acid); padding-top: 28px; padding-bottom: 28px; }
.podium .p3{ background: var(--bg); }
.podium .rank{ display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--paper); font: 400 20px var(--display); }
.podium .p1 .rank{ width: 50px; height: 50px; font-size: 26px; }
.podium .who{ display: block; font: 700 14px var(--mono); margin: 12px 0 0; }
.podium .pts{ display: block; font: 400 44px/1 var(--display); margin-top: 8px; }
.podium .p1 .pts{ font-size: 60px; }
.podium .pts small{ font: 700 12px var(--mono); margin-left: 4px; }
.podium .pips{ justify-content: center; margin-top: 12px; }
@media (max-width: 720px){ .podium{ grid-template-columns: 1fr; } .podium .p1{ order: -1; } }

.tabs{ display: flex; gap: 10px; }
.tabs + .panel{ margin-top: 14px !important; }
.tabs button{
  cursor: pointer; font: 700 14px var(--mono); text-transform: uppercase; padding: 10px 16px;
  background: var(--paper); color: var(--ink); border: var(--rule) solid var(--ink);
}
.tabs button:hover{ background: var(--bg); }
.tabs button[aria-selected="true"]{ background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--acid), 4px 4px 0 var(--rule) var(--ink); }
.medal{ display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--paper); font: 400 14px var(--display); }
.medal.m1{ background: var(--acid); color: var(--ink); border: 2px solid var(--ink); }
.pips{ display: inline-flex; gap: 12px; flex-wrap: wrap; }
.pips span{ display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.pips b{ width: 12px; height: 12px; background: var(--tc); border: 2px solid var(--ink); }

/* --- about ------------------------------------------------------------------------------------ */
.about-head{ margin-top: 44px; max-width: 900px; }
.about-head h1{ font-size: clamp(40px, 6.4vw, 84px); line-height: .92; letter-spacing: -2px; margin: 16px 0 22px; }
.about-head h1 em{ display: inline-block; font-style: normal; margin-top: 8px; padding: 6px 12px 2px; background: var(--acid); border: var(--rule) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.about-head .lede{ font-size: 18px; line-height: 1.6; margin: 0; max-width: 46em; }
.about-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; }
@media (max-width: 860px){ .about-grid{ grid-template-columns: minmax(0, 1fr); } }
.ticker-big{ margin: 0 0 18px; font: 400 clamp(44px, 7vw, 72px)/1 var(--display); }
.field-label{ margin: 0 0 6px; font: 700 11px var(--mono); text-transform: uppercase; color: var(--mute); }
.ca{ display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ca code{ flex: 1 1 260px; min-width: 0; font: 700 15px var(--mono); padding: 13px 14px; background: var(--bg); border: var(--rule) solid var(--ink); word-break: break-all; }
.about-token .actions{ margin-top: 18px; }
.soon{ display: inline-block; font: 700 12px var(--mono); text-transform: uppercase; padding: 10px 14px; border: 2px dashed var(--ink); }
.about-x{ background: var(--acid); }
.about-x .panel-h .meta{ color: var(--ink) !important; }
.handle{ margin: 0 0 12px; font: 400 clamp(30px, 4.2vw, 46px)/1.05 var(--display); word-break: break-all; }
.about-x p{ margin: 0 0 18px; }
.faq{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule); background: var(--ink); margin: 0; }
.faq div{ background: var(--paper); padding: 18px; }
.faq dt{ font: 400 20px/1.15 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.faq dd{ margin: 0; font-size: 14px; line-height: 1.7; }
.faq a{ font-weight: 700; }
@media (max-width: 720px){ .faq{ grid-template-columns: minmax(0, 1fr); } }
.safety{ background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--acid), 6px 6px 0 var(--rule) var(--ink); }
.safety h2{ margin: 0 0 10px; font-size: clamp(22px, 3vw, 32px); color: var(--acid); }
.safety p{ margin: 0; max-width: 60em; line-height: 1.7; }

/* --- pre-launch: sample cards instead of an empty table ------------------------------ */
.prelaunch-lede{ margin: 0 0 6px; font-size: 16px; max-width: 46em; }
.samples{ padding: 18px 0 8px; }
.tile.sample{ margin: 0; position: relative; cursor: default; }
.tile.sample:hover{ transform: none; }
.tile.sample svg{ opacity: .92; }
.sample-tag{
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--ink); color: var(--acid) !important; border: var(--rule) solid var(--ink);
  font: 700 12px var(--mono) !important; text-transform: uppercase; white-space: nowrap; padding: 6px 10px !important; margin: 0 !important;
  box-shadow: 4px 4px 0 var(--acid);
}
.prelaunch-cta{ margin-top: 14px; }

/* --- footer ------------------------------------------------------------------------------------ */
footer{ background: var(--ink); color: var(--paper); margin-top: 24px; }
.foot{ max-width: 1200px; margin: 0 auto; padding: 28px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; align-items: center; }
.foot .logo b{ border-color: var(--paper); }
.foot .logo span{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.foot nav{ display: flex; gap: 20px; justify-content: flex-end; flex-wrap: wrap; }
.foot nav a{ text-decoration: none; font: 700 13px var(--mono); text-transform: uppercase; }
.foot nav a:hover{ background: var(--acid); color: var(--ink); }
.foot p{ grid-column: 1 / -1; margin: 0; color: #B5B1A6; font: 12px/1.7 var(--mono); text-transform: uppercase; }
@media (max-width: 560px){ .foot{ grid-template-columns: 1fr; } .foot nav{ justify-content: flex-start; } .foot .logo span{ display: grid; } }

/* --- reduced motion ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .ticker{ overflow-x: auto; }
}