/* AI BRIEF — wire-service flat-poster identity.
   Palette derived from the wire brief itself: newsprint, press black, the red
   of a correction stamp, teletype amber, wire-blue, cleared-for-release green.
   All four proved with check-palette.py before use — figures in DESIGN.md.
   Do not add a hue without re-running it. */

/* The three families, served from fonts/ (#13). Latin and latin-ext woff2
   subsets of what Google Fonts served, with the same unicode-range split, so
   a page with only ASCII fetches one file per face. Archivo and Source Serif 4
   are variable fonts and carry their weight range in one file; Plex Mono is
   static, one file per weight. */
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-display: swap;
    src: url("../fonts/archivo-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo"; font-style: normal; font-weight: 700 800; font-display: swap;
    src: url("../fonts/archivo-normal-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;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-mono-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/plex-mono-normal-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;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/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;
}
@font-face {
    font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
    src: url("../fonts/source-serif-4-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
    src: url("../fonts/source-serif-4-italic-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;
}
@font-face {
    font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("../fonts/source-serif-4-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("../fonts/source-serif-4-normal-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;
}

:root {
    /* Ground and ink */
    --paper: #FBF7EF;           /* newsprint */
    --paper-sunk: #F2ECE0;      /* alternating band ground */
    --ink: #14120E;             /* press black — 17.51:1 on paper */
    --ink-quiet: #55504A;       /* 7.30:1 on paper — captions, meta */
    --on-colour: #FFFFFF;       /* type on any colour ground. NEVER #fff inline */

    /* Three DUAL-ROLE hues: each clears AA as white-on-colour AND as text on
       paper, so one token fills a block and sets a link. */
    --wire: #1B5E7A;            /* 7.17 w/ white · 6.71 as text */
    --embargo: #2E6B3E;         /* 6.39 w/ white · 5.98 as text */
    --stamp: #C81E1E;           /* 5.74 w/ white · 5.37 as text */

    /* One FILL-ONLY hue. Carries ink, never white, never sets type on paper.
       3.05:1 as text — it WILL fail if you set a link in it. */
    --telex: #B8860B;

    /* Type. Display shouts, reading stays quiet, mono carries the wire
       furniture — datelines, timestamps, slugs, day counters. */
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Fluid scale. Poster type needs big jumps and negative tracking. */
    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-body: 1.0625rem;
    --t-lead: clamp(1.15rem, 0.95rem + 0.9vw, 1.45rem);
    --t-h3: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    --t-h2: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
    /* A briefing headline is two or three clauses and 113 characters on
       average, so the top of the scale is a reading size, not a poster one,
       and past 100 characters the h1 steps down again (#13). */
    --t-h1: clamp(2.2rem, 1.2rem + 4.2vw, 3.75rem);
    --t-h1-long: clamp(1.85rem, 1rem + 3.2vw, 3rem);

    --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
    --band-y: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    --container: 1140px;

    --radius-dot: 50%;          /* the only radius in the system */
    --rule: 2px solid var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.62;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;   /* one long word at display size scrolls the page */
    margin: 0 0 0.5em;
}
h1 { font-size: var(--t-h1); }
.h1--long { font-size: var(--t-h1-long); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

p { margin: 0 0 1rem; }
a { color: var(--wire); }
a:hover { text-decoration-thickness: 3px; }

.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }

/* ---- Wire furniture ------------------------------------------------------
   Everything mono: dateline bars, slugs, day counters, source notes. This is
   the role the technical family exists for; do not use it decoratively. */

.dateline {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--telex);       /* fill-only hue carrying ink — correct use */
    padding: 0.55rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    border: var(--rule);
}
.dateline__sep { opacity: 1; }

.slug {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin: 0 0 0.5rem;
    display: block;
}
/* --ink-quiet is a paper-only colour. On any colour ground it fails AA, so
   every coloured surface must restate the slug colour — bands AND blocks.
   The fill-only hue carries ink, never white. */
.band--wire .slug, .band--embargo .slug,
.band--stamp .slug, .band--ink .slug,
.block--wire .slug, .block--embargo .slug,
.block--stamp .slug, .block--ink .slug { color: var(--on-colour); }
.block--fill .slug { color: var(--ink); }

/* The ornament: punched paper tape. Regular, unlike the haik stripes of the
   heritage site — perforation is a machine artifact and evenness is the point. */
.tape {
    height: 14px;
    border: 0;
    margin: 0;
    background:
        repeating-linear-gradient(90deg,
            var(--ink) 0 6px, transparent 6px 20px),
        var(--telex);
}

.end-mark {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    letter-spacing: 0.3em;
    color: var(--ink-quiet);
    text-align: center;
    padding: 2rem 0;
}

/* ---- Bands and blocks ---------------------------------------------------- */

.band { padding-block: var(--band-y); background: var(--paper); }
.band--sunk    { background: var(--paper-sunk); }
.band--wire    { background: var(--wire); color: var(--on-colour); }
.band--embargo { background: var(--embargo); color: var(--on-colour); }
.band--stamp   { background: var(--stamp); color: var(--on-colour); }
.band--ink     { background: var(--ink); color: var(--on-colour); }

/* Links inherit --wire, which is a paper-only value on a coloured ground.
   Every coloured surface must restate it — bands AND blocks. --block--fill
   carries ink, never white. */
.band--wire a, .band--embargo a, .band--stamp a, .band--ink a,
.block--wire a, .block--embargo a, .block--stamp a, .block--ink a { color: var(--on-colour); }
.block--fill a { color: var(--ink); }

/* Anything that dims text on a colour ground must be re-checked: 85% white
   composites well below AA on a mid hue. Full --on-colour is safe on all four. */
.band--wire .caption, .band--embargo .caption,
.band--stamp .caption, .band--ink .caption { color: var(--on-colour); }

.cols { display: grid; gap: 2px; background: var(--ink); border: var(--rule); }
@media (min-width: 720px) { .cols--2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.block { padding: clamp(1.15rem, 0.9rem + 1.3vw, 2rem); background: var(--paper-sunk); }
.block--wire    { background: var(--wire); color: var(--on-colour); }
.block--embargo { background: var(--embargo); color: var(--on-colour); }
.block--stamp   { background: var(--stamp); color: var(--on-colour); }
.block--fill    { background: var(--telex); color: var(--ink); }
.block--paper   { background: var(--paper); }

/* ---- Masthead ------------------------------------------------------------ */

.masthead { border-bottom: var(--rule); background: var(--paper); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding: 1.25rem 0; }
.masthead__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
    letter-spacing: -0.04em;
    margin: 0;
}
.masthead__name a { color: var(--ink); text-decoration: none; }
/* The mark (#11): square, hard-edged like everything else, sat on the cap height. */
.masthead__mark { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.3em; vertical-align: -0.08em; }
.masthead__tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-quiet); }
/* The nav (#15): five mono links, the current one on a stamp-red rule. Right
   of the name from 720px, its own row under it on a phone. Each link is a
   44px tap target. */
.masthead__nav {
    display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-left: auto;
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
}
.masthead__nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent;
}
.masthead__nav a:hover { border-bottom-color: var(--ink); }
.masthead__nav a[aria-current] { border-bottom-color: var(--stamp); }
@media (max-width: 719px) {
    .masthead__nav { flex-basis: 100%; margin-left: 0; }
    .masthead__inner { padding-bottom: 0.4rem; }
}

