/* ==========================================================================
   Rogue AI Stories

   One system: docs/DESIGN-SYSTEM.md, taken from the reference design in
   refference/rogue-ai-stories.html. An editorial record printed on paper — a
   condensed display face for the masthead, a serif to read, a monospace to
   label. Rules between things, not boxes around them.

   Two rules outlive the reference and are not negotiable here:
   - nothing is smaller than 0.875rem;
   - colour means tone. The five tone colours appear only on tone chips and the
     left rule of a Told item. Everything else is ink on paper.

   Contents
   1.  Tokens
   2.  Base
   3.  Type
   4.  Header and footer
   5.  Links, buttons, chips, labels
   6.  Homepage
   7.  Stories
   8.  Submission form
   9.  Notices, about, blog
   10. Sign-in
   11. Editorial desk
   12. Small screens
   ========================================================================== */

/* 1. Tokens ================================================================
   The only place in this file a hex value may appear. */

:root {
    --paper: #F3EFE5;
    --paper-2: #EAE5D8;
    --ink: #171816;
    --ink-2: #454740;
    --muted: #55564F;
    --line: #B8B6AC;
    --surface: #FFFFFF;   /* the editorial desk: a workspace, not the paper record */

    /* The palette — one per tone, used nowhere else. */
    --brilliant: #5B34C9;
    --comedy: #C98A00;
    --cringe: #676972;
    --costly: #B24811;
    --dangerous: #BE1C29;

    --f-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    --f-body: 'Source Serif 4', Georgia, serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 2.75rem;
    --s-8: 4rem;
    --gutter: 4.5%;
    --wrap: 97.5rem;

    --radius-chip: 2px;
}

/* 2. Base ================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--s-5); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }

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

/* The gutter is taken from the width, not added as padding, so a rule drawn on a .wrap
   element stops at the text column as in the reference, instead of running to the window edge. */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip { position: absolute; top: -100px; left: var(--s-5); z-index: 3; background: var(--paper); padding: var(--s-3); }
.skip:focus { top: var(--s-3); }

/* 3. Type ==================================================================
   Serif to read, at weight 500 with strong negative tracking for headings. */

h1, h2, h3, h4 { margin: 0; font-family: var(--f-body); font-weight: 500; text-wrap: balance; }

h1 { font-size: clamp(2rem, 3.5vw, 3.3rem); letter-spacing: -0.045em; line-height: 1.08; }
h2 { font-size: clamp(2.2rem, 3vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.08; }
h3 { font-size: 1.75rem; letter-spacing: -0.04em; line-height: 1.15; }
h2 em, h1 em { font-style: normal; }

p { margin: 0 0 var(--s-4); }

.prose { max-width: 65ch; }
.prose p { margin-bottom: var(--s-5); }
/* A body's own headings and rules: sized down from the page's, and given room. A story's
   section heading is not competing with its headline. */
.prose h2 { margin: var(--s-7) 0 var(--s-4); font-size: 1.75rem; letter-spacing: -0.04em; }
.prose h3 { margin: var(--s-6) 0 var(--s-3); font-size: 1.375rem; letter-spacing: -0.03em; }
.prose > :first-child { margin-top: 0; }
.prose hr { margin: var(--s-6) 0; border: 0; border-top: 1px solid var(--line); }

.lede, .dek, .standfirst {
    max-width: 30em;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--muted);
}

.hint, .note, .helper, .error { font-size: 1rem; color: var(--muted); }

/* The label a record carries: section marks, dates, sources. Mono, uppercase,
   tracked — at a readable size, never below the floor. */
.mono,
.eyebrow,
.meta,
.byline,
.kicker,
.section-note,
.record-date,
.record-count,
.count,
.label,
.strapline,
.back {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.065em;
    line-height: 1.6;
    text-transform: uppercase;
}

.eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-5); color: var(--ink); }
.eyebrow strong { font-weight: 500; }

.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--muted); }
.meta strong { font-weight: 500; color: var(--ink); }

.byline { margin: 0 0 var(--s-5); color: var(--muted); }

/* 4. Header and footer ===================================================== */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    min-height: 5.875rem;
    border-bottom: 1px solid var(--ink);
}

/* The logo: ROGU, a rotated E, an ink square, and AI STORIES in mono. */
.logo {
    display: flex;
    align-items: center;
    font: 800 2.5rem/0.9 var(--f-display);
    text-decoration: none;
    white-space: nowrap;
}

.logo .e { display: inline-block; transform: rotate(-8deg); }

