/* ═══════════════════════════════════════════════════════════════════════════
   SENTINEL — theme stylesheet. Phase 23c.5 (SKELETON: chrome only).
   Structure WIRE: a trade/financial wire, scanned rather than browsed.

   Class prefix ........ sn-
   Container ........... 1320px; wire column ~70% beside a latest spine ~30%
   Measure ............. 68ch for running prose
   Palette ............. paper #FAF8F3 · ink #1A1A17 · rust #B5462A
   Type ................ Archivo Narrow headlines · IBM Plex Sans body · IBM Plex Mono times
   Site mark ........... OFFSET STAMP: a rust block behind an ink-bordered paper
                         tile, Archivo Narrow 700 initials — an ink stamp pressed
                         onto newsprint (§7.1/§7.1.1, redesigned 2026-09-17)

   HOW THIS FILE IS WRITTEN — the six lessons ledger paid for:
   - Shared-partial class names are read from the partials themselves, not assumed
     to be BEM (§3.2): .news-ticker__list, .newsletter-form, .search-overlay__input.
   - State classes are COMPOUND selectors (§5.1): .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 then overridden later, no patch blocks, 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. Sentinel is a light theme; §4.1 #34 forbids a dark 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 wire column, the latest spine, the nine
   module overrides, the article variants and the category page are later prompts.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
    /* Ink */
    --ink: #1A1A17;
    --ink-soft: #3D3D37;
    --ink-mute: #726F66;

    /* Paper */
    --paper: #FAF8F3;
    --paper-soft: #FDFCF9;
    --paper-deep: #F1EDE4;

    /* Accent — rust */
    --accent: #B5462A;
    --accent-soft: #CC6B50;
    --accent-deep: #8C3420;
    --accent-tint: rgba(181, 70, 42, 0.08);

    /* Rules */
    --rule: #D9D4C8;
    --rule-soft: #E8E4DA;

    /* Type */
    --font-headline: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Scale (§4.1.4) */
    --size-display: clamp(26px, 3vw, 38px);
    --size-h1: clamp(28px, 3.2vw, 40px);
    --size-h2: 13px;
    --size-h3: 17px;
    --size-body: 15px;
    --size-meta: 12px;
    --lh-tight: 1.12;
    --lh-head: 1.25;
    --lh-body: 1.45;

    /* Layout (§4.1.1) */
    --max-width: 1320px;
    --measure: 68ch;
    --gutter: 20px;
    --spine: 30%;

    /* Vertical rhythm — WIRE is tight by design */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 24px;
    --space-xl: 40px;
}

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

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

body.sn-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);
}

: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);
    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 further down (§5.1). */
.is-hidden {
    display: none;
}

.sn-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: 13px;
}

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

/* ───────────────────────────────────────────────────────────────────────────
   4. Layout primitives
   ─────────────────────────────────────────────────────────────────────────── */

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

/* .container / .section / .main-content come from the inherited _shared/pages. */
.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)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5.1 Utility strip — §4.1 #1: thin paper strip, rust hairline below */

.sn-utility {
    background: var(--paper);
    border-bottom: 1px solid var(--accent);
}

.sn-utility__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.sn-utility__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    color: var(--ink-mute);
}

.sn-utility__date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.sn-utility__edition,
.sn-utility__kicker,
.sn-utility__link {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sn-utility__kicker {
    color: var(--accent);
}

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

.sn-utility__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.sn-utility__links {
    display: flex;
    gap: var(--space-md);
}

.sn-utility__link {
    color: var(--ink-soft);
}

.sn-utility__social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.sn-utility__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ink-soft);
}

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

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

