/* ===========================================================
   Security Distilled — design system
   Warm coffee palette · espresso editorial voice · cyber signal
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Warm neutrals ---------- */
  --bg-crema:       #FAF8F4;
  --bg-paper:       #FDFCFA;
  --surface:        #FFFFFF;
  --surface-2:      #F3F0EA;
  --ink-espresso:   #1C140F;
  --ink-oak:        #3A2E25;
  --ink-mid:        #5B4A3C;
  --muted-dust:     #8B7D6E;
  --muted-soft:     #B8AD9E;
  --border:         #E6DDC9;
  --border-strong:  #C9BDA5;
  --border-inset:   #DFD4BD;

  /* ---------- Brand accent ---------- */
  --accent-copper:      #B25A2B;
  --accent-copper-ink:  #8A4520;
  --accent-brass:       #C88A3A;

  /* ---------- Taxonomy colours ---------- */
  --c-breach:       #B91C1C;
  --c-framework:    #1D4ED8;
  --c-ai:           #7C3AED;
  --c-threat:       #C2410C;
  --c-sector:       #047857;
  --c-commentary:   #475569;

  /* ---------- State ---------- */
  --ok:   #15803D;
  --warn: #B45309;
  --err:  #B91C1C;
  --info: #1D4ED8;

  /* ---------- Radii ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, oak-tinted) ---------- */
  --shadow-sm:    0 1px 2px rgba(58, 46, 37, 0.05);
  --shadow:       0 1px 3px rgba(58, 46, 37, 0.07), 0 1px 2px rgba(58, 46, 37, 0.04);
  --shadow-lg:    0 12px 28px rgba(58, 46, 37, 0.10), 0 4px 8px rgba(58, 46, 37, 0.05);
  --shadow-inset: inset 0 1px 2px rgba(58, 46, 37, 0.06);
  --glow-copper:  0 0 0 3px rgba(178, 90, 43, 0.20);
  --glow-breach:  0 0 0 3px rgba(185, 28, 28, 0.22);

  /* ---------- Spacing (8pt) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---------- Containers ---------- */
  --container:        1160px;
  --container-narrow: 760px;

  /* ---------- Motion ---------- */
  --ease-pour: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 120ms;
  --dur-short: 160ms;
  --dur-base:  240ms;
  --dur-long:  600ms;

  /* ---------- Typography ---------- */
  --ff-display: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --ff-sans:    'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-display: 2.4rem;
  --fs-h1:      1.75rem;
  --fs-h2:      1.15rem;
  --fs-kicker:  0.72rem;
  --fs-body:    0.95rem;
  --fs-meta:    0.8rem;
  --fs-mono:    0.8rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* Paper grain */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Legacy aliases (keep old class names working without JS changes on secondary pages) */
  --bg:          var(--bg-crema);
  --ink:         var(--ink-espresso);
  --ink-soft:    var(--ink-oak);
  --muted:       var(--muted-dust);
  --accent:      var(--accent-copper);
  --accent-ink:  var(--accent-copper-ink);
  --radius-sm:   var(--r-sm);
  --radius:      var(--r-md);
  --radius-lg:   var(--r-lg);
  --font-sans:   var(--ff-sans);
  --font-mono:   var(--ff-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-crema:       #14100C;
    --bg-paper:       #1A140F;
    --surface:        #211A13;
    --surface-2:      #2A2018;
    --ink-espresso:   #F5EDDD;
    --ink-oak:        #E2D7C1;
    --ink-mid:        #BFB29B;
    --muted-dust:     #8F8270;
    --muted-soft:     #5E5446;
    --border:         #2F2519;
    --border-strong:  #473826;
    --border-inset:   #261C12;
    --accent-copper:      #D87A44;
    --accent-copper-ink:  #E89054;
    --accent-brass:       #E3A95F;
    --c-breach:       #F87171;
    --c-framework:    #60A5FA;
    --c-ai:           #C084FC;
    --c-threat:       #FB923C;
    --c-sector:       #34D399;
    --c-commentary:   #94A3B8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-espresso);
  background-color: var(--bg-crema);
  background-image: var(--grain);
  background-size: 140px 140px;
  min-height: 100vh;
}

a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: color-mix(in srgb, var(--bg-crema) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-espresso);
  text-decoration: none;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink-espresso);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 20px;
  height: 20px;
  color: var(--bg-crema);
}
.brand-wordmark {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink-espresso);
}
.brand-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted-dust);
  margin-left: 4px;
}

/* Nav */
.primary-nav {
  display: flex;
  gap: 2px;
}
.primary-nav a {
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-snap),
              color var(--dur-micro) var(--ease-snap);
}
.primary-nav a:hover { background: var(--surface-2); color: var(--ink-espresso); }
.primary-nav a[aria-current] {
  background: var(--surface-2);
  color: var(--ink-espresso);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Brew status pill */
.brew-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-oak);
  white-space: nowrap;
}
.brew-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
  animation: brew-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes brew-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); }
}

/* ============================================================
   Layout
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 28px 24px 80px;
}

.page-title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-espresso);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: var(--fs-meta);
  color: var(--muted-dust);
  margin-bottom: 24px;
}

/* ============================================================
   Hero (landing page)
   ============================================================ */