/* ---- Story blocks -------------------------------------------------------- */

.story { border-bottom: var(--rule); padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }
.story:last-child { border-bottom: 0; }
.story__num {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    color: var(--stamp);
    letter-spacing: 0.1em;
}
.story--lead .story__title { font-size: var(--t-h2); }
.story__title { font-size: var(--t-h3); margin: 0.35rem 0 0.6rem; }
.story__signal {
    border-left: 6px solid var(--embargo);
    padding: 0.15rem 0 0.15rem 0.9rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-body);
}
.story__signal strong { font-family: var(--font-display); letter-spacing: -0.01em; }
.story__source {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    word-break: break-all;
    margin: 0;
}

.daycount {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 0.2rem 0.5rem;
}

/* ---- Counting ------------------------------------------------------------ */

/* The facts line under a brief's lead (#19): quiet mono, what the brief
   holds and how long it takes. */
.facts { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--ink-quiet); }

/* The tally on the index (#19): five unequal blocks in .cols, the first on
   wire and wider, one big number each over a slug. Two columns on a phone,
   the first block across both. */
.cols--tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--tally > :first-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
    .cols--tally { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
    .cols--tally > :first-child { grid-column: auto; }
}
.cols--tally a.block { color: var(--ink); text-decoration: none; }
.cols--tally a.block:hover .tally__n { text-decoration: underline; text-decoration-thickness: 3px; }
.cols--tally .slug { margin-bottom: 0; }
.tally__n {
    display: block; margin-bottom: 0.4rem;
    font-family: var(--font-display); font-weight: 800; font-size: var(--t-h2);
    letter-spacing: -0.03em; line-height: 1;
}

