/* The dark design system.
 *
 * Same brand, different register. style.css puts the acid lime on the
 * background, which is right for a drop: it is loud, it is the artwork's own
 * colour, and it makes the page feel like an event. It is the wrong register
 * for something people are meant to read for ten minutes and then trust with
 * money.
 *
 * So the lime moves from surface to signal. It now marks exactly one thing at
 * a time: the number that matters, the action to take, the row that is live.
 * Everything else is ink and paper. A page with one accent colour used
 * sparingly reads as deliberate; the same colour everywhere reads as noise.
 *
 * Kept from the old sheet: Arial Black headings, hard edges, tabular numbers.
 * The brutalism is the brand. Dropped: the 8px hard shadows and 3px borders,
 * which stop working when the background is dark and the contrast is already
 * doing that job.
 */

:root {
  --lime: #ccff00;
  --lime-dim: #9dc400;
  --lime-glow: rgba(204, 255, 0, 0.14);

  --bg: #070707;
  --bg-2: #0d0d0d;
  --surface: #121212;
  --surface-2: #181818;
  --line: #262626;
  --line-soft: #1c1c1c;

  --text: #f2f2ed;
  --muted: rgba(242, 242, 237, 0.56);
  --faint: rgba(242, 242, 237, 0.34);

  --font: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;

  --wrap: 1120px;
  --r: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

/* ── type ─────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--font); letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(38px, 6.4vw, 74px); }
h2 { font-size: clamp(27px, 3.8vw, 42px); }
h3 { font-size: 18px; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }
.lede { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); max-width: 60ch; }
.small { font-size: 14px; color: var(--muted); }

.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 16px; display: flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--lime); display: block;
}

.accent { color: var(--lime); }
code, .mono { font-family: var(--mono); font-size: 0.9em; }

/* ── layout ───────────────────────────────────────────────────────── */

section { padding: clamp(64px, 9vw, 118px) 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head h2 { margin-bottom: 14px; }

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.band { background: var(--bg-2); border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ── surfaces ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}
.card.lit { border-color: rgba(204, 255, 0, 0.34); background:
  linear-gradient(180deg, var(--lime-glow), transparent 62%), var(--surface); }
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.num {
  font-family: var(--font); font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.num-label {
  display: block; margin-top: 9px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

/* ── buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font); font-size: 14px; letter-spacing: 0.01em;
  padding: 14px 22px; border-radius: var(--r); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease,
    background .16s ease, border-color .16s ease;
  background: var(--lime); color: #050505;
}
.btn:hover { transform: translateY(-1px); background: #d9ff33; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--faint); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ── nav ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 7, 7, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 13px 24px;
          display: flex; align-items: center; gap: 26px; }
.brand { font-family: var(--font); font-size: 19px; text-decoration: none; letter-spacing: -0.02em; }
.brand .dot { color: var(--lime); }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.nav .btn { padding: 9px 16px; font-size: 12.5px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── tables ───────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th {
  text-align: left; padding: 11px 14px; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tk { font-family: var(--font); font-size: 14px; }

/* ── footer ───────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line-soft); padding: 46px 0 60px; }
.foot-in { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; font-size: 14px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--lime); }
.disclaimer { margin-top: 30px; font-size: 12.5px; color: var(--faint); max-width: 72ch; }

/* ── motion, for those who want it ────────────────────────────────── */

.rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Poster components.

   The reference language here is fight-game splash art and esports key
   visuals: character bays cut on a diagonal, ticker tape running the full
   bleed, registration marks in the corners, halftone over everything. It is
   loud on purpose.

   It works with this brand specifically because acid lime on black is already
   the palette those posters reach for. What would normally be an arbitrary
   accent choice is the artwork's own colour, so the volume goes up without the
   identity drifting.

   All of it degrades: every animation is off under prefers-reduced-motion, and
   every clip-path has a square fallback, so a browser that ignores them gets a
   plain rectangle rather than a hole.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ticker tape ──────────────────────────────────────────────────── */
.tape {
  --tape-bg: var(--lime);
  --tape-fg: #050505;
  background: var(--tape-bg); color: var(--tape-fg);
  overflow: hidden; white-space: nowrap; position: relative;
  border-block: 1px solid #050505;
}
.tape.inv { --tape-bg: #050505; --tape-fg: var(--lime); border-color: var(--line); }
.tape-run { display: inline-flex; align-items: center; will-change: transform;
            animation: tape 34s linear infinite; }
.tape.rev .tape-run { animation-direction: reverse; }
.tape span {
  font-family: var(--font); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; padding: 8px 0; display: inline-block;
}
.tape b { color: inherit; opacity: .5; padding: 0 22px; font-weight: 900; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── registration marks, the corner brackets on every framed thing ── */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border: 2px solid var(--lime);
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ── halftone and grid textures ───────────────────────────────────── */
.dots::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(204,255,0,.16) 1px, transparent 1.4px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.gridlines::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 76%);
}

/* ── angled panel, the shape everything is cut from ───────────────── */
.slant { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.slant-l { clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); }

/* ── vertical side text ───────────────────────────────────────────── */
.vert {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--faint);
}

/* ── outlined display type ────────────────────────────────────────── */
.stroke {
  color: transparent; -webkit-text-stroke: 2px var(--lime); paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px red) { .stroke { color: var(--lime); } }

/* ── the big background numeral ───────────────────────────────────── */
.ghost-num {
  position: absolute; font-family: var(--font); line-height: .78;
  color: transparent; -webkit-text-stroke: 1px rgba(204,255,0,.16);
  pointer-events: none; user-select: none; z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
}