.ss-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.ss-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-copper);
}
.ss-hero-kicker svg { color: var(--accent-copper); flex-shrink: 0; }
.ss-hero-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-display);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-espresso);
}
.ss-hero-lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-oak);
  max-width: 58ch;
}

/* ============================================================
   Globe panel
   ============================================================ */
.ss-globe-panel {
  position: relative;
  margin: 20px 0 32px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #14100C 0%, #1F1712 55%, #0E0A07 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(245, 237, 221, 0.05);
  /* overflow visible so the globe tooltip can extend past the panel edges
     (otherwise it gets clipped by the rounded corners). The SVG sphere is
     sized to the stage so it doesn't visually escape. */
  overflow: visible;
  min-height: 420px;
  color: #F5EDDD;
}

/* Metrics strip */
.ss-globe-metrics {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 26px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(245, 237, 221, 0.08);
  font-family: var(--ff-sans);
  font-size: 13px;
  color: #8F8270;
}
.ss-globe-metric { display: inline-flex; align-items: baseline; gap: 6px; }
.ss-globe-metric b {
  font-family: var(--ff-sans);
  font-weight: 600;
  color: #F5EDDD;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.ss-globe-metric .sep { opacity: 0.5; margin: 0 2px; }
.ss-globe-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-breach);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ss-globe-live .pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-breach);
  animation: globe-live-pulse 1.6s ease-in-out infinite;
}
@keyframes globe-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(1.4); }
}

