/* ==========================================================================
   Nyakundi Report — Editorial UI
   Brutalist editorial system. Inter + Newsreader. 0px radius, 2px borders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --primary:                    #000000;
    --on-primary:                 #ffffff;
    --primary-container:          #1b1b1b;
    --on-primary-container:       #848484;
    --primary-fixed:              #e2e2e2;
    --primary-fixed-dim:          #c6c6c6;
    --on-primary-fixed:           #1b1b1b;
    --on-primary-fixed-variant:   #474747;
    --inverse-primary:            #c6c6c6;

    /* Surface */
    --surface:                    #f9f9f9;
    --surface-bright:             #f9f9f9;
    --surface-dim:                #dadada;
    --surface-container-lowest:   #ffffff;
    --surface-container-low:      #f3f3f3;
    --surface-container:          #eeeeee;
    --surface-container-high:     #e8e8e8;
    --surface-container-highest:  #e2e2e2;
    --surface-variant:            #e2e2e2;
    --surface-tint:               #5e5e5e;
    --inverse-surface:            #303030;
    --inverse-on-surface:         #f1f1f1;

    --on-surface:                 #1a1c1c;
    --on-surface-variant:         #4c4546;

    /* Outline */
    --outline:                    #7e7576;
    --outline-variant:            #cfc4c5;

    /* Secondary (Signal Red) */
    --secondary:                  #b7221e;
    --on-secondary:               #ffffff;
    --secondary-container:        #fe5649;
    --on-secondary-container:     #5c0003;
    --secondary-fixed:            #ffdad5;
    --secondary-fixed-dim:        #ffb4aa;

    /* Error */
    --error:                      #ba1a1a;
    --on-error:                   #ffffff;
    --error-container:            #ffdad6;
    --on-error-container:         #93000a;

    /* Semantic surfaces used in this theme */
    --paper:                      #ffffff;          /* cards, main canvas */
    --sidebar-surface:            #f6f2ee;
    --topbar-surface:             #fbf9f8;
    --topbar-border:              #18181b;

    /* Fonts */
    --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif:  "Newsreader", "Times New Roman", Georgia, serif;
    --font-icon:   "Material Symbols Outlined";

    /* Type scale */
    --fs-headline-xl: 48px;   /* Newsreader 700, lh 1.1, -0.02em */
    --fs-headline-lg: 32px;   /* Newsreader 600, lh 1.2, -0.01em */
    --fs-headline-md: 24px;   /* Newsreader 600, lh 1.2 */
    --fs-body-lg:     18px;   /* Inter 400,  lh 1.6 */
    --fs-body-md:     15px;   /* Inter 400,  lh 1.5 */
    --fs-label-caps:  12px;   /* Inter 700,  lh 1, 0.08em, uppercase */
    --fs-data-mono:   13px;   /* Inter 500,  lh 1, 0.02em */

    /* Spacing */
    --grid-margin:    24px;
    --grid-gutter:    1px;
    --stack-tight:    4px;
    --stack-base:     8px;
    --section-gap:    32px;
    --topbar-h:       68px;
    --sidebar-w:      240px;
    --content-max:    1560px;

    /* Control metrics */
    --border-thin:  1px;
    --border-base:  2px;
    --focus-ring:   0 0 0 2px #fff, 0 0 0 4px #000;
}

@media (max-width: 959px) {
    :root {
        --topbar-h: 58px;
    }
}

/* Dark mode — opt-in via the theme toggle (sets html[data-theme="dark"]).
   All dark tokens are consolidated here as the single source of truth. */
html[data-theme="dark"] {
    --primary:                    #ffffff;
    --on-primary:                 #000000;
    --primary-container:          #1b1b1b;
    --on-primary-container:       #c6c6c6;

    --surface:                    #09090b;
    --surface-bright:             #09090b;
    --surface-dim:                #000000;
    --surface-container-lowest:   #000000;
    --surface-container-low:      #111113;
    --surface-container:          #18181b;
    --surface-container-high:     #1f1f23;
    --surface-container-highest:  #27272a;
    --surface-variant:            #18181b;
    --surface-tint:               #c6c6c6;

    --on-surface:                 #ffffff;
    --on-surface-variant:         #c6c6c7;

    --outline:                    #52525b;
    --outline-variant:            #27272a;

    --secondary:                  #fe5649;
    --on-secondary:               #000000;
    --secondary-container:        #b7221e;

    --paper:                      #09090b;
    --paper-alt:                  #15171c;
    --sidebar-surface:            #18181b;
    --topbar-surface:             #09090b;
    --topbar-border:              #ffffff;

    /* Extended dark tokens (used by platform/terminal layers) */
    --bg:                         #07080a;
    --hairline:                   #2a2d33;
    --hairline-strong:            #3a3e45;
    --skeleton-base:              #1f1f23;
    --skeleton-shine:             #2a2a2f;
    --focus-ring:                 0 0 0 2px #09090b, 0 0 0 4px #fff;
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base & reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface);
    background: var(--surface);
    overflow-x: clip;
    /* Prevent the page from revealing edge gaps when users swipe horizontally */
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* App shell layout — content lives under fixed topbar, right of fixed sidebar. */
body.has-shell {
    padding-top: var(--topbar-h);
}

/* Cap the readable canvas at 1440px */
.canvas {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

/* Remove default button / input chrome */
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Eliminate 300ms tap delay on iOS without disabling double-tap zoom */
a, button, [role="button"], [tabindex] {
    touch-action: manipulation;
}

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Links */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Selection */
::selection { background: var(--primary); color: var(--on-primary); }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: 8px; top: 8px;
    padding: 8px 12px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-200%);
    z-index: 200;
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Typography utility classes
   -------------------------------------------------------------------------- */
.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }

.headline-xl {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4vw, var(--fs-headline-xl));
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.headline-lg {
    font-family: var(--font-serif);
    font-size: clamp(26px, 2.6vw, var(--fs-headline-lg));
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
}
.headline-md {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.2;
    font-weight: 600;
}
.body-lg {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
}
.body-md {
    font-size: var(--fs-body-md);
    line-height: 1.5;
}
.label-caps {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
}
.data-mono {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 500;
}

h1, h2, h3, h4 { font-family: var(--font-serif); margin: 0; }
p { margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   4. Topbar
   -------------------------------------------------------------------------- */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topbar-h);
    background: color-mix(in srgb, var(--topbar-surface) 94%, var(--paper));
    color: var(--on-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--topbar-border) 14%, transparent);
    box-shadow: 0 1px 0 rgba(24, 24, 27, 0.04);
    z-index: 50;
}
.topbar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 20px;
    height: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 18px;
}
.topbar__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.topbar__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand-mark {
    width: 10px;
    height: 24px;
    background: linear-gradient(180deg, var(--secondary) 0%, color-mix(in srgb, var(--secondary) 20%, transparent) 100%);
    flex-shrink: 0;
}
.topbar__brand-lockup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.topbar__brand-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 900;
    font-size: clamp(17px, 2.9vw, 24px);
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--on-surface);
    line-height: 0.95;
    white-space: nowrap;
}
.topbar__brand-tag {
    display: none;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--outline);
    white-space: nowrap;
}

.topbar__nav {
    display: none;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
@media (min-width: 1040px) {
    .topbar__nav { display: flex; }
}
.topbar__nav a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 10px 9px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.topbar__nav a:hover {
    background: color-mix(in srgb, var(--surface-container) 60%, transparent);
    color: var(--on-surface);
    text-decoration: none;
}
.topbar__nav a.is-active {
    color: var(--on-surface);
    border-bottom-color: var(--on-surface);
}
.topbar__nav-live { color: var(--secondary) !important; }
/* Progressive disclosure: show more nav items as viewport gets wider.
   The nav has 6 links (Live, Politics, Investigations, Business, Opinion, World).
   1040–1199 px: show first 4 (Live + 3 sections).
   1200–1379 px: show first 5, hide World.
   1380 px+:     show all 6 — plenty of space, no trimming needed. */
@media (min-width: 1040px) and (max-width: 1199px) {
    .topbar__nav a:nth-child(n+5) { display: none; }
}
@media (min-width: 1200px) and (max-width: 1379px) {
    .topbar__nav a:nth-child(n+6) { display: none; }
}

.topbar__search {
    display: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: min(296px, 26vw);
    padding: 0 12px;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--paper) 80%, transparent);
}
@media (min-width: 1280px) {
    .topbar__search { display: inline-flex; }
}
.topbar__search:focus-within {
    border-color: var(--secondary);
    background: var(--paper);
}
.topbar__search input {
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--on-surface);
    width: 100%;
    outline: none;
}
.topbar__search input::placeholder {
    color: var(--outline);
    font-weight: 600;
    letter-spacing: 0;
    font-size: 12px;
}
.topbar__search .material-symbols-outlined {
    font-size: 18px;
    color: var(--outline);
}

.topbar__mobile-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    text-decoration: none;
    flex-shrink: 0;
}
.topbar__mobile-search:hover {
    background: var(--surface-container-low);
    text-decoration: none;
}
@media (min-width: 1280px) {
    .topbar__mobile-search { display: none; }
}

/* --- Mobile topbar policy ------------------------------------------------
   On phones the topbar must fit: [menu] [brand] [search-icon] and nothing
   else. The mobile search icon stays visible so users can always reach
   search. Heavy items (newsletter pill, bolt, staff badge copy) hide. */
@media (max-width: 767px) {
    .topbar__icon--live,
    .topbar__icon,
    .topbar__subscribe,
    .topbar__search { display: none !important; }
    /* Keep the compact search icon visible on phones */
    .topbar__mobile-search {
        display: inline-flex !important;
        /* Bump to 44px touch target as per WCAG 2.5.5 */
        width: 44px;
        height: 44px;
    }
}

.topbar__subscribe {
    display: none;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0;
}
@media (min-width: 1180px) {
    .topbar__subscribe { display: inline-flex; }
}
.topbar__subscribe:hover { background: var(--on-surface-variant); color: var(--surface-bright); text-decoration: none; }

.topbar__staff {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    color: var(--on-surface);
    text-decoration: none;
}
.topbar__staff:hover {
    background: var(--surface-container-low);
    border-color: var(--topbar-border);
    text-decoration: none;
}
.topbar__staff-avatar {
    width: 30px;
    height: 30px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    overflow: hidden;
    flex-shrink: 0;
}
.topbar__staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.topbar__staff-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.topbar__staff-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.topbar__staff-copy strong,
.topbar__staff-copy span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__staff-copy strong {
    max-width: 15ch;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
}
.topbar__staff-copy span {
    max-width: 16ch;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
    line-height: 1.1;
}

.topbar__icon,
.topbar__menu,
.topbar__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px touch target meets WCAG 2.5.5 on mobile */
    width: 44px;
    height: 44px;
    color: var(--on-surface);
    background: transparent;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.topbar__icon:hover,
.topbar__menu:hover,
.topbar__theme:hover {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
}
.topbar__icon .material-symbols-outlined,
.topbar__menu .material-symbols-outlined,
.topbar__theme .material-symbols-outlined,
.topbar__mobile-search .material-symbols-outlined {
    font-size: 20px;
}
.topbar__icon--live { color: var(--secondary); }

.topbar__menu {
    color: var(--on-surface);
}
@media (min-width: 960px) {
    .topbar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px 26px;
        padding: 0 28px;
    }
    .topbar__left { gap: 20px; }
    .topbar__right { gap: 10px; }
    .topbar__brand-mark {
        width: 12px;
        height: 30px;
    }
}
@media (min-width: 1280px) {
    .topbar__brand-tag { display: block; }
}
@media (max-width: 959px) {
    .topbar__icon,
    .topbar__subscribe {
        display: none;
    }
    .topbar__staff {
        padding-right: 3px;
    }
    .topbar__staff-copy {
        display: none;
    }
}
@media (max-width: 479px) {
    .topbar__staff {
        padding: 0;
        border-color: transparent;
        background: transparent;
    }
    .topbar__staff-avatar {
        width: 36px;
        height: 36px;
    }
}

/* --------------------------------------------------------------------------
   5. Sidebar navigation
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    height: calc(100vh - var(--topbar-h));
    width: var(--sidebar-w);
    background: var(--sidebar-surface);
    color: var(--on-surface);
    border-right: 1px solid color-mix(in srgb, var(--topbar-border) 12%, transparent);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 180ms ease-out;
    box-shadow: 18px 0 36px rgba(24, 24, 27, 0.12);
}
@media (max-width: 959px) {
    .drawer { width: min(82vw, 320px); }
}
.drawer.is-open { transform: translateX(0); }

.drawer__header {
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 76%),
        var(--sidebar-surface);
    color: var(--on-surface);
}
.drawer__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.drawer__eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
}
.drawer__title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface);
    margin: 0;
}
.drawer__version {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--outline);
    opacity: 1;
}
.drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}
.drawer__close .material-symbols-outlined { font-size: 20px; }
.drawer__close:hover {
    background: var(--surface-container-low);
}

.drawer__nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}
.drawer__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 12px;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.drawer__nav a:hover {
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    color: var(--on-surface);
    border-color: var(--outline-variant);
    text-decoration: none;
}
.drawer__nav a[aria-current="page"],
.drawer__nav a.is-active {
    background: var(--paper);
    color: var(--on-surface);
    border-color: var(--outline-variant);
    box-shadow: inset 3px 0 0 var(--secondary);
}
.drawer__nav .material-symbols-outlined { font-size: 18px; }

.drawer__cta {
    padding: 4px 12px 12px;
}
.drawer__cta button,
.drawer__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--on-surface);
}
.drawer__cta button:hover,
.drawer__cta a:hover {
    background: color-mix(in srgb, var(--on-surface) 88%, var(--secondary));
    color: var(--surface-bright);
    text-decoration: none;
}

.drawer__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--outline-variant);
}
.drawer__footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    text-decoration: none;
}
.drawer__footer a:hover { background: var(--surface-container-low); color: var(--on-surface); text-decoration: none; }
.drawer__footer .material-symbols-outlined { font-size: 18px; }

/* Backdrop for mobile overlay drawer */
.drawer-backdrop {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(24, 24, 27, 0.24);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Container, canvas, grid
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px;
}
@media (min-width: 960px) {
    .container { padding: 24px 32px; }
}

/* Brutalist grid container — gap is a 1px bleed of the primary border. */
.grid-frame {
    display: grid;
    gap: 1px;
    background: var(--topbar-border);
    border: 2px solid var(--topbar-border);
}
.grid-frame > * { background: var(--paper); }

/* --------------------------------------------------------------------------
   7. Ticker strip
   -------------------------------------------------------------------------- */
.ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 40px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--on-surface);
    color: var(--surface-bright);
    overflow: hidden;
}
.ticker__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--secondary);
    color: var(--on-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ticker__badge .material-symbols-outlined { font-size: 14px; }
.ticker__track {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    font-weight: 500;
    color: var(--surface-bright);
    white-space: nowrap;
    overflow: hidden;
}
.ticker__track a { color: var(--surface-bright); text-decoration: none; }
.ticker__track a:hover { color: var(--secondary); text-decoration: none; }
.ticker__track > span { display: inline-flex; align-items: center; gap: 8px; }
.ticker__sep { color: var(--outline-variant); opacity: 0.4; }
.ticker__dot {
    width: 8px; height: 8px;
    background: var(--secondary);
    border-radius: 0;
}
.ticker__marquee {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    animation: ticker-scroll 60s linear infinite;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker__marquee { animation: none; }
}

/* --------------------------------------------------------------------------
   8. Buttons & pills
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid var(--on-surface);
    text-decoration: none;
    cursor: pointer;
}
.btn:hover {
    background: var(--surface-bright);
    color: var(--on-surface);
    text-decoration: none;
}
.btn--ghost {
    background: transparent;
    color: var(--on-surface);
}
.btn--ghost:hover {
    background: var(--on-surface);
    color: var(--surface-bright);
}
.btn--accent {
    background: var(--secondary);
    color: var(--on-secondary);
    border-color: var(--secondary);
}
.btn--accent:hover {
    background: var(--paper);
    color: var(--secondary);
}
.btn--block { width: 100%; }

.pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--on-surface);
    color: var(--surface-bright);
    touch-action: manipulation;
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
}
.pill--ghost {
    background: transparent;
    color: var(--on-surface);
    border: 1px solid var(--outline);
}
.pill--accent {
    background: var(--secondary);
    color: var(--on-secondary);
}
.pill--inverse {
    background: var(--surface-bright);
    color: var(--on-surface);
}

.badge-breaking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--secondary);
    color: var(--on-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.badge-breaking .live-dot {
    width: 8px; height: 8px;
    background: var(--on-secondary);
    border-radius: 0;
}

.live-dot--pulse { animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   9. Block header / section heading
   -------------------------------------------------------------------------- */
.block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--surface-container);
}
.block-header h2,
.block-header h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.2;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}
.block-header--inverse {
    background: var(--on-surface);
    color: var(--surface-bright);
}
.block-header--inverse h2,
.block-header--inverse h3 { color: var(--surface-bright); }

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 12px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    margin-bottom: 24px;
}
.section-heading h1 {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3vw, var(--fs-headline-lg));
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

/* --------------------------------------------------------------------------
   10. Homepage — Lead / Wire / Secondary
   -------------------------------------------------------------------------- */
.home-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--topbar-border);
    border-bottom: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 1024px) {
    .home-hero { grid-template-columns: 8fr 4fr; }
}
.home-hero > * { background: var(--paper); }

.lead-story {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px 16px 18px;
    gap: 16px;
    position: relative;
}
@media (min-width: 1024px) {
    .lead-story {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
        align-items: start;
        padding: 24px;
        gap: 22px;
    }
}
.lead-story__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.lead-story__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lead-story__title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 639px) {
    .lead-story__title {
        font-size: clamp(18px, 4.8vw, 24px);
        -webkit-line-clamp: 2;
    }
}
.lead-story__title a { color: inherit; }
.lead-story__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lead-story__lede {
    font-family: var(--font-sans);
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--on-surface-variant);
    max-width: 60ch;
    margin: 0;
}
.lead-story__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 2px solid var(--topbar-border);
    overflow: hidden;
    background: var(--surface-container);
    position: relative;
}
@media (max-width: 639px) {
    .lead-story__media {
        aspect-ratio: 16 / 9;
    }
}
.lead-story__media:first-child {
    order: 2;
}
@media (min-width: 1024px) {
    .lead-story__media:first-child {
        order: 1;
    }
}
.lead-story__content {
    order: 1;
}
@media (min-width: 1024px) {
    .lead-story__content {
        order: 2;
    }
}
.lead-story__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform 220ms ease;
}
.lead-story__media:hover img { transform: scale(1.01); }
.lead-story__media-label {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lead-story__byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: uppercase;
}
.lead-story__byline .sep { color: var(--outline-variant); }
.lead-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 10px 14px;
    border: 1px solid var(--outline-variant);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lead-story__cta:hover {
    text-decoration: none;
    border-color: var(--on-surface);
}

/* The Wire (right rail) */
.wire {
    display: flex;
    flex-direction: column;
    background: var(--paper);
}
.wire__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wire__item {
    display: grid;
    grid-template-columns: 1fr;           /* mobile: stamp row, then body */
    gap: 6px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--outline-variant);
    text-decoration: none;
    color: var(--on-surface);
    transition: background 100ms ease;
}
@media (min-width: 640px) {
    .wire__item {
        grid-template-columns: 96px 1fr;   /* wider time col fits "Yesterday · 14:32" */
        gap: 12px;
        align-items: start;
    }
}
.wire__item:hover {
    background: var(--surface-container-low);
    text-decoration: none;
}
.wire__time {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--secondary);
    padding-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wire__item:not(:first-child) .wire__time { color: var(--on-surface); }
