/* ================= 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;
    --scan: rgba(255, 255, 255, 0.02);
    /* Spacing and type scale. Page components take their margins from these
       rather than from inline styles. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --step-home: clamp(2.2rem, 6vw, 3.6rem);
    --step-h1: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
    --step-section: 1.25rem;
    /* The reading column: about 65–70 characters of body text. Set in rem so
       the width holds whatever an element's own font size is. */
    --measure: 37rem;
    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;
        --scan: rgba(0, 0, 0, 0.03);
        color-scheme: light;
    }
}

* { box-sizing: border-box; }

/* Keeps in-page jumps and focused elements clear of the sticky top bar. */
html { scroll-padding-top: 64px; }

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 the brand plate and nav links: 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) {
    .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; }

/* The side gutter narrows on phones, where every character of line length counts. */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 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 var(--space-2); }
.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; }
.lt h1 { font-size: var(--step-h1); }

/* A line of short facts: a type plate or label, then items separated by dots.
   Each item stays on one line, so a narrow screen breaks between them rather
   than inside one. Every item carries its dot in the gap before it. The line
   is shifted left by one gap and that strip is clipped, so an item that wraps
   to the start of a line loses its dot instead of leading with it. Shifting
   with left rather than a margin keeps card and header margins out of it. */
.meta {
    --meta-gap: var(--space-4);
    position: relative;
    left: calc(-1 * var(--meta-gap));
    width: calc(100% + var(--meta-gap));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-1);
    clip-path: inset(-6px -6px -6px var(--meta-gap));
}
.meta > * { margin-left: var(--meta-gap); }
.meta-item { position: relative; white-space: nowrap; }
.meta-item.wraps { white-space: normal; }
.meta-item::before {
    content: "·";
    position: absolute;
    left: calc(-1 * var(--meta-gap) / 2);
    transform: translateX(-50%);
}
/* A type label or badge already separates itself from what follows. */
.meta > :not(.meta-item) + .meta-item::before { content: none; }
.lt .meta { margin: 0 0 var(--space-3); color: var(--muted); }
.lt .meta .kicker { margin: 0 0 0 var(--meta-gap); }

/* The fixture sits inside the header, between the facts and the headline. */
.lt .fixture { margin: 0 0 var(--space-2); color: var(--ink); }
.lt h1.home-title { font-size: var(--step-home); }

/* Cards: zero radius, top-right corner clipped at 45° like a HUD panel.
   ::before draws the hairline along the cut. */
.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);
}
.card p { margin: 0 0 var(--space-2); }
.card > :last-child { margin-bottom: 0; }
.card-title {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

/* A card whose title link covers the whole card. The corner hairline and
   border take the rule colour on hover. Focus is drawn as an inset ring on the
   card, because an outline would be cut off by the card's clip-path. */
.card-link :is(.card-title, .neighbour-title) a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.card-link,
.card-link::before { transition: border-color 120ms ease-out; }
.card-link:hover { border-color: var(--tab); }
.card-link:hover::before { border-top-color: var(--tab); }
.card-link:hover :is(.card-title, .neighbour-title) a { text-decoration: underline; text-underline-offset: 3px; }
.card-link:active { border-color: var(--accent-text); }
@supports selector(:has(a)) {
    .card-link :is(.card-title, .neighbour-title) a:focus-visible { outline: none; }
    .card-link:has(:is(.card-title, .neighbour-title) a:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent-text); }
}
@media (prefers-reduced-motion: reduce) {
    .card-link,
    .card-link::before { transition: none; }
}
.card-heading { margin: 0 0 var(--space-3); }
/* A card that leads a page section, such as the latest episode. */
.card.feature { margin: var(--space-5) 0; }

.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.line { color: var(--muted); border: 1px solid var(--hairline); }

/* A claim in the author's own words, muted when it did not come off. The
   verdict mark beside it says how it went. */