/* Chrome overlay (title + legend) */
.ss-globe-chrome {
  position: absolute;
  top: 74px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 3;
  pointer-events: none;
}
.ss-globe-title {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8F8270;
}
.ss-globe-title b { color: var(--accent-copper); font-weight: 600; }
.ss-globe-legend {
  display: flex;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #8F8270;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ss-globe-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Stage + SVG */
.ss-globe-stage {
  position: relative;
  width: 100%;
  height: 460px;
}
.ss-globe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pins — rendered inside the SVG so they track the map through cropping */
.ss-pin { cursor: pointer; }
.ss-pin .pin-hit { pointer-events: all; }  /* hit target only; keeps visual pin small */
.ss-pin .pin-core { fill: #B91C1C; }
.ss-pin .pin-ping {
  fill: none;
  stroke: #B91C1C;
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: ping-svg 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping-svg {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(5.6); opacity: 0;    }
}
.ss-pin.sev-5 .pin-core { fill: #B91C1C; }
.ss-pin.sev-5 .pin-ping { stroke: #B91C1C; }
.ss-pin.sev-4 .pin-core { fill: #C2410C; }
.ss-pin.sev-4 .pin-ping { stroke: #C2410C; }
.ss-pin.sev-3 .pin-core { fill: #D97757; }
.ss-pin.sev-3 .pin-ping { stroke: #D97757; }

/* Low-confidence pins (source-inferred) — dashed ring, slower pulse */
.ss-pin.low-conf .pin-ping {
  stroke-dasharray: 3 3;
  animation-duration: 4.5s;
  opacity: 0.65;
}
.ss-pin.low-conf .pin-core { opacity: 0.75; }

.ss-pin:hover .pin-core {
  transform: scale(1.35);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.15s ease;
}

/* Cluster count badge */
.ss-pin .pin-badge circle {
  fill: rgba(14, 10, 7, 0.94);
  stroke: #F5EDDD;
  stroke-width: 1;
}
.ss-pin .pin-badge text {
  fill: #F5EDDD;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
}

/* Always-on ANZ monitoring markers — subtle, non-interactive */
.ss-pin-monitor { pointer-events: none; }
.ss-pin-monitor .pin-core { fill: rgba(185, 28, 28, 0.45); }
.ss-pin-monitor .pin-ping { stroke: rgba(185, 28, 28, 0.45); stroke-width: 1; animation-duration: 3.6s; }

/* Radar */
.ss-radar-beam {
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-sweep 5s linear infinite;
}
@keyframes radar-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ss-radar-ring       { animation: radar-ring 4s ease-in-out infinite; }
.ss-radar-ring.r2    { animation-delay: 1s; }
.ss-radar-ring.r3    { animation-delay: 2s; }
@keyframes radar-ring { 0%, 100% { opacity: .2; } 50% { opacity: .6; } }

/* Tooltip — hover-safe, scrollable for clusters with multiple items */
.ss-globe-tooltip {
  position: absolute;
  background: rgba(14, 10, 7, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 237, 221, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 280px;
  max-width: 360px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  pointer-events: auto;           /* scrolling requires interaction */
  z-index: 10;
  transform: translate(-50%, calc(-100% - 16px));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}
.ss-globe-tooltip::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--tt-arrow-x, 0px));
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(14, 10, 7, 0.94);
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(245, 237, 221, 0.1);
  border-bottom: 1px solid rgba(245, 237, 221, 0.1);
}
/* Flipped: tooltip sits below the pin, arrow on top pointing up */
.ss-globe-tooltip.tt-below {
  transform: translate(-50%, 16px);
}
.ss-globe-tooltip.tt-below::after {
  top: -6px;
  bottom: auto;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(245, 237, 221, 0.1);
  border-top: 1px solid rgba(245, 237, 221, 0.1);
}
.ss-globe-tooltip .tt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ss-globe-tooltip .tt-loc {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #F5EDDD;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ss-globe-tooltip .tt-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-copper);
  letter-spacing: 0.05em;
}
.ss-globe-tooltip .tt-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -2px;
}
/* Pager — prev/next across a paginated cluster */
.ss-globe-tooltip .tt-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 237, 221, 0.08);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: #BFB29B;
}
.ss-globe-tooltip .tt-pg-btn {
  background: rgba(245, 237, 221, 0.05);
  border: 1px solid rgba(245, 237, 221, 0.12);
  color: #F5EDDD;
  border-radius: 4px;
  width: 24px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ss-globe-tooltip .tt-pg-btn:hover:not([disabled]) {
  background: rgba(245, 237, 221, 0.1);
  border-color: rgba(245, 237, 221, 0.25);
}
.ss-globe-tooltip .tt-pg-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}
.ss-globe-tooltip .tt-pg-range {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.ss-globe-tooltip .tt-item {
  display: block;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(245, 237, 221, 0.04);
  text-decoration: none;
  transition: background 0.12s ease;
}
.ss-globe-tooltip .tt-item:hover {
  background: rgba(245, 237, 221, 0.09);
}
.ss-globe-tooltip .tt-item-title {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  color: #F5EDDD;
  line-height: 1.35;
  margin-bottom: 5px;
  font-weight: 500;
}
.ss-globe-tooltip .tt-item-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: #8F8270;
  letter-spacing: 0.03em;
}
.ss-globe-tooltip .tt-item-source { color: #BFB29B; }
.ss-globe-tooltip .tt-sev {
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 1px 6px;
  border-radius: 3px;
}
.ss-globe-tooltip .tt-sev.crit { color: #FCA5A5; background: rgba(185,28,28,.22); border: 1px solid rgba(185,28,28,.5); }
.ss-globe-tooltip .tt-sev.high { color: #FDBA74; background: rgba(194,65,12,.22); border: 1px solid rgba(194,65,12,.5); }
.ss-globe-tooltip .tt-sev.med  { color: #FCD34D; background: rgba(217,119,87,.22); border: 1px solid rgba(217,119,87,.5); }
.ss-globe-tooltip .tt-conf {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 237, 221, 0.08);
  font-size: 10px;
  color: #8F8270;
  font-style: italic;
}

/* Footer */
.ss-globe-footer {
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 3;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: #8F8270;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-globe-footer b { color: var(--accent-copper); font-weight: 600; }
.ss-globe-footer .countdown { font-variant-numeric: tabular-nums; }

/* ============================================================
   Feed tabs
   ============================================================ */
.feed-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.feed-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-dust);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--dur-micro) var(--ease-snap),
              border-color var(--dur-micro);
}
.feed-tab:hover { color: var(--ink-espresso); }
.feed-tab[aria-selected="true"] {
  color: var(--ink-espresso);
  border-bottom-color: var(--accent-copper);
}
.feed-tab.tab-anz[aria-selected="true"] {
  color: var(--accent-copper);
  border-bottom-color: var(--accent-copper);
}
.feed-tab.tab-global[aria-selected="true"] {
  color: var(--muted-dust);
  border-bottom-color: var(--muted-dust);
}
.feed-tab .tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.75;
}
.feed-tab .tab-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted-dust);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.filter-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dust);
}
.filter-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px;
}
.filter-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-oak);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-snap),
              color var(--dur-micro) var(--ease-snap);
}
.filter-chip:hover { color: var(--ink-espresso); }
.filter-chip[aria-pressed="true"] {
  background: var(--accent-copper);
  color: #FFF8EE;
}
.filter-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-oak);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 26px 4px 11px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-dust) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--muted-dust) 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.filter-select:hover { border-color: var(--border-strong); }
.filter-reset {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-dust);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  cursor: pointer;
  margin-left: auto;
}
.filter-reset:hover { color: var(--accent-copper); border-color: var(--accent-copper); }

/* ============================================================
   Section jumpbar
   ============================================================ */
.section-jumpbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0 20px;
}
.section-jumpbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-oak);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-snap),
              background var(--dur-micro) var(--ease-snap);
}
.section-jumpbar a:hover { border-color: var(--border-strong); background: var(--surface-2); }
.section-jumpbar .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  background: currentColor;
}
.section-jumpbar .jcnt {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--muted-dust);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}
.section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.accent-stripe {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ink-espresso);
  align-self: center;
  flex-shrink: 0;
}
.section-header h2 {
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-espresso);
}
.section-header .count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted-dust);
  font-variant-numeric: tabular-nums;
}
.section-header .section-pour {
  margin-left: auto;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 12px;
  color: var(--muted-dust);
}

/* Section colour theming */
.section[data-slug="anz"]    .accent-stripe { background: var(--accent-copper); }
.section[data-slug="anz"]    .section-header h2 { color: var(--accent-copper); }
.section[data-slug="global"] .accent-stripe { background: var(--muted-dust); }
.section[data-slug="global"] .section-header h2 { color: var(--muted-dust); }

