/* ═══════════════════════════════════════════════════════════════════════════
   LEDGER — theme stylesheet. Phase 23c.3.
   Structure INDEX: the front page as a contents page. The quietest of the seven.

   Class prefix ........ lg-
   Container ........... 1080px, single column, narrowing rather than rearranging
   Measure ............. 64ch for running prose
   Palette ............. paper #F7F5EF · ink #17201E · accent deep teal #0F6E56
   Type ................ Bitter slab headlines · Karla body · Roboto Mono times
   Site mark ........... TYPOGRAPHIC, no container: Bitter 800 initials over a teal
                         rule, letters off-centre (§7.1/§7.1.1, redesigned 2026-09-17)

   HOW THIS FILE IS WRITTEN (direction lock §3.2, Phase 7e lessons 2 and 5):
   - Every shared-partial class name here was read from the partial itself, not
     from the spec. The partials emit plain kebab-case (.newsletter-form,
     .news-ticker__list, .tldr-heading); no BEM is assumed.
   - The nine bs--prefixed module partials are SHADOWED by ledger's own overrides
     in themes/ledger/templates/, so no bs- class renders and none is styled here.
     article_topics.html.jinja is never included by ledger, so its classes
     (.article-topics, .entity-tag, .entities-*--tags) are not styled either.
   - ONE rule set. No rule is written and then overridden later in the file, no
     patch blocks appended after the fact, and no forced-priority declarations.
   - No dark mode. Ledger is a light theme and the network has no dark themes.

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

   Restraint is the point: section rules rather than boxes, almost no
   backgrounds, no card shadows. Weight comes from type and white space.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
    /* Ink */
    --ink: #17201E;
    --ink-soft: #3A4542;
    --ink-mute: #6E7A77;

    /* Paper */
    --paper: #F7F5EF;
    --paper-soft: #FBFAF6;
    --paper-deep: #EFEBE1;

    /* Accent — deep teal */
    --accent: #0F6E56;
    --accent-soft: #3D8F7B;
    --accent-deep: #0A5040;
    --accent-tint: rgba(15, 110, 86, 0.08);

    /* Rules */
    --rule: #D8D3C6;
    --rule-soft: #E7E3D8;

    /* Type */
    --font-headline: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-ui: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Scale (direction lock §4.2.4) */
    --size-display: clamp(32px, 4vw, 48px);
    --size-h1: clamp(30px, 3.6vw, 44px);
    --size-h2: 14px;
    --size-h3: 20px;
    --size-body: 17px;
    --size-meta: 13px;
    --lh-tight: 1.15;
    --lh-head: 1.3;
    --lh-body: 1.8;

    /* Layout */
    --max-width: 1080px;
    --measure: 64ch;
    --gutter: 24px;
    --label-col: 25%;

    /* Vertical rhythm — INDEX is generous by design */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 36px;
    --space-xl: 56px;
}

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

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

body.lg-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: the <picture>
   wrapper must not disturb the <img> layout it wraps. */
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;
}

blockquote {
    margin: 0;
}

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

/* Toggled by themes/_shared/assets/js/chrome.js on the search overlay and the
   nav drawer. This bare rule only decides the outcome for an element that
   declares no `display` of its own: one class beats nothing. Against an element
   that DOES declare display it ties on specificity (0,1,0 each) and loses on
   source order, because the component rule is written later in this file. The
   two toggled elements therefore carry their own compound rules — see
   `.nav-drawer.is-hidden` and `.search-overlay.is-hidden` below — which is the
   convention all five existing themes use. */
.is-hidden {
    display: none;
}

.lg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 18px;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 14px;
}

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

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

.lg-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 — header contract §7A (18 elements) and footer contract §7B (11)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5.1 Utility strip — §7A #2, holding the date, edition, kicker, links, social, RSS */

.lg-utility {
    border-bottom: 1px solid var(--rule-soft);
    background: var(--paper);
}

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