/* The sources table (#19): slug headings on a rule, ruled rows, numbers in
   tabular mono on the right. */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-quiet); text-align: left;
    padding: 0 0.75rem 0.5rem 0; border-bottom: var(--rule);
}
.table td { padding: 0.55rem 0.75rem 0.55rem 0; border-top: 1px solid var(--ink); vertical-align: top; overflow-wrap: anywhere; }
.table tbody tr:first-child td { border-top: 0; }
.table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table td:last-child, .table th:last-child { padding-right: 0; white-space: nowrap; }

/* ---- Lists --------------------------------------------------------------- */

.watch { list-style: none; padding: 0; margin: 0; }
.watch li { border-top: 1px solid var(--ink); padding: 0.85rem 0; }
.watch li:first-child { border-top: 0; }

/* The archive list (#15): on the index grouped by week under a slug heading
   on a rule, on the stories index flat. The day in mono, the headline in the
   reading face, the meta in quiet mono under it; from 720px the meta takes a
   third column. */
.archive { list-style: none; padding: 0; margin: 0; }
.archive__week { margin: 1.75rem 0 0; padding-bottom: 0.4rem; border-bottom: var(--rule); font-weight: 500; line-height: 1.4; }
.archive li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.15rem 1rem; padding: 0.7rem 0; border-top: 1px solid var(--ink); }
.archive > li:first-child { border-top: 0; }
.archive__date, .archive__meta {
    font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em;
    color: var(--ink-quiet); padding-top: 0.3rem;
}
.archive__date { text-transform: uppercase; }
.archive__title { grid-column: 2; font-weight: 600; color: var(--ink); line-height: 1.35; text-decoration: none; }
.archive__title:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.archive__meta { grid-column: 2; padding-top: 0; }
@media (min-width: 720px) {
    .archive li { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
    .archive__meta { grid-column: 3; padding-top: 0.3rem; white-space: nowrap; }
}

/* The share row at the end of a brief (#15): mono buttons like the player's,
   in the closing band above the pager. The three that need script stay
   hidden until it runs; the status line keeps its height so nothing jumps. */
.share { margin: 0 0 var(--gap); }
.share__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share__btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem;
    border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.share__btn:hover { background: var(--ink); color: var(--paper); }
.share__btn[hidden] { display: none; }
.share__status {
    min-height: 1.5em; margin: 0.5rem 0 0;
    font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-quiet);
}

/* Previous / next brief at the end of a brief (#13). Two paper cells on an ink
   rule, like .cols; the date is a slug and the headline is set in the display
   face. The newest brief points on to the archive; the oldest has a dead cell. */
.pager { display: grid; gap: 2px; background: var(--ink); border: var(--rule); }
@media (min-width: 720px) { .pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pager__link {
    display: block; padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    background: var(--paper); color: var(--ink); text-decoration: none;
}
.pager__link--next { text-align: right; }
.pager .slug { margin-bottom: 0.4rem; }
.pager__title {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: var(--t-lead); letter-spacing: -0.02em; line-height: 1.15;
}
a.pager__link:hover .pager__title { text-decoration: underline; text-decoration-thickness: 3px; }
div.pager__link .pager__title { color: var(--ink-quiet); }

/* ---- Figures ------------------------------------------------------------- */

.figure { margin: 0 0 1.5rem; }
.figure__frame { border: var(--rule); padding: 1rem; overflow-x: auto; background: var(--paper); }
.figure__frame svg { display: block; width: 100%; min-width: 560px; height: auto; }
.caption { font-size: var(--t-sm); color: var(--ink-quiet); margin: 0.75rem 0 0; }

/* ---- Cover picture ------------------------------------------------------- */
/* The one photograph on a page: a story's own share image, hotlinked and
   credited. It opens the first band, above the dateline, so it is seen
   before a long headline pushes it off screen. Paper bands only — the credit
   uses paper-only ink. */

.cover { margin: 0 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); max-width: 62rem; }
.cover__frame {
    border: var(--rule);
    background: var(--paper-sunk);
    aspect-ratio: 1.91 / 1;
    overflow: hidden;
}
.cover__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cover__credit {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin: 0.6rem 0 0;
}