.wire__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wire__title {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    font-weight: 700;
    line-height: 1.35;
    color: var(--on-surface);
    margin: 0;
}
.wire__item:hover .wire__title { text-decoration: underline; text-underline-offset: 3px; }
.wire__excerpt {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wire__tag {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}
.wire__footer {
    margin-top: auto;
    padding: 12px 16px;
    border-top: var(--border-base) solid var(--topbar-border);
    text-align: center;
}
.wire__footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface);
    border: 1px solid var(--on-surface);
    text-decoration: none;
}
.wire__footer a:hover {
    background: var(--on-surface);
    color: var(--surface-bright);
    text-decoration: none;
}

/* Secondary grid (3 columns) */
.home-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--topbar-border);
    border-bottom: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 768px)  { .home-secondary { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .home-secondary { grid-template-columns: 1fr 1fr 1fr; } }
.home-secondary > * { background: var(--paper); }
.home-secondary--two { grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .home-secondary--two { grid-template-columns: 1fr 1fr; }
}
.home-secondary--three { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .home-secondary--three { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .home-secondary--three { grid-template-columns: 1fr 1fr 1fr; }
}

.module {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--surface-container);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface);
}
.module__header--inverse {
    background: var(--on-surface);
    color: var(--surface-bright);
}
.module__header .material-symbols-outlined { font-size: 18px; }
.module__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
.module__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--topbar-border);
    background: var(--surface-container);
    overflow: hidden;
}
.module__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: none;
}
.module__title {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.2;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}
.module__title a { color: inherit; }
.module__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.module__excerpt {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 0;
}
.module__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--outline-variant);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}

/* Opinion variant (cream/neutral panel) */
.module--opinion {
    background: var(--surface-dim);
}
.module--opinion .module__title { font-style: italic; }
.module--opinion .module__avatar {
    width: 48px; height: 48px;
    border: 2px solid var(--topbar-border);
    overflow: hidden;
    filter: none;
}
.module--opinion .module__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   11. Section / desk grid
   -------------------------------------------------------------------------- */
.section-hero {
    padding: 48px 24px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--paper);
}
@media (max-width: 639px) {
    .section-hero { padding: 28px 18px; }
}
.section-hero .eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
    display: block;
    margin-bottom: 8px;
}
.section-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4vw, var(--fs-headline-xl));
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--on-surface);
    max-width: 24ch;
}
.section-hero__lede {
    font-family: var(--font-sans);
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--on-surface-variant);
    max-width: 60ch;
    margin: 0;
}

.section-feature {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--topbar-border);
    border-bottom: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 1024px) {
    .section-feature { grid-template-columns: 7fr 5fr; }
}
.section-feature > * { background: var(--paper); }
.section-feature__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-container);
}
.section-feature__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: none;
}
.section-feature__body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
@media (max-width: 639px) {
    .section-feature__body { padding: 20px; }
}
.section-feature__title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 2.8vw, var(--fs-headline-lg));
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
    margin: 0;
    color: var(--on-surface);
}
.section-feature__lede {
    font-family: var(--font-sans);
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--on-surface-variant);
    margin: 0;
}

.story-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--outline-variant);
}
@media (min-width: 640px) {
    .story-row { grid-template-columns: 200px 1fr; gap: 24px; align-items: flex-start; }
}
.story-row__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
    position: relative;
}
.story-row__media img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.story-row__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--outline);
}
.story-row__media-icon { font-size: 32px; color: var(--outline); }
.data-mono--section-count { margin-top: 12px; color: var(--outline); }
.story-row__body { display: flex; flex-direction: column; gap: 8px; }
.story-row__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}
.story-row__title {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: var(--on-surface);
}
.story-row__title a { color: inherit; }
.story-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-row__excerpt {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 0;
}
.story-row__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}

/* Bento-style story list used for archive/search results */
.story-list {
    display: grid;
    gap: 1px;
    background: var(--topbar-border);
    border: 2px solid var(--topbar-border);
}
@media (min-width: 640px)  { .story-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .story-list { grid-template-columns: 1fr 1fr 1fr; } }
.story-list > * { background: var(--paper); }
.story-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.story-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container);
}
.story-card__media img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.story-card__body { display: flex; flex-direction: column; gap: 8px; }
.story-card__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}
.story-card h2, .story-card h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.25;
    font-weight: 600;
    margin: 0;
}
.story-card p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    color: var(--on-surface-variant);
    margin: 0;
}
.story-card__meta {
    display: flex;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}

/* --------------------------------------------------------------------------
   12. Article detail
   -------------------------------------------------------------------------- */
.article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--topbar-border);
    border-left: var(--border-base) solid var(--topbar-border);
    border-right: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 1024px) {
    .article { grid-template-columns: 2fr 1fr; }
}
.article > * { background: var(--paper); }

.article__main {
    padding: 24px 18px 32px;
    min-width: 0; /* prevent text/content overflow from expanding the grid column */
}
@media (min-width: 768px) { .article__main { padding: 40px 40px 48px; } }

.article-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    margin-bottom: 20px;
    max-width: 46rem;
}
.article-header__flag {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.article-header__flag .pill,
.article-header__flag .badge-breaking {
    padding: 3px 8px;
    font-size: 10px;
}
.article-header__flag .data-mono {
    font-size: 10px;
    letter-spacing: 0.08em;
}
.article-header h1 {
    font-family: var(--font-serif);
    font-size: clamp(22px, 1.9vw, 34px);
    line-height: 1.01;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
    text-wrap: balance;
}
@media (max-width: 639px) {
    .article-header h1 {
        font-size: clamp(18px, 4.8vw, 24px);
    }
    .article-header {
        gap: 12px;
    }
}
.article-header .lede {
    font-family: var(--font-sans);
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--on-surface-variant);
    margin: 0;
    max-width: 50ch;
}

.article__aside {
    content-visibility: auto;
    /* width: 0px prevents the intrinsic-size hint from expanding the grid
       column on narrow viewports before the aside has been rendered.
       height: 600px is a conservative paint estimate to reduce CLS. */
    contain-intrinsic-size: 0px 600px;
    min-width: 0;    /* allow grid to shrink this item below its content size */
    max-width: 100%; /* hard cap — never wider than the grid cell */
}

.article-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 0;
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
    max-width: 46rem;
}
@media (max-width: 639px) {
    .article-meta { align-items: stretch; }
    .article-meta__author { flex: 1 1 100%; }
    .article-meta__actions { flex: 1 1 100%; justify-content: flex-start; }
}
.article-meta__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.article-meta__avatar {
    width: 48px; height: 48px;
    border: 2px solid var(--topbar-border);
    overflow: hidden;
    background: var(--surface-container);
    flex-shrink: 0;
}
.article-meta__avatar img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.article-meta__avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-surface);
}
.article-meta__byline {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--on-surface);
}
.article-meta__role {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: none;
}
.article-meta__row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: uppercase;
}
.article-meta__actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.article-meta__edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--on-surface);
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.article-meta__edit:hover {
    background: var(--surface-bright);
    color: var(--on-surface);
    text-decoration: none;
}
.article-meta__edit .material-symbols-outlined {
    font-size: 18px;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 2px solid var(--on-surface);
    background: transparent;
    color: var(--on-surface);
    text-decoration: none;
}
.icon-btn:hover {
    background: var(--on-surface);
    color: var(--surface-bright);
    text-decoration: none;
}
.icon-btn.is-success {
    background: var(--on-surface);
    color: var(--surface-bright);
}
.icon-btn .material-symbols-outlined { font-size: 18px; }

.article-figure {
    margin: 24px 0;
}
.article-figure__media {
    border: 2px solid var(--topbar-border);
    overflow: hidden;
    background: var(--surface-container);
    position: relative;
}
.article-figure__media img {
    width: 100%;
    object-fit: cover;
    filter: none;
}
.article-figure figcaption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    border-bottom: 1px solid var(--outline-variant);
}
.article-figure figcaption .credit { text-transform: uppercase; }

/* Key takeaways (Key Findings box) */
.takeaways {
    margin: 24px 0;
    padding: 24px;
    background: var(--surface-container);
    border: 2px solid var(--on-surface);
}
.takeaways h3 {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--on-surface);
}
.takeaways ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.takeaways li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface);
}
.takeaways li::before {
    content: "►";
    flex-shrink: 0;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.4;
}

/* Article prose */
.prose {
    font-family: var(--font-sans);
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: var(--on-surface);
    max-width: 72ch;
}
.prose > p { margin: 0 0 1.25em; }
.prose > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 4.5em;
    line-height: 0.85;
    float: left;
    padding: 0.1em 0.1em 0 0;
    margin-right: 0.05em;
    color: var(--on-surface);
}
/* Drop cap is too large on narrow phones — suppress it below 480px */
@media (max-width: 479px) {
    .prose > p:first-of-type::first-letter {
        font-size: 1em;
        float: none;
        padding: 0;
        margin: 0;
        line-height: inherit;
    }
}
.prose h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2em 0 0.6em;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--on-surface);
    text-transform: none;
}
.prose h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    font-weight: 600;
    margin: 1.6em 0 0.5em;
}
.prose a {
    color: var(--on-surface);
    border-bottom: 1px solid var(--on-surface);
}
.prose a:hover { color: var(--secondary); border-bottom-color: var(--secondary); text-decoration: none; }
.prose blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-headline-md);
    line-height: 1.35;
    color: var(--on-surface);
    margin: 2em 0;
    padding: 0 0 0 24px;
    border-left: 4px solid var(--on-surface);
}
.prose blockquote cite {
    display: block;
    margin-top: 16px;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}
.prose ul, .prose ol {
    padding-left: 1.2em;
    margin: 0 0 1.25em;
}
.prose li { margin-bottom: 0.4em; }
.prose img { width: 100%; border: 2px solid var(--topbar-border); filter: none; margin: 1.5em 0; }
/* Tables in article bodies must scroll horizontally on narrow screens */
.prose table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-body-md);
}
.prose table th,
.prose table td {
    padding: 8px 12px;
    border: 1px solid var(--outline-variant);
    text-align: left;
    vertical-align: top;
}
.prose table thead th {
    background: var(--surface-container);
    font-weight: 700;
    font-size: var(--fs-data-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Prevent wide tables from breaking layout — wrap in scrollable div */
.prose .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    border: 1px solid var(--outline-variant);
}
/* Fallback: direct table children also scroll */
.prose > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 1.5em 0;
}
/* Responsive video/iframe embeds in article prose
   Wrap YouTube/Vimeo/Twitter iframes in .video-embed for 16:9 aspect ratio */
.prose iframe,
.prose .video-embed {
    width: 100%;
    max-width: 100%;
    margin: 1.5em 0;
    border: 0;
}
.prose .video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.prose .video-embed iframe,
.prose .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}
/* thread-block (used for raw embeds on video_detail) */
.thread-block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.thread-block iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Rich story blocks */
.prose .story-gallery,
.prose .story-card {
    margin: 2rem 0;
}

.prose .story-gallery {
    padding: 18px;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--surface-container-low) 55%, var(--paper));
}

.prose .story-gallery__head,
.prose .story-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.prose .story-gallery__head h3,
.prose .story-card__body h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
}

.prose .story-gallery__eyebrow,
.prose .story-card__badge,
.prose .story-card__meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.prose .story-gallery__eyebrow,
.prose .story-card__badge {
    background: var(--on-surface);
    color: var(--paper);
}

.prose .story-card__meta {
    border: 1px solid var(--outline-variant);
    color: var(--outline);
}

.prose .story-gallery__controls {
    display: inline-flex;
    gap: 8px;
}

.prose .story-gallery__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    font-size: 20px;
    line-height: 1;
}

.prose .story-gallery__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76%, 1fr);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

.prose .story-gallery__item {
    margin: 0;
    scroll-snap-align: start;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    overflow: hidden;
}

.prose .story-gallery__item img {
    margin: 0;
    border: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

.prose .story-gallery__item figcaption {
    padding: 12px 14px 14px;
    font-size: var(--fs-body-md);
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.prose .story-card {
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    overflow: hidden;
}

.prose .story-card__head {
    padding: 14px 16px 0;
    margin-bottom: 0;
}

.prose .story-card__provider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 0;
}

.prose .story-card__provider-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.prose .story-card__provider-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.prose .story-card__provider-copy strong,
.prose .story-card__provider-copy span {
    display: block;
    overflow-wrap: anywhere;
}

.prose .story-card__provider-copy strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prose .story-card__provider-copy span {
    color: var(--on-surface-variant);
    font-size: 12px;
    line-height: 1.35;
}

.prose .story-card__body {
    padding: 16px;
}

.prose .story-card__body p {
    margin: 0 0 1rem;
    color: var(--on-surface-variant);
}

.prose .story-card__quote {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--secondary);
    background: var(--surface-container-low);
}

.prose .story-card__quote p:last-child {
    margin-bottom: 0;
}

.prose .story-card__cta,
.prose .story-card__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--on-surface);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.prose .story-card__cta:hover,
.prose .story-card__fallback:hover {
    background: var(--on-surface);
    color: var(--paper);
    text-decoration: none;
}

.prose .story-card__embed {
    margin: 0;
}

.prose .story-card__fallback {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
}

.prose .story-card--social .story-card__badge {
    background: var(--secondary);
}

.prose .story-card--provider-youtube .story-card__badge,
.prose .story-card--provider-youtube .story-card__provider-mark {
    background: #ff0000;
    color: #ffffff;
    border-color: #ff0000;
}

.prose .story-card--provider-x .story-card__badge,
.prose .story-card--provider-x .story-card__provider-mark {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.prose .story-card--provider-instagram .story-card__badge,
.prose .story-card--provider-instagram .story-card__provider-mark {
    background: linear-gradient(135deg, #fd5949 0%, #d6249f 55%, #285aeb 100%);
    color: #ffffff;
    border-color: transparent;
}

.prose .story-card--provider-facebook .story-card__badge,
.prose .story-card--provider-facebook .story-card__provider-mark {
    background: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

.prose .story-card--provider-tiktok .story-card__badge,
.prose .story-card--provider-tiktok .story-card__provider-mark {
    background: #111111;
    color: #ffffff;
    border-color: #25f4ee;
    box-shadow: inset -2px 0 0 #fe2c55;
}

.prose .story-card--provider-vimeo .story-card__badge,
.prose .story-card--provider-vimeo .story-card__provider-mark {
    background: #1ab7ea;
    color: #ffffff;
    border-color: #1ab7ea;
}

.prose .story-card--document .story-card__badge {
    background: color-mix(in srgb, var(--secondary) 82%, var(--on-surface));
}

@media (max-width: 760px) {
    .prose .story-gallery {
        padding: 14px;
    }

    .prose .story-gallery__head,
    .prose .story-card__head,
    .prose .story-card__provider {
        flex-wrap: wrap;
    }

    .prose .story-gallery__track {
        grid-auto-columns: minmax(88%, 1fr);
    }
}

@media (max-width: 960px) {
    .live-package {
        grid-template-columns: 1fr;
    }
}

/* Speed-read / reading progress bar */
.speedread {
    position: sticky;
    top: var(--topbar-h);
    height: 3px;
    background: var(--outline-variant);
    z-index: 10;
}
.speedread__fill {
    height: 100%;
    width: 0;
    background: var(--secondary);
    transition: width 120ms linear;
}

/* Tag row */
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
    margin-top: 32px;
    border-top: 2px solid var(--on-surface);
}
.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid var(--on-surface);
    touch-action: manipulation;
}
.tag:hover { background: var(--on-surface); color: var(--surface-bright); text-decoration: none; }
@media (max-width: 767px) {
    .tag { min-height: 36px; padding: 6px 12px; }
}

/* Editor's note / opinion callout */
.opinion-callout {
    margin: 32px 0;
    padding: 24px;
    border: 2px solid var(--secondary);
    background: var(--paper);
    position: relative;
}
.opinion-callout::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--secondary);
}
.opinion-callout .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.opinion-callout h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 12px;
}
.opinion-callout p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 0 0 12px;
}

/* Article aside / right rail */
.article__aside {
    padding: 0;
    display: flex;
    flex-direction: column;
    border-top: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 1024px) {
    .article__aside { border-top: 0; }
}
.aside-module {
    display: flex;
    flex-direction: column;
    border-bottom: var(--border-base) solid var(--topbar-border);
}
.aside-module__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.aside-module__body { padding: 16px; display: flex; flex-direction: column; }
.aside-story-link {
    padding: 12px 0;
    border-bottom: 1px solid var(--outline-variant);
    text-decoration: none;
}
.aside-story-link:last-child { border-bottom: 0; }
.aside-story-link__title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    margin: 6px 0;
}

.trending-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
}
.trending-list li {
    border-bottom: 1px solid var(--outline-variant);
}
.trending-list li:last-child { border-bottom: 0; }
.trending-list a {
    display: block;
    padding: 16px;
    color: var(--on-surface);
    text-decoration: none;
}
.trending-list a:hover { background: var(--surface-container-low); text-decoration: none; }
.trending-list .rank {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--secondary);
    margin-bottom: 4px;
}
.trending-list h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.25;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 8px;
}
.trending-list a:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
.trending-list .meta {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}

/* Newsletter signup */
.newsletter {
    padding: 24px;
    background: var(--surface-container);
    border-top: 2px solid var(--on-surface);
}
.newsletter .material-symbols-outlined { font-size: 32px; color: var(--on-surface); margin-bottom: 8px; }
.newsletter h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    font-weight: 600;
    color: var(--on-surface);
    margin: 0 0 8px;
}
.newsletter p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    color: var(--on-surface-variant);
    margin: 0 0 12px;
}
.newsletter form { display: flex; flex-direction: column; gap: 8px; }
.newsletter input[type="email"] {
    min-height: 44px;
    padding: 10px 12px;
    border: 2px solid var(--on-surface);
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    outline: none;
}
.newsletter button {
    min-height: 44px;
    padding: 12px;
    border: 2px solid var(--on-surface);
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.newsletter button:hover { background: var(--paper); color: var(--on-surface); }

/* Ad slot */
.ad-slot {
    padding: 32px 16px;
    text-align: center;
    background: var(--surface-container);
    border: 1px dashed var(--outline);
    color: var(--outline);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Breadcrumbs */
.breadcrumbs {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: uppercase;
}
.breadcrumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--outline);
}
.breadcrumbs a { color: var(--on-surface); }

/* --------------------------------------------------------------------------
   13. Search
   -------------------------------------------------------------------------- */
.radar-head {
    padding: 28px 20px;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--surface-container-lowest);
}
@media (min-width: 640px)  { .radar-head { padding: 48px 24px; } }
@media (min-width: 768px)  { .radar-head { padding: 64px 48px; } }
.radar-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--on-surface);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.radar-head__eyebrow .material-symbols-outlined { color: var(--secondary); font-size: 18px; }
.search-form {
    position: relative;
    display: block;
    max-width: 900px;
}
.search-form input {
    width: 100%;
    padding: 12px 48px 12px 0;
    border: 0;
    border-bottom: 4px solid var(--on-surface);
    background: transparent;
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, var(--fs-headline-xl));
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--on-surface);
    outline: none;
}
.search-form input::placeholder {
    color: var(--outline);
}
.search-form input:focus { border-bottom-color: var(--secondary); }
.search-form button {
    position: absolute;
    right: 0;
    bottom: 12px;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--on-surface);
}
.search-form button .material-symbols-outlined { font-size: 32px; }
.search-form button:hover { color: var(--secondary); }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--paper);
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--on-surface);
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    font-weight: 600;
    text-transform: uppercase;
    touch-action: manipulation;
}
.chip:hover, .chip.is-active { background: var(--on-surface); color: var(--surface-bright); text-decoration: none; }
@media (max-width: 767px) {
    .chip { min-height: 36px; padding: 8px 14px; }
}

