/* ═══════════════════════════════════════════════════════════════════════════
   CLARION — theme stylesheet. Phase 23c.9 (SKELETON: chrome only).
   Structure ZIGZAG: full-width blocks whose image half and text half alternate
   sides down the page. Photo-forward without being a grid.

   Class prefix ........ cl-
   Container ........... 1240px (§4.7.1)
   Measure ............. 60ch for running prose (§4.7.4)
   Palette ............. paper #FBF6F5 · ink #1F1A1A · claret #8A2036
   Type ................ Epilogue headlines/UI · Source Serif 4 body
   Site mark ........... A SPLIT LETTER: two initials either side of a thin claret
                         vertical rule, the first high and the second low, so the
                         mark alternates as the page does (§4.7.6)

   ONE PAPER, NO TINT ALTERNATION. Courier's mechanism is a tint change per band;
   clarion's is the alternating side of the image. Separation here comes from thin
   claret rules and generous vertical space, never from a background change — that
   is the single decision that keeps the two themes apart at a glance.

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

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

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

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

:root {
    /* Ink */
    --ink: #1F1A1A;
    --ink-soft: #443B3B;
    --ink-mute: #786C6C;

    /* Paper */
    --paper: #FBF6F5;
    --paper-soft: #FEFCFB;
    --paper-deep: #F2E9E8;

    /* Accent — claret */
    --accent: #8A2036;
    --accent-soft: #B14A60;
    --accent-deep: #63131F;
    --accent-tint: rgba(138, 32, 54, 0.08);

    /* Rules */
    --rule: #E2D3D3;
    --rule-soft: #EFE4E3;

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

    /* Scale (§4.7.4) */
    --size-display: clamp(42px, 6vw, 76px);
    --size-h1: clamp(40px, 5.4vw, 68px);
    --size-h2: clamp(28px, 3.4vw, 46px);
    --size-h3: 19px;
    --size-body: 19px;
    --size-meta: 13px;
    --lh-tight: 1.0;
    --lh-head: 1.08;
    --lh-body: 1.7;

    /* The masthead wordmark. NOT in §4.7.4's table, which covers editorial type
       only — a build choice, sized so the "small claret mark" of §4.7.2 #2 reads
       as small beside it rather than competing with it. */
    --size-wordmark: clamp(26px, 2.8vw, 38px);

    /* Layout (§4.7.1: 1240px container, §4.7.4: 60ch measure) */
    --max-width: 1240px;
    --measure: 60ch;
    --gutter: 24px;

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

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

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

body.cl-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 in §5.5. */
.is-hidden {
    display: none;
}

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

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

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

/* One container, used by every strip and later by every zigzag block. */
.cl-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.cl-main {
    display: block;
}

/* .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 Top bar — §7A #2, §4.7.2 #1: "thin strip: date, edition, social". Carries
       #3 date, #4 edition, #5 kicker, #6 About/Contact, #11 social, #12 RSS. */

.cl-topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

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

.cl-topbar__meta,
.cl-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cl-topbar__sep {
    color: var(--accent-soft);
}

.cl-topbar__kicker {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cl-topbar__links {
    display: flex;
    gap: var(--space-sm);
}

.cl-topbar__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.cl-topbar__social-link:hover {
    color: var(--accent);
}

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

/* 5.2 Masthead — §7A #7–#10, §4.7.2 #2: "LEFT-ALIGNED Epilogue wordmark with a
       small claret mark". Never centred.

       THE SPLIT LETTER (§4.7.6, decided before the build). Two initials either
       side of a thin claret VERTICAL rule, the first set high and the second set
       low, so the mark alternates as the page does. No container, no fill, no
       border, no box.

       EVERY QUANTITY COMES OFF ONE CUSTOM PROPERTY, --mark, so the letters and
       the rule cannot drift apart at a viewport nobody tested. The ratios are
       measured from Epilogue itself at weight 800, not chosen by eye:
       cap-height 0.740em, ascent 0.790em, descent 0.235em.

         stagger     0.37  x --mark   (half a cap height, so the caps overlap by
                                       half and read as alternation rather than as
                                       two detached letters)
         box height  1.37  x --mark   (a letter box is 1 x --mark at line-height 1;
                                       adding the stagger gives the painted extent,
                                       and flex-start/flex-end then PRODUCE the
                                       stagger from this height rather than needing
                                       a transform to fake it)
         rule height 1.11  x --mark   (cap 0.740 + stagger 0.37 — the pair's
                                       combined vertical extent, so the rule spans
                                       exactly what the letters occupy)
         rule width  0.06  x --mark   (thin, and scaling with the letters) */

.cl-mast {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.cl-mast__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

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

.cl-mast__mark {
    --mark: clamp(22px, 2.2vw, 30px);
    display: inline-flex;
    align-items: stretch;
    gap: calc(var(--mark) * 0.16);
    height: calc(var(--mark) * 1.37);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--mark);
    line-height: 1;
    color: var(--accent);
}

/* The stagger falls out of the container height: the box is 1.37 x --mark tall
   and each letter box is 1 x --mark, so flex-start and flex-end separate them by
   exactly the 0.37 the spec calls for. No transform, no magic number. */
.cl-mast__mark-a {
    align-self: flex-start;
}

.cl-mast__mark-b {
    align-self: flex-end;
}

.cl-mast__mark-rule {
    align-self: center;
    width: calc(var(--mark) * 0.06);
    height: calc(var(--mark) * 1.11);
    background: var(--accent);
}

/* ONE INITIAL: the template renders neither the rule nor a second letter, so
   there is nothing to stagger against and nothing to divide. The box collapses to
   a single letter's height and the lone initial sits centred in it. */
.cl-mast__mark--single {
    height: var(--mark);
}

.cl-mast__mark--single .cl-mast__mark-a {
    align-self: center;
}

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

.cl-mast__wordmark {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--size-wordmark);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.cl-mast__tagline {
    display: block;
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: 15px;
    font-style: italic;
    color: var(--ink-mute);
}

/* 5.3 Nav — §7A #13–#16, §4.7.2 #3: "sticky row, Epilogue 500 links, claret
       active underline". */

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

.cl-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 52px;
}

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

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

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

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

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

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

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

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

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

