:root {
  --bg:      #0d1015;
  --panel:   #151a22;
  --panel-2: #1b2029;
  --line:    #262d38;
  --ink:     #e9eef5;
  --ink-2:   #a6b2c2;
  --ink-3:   #6b788a;
  --accent:  #4ea3ff;
  --orange:  #ff8a3d;
  --good:    #58d68d;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The live match runs behind everything, dimmed hard enough to read over.
   It is the real simulation, which is why it is worth having at all. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
/* Dark enough to read over on the left, light enough on the right that you can
   actually watch the match. The first version buried it, which threw away the
   only thing on this page that is genuinely alive. */
#scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(13,16,21,.97) 0%,
      rgba(13,16,21,.94) 30%,
      rgba(13,16,21,.72) 52%,
      rgba(13,16,21,.46) 74%,
      rgba(13,16,21,.40) 100%),
    linear-gradient(180deg, rgba(13,16,21,.30) 0%, rgba(13,16,21,0) 30%);
}

header.top, main, footer { position: relative; z-index: 2; }

/* ---- header ---- */

header.top {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 28px; max-width: 1180px; margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent); text-decoration: none;
  font-weight: 700; letter-spacing: .06em; font-size: 17px;
}
.brand span { color: var(--ink); }
.brand .thin { color: var(--ink-2); font-weight: 300; margin-left: 3px; }
.brand .mark { width: 26px; height: 26px; flex: 0 0 auto; }

header.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
header.top nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
}
header.top nav a:hover { color: var(--ink); }
header.top nav a.cta {
  color: #06203a; background: var(--accent); font-weight: 600;
  padding: 7px 15px; border-radius: 8px;
}
header.top nav a.cta:hover { filter: brightness(1.08); }

/* ---- hero ---- */

main { max-width: 1180px; margin: 0 auto; padding: 0 28px 40px; }

.hero { padding: 104px 0 150px; max-width: 860px; }
.hero h1 {
  font-size: clamp(32px, 4.6vw, 55px); line-height: 1.12; margin: 0 0 26px;
  font-weight: 700; letter-spacing: -.015em;
  text-wrap: balance;          /* no orphan word on its own line */
}
/* Below this width the manual break lands badly, so let it wrap on its own. */
@media (max-width: 780px) { .hero h1 br { display: none; } }
.hero h1 em {
  font-style: normal; color: var(--orange);
}
.lede { font-size: 18px; color: var(--ink-2); margin: 0 0 30px; max-width: 620px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; text-decoration: none; font-size: 15px;
  padding: 12px 22px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--ink); background: rgba(27,32,41,.72);
  backdrop-filter: blur(4px);
}
.btn:hover { border-color: #3d4855; background: rgba(34,40,53,.85); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #06203a;
  font-weight: 650;
}
.btn.primary:hover { filter: brightness(1.08); }

.live { margin: 22px 0 0; font-size: 13px; color: var(--ink-3);
        font-variant-numeric: tabular-nums; }
.live .on { color: var(--good); }

/* ---- bands ---- */

.band {
  padding: 62px 0; border-top: 1px solid var(--line);
  /* Solid from here down. The live match belongs behind the headline, not
     behind three paragraphs of body text. */
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}
.band h2 { font-size: 26px; margin: 0 0 30px; font-weight: 650; letter-spacing: -.01em; }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.cards article {
  background: rgba(21,26,34,.82); border: 1px solid var(--line);
  border-radius: 13px; padding: 20px 21px; backdrop-filter: blur(6px);
}
.cards h3 { margin: 0 0 9px; font-size: 16px; color: var(--accent); font-weight: 650; }
.cards p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.split { display: grid; gap: 30px; grid-template-columns: 1.25fr .95fr; align-items: start; }
.split p { margin: 0 0 15px; color: var(--ink-2); }
.split strong { color: var(--ink); }
.muted { color: var(--ink-3) !important; font-size: 14.5px; }

.orders {
  list-style: none; margin: 0; padding: 16px 18px;
  background: rgba(11,14,19,.85); border: 1px solid var(--line);
  border-radius: 13px; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  backdrop-filter: blur(6px);
}
.orders li { padding: 7px 0; border-bottom: 1px solid #1c222c; color: var(--ink-2); }
.orders li:last-child { border-bottom: 0; }
.orders .k { color: var(--accent); margin-right: 9px; }

.closing { text-align: center; }
.closing .lede { margin-left: auto; margin-right: auto; }
.closing .actions { justify-content: center; }

/* ---- footer ---- */

footer {
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
  max-width: 1180px; margin: 0 auto; padding: 26px 28px 42px;
  color: var(--ink-3); font-size: 13.5px;
  display: flex; gap: 10px; align-items: center;
  border-top: 1px solid var(--line);
}
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .dot { color: #333c48; }

/* ---- narrow ---- */

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .hero { padding: 62px 0 80px; }
  header.top nav a:not(.cta) { display: none; }
}

/* Someone who asked for less motion should not get a match running behind the
   text. The page has to work without it, so the canvas simply stays empty. */
@media (prefers-reduced-motion: reduce) {
  #bg { display: none; }
}