.radar-vectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--topbar-border);
    border-top: var(--border-base) solid var(--topbar-border);
    border-bottom: var(--border-base) solid var(--topbar-border);
}
@media (min-width: 768px) { .radar-vectors { grid-template-columns: repeat(3, 1fr); } }
.radar-vectors > * { background: var(--paper); }
.vector-box {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 128px;
    text-decoration: none;
    color: var(--on-surface);
}
.vector-box:hover { background: var(--surface-container-low); text-decoration: none; }
.vector-box__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.vector-box__row .material-symbols-outlined { color: var(--secondary); font-size: 18px; }
.vector-box__row .vol {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: uppercase;
}
.vector-box__title {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    font-weight: 600;
    line-height: 1.1;
    color: var(--on-surface);
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-meta {
    padding: 16px 24px;
    border-bottom: 1px solid var(--outline-variant);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--outline);
}
.search-meta strong { color: var(--on-surface); font-weight: 700; }

/* Ranked search list */
.ranked-list {
    display: flex;
    flex-direction: column;
    border-top: var(--border-base) solid var(--topbar-border);
}
.ranked-list__item {
    display: flex;
    align-items: stretch;
    border-bottom: var(--border-base) solid var(--topbar-border);
    background: var(--paper);
    text-decoration: none;
    color: var(--on-surface);
}
.ranked-list__item:hover { background: var(--surface-container-low); text-decoration: none; }
.ranked-list__rank {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-container);
    color: var(--on-surface);
    font-family: var(--font-serif);
    font-size: clamp(28px, 5vw, var(--fs-headline-xl));
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    border-right: 2px solid var(--topbar-border);
}
@media (min-width: 640px) {
    .ranked-list__rank { width: 72px; }
}
.ranked-list__item:first-child .ranked-list__rank,
.ranked-list__item:hover .ranked-list__rank {
    background: var(--on-surface);
    color: var(--surface-bright);
}
.ranked-list__body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.ranked-list__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ranked-list__title {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-md);
    line-height: 1.25;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}
.ranked-list__excerpt {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    color: var(--on-surface-variant);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-top: var(--border-base) solid var(--topbar-border);
}
.pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 2px solid var(--on-surface);
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.pagination a:hover { background: var(--on-surface); color: var(--surface-bright); }
.pagination__icon { margin-left: 8px; }

/* --------------------------------------------------------------------------
   15. Error shell & empty states
   -------------------------------------------------------------------------- */
.error-shell {
    text-align: center;
    padding: 80px 24px;
    max-width: 640px;
    margin: 0 auto;
    border: 2px solid var(--on-surface);
}
.error-code {
    font-family: var(--font-serif);
    font-size: clamp(72px, 10vw, 144px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--on-surface);
    margin: 0 0 16px;
}
.error-shell h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-headline-lg);
    font-weight: 600;
    margin: 0 0 12px;
}
.error-shell p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    color: var(--on-surface-variant);
    margin: 0 0 24px;
}

.btn-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    border-bottom: 1px solid var(--outline-variant);
}

.utility-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.utility-shell__card {
    max-width: 780px;
    padding: 24px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}
.utility-shell__card p:last-child {
    margin-bottom: 0;
}
.utility-shell__success {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--surface-container);
    border-left: 4px solid var(--secondary);
    color: var(--on-surface);
}
.utility-shell__actions {
    margin-top: 24px;
    justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid color-mix(in srgb, var(--topbar-border) 14%, transparent);
    background: color-mix(in srgb, var(--topbar-surface) 94%, var(--paper));
    color: var(--on-surface);
    margin-top: 0;
}
.site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 36px 24px 40px;
    display: grid;
    gap: 24px 32px;
    align-items: start;
}
@media (min-width: 960px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
        padding: 40px 32px;
    }
}
.site-footer__brand-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
}
.site-footer__lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.site-footer__lockup:hover { text-decoration: none; }
.site-footer__brand-mark {
    width: 12px;
    height: 36px;
    background: linear-gradient(180deg, var(--secondary) 0%, color-mix(in srgb, var(--secondary) 20%, transparent) 100%);
    flex-shrink: 0;
}
.site-footer__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.site-footer__brand {
    font-family: var(--font-serif);
    font-weight: 900;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--on-surface);
    line-height: 0.94;
}
.site-footer__tagline {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--outline);
}
.site-footer__summary {
    max-width: 34ch;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--on-surface-variant);
}
.site-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
}
.site-footer__copy {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline);
}
.site-footer__status {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--on-surface-variant);
}
.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 10px 24px;
    align-content: start;
}
.site-footer__nav a {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--outline);
    text-decoration: none;
}
.site-footer__nav a:hover { color: var(--on-surface); }
@media (max-width: 959px) {
    .site-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
}
@media (min-width: 960px) {
    .site-footer__meta {
        align-items: flex-end;
        text-align: right;
        justify-self: end;
    }
}

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden { /* alias for sr-only */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.stack    { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row      { display: flex; align-items: center; gap: 12px; }
.muted    { color: var(--outline); }
.eyebrow  {
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
}
.meta-sm {
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    letter-spacing: 0.02em;
    color: var(--outline);
    text-transform: uppercase;
}
.meta-sm--spaced { margin-top: 16px; }
.crest-meta--spaced { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   18. Material Symbols settings
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
.material-symbols-outlined.is-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   19. Mobile bottom nav (4 items, black bar, hidden on desktop)
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--on-surface) 92%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--surface-bright) 10%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -12px 32px rgba(24, 24, 27, 0.16);
    z-index: 50;
}
.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    color: color-mix(in srgb, var(--surface-bright) 74%, transparent);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
}
.bottom-nav__item .material-symbols-outlined {
    font-size: 21px;
    transition: transform 120ms ease;
}
.bottom-nav__item.is-active,
.bottom-nav__item[aria-current="page"] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--surface-bright);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 0 var(--secondary);
}
.bottom-nav__item.is-active .material-symbols-outlined,
.bottom-nav__item[aria-current="page"] .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.bottom-nav__item:hover {
    color: var(--surface-bright);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
}
.bottom-nav__item.is-active:hover {
    color: var(--surface-bright);
    background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 960px) {
    .bottom-nav { display: none; }
}
/* Add bottom padding to main on mobile so content isn't hidden under the nav.
   The nav is: 52px items + 8px top + 8px bottom + safe area = ~68px baseline. */
@media (max-width: 959px) {
    body.has-shell {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    /* The site footer sits above the bottom nav on mobile — give it extra margin */
    .site-footer {
        margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   20. Social card (From Social Media — X/TikTok source pills)
   -------------------------------------------------------------------------- */
.social-card {
    display: flex;
    flex-direction: column;
    border: var(--border-base) solid var(--topbar-border);
    background: var(--paper);
    margin-bottom: 12px;
}
.social-card__time {
    margin-left: auto;
    color: var(--outline-variant);
}

.lead-story__media.is-broken,
.module__media.is-broken,
.story-row__media.is-broken,
.story-card__media.is-broken,
.article-figure__media.is-broken,
.section-feature__media.is-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02)),
        var(--surface-container);
    color: var(--outline);
}

.lead-story__media.is-broken::after,
.module__media.is-broken::after,
.story-row__media.is-broken::after,
.story-card__media.is-broken::after,
.article-figure__media.is-broken::after,
.section-feature__media.is-broken::after {
    content: "Media updating";
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.breadcrumb-strip {
    padding: 16px 24px;
    border-bottom: 1px solid var(--outline-variant);
}
.breadcrumb-strip .breadcrumbs { margin: 0; }

.story-feed {
    padding: 24px 32px;
}
@media (max-width: 639px) {
    .story-feed { padding: 20px; }
}

.article__main--full { grid-column: 1 / -1; }

.world-watch__item {
    padding: 12px 0;
    border-bottom: 1px solid var(--outline-variant);
}
.world-watch__title { margin: 6px 0 8px; }
.social-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.social-card__head .material-symbols-outlined { font-size: 14px; }
.social-card__head .social-card__handle {
    margin-left: auto;
    color: var(--outline-variant);
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
}
.social-card__body {
    padding: 12px;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--on-surface);
}
.social-card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px dashed var(--outline-variant);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--outline);
}

/* --------------------------------------------------------------------------
   21. World Desk — Kenya Impact callout
   -------------------------------------------------------------------------- */
.world-impact {
    padding: 10px 12px;
    border-left: 3px solid var(--secondary);
    background: var(--surface-container);
    margin-top: 8px;
}
.world-impact__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 4px;
}
.world-impact__body {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--on-surface);
}

/* --------------------------------------------------------------------------
   22. Timeline (Earlier on this Story)
   -------------------------------------------------------------------------- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.timeline__item {
    position: relative;
    padding: 10px 12px 10px 28px;
    border-bottom: 1px solid var(--outline-variant);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 16px;
    width: 8px; height: 8px;
    background: var(--on-surface);
    border-radius: 0;
}
.timeline__item::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 24px;
    bottom: -1px;
    width: 2px;
    background: var(--outline-variant);
}
.timeline__item:last-child::after { display: none; }
.timeline__time {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline);
    margin-bottom: 2px;
}
.timeline__title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--on-surface);
    margin: 0;
}
.timeline__title a { color: inherit; text-decoration: none; }
.timeline__title a:hover { color: var(--secondary); text-decoration: none; }
.timeline__item--current::before {
    background: var(--secondary);
    outline: 3px solid var(--surface-bright);
    outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   23. Executive Summary (two-column: label left, bullets right)
   -------------------------------------------------------------------------- */
.executive-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 24px 0;
    padding: 20px 20px 24px;
    background: var(--surface-container);
    border: 2px solid var(--on-surface);
}
@media (min-width: 720px) {
    .executive-summary { grid-template-columns: 200px 1fr; gap: 24px; padding: 24px; }
}
.executive-summary__label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-surface);
    padding-right: 16px;
    border-right: 0;
}
@media (min-width: 720px) {
    .executive-summary__label { border-right: 2px solid var(--on-surface); }
}
.executive-summary__label strong {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--on-surface);
    margin-top: 6px;
    line-height: 1.1;
}
.executive-summary__bullets {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.executive-summary__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.45;
    color: var(--on-surface);
}
.executive-summary__bullets li .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--secondary);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   24. Live updates (rolling coverage)
   -------------------------------------------------------------------------- */

/* Shell: mobile = single column; desktop ≥1024px = feed + side rail */
.live-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}
@media (min-width: 1024px) {
    .live-shell {
        grid-template-columns: minmax(0, 1fr) 23rem;
        background: var(--on-surface);  /* reveals 1px divider */
        gap: var(--border-base);
    }
    .live-shell.live-shell--solo {
        grid-template-columns: minmax(0, 1fr);
        background: transparent;
        gap: 0;
    }
    .live-shell > * { background: var(--paper); }
}

/* ── Feed column ──────────────────────────────────────────────────────── */
.live-feed {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.live-feed__header {
    padding: 28px 20px 24px;
    border-bottom: var(--border-base) solid var(--on-surface);
    background: var(--surface-bright);
}
@media (min-width: 720px) {
    .live-feed__header {
        padding: 32px 24px 28px;
    }
}
.live-feed__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--secondary);
    color: var(--on-secondary);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.live-pill .live-dot {
    width: 7px; height: 7px;
    background: var(--on-secondary);
    border-radius: 999px;
}
.live-feed__updated {
    color: var(--on-surface-variant);
    font-size: var(--fs-data-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.live-feed__title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 8px 0 12px;
    color: var(--on-surface);
    max-width: 17ch;
    text-wrap: balance;
}
.live-feed__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 58rem);
}
.live-feed__edit-btn {
    flex-shrink: 0;
    margin-top: 12px;
}
.live-feed__lede {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--on-surface-variant);
    max-width: 64ch;
    margin: 0;
}
.live-feed__meta,
.live-feed__lede,
.admin-inline-edit--event {
    width: min(100%, 58rem);
}
.admin-inline-edit--event {
    margin-top: 16px;
    max-width: 760px;
}

.live-package {
    display: block;
    margin: 0 0 18px;
    padding: 16px 18px 18px;
    border: 1px solid var(--outline-variant);
    border-left: 4px solid var(--secondary);
    background: color-mix(in srgb, var(--surface-container-low) 55%, var(--paper));
}

.live-package__lead {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.live-package__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--outline);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.live-pill--soft {
    background: color-mix(in srgb, var(--secondary) 12%, var(--paper));
    color: var(--secondary);
    border: 1px solid color-mix(in srgb, var(--secondary) 25%, var(--outline-variant));
}

.live-package__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.15vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 24ch;
    text-wrap: balance;
}
.live-package__title a {
    color: inherit;
    text-decoration: none;
}
.live-package__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.08em;
}

.live-package__summary {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.58;
    color: var(--on-surface-variant);
    max-width: 62ch;
}

.live-package__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.live-package__cta,
.live-package__pin {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--on-surface);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.live-package__cta {
    background: var(--on-surface);
    color: var(--paper);
}

.live-package__pin {
    background: var(--paper);
    color: var(--secondary);
    border-color: color-mix(in srgb, var(--secondary) 30%, var(--outline-variant));
}

@media (max-width: 959px) {
    .live-package {
        padding: 14px;
    }
}

.live-feed-marker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--outline-variant);
    border-bottom: 1px solid var(--outline-variant);
    background: var(--paper);
    font-family: var(--font-sans);
}

.live-feed-marker__label,
.live-feed-marker__note {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-feed-marker__label {
    color: var(--secondary);
}

.live-feed-marker__note {
    color: var(--outline);
}

.live-feed-marker__rule {
    height: 1px;
    flex: 1 1 auto;
    background: var(--outline-variant);
}

/* ── Key Developments ─────────────────────────────────────────────────── */
/* .key-developments--inline shows on mobile inside the feed; hidden on desktop.
   .key-developments--side shows on desktop in the side rail; hidden on mobile. */
.key-developments {
    padding: 20px 24px 24px;
    background: var(--surface-container-low, var(--surface-container));
    border-bottom: 1px solid var(--outline-variant);
}
.key-developments--side {
    border-bottom: var(--border-base) solid var(--on-surface);
    background: var(--surface-bright);
}
.key-developments--inline { display: block; }
.key-developments--side   { display: none; }
@media (min-width: 1024px) {
    .key-developments--inline { display: none; }
    .key-developments--side   { display: block; }
}

.key-developments__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface);
    padding-bottom: 10px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--outline);
}
.key-developments__title .material-symbols-outlined { font-size: 18px; }

.key-developments__title--side {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}
.key-developments__marker {
    width: 4px;
    align-self: stretch;
    background: var(--secondary);
    display: inline-block;
}

.key-developments__list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.key-developments__list li {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.5;
    color: var(--on-surface);
}
.key-developments__list--arrows {
    list-style: none;
    padding: 0;
    gap: 14px;
}
.key-developments__list--arrows li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}
.key-developments__list--arrows li .material-symbols-outlined {
    color: var(--secondary);
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ── Update cards ─────────────────────────────────────────────────────── */
.live-updates {
    display: flex;
    flex-direction: column;
    background: var(--on-surface);  /* shows through as 2px separators */
    gap: 2px;
}
.live-updates > * { background: var(--surface-bright); }

.live-update {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 20px;
    position: relative;
    align-items: start;
}
@media (min-width: 720px) {
    .live-update {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 18px;
        padding: 28px 24px;
    }
}
.live-update:hover { background: var(--surface-container-low, var(--surface-container)); }

/* Left time column (desktop only) */
.live-update__time {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
    position: relative;
    z-index: 1;
}
@media (min-width: 720px) {
    .live-update__time { display: flex; }
}
.live-update__time-hm {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--on-surface);
}
.live-update__time-zone {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--outline);
}
.live-update__content {
    min-width: 0;
    width: min(100%, 52rem);
    position: relative;
}
@media (min-width: 720px) {
    .live-update__content::before {
        content: "";
        position: absolute;
        left: -22px;
        top: 0;
        bottom: -30px;
        width: 1px;
        background: var(--outline-variant);
        pointer-events: none;
    }
    .live-update__content::after {
        content: "";
        position: absolute;
        left: -28px;
        top: 1px;
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: var(--paper);
        border: 2px solid var(--secondary);
        box-shadow: 0 0 0 4px var(--surface-bright);
        pointer-events: none;
    }
    .live-update:last-child .live-update__content::before {
        bottom: 2.5rem;
    }
}

/* Header: title + mobile stamp on same row */
.live-update__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.live-update__title {
    font-family: var(--font-serif);
    font-size: clamp(21px, 1.9vw, 26px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--on-surface);
    margin: 0;
    flex: 1 1 auto;
    max-width: 30ch;
    text-wrap: balance;
}
.live-update__title a {
    color: inherit;
    text-decoration: none;
}
.live-update__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.08em;
}
.live-update__stamp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--outline);
    font-family: var(--font-sans);
    font-size: var(--fs-data-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.live-update__stamp .material-symbols-outlined { font-size: 15px; }
@media (min-width: 720px) {
    .live-update__stamp { display: none; }   /* replaced by left time column */
}

.live-update__absolute-time,
.live-feed__absolute-time {
    margin: 0 0 12px;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

/* Optional image / map */
.live-update__media {
    margin: 2px 0 14px;
    border: 1px solid var(--outline);
    position: relative;
    background: #111;
    overflow: clip;
}
.live-update__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(78vh, 760px);
    object-fit: contain;
    object-position: center;
    background: var(--surface-container);
    margin: 0 auto;
}
.live-update__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(72vh, 520px);
    background: #000;
    object-fit: contain;
}
.live-update__media figcaption,
.live-update__caption {
    padding: 9px 11px 10px;
    background: var(--paper);
    border-top: 1px solid var(--outline);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-surface-variant);
}
@media (min-width: 720px) {
    .live-update__media { border-color: var(--on-surface); }
}

.live-update__media--map .live-update__image {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.live-update__map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--surface-bright);
    border: 1px solid var(--on-surface);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface);
}
.live-update__map-dot {
    width: 10px; height: 10px;
    background: var(--error, #ba1a1a);
}

/* Body */
.live-update__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: 1.65;
    color: var(--on-surface);
    margin: 0 0 12px;
    max-width: 68ch;
    overflow-wrap: anywhere;
}
.live-update__body > p { margin: 0 0 0.9em; }
.live-update__body > p:last-child { margin-bottom: 0; }
.live-update__body img,
.live-update__body iframe,
.live-update__body video,
.live-update__body table {
    max-width: 100%;
}
.live-update__body img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: var(--surface-container);
}
.live-update__body video {
    width: 100%;
    height: auto;
    max-height: min(72vh, 520px);
    background: #000;
}
.live-update__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -2px 0 12px;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.live-update__sep {
    color: var(--outline);
}

/* Actions (share) */
.live-update__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--on-surface-variant);
}
.live-update__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.live-update__action:hover { color: var(--on-surface); }
.live-update__action .material-symbols-outlined { font-size: 16px; }
.live-update__action--link {
    text-decoration: none;
}