/* 5.4 Ticker strips — §7A #17 and #18, §4.7.2 #5 and #6: two full-width strips
       under the nav. One paper throughout; a claret rule separates them, not a
       tint change. The shared partials supply their own exact class names (§3.2). */

.cl-strip {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.cl-strip--ticker {
    border-bottom-color: var(--accent);
}

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

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

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

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

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

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

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

.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: #2D6B47;
    --ticker-down: #A62F26;
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.nav-drawer__nav {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

/* 5.6 Newsletter band — §7B #1, §4.7.2 #33: "full-width band above the footer".
       Shared partial; exact emitted names per §3.2. */

.cl-newsletter-band {
    margin-top: var(--space-xl);
    padding-block: var(--space-xl);
    border-top: 2px solid var(--accent);
    background: var(--paper-deep);
}

.newsletter {
    text-align: center;
}

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

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

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

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

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

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

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

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

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

/* 5.7 Footer — §7B #2–#11, §4.7.2 #34: "light footer: 3 columns on paper-deep,
       claret rules". No dark chrome. */

.cl-footer {
    background: var(--paper-deep);
    border-top: 1px solid var(--rule);
}
.cl-footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-lg);
}

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

/* THE FOOTER KEEPS THE RULE AND DROPS THE STAGGER (§4.7.6). §7.1.1 requires the
   mark to survive its small use, not to keep its shape. The stagger is what fails
   here: 0.37 of an 18px letter is ~7px, which reads as something set wrong rather
   than as a gesture. The rule survives — but ONLY because its thickness is PINNED
   to 2px instead of scaling, since 0.06 x 18px is 1.08px and a sub-pixel claret
   hairline is the one part of this mark that genuinely disappears when small. */

.cl-footer__mark {
    --mark: 18px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--mark) * 0.18);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--mark);
    line-height: 1;
    color: var(--accent);
}

.cl-footer__mark-rule {
    width: 2px;
    height: calc(var(--mark) * 0.95);
    background: var(--accent);
}

.cl-footer__wordmark {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--size-h3);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.cl-footer__tagline {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--ink-mute);
}

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

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

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

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

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

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

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

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

.ad-slot {
    display: block;
    text-align: center;
}

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

