/* ═══════════════════════════════════════════════════════════════════════════
   COURIER — theme stylesheet. Phase 23c.7 (SKELETON: chrome only).
   Structure BANDED: the page is a vertical stack of full-width, edge-to-edge
   bands, each with its own background tint, each holding a centred container.

   Class prefix ........ cr-
   Container ........... 1160px inside every band (§4.8)
   Measure ............. 72ch for running prose (§4.8)
   Palette ............. paper #FDFBF4 · ink #211E1A · ochre #A8791F
   Type ................ DM Serif Display headlines · DM Sans body/UI
   Site mark ........... A DROPPED INITIAL: one ochre letter in DM Serif Display
                         with no container, the wordmark nesting into it on two
                         lines (§4.6.6/§7.1, decided 2026-09-18). The ochre band
                         it replaced LAPSED — it read as a square.

   THE BAND IS THE ONE PRIMITIVE. `.cr-band` is the full-bleed tint and
   `.cr-band__inner` the centred 1160px container. Declared once here; every
   module in later prompts reuses the pair rather than re-centring itself. The
   chrome is built from the same primitive — top bar, masthead, nav, breaking
   ticker and stock ticker are five separate bands (§4.6.2 #1, #2, #3, #5, #6),
   which is exactly how courier's chrome differs from ledger's and sentinel's.

   HOW THIS FILE IS WRITTEN — the lessons ledger and sentinel paid for:
   - Shared-partial class names are read from the partials themselves, not
     assumed to be BEM (§3.2): .newsletter-form, .news-ticker__list,
     .search-overlay__input, .stock-ticker-updated, .ad-slot__label.
   - State classes are COMPOUND selectors (§5.1), written that way from the
     first line rather than retrofitted: .search-overlay.is-hidden and
     .nav-drawer.is-hidden. A bare .is-hidden ties on specificity with the
     element's own display declaration and loses on source order — that is what
     left ledger's overlay painted open on load.
   - ONE rule set: no rule written and then overridden later, no patch blocks
     appended after the fact, and no forced-priority declarations.
   - `picture { display: contents }` is REQUIRED by
     themes/_shared/partials/responsive_image.html.jinja so the wrapper does not
     disturb the <img> layout.
   - No dark mode. Courier is a light theme; §4.6.2 #34 gives it a light footer.

   Colours are custom properties on :root so the §15 per-site override mechanism
   can reach them without editing this file.

   This file covers the CHROME ONLY. The homepage bands, the module overrides,
   the article variants and the category page are later prompts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. Design tokens
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Ink */
    --ink: #211E1A;
    --ink-soft: #46413A;
    --ink-mute: #767065;

    /* Paper */
    --paper: #FDFBF4;
    --paper-soft: #FFFEFA;
    --paper-deep: #F5F1E4;

    /* Accent — ochre */
    --accent: #A8791F;
    --accent-soft: #C79A45;
    --accent-deep: #7E5814;
    --accent-tint: rgba(168, 121, 31, 0.10);

    /* Band tints (§4.6.1) — all light, all derived from paper and ochre, no new
       accent colours. These four are what a band alternates through. */
    --band-paper: #FDFBF4;
    --band-stone: #F4F0E4;
    --band-ochre: #F7EFDC;
    --band-ivory: #FAF6EA;

    /* Rules */
    --rule: #DED8C6;
    --rule-soft: #ECE7D9;

    /* Type */
    --font-headline: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Scale (§4.6.4, ceiling per §4.8) */
    /* Hero 1's headline, and nothing else (.cr-hero__title is the only consumer).
       REDUCED 2026-09-17 after Khalaf's visual review: the 64px ceiling put an
       84-character headline on SEVEN lines at 470px tall beside a 411px image,
       which is what made the block read cramped. The new ceiling sits between
       sentinel's 38px and ledger's 48px — the range the estate already uses for
       a hero — so every headline in the review data lands on three to four
       lines instead of five to seven. */
    --size-display: clamp(28px, 3.2vw, 40px);
    --size-h1: clamp(38px, 4.6vw, 58px);
    --size-h2: clamp(28px, 3vw, 40px);
    --size-h3: 20px;
    --size-body: 16px;
    --size-meta: 13px;
    --lh-tight: 1.05;
    --lh-head: 1.25;
    --lh-body: 1.7;

    /* Layout (§4.8: 1160 inside bands, 72ch measure) */
    --max-width: 1160px;
    --measure: 72ch;
    --gutter: 24px;

    /* Vertical rhythm. --band-pad-y is the standard top/bottom padding of a
       content band; the chrome bands override it because they are thin by
       design. A build choice, not a spec figure — §4.8's 64px is the DISPLAY
       CEILING, not a gutter. */
    --band-pad-y: 56px;
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 56px;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Reset and base
   ─────────────────────────────────────────────────────────────────────────── */

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

body.cr-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--accent-deep);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

/* Required by themes/_shared/partials/responsive_image.html.jinja. */
picture {
    display: contents;
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    font-weight: 400;
    color: var(--ink);
    margin: 0;
}

p {
    margin: 0 0 1em;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--space-lg) 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Utilities
   ─────────────────────────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Bare utility: decides the outcome only for an element that declares no
   `display` of its own. The two elements chrome.js toggles carry their own
   COMPOUND rules in §5.5. */
.is-hidden {
    display: none;
}

.cr-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 16px;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
}