/* 5.2 Masthead — §4.1 #2: compact, LEFT-aligned, never centred.
       §7.1/§7.1.1, redesigned 2026-09-17 after Khalaf's visual review: the mark is
       an OFFSET STAMP — a rust block sitting behind and offset from an ink-bordered
       paper tile. The span itself is the tile; the rust block is a hard-edged
       box-shadow, NOT a pseudo-element, so the whole form stays one element and one
       rule set and never fights a stacking context. The tile is a landscape
       RECTANGLE, never a square: min-width holds that shape even when
       site_initials returns a single letter. The margin reserves the offset so the
       rust block cannot collide with the wordmark, since a shadow costs no layout.
       text-indent cancels the trailing space that letter-spacing adds after the
       last glyph, which would otherwise push the letters right of true centre. */

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

.sn-mast__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.sn-mast__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.sn-mast__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 46px;
    padding: 0 9px;
    margin: 0 5px 5px 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    box-shadow: 5px 5px 0 0 var(--accent);
    color: var(--ink);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 0;
}

.sn-mast__names {
    display: flex;
    flex-direction: column;
}

.sn-mast__wordmark {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sn-mast__tagline {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-mute);
}

.sn-mast__updated {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ink-mute);
    white-space: nowrap;
}

/* 5.3 Nav — §4.1 #3: one sticky row, uppercase, rust underline on active */

.sn-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
}

.sn-nav__inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 38px;
}

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

.sn-nav__link {
    display: inline-block;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

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

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

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

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

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

.sn-nav__search-icon {
    font-size: 17px;
    line-height: 1;
}

/* 5.4 Tickers — shared partials, exact emitted class names (§3.2) */

.news-ticker {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5px var(--gutter);
    border-bottom: 1px solid var(--rule-soft);
    overflow: hidden;
}

.news-ticker__label {
    flex: 0 0 auto;
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

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

.news-ticker__list {
    display: flex;
    gap: var(--space-xl);
    white-space: nowrap;
}

.news-ticker__item {
    font-size: 13px;
}

.news-ticker__link {
    color: var(--ink-soft);
}

.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: #2E6B45;
    --ticker-down: #A32C22;
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    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, #F5F2EA);
    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 COMPOUND so it outranks each element's own
       display declaration. */

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: var(--paper);
    overflow-y: auto;
}

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

.nav-drawer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--gutter);
}

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

.nav-drawer__brand {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
}

.nav-drawer__close,
.nav-drawer__search-trigger {
    padding: 5px 10px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
}

.nav-drawer__nav {
    margin-top: var(--space-md);
}

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

.nav-drawer__link {
    display: block;
    padding: 10px 0;
    font-family: var(--font-headline);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 23, 0.93);
}

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

.search-overlay__inner {
    width: min(560px, 90vw);
}

.search-overlay__label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

.search-overlay__input {
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}

.search-overlay__submit {
    padding: 10px 16px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 12px;
    cursor: pointer;
}

.search-overlay__close {
    padding: 10px 16px;
    border: 1px solid var(--paper);
    background: transparent;
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 12px;
    cursor: pointer;
}

/* 5.6 Footer — §4.1 #34: light, paper-deep, 4 columns, mono heads, rust hairline */

.sn-footer {
    margin-top: var(--space-xl);
    background: var(--paper-deep);
    border-top: 2px solid var(--accent);
}

.sn-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--gutter) var(--space-md);
}
.sn-footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-lg);
}

.sn-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* The footer reuses the header mark at reduced size (§7B #2). Sentinel's failure
   mode here is the OFFSET MUDDYING — if the rust block shrinks toward the 1px
   border it stops reading as a block behind the tile and becomes a blur along two
   edges. The border stays 1px, so the offset is held at 4px: four times the border
   weight, and 15.4% of the tile height against the header's 14.7%, which keeps the
   proportion rather than scaling the offset down into the border. */

.sn-footer__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 36px;
    padding: 0 7px;
    margin: 0 4px 4px 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 0 var(--accent);
    color: var(--ink);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.sn-footer__wordmark {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
}

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

.sn-footer__heading {
    margin-bottom: var(--space-sm);
    padding-top: 6px;
    border-top: 1px solid var(--accent);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sn-footer__heading--spaced {
    margin-top: var(--space-md);
}

.sn-footer__col {
    min-width: 0;
}

.sn-footer__col--brand {
    padding-right: var(--space-md);
}

.sn-footer__links li,
.sn-footer__social li {
    margin-bottom: var(--space-xs);
    font-size: 13px;
    color: var(--ink-soft);
}

.sn-footer__social-link {
    color: var(--ink-soft);
}

.sn-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--rule);
}