.ad-slot--house .house-ad {
    display: inline-block;
    padding: var(--space-md);
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Responsive — the chrome collapses; the zigzag blocks stack image-then-text
   in a later prompt (§4.7.1 "Mobile")
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   6. THE ZIGZAG BLOCK — the one primitive the whole page is built from
   ═══════════════════════════════════════════════════════════════════════════ */

/* MOBILE FIRST, AND THAT IS THE WHOLE TRICK. The default below is the narrow
   layout: one column, image first, exactly as §4.7.1 asks ("each block stacks
   image-then-text"). The two halves and the alternation only exist inside the
   min-width query further down, so the narrow case needs no `order` reset and no
   !important to undo a wide-screen rule. Writing it the other way round — two
   columns by default, unpicked at narrow widths — is what forces the override
   that then has to be fought. */

.cl-block {
    display: block;
    padding-block: var(--space-xl);
    border-bottom: 1px solid var(--rule);
}

.cl-block__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.cl-block__media {
    order: 1;
    min-width: 0;
}

.cl-block__body {
    order: 2;
    min-width: 0;
}

/* A rhythm break: full width, no halves, and NOT a <section>, so it stays out of
   the alternation count entirely (§4.7.1). */
.cl-break {
    padding-block: var(--space-lg);
}

/* .cl-container is declared once, in §4 with the other layout primitives. It was
   briefly re-declared here with identical values — a duplicate selector, which is
   the "one clean rule set" violation even when the two copies agree, because the
   next person to change one will not know about the other. */

.cl-media__link {
    display: block;
    overflow: hidden;
}

.cl-media__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.cl-media__image--wide {
    aspect-ratio: 16 / 9;
}

/* 6.1 The block header */

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

/* THE HEADING MUST BE ABLE TO SHRINK AND WRAP, or it overflows its own half.

   Measured, not guessed: "5 Things You Need to Know" set 628px wide inside a
   564px half at 1440px — a 64px overflow — and "Politics & Governance" 515px
   beside its "See more" link, overflowing by 39px. `flex: 0 0 auto` forbade the
   shrink, and --size-h2 clamps against the VIEWPORT (46px at 1440px) while the
   heading now lives in a HALF-width column. It is the same error courier's hero
   headline made: a viewport clamp cannot see the column it has to fit.

   Dropping the type size alone would not have fixed it — at 900px the font falls
   to 30.6px and the overflow persists at 25px and 36px — so the heading is made
   shrinkable and allowed to wrap instead, which keeps §4.7.4's specified scale
   intact. Long headings take two lines; nothing escapes the half.

   The rows were innocent: the widest measured 564px, exactly the body width. */
.cl-block__heading {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

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

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

.cl-block__ad {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--rule-soft);
}

/* 6.2 The text half's list. §4.0 governs: EVERY entry carries its own thumbnail,
       which is what the nine corrected rows of 2026-09-18 require. The block's
       large picture in the image half is the block's, not the listed articles'. */

.cl-list {
    display: block;
}

/* NO RULE BETWEEN ROWS OF THE SAME KIND (polish audit C1, shortlist item 3).
   Forty-four of these fell on one homepage, on the one structure that least
   needs them: ZIGZAG already separates by alternating the side the image sits
   on, so a rule between rows restated a break the layout had made. The
   symmetric padding-block leaves the rows their air with the line gone. */
.cl-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

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

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

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

.cl-row__title {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: var(--size-h3);
    line-height: 1.3;
}

.cl-row--lead .cl-row__title {
    font-weight: 700;
    font-size: 24px;
}

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

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

.cl-row__rank,
.cl-row__numeral {
    flex: 0 0 auto;
    min-width: 30px;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--accent);
}

/* 6.3 Thumbnails */

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

.cl-thumb--small {
    width: 92px;
    height: 69px;
    aspect-ratio: auto;
}

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

.cl-thumb--wide {
    width: 112px;
    height: 63px;
    aspect-ratio: auto;
}

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

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

/* 6.4 Heroes — the same block, with the headline carrying the display size */

.cl-hero__slide:not(.is-active),
.cl-hero2__slide:not(.is-active) {
    display: none;
}

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

.cl-hero__title {
    margin-top: var(--space-xs);
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--size-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
}

.cl-hero2__title {
    margin-top: var(--space-xs);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h2);
    line-height: var(--lh-head);
    letter-spacing: -0.01em;
}

.cl-hero__deck,
.cl-hero2__deck {
    margin: var(--space-sm) 0 0;
    max-width: var(--measure);
    font-size: 19px;
    color: var(--ink-soft);
}

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

/* 6.5 Carousel controls — both heroes are carousels (§3.3) */