/* ---- Hero ---------------------------------------------------------------- */
/* The opening of a brief and of the index (#13). On a phone the picture and
   the player come first and the headline under them. From 900px the picture
   and player sit left at 2fr and the dateline, headline and lead right at
   3fr, so the first screen carries the brief and not a borrowed picture. A
   picture whose hotlink died sets .hero--text and the grid collapses. */
.hero { display: grid; gap: var(--gap); align-items: start; }
.hero .cover, .hero .listen { max-width: none; }
.hero__text > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
    .hero { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
    .hero--text { grid-template-columns: minmax(0, 1fr); }
    .hero__media > :last-child { margin-bottom: 0; }
}

/* ---- Listen player ------------------------------------------------------- */
/* The audio version. Without script: a mono label over the browser's own
   <audio controls preload="none">. With js/listen.js (html.js is set in the
   head before paint): the .listen__player card, a skin over that same
   <audio>, plus the docked .dock once playback starts and the card scrolls
   away. Paper only — the time and note use paper-only ink. */

.listen {
    margin: 0 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); max-width: 40rem;
    padding: 0.75rem 0.9rem 0.9rem; border: var(--rule); background: var(--paper);
}
.listen__label {
    margin: 0 0 0.5rem; font-family: var(--font-mono); font-size: var(--t-xs);
    letter-spacing: 0.08em; text-transform: uppercase;
}
.listen audio { display: block; width: 100%; height: 40px; }

.listen__player { display: none; }
.js .listen { padding: 0; }
.js .listen__label, .js .listen audio { display: none; }
.js .listen__player { display: grid; grid-template-columns: 88px minmax(0, 1fr); }

.listen svg, .dock svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.listen__play svg { fill: currentColor; stroke: none; }
.listen__i-pause, .is-playing .listen__i-play { display: none; }
.is-playing .listen__i-pause { display: block; }

.listen__play {
    display: grid; place-items: center;
    border: 0; border-right: var(--rule); border-radius: 0;
    background: var(--wire); color: var(--on-colour); cursor: pointer;
}
.listen__play:hover { background: var(--ink); }
.listen__play:focus-visible { outline-color: var(--on-colour); outline-offset: -9px; }
.is-loading .listen__play svg { opacity: 0.55; }

.listen__main { padding: 0.85rem 1rem 0.6rem; min-width: 0; }
.listen__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    margin: 0; font-family: var(--font-mono); font-size: var(--t-xs);
}
.listen__title { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.listen__time { color: var(--ink-quiet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-error .listen__title { color: var(--stamp); }

/* The track is a ruled bar: wire for what has played, sunk paper for the rest. */
.listen__seek {
    --p: 0%;
    display: block; width: 100%; height: 28px; margin: 0.4rem 0 0.2rem;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.listen__seek::-webkit-slider-runnable-track {
    height: 8px; border: 2px solid var(--ink);
    background: linear-gradient(to right, var(--wire) var(--p), var(--paper-sunk) var(--p));
}
.listen__seek::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 22px; margin-top: -9px;
    border: 0; border-radius: 0; background: var(--ink);
}
.listen__seek::-moz-range-track { height: 8px; border: 2px solid var(--ink); background: var(--paper-sunk); }
.listen__seek::-moz-range-progress { height: 8px; background: var(--wire); }
.listen__seek::-moz-range-thumb { width: 12px; height: 22px; border: 0; border-radius: 0; background: var(--ink); }
.listen__seek:focus-visible { outline: 3px solid var(--wire); outline-offset: 2px; }

.listen__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; margin-left: -0.5rem; }
.listen__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-width: 44px; min-height: 44px; padding: 0 0.5rem;
    border: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink);
    font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; cursor: pointer;
}
.listen__btn:hover { background: var(--ink); color: var(--paper); }
.listen__btn[hidden] { display: none; }
.listen__rate { min-width: 56px; min-height: 32px; margin: 0 0.25rem; border-color: var(--ink); font-variant-numeric: tabular-nums; }
.listen__note {
    margin: 0 0 0 auto; font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--ink-quiet); white-space: nowrap;
}