/* ── Update kind badge ────────────────────────────────────────────────── */
.live-update__kind-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.live-update__kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}
.live-update__kind-badge .material-symbols-outlined {
    font-size: 13px;
}
.live-update__kind-badge--breaking {
    background: #CC0000;
    color: #fff;
}
.live-update__kind-badge--analysis {
    background: transparent;
    color: #c77b00;
    border: 1.5px solid #c77b00;
}
.live-update__kind-badge--markets {
    background: transparent;
    color: var(--primary, #1a73e8);
    border: 1.5px solid var(--primary, #1a73e8);
}
.live-update__kind-badge--photo {
    background: transparent;
    color: var(--on-surface-variant);
    border: 1.5px solid var(--outline-variant);
}
.live-update__kind-badge--map {
    background: transparent;
    color: #277c48;
    border: 1.5px solid #277c48;
}
.live-update__kind-badge--international {
    background: transparent;
    color: #1a6bbd;
    border: 1.5px solid #1a6bbd;
}
.live-update__kind-badge--politics {
    background: transparent;
    color: #7a3fa0;
    border: 1.5px solid #7a3fa0;
}
.live-update__kind-badge--transport {
    background: transparent;
    color: #5a6a00;
    border: 1.5px solid #5a6a00;
}
.live-update__kind-badge--verification {
    background: transparent;
    color: #1a8a5e;
    border: 1.5px solid #1a8a5e;
}
.live-update__kind-badge--default {
    background: var(--surface-container);
    color: var(--on-surface-variant);
}

/* ── Author avatar ────────────────────────────────────────────────────── */
.live-update__author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #CC0000;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.live-update__location-inline {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.live-update__location-inline .material-symbols-outlined {
    font-size: 13px;
    color: #CC0000;
}

/* ── Latest-post pulsing dot ──────────────────────────────────────────── */
.live-update--latest > .live-update__time {
    color: #CC0000;
    font-weight: 800;
}
.live-update--latest .live-update__content::after {
    background: #CC0000;
    border-color: #CC0000;
    box-shadow: 0 0 0 0 rgba(204,0,0,0.5);
    animation: live-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes live-dot-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(204,0,0,0.50); }
    70%  { box-shadow: 0 0 0 8px rgba(204,0,0,0);    }
    100% { box-shadow: 0 0 0 0   rgba(204,0,0,0);    }
}

/* ── Story sub-nav (topic tabs) ───────────────────────────────────────── */
.live-subnav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
.live-subnav::-webkit-scrollbar { display: none; }
.live-subnav__item {
    flex-shrink: 0;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.live-subnav__item:hover,
.live-subnav__item--active {
    color: #CC0000;
    border-bottom-color: #CC0000;
}

/* ── Auto-updates toggle ──────────────────────────────────────────────── */
.live-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1.5px solid var(--outline-variant);
    border-radius: 20px;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.live-auto-toggle:hover {
    border-color: #CC0000;
    color: #CC0000;
}
.live-auto-toggle[data-auto="on"] {
    background: #CC0000;
    border-color: #CC0000;
    color: #fff;
}
.live-auto-toggle__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    transition: background 0.15s;
}
.live-auto-toggle[data-auto="on"] .live-auto-toggle__dot {
    animation: live-dot-pulse 1.4s ease-in-out infinite;
    background: #fff;
}

/* ── Load more CTA ────────────────────────────────────────────────────── */
.load-more {
    display: flex;
    justify-content: center;
    padding: 24px;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low, var(--surface-container));
}
.load-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 24px;
    background: var(--on-surface);
    color: var(--surface-bright);
    font-family: var(--font-sans);
    font-size: var(--fs-label-caps);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--on-surface);
    cursor: pointer;
}
.load-more__btn:hover {
    background: var(--surface-bright);
    color: var(--on-surface);
}
.load-more__btn .material-symbols-outlined { font-size: 18px; }

/* ── Right side rail (desktop only) ───────────────────────────────────── */
.live-side {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
}
@media (min-width: 1024px) {
    .live-side { display: flex; }
}

.live-wire {
    padding: 20px 24px 24px;
    background: var(--surface-bright);
    flex: 1 1 auto;
}
.live-wire__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--on-surface);
}
.live-wire__marker {
    width: 4px;
    align-self: stretch;
    background: var(--on-surface);
    display: inline-block;
}
.live-wire__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.live-wire__list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--outline-variant);
}
.live-wire__list li:first-child { padding-top: 0; }
.live-wire__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.live-wire__time {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary);
}
.live-wire__headline {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--on-surface);
    margin: 0;
}
.live-wire__headline a { color: inherit; text-decoration: none; }
.live-wire__headline a:hover { color: var(--secondary); }

/* --------------------------------------------------------------------------
   25. Wolfbrief borrows — reading progress, hot-rail, crests, countdown,
       ingest chip, section label, bottom-nav polish, curator-note,
       "you're caught up" completion state.
   -------------------------------------------------------------------------- */

/* Global reading-progress bar (2px, top of viewport, JS-driven) */
:root { --reading-progress: 0%; }
.reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: var(--reading-progress);
    background: var(--secondary);
    z-index: 100;
    transition: width 80ms linear;
    pointer-events: none;
}

/* Hot-rail — AP/Wolfbrief-style pinned topic strip under the topbar.
   Always visible, horizontally scrollable on narrow screens. Scoped variants:
     .rail--global  → light surface
     .rail--thread  → inverted dark (used on live story pages)                */
.rail {
    min-height: 46px;
    line-height: 1.2;
    background: var(--paper);
    color: var(--on-surface);
    border-bottom: 1px solid var(--outline-variant);
    font-family: var(--font-sans);
    font-size: 12px;
    overflow: hidden;
    position: sticky;
    top: var(--topbar-h);
    z-index: 45;
    box-shadow: 0 1px 0 rgba(9, 9, 11, 0.06);
}
@media (min-width: 960px) {
    .rail { min-height: 48px; }
}
.rail__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 16px;
    /* Allow horizontal scroll on mobile when many section tabs exist */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.rail__inner::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
    .rail__inner { padding: 0 28px; }
}
.rail--thread {
    background: #09090b;
    color: #f8f8f8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.rail__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 0;
    background: var(--secondary);
    color: var(--on-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
    text-decoration: none;
}
.rail__live .live-dot {
    width: 6px; height: 6px;
    background: var(--on-secondary);
    border-radius: 999px;
}
.rail__lead {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: min(32vw, 30rem);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
.rail__lead:hover {
    color: var(--on-surface);
    text-decoration: none;
}
.rail__lead-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rail--live .rail__inner {
    gap: 12px;
}
.rail__track {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    white-space: nowrap;
}
.rail__track--live {
    gap: 10px;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__item {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0;
    color: color-mix(in srgb, var(--on-surface) 74%, white);
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-bottom: 2px solid transparent;
}
.rail__item--live-label {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    border-bottom-width: 1px;
}
.rail__item-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.rail__item:hover {
    color: var(--on-surface);
    text-decoration: none;
    border-color: color-mix(in srgb, var(--on-surface) 22%, transparent);
}
.rail__item--active {
    color: var(--on-surface);
    border-bottom-color: var(--secondary);
}
.rail__item--live-label.rail__item--active {
    border-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 7%, var(--paper));
}
.rail__item--live-headline {
    color: var(--on-surface);
    font-weight: 800;
}
.rail__all {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: color-mix(in srgb, var(--on-surface) 82%, white);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    flex-shrink: 0;
}
.rail__all:hover {
    color: var(--on-surface);
    text-decoration: none;
}
.rail--thread .rail__item {
    color: rgba(255, 255, 255, 0.74);
}
.rail--thread .rail__item:hover,
.rail--thread .rail__item--active,
.rail--thread .rail__item--live-headline {
    color: #ffffff;
}
.rail--thread .rail__item--active {
    border-bottom-color: var(--secondary);
}
@media (max-width: 959px) {
    .rail {
        min-height: 44px;
    }
    .rail__inner {
        gap: 10px;
        padding: 0 16px;
    }
    .rail--sections .rail__lead,
    .rail--sections .rail__all {
        display: none;
    }
    .rail--live .rail__all {
        display: inline-flex;
        min-height: 30px;
        font-size: 9px;
        letter-spacing: 0.12em;
    }
    .rail__track { gap: 14px; }
    .rail__track--live { gap: 8px; }
    .rail__item { min-height: 30px; }
    .rail__item--live-label { padding: 0 10px; }
}

/* Source crests — stacked circular badges keyed by source slug.
   Use classes .crest.crest--c0 through .crest--c11 for deterministic colouring. */
.crest-stack { display: inline-flex; align-items: center; }
.crest {
    width: 26px; height: 26px;
    border-radius: 999px;
    border: 2px solid var(--surface-bright);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    margin-left: -8px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 0.5px var(--outline-variant);
}
.crest:first-child { margin-left: 0; }
.crest--small { width: 20px; height: 20px; font-size: 8px; border-width: 1.5px; }
.crest--more {
    background: var(--surface-container);
    color: var(--on-surface-variant);
    box-shadow: 0 0 0 0.5px var(--outline);
}
.crest--c0  { background: #1c1b1b; }
.crest--c1  { background: #0a0a0a; }
.crest--c2  { background: #25282c; }
.crest--c3  { background: #fa6400; color: #1b1b1b; }
.crest--c4  { background: #e2231a; }
.crest--c5  { background: #d71920; }
.crest--c6  { background: #004c54; }
.crest--c7  { background: #ed1c24; }
.crest--c8  { background: #f15822; }
.crest--c9  { background: #9a1b2f; }
.crest--c10 { background: #fff1e5; color: #990f3d; box-shadow: 0 0 0 0.5px #990f3d; }
.crest--c11 { background: #50625b; }

/* Crest-meta — "synthesized from N sources · updated 12m ago" */
.crest-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.crest-meta__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}

/* Masthead middle section label — removed. The hot-rail below the top bar
   now carries the per-page scope label (hot_rail.scope_label), which avoids
   the absolute-centre collision that was truncating the primary nav. */

/* Theme toggle button (top bar) */
.topbar__theme {
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
}

/* Ingest health chip at bottom of drawer */
.drawer__ingest {
    margin-top: auto;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--outline);
}
.drawer__ingest-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-surface);
    margin-bottom: 6px;
}
.drawer__ingest-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--secondary);
    animation: wb-pulse 1.6s infinite;
}
.drawer__ingest-copy {
    font-size: 11px;
    line-height: 1.5;
    color: var(--outline);
    margin: 0;
}
@keyframes wb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Coming-up countdown block (live-page sidebar) */
.coming-up {
    padding: 16px;
    background: var(--on-surface);
    color: var(--surface-bright);
    border: var(--border-base) solid var(--on-surface);
    margin-bottom: 16px;
}
.coming-up__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline-variant);
    opacity: 0.9;
    margin-bottom: 6px;
}
.coming-up__when {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.coming-up__detail {
    font-size: 11px;
    color: var(--outline-variant);
    opacity: 0.85;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}
.coming-up__countdown {
    display: flex;
    gap: 6px;
}
.coming-up__countdown div {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    background: rgba(255,255,255,0.1);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.coming-up__countdown div strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

/* "You're caught up" completion state */
.caught-up {
    margin: 48px auto 24px;
    padding: 40px 24px;
    max-width: 480px;
    text-align: center;
    border-top: 1px solid var(--outline-variant);
}
.caught-up__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 999px;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    margin: 0 auto 16px;
}
.caught-up__icon .material-symbols-outlined {
    font-size: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.caught-up h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--on-surface);
    margin: 0 0 6px;
}
.caught-up p {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 0;
}

/* Curator-note (slim variant of editor's-note) */
.curator-note {
    margin: 16px 0;
    padding: 12px 14px 12px 16px;
    border-left: 3px solid var(--secondary);
    background: var(--surface-container-low, var(--surface-container));
}
.curator-note p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface-variant);
    margin: 0;
}

/* --------------------------------------------------------------------------
   26. Live-event list (index of rolling coverage)
   -------------------------------------------------------------------------- */
.live-list { padding: 24px; }
.live-list .section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--on-surface);
}
.live-list .section-head h2 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--on-surface);
}
.live-list .section-head .data-mono {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--outline);
}

.live-list__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .live-list__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .live-list__grid { grid-template-columns: 1fr 1fr 1fr; }
}

.live-list__card {
    padding: 20px;
    border: 2px solid var(--on-surface);
    background: var(--surface-bright);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.live-list__pill {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--secondary);
    color: var(--on-secondary);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}
.live-list__pill .live-dot {
    width: 6px; height: 6px;
    background: var(--on-secondary);
    border-radius: 999px;
}
.live-list__title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}
.live-list__title a { color: var(--on-surface); text-decoration: none; }
.live-list__title a:hover { color: var(--secondary); }
.live-list__lede {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--on-surface-variant);
    margin: 0;
}
.live-list__meta {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--outline-variant);
}
.live-list__meta .sep { color: var(--outline-variant); }

.live-list--closed { padding-top: 0; }
.live-list__archive { list-style: none; margin: 0; padding: 0; }
.live-list__archive li {
    border-bottom: 1px solid var(--outline-variant);
}
.live-list__archive li:last-child { border-bottom: 0; }
.live-list__archive a {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    text-decoration: none;
}
.live-list__archive-date {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline);
}
.live-list__archive-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--on-surface);
}
.live-list__archive a:hover .live-list__archive-title { color: var(--secondary); }
.live-list__archive-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}

/* -------------------------------------------------------------------------
   Extended platform surfaces: threads, entity trackers, video hub, archive
   ------------------------------------------------------------------------- */
.intel-surface {
    padding: 24px 0 0;
    display: grid;
    gap: 18px;
}
.intel-surface--split,
.intel-surface--three {
    display: grid;
    gap: 18px;
}
@media (min-width: 900px) {
    .intel-surface--split { grid-template-columns: 1fr 1fr; }
    .intel-surface--three { grid-template-columns: repeat(3, 1fr); }
}
.intel-grid {
    display: grid;
    gap: 18px;
}
@media (min-width: 900px) {
    .intel-grid--threads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intel-grid--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.intel-card {
    display: grid;
    gap: 0;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}
.intel-card--thread {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
    .intel-card--thread { grid-template-columns: minmax(0, 1fr) 220px; }
}
.intel-card__body {
    padding: 16px;
    display: grid;
    gap: 10px;
}
.intel-card__body h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 1.15;
}
.intel-card__body h3 a { color: var(--on-surface); text-decoration: none; }
.intel-card__body h3 a:hover { color: var(--secondary); }
.intel-card__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--on-surface-variant);
}
.intel-card__media {
    min-height: 180px;
    display: block;
    border-top: 1px solid var(--outline-variant);
}
@media (min-width: 900px) {
    .intel-card__media { border-top: 0; border-left: 1px solid var(--outline-variant); }
}
.intel-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-card { display: grid; gap: 12px; }
.entity-watch,
.archive-mini,
.thread-chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.entity-watch li,
.archive-mini li {
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: 10px;
}
.entity-watch li:last-child,
.archive-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.entity-watch a,
.archive-mini a {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: var(--on-surface);
}
.entity-watch a span,
.archive-mini span {
    font-size: 12px;
    color: var(--outline);
}
.beat-pulse {
    display: grid;
    gap: 12px;
}
.beat-pulse__row {
    display: grid;
    grid-template-columns: 90px 1fr 36px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.beat-pulse__bar {
    height: 8px;
    background: var(--outline-variant);
    display: block;
}
.beat-pulse__bar span {
    display: block;
    height: 100%;
    background: var(--on-surface);
}
.coming-up--home {
    border: 1px solid var(--outline-variant);
    padding: 16px;
}
.thread-layout {
    display: grid;
    gap: 24px;
}
.thread-hero {
    display: grid;
    gap: 16px;
}
.thread-hero__meta,
.thread-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    font-size: 12px;
    color: var(--outline);
}
.thread-hero h1,
.entity-hero h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(34px, 5vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.03em;
}
.thread-grid {
    display: grid;
    gap: 24px;
}
@media (min-width: 1100px) {
    .thread-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
.thread-main,
.thread-side {
    display: grid;
    gap: 18px;
}
.thread-block {
    padding: 18px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}
.thread-block h2 {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-size: 24px;
}
.thread-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}
.thread-chapters li {
    padding: 14px 0;
    border-bottom: 1px solid var(--outline-variant);
}
.thread-chapters li:last-child { border-bottom: 0; padding-bottom: 0; }
.thread-chapters__meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 8px;
}
.thread-chapters__meta span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}
.entity-hero {
    display: grid;
    gap: 24px;
    align-items: start;
}
@media (min-width: 1100px) {
    .entity-hero { grid-template-columns: minmax(0, 1fr) 340px; }
}
.entity-hero__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--outline-variant);
}
.archive-filter {
    padding: 18px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    margin-bottom: 24px;
}
.archive-filter__row {
    display: grid;
    gap: 12px;
}
@media (min-width: 900px) {
    .archive-filter__row { grid-template-columns: 2fr 1fr 1fr auto; }
}
.archive-filter__row input,
.archive-filter__row select,
.archive-filter__row button {
    min-height: 44px;
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    padding: 0 14px;
    font: inherit;
}
.archive-filter__row button {
    background: var(--on-surface);
    color: var(--surface);
    font-weight: 700;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Home-page polish: long-tail list, pulse-rail blocks, reader's note,
   coming-up home variant. Mirrors the approved platform mock.
   ------------------------------------------------------------------------- */
.long-tail-panel {
    display: flex;
    flex-direction: column;
}
.long-tail {
    list-style: none;
    margin: 0;
    padding: 0;
}
.long-tail__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--outline-variant);
    align-items: center;
}
.long-tail__row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
    .long-tail__row {
        grid-template-columns: 72px minmax(0, 1fr) 140px 110px;
        gap: 16px;
    }
}
.long-tail__time {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--outline);
}
.long-tail__title {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.35;
}
.long-tail__title a {
    color: var(--on-surface);
    text-decoration: none;
}
.long-tail__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.long-tail__theme {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--outline);
}
.long-tail__sources { justify-self: start; }
@media (min-width: 720px) {
    .long-tail__sources { justify-self: end; }
}

/* Pulse rail blocks — lighter treatment, hairline underline on section title */
.pulse-rail {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.pulse-rail__block { display: block; }
.pulse-rail__title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--outline);
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--outline-variant);
}

/* Coming-up link tail under the countdown */
.coming-up__link {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
}
.coming-up__link a {
    color: var(--outline-variant);
    text-decoration: none;
}
.coming-up__link a:hover { color: var(--surface-bright); }

/* Reader's note — left-border trust block */
.readers-note {
    padding: 14px 16px;
    border-left: 2px solid var(--on-surface);
    background: transparent;
}
.readers-note__title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--outline);
    margin: 0 0 8px;
}
.readers-note p {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.55;
    color: var(--on-surface-variant);
    margin: 0;
}