.lg-utility__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--ink-mute);
}

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

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

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

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

.lg-utility__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lg-utility__links {
    display: flex;
    gap: 14px;
}

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

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

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

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

.lg-utility__rss {
    border-left: 1px solid var(--rule);
    padding-left: 10px;
    width: auto;
}

/* 5.2 Masthead — §7A #7–#10. The monogram lockup of §7.1, carrying ledger's own
       mark form (§7.1.1, redesigned 2026-09-17 after Khalaf's visual review):
       TYPOGRAPHIC, with no container at all. No box, no border, no fill — the mark
       is the typeface. The initials set in Bitter 800 over a teal rule that is
       deliberately WIDER than the letters, so they hang at its left instead of
       sitting optically centred. min-width holds the rule's length, which is what
       keeps the mark recognisable when site_initials returns a single letter. */

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

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

.lg-mast__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.lg-mast__mark {
    display: inline-block;
    min-width: 54px;
    padding: 0 0 6px 2px;
    border-bottom: 3px solid var(--accent);
    color: var(--ink);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: left;
}

.lg-mast__wordmark {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.lg-mast__tagline {
    margin: 10px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--ink-mute);
}

.lg-mast__rule {
    margin-top: 18px;
    height: 2px;
    background: var(--accent);
}

/* 5.3 Nav — §7A #13–#16. Centred small-caps links divided by thin vertical rules. */

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

.lg-nav__inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}

.lg-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.lg-nav__item + .lg-nav__item {
    border-left: 1px solid var(--rule);
}

.lg-nav__link {
    display: inline-block;
    padding: 12px 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

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

.lg-nav__toggle {
    position: absolute;
    left: var(--gutter);
    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;
}

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

.lg-nav__search {
    position: absolute;
    right: var(--gutter);
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}

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

.lg-nav__search-icon {
    font-size: 19px;
    line-height: 1;
}

/* 5.4 Breaking ticker — §7A #17 — and stock ticker — §7A #18.
       Shared partials: exact emitted names. */

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

.news-ticker__label {
    flex: 0 0 auto;
    font-family: var(--font-ui);
    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: 32px;
    white-space: nowrap;
}

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

.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: #2F6B4F;
    --ticker-down: #9B3026;
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    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, #F6F3EC);
    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 */

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

/* Hidden state, compound so it outranks any display this element declares. */
.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: 18px;
}

.nav-drawer__close,
.nav-drawer__search-trigger {
    padding: 6px 12px;
    border: 1px solid var(--rule);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 13px;
    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: 12px 0;
    font-family: var(--font-ui);
    font-size: 14px;
    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(23, 32, 30, 0.92);
}

/* Hidden state, compound so it outranks the `display: flex` above. A bare
   `.is-hidden` ties with it on specificity and loses on source order, which is
   what left this overlay painted open on load. */
.search-overlay.is-hidden {
    display: none;
}

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

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

.search-overlay__form {
    display: flex;
    gap: 8px;
}

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

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

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

/* 5.6 Footer — §7B, three typographic columns on paper-deep with teal rules */

.lg-footer {
    margin-top: var(--space-xl);
    background: var(--paper-deep);
    border-top: 1px solid var(--rule);
}

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

.lg-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* The footer reuses the header mark at reduced size (§7B #2). Ledger's failure
   mode here is the RULE THINNING TO NOTHING, so it is held at 2px rather than
   scaled linearly to 1px: 2/21 of the type size against the header's 3/34 makes
   it proportionally heavier at small size, which is the correct compensation. */

.lg-footer__mark {
    display: inline-block;
    min-width: 34px;
    padding: 0 0 4px 1px;
    border-bottom: 2px solid var(--accent);
    color: var(--ink);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: left;
}

.lg-footer__wordmark {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h3);
}

.lg-footer__tagline {
    margin: 10px 0 0;
    font-size: 14px;
    font-style: italic;
    color: var(--ink-mute);
}