/* Legacy topic section colours kept for timeline/archive pages */
.section[data-slug="breach"]               .accent-stripe { background: var(--c-breach); }
.section[data-slug="breach"]               .section-header h2 { color: var(--c-breach); }
.section[data-slug="framework-regulatory"] .accent-stripe { background: var(--c-framework); }
.section[data-slug="framework-regulatory"] .section-header h2 { color: var(--c-framework); }
.section[data-slug="ai-governance"]        .accent-stripe { background: var(--c-ai); }
.section[data-slug="ai-governance"]        .section-header h2 { color: var(--c-ai); }
.section[data-slug="threat-intel"]         .accent-stripe { background: var(--c-threat); }
.section[data-slug="threat-intel"]         .section-header h2 { color: var(--c-threat); }
.section[data-slug="sector-watch"]         .accent-stripe { background: var(--c-sector); }
.section[data-slug="sector-watch"]         .section-header h2 { color: var(--c-sector); }
.section[data-slug="commentary"]           .accent-stripe { background: var(--c-commentary); }
.section[data-slug="commentary"]           .section-header h2 { color: var(--c-commentary); }
.section[data-slug="ai"]                    .accent-stripe { background: var(--c-ai); }
.section[data-slug="ai"]                    .section-header h2 { color: var(--c-ai); }
.section[data-slug="industry"]             .accent-stripe { background: var(--c-commentary); }
.section[data-slug="industry"]             .section-header h2 { color: var(--c-commentary); }

/* Jumpbar dot colours (legacy class names) */
.jump-breach     { color: var(--c-breach); }
.jump-framework  { color: var(--c-framework); }
.jump-ai         { color: var(--c-ai); }
.jump-threat     { color: var(--c-threat); }
.jump-sector     { color: var(--c-sector); }
.jump-commentary { color: var(--c-commentary); }

/* ============================================================
   Subsections (topic groups within ANZ / Global)
   ============================================================ */
.subsections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.subsection {
  scroll-margin-top: 80px;
}
.subsection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.sub-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.subsection-header h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sub-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--muted-dust);
  margin-left: 2px;
}

/* ============================================================
   Cards
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  align-items: stretch;
}
.card-list { display: flex; flex-direction: column; gap: 8px; }

.card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-pour),
              box-shadow var(--dur-micro) var(--ease-pour),
              border-color var(--dur-micro);
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: 2px;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-espresso);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted-dust);
}
.card-meta .dot-sep { opacity: 0.5; }
.card-source { color: var(--ink-oak); font-weight: 500; }
.card-summary-wrap { margin: 6px 0 2px; }
.card-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-oak);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-summary-wrap.expanded .card-summary {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.read-more-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-copper-ink, var(--accent-copper));
  cursor: pointer;
}
.read-more-btn:hover { text-decoration: underline; }
.read-more-btn:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Feed badge
   ============================================================ */
.feed-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.feed-badge-compliance {
  color: var(--c-framework);
  background: color-mix(in srgb, var(--c-framework) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-framework) 25%, var(--border));
}
.feed-badge-intel {
  color: var(--c-threat);
  background: color-mix(in srgb, var(--c-threat) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-threat) 25%, var(--border));
}

/* ============================================================
   Relevance badge
   ============================================================ */
.relevance-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.relevance-badge[data-score="5"] {
  color: var(--c-breach);
  background: color-mix(in srgb, var(--c-breach) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-breach) 30%, var(--border));
}
.relevance-badge[data-score="4"] {
  color: var(--c-threat);
  background: color-mix(in srgb, var(--c-threat) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-threat) 30%, var(--border));
}
.relevance-badge[data-score="3"],
.relevance-badge[data-score="2"],
.relevance-badge[data-score="1"] {
  color: var(--muted-dust);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ============================================================
   Tag chips
   ============================================================ */
.tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag-chip {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted-dust);
}
.tag-chip[data-tag="breach"]               { color: var(--c-breach);     background: color-mix(in srgb, var(--c-breach) 10%, transparent);     border-color: color-mix(in srgb, var(--c-breach) 25%, var(--border)); }
.tag-chip[data-tag="framework-regulatory"] { color: var(--c-framework);  background: color-mix(in srgb, var(--c-framework) 10%, transparent);  border-color: color-mix(in srgb, var(--c-framework) 25%, var(--border)); }
.tag-chip[data-tag="ai-governance"]        { color: var(--c-ai);         background: color-mix(in srgb, var(--c-ai) 10%, transparent);         border-color: color-mix(in srgb, var(--c-ai) 25%, var(--border)); }
.tag-chip[data-tag="threat-intel"]         { color: var(--c-threat);     background: color-mix(in srgb, var(--c-threat) 10%, transparent);     border-color: color-mix(in srgb, var(--c-threat) 25%, var(--border)); }
.tag-chip[data-tag="commentary"]           { color: var(--c-commentary); background: color-mix(in srgb, var(--c-commentary) 10%, transparent); border-color: color-mix(in srgb, var(--c-commentary) 25%, var(--border)); }
.tag-chip[data-tag="ai"]                    { color: var(--c-ai);         background: color-mix(in srgb, var(--c-ai) 10%, transparent);         border-color: color-mix(in srgb, var(--c-ai) 25%, var(--border)); }
.tag-chip[data-tag="industry"]             { color: var(--c-commentary); background: color-mix(in srgb, var(--c-commentary) 10%, transparent); border-color: color-mix(in srgb, var(--c-commentary) 25%, var(--border)); }
.tag-chip[data-tag="government"],
.tag-chip[data-tag="health"],
.tag-chip[data-tag="higher-education"]     { color: var(--c-sector);     background: color-mix(in srgb, var(--c-sector) 10%, transparent);     border-color: color-mix(in srgb, var(--c-sector) 25%, var(--border)); }