.logo .dot,
.masthead .dot {
    display: inline-block;
    align-self: flex-start;
    width: 7px;
    height: 7px;
    margin: 1px 8px 0 2px;
    background: var(--ink);
    transform: rotate(8deg);
}

.logo small { margin-left: var(--s-2); font: 400 0.875rem var(--f-mono); letter-spacing: 0.14em; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3) var(--s-5); }

.site-nav a,
.action {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.site-nav a:hover { text-decoration: underline; }

.action { border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2); white-space: nowrap; }
.action:hover { border-bottom-width: 2px; }

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    margin-top: var(--s-8);
    padding: var(--s-6) 0 var(--s-7);
    border-top: 2px solid var(--ink);
}

.site-footer .logo { font-size: 1.75rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.site-footer nav a, .site-footer .mono { font-family: var(--f-mono); font-size: 0.875rem; }

/* 5. Links, buttons, chips, labels ========================================= */

/* The read link: mono, underlined, an arrow set apart. */
.read,
.text-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-6);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--ink);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.text-link { gap: var(--s-3); }
.read:hover, .text-link:hover { border-bottom-width: 2px; }

.back { display: inline-block; margin-bottom: var(--s-5); text-decoration: none; color: var(--muted); }
.back:hover { color: var(--ink); }

/* Buttons are for submitting forms, and nothing else. */
.button,
.secondary {
    display: inline-block;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-3) var(--s-5);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { background: var(--paper); color: var(--ink); }

.secondary { background: transparent; color: var(--ink); }
.secondary:hover { background: var(--paper-2); }

/* A tone chip. Text takes whichever of ink or paper reads better on that tone. */
.chip {
    display: inline-block;
    border-radius: var(--radius-chip);
    padding: 0.2rem 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.065em;
    line-height: 1.3;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
}

.chip.brilliant { background: var(--brilliant); color: var(--paper); }
.chip.comedy { background: var(--comedy); color: var(--ink); }
.chip.cringe { background: var(--cringe); color: var(--paper); }
.chip.costly { background: var(--costly); color: var(--paper); }
.chip.dangerous { background: var(--dangerous); color: var(--paper); }

/* A plain label — "unverified", "AI writer" and the like. Ruled, not coloured. */
.notice, .example-flag, .status, .ai-flag {
    display: inline-block;
    border: 1px solid var(--ink);
    padding: 0.15rem 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.status { border-color: var(--line); color: var(--muted); }
.status.published { border-color: var(--ink); color: var(--ink); }
.status.flagged { background: var(--ink); color: var(--paper); }

/* An AI byline's label. The same ruled label in the muted register, so the name reads
   first and the label qualifies it rather than shouting over it. */
.ai-flag { border-color: var(--line); color: var(--muted); }

.example-banner {
    border: 1px solid var(--ink);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); color: var(--muted); }
.kicker .lane { font-weight: 500; color: var(--ink); }

/* Watch for: a ruled box with an ink label block. */
.watch {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-top: var(--s-6);
    padding: var(--s-3);
    border: 1px solid var(--line);
}

.watch strong {
    flex: 0 0 auto;
    background: var(--ink);
    color: var(--paper);
    padding: 0.4rem 0.65rem;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    white-space: nowrap;
}

.watch p { margin: 0; font-size: 1.1875rem; line-height: 1.4; }

/* What it said: the machine's own words, in the machine's face. */
.said { border-top: 1px solid var(--ink); padding-top: var(--s-3); }
.said .label { display: block; margin-bottom: var(--s-3); color: var(--muted); }
.said blockquote, .said p { margin: 0; font-family: var(--f-mono); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

/* 6. Homepage ============================================================== */

.intro { border-bottom: 2px solid var(--ink); }

/* The masthead and statement on the left, the digest sign-up beside them — starting at the
   top of the section, because the space next to a masthead this size is otherwise dead.
   A fixed measure rather than a fraction: a form stretched to whatever is left over reads
   as an accident, and its fields end up wider than anything anyone types into them. */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s-8); align-items: start; padding-bottom: var(--s-6); }
.intro-masthead { min-width: 0; }

/* The one dashed box on the site, at the publisher's direction: it marks the only thing on
   the page asking the reader for something rather than giving them something. */