@media print {
    .topbar, .drawer, .drawer-backdrop, .site-footer, .ticker, .ad-slot,
    .aside-module, .article__aside, .icon-btn, .speedread, .bottom-nav,
    .live-header__bar, .live-header__tools, .live-jump { display: none !important; }
    body, body.has-shell { padding: 0; background: #fff; color: #000; }
    .article { grid-template-columns: 1fr !important; border: 0 !important; }
    .article__main { padding: 0 !important; }
    .prose { max-width: none; }
}

/* Mobile chrome polish: keep the public header to one clean row. */
@media (max-width: 767px) {
    .topbar__inner {
        gap: 8px;
        padding-inline: 12px;
    }

    .topbar__inner,
    .topbar__left,
    .topbar__brand-lockup {
        min-width: 0;
    }

    .topbar__left {
        flex: 1 1 auto;
        gap: 8px;
    }

    .topbar__brand {
        min-width: 0;
        max-width: calc(100vw - 136px);
    }

    .topbar__menu,
    .topbar__theme {
        width: 48px;
        height: 48px;
    }

    .topbar__brand-name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.98rem;
        letter-spacing: 0;
    }

    .topbar__staff {
        display: none !important;
    }
}

/* ==========================================================================
   Public-page Admin Overlay  (staff only — rendered inside live_detail.html)
   ========================================================================== */

/* ── Admin top bar ──────────────────────────────────────────────────────── */
.admin-overlay-bar {
    position: sticky;
    top: 52px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #0d0d0d;
    color: #ffffff;
    border-bottom: 3px solid var(--secondary, #b7221e);
    font-family: var(--font-ui, "Inter", sans-serif);
    font-size: 0.82rem;
}

.admin-overlay-bar__left,
.admin-overlay-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-overlay-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--secondary, #b7221e);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-overlay-bar__label {
    font-weight: 600;
    color: #e0e0e0;
}