.claim { color: var(--accent-text); font-weight: 600; }
.claim-missed { color: var(--muted); font-weight: 600; }


/* ================= 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);
}
/* padding-block, not padding: the shorthand would wipe out the side gutter
   .wrap sets on the same element. */
.topbar-in { display: flex; align-items: center; gap: 20px; padding-block: 8px; }
/* 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); }

/* Taller tap targets in the top bar without changing its height: the padding
   enlarges the hit area and the negative margin gives the space back. */
.topbar .topnav a { padding-block: 12px; margin-block: -12px; }

/* 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;
}

/* Hidden until focused, then shown as a plate in the top-left corner. */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background: var(--volt);
    color: var(--volt-ink);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; text-decoration: none; }
main:focus { outline: none; }

.footer {
    border-top: 1px solid var(--hairline);
    margin-top: 72px;
    padding-block: 22px 40px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
}
/* Inline links, so the padding enlarges the tap area without moving anything. */
.footer a { padding-block: 12px; }

/* 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)); }
.list { display: grid; gap: var(--space-3); }

/* Section headings inside a page: the .lt lower-third at a smaller size,
   without the plate. */
.section-head {
    font-family: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    font-stretch: 68%;
    font-weight: 850;
    font-size: var(--step-section);
    text-transform: uppercase;
    letter-spacing: 0.012em;
    line-height: 1.1;
    border-left: 2px solid var(--tab);
    padding-left: var(--space-3);
    margin: var(--space-7) 0 var(--space-4);
}

/* Page-level spacing that used to be set inline. */
.lt.lead { margin-top: var(--space-8); }
.intro { max-width: var(--measure); }
.more-link { margin-top: var(--space-5); }
.filter { margin-bottom: var(--space-4); }
.record-note { margin: 0 0 var(--space-5); }
.card-call { margin: 0 0 var(--space-2); }

/* Arrows are drawn: the arrow characters are not in the font subsets. */
.arrow {
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

/* ================= 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: var(--measure);
    hanging-punctuation: first last;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink);
}

.prose > :first-child { margin-top: 0; }
/* pretty avoids a lone word on the last line where the browser supports it. */
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }

/* 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; margin: 0 0 1.15em; font-size: 1rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { border-bottom: 1px solid var(--hairline); padding: 8px 12px 8px 0; text-align: left; }
.prose th { font-weight: 600; border-bottom-color: var(--muted); }

/* Footnotes: numbered references in the text, and the notes themselves
   smaller and muted under the hairline Markdig puts above them. */
.prose .footnote-ref { text-decoration: none; }
.prose .footnote-ref sup { font-size: 0.7em; line-height: 0; font-variant-numeric: tabular-nums; }
.prose .footnotes { margin-top: 2.5em; font-size: 0.9rem; color: var(--muted); }
.prose .footnotes hr { margin: 0 0 1em; }
.prose .footnotes p { margin: 0 0 0.5em; }
.prose .footnote-back-ref { text-decoration: none; margin-left: 0.25em; }

.standfirst {
    max-width: var(--measure);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.45;
    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: var(--measure);
    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; }

/* Each chapter is a link to that moment in the video. The row's left rule
   echoes the section heading, and its padding lines the text up with the
   heading's. */
.chapters { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.chapters li { border-bottom: 1px solid var(--hairline); }
.chapters li:last-child { border-bottom: none; }
.chapters a {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-3);
    border-left: 2px solid transparent;
    color: var(--ink);
}
.chapters a:hover,
.chapters a:focus-visible {
    border-left-color: var(--tab);
    background: var(--raised);
    text-decoration: none;
}
.chapters a:hover .chapter-title { text-decoration: underline; text-underline-offset: 3px; }
/* Wide enough for an hour-long stamp like 1:02:05, letter spacing included,
   so every title lines up. */
.chapters .num { color: var(--accent-text); flex: none; min-width: 8.25ch; }