/* ============================================================
   Load more
   ============================================================ */
.load-more-wrap { text-align: center; padding: 20px 0 0; }
.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--surface);
  color: var(--ink-oak);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--dur-short) var(--ease-pour);
}
.load-more-btn:hover {
  background: var(--surface-2);
  color: var(--ink-espresso);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Sparkline
   ============================================================ */
.sparkline-wrap {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.sparkline-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-dust);
  margin-bottom: 8px;
}
.sparkline-svg { width: 100%; height: 48px; display: block; overflow: visible; }
.sparkline-bar { fill: var(--accent-copper); opacity: 0.55; transition: opacity 120ms; }
.sparkline-bar:hover { opacity: 1; }
.sparkline-today { fill: var(--c-breach); opacity: 0.85; }
.sparkline-axis { font-size: 9px; fill: var(--muted-dust); font-family: var(--ff-mono); }

/* ============================================================
   Forms
   ============================================================ */
.form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.input, .select, .button {
  font: 400 13px var(--ff-sans);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-espresso);
  padding: 9px 12px;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.input { flex: 1; min-width: 240px; }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent-copper);
  box-shadow: var(--glow-copper);
}
.button {
  background: var(--accent-copper);
  color: var(--bg-paper);
  border-color: var(--accent-copper);
  font-weight: 600;
  cursor: pointer;
  padding: 9px 18px;
  transition: all var(--dur-short) var(--ease-pour);
}
.button:hover {
  background: var(--accent-copper-ink);
  border-color: var(--accent-copper-ink);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Status table
   ============================================================ */
.status-line {
  font-size: var(--fs-meta);
  color: var(--muted-dust);
  margin-bottom: 16px;
  font-family: var(--ff-mono);
}
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-dust);
  background: var(--surface-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.table tr:last-child td { border-bottom: none; }
.table tr.row-err td { background: color-mix(in srgb, var(--err) 5%, transparent); }
.table tr.row-disabled td { color: var(--muted-dust); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.pill-ok    { color: var(--ok);   background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill-err   { color: var(--err);  background: color-mix(in srgb, var(--err) 12%, transparent); }
.pill-never { color: var(--muted-dust); background: var(--surface-2); }
.pill-disabled { color: var(--muted-dust); background: var(--surface-2); opacity: 0.9; }

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
  position: relative;
  padding-left: 26px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-day {
  position: relative;
  margin-bottom: 28px;
}
.timeline-day::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--accent-copper);
  box-shadow: 0 0 0 4px var(--bg-crema);
}
.timeline-day-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding: 4px 0 5px;
}
.timeline-day-header h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink-espresso);
}
.timeline-day-header .count {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--muted-dust);
}
.timeline-items { display: flex; flex-direction: column; gap: 8px; }

/* ============================================================
   Empty states
   ============================================================ */
.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted-dust);
  font-size: 14px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.empty b {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-oak);
  margin-bottom: 6px;
}
.never { color: var(--muted-dust); font-style: italic; }

/* ============================================================
   Frameworks page
   ============================================================ */
.fw-block {
  margin: 24px 0 28px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.fw-block-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.fw-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.fw-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink-espresso);
  margin: 0;
}
.fw-cadence {
  color: var(--muted-dust);
  font-size: 12px;
  font-style: italic;
  font-family: var(--ff-display);
}
.fw-fullname {
  margin-top: 3px;
  color: var(--muted-dust);
  font-size: 13px;
}
.fw-current {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-oak);
  font-family: var(--ff-mono);
}
.fw-current strong { font-weight: 600; }

.fw-timeline {
  list-style: none;
  padding: 0 0 0 18px;
  position: relative;
}
.fw-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.fw-release {
  position: relative;
  padding: 2px 0 18px 14px;
}
.fw-release::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--accent-copper);
  box-sizing: border-box;
}
.fw-release[data-change="major"]::before       { border-color: var(--c-breach); }
.fw-release[data-change="amendment"]::before   { border-color: var(--c-framework); }
.fw-release[data-change="consultation"]::before { border-color: var(--muted-dust); }
.fw-release[data-change="policy"]::before      { border-color: var(--c-ai); }

.fw-release-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.fw-release-date { font-family: var(--ff-mono); font-weight: 600; color: var(--ink-espresso); }
.fw-release-version {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-copper) 12%, transparent);
  color: var(--accent-copper);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
}
.fw-release-ago { color: var(--muted-dust); font-family: var(--ff-mono); font-size: 11px; }