.lg-footer__heading {
    margin-bottom: var(--space-sm);
    padding-top: 8px;
    border-top: 1px solid var(--accent);
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   6. HOMEPAGE — the contents page
   ═══════════════════════════════════════════════════════════════════════════ */

/* 6.1 Hero 1 — the ONE large image. 3:2, full container width, headline below. */

.lg-hero {
    position: relative;
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0;
    padding: 0 var(--gutter);
}

.lg-hero__slide {
    display: none;
}

.lg-hero__slide.is-active {
    display: block;
}

.lg-hero__image-link {
    display: block;
    margin-bottom: var(--space-md);
}

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

.lg-hero__body {
    max-width: var(--measure);
}

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

.lg-hero__title {
    font-size: var(--size-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
}

.lg-hero__deck {
    margin: var(--space-sm) 0 0;
    font-size: 19px;
    color: var(--ink-soft);
}

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

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

/* 6.2 Hero 2 — typographic entries, NO IMAGE anywhere in this block. */

.lg-hero2 {
    position: relative;
    max-width: var(--max-width);
    margin: var(--space-xl) auto 0;
    padding: 0 var(--gutter);
}

.lg-hero2__slide {
    display: none;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}

.lg-hero2__slide.is-active {
    display: flex;
}

.lg-hero2__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: 6px;
}

/* Hero 2 is the second feature, not a text afterthought: it carries its own
   image at 16:9 across ~40% of the column, against Hero 1's full-width 3:2. */
.lg-hero2__image-link {
    display: block;
    flex: 0 0 40%;
}

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

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

.lg-hero2__title {
    font-size: 26px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.lg-hero2__deck {
    margin: var(--space-xs) 0 0;
    font-size: 16px;
    color: var(--ink-soft);
}

/* 6.3 Carousel controls — shared selector contract (§3.3), quiet treatment */

.lg-hero__nav,
.lg-hero2__nav {
    display: flex;
    gap: 6px;
    margin-top: var(--space-sm);
}

.lg-hero__prev,
.lg-hero__next,
.lg-hero2__prev,
.lg-hero2__next {
    width: 38px;
    height: 38px;
    border: 1px solid var(--ink-mute);
    background: transparent;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.lg-hero__prev:hover,
.lg-hero__next:hover,
.lg-hero2__prev:hover,
.lg-hero2__next:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.hero-dots,
.lg-hero__dots,
.lg-hero2__dots {
    display: flex;
    gap: 8px;
    margin-top: var(--space-sm);
}

.hero-dot,
.lg-hero__dot,
.lg-hero2__dot {
    width: 30px;
    height: 4px;
    padding: 0;
    border: 0;
    background: var(--ink-mute);
    cursor: pointer;
}

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

/* The carousel root is a positioning context only; slides carry the geometry. */
.hero-carousel {
    position: relative;
}

.hero-carousel__slide {
    animation: none;
}

/* 6.4 The contents heading that opens the index */

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

.lg-contents__heading {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.lg-contents__rule {
    display: block;
    height: 2px;
    margin-top: 8px;
    background: var(--accent);
}

/* 6.5 THE INDEX SECTION — the structural unit of the whole page.
       Label column (~25%) left, list column (~75%) right, divided by a rule. */

/* SYMMETRIC SECTION PADDING (polish audit L7, shortlist item 8).
   This was `var(--space-xl) var(--gutter) 0` — space above, none below — so the
   gap between two sections depended entirely on whatever margins the next one
   happened to carry. Measured, that produced optical gaps of 56, 171, 172 and
   259px on one homepage: not a rhythm, an accident. Equal top and bottom gives
   one predictable interval between every section, which is what reads as
   finished. */
.lg-index {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--gutter);
    display: grid;
    grid-template-columns: var(--label-col) 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.lg-index__label {
    position: relative;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--ink);
}

.lg-index__heading {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.lg-index__rule {
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--space-xs);
    background: var(--accent);
}

.lg-index__more {
    display: inline-block;
    margin-top: var(--space-sm);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

/* THE DOUBLE RULE IS GONE. `.lg-index__label` already draws a 1px rule across
   the top of every index section; this drew a second one at the same y, a few
   pixels to the right, 12 times on the homepage. Two lines at one boundary is
   the clearest separator defect in the seven themes (polish audit L2). The
   padding stays, so the body still sits off its section head. */
.lg-index__body {
    padding-top: var(--space-sm);
}

.lg-index__body--full {
    grid-column: 1 / -1;
}

.lg-index__body--newsletter {
    padding-top: 0;
    border-top: 0;
}

/* Lead entry inside an index section (Top stories, topic clusters) */

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

.lg-index__lead-body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure);
}

/* Thumbnails. Every listed article carries its picture (direction lock §4.2.6).
   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 and no broken-image icon. */
.lg-list__thumb-link {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: 64px;
    overflow: hidden;
}

.lg-thumb {
    display: block;
    width: 96px;
    height: 64px;
    object-fit: cover;
}

.lg-lead-thumb-link {
    display: block;
    flex: 0 0 160px;
    width: 160px;
    height: 107px;
    overflow: hidden;
}

.lg-lead-thumb {
    display: block;
    width: 160px;
    height: 107px;
    object-fit: cover;
}

/* Imageless article: a quiet hairline frame the size of the thumbnail it
   replaces. No background, no shadow — consistent with the monogram tile. */
.lg-thumb--empty {
    border: 1px solid var(--rule);
    background: transparent;
}

/* The same frame for the case a template's truthiness check cannot see: a URL
   that is non-empty but unusable — whitespace, a bare "/", or a blob: URL left
   by a publish race. responsive_image.html.jinja rejects those inside the macro
   and emits nothing, which leaves the link element genuinely empty. Matching
   :empty covers every form the macro rejects, now and later, without copying
   its gate logic into eight templates where the two could drift apart. */
.lg-list__thumb-link:empty,
.lg-lead-thumb-link:empty,
.lg-hero2__image-link:empty {
    border: 1px solid var(--rule);
}

.lg-index__lead-title {
    font-size: 28px;
    font-weight: 700;
    line-height: var(--lh-head);
}

.lg-index__lead-deck {
    margin: var(--space-xs) 0 0;
    font-size: 16px;
    color: var(--ink-soft);
}

.lg-index__lead-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin-top: var(--space-xs);
}

.lg-index__cat,
.lg-list__cat,
.lg-things__cat,
.lg-essay__category {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

/* Mono times, right-aligned like page numbers in a table of contents */

.lg-index__time,
.lg-list__time,
.lg-things__time,
.lg-hero__time,
.lg-hero2__time,
.lg-long-read__time {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--ink-mute);
    white-space: nowrap;
}

/* 6.6 The list — the typographic spine of every module */

/* NO RULE BETWEEN ROWS OF THE SAME KIND (polish audit L1, shortlist item 1).
   Thirty-two 1px rules down one column made a contents page read as a
   spreadsheet. A rule earns its place when it marks a change of KIND — the end
   of a section — not between items of the same kind, where alignment and space
   do the work. The thumbnail's left edge already aligns every row; the padding
   below absorbs the space the rule used to occupy, so the rhythm is unchanged
   and only the line is gone. */
.lg-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-md);
}