/* ================= 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: var(--measure);
    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);
}
/* The play triangle is drawn: U+25B6 is outside the font subsets and some
   platforms show it as an emoji. */
.watch-play::before {
    content: "";
    width: 11px;
    height: 13px;
    margin-left: 3px;
    background: var(--volt-ink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.watch-label { color: var(--ink); }
.watch + .prose { margin-top: var(--space-5); }

/* ================= feed page =================
   The feed address in a box that selects whole on one click, with a Copy
   button beside it where scripting and the clipboard allow. */
.feed-address { max-width: var(--measure); margin: var(--space-5) 0; }
.feed-address-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.feed-address-url {
    flex: 1 1 16rem;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--raised);
    border: 1px solid var(--hairline);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}
.feed-address-url code { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.copy-button {
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 0;
    background: var(--volt);
    color: var(--volt-ink);
    box-shadow: inset 0 0 0 1px var(--plate-edge);
    cursor: pointer;
}
.copy-button:hover { background: var(--ink); color: var(--raised); }

/* ================= 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); }

/* The predictions tally, as a plain line rather than a readout. */

/* ================= end of a post =================
   A small plate in the brand's cut-corner shape after the last line says the
   piece is over. It is decorative, drawn in CSS and not read out. It sits
   after the last paragraph, or the last item of a closing list or quote, and
   ignores footnotes, which come after the text. Under it, older and newer,
   then a line pointing to the feed page. */
.post-body > p:nth-last-child(1 of :not(.footnotes))::after,
.post-body > :is(ul, ol):nth-last-child(1 of :not(.footnotes)) > li:last-child::after,
.post-body > blockquote:nth-last-child(1 of :not(.footnotes)) > p:last-child::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.35em;
    background: var(--volt);
    box-shadow: inset 0 0 0 1px var(--plate-edge);
    clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%);
}

.post-end {
    max-width: var(--measure);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--hairline);
}
.neighbours { display: grid; gap: var(--space-3); }
@media (min-width: 640px) {
    .neighbours { grid-template-columns: 1fr 1fr; }
    .neighbour-newer { grid-column: 2; }
}
.neighbour .kicker { margin-bottom: var(--space-1); }
.neighbour-newer { text-align: right; }
.neighbour-title { margin: 0; font-weight: 700; line-height: 1.4; }
.post-follow { margin: var(--space-5) 0 0; }

/* The way back to the list, above a post. Someone arriving from a shared link
   has no browser history to go back through. */
.back-link { margin: var(--space-6) 0 0; }
.back-link + .lt { margin-top: var(--space-4); }
.record { margin: 0 0 6px; font-size: 1.05rem; }
.record strong { color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* One mark per call, oldest first. */
.record-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: var(--measure);
    margin: var(--space-2) 0 var(--space-3);
}

/* ================= verdict marks =================
   Each outcome has its own shape, so they can be told apart without colour
   and whatever colour a club gives the plates. The outline is --ink, which
   contrasts with the card in every theme; the fill is the club plate colour,
   and the tick is drawn in the plate's own text colour. */
.verdict {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--muted);
}
.verdict--hit { color: var(--ink); }

.verdict-mark {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* Hit: filled, with a tick. */
.verdict--hit .verdict-mark { background: var(--volt); }
.verdict--hit .verdict-mark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    box-sizing: content-box;
    width: 2.5px;
    height: 5.5px;
    border: solid var(--volt-ink);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* Split: half filled, with a divider. */
.verdict--split .verdict-mark { background: linear-gradient(90deg, var(--volt) 50%, transparent 50%); }
.verdict--split .verdict-mark::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5.5px;
    width: 1px;
    background: var(--ink);
}