.digest { margin: var(--s-5) 0 0; padding: var(--s-5); border: 3px dashed var(--ink); }
/* Level with the edition line rather than jammed under the header rule. */
.intro .digest { margin-top: var(--s-5); }
.digest h2 { margin-bottom: var(--s-3); color: var(--muted); }
.digest p { font-size: 1rem; max-width: 34em; }
.digest-form { display: grid; gap: var(--s-3); }
.digest-form label { display: grid; gap: var(--s-1); font-size: 1rem; }
.digest-form .check { display: flex; align-items: flex-start; gap: var(--s-3); }
.digest-form .check input { margin-top: 0.25rem; }
.digest-form .button { justify-self: start; }
.digest-form .small { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.digest .flash { margin: 0; }

.edition { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); }

.masthead {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font: 800 clamp(2.75rem, 7.6vw, 8rem) / 0.92 var(--f-display);
    letter-spacing: -0.028em;
    text-transform: uppercase;
    white-space: nowrap;
}

.masthead .e { display: inline-block; transform: rotate(-7deg); }
.masthead .dot { width: 0.075em; height: 0.075em; margin: 0.045em 0.015em 0; }
.masthead .rest { margin-left: 0.25em; }

.intro-statement {
    max-width: 22em;
    margin: var(--s-5) 0 var(--s-7);
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.intro-statement strong { font-weight: 600; }

.lead {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 5%;
    padding-block: var(--s-6) var(--s-7);
    border-bottom: 1px solid var(--ink);
}

.lead h2 { font-size: clamp(2rem, 3.5vw, 3.3rem); }
.lead h2 a { text-decoration: none; }
.lead h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lead .dek { margin: var(--s-5) 0; }
.lead-aside { display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); }

figure { margin: 0; }
figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; mix-blend-mode: multiply; display: block; }

figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.section { padding-block: var(--s-7) var(--s-8); border-bottom: 1px solid var(--ink); }

.section-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4) var(--s-5);
    margin-bottom: var(--s-6);
}

.section-heading .eyebrow { margin-bottom: var(--s-3); }
.section-heading > p { margin: 0; font-size: 1rem; color: var(--muted); }
.section-note { margin: 0; color: var(--muted); }

.lanes { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-8); }
.lanes.single { grid-template-columns: 1fr; }

/* Reported alone, with no Told column beside it: a newspaper grid. Each card is its own
   column under an ink rule — image above the headline, the same parts as the list row. */
.reported-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--s-6) var(--s-7); }
.reported-grid .reported-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--ink); border-bottom: 0; }
.reported-grid .lane-thumb { grid-column: 1; order: -1; }
.reported-grid .reported-item h3 { font-size: 1.375rem; }

.lane-head { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); }
.lane-head h2 { margin-bottom: var(--s-2); }

.told-list, .reported-list { display: grid; }

/* A Told item carries its tone on a 4px left rule — one of the two places a tone colour may appear. */
.told-item { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: var(--s-5); align-items: start; padding: var(--s-5) 0 var(--s-5) var(--s-4); border-left: 4px solid var(--line); border-bottom: 1px solid var(--line); }
.told-item:has(.lane-thumb) .example-flag + * { margin-top: 0; }
.told-item.brilliant { border-left-color: var(--brilliant); }
.told-item.comedy { border-left-color: var(--comedy); }
.told-item.cringe { border-left-color: var(--cringe); }
.told-item.costly { border-left-color: var(--costly); }
.told-item.dangerous { border-left-color: var(--dangerous); }

.told-item h3 a, .reported-item h3 a { text-decoration: none; }
.told-item h3 a:hover, .reported-item h3 a:hover { text-decoration: underline; }
.told-item .standfirst { margin: var(--s-2) 0 var(--s-3); }
.told-item .foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; }

/* Reported: denser, and visually subordinate by design. */
.reported-item { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.reported-item .standfirst { margin: var(--s-2) 0 var(--s-3); font-size: 1rem; color: var(--muted); }
.reported-item h3 { font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.3; }
.reported-item .meta { margin-top: var(--s-2); }

/* A lane thumbnail. Multiply so a generated image's white ground takes the paper, the same
   treatment as the story figure and the archive row. A story without one leaves the cell
   empty: the column keeps its width so headlines stay aligned. */
.lane-thumb { display: block; grid-column: 2; }
.lane-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; mix-blend-mode: multiply; }
.lane-text { min-width: 0; }
.lead-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; mix-blend-mode: multiply; }

.lane-foot { margin-top: var(--s-5); color: var(--muted); }

.empty-head { margin-bottom: var(--s-2); font-size: 1.75rem; letter-spacing: -0.04em; }
.empty { max-width: 65ch; font-size: 1rem; color: var(--muted); }

/* Patterns: a native <details> each, three to a row. */
.pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }

.pattern-grid details { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line); }
.pattern-grid details:nth-child(3n + 2),
.pattern-grid details:nth-child(3n + 3) { border-left: 1px solid var(--line); padding-left: var(--s-5); }

.pattern-grid summary { cursor: pointer; list-style: none; }
.pattern-grid summary::-webkit-details-marker { display: none; }
.pattern-grid h3 { margin: var(--s-4) 0 var(--s-3); }
.pattern-grid summary p { margin: 0 0 var(--s-5); font-size: 1rem; color: var(--muted); }
.pattern-no { color: var(--muted); }

.expand { display: flex; justify-content: space-between; }
.expand b { font-size: 1.1875rem; font-weight: 400; line-height: 1; }
details[open] .expand b { transform: rotate(45deg); }

.detail { margin: var(--s-5) 0 var(--s-3); font-size: 1rem; color: var(--ink-2); }

/* The invitation: a big statement left, the working right. It sits above the footer on every
   page, so it is ruled off from the page above it and the footer's own rule closes it. */
.case-note {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 10%;
    padding-block: var(--s-8);
    border-top: 1px solid var(--ink);
}

.section + .case-note, .index-body + .case-note { border-top: 0; }
.case-note + .site-footer { margin-top: 0; }
.case-note h2 { font-size: clamp(2.6rem, 4.5vw, 4rem); }
.case-note .button { margin-top: var(--s-2); }
.case-note .small { margin-top: var(--s-5); font-size: 1rem; color: var(--muted); }

/* 7. Stories =============================================================== */

.index-body { padding-block: var(--s-6) var(--s-8); }

.index-body > .section-heading { padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); }
.index-body > .section-heading h1 { font-size: clamp(2.2rem, 3vw, 2.6rem); }

/* One row per story: the thumbnail, then the headline with its standfirst under it. The
   whole row is the link. An imageless story keeps the column, so headlines stay in line. */
.record-list { display: grid; border-top: 1px solid var(--ink); }

.record { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-5); align-items: start; padding-block: var(--s-5); border-bottom: 1px solid var(--line); text-decoration: none; }
.record:hover { background: var(--paper-2); }
.record h2 { margin-bottom: var(--s-2); font-size: 1.75rem; letter-spacing: -0.04em; }
.record:hover h2 { text-decoration: underline; }
.record p { margin: 0 0 var(--s-3); max-width: 60em; font-size: 1rem; color: var(--muted); }
.record .meta { align-items: center; }
.record-text { min-width: 0; }
.record-thumb { align-self: start; }
.record-thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; mix-blend-mode: multiply; display: block; }

/* "What to sit with": the panel between a story and its sources. Ruled, not boxed; the
   lists in reading type, their headings as mono labels. No colour — it is not a verdict. */
.reflection { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.reflection h2 { margin-bottom: var(--s-2); font-size: 1.75rem; letter-spacing: -0.04em; }
.reflection-takeaway { margin: var(--s-3) 0 var(--s-4); max-width: 46em; font-size: 1.1875rem; }
.reflection-group { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.reflection-group h3 { margin-bottom: var(--s-3); color: var(--muted); }
.reflection-group ul { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-5); }
.reflection-group li { max-width: 60em; }
.reflection-hmw { margin: var(--s-5) 0 0; max-width: 60em; }
.reflection-hmw .label { display: block; margin-bottom: var(--s-2); color: var(--muted); }

/* The header is two columns: the words, and the story's image beside them. The back link
   sits above both. A story with no image is one column — .single. */
.story-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 0 var(--s-7);
    align-items: start;
    padding-block: var(--s-6) var(--s-6);
    border-bottom: 1px solid var(--ink);
}

.story-header > .back { grid-column: 1 / -1; }
.story-header.single { grid-template-columns: minmax(0, 1fr); }
.story-header h1 { max-width: 20em; }
.story-header .dek { margin-top: var(--s-5); font-size: 1.125rem; }
.story-header .notice { margin-bottom: var(--s-4); }

/* Capped at the text column's width: at the full page width a 3:2 hero was about 870px
   tall and pushed the story below the fold. The caption is a sentence, not a label. */
.story-figure { margin: 0; }
.story-header.single .story-figure { margin-top: var(--s-6); max-width: 42rem; }
.story-figure figcaption { font-family: var(--f-mono); font-size: 0.875rem; text-transform: none; letter-spacing: 0; }

.story-dates { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); font-family: var(--f-mono); font-size: 0.875rem; letter-spacing: 0.065em; text-transform: uppercase; }
.story-dates .label { color: var(--muted); margin-right: var(--s-2); }
.story-dates strong { font-weight: 500; }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-8); padding-block: var(--s-6); }