.lg-list__link {
    display: block;
    flex: 1 1 auto;
    max-width: var(--measure);
}

.lg-list__title {
    display: block;
    font-family: var(--font-headline);
    font-size: var(--size-h3);
    font-weight: 500;
    line-height: var(--lh-head);
}

.lg-list__cat {
    display: block;
    margin-bottom: 2px;
}

.lg-list__deck {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: var(--ink-mute);
}

/* List containers. The global ul/ol reset already strips bullets and padding;
   these carry the boundary refinement so the last row in a section does not
   double the section's own rule. */
.lg-list,
.lg-things,
.lg-opinion,
.archive-list,
.article-v3-related__list,
.contact-journalist-list,
.nav-drawer__categories {
    display: block;
}

.lg-list__item:last-child,
.lg-things__item:last-child,
.lg-opinion__item:last-child,
.archive-item:last-child,
.article-v3-related__item:last-child,
.contact-journalist-card:last-child {
    border-bottom: 0;
}

.lg-list--ranked .lg-list__item {
    gap: var(--space-sm);
}

.lg-list__rank {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
/* 6.7 Markets line — mono data row that scrolls rather than widening the page */

.lg-markets__line {
    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;
}

/* 6.8 Opinion strip — monogram placeholders, not photographs (ledger only) */

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

.lg-opinion__mark,
.lg-article__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

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

.lg-opinion__author {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
}

.lg-opinion__title {
    font-size: 18px;
    font-weight: 500;
    line-height: var(--lh-head);
}

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

/* 6.9 Investigation banner — ACCENT-TINTED, never dark (sign-off decision 8) */

.lg-investigation {
    margin-top: var(--space-xl);
    background: var(--accent-tint);
    border-top: 4px solid var(--accent);
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
}

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

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

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

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

/* 6.10 Five Things — the first small images on the page */

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

.lg-things__numeral {
    flex: 0 0 auto;
    padding-top: 4px;
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.lg-things__body {
    flex: 1 1 auto;
}

.lg-things__title {
    font-size: 17px;
    font-weight: 500;
    line-height: var(--lh-head);
}

/* 6.11 Photo essay — the page's second large image, LIGHT scrim */

.lg-essay {
    position: relative;
    max-width: var(--max-width);
    margin: var(--space-xl) auto 0;
    padding: 0 var(--gutter);
}

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

.lg-essay__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.lg-essay__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(247, 245, 239, 0.95), rgba(247, 245, 239, 0));
}