.cr-skip-link:focus {
    left: 0;
    color: var(--paper);
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Layout primitives — THE BAND
   ─────────────────────────────────────────────────────────────────────────── */

/* Full-bleed tint. A band spans the viewport; only its inner container is
   constrained. The default tint is paper; every other band sets its own. */
.cr-band {
    width: 100%;
    background: var(--band-paper);
}

.cr-band__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* THE FOUR TINTS OF §4.6.1, as modifiers. The SEQUENCE lives in
   homepage.html.jinja, in one place, with its reasoning; these are the four
   shades it draws on. Three roles, never an alternation of two:

     NARRATIVE  paper + ivory alternate through the editorial bands. Close
                enough that the change reads as a breath, not a new section.
     PAUSE      stone marks a change of register — Markets, Most Read, the Long
                read — and carries every thin ad band, so an ad never interrupts
                a narrative tint.
     INTERRUPT  ochre is the accent, spent only FOUR times on the whole page.
                It always means "stop here". */

.cr-band--paper {
    background: var(--band-paper);
}

.cr-band--ivory {
    background: var(--band-ivory);
}

.cr-band--stone {
    background: var(--band-stone);
}

.cr-band--ochre {
    background: var(--band-ochre);
}

/* An ad band. Thin by definition (§4.6.2 #23-#25, #29, #30): it carries no
   module, so the vertical rhythm comes from the container rather than a block. */
.cr-band--thin > .cr-band__inner {
    padding-block: var(--space-md);
}

/* The two full-bleed bands — the photo essay and an article hero — have no
   centred container at all: the picture IS the band (§4.6.2 #14). */
.cr-band--hero {
    background: var(--band-stone);
}

.cr-main {
    display: block;
}

/* .container / .section / .main-content come from the inherited _shared/pages,
   which are not band-aware; give them the same centred container. */
.container,
.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    margin-bottom: var(--space-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CHROME — §7A header (18 elements) and §7B footer (11), as five stacked
   bands above the content and one closing band below it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5.1 Utility band — §7A #2, §4.6.2 #1: "its own thin band (stone tint)".
       Carries #3 date, #4 edition, #5 kicker, #6 About/Contact, #11 social,
       #12 RSS. */

.cr-band--utility {
    background: var(--band-stone);
    border-bottom: 1px solid var(--rule);
}

.cr-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 40px;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-soft);
}

.cr-utility__meta,
.cr-utility__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cr-utility__sep {
    color: var(--rule);
}

.cr-utility__kicker {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cr-utility__links {
    display: flex;
    gap: var(--space-sm);
}

.cr-utility__link:hover {
    color: var(--accent-deep);
}

.cr-utility__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-utility__social-link {
    display: inline-flex;
    align-items: center;
    color: var(--ink-soft);
}

.cr-utility__social-link:hover {
    color: var(--accent);
}

.cr-utility__rss {
    padding-left: var(--space-sm);
    border-left: 1px solid var(--rule);
}

/* 5.2 Masthead band — §7A #7–#10, §4.6.2 #2: "its own band: centred DM Serif
       Display wordmark with tagline".

       THE MARK (§4.6.6, decided by Khalaf 2026-09-18): A DROPPED INITIAL. ONE
       letter — the first character of site_initials — in DM Serif Display, ochre,
       with NO container: no fill, no border, no rule, no box of any kind. The
       wordmark nests into it on two lines and the letter's height spans both, the
       way a drop cap opens a magazine feature.

       THE OCHRE BAND THIS REPLACED HAS LAPSED. It set the initials on a strip
       that bled past them on both sides so the mark was itself a band. Khalaf's
       ruling on visual review: it read as a square with initials in it whatever
       it was built from. Not to be reimplemented.

       THE SIZES ARE MEASURED FROM THE FACE, NOT CHOSEN. DM Serif Display's
       cap-height is 0.660em (0.695em on round caps, which overshoot normally),
       ascent 1.040em, descent 0.335em. Two wordmark lines at --lh-tight are
       2 x 1.05 = 2.1em of wordmark, so the letter must be 2.1 / 0.660 = 3.18x the
       wordmark for its cap to span them. calc() locks the two together at every
       viewport width — a second clamp could drift out of step with the first.

       line-height 0.66 makes the letter's box exactly its own cap height, which
       puts the cap top at the box top; the small margin-top then drops it by the
       wordmark's own half-leading so the two cap tops align rather than the two
       boxes. align-items: flex-start is what holds the drop-cap relationship. */

.cr-band--mast {
    background: var(--band-paper);
}

.cr-mast {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
    text-align: center;
}

.cr-mast__brand {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.cr-mast__mark {
    display: block;
    margin-top: 0.046em;
    color: var(--accent);
    font-family: var(--font-headline);
    font-size: calc(var(--size-h1) * 3.18);
    line-height: 0.66;
}

/* The column the wordmark and tagline share. Its width is what makes the
   wordmark WRAP — one line for a short site name, two for a typical one, three
   for a long one — and the constraint sits here rather than on the wordmark so
   the tagline, which is set in a different face at a different size, wraps to the
   same measure instead of widening the column behind it. */
.cr-mast__names {
    display: flex;
    flex-direction: column;
    max-width: calc(var(--size-h1) * 7);
    text-align: left;
}

.cr-mast__wordmark {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    line-height: var(--lh-tight);
    color: var(--ink);
}

.cr-mast__tagline {
    display: block;
    margin: var(--space-sm) 0 0;
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink-mute);
}

/* 5.3 Nav band — §7A #13–#16, §4.6.2 #3: "its own sticky band with an ochre
       bottom border; centred DM Sans links". */

.cr-band--nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--band-ivory);
    border-bottom: 2px solid var(--accent);
}

.cr-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 52px;
}

.cr-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--rule);
    background: transparent;
    cursor: pointer;
}

.cr-nav__toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
}