.sn-footer__copy,
.sn-footer__meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-mute);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Newsletter — shared partial, exact emitted class names
   ─────────────────────────────────────────────────────────────────────────── */

.newsletter {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--paper-deep);
}

.newsletter-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--gutter);
    text-align: center;
}

.newsletter-heading {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.newsletter-subline {
    margin: var(--space-xs) 0 var(--space-md);
    font-size: 14px;
    color: var(--ink-mute);
}

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

.newsletter-label {
    flex: 0 0 auto;
    align-self: center;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-mute);
}

.newsletter-input {
    min-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
}

.newsletter-button {
    padding: 8px 18px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

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

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

/* ───────────────────────────────────────────────────────────────────────────
   7. Ad slots — shared partial
   ─────────────────────────────────────────────────────────────────────────── */

.ad-slot {
    max-width: var(--max-width);
    margin: var(--space-lg) auto;
    padding: 0 var(--gutter);
    text-align: center;
}

.ad-slot--house {
    color: var(--ink-mute);
}

.ad-slot__label {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

.ad-slot__video {
    aspect-ratio: 16 / 9;
}

.ad-slot__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.house-ad {
    display: inline-block;
    padding: 8px 14px;
    border: 1px dashed var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. THE WIRE — two columns: wire column (~70%) + latest spine (~30%)
   ═══════════════════════════════════════════════════════════════════════════ */

.sn-wire {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-xl);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.sn-wire__column {
    min-width: 0;
}

/* The category page has no spine since the May ad rule removed its aside: the list takes the
   full width, as on the other new themes' category pages. */
.sn-wire--category {
    grid-template-columns: minmax(0, 1fr);
}

/* The 1px ink rule that divides the two columns (§4.1.1). */
.sn-wire__spine {
    min-width: 0;
    border-left: 1px solid var(--ink);
    padding-left: var(--space-lg);
}

/* ───────────────────────────────────────────────────────────────────────────
   9. Rows — the unit of the wire. Every item is a row with a mono timestamp,
   and 1px rules sit between every entry (§4.1.1).
   ─────────────────────────────────────────────────────────────────────────── */

.sn-rows {
    display: block;
}

.sn-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
}

/* Boundary refinement: the last row does not double the block's own rule. */
.sn-row:last-child,
.sn-opinion__item:last-child {
    border-bottom: 0;
}

.sn-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sn-row__link {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

.sn-row__title {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    font-weight: 600;
    line-height: var(--lh-head);
}

.sn-row__deck {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-mute);
}

.sn-row__cat,
.sn-row__tag {
    display: block;
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* Mono timestamps, tabular figures, on every item (§4.1.4). */
.sn-row__time {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ink-mute);
    white-space: nowrap;
    padding-top: 2px;
}

.sn-row__rank,
.sn-row__numeral {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    padding-top: 2px;
}
.sn-rows--ranked,
.sn-rows--numbered,
.sn-rows--spine,
.sn-rows--category {
    display: block;
}

.sn-row--ranked,
.sn-row--numbered,
.sn-row--spine,
.sn-row--square,
.sn-row--video {
    align-items: flex-start;
}

/* 2×2 text grid for Editor's Picks (§4.1 #12) */
.sn-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.sn-grid2 .sn-row {
    border-bottom: 0;
    padding: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. Thumbnails — every listed article carries one (§4.0). No image anywhere
   is wider than 320px (§4.1.1). The LINK owns the dimensions, so a row keeps
   its shape whether the picture loads, is missing, or is rejected by the
   responsive_picture gate — no collapsed row, no broken-image icon.
   ─────────────────────────────────────────────────────────────────────────── */

.sn-row__thumb-link {
    display: block;
    flex: 0 0 120px;
    width: 120px;
    height: 80px;
    overflow: hidden;
}

.sn-thumb {
    display: block;
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.sn-row__thumb-link--square {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

.sn-thumb--square {
    width: 64px;
    height: 64px;
}

.sn-row__thumb-link--small {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

.sn-thumb--small {
    width: 48px;
    height: 48px;
}

.sn-row__thumb-link--video {
    flex: 0 0 96px;
    width: 96px;
    height: 54px;
}

.sn-thumb--video {
    width: 96px;
    height: 54px;
}

/* Imageless article: a hairline frame the size of the thumbnail it replaces. */
.sn-thumb--empty {
    border: 1px solid var(--rule);
    background: transparent;
}

/* The same frame for a URL the macro rejects — whitespace, a bare "/", a blob:
   URL from a publish race — which leaves the link element genuinely empty.
   One rule covers every rejected form without copying the macro's gate into
   sixteen templates where the two could drift apart (the ledger lesson). */
.sn-row__thumb-link:empty,
.sn-lead__thumb-link:empty,
.sn-hero__thumb-link:empty,
.sn-hero2__thumb-link:empty,
.sn-essay__image-link:empty {
    border: 1px solid var(--rule);
}

/* ───────────────────────────────────────────────────────────────────────────
   11. Blocks — a wire block and a spine block, each under a rust rule label
   ─────────────────────────────────────────────────────────────────────────── */

.sn-block,
.sn-spine-block {
    margin-bottom: var(--space-xl);
}

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

.sn-block__heading,
.sn-spine-block__heading {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
}

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

.sn-block__more {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.sn-block--top-stories,
.sn-block--markets,
.sn-block--editors-picks,
.sn-block--region,
.sn-block--five-things,
.sn-block--video,
.sn-block--long-read,
.sn-block--cluster,
.sn-spine-block--latest,
.sn-spine-block--most-read,
.sn-spine-block--opinion {
    display: block;
}

/* Lead row — the larger first entry of a block (§4.1 #10, #20) */

.sn-lead {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule);
}

.sn-lead__thumb-link {
    display: block;
    flex: 0 0 120px;
    width: 120px;
    height: 80px;
    overflow: hidden;
}

.sn-lead__thumb {
    display: block;
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.sn-lead__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

.sn-lead__title {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.sn-lead__deck {
    margin: var(--space-xs) 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.sn-lead__meta {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin: var(--space-xs) 0 0;
}

/* Markets mono strip (§4.1 #11) — scrolls rather than widening the page */
.sn-markets__strip {
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ink-mute);
    overflow-x: auto;
    white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   12. Heroes — wire rows, never large heroes (§4.1 #7, #8)
   ─────────────────────────────────────────────────────────────────────────── */

.sn-hero,
.sn-hero2 {
    position: relative;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--ink);
}

.sn-hero__slide,
.sn-hero2__slide {
    display: none;
    gap: var(--space-md);
    align-items: flex-start;
}

.sn-hero__slide.is-active,
.sn-hero2__slide.is-active {
    display: flex;
}

/* Thumbnail floated right, ≤200px on Hero 1 and ≤160px on Hero 2. */
.sn-hero__thumb-link {
    display: block;
    order: 2;
    flex: 0 0 200px;
    width: 200px;
    height: 133px;
    overflow: hidden;
}

.sn-hero__thumb {
    display: block;
    width: 200px;
    height: 133px;
    object-fit: cover;
}

.sn-hero2__thumb-link {
    display: block;
    order: 2;
    flex: 0 0 160px;
    width: 160px;
    height: 107px;
    overflow: hidden;
}

.sn-hero2__thumb {
    display: block;
    width: 160px;
    height: 107px;
    object-fit: cover;
}

.sn-hero__body,
.sn-hero2__body {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

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

.sn-hero2__title {
    font-family: var(--font-headline);
    font-size: 24px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.sn-hero__deck,
.sn-hero2__deck {
    margin: var(--space-xs) 0 0;
    font-size: 15px;
    color: var(--ink-soft);
}

.sn-hero__meta {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    flex-wrap: wrap;
    margin: var(--space-xs) 0 0;
}

.sn-hero__by {
    font-size: 13px;
    color: var(--ink-mute);
}

/* Carousel controls — findable, not decorative (§3.3) */

.sn-carousel__nav {
    display: flex;
    gap: 6px;
    margin-top: var(--space-sm);
}

.sn-carousel__prev,
.sn-carousel__next {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ink-mute);
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

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

.sn-carousel__dots,
.hero-dots {
    display: flex;
    gap: 6px;
    margin-top: var(--space-sm);
}

.hero-dot,
.sn-carousel__dot {
    width: 26px;
    height: 3px;
    padding: 0;
    border: 0;
    background: var(--ink-mute);
    cursor: pointer;
}

.hero-dot.is-active,
.sn-carousel__dot.is-active {
    background: var(--accent);
}

.hero-carousel {
    position: relative;
}

.hero-carousel__slide {
    animation: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. Single-item blocks — investigation, photo essay, long read, opinion
   ─────────────────────────────────────────────────────────────────────────── */

/* Rust-tint band with a 4px rust LEFT rule (§4.1 #16). Never dark. */
.sn-investigation {
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    background: var(--accent-tint);
    border-left: 4px solid var(--accent);
}

.sn-investigation__label {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.sn-investigation__title {
    margin: var(--space-xs) 0;
    font-size: 20px;
    font-weight: 700;
    line-height: var(--lh-head);
}

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

/* Photo essay — the page's largest image, capped at 320px, text BESIDE it. */
.sn-essay {
    margin-bottom: var(--space-xl);
}

.sn-essay__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.sn-essay__image-link {
    display: block;
    flex: 0 0 320px;
    width: 320px;
    height: 213px;
    overflow: hidden;
}

.sn-essay__image {
    display: block;
    width: 320px;
    height: 213px;
    object-fit: cover;
}

.sn-essay--no-image .sn-essay__image-link {
    border: 1px solid var(--rule);
}

.sn-essay__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

.sn-essay__title {
    font-family: var(--font-headline);
    font-size: 22px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.sn-essay__deck {
    margin: var(--space-xs) 0;
    font-size: 14px;
    color: var(--ink-soft);
}

/* Long read — text-led row with an italic Plex Sans pull quote (§4.1 #22) */
.sn-long-read {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.sn-long-read__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

.sn-long-read__title {
    font-family: var(--font-headline);
    font-size: 21px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.sn-long-read__quote {
    margin: var(--space-sm) 0;
    padding-left: var(--space-sm);
    border-left: 2px solid var(--accent);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
}

.sn-long-read__meta {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin: 0;
    font-size: 13px;
    color: var(--ink-mute);
}

.sn-long-read__by {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sn-long-read__author {
    color: var(--ink-soft);
}

/* Opinion strip — 32px CIRCULAR headshot placeholder (§4.1 #15). Sentinel uses
   photo headshots, not ledger's monograms. */
.sn-opinion {
    display: block;
}

.sn-opinion__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
}

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

.sn-opinion__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sn-opinion__author {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

.sn-opinion__title {
    font-family: var(--font-headline);
    font-size: 15px;
    font-weight: 600;
    line-height: var(--lh-head);
}

.sn-opinion__empty {
    margin: 0;
    color: var(--ink-mute);
    font-style: italic;
}

/* Mid-page newsletter — wire-column inline box, 1px ink border (§4.1 #19) */
.sn-newsletter-inline {
    display: block;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--ink);
}

/* ───────────────────────────────────────────────────────────────────────────
   14. Article variants — wire voice, mono datelines, images capped at column
   width (§4.1.5). Body at 68ch.
   ─────────────────────────────────────────────────────────────────────────── */

.sn-article {
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0;
    padding: 0 var(--gutter);
}

.sn-article--v1,
.sn-article--v2,
.sn-article--v3,
.article--v1,
.article--v2,
.article--v3 {
    display: block;
}

.sn-article__hero,
.sn-article-v2__hero,
.sn-article-v3__hero {
    margin: 0 0 var(--space-md);
}

.sn-article__hero-image,
.sn-article-v3__hero-image {
    display: block;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

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

.sn-article__category {
    display: inline-block;
    margin-bottom: var(--space-xs);
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.sn-article__title {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    font-weight: 700;
    line-height: var(--lh-tight);
    max-width: var(--measure);
}

.sn-article__deck {
    margin: var(--space-sm) 0 0;
    max-width: var(--measure);
    font-size: 17px;
    color: var(--ink-soft);
}

.sn-article__byline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--rule-soft);
}

.sn-article__header,
.sn-article-v2__header,
.sn-article-v3__header {
    margin-bottom: var(--space-lg);
}

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

.sn-article__body h2,
.sn-article__body h3 {
    margin: var(--space-lg) 0 var(--space-sm);
    line-height: var(--lh-head);
}

.sn-article__body h2 {
    font-size: 22px;
    font-weight: 700;
}

.sn-article__body h3 {
    font-size: var(--size-h3);
    font-weight: 600;
}

.sn-article__body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sn-article__body blockquote {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 2px solid var(--accent);
    font-style: italic;
    color: var(--ink-soft);
}

.sn-article__body img {
    display: block;
    max-width: 100%;
    margin: var(--space-md) 0;
}

.sn-article__body ul,
.sn-article__body ol {
    margin: 0 0 1em var(--space-md);
}

.sn-article__body ul li {
    list-style: disc;
}

.sn-article__body ol li {
    list-style: decimal;
}

/* Wide content scrolls inside its own container. */
.sn-article__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
}

.sn-article__body th,
.sn-article__body td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule-soft);
    text-align: left;
}

.sn-article__body pre {
    overflow-x: auto;
    padding: var(--space-sm);
    background: var(--paper-deep);
    font-family: var(--font-mono);
    font-size: 13px;
}

.sn-article__body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* V1 — body + right rail */
.sn-article__grid,
.article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-xl);
    align-items: start;
}

.sn-article__main,
.article-main {
    min-width: 0;
}

/* V2 — sticky LEFT rail, 4fr/7fr */
.sn-article-v2__grid,
.article-v2-grid {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: var(--space-xl);
    align-items: start;
}

.sn-article-v2__rail,
.article-v2-rail-col {
    position: sticky;
    top: 60px;
}

.sn-article-v2__main,
.article-v2-main {
    min-width: 0;
}

.sn-article-v2__body {
    max-width: var(--measure);
}

.sn-article-v2__related {
    margin-top: var(--space-xl);
}

/* V3 — single column, no rail */
.sn-article-v3__body,
.sn-article-v3__tldr,
.sn-article-v3__takeaways,
.sn-article-v3__faq,
.sn-article-v3__qa,
.sn-article-v3__entities,
.sn-article-v3__share {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   15. Category page — a timestamped wire list with the spine beside it (§4.1.5)
   ─────────────────────────────────────────────────────────────────────────── */

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

.sn-cat__heading {
    font-family: var(--font-headline);
    font-size: var(--size-h1);
    font-weight: 700;
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

.sn-cat__empty {
    padding: var(--space-xl) 0;
    color: var(--ink-mute);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. SHARED PARTIAL SKINS — exact class names, read from the partials (§3.2).
   These emit plain kebab-case, not BEM; styling them by assumed names is the
   Phase 7e defect that left ~200 lines of herald's sheet matching nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nav list item (sn- class completing section 5.3) */
.sn-nav__item {
    display: inline-flex;
}

/* Breadcrumbs — the partial emits BOTH spellings */
.breadcrumbs {
    margin-bottom: var(--space-md);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mute);
}

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

.breadcrumbs-item,
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.breadcrumbs-item + .breadcrumbs-item::before,
.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    color: var(--rule);
}

/* Byline and sponsored badge */
.article-byline {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-mute);
}

.byline-author {
    font-family: var(--font-ui);
}

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

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

.byline-date {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
}

.sponsored-badge {
    margin: var(--space-sm) 0;
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--accent);
    background: var(--paper-deep);
}

.sponsored-badge__label {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.sponsored-badge__attribution {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    font-size: 13px;
}

.sponsored-badge__logo {
    max-height: 22px;
    width: auto;
}

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

.sponsored-badge__sponsor {
    font-weight: 700;
}

.sponsored-badge__disclosure {
    margin: var(--space-xs) 0 0;
    font-size: 12px;
    color: var(--ink-mute);
}

.sponsored-badge__learn-more {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* Article furniture — TL;DR, key takeaways, FAQ, Q&A */
.article-tldr {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 2px solid var(--accent);
    max-width: var(--measure);
}

.tldr-heading,
.kt-heading,
.faq-heading,
.qa-heading,
.related-heading,
.article-rail__heading,
.entities-heading,
.article-tags__heading,
.article-v3-related__heading,
.social-share__label,
.article-v2-rail__entity-group-heading {
    margin-bottom: var(--space-sm);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
}

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

.article-key-takeaways,
.article-faq,
.article-qa {
    margin: var(--space-lg) 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
}

.kt-list li {
    position: relative;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--rule-soft);
}

.kt-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.faq-list,
.qa-list {
    display: block;
}

.faq-item,
.qa-item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
}

.faq-question,
.qa-question {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 16px;
}

.faq-answer,
.qa-answer {
    margin: 0;
    color: var(--ink-soft);
}

/* Tags and entity chips */
.article-tags {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}

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

.article-tags__item,
.entity-chip,
.article-rail__chip {
    padding: 3px 8px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
}

.article-tags__link {
    color: inherit;
}

.article-entities {
    margin: var(--space-lg) 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}

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

.entities-group__heading {
    display: block;
}

.entities-group--persons .entity-chip,
.entities-list--persons .entity-person,
.article-rail__chips--persons .article-rail__chip--person {
    border-left: 2px solid var(--accent);
}

.entities-group--orgs .entity-chip,
.entities-list--orgs .entity-org,
.article-rail__chips--organizations .article-rail__chip--org {
    border-left: 2px solid var(--ink-mute);
}

/* Article cards — related_articles, plus the inherited search and tag pages */
.article-card {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--rule-soft);
}

.article-card__image-link {
    display: block;
    margin-bottom: var(--space-xs);
}

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

.article-card__body {
    display: block;
}

.article-card__category,
.card-kicker {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.article-card__title,
.card-title {
    margin-top: 2px;
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    font-weight: 600;
    line-height: var(--lh-head);
}

.article-card__deck,
.card-excerpt {
    margin: var(--space-xs) 0 0;
    font-size: 13px;
    color: var(--ink-mute);
}

.article-card__byline,
.card-byline {
    display: flex;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mute);
}

.article-card--compact .article-card__image-link {
    display: none;
}

.article-card--feature .article-card__title {
    font-size: 20px;
    font-weight: 700;
}

.article-related {
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

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

/* V3 numbered related list */
.article-v3-related {
    max-width: var(--measure);
    margin: var(--space-xl) auto 0;
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

.article-v3-related__list {
    display: block;
}

.article-v3-related__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
}

.article-v3-related__num {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.article-v3-related__link {
    flex: 1 1 auto;
}

.article-v3-related__cat {
    display: block;
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.article-v3-related__title {
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 600;
    line-height: var(--lh-head);
}

/* Rails — V1 right rail and V2 left rail */
.article-rail,
.article-v2-rail {
    font-size: 14px;
}

.article-rail__section,
.article-v2-rail__section {
    margin-bottom: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--rule);
}

.article-rail__persons,
.article-rail__organizations,
.article-rail__share,
.article-v2-rail__tldr,
.article-v2-rail__takeaways,
.article-v2-rail__entities,
.article-v2-rail__share,
.article-v2-rail__entity-group--persons,
.article-v2-rail__entity-group--orgs {
    display: block;
}

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

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

.article-rail__share-btn {
    display: block;
    padding: 6px 10px;
    border: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

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

.article-rail__share-btn--x,
.article-rail__share-btn--facebook,
.article-rail__share-btn--linkedin,
.article-rail__share-btn--copy {
    background: transparent;
}

/* Social share row (V3) */
.social-share {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: var(--space-lg) 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}

.social-share__list {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

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

.social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
}

.social-share__link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.social-share__link--twitter,
.social-share__link--facebook,
.social-share__link--linkedin,
.social-share__link--copy {
    background: transparent;
}

.social-share__icon {
    font-size: 13px;
    line-height: 1;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
    font-family: var(--font-headline);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pagination-prev,
.pagination-next {
    color: var(--accent);
}

.pagination-status {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-mute);
}

.pagination-disabled {
    color: var(--rule);
}

/* Nav drawer category list (shared partial) */
.nav-drawer__categories {
    display: block;
}

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

.static-page {
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0;
    padding: 0 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-sm);
    border-bottom: 2px solid var(--accent);
}

.static-page-header__kicker {
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

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

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

.static-page-content {
    max-width: var(--measure);
}

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

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

/* Authors / team */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.team-card {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--rule);
}

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

.team-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    overflow: hidden;
    font-family: var(--font-headline);
    font-weight: 700;
}

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

.team-avatar__initials {
    font-size: 15px;
}

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

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

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

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

.team-links {
    display: flex;
    gap: var(--space-sm);
    font-size: 12px;
}

/* Author archive */
.author-hero {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--accent);
}

.author-hero__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    overflow: hidden;
}

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

.author-hero__photo-initials {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 20px;
}

.author-hero__body {
    flex: 1 1 auto;
}

.author-hero__name {
    font-family: var(--font-headline);
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}

.author-hero__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

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

.author-articles {
    margin-top: var(--space-lg);
}

.author-articles__heading {
    margin-bottom: var(--space-sm);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

/* Search, archive, tag and 404 */
.search-hero,
.taxonomy-header,
.archive-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--accent);
}

.taxonomy-header-inner {
    display: block;
}

.taxonomy-label,
.search-count,
.archive-year-heading {
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

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

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

.search-input {
    flex: 1 1 auto;
    padding: 8px 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
}

.search-submit,
.contact-submit,
.btn-home {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.archive-list {
    display: block;
}

.archive-year {
    margin-bottom: var(--space-lg);
}

.archive-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
}

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

.archive-item-date {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    color: var(--ink-mute);
    white-space: nowrap;
}

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

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

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

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

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

.contact-detail-label {
    flex: 0 0 110px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

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

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

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

.contact-journalist-name {
    font-family: var(--font-headline);
    font-weight: 700;
}

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

.contact-journalist-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
}

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

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

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

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

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

/* ───────────────────────────────────────────────────────────────────────────
   18. Responsive — the wire narrows; the spine drops below the column
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .sn-wire {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .sn-wire__spine {
        border-left: 0;
        border-top: 1px solid var(--ink);
        padding-left: 0;
        padding-top: var(--space-lg);
    }
}

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

@media (max-width: 640px) {
    .sn-utility__inner {
        justify-content: center;
        text-align: center;
    }

    .sn-mast__inner {
        flex-wrap: wrap;
    }

    .sn-nav__toggle {
        display: flex;
    }

    .sn-nav__list {
        display: none;
    }

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

/* ───────────────────────────────────────────────────────────────────────────
   9. Print — the wire as a printed dispatch
   ─────────────────────────────────────────────────────────────────────────── */

@media print {
    body.sn-body {
        background: #fff;
        color: #000;
        font-size: 10pt;
    }

    .sn-utility,
    .sn-nav,
    .news-ticker,
    .stock-ticker,
    .nav-drawer,
    .search-overlay,
    .ad-slot,
    .newsletter,
    .sn-skip-link {
        display: none;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}