.lg-essay__content {
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    max-width: var(--measure);
}

.lg-essay--no-image .lg-essay__content {
    position: static;
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule);
}

.lg-essay__label {
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.lg-essay__title {
    margin-top: var(--space-xs);
    font-size: 30px;
    font-weight: 800;
    line-height: var(--lh-tight);
}

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

/* 6.12 Topic clusters — lead with a small image plus two headlines */

.lg-cluster__lead {
    display: flex;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--rule-soft);
}

.lg-cluster__lead-body {
    flex: 1 1 auto;
    max-width: var(--measure);
}

.lg-cluster__lead-title {
    font-size: 22px;
    font-weight: 700;
    line-height: var(--lh-head);
}

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

/* 6.13 Video block — small 16:9 thumbnails, light band */

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

.lg-video__card {
    min-width: 0;
}

.lg-video__thumb-link {
    position: relative;
    display: block;
}

.lg-video__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.lg-video__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--paper-deep);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
}

.lg-video__badge {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 3px 8px;
    background: var(--paper);
    font-family: var(--font-ui);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.lg-video__title {
    margin-top: var(--space-xs);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lh-head);
}

/* 6.14 Long read — a large pull quote and a headline. No image. */

.lg-long-read {
    max-width: var(--max-width);
    margin: var(--space-xl) auto 0;
    padding: 0 var(--gutter);
}

.lg-long-read__inner {
    max-width: var(--measure);
    padding-top: var(--space-md);
    border-top: 2px solid var(--accent);
}

.lg-long-read__label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.lg-long-read__quote {
    margin: var(--space-sm) 0;
    font-family: var(--font-headline);
    font-size: 26px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
}

.lg-long-read__title {
    font-size: 24px;
    font-weight: 700;
    line-height: var(--lh-head);
}

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

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

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

/* 6.15 In-flow ad rows — sidebar_top / sidebar_bottom have no sidebar to sit in */

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