/* Missed: empty, struck through on the diagonal. */
.verdict--miss .verdict-mark {
    background: linear-gradient(to top right,
        transparent calc(50% - 1px), var(--live) calc(50% - 1px),
        var(--live) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Still open: an empty, dashed outline. */
.verdict--open .verdict-mark { box-shadow: none; border: 1px dashed var(--muted); }

@media (prefers-contrast: more) {
    .verdict-mark { box-shadow: inset 0 0 0 2px var(--ink); }
    .verdict--open .verdict-mark { border-width: 2px; }
}

/* 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),
.skip-link,
.watch-play,
.brand {
    box-shadow: inset 0 0 0 1px var(--plate-edge);
}

/* Forced-colour modes such as Windows High Contrast drop background colours,
   which would leave plates as bare text. A border keeps their shape. */
@media (forced-colors: active) {
    .brand,
    .lt .kicker,
    .badge,
    .watch-play,
    .skip-link { border: 1px solid CanvasText; }
    .watch-play::before { background: CanvasText; forced-color-adjust: none; }
    body::after { display: none; }
}

@media (forced-colors: active) {
    .verdict-mark { forced-color-adjust: none; box-shadow: inset 0 0 0 1px CanvasText; }
    .verdict--hit .verdict-mark { background: CanvasText; }
    .verdict--hit .verdict-mark::after { border-color: Canvas; }
    .verdict--split .verdict-mark { background: linear-gradient(90deg, CanvasText 50%, transparent 50%); }
    .verdict--split .verdict-mark::after { background: CanvasText; }
    .verdict--miss .verdict-mark {
        background: linear-gradient(to top right,
            transparent calc(50% - 1px), CanvasText calc(50% - 1px),
            CanvasText calc(50% + 1px), transparent calc(50% + 1px));
    }
    .verdict--open .verdict-mark { box-shadow: none; border-color: CanvasText; }
}

/* Forced-colour modes drop box-shadows, which would hide the card focus ring,
   so the title link keeps its own outline there. */
@media (forced-colors: active) {
    .card-link :is(.card-title, .neighbour-title) a:focus-visible { outline: 2px solid CanvasText; }
}

/* ================= page transitions =================
   Between pages the top bar and corner marks hold still while the page
   underneath fades out and settles in. Browsers without cross-document view
   transitions ignore this and navigate as normal. Off for reduced motion. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.regmarks span:nth-child(1) { view-transition-name: regmark-1; }
.regmarks span:nth-child(2) { view-transition-name: regmark-2; }
.regmarks span:nth-child(3) { view-transition-name: regmark-3; }
.regmarks span:nth-child(4) { view-transition-name: regmark-4; }
::view-transition-old(root) { animation: 90ms ease-out both fk-page-out; }
::view-transition-new(root) { animation: 160ms ease-out both fk-page-in; }
@keyframes fk-page-out { to { opacity: 0; } }
@keyframes fk-page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* The end mark is a background, which forced-colour modes remove. */
@media (forced-colors: active) {
    .post-body > p:nth-last-child(1 of :not(.footnotes))::after,
    .post-body > :is(ul, ol):nth-last-child(1 of :not(.footnotes)) > li:last-child::after,
    .post-body > blockquote:nth-last-child(1 of :not(.footnotes)) > p:last-child::after {
        forced-color-adjust: none;
        background: CanvasText;
        box-shadow: none;
    }
}

/* ================= 404 =================
   The site's sections as large tiles, so someone who lands on a dead link has
   somewhere obvious to go. Same cut corner as the cards, with the hairline
   drawn along the cut. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
    max-width: var(--measure);
    margin: var(--space-6) 0 0;
}
.tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    background: var(--raised);
    border: 1px solid var(--hairline);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    color: var(--ink);
    font-size: 0.8rem;
    transition: border-color 120ms ease-out;
}
.tile::before {
    content: "";
    position: absolute;
    top: 5.5px;
    right: -2.5px;
    width: 17px;
    border-top: 1px solid var(--hairline);
    transform: rotate(45deg);
}
.tile:hover { border-color: var(--tab); text-decoration: none; }
.tile:hover::before { border-top-color: var(--tab); }
.tile:hover .arrow,
.tile:focus-visible .arrow { color: var(--accent-text); }
/* An outline would be cut off by the clip-path, so focus is an inset ring. */
.tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text); }
@media (prefers-reduced-motion: reduce) {
    .tile { transition: none; }
}
@media (forced-colors: active) {
    .tile:focus-visible { outline: 2px solid CanvasText; outline-offset: -4px; }
}