/* Read-along (#7). On a brief whose recording carries paragraph times, the block
   the voice is reading: a sunk-paper tint 8px beyond the text with a 3px wire rule
   on its left edge, both box-shadows so nothing moves (the offset shadow shows only
   past the spread one; the rule ends 11px out, inside the 20px gutter). On the wire
   band the tint is the band's blue deepened with a fifth of ink (white type keeps
   more than its 7:1) and the rule is --on-colour. The signal keeps
   its embargo rule and only gains the tint. While playing, timed blocks are tap targets. */
[data-t] { scroll-margin-top: 1.5rem; scroll-margin-bottom: 96px; }
.is-listening [data-t] { cursor: pointer; }
.is-reading {
    background: var(--paper-sunk);
    box-shadow: 0 0 0 8px var(--paper-sunk), -3px 0 0 8px var(--wire);
    transition: background-color 0.15s, box-shadow 0.15s;
}
.story__signal.is-reading { box-shadow: 0 0 0 8px var(--paper-sunk); }
.band--wire .is-reading {
    background: color-mix(in srgb, var(--wire) 80%, var(--ink));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--wire) 80%, var(--ink)), -3px 0 0 8px var(--on-colour);
}

/* The dock: full width along the bottom, paper with one ink rule, progress on top. */
.dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--paper); border-top: var(--rule);
}
.dock[hidden] { display: none; }
.dock__bar { height: 4px; background: var(--paper-sunk); }
.dock__bar span { display: block; width: 0; height: 100%; background: var(--wire); }
.dock__row { display: flex; align-items: center; gap: 0.9rem; min-height: 60px; }
.dock__play { flex: none; width: 44px; height: 44px; border: 0; }
.dock__play svg { width: 22px; height: 22px; }
.dock__play:focus-visible { outline-color: var(--wire); outline-offset: 2px; }
.dock__title {
    flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none;
}
.dock__title:hover { text-decoration: underline; }
.dock__time {
    flex: none; margin: 0; font-family: var(--font-mono); font-size: var(--t-xs);
    color: var(--ink-quiet); font-variant-numeric: tabular-nums;
}
.dock__close {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.dock__close:hover { background: var(--ink); color: var(--paper); }
.has-dock body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 480px) {
    .js .listen__player { grid-template-columns: 64px minmax(0, 1fr); }
    .listen__main { padding: 0.75rem 0.75rem 0.5rem 0.85rem; }
    .listen__more, .dock__dur { display: none; }
    .dock__row { gap: 0.6rem; }
    .dock__title { font-size: var(--t-sm); }
}

.lead { font-size: var(--t-lead); }
.kicker {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Buttons and focus --------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; min-height: 48px;
    padding: 0.7rem 1.3rem;
    background: var(--ink); color: var(--paper);
    font-family: var(--font-display); font-weight: 700;
    text-decoration: none; border: 2px solid var(--ink); border-radius: 0;
}
.btn--ghost { background: transparent; color: var(--ink); }

.skip-link {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
.skip-link:focus {
    top: 1rem; left: 50%; transform: translateX(-50%);
    width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
    padding: 1rem; background: var(--ink); color: var(--paper); z-index: 1000;
}

a:focus-visible, button:focus-visible {
    outline: 3px solid var(--wire); outline-offset: 2px;
}
.band--wire a:focus-visible, .band--embargo a:focus-visible,
.band--stamp a:focus-visible, .band--ink a:focus-visible { outline-color: var(--paper); }

.site-footer { border-top: var(--rule); padding-block: 2rem; font-size: var(--t-sm); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}