.lg-adrow--sidebar-top {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SHARED PARTIAL SKINS — exact class names, read from the partials
   ═══════════════════════════════════════════════════════════════════════════ */

/* 7.1 Ad slots */

.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: 6px;
    font-family: var(--font-ui);
    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: 10px 18px;
    border: 1px dashed var(--rule);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
}

/* 7.2 Newsletter */

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

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

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

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 8px;
    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: 260px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}

.newsletter-button {
    padding: 10px 22px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-ui);
    font-size: 13px;
    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: 13px;
    color: var(--ink-mute);
}

/* 7.3 Breadcrumbs — the partial emits BOTH spellings; style both. */

.breadcrumbs {
    margin-bottom: var(--space-md);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-mute);
}

.breadcrumbs-list,
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumbs-item,
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

/* 7.4 Byline and sponsored badge */

.article-byline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    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: 12px;
}

.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-ui);
    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: 8px;
    margin-top: var(--space-xs);
    font-size: 14px;
}

.sponsored-badge__logo {
    max-height: 24px;
    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: 13px;
    color: var(--ink-mute);
}

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

/* 7.5 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 {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    margin-bottom: var(--space-sm);
}

.tldr-body {
    margin: 0;
    font-size: 16px;
    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 {
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}

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

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

/* 7.6 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: 8px;
}

.article-tags__item,
.entity-chip,
.article-rail__chip {
    padding: 4px 10px;
    border: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink-soft);
}

.article-tags__link {
    color: inherit;
}

.article-tags__item:hover,
.article-entities {
    border-color: var(--rule);
}

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

.entities-group__heading {
    display: block;
}

/* 7.7 Article cards — used by related_articles and the inherited search/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 {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.article-card__body {
    display: block;
}

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

.article-card__title {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 500;
    line-height: var(--lh-head);
}

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

.article-card__byline {
    display: flex;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
}

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

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

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

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

/* 7.8 V3 numbered related list */

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

.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-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

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

/* 7.9 Rails — V1 right rail and V2 left rail */

.article-rail,
.article-v2-rail {
    font-size: 15px;
}

.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__share-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-rail__share-btn {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    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;
}

.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 {
    display: block;
}

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

.article-v2-rail__entity-group--persons,
.article-v2-rail__entity-group--orgs {
    display: block;
}

/* 7.10 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: 8px;
    flex-wrap: wrap;
}

.social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    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: 14px;
    line-height: 1;
}

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

/* 7.11 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-ui);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   8. ARTICLE VARIANTS — quiet book-page voice, Karla body at 64ch
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

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

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

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

.lg-article__title {
    font-size: var(--size-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    max-width: var(--measure);
}

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

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

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

/* Running prose — the 64ch measure the lock specifies */

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

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

.lg-article__body h2 {
    font-size: 26px;
    font-weight: 700;
}

.lg-article__body h3 {
    font-size: var(--size-h3);
    font-weight: 500;
}

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

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

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

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

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

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

/* Wide content scrolls inside its own container so the page never scrolls sideways */

.lg-article__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

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

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

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

/* V1 — body plus right rail */

.lg-article__grid,
.article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-xl);
    align-items: start;
}

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

/* V2 — sticky LEFT rail, 4fr/7fr */

.lg-article-v2__grid,
.article-v2-grid {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: var(--space-xl);
    align-items: start;
}

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

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

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

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

/* V3 — single column, no rail */

