/* ================= fonts =================
   Self-hosted; see wwwroot/fonts/README.md. Archivo is the variable font and
   must stay that way — the design drives its width axis (headings 68%, brand
   plate 123%), and a static instance would quietly render both at normal
   width. */

/* Archivo 100 900 — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 100 900 — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 100 900 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 100 900 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= FLOODLIT tokens — HUD cut =================
   Dark-first, Marathon-adjacent: true-black surfaces, acid volt, zero
   radius, registration marks and scanlines. Light mode is "printed spec
   sheet": volt demotes to fills; interactive text swaps to moss green.
   Components use tokens only — never raw hex. */
:root {
    --surface: #050505;
    --raised: #0D0E0B;
    --hairline: #23251E;
    --ink: #EDEFE6;
    --muted: #878D7F;
    --volt: #C8FF00;
    --volt-ink: #050505;
    --tab: #C8FF00;
    --accent-text: #C8FF00;
    /* Outline for club plates whose fill is too close to the page to see. */
    --plate-edge: transparent;
    --cyan: #3DF2FF;
    --live: #FF3B30;
    /* Filled red plates carrying white text: the darker red holds 4.5:1+
       in both schemes (bright --live is for text/accents only). Deliberately
       not overridden in light mode. */
    --live-plate: #D92B20;
    --gold: #FFC531;
    --scan: rgba(255, 255, 255, 0.02);
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --surface: #EFF1EA;
        --raised: #FFFFFF;
        --hairline: #D3D6CA;
        --ink: #0A0B08;
        --muted: #5E6357;
        --tab: #C8FF00;
        --accent-text: #4A6800;
        --cyan: #007A8A;
        --live: #D92B20;
        --gold: #8A6A00;
        --scan: rgba(0, 0, 0, 0.03);
        color-scheme: light;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* CRT scanlines over everything; transparent, never intercepts input. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
}

@media (prefers-contrast: more) {
    body::after { display: none; }
}

::selection { background: var(--volt); color: var(--volt-ink); }

.lt h1, .lt h2, .lt h3 {
    font-family: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    font-stretch: 68%;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.012em;
    line-height: 1.05;
    text-wrap: balance;
}

/* Glitch burst on headline hover: one chromatic-split flicker, then settle.
   steps(1) holds each frame then jumps — digital, not smooth. */