.admin-overlay-bar__status {
    color: #999;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.admin-overlay-bar__status--open   { color: #22c55e; }
.admin-overlay-bar__status--paused { color: #f59e0b; }
.admin-overlay-bar__status--closed { color: #6b7280; }

/* Pulsing live dot */
.admin-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: admin-pulse 1.4s ease-in-out infinite;
}

@keyframes admin-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Buttons in the top bar */
.admin-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    border: 1.5px solid #444;
    background: transparent;
    color: #e0e0e0;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.admin-bar-btn:hover { background: #1e1e1e; border-color: #888; }

.admin-bar-btn--ghost { border-color: transparent; color: #aaa; }
.admin-bar-btn--ghost:hover { background: #1e1e1e; border-color: #555; color: #fff; }

.admin-bar-btn--warn { border-color: #b45309; color: #fbbf24; }
.admin-bar-btn--warn:hover { background: #78350f; border-color: #fbbf24; }

.admin-bar-btn--go { border-color: #166534; background: #166534; color: #fff; }
.admin-bar-btn--go:hover { background: #14532d; border-color: #22c55e; }

.admin-bar-btn .material-symbols-outlined { font-size: 16px; }

/* ── Admin compose dock ─────────────────────────────────────────────────── */
.admin-compose-dock {
    background: #fafafa;
    border: 2px solid #111;
    border-top: none;
    margin-bottom: 32px;
    font-family: var(--font-ui, "Inter", sans-serif);
}

.admin-compose-dock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #111;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.admin-compose-dock__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-compose-dock__label .material-symbols-outlined { font-size: 18px; color: var(--secondary, #b7221e); }

.admin-compose-dock__toggle {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.admin-compose-dock__body {
    padding: 16px;
    /* visibility controlled by the HTML [hidden] attribute via JS toggle */
}

/* Kind pills */
.admin-kind-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.admin-kind-pill {
    padding: 4px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 2px solid #ccc;
    background: #fff;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s, background .12s, color .12s;
}
.admin-kind-pill:hover { border-color: #555; color: #111; }
.admin-kind-pill.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}
.admin-kind-pill[data-kind="breaking"].is-active { background: var(--secondary, #b7221e); border-color: var(--secondary, #b7221e); }
.admin-kind-pill[data-kind="analysis"].is-active { background: #0369a1; border-color: #0369a1; }
.admin-kind-pill[data-kind="section"].is-active  { background: #374151; border-color: #374151; }

/* Compose inputs */
.admin-compose-hl {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-headline, "Newsreader", serif);
    border: 2px solid #ccc;
    background: #fff;
    color: #111;
    margin-bottom: 8px;
    outline: none;
    transition: border-color .15s;
}
.admin-compose-hl:focus { border-color: #111; }
.admin-compose-hl::placeholder { font-weight: 400; color: #aaa; }

.admin-compose-editing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}
.admin-compose-editing__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-compose-editing__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary, #b7221e);
}
.admin-compose-editing__clear {
    border: 0;
    background: transparent;
    color: var(--on-surface);
    font-weight: 700;
    cursor: pointer;
}

.admin-compose-body {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    font-size: 0.9rem;
    line-height: 1.55;
    font-family: inherit;
    border: 2px solid #ccc;
    background: #fff;
    color: #111;
    resize: vertical;
    margin-bottom: 8px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.admin-compose-body:focus { border-color: #111; }
.admin-compose-body.is-dragover {
    border-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 6%, #fff);
}

/* Media preview */
.admin-compose-media-preview,
.admin-compose-image-preview {
    display: none;
    position: relative;
    margin-bottom: 8px;
}
.admin-compose-media-preview:not([hidden]),
.admin-compose-image-preview:not([hidden]) {
    display: block;
}
.admin-compose-media-preview img,
.admin-compose-media-preview video,
.admin-compose-image-preview img {
    max-height: 160px;
    max-width: 100%;
    display: block;
    border: 2px solid #ccc;
}
.admin-compose-media-preview video {
    width: min(100%, 420px);
    background: #111;
}
.admin-compose-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    max-width: min(100%, 420px);
}
.admin-compose-media-grid[hidden] {
    display: none;
}
.admin-compose-media-grid__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid #ccc;
    background: #f6f6f6;
}
.admin-compose-media-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-compose-file-label {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--on-surface-variant);
}
.admin-compose-remove-img {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Footer / toolbar */
.admin-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.admin-link-insert {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    display: grid;
    gap: 10px;
}

.admin-link-insert__row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.admin-link-insert__input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    color: var(--on-surface);
    padding: 10px 12px;
    font: inherit;
}

.admin-link-insert__input--textarea {
    min-height: 76px;
    resize: vertical;
}

.admin-link-insert__detect,
.admin-link-insert__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--on-surface);
    background: var(--paper);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-link-insert__action {
    background: var(--on-surface);
    color: var(--paper);
}

.admin-link-insert__action--ghost,
.admin-link-insert__detect {
    background: var(--paper);
    color: var(--on-surface);
}

.admin-link-insert__meta {
    font-size: 12px;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.admin-link-insert__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.admin-link-search {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    display: grid;
    gap: 10px;
}

.admin-link-search__row {
    display: flex;
    gap: 8px;
}

.admin-link-search__input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    color: var(--on-surface);
    padding: 10px 12px;
    font: inherit;
}

.admin-link-search__results {
    display: grid;
    gap: 8px;
}

.admin-link-search__result,
.admin-link-search__empty {
    display: grid;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}

.admin-link-search__type {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-link-search__result strong {
    font-size: 0.98rem;
    line-height: 1.35;
}

.admin-link-search__result span:last-child,
.admin-link-search__empty {
    color: var(--on-surface-variant);
    font-size: 0.9rem;
    line-height: 1.45;
}

.admin-related-article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

.admin-related-article__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-related-article__eyebrow {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-related-article__copy strong {
    font-size: 0.96rem;
    line-height: 1.35;
}

.admin-related-article__copy span:last-child {
    color: var(--on-surface-variant);
    font-size: 0.82rem;
    line-height: 1.45;
}

.admin-related-article__clear {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-media-bank {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    display: grid;
    gap: 12px;
}

.admin-media-bank__head,
.admin-media-bank__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-media-bank__head strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-gallery-builder {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}

.admin-gallery-builder__fields {
    display: grid;
    gap: 10px;
}

.admin-gallery-selection {
    display: grid;
    gap: 8px;
}

.admin-gallery-selection__item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--outline-variant);
    background: color-mix(in srgb, var(--surface-container-low) 40%, var(--paper));
}

.admin-gallery-selection__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-container);
}

.admin-gallery-selection__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-gallery-selection__meta {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-gallery-selection__meta strong {
    font-size: 13px;
    line-height: 1.3;
}

.admin-gallery-selection__meta span {
    font-size: 12px;
    line-height: 1.4;
    color: var(--on-surface-variant);
}

.admin-gallery-selection__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-gallery-selection__move,
.admin-gallery-selection__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 700;
}

.admin-gallery-selection__move[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-media-bank__library-link,
.admin-media-bank__hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.admin-media-bank__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.admin-media-bank__item {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    text-align: left;
    color: var(--on-surface);
}

.admin-media-bank__item:hover {
    border-color: var(--secondary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary) 25%, transparent);
}

.admin-media-bank__item.is-gallery-mode::after {
    content: "Select";
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    background: rgba(17, 17, 17, 0.82);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-media-bank__item.is-selected {
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary) 40%, transparent);
}

.admin-media-bank__item.is-selected::after {
    content: "Selected";
    background: var(--secondary);
}

.admin-media-bank__preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-container) 70%, var(--paper));
}

.admin-media-bank__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-media-bank__preview .material-symbols-outlined {
    font-size: 36px;
    color: var(--on-surface-variant);
}

.admin-media-bank__meta {
    display: grid;
    gap: 4px;
}

.admin-media-bank__meta strong {
    font-size: 13px;
    line-height: 1.35;
}

.admin-media-bank__meta span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--on-surface-variant);
}

.admin-link-insert__action.is-active {
    background: var(--secondary);
    color: var(--paper);
    border-color: var(--secondary);
}

.admin-compose-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-tool-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: background .12s, color .12s;
}
.admin-tool-btn:hover { background: #e5e5e5; color: #111; }
.admin-tool-btn .material-symbols-outlined { font-size: 20px; }

.admin-compose-hint {
    font-size: 0.74rem;
    color: #888;
    margin: 0;
    flex: 1 1 auto;
}

.admin-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: #111;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 2px solid #111;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.admin-compose-submit {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-compose-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--on-surface-variant);
}
.admin-compose-time input {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--outline);
    background: var(--surface-bright);
    color: var(--on-surface);
}
.admin-post-btn:hover { background: #333; border-color: #333; }
.admin-post-btn .material-symbols-outlined { font-size: 16px; }

/* ── Per-post admin tools ───────────────────────────────────────────────── */
.admin-post-tools {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
    background: transparent;
    z-index: 2;
}

/* Show tools when hovering the card or section header */
.live-update:hover .admin-post-tools,
.live-section-divider:hover .admin-post-tools {
    opacity: 1;
}

.live-update__head {
    padding-right: 120px;
}

/* Section header tools — shown inline next to the label */
.admin-post-tools--section {
    display: inline-flex;
    opacity: 0;
    margin-left: 8px;
    vertical-align: middle;
    transition: opacity .15s;
}
.live-section-divider:hover .admin-post-tools--section { opacity: 1; }

.template-live-node .admin-post-tools {
    opacity: 1;
    position: static;
    margin: 0 0 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.template-live-node .js-admin-edit,
.template-live-node .admin-post-tools--section {
    display: none;
}

.template-live-node .live-update__head {
    padding-right: 0;
}

/* Drag handle */
.admin-drag-handle {
    cursor: grab;
    color: #444;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 5px 10px;
    border-color: #bdbdbd;
    background: #fff;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-size: 0.68rem;
    letter-spacing: .06em;
}
.admin-drag-handle:hover {
    border-color: var(--secondary, #b7221e);
    color: var(--secondary, #b7221e);
    background: #fff7f6;
}
.admin-drag-handle:active { cursor: grabbing; }
.admin-drag-handle.is-pressing {
    color: var(--secondary, #b7221e);
    border-color: var(--secondary, #b7221e);
    background: #fff1ef;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary, #b7221e) 16%, #fff);
}
.admin-drag-handle .material-symbols-outlined { font-size: 18px; }

/* Individual action buttons */
.apt-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-ui, "Inter", sans-serif);
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1.5px solid #ccc;
    background: #fff;
    color: #444;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
    text-decoration: none;
}
.apt-btn:hover { border-color: #666; color: #111; background: #f0f0f0; }
.apt-btn .material-symbols-outlined { font-size: 14px; }

.apt-btn--danger { border-color: #fca5a5; color: #dc2626; }
.apt-btn--danger:hover { background: #fee2e2; border-color: #dc2626; }

.admin-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-ui, "Inter", sans-serif);
    letter-spacing: .04em;
    border: 1.5px solid #d4d4d4;
    background: #fff;
    color: #444;
    white-space: nowrap;
}

.admin-order-chip label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.admin-order-input {
    width: 50px;
    min-height: 24px;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 700;
    text-align: center;
    padding: 1px 4px;
}

.admin-order-input:focus {
    outline: none;
    border-color: var(--secondary, #b7221e);
}

.admin-order-save {
    display: inline-grid;
    place-items: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    border: 1px solid #d4d4d4;
    background: #f8f8f8;
    color: #333;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .12s;
}

.admin-order-save:hover,
.admin-order-save:focus-visible {
    border-color: var(--secondary, #b7221e);
    background: #fff5f4;
    color: var(--secondary, #b7221e);
    outline: none;
}

.admin-order-save:active {
    transform: translateY(1px);
}

.admin-order-save .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

/* ── Inline edit area ───────────────────────────────────────────────────── */
.admin-inline-edit {
    /* visibility controlled by [hidden] attribute — no display:none override needed */
    padding: 12px;
    background: #fffbeb;
    border: 2px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    margin-top: 8px;
}

.admin-inline-edit__hl {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--font-headline, "Newsreader", serif);
    border: 1.5px solid #d1d5db;
    background: #fff;
    margin-bottom: 6px;
    outline: none;
    box-sizing: border-box;
}
.admin-inline-edit__hl:focus { border-color: #111; }

.admin-inline-edit__body {
    width: 100%;
    min-height: 70px;
    padding: 6px 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    font-family: inherit;
    border: 1.5px solid #d1d5db;
    background: #fff;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.admin-inline-edit__body:focus { border-color: #111; }

.admin-inline-edit__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.admin-inline-save {
    padding: 5px 14px;
    background: #111;
    color: #fff;
    border: 2px solid #111;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.admin-inline-save:hover { background: #333; }

.admin-inline-cancel {
    padding: 5px 14px;
    background: transparent;
    color: #555;
    border: 2px solid #ccc;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.admin-inline-cancel:hover { border-color: #888; color: #111; }

/* ── Section divider in the public stream ───────────────────────────────── */
.live-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
    position: relative;
    background: var(--surface-bright);
    padding: 0 20px;
}
@media (min-width: 720px) {
    .live-section-divider {
        margin: 0;
        padding: 22px 24px 14px calc(88px + 24px + 18px);
    }
}

.live-section-divider__rule {
    flex: 1;
    height: 2px;
    background: #111;
}

.live-section-divider__label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #111;
    white-space: nowrap;
    padding: 0 4px;
}

.caught-up,
.load-more {
    padding-left: 20px;
    padding-right: 20px;
}
@media (min-width: 720px) {
    .caught-up,
    .load-more {
        padding-left: calc(88px + 24px + 18px);
        padding-right: 24px;
    }
}

/* ── Pinned post indicator on public page ───────────────────────────────── */
.live-update--pinned {
    border-left: 4px solid var(--secondary, #b7221e) !important;
    background: #fff8f8;
}

/* ── Drag-and-drop states ───────────────────────────────────────────────── */
.is-dragging {
    opacity: 0.4;
    outline: 2px dashed #999;
}

.is-drag-sorting,
.is-drag-sorting * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.live-update--dragging {
    position: fixed !important;
    z-index: 9999;
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    pointer-events: none;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    transform: rotate(-1deg);
    opacity: .96;
}

.live-update--placeholder {
    min-height: 140px;
    border: 2px dashed var(--secondary, #b7221e);
    background: color-mix(in srgb, var(--secondary, #b7221e) 5%, #fff);
}

@media (max-width: 720px) {
    .admin-drag-handle {
        min-height: 34px;
        padding: 6px 12px;
    }
}

.drag-over {
    outline: 2px solid var(--secondary, #b7221e);
    outline-offset: 2px;
    background: #fff0f0;
}

/* ── Mobile: tighter admin overlay on small screens ────────────────────── */
@media (max-width: 640px) {
    .live-feed__header {
        padding: 24px 16px 20px;
    }

    .live-feed__title {
        font-size: clamp(1.55rem, 6.8vw, 2.1rem);
        line-height: 1.08;
        max-width: 100%;
    }

    .live-feed__meta,
    .live-feed__title-row,
    .live-feed__lede,
    .admin-inline-edit--event {
        width: 100%;
    }

    .key-developments {
        padding: 18px 16px 20px;
    }

    .live-update {
        padding: 20px 16px;
    }

    .live-update__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-update__title {
        width: 100%;
    }

    .live-update__stamp {
        margin-top: 0;
    }

    .live-update__media {
        margin-left: -1px;
        margin-right: -1px;
    }

    .live-update__image {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 62vh;
    }

    .live-update__video {
        max-height: 46vh;
    }

    .live-section-divider {
        padding: 20px 16px 12px;
    }

    .live-feed__title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .live-feed__edit-btn {
        margin-top: 0;
        align-self: flex-start;
    }

    .admin-overlay-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .admin-overlay-bar__left,
    .admin-overlay-bar__right {
        flex-wrap: wrap;
        gap: 6px;
    }

    .admin-bar-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
        min-height: 30px;
    }

    .admin-bar-btn .material-symbols-outlined { font-size: 14px; }

    .admin-compose-dock__body {
        padding: 12px;
    }

    .admin-kind-pills {
        gap: 4px;
    }

    .admin-kind-pill {
        padding: 3px 8px;
        font-size: 0.68rem;
    }

    /* Always show post tools on touch — no hover state */
    .admin-post-tools {
        opacity: 1;
    }

    .admin-compose-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .live-package {
        margin-bottom: 14px;
        padding: 13px 14px 14px;
    }

    .live-package__title {
        font-size: clamp(1.18rem, 5.2vw, 1.55rem);
        line-height: 1.12;
        max-width: 100%;
    }

    .live-package__summary {
        font-size: 0.94rem;
        line-height: 1.5;
    }

    .live-feed-marker {
        padding: 10px 16px;
        gap: 8px;
    }

    .live-feed-marker__label,
    .live-feed-marker__note {
        font-size: 10px;
    }

    .admin-compose-submit {
        width: 100%;
        justify-content: space-between;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-compose-time {
        justify-content: space-between;
    }

    .admin-post-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-link-insert__row,
    .admin-link-search__row,
    .admin-link-insert__actions,
    .admin-media-bank__head,
    .admin-media-bank__actions {
        flex-direction: column;
    }

    .admin-media-bank__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-gallery-selection__item {
        grid-template-columns: 1fr;
    }

    .admin-gallery-selection__actions {
        justify-content: flex-start;
    }

    .live-feed__header {
        padding: 20px 16px 18px;
    }

    .live-feed__meta,
    .live-feed__lede,
    .admin-inline-edit--event,
    .live-feed__title-row {
        width: 100%;
    }

    .live-feed__title {
        font-size: clamp(1.55rem, 6.8vw, 2.1rem);
        line-height: 1.08;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .live-update {
        padding: 18px 16px;
    }

    .live-update__head {
        gap: 8px;
        margin-bottom: 10px;
        padding-right: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .live-update__stamp {
        display: flex;
    }

    .live-update__absolute-time {
        display: none;
    }

    .live-update__title {
        font-size: clamp(1.12rem, 4.9vw, 1.38rem);
        line-height: 1.15;
        max-width: 100%;
    }

    .live-update__content {
        width: 100%;
    }

    .live-update__body {
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .live-update__actions {
        margin-top: 12px;
    }

    .live-update__body .story-card {
        margin: 1rem 0;
    }

    .live-update__body .story-card__head,
    .live-update__body .story-card__provider,
    .live-update__body .story-card__body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .live-update__body .story-card__body h3 {
        font-size: clamp(1.2rem, 5.5vw, 1.55rem);
    }
}

.template-live-node .live-feed__header--node {
    margin-bottom: 0;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--paper);
}
.live-node-return {
    display: inline-flex;
    margin-bottom: 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary);
    text-decoration: none;
}
.live-feed__title--node {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 7vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    max-width: 16ch;
    margin: 12px 0 0;
    color: var(--on-surface);
    font-weight: 900;
}
.live-node-parent {
    margin: 12px 0 0;
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 2.6vw, 1.05rem);
    line-height: 1.45;
    color: var(--on-surface-variant);
}
.live-node-parent a {
    color: var(--secondary);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.live-feed__node-byline {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.live-node-context {
    margin: 0 0 28px;
}

.live-node-context__label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    margin: 18px 0 10px;
    border: 1px solid var(--outline);
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-node-context--current {
    padding: 0;
    border: 0;
    background: var(--surface-bright);
}

.live-node-context--current .live-update {
    margin-bottom: 0;
    border-top: 3px solid var(--on-surface);
    padding-top: 24px;
}

.live-node-context__stack {
    display: grid;
    gap: 18px;
}

.live-update__title a,
.live-package__title a,
.live-package__stack-item {
    transition: color .18s ease, text-decoration-color .18s ease;
}

.live-update__title a:hover,
.live-package__title a:hover,
.live-package__stack-item:hover strong {
    color: var(--secondary);
}

.apt-btn .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 719px) {
    .live-node-context--current {
        padding: 0;
    }

    .live-node-context__stack {
        gap: 14px;
    }

    .live-feed__absolute-time,
    .live-update__absolute-time {
        font-size: 11px;
    }
}

/* Live update rich cards */
.live-update__body .video-embed,
.live-update__body iframe {
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
    border: 0;
}

.live-update__body .video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.live-update__body .video-embed iframe,
.live-update__body .video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

.live-update__body .story-card {
    margin: 1.25rem 0;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    overflow: hidden;
}

.live-update__body .story-card__head,
.live-update__body .story-card__provider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 0;
    margin-bottom: 0;
}

.live-update__body .story-card__provider {
    justify-content: flex-start;
}

.live-update__body .story-card__badge,
.live-update__body .story-card__meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-update__body .story-card__badge {
    background: var(--on-surface);
    color: var(--paper);
}

.live-update__body .story-card__meta {
    border: 1px solid var(--outline-variant);
    color: var(--outline);
}

.live-update__body .story-card__provider-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.live-update__body .story-card__provider-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.live-update__body .story-card__provider-copy strong,
.live-update__body .story-card__provider-copy span {
    display: block;
    overflow-wrap: anywhere;
}

.live-update__body .story-card__provider-copy strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-update__body .story-card__provider-copy span {
    color: var(--on-surface-variant);
    font-size: 12px;
    line-height: 1.35;
}

.live-update__body .story-card__body {
    padding: 16px;
}

.live-update__body .story-card__body h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
}

.live-update__body .story-card__body p {
    margin: 0 0 1rem;
    color: var(--on-surface-variant);
}

.live-update__body .story-card__quote {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--secondary);
    background: var(--surface-container-low);
}

.live-update__body .story-card__quote p:last-child {
    margin-bottom: 0;
}

.live-update__body .story-card__cta,
.live-update__body .story-card__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--on-surface);
    color: var(--on-surface);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.live-update__body .story-card__cta:hover,
.live-update__body .story-card__fallback:hover {
    background: var(--on-surface);
    color: var(--paper);
    text-decoration: none;
}

.live-update__body .story-card__embed {
    margin: 0;
}

.live-update__body .story-card__fallback {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
}

.live-update__body .story-gallery {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
}

.live-update__body .story-gallery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.live-update__body .story-gallery__head h3 {
    margin: 4px 0 0;
    font-size: 1.1rem;
    line-height: 1.15;
}

.live-update__body .story-gallery__deck {
    margin: 8px 0 0;
    color: var(--on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.55;
}

.live-update__body .story-gallery__eyebrow {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.live-update__body .story-gallery__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.live-update__body .story-gallery__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--outline-variant);
    background: var(--paper);
    color: var(--on-surface);
    font-size: 20px;
    line-height: 1;
}

.live-update__body .story-gallery__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 1fr);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.live-update__body .story-gallery__item {
    margin: 0;
    scroll-snap-align: start;
}

.live-update__body .story-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.live-update__body .story-gallery__item figcaption {
    padding-top: 8px;
    color: var(--on-surface-variant);
    font-size: 13px;
    line-height: 1.45;
}

.live-update__body .story-card--social .story-card__badge {
    background: var(--secondary);
}

.live-update__body .story-card--provider-youtube .story-card__badge,
.live-update__body .story-card--provider-youtube .story-card__provider-mark {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.live-update__body .story-card--provider-x .story-card__badge,
.live-update__body .story-card--provider-x .story-card__provider-mark {
    background: #111111;
    color: #fff;
    border-color: #111111;
}

.live-update__body .story-card--provider-instagram .story-card__badge,
.live-update__body .story-card--provider-instagram .story-card__provider-mark {
    background: linear-gradient(135deg, #fd5949 0%, #d6249f 55%, #285aeb 100%);
    color: #fff;
    border-color: transparent;
}

.live-update__body .story-card--provider-facebook .story-card__badge,
.live-update__body .story-card--provider-facebook .story-card__provider-mark {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.live-update__body .story-card--provider-tiktok .story-card__badge,
.live-update__body .story-card--provider-tiktok .story-card__provider-mark {
    background: #111111;
    color: #fff;
    border-color: #25f4ee;
    box-shadow: inset -2px 0 0 #fe2c55;
}

.live-update__body .story-card--provider-vimeo .story-card__badge,
.live-update__body .story-card--provider-vimeo .story-card__provider-mark {
    background: #1ab7ea;
    color: #fff;
    border-color: #1ab7ea;
}

.live-update__body .story-card--document .story-card__badge {
    background: color-mix(in srgb, var(--secondary) 82%, var(--on-surface));
}

.live-update__body .story-card--internal .story-card__badge,
.live-update__body .story-card--internal .story-card__provider-mark {
    background: var(--on-surface);
    color: var(--paper);
    border-color: var(--on-surface);
}

.live-update__read-more {
    margin: 1rem 0 0;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
}

.live-update__read-more-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 0;
}

.live-update__read-more-badge,
.live-update__read-more-meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-update__read-more-badge {
    background: var(--on-surface);
    color: var(--paper);
}

.live-update__read-more-meta {
    border: 1px solid var(--outline-variant);
    color: var(--outline);
}

.live-update__read-more-body {
    padding: 14px 16px 16px;
}

.live-update__read-more-body h4 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    line-height: 1.15;
}

.live-update__read-more-body p {
    margin: 10px 0 0;
    color: var(--on-surface-variant);
    font-size: 0.96rem;
    line-height: 1.6;
}

.live-update__read-more-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--on-surface);
    background: var(--on-surface);
    color: var(--paper);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-update__read-more-cta:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    text-decoration: none;
}

.live-update__body .story-card--live-note .story-card__badge {
    background: color-mix(in srgb, var(--secondary) 88%, var(--paper));
}

.live-update__body .story-card--live-note ul {
    margin: 0;
    padding-left: 18px;
}

.live-update__body .story-card--live-note li {
    margin: 0 0 8px;
    line-height: 1.55;
}

/* ==========================================================================
   STABILIZATION PATCH — 2026-04-26
   Defines tokens that were referenced but undefined, fixes the live-event
   "black wall" sidebar bug, tightens mobile breakpoints, and reduces visual
   regressions across pages.

   This patch is intentionally placed at the bottom so it wins specificity
   ties without rewriting the rest of the stylesheet. As the file is
   refactored, individual rules can migrate into their proper sections.
   ========================================================================== */

/* --- Missing design tokens ------------------------------------------------ */
:root {
    /* Aliases used by templates and inline styles that previously fell back
       to inherit/initial and produced empty backgrounds and invisible text. */
    --ink:                 var(--on-surface);
    --ink-muted:           var(--on-surface-variant);
    --paper-alt:           var(--surface-container-low);
    --term-red:            var(--secondary);
    --shadow-sm:           0 6px 14px rgba(21, 25, 30, 0.06);
    --shadow-md:           0 14px 32px rgba(21, 25, 30, 0.08);
    --radius-sm:           4px;
    --radius-md:           10px;
    --radius-lg:           16px;
}

html[data-theme="dark"] {
    --ink:        var(--on-surface);
    --ink-muted:  var(--on-surface-variant);
    --paper-alt:  var(--surface-container);
    --term-red:   var(--secondary);
    --shadow-sm:  0 6px 14px rgba(0, 0, 0, 0.45);
    --shadow-md:  0 14px 32px rgba(0, 0, 0, 0.55);
}

/* --- Page-wide guardrails ------------------------------------------------- */
html, body {
    overflow-x: hidden;       /* belt-and-suspenders against horizontal scroll */
}

body.has-shell {
    /* Account for the bottom-nav on mobile so content isn't trapped under it */
    padding-bottom: 0;
}
@media (max-width: 959px) {
    body.has-shell {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}

/* Prevent images and embeds from busting tight grids */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

/* Respect tap-target minimums on mobile */
@media (max-width: 767px) {
    a, button, [role="button"] { min-height: 36px; }
    .topbar__menu, .topbar__mobile-search, .drawer__close,
    .bottom-nav__item { min-height: 44px; min-width: 44px; }
}

/* --- Live event shell — fix the "black wall" --------------------------------
   The previous design used a parent dark background plus a 2px gap to fake a
   hairline divider between feed and side rail. When the side rail was shorter
   than the feed (almost always), the dark background leaked through the rest
   of the column, creating a tall black panel. Replace with a clean border. */
.live-shell {
    align-items: stretch;
}
@media (min-width: 1024px) {
    .live-shell {
        background: transparent;
        gap: 0;
    }
    .live-shell.live-shell--solo {
        background: transparent;
        gap: 0;
    }
    .live-shell > .key-developments--side,
    .live-shell > aside.key-developments {
        border-left: 1px solid var(--outline-variant);
        background: var(--surface-bright);
    }
}

/* Make the side rail a usable, comfortable column on desktop */
.key-developments--side {
    padding: 24px 22px 28px;
}
.key-developments--side .key-developments__title--side {
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    font-family: var(--font-sans);
    font-weight: 800;
}

/* --- Topbar polish on mobile --------------------------------------------- */
@media (max-width: 959px) {
    .topbar__inner { padding: 0 12px; gap: 8px; }
    .topbar__brand-name { font-size: 16px; }
    .topbar__staff-copy { display: none; }
}

/* Hide the inline desktop search field when there's not enough room — the
   mobile search icon takes over. Avoids the cramped input squeeze at 768px. */
@media (max-width: 1039px) {
    .topbar__search { display: none; }
    .topbar__mobile-search { display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 1040px) {
    .topbar__mobile-search { display: none; }
}

/* --- Drawer (mobile menu) cleanup ---------------------------------------- */
.drawer {
    width: min(86vw, 340px);
}
.drawer__nav a, .drawer__cta a, .drawer__footer a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Drawer backdrop should not capture clicks when closed */
.drawer-backdrop[aria-hidden="true"] { pointer-events: none; opacity: 0; }
.drawer[aria-hidden="true"]          { pointer-events: none; }

/* --- Home page stabilization --------------------------------------------- */
/* Hide the lead-media frame entirely if there's no image inside, so we don't
   render a tall empty box when featured_asset is absent at runtime. */
.t-lead-media:not(:has(img)) { display: none; }
.t-lead-media__frame:empty   { display: none; }

/* Ensure the featured image actually fills its frame even when intrinsic
   dimensions are wider than the column */
.t-lead-media__frame img {
    object-position: center;
    background: var(--surface-container-low);
}

/* Tighten the home grid below 960px so it doesn't sit awkwardly */
@media (max-width: 959px) {
    .t-front-grid,
    .t-front-grid--no-live,
    .t-front-grid--no-image {
        grid-template-columns: 1fr !important;
    }
    .t-home { padding: 12px 14px 56px; gap: 18px; }
    .t-home-live { position: static !important; }
}

/* --- Article page stabilization ------------------------------------------ */
.article-body img,
.article-figure img,
.article__main img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .article__main { padding-left: 16px; padding-right: 16px; }
    .article-body { font-size: 17px; line-height: 1.65; }
}

/* Comfortable measure for body copy on very wide screens */
@media (min-width: 1280px) {
    .article-body p,
    .article-body ul,
    .article-body ol,
    .article-body blockquote { max-width: 68ch; }
}

/* --- Section/archive pages ------------------------------------------------ */
@media (max-width: 767px) {
    .section-hero { padding: 28px 16px; }
    .section-feature {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* --- Footer responsive ---------------------------------------------------- */
.site-footer__inner {
    display: grid;
    gap: 24px;
    padding: 32px 24px;
}
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
}
@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
    .site-footer__meta {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 16px;
        border-top: 1px solid var(--outline-variant);
        font-size: 12px;
        color: var(--on-surface-variant);
    }
}

/* --- Bottom nav contrast & safe-area ------------------------------------- */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav__item {
    color: rgba(255, 255, 255, 0.78);
}
.bottom-nav__item.is-active {
    color: var(--on-secondary, #fff);
}
.bottom-nav__item .material-symbols-outlined { font-size: 22px; }

/* --- Ticker / breaking strip --------------------------------------------- */
.ticker { overflow: hidden; }
.ticker__track { overflow: hidden; }
.ticker__marquee { white-space: nowrap; }

/* --- Reading progress should never be a tall element --------------------- */
.reading-progress {
    position: fixed;
    inset: var(--topbar-h, 68px) 0 auto 0;
    height: 2px !important;
    width: 100%;
    z-index: 49;
    pointer-events: none;
    background: transparent;
}

/* --- Print sanity --------------------------------------------------------- */
@media print {
    .topbar, .bottom-nav, .drawer, .drawer-backdrop, .ticker,
    .reading-progress, .site-footer__nav { display: none !important; }
    body.has-shell { padding-top: 0; }
    .article-body { font-size: 12pt; line-height: 1.5; }
}
/* === end stabilization patch === */


/* ============================================================================
   AL JAZEERA-STYLE TIMELINE — 2026-04-26
   Reskins the existing .live-feed / .live-update markup so the live event
   timeline mirrors aljazeera.com/news/liveblog/...:
     - vertical rail on the left with orange dots
     - timestamp lifted above each card (bold relative + grey absolute time)
     - clean white cards with a 1px grey border, generous padding
     - single-column reading width (~720px on desktop)
     - serif headlines and body, comfortable line-height
     - subtle share button bottom-right of each card

   No template changes required — this is purely a CSS reskin so existing
   admin tools, related-article cards, document/internal cards keep working.
   ============================================================================ */

:root {
    --aj-rail-color:    #e7e7e7;
    --aj-dot-color:     #f59e0b;     /* AJ amber */
    --aj-dot-ring:      #fff;
    --aj-card-border:   #e7e3dc;
    --aj-card-bg:       #ffffff;
    --aj-text:          #1a1c1c;
    --aj-text-muted:    #6b6b6b;
    --aj-link:          #2a4d8a;
    --aj-rail-x:        14px;        /* x-position of the dot center on phone */
    --aj-rail-x-md:     22px;        /* x-position on tablet+ */
    --aj-card-radius:   4px;
    --aj-stack-gap:     34px;        /* gap between updates */
    --aj-reading-max:   720px;
}
html[data-theme="dark"] {
    --aj-rail-color:   rgba(255,255,255,0.10);
    --aj-card-border:  rgba(255,255,255,0.10);
    --aj-card-bg:      var(--surface-container);
    --aj-text:         var(--on-surface);
    --aj-text-muted:   var(--on-surface-variant);
}

/* --- Feed column: single, centered, with timeline rail painted on it ----- */
.live-feed {
    --aj-pad-l: calc(var(--aj-rail-x) + 24px);
    background: transparent;
    padding-left: var(--aj-pad-l);
    padding-right: 14px;
    max-width: calc(var(--aj-reading-max) + var(--aj-pad-l) + 40px);
    margin-inline: auto;
    /* Rail line */
    background-image: linear-gradient(to bottom,
        var(--aj-rail-color), var(--aj-rail-color));
    background-repeat: no-repeat;
    background-size: 1px calc(100% - 240px);
    background-position: var(--aj-rail-x) 240px;
}
@media (min-width: 720px) {
    .live-feed {
        --aj-pad-l: calc(var(--aj-rail-x-md) + 30px);
        padding-right: 24px;
        background-position: var(--aj-rail-x-md) 240px;
    }
}

/* The header (event title, lede, "Updating" pill) sits BEFORE the rail
   visually — the rail starts after the lede. The 240px offset above is a
   reasonable approximation; we also paint a stop on the lede so it's clean.*/
.live-feed__header {
    background: transparent;
    border-bottom: 1px solid var(--aj-rail-color);
    padding: 24px 0 22px;
    margin-bottom: 22px;
}
.live-feed__title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.012em;
    font-weight: 800;
    color: var(--aj-text);
    margin: 6px 0 14px;
    max-width: 22ch;
}
.live-feed__lede {
    font-family: var(--font-serif);
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--aj-text-muted);
    max-width: 60ch;
}

/* The "Live Updates" + count + auto-toggle row, inspired by AJ's
   "27 Updates  ·  Auto-updates [toggle]" strip. Reuses .t-kicker which the
   template already renders. */
.live-feed > .t-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 18px 0 6px;
    padding: 10px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--aj-text-muted);
    border-top: 1px solid var(--aj-rail-color);
    border-bottom: 1px solid var(--aj-rail-color);
}
.live-feed > .t-kicker .live-auto-toggle {
    margin-left: auto;
}

/* --- Lead "package" card lifts above the rail, full-width, no chrome ---- */
.live-package {
    background: transparent;
    border: 0;
    border-left: 0;
    padding: 0;
    margin: 0 0 24px;
    max-width: var(--aj-reading-max);
}
.live-package__title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.18;
    margin-bottom: 12px;
}

/* --- Each timeline node ------------------------------------------------- */
.live-update {
    display: block;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 var(--aj-stack-gap);
    max-width: var(--aj-reading-max);
}

/* Timeline dot — sits on the rail, vertically aligned with the timestamp */
.live-update::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(-1 * (var(--aj-pad-l, 38px) - var(--aj-rail-x) + 5px));
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--aj-card-bg);
    border: 2px solid var(--aj-dot-color);
    box-shadow: 0 0 0 3px var(--aj-dot-ring);
    z-index: 2;
}
@media (min-width: 720px) {
    .live-update::before {
        left: calc(-1 * (var(--aj-pad-l, 52px) - var(--aj-rail-x-md) + 5px));
    }
}

/* Hide the legacy "06:30 EAT" left badge; we render the time above the card */
.live-update__time { display: none; }

/* Promote the relative-time stamp to the line above the card, beside the dot.
   The template renders it inside .live-update__head as .live-update__stamp. */
.live-update__head {
    display: block;
    padding: 0;
    margin: 0 0 8px;
    background: transparent;
    border: 0;
}
.live-update__stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 800;
    color: var(--aj-text);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}
.live-update__stamp .material-symbols-outlined { display: none; }
.live-update__absolute-time {
    display: inline;
    margin: 0 0 0 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--aj-text-muted);
    line-height: 1.2;
}
.live-update__absolute-time::before { content: "("; }
.live-update__absolute-time::after  { content: ")"; }

/* The clean white reading card — wraps everything inside .live-update__content
   except the head/stamp which now lives outside above. */
.live-update__content {
    background: var(--aj-card-bg);
    border: 1px solid var(--aj-card-border);
    border-radius: var(--aj-card-radius);
    padding: 22px 22px 18px;
    box-shadow: 0 1px 0 rgba(15, 15, 15, 0.02);
}
@media (min-width: 720px) {
    .live-update__content {
        padding: 26px 28px 22px;
    }
}

/* Move the head + absolute-time visually OUTSIDE the card. We do this by
   pulling them up via negative margin so they sit above the white panel. */
.live-update__head,
.live-update__absolute-time {
    position: relative;
    margin-top: -2px;
    margin-bottom: 10px;
    background: transparent;
    z-index: 1;
}
.live-update__content > .live-update__head {
    margin-top: -6px;
    margin-bottom: 4px;
    padding: 0 4px;
}
.live-update__content > .live-update__absolute-time {
    margin: -2px 4px 14px;
}

/* Headline in the card — serif, prominent, sentence-case Al Jazeera style */
.live-update__title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--aj-text);
}
.live-update__title a {
    color: inherit;
    text-decoration: none;
}
.live-update__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Body copy — serif, larger, comfortable reading */
.live-update__body,
.live-update__body p {
    font-family: var(--font-serif);
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--aj-text);
}
.live-update__body p { margin: 0 0 1em; }
.live-update__body p:last-child { margin-bottom: 0; }
.live-update__body a { color: var(--aj-link); text-decoration: underline; text-underline-offset: 3px; }
.live-update__body ul,
.live-update__body ol {
    font-family: var(--font-serif);
    font-size: 17.5px;
    line-height: 1.65;
    margin: 0 0 1em;
    padding-left: 22px;
}
.live-update__body ul { list-style: disc; }
.live-update__body ul li::marker { color: var(--aj-dot-color); }
.live-update__body li { margin-bottom: .35em; }