.lg-article-v3__body,
.lg-article-v3__tldr,
.lg-article-v3__takeaways,
.lg-article-v3__faq,
.lg-article-v3__qa,
.lg-article-v3__entities,
.lg-article-v3__share {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   9. CATEGORY PAGE — a contents list, no card grid, mono dates
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

.lg-cat__heading {
    font-size: var(--size-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.lg-cat__rule {
    display: block;
    width: 48px;
    height: 2px;
    margin-top: var(--space-sm);
    background: var(--accent);
}

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

.lg-index--category {
    padding-top: 0;
}

.lg-list--category .lg-list__title {
    font-size: 22px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. INHERITED PAGES — themes/_shared/pages, rendered through ledger'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-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

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

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

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

/* Authors / team */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 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: 56px;
    height: 56px;
    border: 1px solid var(--accent);
    font-family: var(--font-headline);
    font-weight: 700;
}

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

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

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

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

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

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

.team-links {
    display: flex;
    gap: 10px;
    font-size: 13px;
}

/* 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: 72px;
    height: 72px;
    flex: 0 0 72px;
    border: 1px solid var(--accent);
}

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

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

.author-hero__name {
    font-size: 28px;
    font-weight: 800;
}

.author-hero__meta {
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    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 {
    font-family: var(--font-headline);
    font-size: var(--size-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

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

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

/* Search, archive, tag and 404 */

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

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

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

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

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

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

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

.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: 17px;
    font-weight: 500;
}

.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: 72px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

/* Cards used by the inherited search and tag pages */

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

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

.card-title {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: 500;
    line-height: var(--lh-head);
}

.card-excerpt {
    font-size: 15px;
    color: var(--ink-mute);
}

.card-byline {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
}

/* 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: var(--space-xs) 0;
    border-bottom: 1px solid var(--rule-soft);
}

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

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

.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: 13px;
    color: var(--ink-mute);
}

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

.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);
    font-family: var(--font-body);
    font-size: 15px;
}

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

/* Small shared bits from the inherited pages */

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   11. RESPONSIVE — the layout NARROWS; it does not rearrange
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .lg-index {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .lg-article__grid,
    .article-grid,
    .lg-article-v2__grid,
    .article-v2-grid,
    .static-page--with-toc {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .lg-article-v2__rail,
    .article-v2-rail-col {
        position: static;
    }

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

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

@media (max-width: 640px) {
    :root {
        --space-xl: 40px;
        --space-lg: 28px;
    }

    .lg-utility__inner {
        justify-content: center;
        text-align: center;
    }

    .lg-nav__toggle {
        display: flex;
    }

    .lg-nav__list {
        display: none;
    }

    .lg-video__grid,
    .related-grid,
    .article-grid-3,
    .lg-footer__columns {
        grid-template-columns: 1fr;
    }

    .archive-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* Rows keep the thumbnail beside the headline at phone width; only the
       picture shrinks. */
    .lg-list__thumb-link {
        flex: 0 0 72px;
        width: 72px;
        height: 48px;
    }

    .lg-thumb {
        width: 72px;
        height: 48px;
    }

    .lg-hero2__slide.is-active {
        flex-wrap: wrap;
    }

    .lg-hero2__image-link {
        flex: 1 1 100%;
    }

    .lg-cluster__lead,
    .lg-index__lead {
        flex-direction: column;
    }

    .lg-lead-thumb-link,
    .lg-lead-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .lg-essay__content {
        position: static;
        padding-top: var(--space-sm);
    }

    .lg-essay__scrim {
        display: none;
    }

    .contact-detail-row {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. PRINT — the contents page as a printed index
   ═══════════════════════════════════════════════════════════════════════════ */

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

    .lg-utility,
    .lg-nav,
    .news-ticker,
    .stock-ticker,
    .nav-drawer,
    .search-overlay,
    .ad-slot,
    .lg-adrow,
    .newsletter,
    .lg-hero__nav,
    .lg-hero2__nav,
    .hero-dots,
    .social-share,
    .article-rail__share,
    .lg-skip-link {
        display: none;
    }

    .lg-mast__rule,
    .lg-index__rule,
    .lg-contents__rule {
        background: #000;
    }

    .lg-hero__slide,
    .lg-hero2__slide {
        display: block;
    }

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

    .lg-article__body {
        max-width: none;
    }
}