.cr-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.cr-nav__link {
    display: inline-block;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.cr-nav__link:hover {
    border-bottom-color: var(--accent-soft);
    color: var(--accent-deep);
}

.cr-nav__link.is-active {
    border-bottom-color: var(--accent);
}

.cr-nav__search {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.cr-nav__search-icon {
    font-size: 22px;
    line-height: 1;
}

.cr-nav__search:hover {
    color: var(--accent);
}

/* 5.4 Ticker bands — §7A #17 and #18, §4.6.2 #5 (pale ochre) and #6 (stone).
       Two separate bands, stacked. The shared partials supply their own exact
       class names (§3.2); the band wrapper is courier's, so the tint runs edge
       to edge while the content stays in the 1160px container. */

.cr-band--ticker {
    background: var(--band-ochre);
}

.cr-band--stocks {
    background: var(--band-stone);
    border-bottom: 1px solid var(--rule);
}

.news-ticker {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    overflow: hidden;
}

.news-ticker__label {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.news-ticker__track {
    flex: 1 1 auto;
    overflow: hidden;
}

.news-ticker__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    white-space: nowrap;
}

.news-ticker__item {
    flex: 0 0 auto;
}

.news-ticker__link {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink);
}

.news-ticker__link:hover {
    color: var(--accent-deep);
}

.stock-ticker {
    /* The mount is empty in the HTML: stock_ticker.js injects the track and items at
       runtime, and it deliberately renders the twelve items twice so the marquee can
       wrap seamlessly. That only reads as one line if this box clips it. */
    --ticker-up: #2C6A4A;
    --ticker-down: #A33227;
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
}

.stock-ticker-track {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    animation: stock-ticker-scroll 40s linear infinite;
}

.stock-ticker:hover .stock-ticker-track {
    animation-play-state: paused;
}

.stock-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
    color: var(--ink-soft);
}

.stock-ticker-name {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.stock-ticker-price {
    font-weight: 500;
}

.stock-ticker-change.up {
    color: var(--ticker-up);
    font-weight: 600;
}

.stock-ticker-change.down {
    color: var(--ticker-down);
    font-weight: 600;
}

.stock-ticker-updated {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-sm);
    background: var(--paper-soft, #F8F4EE);
    border-left: 1px solid var(--rule);
    color: var(--ink-mute);
    font-size: 10px;
    pointer-events: none;
}

@keyframes stock-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    /* No scrolling, so the row has to be reachable by hand instead: the track becomes a
       normal flex row the reader can swipe, rather than a clipped smear. */
    .stock-ticker {
        overflow-x: auto;
    }

    .stock-ticker-track {
        animation: none;
    }

    .stock-ticker-updated {
        position: static;
        height: auto;
        border-left: 0;
    }
}
/* 5.5 Nav drawer and search overlay — shared partials, toggled by chrome.js.

       §5.1: the hidden state is written as a COMPOUND selector against each
       element. A bare `.is-hidden` has the same specificity (0,1,0) as the
       component's own `display` rule below and would lose on source order,
       leaving the overlay painted open with a dead close button. Written this
       way from the first line rather than discovered later. */

.nav-drawer.is-hidden,
.search-overlay.is-hidden {
    display: none;
}

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    background: rgba(33, 30, 26, 0.45);
}

.nav-drawer__inner {
    width: min(86vw, 360px);
    height: 100%;
    padding: var(--space-md);
    background: var(--paper);
    overflow-y: auto;
}

.nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule);
}

.nav-drawer__brand {
    font-family: var(--font-headline);
    font-size: var(--size-h3);
}

.nav-drawer__close {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.nav-drawer__categories {
    margin-top: var(--space-sm);
}

.nav-drawer__item {
    border-bottom: 1px solid var(--rule-soft);
}

.nav-drawer__link {
    display: block;
    padding: 12px 0;
    font-family: var(--font-ui);
    font-size: 15px;
}

.nav-drawer__search-trigger {
    margin-top: var(--space-md);
    padding: 10px 14px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh var(--gutter) 0;
    background: rgba(33, 30, 26, 0.55);
}

.search-overlay__inner {
    width: min(100%, 640px);
    padding: var(--space-lg);
    background: var(--paper);
}

.search-overlay__form {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.search-overlay__label {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.search-overlay__input {
    flex: 1 1 auto;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-ui);
    font-size: 16px;
    color: var(--ink);
}

.search-overlay__submit {
    padding: 12px 20px;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.search-overlay__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--paper);
    cursor: pointer;
}

/* 5.6 Newsletter band — §7B #1, §4.6.2 #33: "its own band above the footer".
       Shared partial; exact emitted names per §3.2. */

.cr-band--newsletter {
    background: var(--band-ochre);
    border-top: 1px solid var(--rule);
}

.newsletter {
    padding: var(--band-pad-y) 0;
    text-align: center;
}

.newsletter-inner {
    max-width: 640px;
    margin: 0 auto;
}

.newsletter-heading {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.newsletter-subline {
    margin-top: var(--space-sm);
    color: var(--ink-soft);
}

.newsletter-form {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
}

.newsletter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.newsletter-input {
    flex: 1 1 320px;
    max-width: 380px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink);
}

.newsletter-button {
    padding: 12px 22px;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.newsletter-button:hover {
    background: var(--accent-deep);
}

.newsletter-status {
    margin-top: var(--space-sm);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 5.7 Footer band — §7B #2–#11, §4.6.2 #34: "light footer band (stone tint):
       4 columns in the container". Courier has no dark chrome. */

.cr-band--footer {
    background: var(--band-stone);
    border-top: 2px solid var(--accent);
}
.cr-footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--band-pad-y) 0 var(--space-lg);
}

.cr-footer__brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
}