.fw-release-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-espresso);
  margin: 2px 0 5px;
  line-height: 1.35;
}
.fw-release-summary {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-oak);
  max-width: 68ch;
}
.fw-release-impact {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent-copper) 6%, transparent);
  border-left: 3px solid var(--accent-copper);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-oak);
}
.fw-impact-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-copper);
  font-weight: 700;
  margin-bottom: 3px;
}
.fw-release-footer { margin-top: 4px; }
.fw-release-link {
  font-size: 13px;
  color: var(--accent-copper);
  text-decoration: none;
  font-weight: 500;
}
.fw-release-link:hover { text-decoration: underline; }

.fw-older-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted-dust);
  font-style: italic;
}
.fw-scope-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-ai) 12%, transparent);
  color: var(--c-ai);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fw-scope-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 4px;
  color: var(--muted-dust);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fw-scope-divider::before,
.fw-scope-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.fw-deep-dive-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-copper);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent-copper) 35%, transparent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fw-deep-dive-link:hover {
  background: color-mix(in srgb, var(--accent-copper) 10%, transparent);
  border-color: var(--accent-copper);
}

/* ============================================================
   Framework deep-dive pages (per-pillar, M2 → M3 breakdown)
   ============================================================ */
.dd-header { margin-bottom: 24px; }
.dd-kicker {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-copper);
  margin-bottom: 6px;
}
.dd-breadcrumb {
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--muted-dust);
}
.dd-breadcrumb a {
  color: var(--accent-copper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dd-breadcrumb a:hover { border-bottom-color: var(--accent-copper); }
.dd-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--accent-copper);
  text-decoration: none;
}
.dd-source:hover { text-decoration: underline; }

.dd-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 32px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.dd-toc-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dust);
  margin-right: 6px;
  align-self: center;
}
.dd-toc a {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-oak);
  text-decoration: none;
  white-space: nowrap;
}
.dd-toc a:hover {
  border-color: var(--accent-copper);
  color: var(--accent-copper);
}

.dd-pillar {
  margin-bottom: 44px;
  scroll-margin-top: 80px;
}
.dd-pillar-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.dd-pillar-num {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-copper);
  letter-spacing: 0.04em;
}
.dd-pillar-title {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink-espresso);
  margin: 0;
  letter-spacing: -0.01em;
}

.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dd-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.dd-cell-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dust);
  margin-bottom: 10px;
}
.dd-cell-m3 {
  background: color-mix(in srgb, var(--accent-copper) 4%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-copper) 22%, var(--border));
}
.dd-cell-m3 .dd-cell-label { color: var(--accent-copper); }
.dd-cell ul,
.dd-details-body ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-oak);
}
.dd-cell li { margin-bottom: 5px; }
.dd-cell li:last-child { margin-bottom: 0; }

.dd-why,
.dd-zs-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.dd-why { margin-bottom: 14px; }
.dd-why p { margin: 0; font-size: 14px; color: var(--ink-oak); line-height: 1.6; }

.dd-zs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.dd-zs-cell p { margin: 0; font-size: 13px; color: var(--ink-oak); line-height: 1.6; }
.dd-zs-cell p + p { margin-top: 8px; }
.dd-zs-cell-cant {
  background: color-mix(in srgb, var(--border-inset) 55%, var(--surface));
  border-color: var(--border-inset);
}
.dd-zs-cell-cant .dd-cell-label { color: var(--ink-mid); }

.dd-details {
  background: var(--surface-2);
  border: 1px solid var(--border-inset);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 6px;
}
.dd-details summary {
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dust);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dd-details summary::-webkit-details-marker { display: none; }
.dd-details summary::after {
  content: "+";
  font-family: var(--ff-mono);
  font-size: 15px;
  color: var(--muted-dust);
}
.dd-details[open] summary::after { content: "−"; }
.dd-details[open] summary { color: var(--ink-oak); border-bottom: 1px solid var(--border); }
.dd-details-body {
  padding: 12px 16px 14px;
  background: var(--surface);
}
.dd-details-body ul { font-size: 12.5px; color: var(--ink-oak); }
.dd-details-body li { margin-bottom: 3px; }

/* ============================================================
   Story cluster — chip row + popover
   Shared by /index and /preview-stories.
   ============================================================ */
.story-card .card-source-count { font-weight: 500; color: var(--ink-oak); }

.story-sources {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.story-sources-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted-dust);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.story-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.story-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-oak);
  cursor: pointer;
  transition: border-color var(--dur-micro), background var(--dur-micro), transform var(--dur-micro);
}
.story-chip:hover,
.story-chip:focus-visible,
.story-chip[aria-expanded="true"] {
  border-color: var(--accent-copper);
  background: color-mix(in srgb, var(--accent-copper) 6%, var(--surface));
  outline: none;
  transform: translateY(-1px);
}
.story-chip.is-primary { background: var(--surface-2); }
.story-chip.has-update::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-brass);
  box-shadow: 0 0 0 2px var(--surface);
}
.story-chip.more-chip {
  color: var(--muted-dust);
  font-weight: 600;
}
.story-updated {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--muted-dust);
}