/* ================= home page index =================
   The latest episode, review and prediction side by side, with the record in
   words under them once a call has been settled. */
.home-index { margin: var(--space-6) 0 0; }
.home-record { margin: var(--space-4) 0 0; }
.home-record a { margin-left: var(--space-2); white-space: nowrap; }

/* A post's episode, above older and newer at the end of the post. */
.post-episode { margin-bottom: var(--space-3); }

/* ================= club swatches =================
   A club's two colours split on the diagonal, beside a fixture and in the club
   picker. Decorative: the club's name is always in the text next to it. The
   outline keeps an all-white or all-black kit visible in either scheme. */
.swatches {
    display: inline-flex;
    gap: 3px;
    margin-right: var(--space-2);
    vertical-align: -0.1em;
}
.swatch {
    display: inline-block;
    flex: none;
    width: 0.9em;
    height: 0.9em;
    background: linear-gradient(135deg, var(--swatch-1, transparent) 50%, var(--swatch-2, transparent) 50%);
    box-shadow: inset 0 0 0 1px var(--muted);
}

/* In browsers with customisable select the picker's list is styled to match
   the site and each club shows its swatch. Elsewhere the select stays the
   browser's own. */
@supports (appearance: base-select) {
    .club-picker select,
    .club-picker select::picker(select) { appearance: base-select; }
    .club-picker select::picker(select) {
        max-height: min(60vh, 28rem);
        padding: var(--space-1) 0;
        background: var(--raised);
        border: 1px solid var(--hairline);
        color: var(--ink);
    }
    .club-picker option {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }
    .club-picker option:hover,
    .club-picker option:focus-visible { background: var(--surface); }
    .club-picker option:checked { color: var(--accent-text); }
}

/* Forced-colour modes would remove the swatch's colours, and they are the
   point of it. */
@media (forced-colors: active) {
    .swatch { forced-color-adjust: none; }
}

/* ================= seasons =================
   Once a list spans more than one season (1 July to 30 June), it groups by
   season. The newest season keeps full cards; earlier seasons are compact rows.
   Each row's title link covers the row, and focus is an inset ring on it. */
.season-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0 0 var(--space-5);
}
.season-jump a {
    padding-block: 12px;
    margin-block: -12px;
    color: var(--muted);
}
.season-jump a:hover { color: var(--ink); text-decoration: none; }

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}
.row {
    position: relative;
    display: grid;
    grid-template-columns: 6.5rem 7.5rem 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-3);
    border-bottom: 1px solid var(--hairline);
}
.row:hover { background: var(--raised); }
.row-type,
.row-date,
.row-end { color: var(--muted); }
.row-title { font-weight: 600; }
.row-title::after {
    content: "";
    position: absolute;
    inset: 0;
}
.row:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }
@supports selector(:has(a)) {
    .row-title:focus-visible { outline: none; }
    .row:has(.row-title:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent-text); }
}
/* On a phone the type, date and verdict share the first line and the title
   takes the second. */
@media (max-width: 639px) {
    .row {
        grid-template-columns: auto auto 1fr;
        row-gap: var(--space-1);
    }
    .row-type { grid-column: 1; grid-row: 1; }
    .row-date { grid-column: 2; grid-row: 1; }
    .row-end { grid-column: 3; grid-row: 1; justify-self: end; }
    .row-title { grid-column: 1 / -1; grid-row: 2; }
}
@media (forced-colors: active) {
    .row-title:focus-visible { outline: 2px solid CanvasText; }
}