/* Media: clean inset, no border-radius blowout */
.live-update__media {
    margin: 16px 0 6px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-container-low);
}
.live-update__media img,
.live-update__media video {
    display: block;
    width: 100%;
    height: auto;
}
.live-update__caption {
    padding: 8px 2px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--aj-text-muted);
    line-height: 1.45;
}

/* Byline & sources, soft muted treatment */
.live-update__byline {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--aj-rail-color);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--aj-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.live-update__author-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-container);
    color: var(--aj-text);
    font-size: 11px;
    font-weight: 800;
}

/* Action row — only the share button shows by default; circular, bottom-right */
.live-update__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
}
.live-update__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--aj-card-border);
    background: var(--aj-card-bg);
    color: var(--aj-text-muted);
    cursor: pointer;
    transition: background-color 160ms, color 160ms, border-color 160ms;
}
.live-update__action:hover {
    background: var(--surface-container-low);
    color: var(--aj-text);
    border-color: var(--outline);
}
.live-update__action .label-caps { display: none; }
.live-update__action .material-symbols-outlined { font-size: 18px; }
/* If both Open and Share render, give Open a label slot */
.live-update__action--link {
    width: auto;
    padding: 0 14px;
    gap: 6px;
}
.live-update__action--link .label-caps {
    display: inline;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* "Latest" / pinned highlights — orange accent on the dot only, not the card */
.live-update--latest::before { background: var(--aj-dot-color); }
.live-update--pinned::before {
    background: var(--aj-dot-color);
    box-shadow: 0 0 0 3px var(--aj-dot-ring), 0 0 0 4px var(--aj-dot-color);
}

/* Kind badge inside the card — subtle pill */
.live-update__kind-row { margin: 0 0 10px; }
.live-update__kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--aj-dot-color) 12%, transparent);
    color: color-mix(in srgb, var(--aj-dot-color) 60%, var(--aj-text));
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.live-update__kind-badge--breaking {
    background: var(--secondary);
    color: var(--on-secondary);
}
.live-update__kind-badge .material-symbols-outlined { font-size: 14px; }

/* Section divider on the timeline — like AJ's day separators */
.live-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 18px;
    max-width: var(--aj-reading-max);
    color: var(--aj-text);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.live-section-divider__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--aj-rail-color);
}

/* Read-more / linked article block — calmer card-in-card look */
.live-update__read-more {
    margin-top: 16px;
    border: 1px solid var(--aj-card-border);
    border-radius: 4px;
    background: var(--surface-container-low);
    overflow: hidden;
}
.live-update__read-more-body h4 {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.25;
}
.live-update__read-more-cta {
    background: var(--aj-text);
    color: var(--aj-card-bg);
    border-color: var(--aj-text);
}

/* Mobile tweaks: dot moves closer to edge, card gets phone-friendly padding */
@media (max-width: 539px) {
    .live-feed {
        --aj-pad-l: 30px;
        padding-right: 12px;
        background-position: 13px 200px;
    }
    .live-update::before {
        left: -22px;
        top: 6px;
        width: 10px;
        height: 10px;
    }
    .live-update__content { padding: 18px 16px 16px; }
    .live-update__title { font-size: 19px; line-height: 1.22; }
    .live-update__body, .live-update__body p,
    .live-update__body ul, .live-update__body ol { font-size: 16.5px; line-height: 1.6; }
    .live-feed__title { font-size: 28px; }
}

/* Hide the right "Key developments" rail on this look — AJ uses single column.
   If you want the rail back, remove this override. */
@media (min-width: 1024px) {
    .live-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
    .key-developments--side,
    .live-shell > aside { display: none !important; }
}
/* === end Al Jazeera timeline reskin === */


/* ============================================================================
   HARD RESET — MOBILE-FIRST, WINS EVERY SPECIFICITY FIGHT — 2026-04-26
   This block intentionally uses !important to override the inline <style>
   blocks in home_page.html (519 lines) and any other in-page CSS that
   competes with the global stylesheet. Breakpoints are chosen to feel right
   on real devices: phone < 640, tablet 640–1023, desktop 1024+.
   Read top-down: rules apply mobile-first, then progressively unlock at
   wider breakpoints.
   ============================================================================ */

/* --- Universal box hygiene ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

img, svg, video, iframe, canvas, picture {
    max-width: 100% !important;
    height: auto;
}
img { display: block; }

/* Anything pretending to be a container caps at viewport width */
.canvas, main, .ops-canvas, .t-home, .live-feed, .live-shell,
.article__main, .article-detail, .section-hero, .section-feature,
.story-feed, .story-list, .ops-shell {
    max-width: 100% !important;
}

/* --- PHONE: < 640px ------------------------------------------------------ */
@media (max-width: 639px) {

    body, html { font-size: 16px !important; }

    /* Kill every multi-column grid on phones — single column rules. */
    .t-front-grid,
    .t-front-grid--no-live,
    .t-front-grid--no-image,
    .t-front-main,
    .t-front-stack,
    .home-secondary,
    .home-hero,
    .section-feature,
    .story-row,
    .story-list,
    .live-shell,
    .ops-grid,
    .ops-grid--dashboard,
    .ops-classic-editor,
    .ops-live-grid,
    .live-editor-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Home page padding & spacing */
    .t-home {
        padding: 12px 14px 80px !important;
        gap: 18px !important;
    }
    .t-lane__head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .t-lane__head h2 {
        font-size: 26px !important;
        line-height: 1.1 !important;
    }
    .t-lead-copy__title {
        font-size: 28px !important;
        line-height: 1.08 !important;
        max-width: none !important;
    }
    .t-lead-copy__summary { font-size: 16px !important; line-height: 1.5 !important; }
    .t-lead-media__frame {
        aspect-ratio: 4 / 3 !important;
        max-height: none !important;
    }
    .t-quickline__item h3 { font-size: 17px !important; }
    .t-home-live { position: static !important; }
    .t-home-live__list { max-height: none !important; }
    .t-home-live__summary { display: none !important; }

    /* Topbar — compact phone bar */
    .topbar { height: 56px !important; }
    .topbar__inner { padding: 0 10px !important; gap: 6px !important; }
    .topbar__brand-name { font-size: 15px !important; }
    .topbar__nav { display: none !important; }
    .topbar__menu { display: inline-flex !important; min-width: 44px !important; min-height: 44px !important; }
    .topbar__search { display: none !important; }
    .topbar__mobile-search { display: inline-flex !important; min-width: 44px !important; min-height: 44px !important; }
    .topbar__staff { padding: 4px !important; }
    .topbar__staff-copy { display: none !important; }
    body.has-shell { padding-top: 56px !important; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Drawer — full-bleed on tiny screens */
    .drawer { width: min(90vw, 320px) !important; }
    .drawer__nav a { min-height: 48px !important; padding: 0 18px !important; }

    /* Bottom nav — visible only on phone */
    .bottom-nav { display: grid !important; }
    .bottom-nav__item { min-height: 56px !important; }

    /* Hot rail — horizontal scrolling, no clipping */
    .rail__inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 12px !important;
    }
    .rail__track { flex-wrap: nowrap !important; }

    /* Article body — readable phone typography */
    .article__main { padding: 0 16px 32px !important; }
    .article-detail h1 { font-size: 28px !important; line-height: 1.12 !important; }
    .article-body { font-size: 17.5px !important; line-height: 1.65 !important; }
    .article-body p, .article-body li { font-size: 17.5px !important; }

    /* Live event */
    .live-feed { padding-left: 32px !important; padding-right: 14px !important; }
    .live-feed__title { font-size: 26px !important; line-height: 1.12 !important; }
    .live-feed__lede { font-size: 16px !important; line-height: 1.55 !important; }
    .live-update__content { padding: 16px 14px !important; }
    .live-update__title { font-size: 19px !important; line-height: 1.22 !important; }
    .live-update__body, .live-update__body p { font-size: 16.5px !important; line-height: 1.6 !important; }
    .live-package { padding: 14px !important; }
    .live-package__title { font-size: 22px !important; }

    /* Section pages */
    .section-hero { padding: 24px 16px !important; }
    .section-hero h1 { font-size: 30px !important; line-height: 1.1 !important; max-width: none !important; }
    .section-feature { gap: 16px !important; }
    .section-feature__body { padding: 18px !important; }
    .section-feature__title { font-size: 22px !important; }
    .story-row { padding: 16px 0 !important; gap: 12px !important; }
    .story-row__media { max-width: 140px !important; }

    /* Footer */
    .site-footer__inner {
        padding: 24px 16px !important;
        grid-template-columns: 1fr !important;
    }
    .site-footer__nav { gap: 14px 18px !important; }

    /* Forms — full-width inputs everywhere */
    input, select, textarea {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;        /* prevent iOS zoom on focus */
    }
    input[type="checkbox"], input[type="radio"] { width: auto !important; }

    /* Buttons — meet 44px tap target */
    .t-btn, .ops-primary-button, .ops-secondary-button,
    .live-package__cta, .live-package__pin {
        min-height: 44px !important;
    }

    /* Tables — horizontal scroll wrapper */
    table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* --- TABLET: 640 — 1023 ------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {

    /* Home: 2 columns where it makes sense, 1 elsewhere */
    .t-front-grid,
    .t-front-grid--no-live,
    .t-front-grid--no-image {
        display: grid !important;
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.95fr) !important;
        gap: 20px !important;
    }
    .t-front-stack { display: grid !important; gap: 16px !important; }
    .home-secondary { grid-template-columns: 1fr 1fr !important; }

    /* Section feature stays 2-col but tighter */
    .section-feature { grid-template-columns: 1fr !important; }

    /* Story row gets the side-thumb layout */
    .story-row { grid-template-columns: 180px 1fr !important; gap: 18px !important; }

    /* Topbar — show abbreviated nav */
    .topbar__nav { display: none !important; }
    .topbar__menu { display: inline-flex !important; }
    .topbar__search { display: none !important; }
    .topbar__mobile-search { display: inline-flex !important; }

    /* Article: comfortable reading column */
    .article__main { padding: 0 28px 40px !important; }
    .article-body { max-width: 64ch !important; margin-inline: auto !important; }

    /* Live event: still single-column timeline at this width */
    .live-shell { grid-template-columns: 1fr !important; gap: 0 !important; }
    .key-developments--side { display: none !important; }

    /* Footer: 2-col */
    .site-footer__inner { grid-template-columns: 1fr 1fr !important; }
}

/* --- DESKTOP: ≥ 1024px — balanced columns, defeat the broken zero-width
       middle column bug on the homepage ----------------------------------- */
@media (min-width: 1024px) {

    /* Sane 3-column home grid that NEVER collapses one column to 0 */
    .t-front-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr) minmax(280px, 1fr) !important;
        gap: 24px !important;
    }
    .t-front-grid--no-live {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr) minmax(280px, 1fr) !important;
    }
    /* When there's no lead image, drop to 2-col (copy + sidebar). */
    .t-front-grid--no-image {
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr) !important;
    }
    /* Each column inside the front grid gets its own min-width: 0 so long
       headlines don't burst the column. */
    .t-front-grid > * { min-width: 0 !important; }

    /* Home secondary — 3-up cards */
    .home-secondary { grid-template-columns: 1fr 1fr 1fr !important; }

    /* Comfortable article reading width — never wider than 72ch */
    .article-body,
    .article-body p,
    .article-body ul,
    .article-body ol,
    .article-body blockquote {
        max-width: 72ch !important;
    }
    .article__main { padding: 0 40px 56px !important; }
    .article-body { margin-inline: auto !important; }

    /* Topbar — show full nav, search field */
    .topbar__nav { display: flex !important; }
    .topbar__menu { display: none !important; }
    .topbar__search { display: flex !important; flex: 0 1 320px !important; }
    .topbar__mobile-search { display: none !important; }
    .bottom-nav { display: none !important; }

    /* Section feature: 7/5 split, no zero-width column */
    .section-feature { grid-template-columns: 7fr 5fr !important; }

    /* Story row: side-thumb */
    .story-row { grid-template-columns: 200px 1fr !important; gap: 24px !important; align-items: flex-start !important; }

    /* Footer balanced */
    .site-footer__inner { grid-template-columns: auto 1fr !important; align-items: start !important; }
}

/* --- DESKTOP WIDE: ≥ 1280px — luxurious gutters --------------------------- */
@media (min-width: 1280px) {
    .t-home { padding: 24px 32px 80px !important; gap: 28px !important; }
    .canvas { padding-left: 32px !important; padding-right: 32px !important; }
    .article__main { padding: 0 56px 72px !important; }
}

/* --- Outliers we want to kill site-wide regardless of breakpoint --------- */

/* No element should poke past the viewport */
.topbar__inner,
.t-home,
.canvas,
.live-shell,
.live-feed,
.site-footer__inner {
    overflow-wrap: anywhere;
}

/* Long words / URLs in body copy never blow out the column */
p, li, h1, h2, h3, h4, .live-update__title, .live-package__title,
.t-lead-copy__title, .article-detail h1, .live-feed__title {
    overflow-wrap: anywhere;
}

/* Image grids: object-fit cover, no native dimensions blowing layout */
.t-lead-media__frame img,
.section-feature__media img,
.story-row__media img,
.t-home-video__media img,
.live-update__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Editor admin gets the same overflow protection */
.ops-shell, .ops-canvas, .ops-table-wrap {
    max-width: 100% !important;
}
.ops-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

/* --- Modal/drawer backdrops never trap clicks when closed --------------- */
.drawer-backdrop[aria-hidden="true"] { pointer-events: none !important; opacity: 0 !important; }
.drawer[aria-hidden="true"] { pointer-events: none !important; }
.drawer-backdrop[aria-hidden="false"] { pointer-events: auto !important; opacity: 1 !important; }

/* Prevent the agent-glow border from blocking pointer events */
#claude-agent-glow-border { pointer-events: none !important; }

/* === end hard reset === */


/* ============================================================================
   LIVE EVENT — heavy clean-up (2026-04-26)
   The site shipped with a legacy rail painted via .live-update__content::before
   and a dot via .live-update__content::after, both gated to ≥720px. The new
   Al Jazeera reskin paints its own rail (.live-feed background-image) and dot
   (.live-update::before). Both were rendering at the same time → two lines,
   two circles. This block kills the legacy duplicates and hardens the
   responsive behaviour so the layout autofits every device width.
   ============================================================================ */

/* --- Kill the duplicate rail + dot --------------------------------------- */
.live-update__content::before,
.live-update__content::after,
.live-update--latest .live-update__content::before,
.live-update--latest .live-update__content::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Legacy rail painted on .live-feed::before in some themes — squash it */
.live-feed::before,
.live-feed::after,
.live-feed__inner::before,
.live-feed__inner::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* Make sure the legacy left time column stays hidden — it was a third
   rail-y element competing for visual space at 720px+. */
.live-update__time { display: none !important; }

/* --- The single, real rail (AJ-style) ------------------------------------ */
.live-feed {
    /* Repaint the rail using a gradient that ALWAYS spans the full content
       height. Avoids the previous offset that made the rail start ~240px in
       and miss the first updates on short pages. */
    background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--aj-rail-top, 0px),
        var(--aj-rail-color) var(--aj-rail-top, 0px),
        var(--aj-rail-color) 100%
    ) !important;
    background-size: 1px 100% !important;
    background-repeat: no-repeat !important;
    background-position: var(--aj-rail-x, 14px) 0 !important;
}
@media (min-width: 720px) {
    .live-feed { background-position: var(--aj-rail-x-md, 22px) 0 !important; }
}

/* Single, real dot — already defined in AJ block. Reinforce position so it
   sits exactly on the rail no matter the page width. */