/* THE FOOTER IS A DIFFERENT TREATMENT, DELIBERATELY (§4.6.6, §7B #2).

   A dropped initial is inseparable from the two lines it drops into, and the
   footer wordmark is a single 20px line — there is nothing to drop into. Scaling
   the header's letter down would leave one oversized ochre glyph beside a short
   name with no evident reason for its size: a blob, not a mark.

   So the footer sets the SAME single letter as a RUN-IN initial — ochre, in the
   headline face, 30px against the wordmark's 20px, baseline-aligned inline with
   it (the baseline alignment is on .cr-footer__brand). Same idea, one ochre
   letter in the display face leading the name, in the form the smaller space
   actually supports. §7.1.1 requires the mark to survive its small use; it does
   not require the small use to be the same shape. */

.cr-footer__mark {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-headline);
    font-size: 30px;
    line-height: 1;
}

.cr-footer__wordmark {
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    color: var(--ink);
}

.cr-footer__tagline {
    margin: var(--space-sm) 0 0;
    font-size: 14px;
    color: var(--ink-mute);
}

.cr-footer__heading {
    margin-bottom: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.cr-footer__heading--spaced {
    margin-top: var(--space-lg);
}

.cr-footer__links li,
.cr-footer__social li {
    margin-bottom: var(--space-xs);
}

.cr-footer__links a,
.cr-footer__social-link {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink-soft);
}

.cr-footer__links a:hover,
.cr-footer__social-link:hover {
    color: var(--accent-deep);
}

.cr-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) 0 var(--space-lg);
    border-top: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.cr-footer__copy,
.cr-footer__meta {
    margin: 0;
}

/* 5.8 Ad slots — shared partial, exact emitted names (§3.2). Chrome only needs
       the footer position; the nine homepage and article positions are styled
       with their bands in a later prompt. */

/* Centred in its band. This is COURIER'S rule, not an inherited one: the shared
   ad_slot partial carries no inline style, no text-align and no margin of its
   own, and ledger and sentinel each centre it in their own stylesheets. Courier
   needs only the alignment — the band's `.cr-band__inner` already supplies the
   1160px container and the gutter, so repeating ledger's max-width/margin/padding
   here would nest one container inside another. */
.ad-slot {
    display: block;
    text-align: center;
}