.story-popover {
  position: fixed;
  z-index: 60;
  min-width: 260px;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--ink-espresso);
  color: var(--bg-crema);
  border: 1px solid #2A1F17;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  pointer-events: auto;
  display: none;
}
.story-popover::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--pop-arrow-x, 0px));
  bottom: -6px;
  width: 10px; height: 10px;
  background: var(--ink-espresso);
  border-right: 1px solid #2A1F17;
  border-bottom: 1px solid #2A1F17;
  transform: translateX(-50%) rotate(45deg);
}
.story-popover.pop-below {
  transform: translate(-50%, 0);
  margin-top: 10px;
}
.story-popover.pop-below::after {
  top: -6px;
  bottom: auto;
  border: none;
  border-top: 1px solid #2A1F17;
  border-left: 1px solid #2A1F17;
}
.pop-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BFB29B;
  margin-bottom: 6px;
}
.pop-source-time { color: #8B7D6E; font-weight: 500; }
.pop-update-pill {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 700;
  color: #1C140F;
  background: var(--accent-brass);
  letter-spacing: 0.06em;
}
.pop-title {
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-crema);
  line-height: 1.35;
  margin-bottom: 6px;
}
.pop-snippet {
  font-family: var(--ff-sans);
  font-size: 12px;
  line-height: 1.5;
  color: #D0C4AE;
  margin-bottom: 8px;
}
.pop-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-brass);
  text-decoration: none;
}
.pop-link:hover { color: #E5A959; }
.pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.pop-list li { border-top: 1px solid rgba(245,237,221,0.08); padding: 6px 0; }
.pop-list li:first-child { border-top: none; padding-top: 0; }
.pop-list a {
  display: block;
  color: var(--bg-crema);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 12px;
}
.pop-list .li-outlet {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: #BFB29B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pop-list .li-time { color: var(--muted-soft); font-size: 11px; }

.story-title-link { text-decoration: none; color: inherit; }
.story-title-link:hover .card-title { color: var(--accent-copper-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .site-header-inner { padding: 0 14px; gap: 8px; flex-wrap: wrap; }
  .brand-sub { display: none; }
  .brew-pill { display: none; }
  .container, .container-narrow { padding: 18px 14px 60px; }
  .ss-hero-title { font-size: 1.9rem; }
  .card-grid { grid-template-columns: 1fr; }
  .ss-globe-stage { height: 340px; }
  .section-header .section-pour { display: none; }
  .form-row { flex-direction: column; }
  .form-row .button { width: 100%; }
  .dd-grid, .dd-zs { grid-template-columns: 1fr; }
  .dd-toc { padding: 10px 12px; }
}

/* ===========================================================
   WEEKLY DIGEST CARD — Phase 5 Opus synthesis
   Shared by /preview-digest, /weekly, and the inline-expanded
   teaser on /. All tokens via var(--…); no colour literals.
   =========================================================== */
.ss-digest {
  position: relative;
  margin: 0 0 28px;
  background: var(--bg-paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ss-digest::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-copper), var(--accent-brass));
}

/* Draft banner — review view only. */
.ss-digest-draftbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  background: rgba(180, 83, 9, 0.10);
  border-bottom: 1px solid rgba(180, 83, 9, 0.28);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--warn);
}
body.mode-review .ss-digest-draftbar { display: flex; }
.ss-digest-draftbar .pulse-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--warn); flex-shrink: 0;
}

/* Header band. */
.ss-digest-head {
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.ss-digest-kickerline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.ss-digest-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-copper);
}
.ss-digest-range { font-family: var(--ff-mono); font-size: 11px; color: var(--muted-dust); }
.ss-digest-statuspill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.status-approved { background: rgba(21, 128, 61, 0.12); color: var(--ok); }
.status-draft    { background: rgba(180, 83, 9, 0.14); color: var(--warn); display: none; }
body.mode-review .status-approved { display: none; }
body.mode-review .status-draft    { display: inline-flex; }

.ss-digest-title {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink-espresso);
  margin-bottom: 8px;
}
.ss-digest-lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-oak);
  max-width: 72ch;
  margin-bottom: 12px;
}
.ss-digest-byline { font-family: var(--ff-mono); font-size: 11px; color: var(--muted-dust); line-height: 1.6; }
.ss-digest-byline .b-approved { color: var(--ok); }
.byline-draft { display: none; }
body.mode-review .byline-approved { display: none; }
body.mode-review .byline-draft    { display: block; }

/* The lead — one fully-written thread. */
.ss-digest-lead {
  margin: 16px 22px 4px;
  padding: 16px 18px;
  background: rgba(178, 90, 43, 0.055);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-copper);
  border-radius: var(--r-md);
}
.ss-lead-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-copper);
  margin-bottom: 7px;
}
.ss-lead-label::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-copper);
}
.ss-lead-title {
  font-family: var(--ff-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--ink-espresso);
  line-height: 1.3;
  margin-bottom: 7px;
}
.ss-lead-text {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-oak);
  margin-bottom: 12px;
}