/* The body runs the width of its column: the aside already ends it, and a second measure
   inside that leaves a column of blank paper beside every paragraph. */
.story-layout .prose { max-width: none; }

.voices { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.voices .watch { margin-top: 0; }

.record-block { margin-bottom: var(--s-6); }
.record-block h2 { margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink); font-size: 1.75rem; letter-spacing: -0.04em; }

.source { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-bottom: 1px solid var(--line); text-decoration: none; }
.source:last-child { border-bottom: 0; }
.source small { font-family: var(--f-mono); font-size: 0.875rem; letter-spacing: 0.065em; text-transform: uppercase; color: var(--muted); }
.source strong { font-weight: 500; }
.source:hover strong { text-decoration: underline; }

/* Sources: the primary record first, then coverage. The groups are told apart by weight
   and position — a heavier label and a rule under it — never by colour. */
.source-group + .source-group { margin-top: var(--s-6); }
.source-group h3 { margin: 0; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); }

/* A post reads as a newspaper column: the full width of the page, set in two columns with a
   rule between them, above 78rem where a column is still a comfortable measure. Below that
   it is one column — two narrow ones on a laptop is a worse read, not a more newspapery one.

   The trade is real and was made on purpose: a reader reaches the bottom of the left column
   and scrolls back up for the right. A newspaper page does not scroll; this one does. It is
   right for a short piece and wrong for a long one, which is a judgement to make per post
   rather than a rule the CSS can know. */
.post-body { max-width: none; padding-block: var(--s-6) var(--s-8); }

@media (min-width: 78rem) {
    .post-body { columns: 2; column-gap: var(--s-8); column-rule: 1px solid var(--line); }
    /* A heading that lands at the foot of a column takes its paragraph with it. */
    .post-body h2, .post-body h3 { break-after: avoid; break-inside: avoid; }
    .post-body p, .post-body li { break-inside: avoid-column; }
    .post-body > :first-child { margin-top: 0; }
}
.post-body h2 { margin: var(--s-6) 0 var(--s-3); }
.post-body h3 { margin: var(--s-5) 0 var(--s-2); }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

/* 8. Submission form ======================================================= */

.story-form { max-width: 44rem; padding-block: var(--s-6) var(--s-8); }

.story-form-head { padding-bottom: var(--s-5); border-bottom: 2px solid var(--ink); }
.story-form-head h1 { margin-bottom: var(--s-5); font-size: clamp(2.2rem, 3vw, 2.6rem); }
.story-form-head .lede { font-size: 1.125rem; color: var(--ink); }

.reassurances { list-style: none; margin: var(--s-5) 0 0; padding: 0 0 0 var(--s-4); border-left: 1px solid var(--ink); font-size: 1rem; color: var(--ink-2); }
.reassurances li + li { margin-top: var(--s-2); }

.story-form form { margin-top: var(--s-6); }

.story-form fieldset { border: 0; border-top: 1px solid var(--ink); padding: var(--s-5) 0 var(--s-2); margin: 0; }

.story-form legend {
    padding: 0 var(--s-3) 0 0;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.field { margin-bottom: var(--s-5); }

label, .field .label {
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--f-body);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

label em, .field .label em, .permission em { font-style: normal; font-weight: 400; color: var(--muted); }

.helper { margin: 0 0 var(--s-2); }

input, textarea, select {
    width: 100%;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    padding: var(--s-2) var(--s-3);
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ink);
}

input:focus, textarea:focus, select:focus { outline: 3px solid var(--ink); outline-offset: 2px; background: var(--paper-2); }

textarea { resize: vertical; }

/* The AI's own words, in the face reserved for them. */
.said textarea { font-family: var(--f-mono); font-size: 1rem; }

input[type='checkbox'], input[type='radio'] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.3rem 0 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--ink);
}

.when { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-2); }

.choices { display: grid; gap: var(--s-2); }

.choice, .permission, .check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
    font-size: 1.125rem;
    font-weight: 400;
    cursor: pointer;
}

.choice, .check { margin-bottom: 0; align-items: center; }
.choice input, .check input { margin-top: 0; }
.permission span { color: var(--ink-2); }
.permission-title { display: block; margin-bottom: var(--s-1); }
.permission strong { color: var(--ink); font-weight: 600; }

.permissions .intro { max-width: 32em; margin-bottom: var(--s-5); }

.field-error { margin: var(--s-2) 0 0; font-size: 1rem; font-weight: 600; color: var(--ink); }