.ad-slot__label {
    display: block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* The house-ad fallback is an <a>, so it needs inline-block for its padding and
   border to form a box at all — an inline element's vertical padding does not
   affect the line box. Without it the centred placeholder would be a bare line
   of text rather than the framed slot it is meant to look like. */
.ad-slot--house .house-ad {
    display: inline-block;
    padding: var(--space-md);
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MODULES — every §6 module is one band; these style what sits inside it
   ═══════════════════════════════════════════════════════════════════════════ */

/* 6.1 The block — a module's heading rule and its vertical rhythm.
       The block, not the band, carries the top/bottom padding: the band is only
       a tint, so a band that holds no block (an ad band) stays thin without
       needing an exception. */

.cr-block {
    padding-block: var(--band-pad-y);
}

.cr-block__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.cr-block__heading {
    flex: 0 0 auto;
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
    color: var(--ink);
}

.cr-block__rule {
    flex: 1 1 auto;
    height: 2px;
    background: var(--accent);
}

.cr-block__more {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

/* 6.2 The n-up rows (§4.6.1): 1-up to 5-up, simple rows inside the container.
       NEVER a spanning tile grid — that is dispatch's mechanism. Equal columns
       only, so nothing can acquire a span. */

.cr-grid {
    display: grid;
    gap: var(--space-lg);
}

.cr-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.cr-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.cr-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.cr-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

/* The two ranked columns of Most Read hold their own <ol>, so the numerals stay
   1-5 and 6-10 in source order for a screen reader too. */
.cr-grid--ranked {
    gap: var(--space-xl);
}

/* 6.3 The item — an image-topped cell in an n-up row. Courier's default listing
       shape: picture above, then meta, then headline. */

.cr-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cr-item__thumb-link {
    display: block;
    overflow: hidden;
}

.cr-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cr-item__cat,
.cr-item__tag {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-item__title {
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    line-height: var(--lh-head);
}

.cr-item__time {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 5 Things leads with type: the numeral sits above the picture (§4.6.2 #17). */
.cr-item--numbered {
    gap: var(--space-xs);
}

.cr-item__numeral {
    font-family: var(--font-headline);
    font-size: 34px;
    line-height: 1;
    color: var(--accent);
}

/* 6.4 The row — a compact entry with its thumbnail BESIDE the headline. Used by
       the stacked third of a split, Most Read, and the category list. */

/* NO RULE BETWEEN ROWS OF THE SAME KIND (polish audit U1, shortlist item 5).
   BANDED already encloses each module in a tinted band, so the band edge is the
   separator and a rule between its rows drew a second boundary inside a
   container that was already one. The symmetric padding-block keeps the rows
   apart without it. */
.cr-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

.cr-row__thumb-link {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
}

.cr-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cr-row__cat {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-row__title {
    font-family: var(--font-headline);
    font-size: 17px;
    line-height: var(--lh-head);
}

.cr-row__deck {
    margin: 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.cr-row__time {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.cr-row__rank {
    flex: 0 0 auto;
    min-width: 28px;
    font-family: var(--font-headline);
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
}
/* The category list is the same row one size up — it is the page's only content
   (§4.6.5), so it carries a deck and more air. */
.cr-row--category {
    gap: var(--space-md);
    padding-block: var(--space-md);
}

.cr-row--category .cr-row__title {
    font-size: 22px;
}

/* 6.5 The lead + split — "asymmetric row, lead 2/3 + 4 stacked items 1/3"
       (§4.6.2 #10) and the topic clusters' 2/3 + 1/3 (§4.6.2 #20). */

.cr-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.cr-lead {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cr-lead__thumb-link {
    display: block;
    overflow: hidden;
}

.cr-lead__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.cr-lead__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cr-lead__cat {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-lead__title {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cr-lead__deck {
    margin: 0;
    font-size: 17px;
    color: var(--ink-soft);
}

.cr-lead__meta {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 6.6 Thumbnails. §4.0: every article listing carries its image, so these sizes
       are load-bearing rather than decorative. */

.cr-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.cr-thumb--wide {
    aspect-ratio: 16 / 9;
}

.cr-thumb--square {
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
}

.cr-thumb--small {
    width: 96px;
    height: 64px;
    aspect-ratio: auto;
}

/* The explicit imageless case: the template renders this span when the article
   genuinely has no image_url. */
.cr-thumb--empty {
    border: 1px solid var(--rule);
    background: var(--paper-deep);
}

/* THE SAME FRAME for a URL the macro REJECTS — whitespace, a bare "/", a blob:
   URL left by a publish race. `{% if art.image_url %}` is a truthiness test and
   passes on all three, so the link renders and the macro then emits nothing,
   leaving the element genuinely empty. ONE rule covers every rejected form,
   rather than copying the macro's gate into sixteen templates where the two
   could drift apart. This is the ledger lesson, paid once. */
.cr-item__thumb-link:empty,
.cr-row__thumb-link:empty,
.cr-lead__thumb-link:empty,
.cr-hero__image-link:empty,
.cr-hero2__image-link:empty,
.cr-essay__link:empty {
    display: block;
    min-height: 64px;
    border: 1px solid var(--rule);
    background: var(--paper-deep);
}

/* 6.7 Hero 1 — "container 2-up, image 7/12 + text 5/12" (§4.6.2 #7). */

.cr-hero {
    position: relative;
    padding-block: var(--band-pad-y);
}

/* Image 8/13, text 5/13 — WIDENED 2026-09-17 from 7/12 + 5/12 (§4.6.2 #7, which
   carries the matching dated correction). At the 1160px container that moves the
   picture from 616px to 650px and the text column from 440px to 406px, so the
   image reads as the lead element it is meant to be and the headline no longer
   towers over it. */
.cr-hero__slide {
    display: grid;
    grid-template-columns: 8fr 5fr;
    gap: var(--space-xl);
    align-items: center;
}

.cr-hero__slide:not(.is-active) {
    display: none;
}

.cr-hero__image-link {
    display: block;
    overflow: hidden;
}

.cr-hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.cr-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cr-hero__cat {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-hero__title {
    font-family: var(--font-headline);
    font-size: var(--size-display);
    line-height: var(--lh-tight);
}

/* THE HEADLINE STEPS DOWN WHEN THE TEXT IS LONG.

   No theme in the estate does this — every `|length` test in the templates counts
   the CAROUSEL's articles, not a title's characters — and there are no container
   queries anywhere either, so there was no existing approach to follow. A clamp
   alone cannot help: it responds to the viewport, never to how much text it has
   to set. The step therefore comes from the one place that knows the length at
   render time, the template, which sets this modifier above 80 characters.

   Written as a COMPOUND selector (§5.1). `.cr-hero__title--long` alone would tie
   with `.cr-hero__title` on specificity and win only by source order — the exact
   fragility that left ledger's overlay painted open. Two classes, no tie.

   Sizes are calibrated from the measured render, not guessed: at 64px in a 440px
   column an 84-character headline set SEVEN lines, giving ~12 characters a line
   and a chars-per-line that scales as column ÷ size. The result is three to four
   lines for everything the review data contains, 59 characters to 90. */
.cr-hero__title.cr-hero__title--long {
    font-size: clamp(24px, 2.8vw, 34px);
}

.cr-hero__deck {
    margin: 0;
    font-size: 18px;
    color: var(--ink-soft);
}

.cr-hero__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 6.8 Hero 2 — STACKED: centred headline ABOVE a wide 21:9 image (§4.6.2 #8).
       Deliberately not a reversed Hero 1, which is clarion's move. */

.cr-hero2 {
    position: relative;
    padding-block: var(--band-pad-y);
}

.cr-hero2__slide {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.cr-hero2__slide:not(.is-active) {
    display: none;
}

.cr-hero2__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    text-align: center;
}

.cr-hero2__cat {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-hero2__title {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cr-hero2__deck {
    margin: 0;
    max-width: 64ch;
    font-size: 17px;
    color: var(--ink-soft);
}

.cr-hero2__time {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.cr-hero2__image-link {
    display: block;
    overflow: hidden;
}

.cr-hero2__image {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* 6.9 Carousel controls — both heroes are carousels (§3.3). hero-carousel.js
       binds the shared names; these are courier's own control skins. */

.cr-carousel__nav {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-md);
}

.cr-carousel__prev,
.cr-carousel__next {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.cr-carousel__prev:hover,
.cr-carousel__next:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.cr-carousel__dots {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-sm);
}

.cr-carousel__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--accent);
    background: transparent;
    cursor: pointer;
}

.cr-carousel__dot.is-active {
    background: var(--accent);
}

/* 6.10 Photo essay — the one module whose image escapes the container: the band
        IS the picture, with a centred overlay (§4.6.2 #14). */

.cr-essay {
    position: relative;
    display: block;
}

.cr-essay__link {
    position: relative;
    display: block;
}

.cr-essay__image {
    display: block;
    width: 100%;
    max-height: 560px;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.cr-essay__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: linear-gradient(rgba(33, 30, 26, 0.15), rgba(33, 30, 26, 0.55));
}

.cr-essay__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    max-width: 720px;
    text-align: center;
    color: var(--paper);
}

.cr-essay__label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cr-essay__title {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cr-essay__deck {
    font-size: 17px;
}

/* With no usable image there is nothing to overlay, so the text sits on the
   band's own tint instead of on white-on-white. */
.cr-essay--no-image .cr-essay__overlay {
    position: static;
    background: var(--band-stone);
}

.cr-essay--no-image .cr-essay__inner {
    color: var(--ink);
}

/* 6.11 Investigation banner — the "pale-ochre loud tint" of §4.6.2 #16, an ochre
        rule and large DM Serif Display. TEXT ONLY: it lists no articles, which is
        why §4.0 exempts it. */

.cr-investigation {
    padding-block: var(--band-pad-y);
    border-left: 4px solid var(--accent);
    padding-left: var(--space-lg);
}

.cr-investigation__label {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-investigation__title {
    margin-top: var(--space-sm);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cr-investigation__body {
    margin: var(--space-sm) 0 0;
    max-width: var(--measure);
    color: var(--ink-soft);
}

/* 6.12 Opinion strip — 3-up, each item with the columnist's HEADSHOT placeholder
        AND the article's own picture (§4.6.2 #15, corrected 2026-09-17). The
        headshot is the columnist's face; it does not satisfy §4.0 on its own. */

.cr-opinion__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cr-opinion__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.cr-opinion__headshot {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--paper-deep);
}

.cr-opinion__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cr-opinion__author {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-weight: 500;
    color: var(--accent-deep);
}

.cr-opinion__title {
    font-family: var(--font-headline);
    font-size: 18px;
    line-height: var(--lh-head);
}

.cr-opinion__empty {
    margin: 0;
    color: var(--ink-mute);
}

/* 6.13 Long read — "centred narrow 680px prose column with an ochre pull quote"
        (§4.6.2 #22). Imageless by design: §4.0 exempts a single pull-quote
        feature, and courier's own row names no picture. */

.cr-longread {
    display: flex;
    justify-content: center;
}

.cr-longread__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 680px;
    text-align: center;
}

.cr-longread__cat {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-longread__title {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cr-longread__quote {
    margin: var(--space-md) 0;
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
    font-family: var(--font-headline);
    font-size: 24px;
    line-height: 1.4;
    color: var(--accent-deep);
}

.cr-longread__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 6.14 Markets strip and the mid-page newsletter */

.cr-markets__strip {
    margin: 0 0 var(--space-lg);
    padding-block: var(--space-sm);
    border-block: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.cr-newsletter-inline {
    padding-block: var(--band-pad-y);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CATEGORY PAGE — a header band, then the list (§4.6.5)
   ═══════════════════════════════════════════════════════════════════════════ */

.cr-cat__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-block: var(--space-lg) var(--band-pad-y);
}

.cr-cat__heading {
    flex: 0 0 auto;
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    line-height: var(--lh-tight);
}

.cr-cat__list {
    padding-block: var(--band-pad-y);
}

.cr-cat__empty {
    padding-block: var(--band-pad-y);
    color: var(--ink-mute);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. ARTICLE PAGES — the same band stack as the homepage (§4.6.5: "the article
   header in its own tinted band"), so an article reads as the same publication
   ═══════════════════════════════════════════════════════════════════════════ */

/* No wider than the theme's content container (2026-10-03): the container's own box, so a
   small photo is not stretched to the full screen width. Crop and height cap below. v2 unchanged. */
.cr-article__hero,
.cr-article-v3__hero {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.cr-article__hero-image,
.cr-article-v3__hero-image {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
}

.cr-article__header,
.cr-article-v2__header,
.cr-article-v3__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block: var(--space-lg) var(--band-pad-y);
}

.cr-article__category {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.cr-article__title {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    line-height: 1.08;
}

.cr-article__deck {
    margin: 0;
    max-width: var(--measure);
    font-size: 19px;
    color: var(--ink-soft);
}

.cr-article__byline {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.cr-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--band-pad-y) var(--space-lg);
}

.cr-article-v2__grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--band-pad-y) var(--space-lg);
}

.cr-article-v3__column {
    max-width: var(--measure);
    margin: 0 auto;
    padding-block: var(--band-pad-y) var(--space-lg);
}

.cr-article__body {
    max-width: var(--measure);
    font-size: var(--size-body);
    line-height: var(--lh-body);
}

.cr-article__body h2,
.cr-article__body h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-family: var(--font-headline);
    line-height: var(--lh-head);
}

.cr-article__body h2 {
    font-size: 28px;
}

.cr-article__body h3 {
    font-size: 22px;
}

.cr-article__body a {
    color: var(--accent-deep);
    text-decoration: underline;
}

.cr-article__body img {
    display: block;
    margin: var(--space-lg) 0;
}

.cr-article__body blockquote {
    margin: var(--space-lg) 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--accent);
    font-family: var(--font-headline);
    font-size: 21px;
    color: var(--accent-deep);
}

.cr-article-v2__hero {
    margin: 0 0 var(--space-lg);
}

.cr-article-v2__hero-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.cr-article-v2__rail {
    position: sticky;
    top: 72px;
}

.cr-article-v2__related {
    padding-block: var(--band-pad-y);
}

.cr-article-v3__tldr,
.cr-article-v3__takeaways,
.cr-article-v3__faq,
.cr-article-v3__qa,
.cr-article-v3__entities,
.cr-article-v3__share {
    margin-block: var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. INHERITED SHARED PARTIALS — exact emitted names, read from the partials
   themselves (§3.2). No BEM is assumed and none is invented.
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumbs {
    padding-block: var(--space-md) 0;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.breadcrumbs-list,
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.breadcrumbs-item,
.breadcrumbs__item {
    display: inline;
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: baseline;
}

.byline-author-name {
    font-weight: 500;
    color: var(--ink);
}

.byline-sep,
.byline-date {
    color: var(--ink-mute);
}

.article-tldr,
.article-key-takeaways,
.article-faq,
.article-qa {
    margin-block: var(--space-lg);
    padding: var(--space-md);
    border-left: 3px solid var(--accent);
    background: var(--paper-deep);
}

.tldr-heading,
.kt-heading,
.faq-heading,
.qa-heading,
.entities-heading,
.related-heading,
.article-tags__heading,
.article-rail__heading,
.article-v3-related__heading {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.tldr-body {
    margin-top: var(--space-xs);
}

.kt-list,
.faq-list,
.qa-list {
    margin-top: var(--space-sm);
}

.kt-list li,
.faq-item,
.qa-item {
    margin-bottom: var(--space-sm);
}

.faq-question,
.qa-question {
    font-family: var(--font-headline);
    font-size: 18px;
}

.article-rail,
.article-v2-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.article-rail__section,
.article-v2-rail__section {
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

.article-rail__chips,
.entities-list,
.article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.article-rail__chip,
.entity-chip,
.article-tags__link {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-soft);
}

.article-rail__chip:hover,
.entity-chip:hover,
.article-tags__link:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.article-rail__share-list,
.social-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.article-rail__share-btn,
.social-share__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink);
    cursor: pointer;
}

.article-rail__share-btn:hover,
.social-share__link:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.social-share__label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.article-entities {
    margin-block: var(--space-lg);
}

.entities-group {
    margin-bottom: var(--space-md);
}

.entities-group__heading {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.article-tags {
    margin-top: var(--space-lg);
}

/* Related — the shared article_card partial, given courier's item shape */

.article-related {
    padding-block: var(--band-pad-y);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.article-card__image-link {
    display: block;
    overflow: hidden;
}

.article-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.article-card__category {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.article-card__title {
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    line-height: var(--lh-head);
}

.article-card__deck,
.article-card__byline {
    font-size: 14px;
    color: var(--ink-soft);
}

/* V3's numbered related list carries no images by design (shared partial) */

.article-v3-related {
    padding-block: var(--band-pad-y);
}

.article-v3-related__list {
    margin-top: var(--space-md);
}

.article-v3-related__item {
    display: flex;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-top: 1px solid var(--rule-soft);
}

.article-v3-related__num {
    font-family: var(--font-headline);
    font-size: 22px;
    color: var(--accent);
}

.article-v3-related__cat {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.article-v3-related__title {
    font-family: var(--font-headline);
    font-size: 17px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding-block: var(--space-lg);
    font-family: var(--font-ui);
    font-size: 14px;
}

.pagination-prev,
.pagination-next {
    padding: 8px 16px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

.pagination-disabled {
    opacity: 0.45;
}

.pagination-status {
    color: var(--ink-mute);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. INHERITED PAGES — themes/_shared/pages, rendered through courier's base.

   The generator produces eleven static pages, an authors index, one page per
   author and one per tag, all from shared templates this theme never overrides.
   Their class names are read from those templates, not assumed: `static_page`,
   `authors`, `author`, `contact`, `archive`, `search`, `tag` and `404`.

   `team.html.jinja` is NOT in this list. generate_static_pages() never renders
   it, which is why `.team-beat` and `.team-social` are absent here — ledger
   styled them in 23c.3 and removed them again as dead rules.

   These pages sit OUTSIDE the band stack: they arrive as a bare `<main>` from a
   shared template, so they take the container directly rather than a tint.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 10.1 Static pages — about, contact, privacy, terms, advertise,
        editorial standards, corrections, and the authors index */

.static-page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--band-pad-y) var(--gutter);
}

.static-page--with-toc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.static-page-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--accent);
}

.static-page-header__kicker {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.static-page-header__title {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    line-height: var(--lh-tight);
}

.static-page-header__subtitle {
    margin: var(--space-xs) 0 0;
    color: var(--ink-mute);
}

.static-page-toc {
    font-family: var(--font-ui);
    font-size: 14px;
}

.static-page-content {
    max-width: var(--measure);
    line-height: var(--lh-body);
}

.static-page-content h2,
.static-page-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-family: var(--font-headline);
    line-height: var(--lh-head);
}

.static-page-content a {
    color: var(--accent-deep);
    text-decoration: underline;
}

.static-lead {
    max-width: var(--measure);
    font-size: 19px;
    color: var(--ink-soft);
}

/* 10.2 Authors index — the team grid */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.team-card-link {
    display: block;
}

.team-card {
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

.team-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--paper-deep);
}

.team-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-avatar__initials {
    font-family: var(--font-headline);
    font-size: 20px;
    color: var(--accent-deep);
}

.team-info {
    margin-top: var(--space-sm);
}

.team-name {
    font-family: var(--font-headline);
    font-size: 19px;
}

.team-title,
.team-location {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.team-bio {
    margin: var(--space-xs) 0 0;
    font-size: 15px;
    color: var(--ink-soft);
}

.team-links {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    font-family: var(--font-ui);
    font-size: 13px;
}

/* 10.3 Author page */

.author-hero {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--accent);
}

.author-hero__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--paper-deep);
}

.author-hero__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-hero__photo-initials {
    font-family: var(--font-headline);
    font-size: 30px;
    color: var(--accent-deep);
}

/* A flex child holding a long bio needs an explicit min-width:0, or the text
   refuses to wrap and pushes the photo out of the row. */
.author-hero__body {
    min-width: 0;
}

.author-hero__name {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.author-hero__meta {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.author-hero__bio {
    margin: var(--space-sm) 0 0;
    max-width: var(--measure);
    color: var(--ink-soft);
}

.author-articles {
    margin-top: var(--band-pad-y);
}

.author-articles__heading {
    margin-bottom: var(--space-lg);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
}

.author-articles__empty {
    color: var(--ink-mute);
}

/* 10.4 Tag page, and the card shape the tag/search/author pages share.
        These `card-*` names are a SECOND card vocabulary, distinct from the
        `article-card__*` the related-articles partial emits — both are real and
        both are styled, because the shared pages use one and the partial the
        other. */

.article-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* tag.html.jinja puts the full-width header OUTSIDE and the container INSIDE, so
   the centring belongs on the inner element. Without this the tag page's heading
   runs to the viewport edge while every other page is centred. */
.taxonomy-header {
    border-bottom: 2px solid var(--accent);
}

.taxonomy-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--band-pad-y) var(--gutter) var(--space-lg);
}

.taxonomy-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.taxonomy-name {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    line-height: var(--lh-tight);
}

.card-image {
    display: block;
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

.card-kicker {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.card-title {
    margin: var(--space-xs) 0 0;
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    line-height: var(--lh-head);
}

.card-excerpt {
    margin: var(--space-xs) 0 0;
    font-size: 15px;
    color: var(--ink-soft);
}

.card-byline {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* 10.5 Contact page */

.contact-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.contact-details,
.contact-journalists {
    margin-bottom: var(--space-lg);
}

.contact-detail-row {
    display: flex;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
    border-bottom: 1px solid var(--rule-soft);
}

.contact-detail-label {
    flex: 0 0 120px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.contact-form,
.contact-form-col {
    display: block;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-bottom: var(--space-sm);
    padding: 10px 12px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}

.form-status {
    margin-top: var(--space-sm);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.contact-journalists__intro {
    color: var(--ink-mute);
}

.contact-journalist-list {
    display: block;
}

.contact-journalist-card {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--rule-soft);
}

.contact-journalist-name {
    font-family: var(--font-headline);
    font-size: 18px;
}

.contact-journalist-title,
.contact-journalist-beat {
    font-size: 13px;
    color: var(--ink-mute);
}

.contact-journalist-email {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--accent-deep);
}

/* 10.6 Archive */

.archive-header {
    padding-block: var(--band-pad-y) var(--space-lg);
    border-bottom: 2px solid var(--accent);
}

.archive-year {
    margin-top: var(--space-xl);
}

.archive-year-heading {
    margin-bottom: var(--space-md);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    color: var(--accent-deep);
}

.archive-list {
    display: block;
}

.archive-item {
    display: flex;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--rule-soft);
}

.archive-item-date {
    flex: 0 0 120px;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

.archive-item-title {
    font-family: var(--font-headline);
    font-size: 17px;
}

/* 10.7 Search page */

.search-hero {
    padding-block: var(--band-pad-y) var(--space-lg);
    border-bottom: 2px solid var(--accent);
}

.search-form {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.search-input {
    flex: 1 1 auto;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-soft);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
}

.search-count {
    margin-bottom: var(--space-lg);
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

/* The three page buttons share one shape */
.search-submit,
.contact-submit,
.btn-home {
    display: inline-block;
    padding: 12px 22px;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.search-submit:hover,
.contact-submit:hover,
.btn-home:hover {
    background: var(--accent-deep);
    color: var(--paper);
}

/* 10.8 404 */

.not-found {
    padding-block: var(--space-xl);
    text-align: center;
}

.not-found-code {
    font-family: var(--font-headline);
    font-size: 96px;
    line-height: 1;
    color: var(--accent);
}

/* 10.9 Small shared bits from the inherited pages */

.sep {
    color: var(--rule);
}

.current {
    color: var(--ink-mute);
}

/* 10.10 Shared article partials with no courier equivalent. The entity groups
         and the share block appear only on article pages and carry no cr- class
         of their own, so they are styled by their emitted names (§3.2). */

.article-v2-rail__entity-group {
    margin-bottom: var(--space-md);
}

.article-v2-rail__entity-group-heading {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.social-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.social-share__icon {
    display: inline-flex;
}

.qa-answer {
    margin-top: var(--space-xs);
    color: var(--ink-soft);
}

.article-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.nav-drawer__nav {
    display: block;
}

/* ───────────────────────────────────────────────────────────────────────────
   11. Responsive — bands stack; the n-up rows narrow rather than rearrange
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .cr-grid--5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cr-grid--4,
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-article__grid,
    .cr-article-v2__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-article-v2__rail {
        position: static;
    }
}

@media (max-width: 900px) {
    .cr-footer__columns {
        grid-template-columns: 1fr 1fr;
    }

    .cr-split,
    .cr-hero__slide {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .cr-grid--ranked {
        gap: var(--space-lg);
    }
}

@media (max-width: 720px) {
    .cr-utility {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }

    .cr-nav__toggle {
        display: flex;
    }

    .cr-nav__list {
        display: none;
    }

    .cr-nav {
        justify-content: space-between;
    }

    .cr-footer__columns {
        grid-template-columns: 1fr;
    }

    .cr-grid--2,
    .cr-grid--3,
    .cr-grid--4,
    .cr-grid--5,
    .related-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-block {
        padding-block: var(--space-xl);
    }
}

/* The inherited pages narrow on the same two breakpoints. */

@media (max-width: 1100px) {
    .article-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .static-page--with-toc {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 720px) {
    .article-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .author-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .contact-detail-row,
    .archive-item {
        flex-direction: column;
        gap: var(--space-xs);
    }
}