@keyframes glitch {
    0%   { text-shadow: -2px 0 var(--cyan), 2px 0 var(--live); transform: translateX(1px); }
    20%  { text-shadow: 3px 0 var(--cyan), -3px 0 var(--live); transform: translateX(-2px) skewX(-1.5deg); }
    40%  { text-shadow: -3px 0 var(--live), 3px 0 var(--volt); transform: translateX(2px); }
    60%  { text-shadow: 2px 0 var(--cyan), -2px 0 var(--live); transform: translateX(-1px) skewX(1deg); }
    80%  { text-shadow: -1px 0 var(--volt), 1px 0 var(--cyan); transform: none; }
    100% { text-shadow: none; transform: none; }
}
/* Tighter offsets for small mono text — full-size shadows swamp the glyphs. */
@keyframes glitch-sm {
    0%   { text-shadow: -1px 0 var(--cyan), 1px 0 var(--live); transform: translateX(0.5px); }
    25%  { text-shadow: 1.5px 0 var(--cyan), -1.5px 0 var(--live); transform: translateX(-1px); }
    50%  { text-shadow: -1.5px 0 var(--live), 1.5px 0 var(--volt); transform: translateX(1px); }
    75%  { text-shadow: 1px 0 var(--cyan), -1px 0 var(--live); transform: none; }
    100% { text-shadow: none; transform: none; }
}
.brand:hover {
    animation: glitch 0.4s steps(1, end) 1;
}
.topnav a:hover {
    animation: glitch-sm 0.35s steps(1, end) 1;
}
@media (prefers-reduced-motion: reduce) {
    .lt h1:hover, .lt h2:hover, .brand:hover, .topnav a:hover { animation: none; }
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.mono {
    font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mut { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Kicker: muted mono label anywhere (card headers etc.); inside a .lt
   lower-third it promotes to a filled volt plate, Marathon
   "AVAILABLE NOW"-style. The .err variant is the alarm plate. */
.kicker { color: var(--muted); margin: 0 0 6px; }
.lt {
    border-left: 4px solid var(--tab);
    padding-left: 18px;
    margin: 48px 0 24px;
}
.lt .kicker {
    display: inline-block;
    background: var(--volt);
    color: var(--volt-ink);
    padding: 3px 8px 2px;
    margin: 0 0 10px;
}
/* White on red holds contrast in both schemes — tokens would flip to
   black-on-red in light mode. */
.lt .kicker.err { background: var(--live); color: #FFFFFF; }
.lt h1, .lt h2 { margin: 0; }

/* Cards: zero radius, top-right corner clipped at 45° like a HUD panel.
   ::before draws the hairline along the cut; ::after stamps the panel
   index (01, 02, …) when the card sits in a .grid. */
.card {
    position: relative;
    background: var(--raised);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: 18px 20px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.card::before {
    content: "";
    position: absolute;
    top: 7.5px;
    right: -3.5px;
    width: 23px;
    border-top: 1px solid var(--hairline);
    transform: rotate(45deg);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 0;
    white-space: nowrap;
}
.badge.volt { background: var(--volt); color: var(--volt-ink); }
.badge.line { color: var(--muted); border: 1px solid var(--hairline); }

/* A claim in the author's own words, and the same claim struck through when
   it did not come off. Carried over from the archived table, where it showed
   deserved position against actual. */
.claim { color: var(--accent-text); font-weight: 600; }
.claim-missed { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--live); }

.res {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-weight: 600;
}
.res-w { background: var(--volt); color: var(--volt-ink); }
.res-d { border: 1px solid var(--hairline); color: var(--muted); }
.res-l { background: var(--live-plate); color: #FFFFFF; }


/* ================= ops (/admin) ================= */
.btn-volt, .btn-live, .btn-line {
    border: 0;
    border-radius: 0;
    padding: 6px 16px;
    font-weight: 600;
    cursor: pointer;
}
.btn-volt { background: var(--volt); color: var(--volt-ink); }
.btn-volt:hover { background: var(--ink); color: var(--raised); }
.btn-live { background: var(--live-plate); color: #FFFFFF; }
.btn-live:hover { background: var(--ink); color: var(--raised); }
.btn-line { background: none; border: 1px solid var(--hairline); color: var(--muted); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }

/* ================= chrome ================= */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
}
.topbar-in { display: flex; align-items: center; gap: 20px; padding: 8px 0; }
/* Brand is a solid volt plate — the Marathon logo-block move. */
.brand {
    font-family: 'Archivo', sans-serif;
    font-stretch: 123%;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
    line-height: 0.94;
    background: var(--volt);
    color: var(--volt-ink);
    padding: 5px 8px 4px;
}
.brand:hover { text-decoration: none; }
.topnav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.topnav a { color: var(--muted); }
.topnav a:hover, .topnav a.active { color: var(--ink); text-decoration: none; }
.topnav a.active::before { content: "// "; color: var(--accent-text); }

/* Visually hidden, exposed to assistive tech. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.footer {
    border-top: 1px solid var(--hairline);
    margin-top: 72px;
    padding: 22px 0 40px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
}
/* Fixed registration marks in the viewport corners — pure decoration. */
.regmarks span {
    position: fixed;
    z-index: 5;
    pointer-events: none;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    line-height: 1;
    color: var(--muted);
    opacity: 0.55;
}
.regmarks span:nth-child(1) { top: 52px; left: 10px; }
.regmarks span:nth-child(2) { top: 52px; right: 10px; }
.regmarks span:nth-child(3) { bottom: 10px; left: 10px; }
.regmarks span:nth-child(4) { bottom: 10px; right: 10px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ================= reading =================
   The writing pages. The HUD stays on the shell and the index cards; in a post
   it gets out of the way of the prose. Wider type, a measure that does not run
   past about 70 characters, and headings that read as structure rather than as
   another instrument label. */
.prose {
    max-width: 66ch;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink);
}

.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }

/* Outside .lt these inherit normal case and weight, which is the point. */
.prose h2 {
    font-family: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    margin: 1.9em 0 .5em;
}

.prose h3 {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 .4em;
}

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--muted); }

/* Underlined in running text. Colour alone is not enough to mark a link inside
   a paragraph, and the nav's colour-only treatment does not carry here. */
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.prose blockquote {
    margin: 1.4em 0;
    padding: 2px 0 2px 18px;
    border-left: 2px solid var(--tab);
    color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.9em;
    background: var(--raised);
    border: 1px solid var(--hairline);
    padding: 1px 5px;
}

.prose pre {
    background: var(--raised);
    border: 1px solid var(--hairline);
    padding: 12px 14px;
    overflow-x: auto;
}
.prose pre code { background: none; border: none; padding: 0; }

.prose hr { border: none; border-top: 1px solid var(--hairline); margin: 2em 0; }

.prose img { max-width: 100%; height: auto; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }

/* Wide content scrolls inside itself rather than pushing the page sideways. */
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--hairline); padding: 8px 12px 8px 0; text-align: left; }