.form-errors, .errors, .flash {
    margin: var(--s-5) 0 0;
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    border-left: 3px solid var(--ink);
    font-size: 1rem;
}

.form-errors ul, .errors ul { margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.form-errors li + li, .errors li + li { margin-top: var(--s-2); }
.flash { margin-bottom: var(--s-5); font-weight: 600; }

[aria-invalid='true'] { border-width: 2px; }

.send { margin-top: var(--s-6); }

/* The honeypot: off the page rather than display:none, so a script that fills
   every input still finds it. Out of the tab order, so nobody else does. */
.off-page { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 9. Notices, about, blog ================================================== */

.story-note { max-width: 46rem; padding-block: var(--s-6) var(--s-8); }
.story-note h1 { margin-bottom: var(--s-5); font-size: clamp(2.2rem, 3vw, 2.6rem); }
.story-note .lede { font-size: 1.125rem; color: var(--ink); max-width: 65ch; }

.notice-section { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.notice-section h2 { margin-bottom: var(--s-2); font-size: 1.75rem; letter-spacing: -0.04em; }
.notice-section .lede { margin: 0; }
.reference { font-family: var(--f-mono); font-weight: 500; white-space: nowrap; }

/* 10. Sign-in ============================================================= */

.auth { display: grid; gap: var(--s-6); max-width: 32rem; padding-block: var(--s-8); }
.auth form { display: grid; gap: var(--s-4); }

/* 11. Editorial desk ======================================================= */

.admin { padding-block: var(--s-6) var(--s-8); }
.admin h1 { font-size: clamp(2.2rem, 3vw, 2.6rem); }

.table-wrap { margin-top: var(--s-5); border-top: 1px solid var(--ink); overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 1rem; }

thead th {
    padding: var(--s-3) var(--s-4) var(--s-3) 0;
    border-bottom: 1px solid var(--ink);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.065em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: var(--paper-2); }
td strong { display: block; font-weight: 500; }
td small { display: block; margin-top: var(--s-1); font-family: var(--f-mono); font-size: 0.875rem; color: var(--muted); }

.editor-form { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.admin fieldset { border: 1px solid var(--line); padding: var(--s-5); margin: 0; }
.admin legend { padding: 0 var(--s-2); font-family: var(--f-body); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* The editorial desk is a place to read and work, not the printed record: a plain white
   ground, white fields with a firm edge, section headings in plain sentence case, and the
   form held to a reading width rather than stretched across the screen. Public pages are
   untouched. docs/DESIGN-SYSTEM.md, "The editorial desk". */
body:has(.admin) { background: var(--surface); }
.admin input, .admin textarea, .admin select { background: var(--surface); border-color: var(--ink-2); font-size: 1rem; }
.admin input:focus, .admin textarea:focus, .admin select:focus { background: var(--surface); }
.admin input:disabled { background: var(--paper-2); color: var(--ink-2); }
.admin label { font-size: 1rem; font-weight: 600; }
.admin .hint { display: block; margin-top: var(--s-1); font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); }
.admin .editor-form, .admin .review-panel, .admin .review-sources { max-width: 56rem; }
.admin .editor-form textarea { line-height: 1.6; }
.admin .review-sources h2 { font-family: var(--f-body); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }

.checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.tight { margin: 0; }
.stack { display: grid; gap: var(--s-3); }

.nested { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.nested:first-of-type { border-top: 0; padding-top: var(--s-2); }

.danger-zone { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.danger-zone button, .logout button { font-family: var(--f-mono); font-size: 0.875rem; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--ink); }

/* The desk's shell: a menu down the left on paper, the work on the right on --surface.
   docs/DESIGN-SYSTEM.md, "The editorial desk". */
.desk { background: var(--surface); }
.desk-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
.desk-nav { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: var(--s-5); height: 100vh; overflow-y: auto; padding: var(--s-5); background: var(--paper); border-right: 1px solid var(--ink); }
.desk-mark { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); text-decoration: none; }
.desk-mark .logo { font-size: 2rem; }
.desk-nav nav { display: grid; gap: var(--s-1); }
.desk-nav nav .label { margin: var(--s-4) 0 var(--s-1); color: var(--muted); }
.desk-nav nav a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) var(--s-3); font-size: 1rem; font-weight: 500; text-decoration: none; }
.desk-nav nav a:hover { background: var(--paper-2); }
.desk-nav nav a[aria-current='page'] { background: var(--ink); color: var(--paper); }
.desk-nav .count, .desk-tabs .count { font-family: var(--f-mono); font-size: 0.875rem; }
.desk-nav .logout { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.desk-main { min-width: 0; padding: var(--s-5) var(--s-6) var(--s-8); }
.desk-main .flash { margin-top: 0; }
.desk-main .admin { padding-top: 0; }

/* Dashboard numbers: each one a link to the list it counts. Ruled, never coloured. */
.desk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); border-top: 2px solid var(--ink); border-left: 1px solid var(--line); }
.desk-stats .stat { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.desk-stats .stat:hover { background: var(--paper-2); }
.desk-stats strong { font-size: clamp(2.2rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.desk-stats small { font-size: 1.25rem; color: var(--muted); letter-spacing: 0; }
.desk-stats .label { color: var(--ink-2); }

.desk-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.desk-panel { display: grid; align-content: start; gap: 0; }
.desk-panel h2 { margin: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.desk-panel .hint { margin-top: var(--s-3); }
.desk-panel .text-link { justify-self: start; margin-top: var(--s-4); }
.desk-row { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); text-decoration: none; }
.desk-row:hover { background: var(--paper-2); }
.desk-row strong { font-size: 1rem; font-weight: 500; }
.desk-row small { font-size: 0.9375rem; color: var(--muted); }

/* The story list's status tabs and filter bar. */
.desk-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); border-bottom: 1px solid var(--ink); }
.desk-tabs a { display: inline-flex; gap: var(--s-2); align-items: baseline; padding: var(--s-2) var(--s-4); font-size: 1rem; font-weight: 500; text-decoration: none; }
.desk-tabs a:hover { background: var(--paper-2); }
.desk-tabs a[aria-current='page'] { background: var(--ink); color: var(--paper); }
.desk-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.desk-filter label { display: grid; gap: var(--s-1); }
.desk-filter input[type=search] { min-width: 16rem; }
.admin td .text-link { white-space: nowrap; }
/* 12. Small screens ======================================================== */

@media (max-width: 72rem) {
    .intro { grid-template-columns: 1fr; gap: var(--s-5); }
    .intro .digest { margin-top: var(--s-4); }
    .masthead { font-size: clamp(3.25rem, 10.5vw, 10rem); }
}

@media (max-width: 56rem) {
    .site-header { padding-block: var(--s-4); }
    .lead, .lanes, .case-note, .story-layout { grid-template-columns: 1fr; gap: var(--s-6); }
    .story-header { grid-template-columns: minmax(0, 1fr); }
    .story-header .story-figure { margin-top: var(--s-5); }
    .reported-grid { gap: var(--s-5); }
    .pattern-grid { grid-template-columns: 1fr 1fr; }
    .pattern-grid details:nth-child(n) { border-left: 0; padding-left: 0; }
    .pattern-grid details:nth-child(2n) { border-left: 1px solid var(--line); padding-left: var(--s-5); }
    .watch { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .record { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); }
    .record h2 { font-size: 1.375rem; }
    .told-item, .reported-item { grid-template-columns: minmax(0, 1fr) 8rem; gap: var(--s-4); }
    .field-grid { grid-template-columns: 1fr; }
    .desk-shell { grid-template-columns: 1fr; }
    .desk-nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--ink); }
    .desk-mark { border-bottom: 0; padding-bottom: 0; }
    .desk-nav nav { display: flex; flex-wrap: wrap; width: 100%; }
    .desk-nav nav .label { display: none; }
    .desk-nav .logout { margin-top: 0; padding-top: 0; border-top: 0; }
    .desk-main { padding-inline: 6%; }
    .desk-filter input[type=search] { min-width: 0; }
}