.live-update {
    position: relative !important;
    isolation: isolate;
}
.live-update::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 6px !important;
    left: -22px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: var(--aj-card-bg, #fff) !important;
    border: 2px solid var(--aj-dot-color, #f59e0b) !important;
    box-shadow: 0 0 0 3px var(--aj-dot-ring, #fff) !important;
    z-index: 2 !important;
}
@media (min-width: 720px) {
    .live-update::before { left: -32px !important; top: 8px !important; }
}

/* The width-cap in legacy CSS (`width: min(100%, 52rem)`) was making cards
   on narrow viewports go past the parent. Force flexible width. */
.live-update__content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* The legacy `.live-update__head` was display:flex with the title and a
   small "X ago" stamp in the same row. The AJ design lifts the stamp ABOVE
   the card, so we want the head to be a clean block here. */
.live-update__head {
    display: block !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.live-update__title {
    max-width: none !important;
    text-wrap: balance;
    flex: none !important;
}

/* --- Autofit: pad / margins / max-width across breakpoints --------------- */

/* Phone */
@media (max-width: 539px) {
    .live-feed {
        --aj-pad-l: 28px;
        padding-left: 28px !important;
        padding-right: 14px !important;
        background-position: 12px 0 !important;
    }
    .live-update::before { left: -19px !important; top: 5px !important; width: 10px !important; height: 10px !important; }
    .live-update__content { padding: 16px 14px 14px !important; }
    .live-update__title { font-size: 19px !important; line-height: 1.22 !important; }
    .live-update__body, .live-update__body p,
    .live-update__body ul, .live-update__body ol {
        font-size: 16.5px !important;
        line-height: 1.6 !important;
    }
    .live-feed__title { font-size: 26px !important; line-height: 1.1 !important; }
    .live-feed__lede { font-size: 16px !important; }
    .live-package { padding: 14px !important; margin-bottom: 18px !important; }
    .live-package__title { font-size: 22px !important; line-height: 1.18 !important; }
    .live-update { margin-bottom: 22px !important; }
    .live-update__media { margin: 12px 0 4px !important; }

    /* Stamp readable on small screens */
    .live-update__stamp { font-size: 13px !important; }
    .live-update__absolute-time { font-size: 13px !important; }
}

/* Tablet */
@media (min-width: 540px) and (max-width: 1023px) {
    .live-feed {
        --aj-pad-l: 38px;
        padding-left: 38px !important;
        padding-right: 18px !important;
        max-width: 760px !important;
        margin-inline: auto !important;
        background-position: 18px 0 !important;
    }
    .live-update::before { left: -25px !important; top: 8px !important; }
    .live-update__content { padding: 20px 22px 18px !important; }
    .live-update { margin-bottom: 28px !important; }
}

/* Desktop */
@media (min-width: 1024px) {
    .live-shell { display: block !important; grid-template-columns: 1fr !important; gap: 0 !important; background: transparent !important; }
    .live-shell > * { background: transparent !important; }
    .key-developments--side, .live-shell > aside { display: none !important; }
    .live-feed {
        --aj-pad-l: 56px;
        padding-left: 56px !important;
        padding-right: 24px !important;
        max-width: 820px !important;
        margin-inline: auto !important;
        background-position: 28px 0 !important;
    }
    .live-update::before { left: -32px !important; top: 8px !important; }
    .live-update__content { padding: 26px 28px 22px !important; }
    .live-update { margin-bottom: 32px !important; }
}

/* --- Lead "package" (top hero update) cleanup ---------------------------- */
.live-package {
    background: var(--aj-card-bg, #fff) !important;
    border: 1px solid var(--aj-card-border, #e7e3dc) !important;
    border-left: 4px solid var(--secondary, #b7221e) !important;
    border-radius: var(--aj-card-radius, 4px) !important;
    padding: 18px 18px 16px !important;
    margin: 0 0 24px !important;
    max-width: 100% !important;
}
.live-package__embedded-card { margin-top: 8px; }

/* --- Section divider ------------------------------------------------------ */
.live-section-divider {
    max-width: 100% !important;
    margin: 28px 0 16px !important;
}

/* --- Header (event title + "Updating" pill) ------------------------------ */
.live-feed__header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 18px !important;
    background: transparent !important;
}
.live-feed__title-row {
    width: 100% !important;
    max-width: none !important;
    flex-wrap: wrap !important;
}
.live-feed__title {
    max-width: 22ch !important;
}
.live-feed__lede,
.live-feed__meta,
.admin-inline-edit--event {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Kicker row (Updates count + auto-toggle) ---------------------------- */
.live-feed > .t-kicker {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
}
.live-feed > .t-kicker .live-auto-toggle {
    margin-left: auto !important;
}

/* --- Admin overlay bar — keep it from busting layout on phone ----------- */
@media (max-width: 639px) {
    .admin-overlay-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .admin-overlay-bar__left,
    .admin-overlay-bar__right {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* --- Last child rail trim (avoid rail extending past final card) -------- */
.live-feed { background-clip: border-box; }

/* === end live event clean-up === */


/* ============================================================================
   COMPREHENSIVE UX POLISH — 2026-04-26
   Principle-driven sweep across the public site:
     • WCAG AA contrast (rebalances the muted token that fails AA)
     • Visible focus rings everywhere (keyboard accessibility)
     • Affordance (links and buttons look clickable)
     • Feedback (hover, active, focus, loading)
     • Reading rhythm (line-height, line-length, vertical spacing)
     • Selection color, scrollbar polish, blockquote, code, kbd
     • Loading skeletons + empty state utilities
     • Image aspect-ratio holders to prevent CLS
     • Reduced-motion + print sanity
   Intentionally !important to override stale inline styles in legacy templates.
   ============================================================================ */

/* --- 1. Tokens: rebalance muted greys to clear WCAG AA ------------------ */
:root {
    /* Was #7e7576 (4.25:1 vs #f9f9f9 — fails AA for normal text). */
    --outline:                 #5d5557 !important;     /* 5.05:1 */
    /* Slightly darker variant for hairlines */
    --outline-variant:         #b8acab !important;
    /* Was #4c4546 — already AA, but tighten one notch for richer ink */
    --on-surface-variant:      #3f3a3b !important;
    /* Brand red — bump saturation for clearer hover/visited accent */
    --accent:                  var(--secondary, #b7221e);
    --accent-strong:           #93001a;
    --accent-soft:             #fde7e3;
    --link-color:              #2a4d8a;
    --link-color-visited:      #6f48a8;
    --focus-ring:              0 0 0 3px rgba(183, 34, 30, 0.30);
    --focus-ring-strong:       0 0 0 3px rgba(183, 34, 30, 0.55);
    /* Skeleton */
    --skeleton-base:           #ece7e1;
    --skeleton-shine:          #f7f3ed;
}
html[data-theme="dark"] {
    --outline:                 #b1a8a7 !important;
    --outline-variant:         #4a4243 !important;
    --on-surface-variant:      #d4cdcc !important;
    --link-color:              #8eb0ee;
    --link-color-visited:      #c1a3eb;
    --focus-ring:              0 0 0 3px rgba(254, 86, 73, 0.45);
    --skeleton-base:           #1f1f23;
    --skeleton-shine:          #2a2a2f;
}

/* --- 2. Selection ---------------------------------------------------------- */
::selection {
    background: var(--accent, #b7221e);
    color: #fff;
    text-shadow: none;
}

/* --- 3. Visible focus everywhere — keyboard accessibility -------------- */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent, #b7221e) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent, #b7221e) !important;
    outline-offset: 2px !important;
    box-shadow: var(--focus-ring) !important;
}

/* --- 4. Body links — readable underline by default, accent on hover ---- */
.article-body a,
.live-update__body a,
.live-package__summary a,
main article a:not(.t-btn):not(.live-update__action):not(.live-update__read-more-cta),
.utility-page__body a,
.section-feature__lede a,
.story-row__excerpt a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(42, 77, 138, 0.45);
    transition: color 120ms, text-decoration-color 120ms;
}
.article-body a:hover,
.live-update__body a:hover,
main article a:not(.t-btn):not(.live-update__action):not(.live-update__read-more-cta):hover {
    color: var(--accent-strong, #93001a);
    text-decoration-color: var(--accent-strong, #93001a);
}
.article-body a:visited,
.live-update__body a:visited {
    color: var(--link-color-visited);
    text-decoration-color: rgba(111, 72, 168, 0.5);
}

/* --- 5. Form fields — affordance + clear focus state ------------------- */
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="datetime-local"], input[type="date"], input[type="time"],
select, textarea {
    background: var(--paper, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--on-surface);
    transition: border-color 120ms, box-shadow 120ms;
    font-family: inherit;
}
input:hover, select:hover, textarea:hover {
    border-color: var(--outline);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--focus-ring) !important;
}
input::placeholder, textarea::placeholder {
    color: var(--outline);
    opacity: 1;
}
:invalid:not(:placeholder-shown) {
    border-color: var(--accent-strong, #93001a);
}

/* --- 6. Buttons — consistent hover, active, disabled ------------------- */
button:not(:disabled),
.t-btn,
.ops-primary-button,
.ops-secondary-button {
    cursor: pointer;
    transition: background-color 140ms, color 140ms, border-color 140ms, transform 80ms;
}
button:not(:disabled):active,
.t-btn:active,
.ops-primary-button:active,
.ops-secondary-button:active {
    transform: translateY(1px);
}
button:disabled,
button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

/* --- 7. Loading skeleton utility --------------------------------------- */
.skeleton {
    display: block;
    background: var(--skeleton-base);
    background-image: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-shine) 40%,
        var(--skeleton-base) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    color: transparent;
    user-select: none;
}
.skeleton--text { height: 1em; margin: 0.4em 0; }
.skeleton--title { height: 1.5em; margin: 0.6em 0; max-width: 70%; }
.skeleton--media { aspect-ratio: 16 / 10; width: 100%; }
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* --- 8. Empty states --------------------------------------------------- */
.empty-state,
.ops-empty-state {
    padding: 36px 22px;
    text-align: center;
    color: var(--on-surface-variant);
    border: 1px dashed var(--outline-variant);
    border-radius: 12px;
    background: var(--paper);
}
.empty-state__title {
    font-family: var(--font-serif);
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--on-surface);
}
.empty-state__copy { font-size: 14px; line-height: 1.55; max-width: 42ch; margin: 0 auto; }

/* --- 9. Image aspect-ratio holders (prevent layout shift) ------------- */
.t-lead-media__frame,
.section-feature__media,
.story-row__media,
.t-home-video__media,
.live-update__media {
    background: var(--surface-container-low, #f3f3f3);
    overflow: hidden;
}
.t-lead-media__frame:not(:has(img)) { aspect-ratio: 5 / 4; }
.section-feature__media:not(:has(img)) { aspect-ratio: 16 / 10; }
.story-row__media:not(:has(img)) { aspect-ratio: 4 / 3; }

/* --- 10. Scrollbar polish (WebKit + Firefox) -------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--outline-variant) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 999px;
    border: 2px solid var(--surface, #f9f9f9);
}
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* --- 11. Blockquote, code, pre, kbd, hr ------------------------------ */
.article-body blockquote,
.live-update__body blockquote {
    margin: 1.4em 0;
    padding: 8px 16px 8px 18px;
    border-left: 4px solid var(--accent);
    background: var(--surface-container-low);
    font-family: var(--font-serif);
    font-size: 1.04em;
    line-height: 1.6;
    color: var(--on-surface);
    font-style: italic;
}
.article-body blockquote cite,
.live-update__body blockquote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--on-surface-variant);
}
.article-body code,
.live-update__body code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 2px 6px;
    background: var(--surface-container);
    border-radius: 3px;
    color: var(--accent-strong, #93001a);
}
.article-body pre,
.live-update__body pre {
    overflow-x: auto;
    padding: 12px 14px;
    background: #1a1c1c;
    color: #f1f1f1;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
}
.article-body pre code,
.live-update__body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--on-surface);
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-bottom-width: 2px;
    border-radius: 4px;
}
hr {
    border: 0;
    height: 1px;
    background: var(--outline-variant);
    margin: 28px 0;
}

/* --- 12. Lists in article body — visible markers, comfy spacing ----- */
.article-body ul,
.live-update__body ul,
.article-body ol,
.live-update__body ol {
    padding-left: 1.4em;
    margin: 1em 0;
}
.article-body ul li,
.live-update__body ul li {
    list-style: disc;
}
.article-body ul li::marker,
.live-update__body ul li::marker {
    color: var(--accent);
}
.article-body li,
.live-update__body li { margin-bottom: 0.45em; }

/* --- 13. Tables — readable, scrollable on phone -------------------- */
.article-body table,
main article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14.5px;
}
.article-body th,
.article-body td,
main article th,
main article td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--outline-variant);
    text-align: left;
}
.article-body th,
main article th {
    background: var(--surface-container-low);
    font-weight: 700;
    color: var(--on-surface);
}

/* --- 14. Smooth scroll + scroll-margin so anchors don't hide under topbar */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id]:not(html):not(body) { scroll-margin-top: calc(var(--topbar-h, 68px) + 16px); }

/* --- 15. Topbar nav — clearer affordance ---------------------------- */
.topbar__nav a {
    color: var(--on-surface-variant) !important;
    transition: color 120ms;
}
.topbar__nav a:hover,
.topbar__nav a.is-active,
.topbar__nav a[aria-current="page"] {
    color: var(--accent) !important;
}
.topbar__nav a.is-active::after,
.topbar__nav a[aria-current="page"]::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--accent);
    margin-top: 4px;
    border-radius: 2px;
}

/* --- 16. Visited story links — subtle distinction in feeds --------- */
.story-row__title a:visited,
.t-quickline__item h3 a:visited,
.t-home-briefs__item h3 a:visited,
.t-home-live__item h3 a:visited {
    color: #6f6f6f;
}

/* --- 17. Visible "current" state in pagination ---------------------- */
.pagination [aria-current="page"],
.pagination .is-current {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* --- 18. Tap-target floor on phones (belt-and-suspenders) --------- */
@media (max-width: 767px) {
    a, button, [role="button"], summary {
        min-height: 36px;
    }
    .topbar__menu, .topbar__mobile-search, .drawer__close,
    .bottom-nav__item, .live-update__action, .live-package__cta,
    .t-btn, .ops-primary-button, .ops-secondary-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* --- 19. Loading bar applied to long-running buttons via aria-busy -- */
button[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: ops-spin 700ms linear infinite;
}
@keyframes ops-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"]::after { animation: none; } }

/* --- 20. Cookie/banner-safe bottom inset for fixed elements ------- */
.bottom-nav, .ops-toasts, .ops-spa-progress {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* --- 21. Print: keep readable, drop chrome ------------------------ */
@media print {
    body { background: #fff !important; color: #111 !important; }
    .topbar, .bottom-nav, .drawer, .drawer-backdrop, .ticker,
    .reading-progress, .site-footer__nav, .live-feed > .t-kicker,
    .live-update__actions, .live-package__actions, .ops-spa-progress,
    .ops-toasts { display: none !important; }
    body.has-shell { padding-top: 0 !important; padding-bottom: 0 !important; }
    .article-body { font-size: 12pt; line-height: 1.55; max-width: none; }
    a { text-decoration: underline; color: #000 !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
    img { page-break-inside: avoid; max-width: 100% !important; }
    h1, h2, h3 { page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
}

/* --- 22. Meta tags below copy — small caps, unmistakably secondary --- */
.t-meta-row, .t-lead-copy__meta, .live-update__byline,
.story-row__meta, .t-quickline__meta, .t-home-briefs__meta {
    color: var(--on-surface-variant) !important;
}

/* --- 23. Disabled / inactive nav items get explicit muting -------- */
.is-disabled, [aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.2);
}

/* --- 24. Live "Updating" pill — clearer pulse animation ----------- */
.live-pill .live-dot,
.live-dot--pulse {
    animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    .live-pill .live-dot, .live-dot--pulse { animation: none; }
}

/* === end UX polish === */

/* X/Twitter embeds: real widgets with a calm fallback shell. */
.story-card__embed--x {
    margin: 14px 16px 0;
    padding: 8px 0;
    max-width: 560px;
    min-height: 120px;
    background: #ffffff;
}

.story-card__embed--x .twitter-tweet,
.story-card__embed--x iframe {
    margin: 0 auto !important;
    max-width: 100% !important;
}

.live-update__body .story-card__embed--x,
.prose .story-card__embed--x {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    .story-card__embed--x {
        margin-inline: 10px;
        max-width: calc(100vw - 54px);
    }
}


/* ============================================================================
   PUBLIC UI STABILIZATION — 2026-04-26
   Final public-only overrides for live pages and home media/wire consistency.
   ============================================================================ */

.template-live .live-feed__title,
.template-live-node .live-feed__title {
    max-width: min(100%, 24ch) !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.template-live-node .live-feed__title--node {
    font-size: clamp(28px, 5.2vw, 42px) !important;
    line-height: 1.08 !important;
}

.template-live .live-feed__meta,
.template-live .live-feed > .t-kicker,
.template-live-node .live-feed__meta {
    overflow-wrap: normal;
    word-break: normal;
}

.template-live .live-kicker__optional {
    white-space: nowrap;
}

.template-live .live-update__media,
.template-live-node .live-update__media {
    border-color: color-mix(in srgb, var(--outline-variant) 82%, var(--paper)) !important;
    background: color-mix(in srgb, var(--surface-container-low) 72%, var(--paper)) !important;
}

.template-live .live-update__media img,
.template-live .live-update__media video,
.template-live-node .live-update__media img,
.template-live-node .live-update__media video {
    width: 100% !important;
    height: auto !important;
    max-height: min(70vh, 620px) !important;
    object-fit: contain !important;
    object-position: center !important;
}

.template-live .live-update__body iframe,
.template-live .live-update__body embed,
.template-live .live-update__body object,
.template-live-node .live-update__body iframe,
.template-live-node .live-update__body embed,
.template-live-node .live-update__body object {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 220px;
}

.template-live .live-update__body .story-card,
.template-live .live-package__embedded-card,
.template-live-node .live-update__body .story-card {
    max-width: 100%;
    overflow: hidden;
}

.template-live-node .live-node-parent {
    overflow-wrap: anywhere;
}

.template-live-node .latest-list--live strong,
.template-live-node .sidecard__link {
    overflow-wrap: anywhere;
}

.template-homepage .intel-wire-slot {
    align-self: stretch;
}

.template-homepage .intel-wire-slot > .intel-wire {
    --intel-bg: var(--paper);
    --intel-surface: color-mix(in srgb, var(--surface-container-low) 68%, var(--paper));
    --intel-line: var(--outline-variant);
    --intel-row-alt: color-mix(in srgb, var(--surface-container-low) 46%, var(--paper));
    --intel-text: var(--on-surface);
    --intel-text-2: var(--on-surface-variant);
    --intel-mute: var(--outline);
    --intel-accent: var(--secondary);
    border-radius: 6px;
    min-height: 360px;
    box-shadow: none;
}

.template-homepage .intel-wire-slot .intel-wire__bar,
.template-homepage .intel-wire-slot .intel-wire__ticker {
    background: var(--intel-surface);
    color: var(--on-surface-variant);
}

.template-homepage .intel-wire-slot .intel-row {
    border-color: var(--outline-variant);
}

.template-homepage .intel-wire-slot .intel-row__src--nr {
    color: var(--paper);
}

@media (max-width: 760px) {
    .template-homepage .intel-wire-slot {
        display: none !important;
    }
}

.template-homepage .t-home-video,
.template-homepage .t-home-briefs,
.template-homepage .t-home-live {
    border-radius: 6px;
}

@media (max-width: 639px) {
    .template-live .live-feed,
    .template-live-node .live-feed {
        padding-left: 24px !important;
        padding-right: 12px !important;
    }

    .template-live .live-feed__title,
    .template-live-node .live-feed__title {
        max-width: 100% !important;
        font-size: clamp(25px, 8vw, 32px) !important;
    }

    .template-live .live-feed > .t-kicker {
        gap: 6px 10px !important;
        font-size: 12px !important;
    }

    .template-live .live-kicker__optional {
        display: none;
    }

    .template-live .live-update__body iframe,
    .template-live-node .live-update__body iframe {
        min-height: 180px;
    }

    .template-homepage .intel-wire-slot > .intel-wire {
        min-height: 300px;
        max-height: 420px;
    }
}

/* Final mobile live guardrails: headlines readable, media contained, no overlays. */
@media (max-width: 639px) {
    .template-live .live-package,
    .template-live .live-feed__hero,
    .template-live-node .live-update-node {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .template-live .live-package__title,
    .template-live .live-feed__title,
    .template-live-node .live-feed__title,
    .template-live-node .live-feed__title--node {
        max-width: 100% !important;
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.025em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    .template-live .live-package__summary,
    .template-live-node .live-node-summary {
        max-width: 100% !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .template-live .live-update__content,
    .template-live-node .live-update__content {
        padding: 18px 16px !important;
    }

    .template-live .live-update__media,
    .template-live-node .live-update__media {
        margin-inline: 0 !important;
        max-width: 100% !important;
    }
}