.standfirst {
    max-width: 62ch;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
}

/* The call sits above the writing with its verdict beside it, so a reader
   cannot take in one without the other. */
.call {
    max-width: 66ch;
    margin: 0 0 28px;
    padding: 14px 18px;
    background: var(--raised);
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--tab);
}
.call p { margin: 0 0 8px; }
.call p:last-child { margin-bottom: 0; }
.call .claim, .call .claim-missed { font-size: 1.15rem; }

.chapters { list-style: none; padding: 0; margin: 0; max-width: 66ch; }
.chapters li {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline);
}
.chapters li:last-child { border-bottom: none; }
.chapters .num { color: var(--accent-text); flex: none; }

/* ================= watch card =================
   Links out to YouTube. No embed, so nothing third-party loads and no cookies
   are set before a reader has chosen to go there. */
.watch {
    display: block;
    position: relative;
    max-width: 66ch;
    margin: 16px 0 0;
    background: var(--raised);
    border: 1px solid var(--hairline);
    text-decoration: none;
}
.watch:hover { border-color: var(--tab); }
.watch:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.watch-still { display: block; width: 100%; height: auto; }

.watch-face {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

/* Over a still, the label sits on a plate at the bottom rather than beside it. */
.watch-still + .watch-face {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.watch-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    background: var(--volt);
    color: var(--volt-ink);
    font-size: 0.9rem;
}

.watch-label { color: var(--ink); }

/* ================= club picker =================
   Reads as an instrument setting in the footer furniture, not a feature. */
.club-picker { display: flex; align-items: center; gap: 8px; }
.club-picker label { color: var(--muted); }
.club-picker select {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ink);
    background: var(--raised);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: 4px 6px;
    color-scheme: inherit;
}
.club-picker select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.club-picker select:hover { border-color: var(--accent-text); }

/* A post's fixture and the predictions tally, as plain lines rather than
   readouts. */
.post-fixture { margin: -6px 0 18px; }
.record { margin: 0 0 6px; font-size: 1.05rem; }
.record strong { color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* Club themes can give a plate a fill that nearly matches the page, such as a
   white plate on the light scheme; the outline keeps it visible. Transparent
   by default. */
.lt .kicker:not(.err),
.badge.volt,
.res-w,
.btn-volt,
.watch-play,
.brand {
    box-shadow: inset 0 0 0 1px var(--plate-edge);
}