@media (max-width: 37.5rem) {
    :root { --gutter: 6%; }
    .logo { font-size: 1.75rem; }
    .logo small { display: none; }
    .site-nav { width: 100%; justify-content: space-between; gap: var(--s-3); }
    .masthead { font-size: 11.5vw; }
    .pattern-grid { grid-template-columns: 1fr; }
    .pattern-grid details:nth-child(n) { border-left: 0; padding: var(--s-5) 0; }
    .site-footer nav, .site-footer .mono { width: 100%; }
    .record { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); }
    .record h2 { font-size: 1.1875rem; line-height: 1.25; }
    .record p { margin-bottom: var(--s-2); font-size: 0.9375rem; }
    /* A thumbnail beside a headline on a phone leaves four words a line. Above it instead. */
    .told-item, .reported-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
    .lane-thumb { grid-column: 1; order: -1; }
    .lane-thumb img { max-height: 11rem; }

    /* Cards rather than a sideways scroll that squeezes every title to a word a line. */
    .table-wrap { overflow-x: visible; }
    .table-wrap thead { display: none; }
    .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
    .table-wrap tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
    .table-wrap td { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-1) 0; border: 0; }
    .table-wrap td[data-label]:not([data-label=''])::before {
        content: attr(data-label);
        flex: 0 0 6rem;
        font-family: var(--f-mono);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.065em;
        color: var(--muted);
    }
    .table-wrap td:first-child::before { display: none; }
}

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