.cl-carousel__nav {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

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

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

.cl-carousel__dots {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

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

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

/* 6.6 The modules that are not lists */

.cl-markets__panel {
    padding: var(--space-lg);
    border: 1px solid var(--rule);
    background: var(--paper-deep);
}

.cl-markets__label {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.cl-markets__strip {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

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

.cl-essay__title,
.cl-longread__title {
    margin-top: var(--space-xs);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

.cl-essay__deck {
    margin: var(--space-sm) 0 0;
    font-size: 18px;
    color: var(--ink-soft);
}

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

.cl-longread__quote {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 3px solid var(--accent);
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.35;
    color: var(--accent-deep);
}

/* The Opinion strip's image half is a stack of columnist faces. §4.0 is satisfied
   by the article thumbnails in the text half, not by these — a headshot is the
   columnist's face, not the article's picture (§4.7.2 #15). */
.cl-opinion__faces {
    display: flex;
    gap: var(--space-sm);
}

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

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

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

.cl-investigation {
    padding-left: var(--space-lg);
    border-left: 4px solid var(--accent);
}

.cl-break--investigation {
    background: var(--accent-tint);
}

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

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

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

.cl-newsletter-inline {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CATEGORY PAGE — a zigzag list, one article per block (§4.7.5)
   ═══════════════════════════════════════════════════════════════════════════ */

.cl-cat__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-block: var(--space-lg) 0;
}

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

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

.cl-cat__item-title {
    margin-top: var(--space-xs);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--size-h2);
    line-height: var(--lh-head);
}

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

.cl-cat__item-time {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    color: var(--ink-mute);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   8. ARTICLE PAGES — not a zigzag. The alternation is the homepage's mechanism;
   an article keeps clarion's chrome, claret rules and single paper (§4.7.5).
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

.cl-article__header,
.cl-article-v2__header,
.cl-article-v3__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--rule);
}

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

.cl-article__title {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: var(--size-h1);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

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

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

.cl-article__grid,
.cl-article-v2__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
    padding-block: var(--space-xl);
}

.cl-article-v3__column {
    max-width: var(--measure);
    margin: 0 auto;
    padding-block: var(--space-xl);
}

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

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

.cl-article__body h2 {
    font-size: 30px;
}

.cl-article__body h3 {
    font-size: 23px;
}

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

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

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

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

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

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

.cl-article-v2__related {
    padding-block: var(--space-xl);
}

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

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

   The generator produces eleven static pages, an authors index, one page per
   author and one per tag from shared templates this theme never overrides.
   Courier's Stage 2 proved what happens when these are skipped: six page types
   render essentially unstyled, because a too-narrow audit only ever looked at one
   of them. `team.html.jinja` is NOT here — generate_static_pages() never renders
   it, which is why .team-beat and .team-social have no rules.
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.article-related {
    padding-block: var(--space-xl);
    border-top: 1px solid var(--rule);
}

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

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

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

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

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

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

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

.article-card__deck,
.article-card__byline,
.card-excerpt,
.card-byline {
    font-size: 15px;
    color: var(--ink-soft);
}

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

.article-v3-related {
    padding-block: var(--space-xl);
    border-top: 1px solid var(--rule);
}

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

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

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

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

.article-v3-related__title {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: var(--size-h3);
}

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

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

.pagination-disabled {
    opacity: 0.45;
}

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

/* 9.1 Static pages */

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

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

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

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

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

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

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

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

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

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

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

/* 9.2 Authors index */

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

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

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

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

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

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

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

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

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

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

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

/* 9.3 Author page */

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

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

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

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

.author-hero__body {
    min-width: 0;
}

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

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

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

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

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

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

/* 9.4 Tag page */

.taxonomy-header {
    border-bottom: 2px solid var(--accent);
}

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

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

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

/* 9.5 Contact page */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 9.6 Archive */

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

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

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

.archive-list {
    display: block;
}

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

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

.archive-item-title {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: var(--size-h3);
}

/* 9.7 Search page */

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

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

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

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

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

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

/* 9.8 404 */

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

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

/* 9.9 Small shared bits */

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

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

/* ───────────────────────────────────────────────────────────────────────────
   10. Responsive — THE TWO HALVES AND THE ALTERNATION LIVE HERE.

   Everything above is the narrow layout. From 861px up the block becomes two
   halves, and `section.cl-block:nth-of-type(even)` reverses them.

   WHY nth-of-TYPE AND NOT nth-child: the rhythm breaks between blocks are
   <div class="cl-break">, so counting by type skips them and counts only the
   zigzag sections. And because it counts what actually RENDERED, a module that is
   silent on empty data cannot flip the parity of everything below it — the
   stranded-block failure a hardcoded side would cause (§4.7.1).
   ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 861px) {
    .cl-block__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-xl);
    }

    .cl-block__media,
    .cl-block__body {
        flex: 1 1 50%;
    }

    section.cl-block:nth-of-type(even) .cl-block__media {
        order: 2;
    }

    section.cl-block:nth-of-type(even) .cl-block__body {
        order: 1;
    }

    /* The photo essay is the one block with unequal halves: picture ~60%,
       text ~40% (§4.7.2 #14). */
    .cl-block--essay .cl-block__media {
        flex: 1 1 60%;
    }

    .cl-block--essay .cl-block__body {
        flex: 1 1 40%;
    }

    .cl-article__grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .cl-article-v2__grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

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

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

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

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

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

    .cl-nav__toggle {
        display: flex;
    }

    .cl-nav__list {
        display: none;
    }

    .cl-nav__inner {
        justify-content: space-between;
    }

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

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

    .cl-block {
        padding-block: var(--space-lg);
    }

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

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