/* Source back-links — shared by the lead and expanded thread rows. */
.ss-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ss-sources-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dust);
  margin-right: 1px;
}
.ss-src-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 11.5px;
  color: var(--ink-oak);
  text-decoration: none;
  transition: border-color var(--dur-micro), background var(--dur-micro);
}
.ss-src-link:hover {
  border-color: var(--accent-copper);
  background: var(--surface-2);
  color: var(--accent-copper-ink);
}
.ss-src-link .src-outlet {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dust);
}
.ss-src-link:hover .src-outlet { color: var(--accent-copper); }
.ss-src-link .src-arrow { color: var(--muted-soft); }

/* Threaded list. */
.ss-threadlist { padding: 14px 22px 4px; }
.ss-threadlist-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.ss-tl-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.ss-tl-count { font-family: var(--ff-mono); font-size: 11px; color: var(--muted-dust); }
.ss-tl-expand {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-copper);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
}
.ss-tl-expand:hover { text-decoration: underline; }

.ss-trow { border-bottom: 1px solid var(--border); }
.ss-trow:last-child { border-bottom: none; }
.ss-trow-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.ss-trow-head:hover .ss-trow-title { color: var(--accent-copper-ink); }
.ss-trow-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  color: var(--muted-dust);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ss-trow.open .ss-trow-num {
  background: var(--accent-copper);
  border-color: var(--accent-copper);
  color: #fff;
}
.ss-trow-main { flex: 1; min-width: 0; }
.ss-trow-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-espresso);
  line-height: 1.35;
}
.ss-trow-teaser {
  display: block;
  font-size: 12.5px;
  color: var(--muted-dust);
  line-height: 1.5;
  margin-top: 3px;
}
.ss-trow.open .ss-trow-teaser { display: none; }
.ss-trow-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 2px;
}
.ss-trow-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--muted-dust);
  white-space: nowrap;
}
.ss-trow-chev {
  color: var(--muted-soft);
  font-size: 11px;
  transition: transform var(--dur-short) var(--ease-snap);
}
.ss-trow.open .ss-trow-chev { transform: rotate(180deg); }

.ss-trow-body { display: none; padding: 0 0 15px 34px; }
.ss-trow.open .ss-trow-body { display: block; }
.ss-trow-text {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-oak);
  margin-bottom: 10px;
}

/* Read-more clamp — applied to .ss-lead-text and .ss-trow-text.
   The body text clamps to N lines until the reader clicks "Read more". */
.has-readmore {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-lead-text.has-readmore   { -webkit-line-clamp: 4; }
.ss-trow-text.has-readmore   { -webkit-line-clamp: 2; }
.has-readmore.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-copper);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.readmore-btn:hover { text-decoration: underline; }

/* Review action bar — review view only. */
.ss-digest-review {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
body.mode-review .ss-digest-review { display: flex; }
.ss-digest-review .review-hint {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--muted-dust);
  margin-right: auto;
}
.btn {
  font-family: var(--ff-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-oak);
  cursor: pointer;
}
.btn-primary { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ghost { background: transparent; }

/* Footer. */
.ss-digest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ss-digest-foot .foot-meta { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted-dust); }
.ss-digest-foot .foot-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ss-digest-foot .foot-link {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-copper);
  text-decoration: none;
}
.ss-digest-foot .foot-link:hover { text-decoration: underline; }
.ss-digest-foot .foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-copper);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color var(--dur-micro), background var(--dur-micro);
}
.ss-digest-foot .foot-chip:hover {
  border-color: var(--accent-copper);
  background: var(--bg-paper);
}

/* "View on its own page" link — visible only when the card is
   inline-expanded on the homepage. Hidden on /preview-digest and
   /weekly via body classes set on those pages. */
.foot-link-own { display: inline-flex; }
body.preview-mock .foot-link-own,
body.weekly-permalink .foot-link-own { display: none; }

/* ===========================================================
   Collapsed teaser — homepage variant.
   A one-row button that, on click, expands inline to reveal
   the full .ss-digest card (markup injected by index.html JS).
   =========================================================== */
.ss-digest-teaser {
  position: relative;
  margin: 0 0 28px;
  background: var(--bg-paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ss-digest-teaser::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-copper), var(--accent-brass));
}
.ss-digest-teaser-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--ff-sans);
}
.ss-digest-teaser-toggle:hover { background: var(--surface-2); }
.ss-digest-teaser-toggle .ss-digest-kicker { flex-shrink: 0; }
.ss-digest-teaser-toggle .ss-digest-range  { flex-shrink: 0; }
.ss-digest-teaser-title {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-espresso);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-digest-teaser-chev {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--accent-copper);
  transition: transform var(--dur-short) var(--ease-snap);
}
.ss-digest-teaser[aria-expanded="true"] .ss-digest-teaser-chev { transform: rotate(180deg); }
.ss-digest-teaser-body { border-top: 1px solid var(--border); }
/* When expanded, the embedded .ss-digest sheds its own outer chrome
   so the teaser shell carries the border instead. */
.ss-digest-teaser-body .ss-digest {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ss-digest-teaser-body .ss-digest::before { display: none; }

@media (max-width: 720px) {
  .ss-digest-title { font-size: 1.35rem; }
  .ss-digest-lead { margin-left: 14px; margin-right: 14px; }
  .ss-trow-teaser { display: none; }
  .ss-digest-teaser-title { font-size: 0.95rem; white-space: normal; }
}