/* A lead with neither image nor the AI's words takes the full width. */
.lead.single { grid-template-columns: 1fr; }
.lead.single .story { max-width: 48rem; }

/* The review panel on an incident's edit page: what the filer checked and what nothing
   automated could. Ink rules and the existing error list — no new colour. */
.review-panel { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.review-panel .errors { margin: 0; list-style: none; }
.review-panel .eyebrow { margin-bottom: var(--s-2); }

/* The editorial queue: flags under a title, and the ingest log's own page. */
.queue-flags { display: block; margin-top: var(--s-1); font-family: var(--f-mono); font-size: 0.875rem; color: var(--ink); }
.ingest-facts { display: grid; gap: var(--s-2); margin: var(--s-5) 0; }
.ingest-facts div { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ingest-facts dd { margin: 0; }
.payload { overflow-x: auto; padding: var(--s-4); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.review-notes p { margin-bottom: var(--s-3); }

/* A link to a source, in the admin: it has to read as a link at a glance, not as a label.
   Reading size, ink, underlined. */
.source-open { display: inline-block; margin-top: var(--s-2); font-size: 1rem; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.source-open:hover { text-decoration-thickness: 2px; }

/* The review box: the story's sources, each opening the original. */
.review-sources { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--line); }
.review-sources ol { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.review-sources li .label { margin-right: var(--s-2); color: var(--muted); }

/* The body field's toolbar. Not a rich-text editor: it puts the marks in for you and shows
   what the page will make of them. docs/DESIGN-SYSTEM.md, "The editorial desk". */
.prose-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
    margin-bottom: var(--s-2);
}

.prose-tool {
    border: 1px solid var(--ink-2);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    padding: var(--s-2) var(--s-3);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    cursor: pointer;
}

.prose-tool:hover { background: var(--paper-2); }

/* Preview sits at the other end of the bar: it looks at the body rather than changing it. */
.prose-preview-toggle { margin-left: auto; }

.prose-link { display: flex; gap: var(--s-2); flex: 1 1 18rem; }
.prose-link input { flex: 1; min-width: 0; }
.prose-link input[aria-invalid="true"] { border-color: var(--dangerous); }

.admin .prose-preview {
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    padding: var(--s-4) var(--s-5);
    margin-top: var(--s-3);
    background: var(--paper);
}

.admin .prose-preview[aria-busy="true"] { opacity: 0.5; }
.admin .prose-preview > :first-child { margin-top: 0; }
.admin .prose-preview > :last-child { margin-bottom: 0; }

/* Lists in a body. Indented to the text, not hanging off the measure, and spaced like
   paragraphs rather than crammed — these are steps somebody is meant to follow. */
.prose ul, .prose ol { margin: var(--s-4) 0; padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-3); }
.prose li:last-child { margin-bottom: 0; }
.prose li > strong:first-child { display: inline; }

/* The formatted editor, when it loads. It sits where the textarea was and is held to the
   same measure; the toolbar above it keeps only the Markdown switch, because the editor
   brings its own. If it never loads, none of this applies and the textarea is untouched. */
.prose-wysiwyg {
    border: 1px solid var(--ink-2);
    background: var(--surface);
    min-height: 24rem;
}

.prose-wysiwyg .milkdown { background: var(--surface); }
.prose-wysiwyg .ProseMirror { padding: var(--s-4) var(--s-5); font-family: var(--f-body); font-size: 1rem; line-height: 1.6; }
.prose-wysiwyg .ProseMirror:focus { outline: none; }
.prose-wysiwyg .ProseMirror h2 { font-size: 1.5rem; }
.prose-wysiwyg .ProseMirror h3 { font-size: 1.25rem; }

.prose-mode { margin-right: auto; }

/* On Trial. The note sits above the exchange, at full width, before a reader reaches a word
   of what the model said — the same placement as the example banner, for the same reason. */
.trial-note { display: block; margin-bottom: var(--s-5); text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 1rem; }
.trial-note strong { font-weight: 600; }

.trial-parent { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.trial-parent h2 { margin-bottom: var(--s-4); font-size: 1.25rem; }