/* The plain reading pages: About, How it works, Tournament formats, Contact. Same tokens as the
   crawlable page bodies (functions/prerenderBody.js): dark by default like the public site, light
   when the system asks for it. No scripts on these pages. */
:root {
  --g: #070a13;
  --p: #111625;
  --l: rgba(255, 255, 255, 0.09);
  --t: #f8fafc;
  --m: #94a3b8;
  --a: #60a5fa;
}
@media (prefers-color-scheme: light) {
  :root {
    --g: #f5f7fb;
    --p: #ffffff;
    --l: rgba(15, 23, 42, 0.1);
    --t: #0f172a;
    --m: #475569;
    --a: #1d4ed8;
  }
}
* { box-sizing: border-box; }
html { color-scheme: dark light; }
body {
  margin: 0;
  background: var(--g);
  color: var(--t);
  font: 400 17px/1.6 'Instrument Sans', 'Inter', system-ui, sans-serif;
}
a { color: var(--a); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 56px; }
.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--l);
}
.brand { font: 400 24px/1 'Anton', Impact, sans-serif; letter-spacing: 0.02em; color: var(--t); text-decoration: none; }
.bar nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.bar nav a[aria-current="page"] { color: var(--t); text-decoration: none; font-weight: 700; }
h1 { font: 400 clamp(38px, 8vw, 64px)/1.02 'Anton', Impact, sans-serif; letter-spacing: 0.01em; margin: 36px 0 14px; }
h2 { font: 400 28px/1.15 'Anton', Impact, sans-serif; letter-spacing: 0.01em; margin: 44px 0 10px; }
h3 { font-size: 18px; margin: 26px 0 6px; }
p, li { max-width: 68ch; }
.lede { font-size: 20px; color: var(--m); }
ol.steps { padding-left: 0; list-style: none; counter-reset: step; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 18px 52px; }
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -6px;
  font: 400 34px/1 'Anton', Impact, sans-serif;
  color: var(--a);
}
ol.steps h3 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 12px 0 8px; }
caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--l); text-align: center; }
th { font-size: 14px; color: var(--m); font-weight: 600; }
td.n, th.n { text-align: left; }
.scroll { overflow-x: auto; }
.note { border-left: 3px solid var(--a); padding: 2px 0 2px 14px; color: var(--m); }
.mail { font: 400 clamp(22px, 5vw, 32px)/1.2 'Anton', Impact, sans-serif; letter-spacing: 0.01em; word-break: break-word; }
footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--l);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}