:root {
  color-scheme: dark;
  --page: #07101d;
  --panel: #0d1828;
  --panel-2: #111f33;
  --ink: #f7f9fc;
  --muted: #9aa9bc;
  --line: rgba(148, 163, 184, 0.17);
  --accent: #60a5fa;
  --accent-2: #2dd4bf;
  --warm: #f7c66a;
  --max: 1180px;
  --blog-desktop-topbar-height: 74px;
  --blog-desktop-tabs-height: 46px;
  --blog-sticky-header-height: calc(var(--blog-desktop-topbar-height) + var(--blog-desktop-tabs-height));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; isolation: isolate; background: var(--page); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; }
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.skipLink { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 13px; border-radius: 8px; background: white; color: #07101d; transform: translateY(-150%); }
.skipLink:focus { transform: translateY(0); }
#articles:focus { outline: none; }

.siteHeader { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid var(--line); background: rgba(7, 16, 29, 0.88); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); letter-spacing: -0.02em; }
/* Badge sizing targets .brandMark, never a bare `span`: .brandCopy is also a
   direct span child, and sizing it collapsed the wordmark to a 36px box. */
.brand > .brandMark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 10px; background: linear-gradient(145deg, rgba(96, 165, 250, 0.19), rgba(45, 212, 191, 0.08)); color: #dbeafe; font: 800 12px/1 var(--font-display); letter-spacing: 0.08em; }
.siteHeader nav, footer nav { display: flex; align-items: center; gap: 8px; }
.siteHeader nav a { padding: 8px 11px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.siteHeader nav a:hover, .siteHeader nav a:focus-visible, .siteHeader nav a.active { background: rgba(148, 163, 184, 0.08); color: var(--ink); }
.siteHeader nav .appLink { margin-left: 5px; border: 1px solid rgba(96, 165, 250, 0.28); background: rgba(96, 165, 250, 0.1); color: #dbeafe; }

main { overflow: hidden; }
.hero { position: relative; max-width: var(--max); margin: 0 auto; padding: 104px 24px 84px; text-align: center; }
.heroGlow { position: absolute; inset: -160px 10% auto; height: 490px; z-index: -1; background: radial-gradient(circle, rgba(37, 99, 235, 0.2), transparent 65%); filter: blur(14px); }
.eyebrow { margin: 0 0 12px; color: var(--accent-2); font: 700 11px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.hero h1 { max-width: 880px; margin: 0 auto; font: 900 clamp(48px, 8vw, 90px)/0.98 var(--font-display); letter-spacing: -0.055em; }
.hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #bfdbfe, #67e8f9 58%, #99f6e4); -webkit-background-clip: text; background-clip: text; }
.heroCopy { max-width: 650px; margin: 24px auto 34px; color: #bcc8d7; font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }
.searchBar { max-width: 720px; margin: 0 auto; text-align: left; }
.searchBar > label { display: block; margin-bottom: 8px; color: #d9e2ee; font-size: 12px; font-weight: 700; }
.searchInputWrap { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border: 1px solid rgba(96, 165, 250, 0.28); border-radius: 14px; background: rgba(13, 24, 40, 0.92); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24); }
.searchInputWrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12), 0 20px 60px rgba(0, 0, 0, 0.24); }
.searchInputWrap > span { color: var(--accent); font: 28px/1 var(--font-display); transform: rotate(-18deg); }
.searchInputWrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.searchInputWrap input::placeholder { color: #718096; }
.searchInputWrap button, .textButton { border: 0; background: transparent; color: #93c5fd; font-size: 12px; font-weight: 700; }
.heroMeta { display: flex; justify-content: center; gap: 30px; margin-top: 26px; color: var(--muted); font-size: 12px; }
.heroMeta strong { color: var(--ink); }

.explore, .seriesSection, .storySection, .featuredStory, .editorialNote { max-width: var(--max); margin: 0 auto; padding: 56px 24px; }
.seriesSection { border-top: 1px solid var(--line); }
.seriesGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seriesCard { position: relative; display: flex; min-height: 250px; flex-direction: column; overflow: hidden; padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 31, 51, 0.74), rgba(8, 19, 33, 0.9)); }
.seriesCard::after { content: ""; position: absolute; inset: auto -35px -55px auto; width: 130px; height: 130px; border: 1px solid rgba(96, 165, 250, 0.12); border-radius: 50%; }
.seriesNumber { color: #607086; font: 700 11px/1 var(--font-mono); }
.seriesCard > p { margin: 23px 0 7px; color: var(--accent-2); font: 700 10px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.seriesCard h3 { margin: 0 0 10px; font: 800 22px/1.1 var(--font-display); letter-spacing: -0.025em; }
.seriesCard > div { color: var(--muted); font-size: 13px; }
.seriesCard button { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding: 16px 0 0; border: 0; background: transparent; color: #93c5fd; font-size: 11px; font-weight: 800; }
.explore { border-top: 1px solid var(--line); }
.sectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.sectionHeading h2, .editorialNote h2 { margin: 0; font: 800 clamp(27px, 4vw, 42px)/1.08 var(--font-display); letter-spacing: -0.035em; }
.sectionHeading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; }
.topicFilters { display: flex; flex-wrap: wrap; gap: 9px; }
.topicFilters button { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: rgba(13, 24, 40, 0.72); color: #b7c3d2; font-size: 12px; font-weight: 700; }
.topicFilters button:hover, .topicFilters button:focus-visible, .topicFilters button.active { border-color: rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.14); color: #eaf2ff; }
.filterRow { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.filterRow label { color: var(--muted); font-size: 12px; font-weight: 700; }
.filterRow select { min-width: 220px; padding: 9px 34px 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); }

.featuredStory { padding-top: 34px; }
.featuredCard { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); min-height: 390px; overflow: hidden; border: 1px solid rgba(96, 165, 250, 0.21); border-radius: 22px; background: linear-gradient(135deg, #101f34, #0b1626 62%); }
.featuredCard::after { content: "ADY"; position: absolute; right: -22px; bottom: -68px; color: rgba(96, 165, 250, 0.055); font: 900 220px/1 var(--font-display); letter-spacing: -0.1em; }
.featuredCopy { position: relative; z-index: 1; align-self: end; padding: clamp(30px, 5vw, 58px); }
.storyKicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent-2); font: 700 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.storyKicker span + span::before { content: "/"; margin-right: 10px; color: #53657b; }
.featuredCopy h2 { max-width: 700px; margin: 0 0 18px; font: 800 clamp(32px, 5vw, 56px)/1.03 var(--font-display); letter-spacing: -0.045em; }
.featuredCopy > p { max-width: 670px; margin: 0 0 25px; color: #b4c1d1; font-size: 16px; }
.readButton { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 11px 15px; background: #e8f2ff; color: #091321; font-weight: 800; }
.featuredIndex { position: relative; z-index: 1; display: grid; align-content: center; gap: 12px; padding: 42px; border-left: 1px solid var(--line); background: rgba(5, 12, 22, 0.3); }
.featuredIndex strong { color: #dce8f6; font: 700 13px/1.4 var(--font-display); }
.featuredIndex span { color: var(--muted); font-size: 12px; }

.storySection { padding-top: 72px; }
.activeFilters { display: flex; flex-wrap: wrap; gap: 8px; min-height: 1px; margin: -12px 0 20px; }
.filterPill { border: 1px solid rgba(45, 212, 191, 0.25); border-radius: 999px; padding: 5px 9px; background: rgba(45, 212, 191, 0.08); color: #99f6e4; font-size: 11px; }
.storyGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.storyCard { display: flex; min-height: 310px; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(155deg, rgba(17, 31, 51, 0.82), rgba(10, 21, 36, 0.9)); transition: transform 160ms ease, border-color 160ms ease; }
.storyCard:hover { transform: translateY(-3px); border-color: rgba(96, 165, 250, 0.36); }
.storyCard h3 { margin: 8px 0 12px; font: 800 23px/1.15 var(--font-display); letter-spacing: -0.025em; }
.storyCard p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.tagRow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tagRow span { border-radius: 999px; padding: 4px 8px; background: rgba(148, 163, 184, 0.08); color: #aebccd; font-size: 10px; font-weight: 700; }
.storyCard .cardFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.storyCard .cardFooter span { color: #718096; font-size: 11px; }
.storyCard .cardFooter button { border: 0; background: transparent; color: #93c5fd; font-size: 12px; font-weight: 800; }
.emptyState { padding: 70px 20px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; color: var(--muted); }
.emptyState > span { color: var(--accent); font-size: 48px; }
.emptyState h3 { margin: 6px 0; color: var(--ink); font: 800 24px var(--font-display); }
.emptyState p { margin: 0 auto 20px; max-width: 540px; }
.emptyState button { border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 8px; padding: 9px 13px; background: rgba(96, 165, 250, 0.11); color: #dbeafe; font-weight: 700; }

.editorialNote { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; margin-top: 50px; margin-bottom: 70px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.editorialPoints { display: grid; gap: 17px; }
.editorialPoints p { display: grid; grid-template-columns: 125px 1fr; gap: 20px; margin: 0; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.editorialPoints p:last-child { border: 0; }
.editorialPoints strong { color: #dbeafe; font: 700 13px var(--font-display); }
.editorialPoints span { color: var(--muted); font-size: 13px; }

.articleReader { position: fixed; z-index: 50; inset: 0; visibility: hidden; }
.articleReader.open { visibility: visible; }
.readerBackdrop { position: absolute; inset: 0; background: rgba(2, 6, 13, 0.76); opacity: 0; backdrop-filter: blur(5px); transition: opacity 180ms ease; }
.articleReader.open .readerBackdrop { opacity: 1; }
.readerPanel { position: absolute; top: 0; right: 0; width: min(760px, 100%); height: 100%; overflow: auto; padding: 72px clamp(24px, 6vw, 70px); background: #0a1422; box-shadow: -30px 0 80px rgba(0,0,0,.36); transform: translateX(100%); transition: transform 220ms ease; }
.articleReader.open .readerPanel { transform: translateX(0); }
.readerClose { position: absolute; top: 20px; right: 22px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--panel); color: var(--ink); }
.readerPanel h2 { margin: 6px 0 18px; font: 900 clamp(34px, 6vw, 56px)/1.04 var(--font-display); letter-spacing: -0.045em; }
.readerDeck { color: #b8c6d6; font-size: 18px; line-height: 1.7; }
.readerMeta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 36px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.readerSection { margin: 34px 0; }
.readerSection h3 { margin: 0 0 8px; font: 800 23px var(--font-display); }
.readerSection p { margin: 0; color: #acbacb; }
.readerNotice { margin-top: 42px; padding: 18px; border: 1px solid rgba(247, 198, 106, 0.2); border-radius: 10px; background: rgba(247, 198, 106, 0.07); color: #dbc894; font-size: 13px; }
body.readerOpen { overflow: hidden; }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; max-width: var(--max); min-height: 120px; margin: 0 auto; padding: 25px 24px; color: var(--muted); font-size: 11px; }
footer > p { margin: 0; text-align: center; }
footer nav { justify-content: flex-end; }
footer nav a { text-decoration: none; }

@media (max-width: 900px) {
  /* The old nav collapsed to just the active link here. The current tab strip
     is built to scroll (`overflow-x: auto`), so hiding 15 of 16 tabs only left
     phone readers with no way back into the app. Let it scroll instead. */
  .featuredCard { grid-template-columns: 1fr; }
  .seriesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featuredIndex { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 0; }
  .storyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorialNote { grid-template-columns: 1fr; gap: 35px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (max-width: 620px) {
  .siteHeader { min-height: 64px; padding-inline: 16px; }
  .brand strong { display: none; }
  .siteHeader nav .appLink { font-size: 12px; }
  .hero { padding: 72px 18px 58px; text-align: left; }
  .hero h1 { font-size: clamp(44px, 14vw, 64px); }
  .heroCopy { margin-left: 0; }
  .heroMeta { justify-content: flex-start; gap: 15px; overflow: auto; white-space: nowrap; }
  .explore, .seriesSection, .storySection, .featuredStory, .editorialNote { padding-right: 18px; padding-left: 18px; }
  .seriesGrid { grid-template-columns: 1fr; }
  .seriesCard { min-height: 220px; }
  .sectionHeading { display: block; }
  .sectionHeading > p { margin-top: 10px; }
  .filterRow { align-items: stretch; flex-wrap: wrap; }
  .filterRow select { flex: 1; min-width: 180px; }
  .featuredStory { padding-top: 20px; }
  .featuredCopy { padding: 29px 24px; }
  .featuredCopy h2 { font-size: 34px; }
  .featuredIndex { grid-template-columns: 1fr; padding: 24px; }
  .storyGrid { grid-template-columns: 1fr; }
  .storyCard { min-height: 275px; }
  .editorialPoints p { grid-template-columns: 1fr; gap: 5px; }
  footer { display: flex; align-items: flex-start; flex-direction: column; padding: 30px 18px; }
  footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Auto Draft Years app-theme alignment ---------------------------------- */
:root {
  --color-bg: #060d18;
  --color-bg-soft: #0a1322;
  --color-surface: #101a2b;
  --color-surface-elevated: #17243a;
  --color-surface-subtle: #0b1424;
  --color-text: #eef4ff;
  --color-text-strong: #f8fbff;
  --color-text-muted: #9aa9bd;
  --color-text-subtle: #7f90a7;
  --color-border: rgba(148, 163, 184, 0.22);
  --color-border-strong: rgba(191, 219, 254, 0.34);
  /* Type stacks mirror the app's --font-* tokens so headings, body copy and
     numeric readouts resolve to the same faces on both sides of the site. */
  --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo", "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;
  /* The app's War Room base ink, used by its nav chrome. */
  --chalk: #eaeef5;
  --chalk-muted: #8a94a6;
  --color-accent: #60a5fa;
  --color-accent-strong: #bfdbfe;
  --theme-glow-soft: rgba(96, 165, 250, 0.14);
  --topbar-bg: linear-gradient(180deg, rgba(12, 22, 40, 0.96), rgba(7, 14, 26, 0.92));
  --tabs-bg: linear-gradient(180deg, rgba(9, 17, 31, 0.92), rgba(7, 14, 26, 0.86));
  --brand-grad: linear-gradient(135deg, #60a5fa 0%, #818cf8 55%, #38bdf8 100%);
  --page: var(--color-bg);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-elevated);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-2: var(--color-accent-strong);
  --max: 1500px;
}

body[data-color-theme="green"] { --color-bg:#06130f; --color-bg-soft:#0a1f18; --color-surface:#10251e; --color-surface-elevated:#18382b; --color-surface-subtle:#0a1813; --color-border:rgba(74,222,128,.18); --color-border-strong:rgba(134,239,172,.34); --color-accent:#22c55e; --color-accent-strong:#86efac; --theme-glow-soft:rgba(34,197,94,.16); --topbar-bg:linear-gradient(180deg,rgba(7,28,21,.97),rgba(3,16,12,.94)); --tabs-bg:linear-gradient(180deg,rgba(7,25,19,.94),rgba(3,16,12,.90)); --brand-grad:linear-gradient(135deg,#22c55e,#10b981 55%,#34d399); }
body[data-color-theme="purple"] { --color-bg:#0f0a1a; --color-bg-soft:#17102a; --color-surface:#201734; --color-surface-elevated:#332552; --color-surface-subtle:#130d22; --color-border:rgba(196,181,253,.18); --color-border-strong:rgba(221,214,254,.34); --color-accent:#a78bfa; --color-accent-strong:#ddd6fe; --theme-glow-soft:rgba(167,139,250,.16); --topbar-bg:linear-gradient(180deg,rgba(29,19,50,.97),rgba(13,8,25,.94)); --tabs-bg:linear-gradient(180deg,rgba(24,14,42,.94),rgba(12,7,23,.90)); --brand-grad:linear-gradient(135deg,#a78bfa,#8b5cf6 55%,#c084fc); }
body[data-color-theme="teal"] { --color-bg:#061616; --color-bg-soft:#0a2424; --color-surface:#102f30; --color-surface-elevated:#1d4a49; --color-surface-subtle:#0a1c1d; --color-border:rgba(94,234,212,.18); --color-border-strong:rgba(153,246,228,.34); --color-accent:#2dd4bf; --color-accent-strong:#99f6e4; --theme-glow-soft:rgba(45,212,191,.16); --topbar-bg:linear-gradient(180deg,rgba(8,34,35,.97),rgba(3,17,18,.94)); --tabs-bg:linear-gradient(180deg,rgba(7,30,31,.94),rgba(3,16,17,.90)); --brand-grad:linear-gradient(135deg,#2dd4bf,#14b8a6 55%,#5eead4); }
body[data-color-theme="amber"] { --color-bg:#171006; --color-bg-soft:#24190a; --color-surface:#30220e; --color-surface-elevated:#3b2a12; --color-surface-subtle:#1d1408; --color-border:rgba(252,211,77,.18); --color-border-strong:rgba(252,211,77,.34); --color-accent:#f59e0b; --color-accent-strong:#fcd34d; --theme-glow-soft:rgba(245,158,11,.16); --topbar-bg:linear-gradient(180deg,rgba(48,33,12,.97),rgba(24,14,4,.94)); --tabs-bg:linear-gradient(180deg,rgba(39,25,7,.94),rgba(21,12,3,.90)); --brand-grad:linear-gradient(135deg,#f59e0b,#d97706 55%,#fcd34d); }
body[data-color-theme="rose"] { --color-bg:#19090f; --color-bg-soft:#281019; --color-surface:#35131f; --color-surface-elevated:#451a28; --color-surface-subtle:#200b13; --color-border:rgba(251,113,133,.18); --color-border-strong:rgba(254,205,211,.34); --color-accent:#fb7185; --color-accent-strong:#fecdd3; --theme-glow-soft:rgba(251,113,133,.16); --topbar-bg:linear-gradient(180deg,rgba(53,17,31,.97),rgba(26,7,14,.94)); --tabs-bg:linear-gradient(180deg,rgba(43,12,23,.94),rgba(22,5,11,.90)); --brand-grad:linear-gradient(135deg,#fb7185,#e11d48 55%,#fda4af); }

:root, body[data-color-theme="blue"] { --theme-wave: rgba(96, 165, 250, .34); }
body[data-color-theme="green"] { --theme-wave: rgba(34, 197, 94, .32); }
body[data-color-theme="purple"] { --theme-wave: rgba(167, 139, 250, .36); }
body[data-color-theme="teal"] { --theme-wave: rgba(45, 212, 191, .32); }
body[data-color-theme="amber"] { --theme-wave: rgba(245, 158, 11, .30); }
body[data-color-theme="rose"] { --theme-wave: rgba(251, 113, 133, .32); }

body[data-color-theme] {
  background: radial-gradient(1100px 520px at 12% -8%, var(--theme-glow-soft), transparent 60%), linear-gradient(180deg, var(--color-bg-soft), var(--color-bg) 46%, #04080f);
}

.pageBackdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(900px 620px at 8% 3%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 72%), linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-soft)), var(--color-bg) 55%, #04070d); }
.pageBackdrop::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(900px 560px at 78% 30%, transparent 15%, rgba(1,5,12,.22) 78%), linear-gradient(180deg, rgba(2,6,14,.02), rgba(2,6,14,.28)); }
.pageBackdropCanvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: .82; filter: saturate(1.12); }
.pageBackdropGlow { position: absolute; z-index: 1; top: -28%; left: -8%; width: 70vw; height: 74vh; border-radius: 50%; background: radial-gradient(circle, var(--theme-glow-soft), transparent 68%); filter: blur(28px); opacity: .85; }
body > main, body > footer { position: relative; z-index: 1; }

.siteHeader { display: block; min-height: 0; padding: 0; border: 0; background: transparent; backdrop-filter: none; }
.siteTopbar { position: relative; display: flex; min-height: var(--blog-desktop-topbar-height); align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--color-border); background: var(--topbar-bg); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.siteTopbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-grad); opacity: .9; }
.brand { gap: 12px; }
.brand > .brandMark { width: 38px; height: 38px; border-color: color-mix(in srgb, var(--color-accent) 48%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface)); color: var(--color-accent-strong); }
.brand > span.brandMark { border: 0; background: none; box-shadow: none; }
.brandMark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.42)); }
.brandCopy { display: grid; gap: 2px; }
.brandCopy strong { background: linear-gradient(180deg,#fff,#c7d6ec); color: transparent; font: 800 23px/1.05 var(--font-display); letter-spacing: -.025em; -webkit-background-clip: text; background-clip: text; }
.brandCopy small { color: var(--color-text-muted); font: 500 10.5px/1.3 var(--font-mono); }
.headerActions { display: flex; align-items: center; gap: 8px; }
.headerButton { padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 750; text-decoration: none; }
.headerButton:hover, .headerButton:focus-visible { border-color: var(--color-accent); color: var(--color-accent-strong); }
.headerButton.primary { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); color: var(--color-accent-strong); }
.themeControl { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.themeControl select { width: auto; min-width: 92px; min-height: 32px; padding: 5px 28px 5px 9px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 11px; font-weight: 750; letter-spacing: 0; text-transform: none; }
/* Tab strip mirrors the app's `.tabs .tab`: flat, transparent, underlined on
   the active item rather than a raised folder pill. */
/* Scoped under .siteHeader so these win over the generic `.siteHeader nav a`
   pill rule defined earlier in the file. */
.siteHeader .siteTabs { display: flex; min-height: var(--blog-desktop-tabs-height); gap: 2px; overflow-x: auto; padding: 0 22px; border-bottom: 1px solid var(--color-border); background: var(--tabs-bg); scrollbar-width: none; }
.siteHeader .siteTabs::-webkit-scrollbar { display: none; }
.siteHeader .siteTabs a { position: relative; flex: 0 0 auto; padding: 13px 15px 12px; border: 0; border-radius: 0; background: transparent; color: var(--chalk-muted); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-decoration: none; transition: color .15s ease, background .15s ease; }
.siteHeader .siteTabs a::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background .15s ease; }
.siteHeader .siteTabs a:hover, .siteHeader .siteTabs a:focus-visible { background: rgba(255,255,255,.025); color: var(--chalk); }
.siteHeader .siteTabs a.active { background: transparent; color: var(--chalk); box-shadow: none; }
.siteHeader .siteTabs a.active::after { background: var(--color-accent); }
.siteHeader .siteTabs a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent); outline-offset: -2px; }

main { width: min(100%, var(--max)); margin: 0 auto; padding: 18px 24px 32px; overflow: visible; }
.hero, .explore, .seriesSection, .storySection, .featuredStory, .editorialNote { max-width: none; margin: 0 0 16px; padding: 20px 22px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface) 94%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.hero { min-height: 0; padding: 28px; text-align: left; background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 80%, transparent), color-mix(in srgb, var(--color-surface) 95%, transparent)); }
.heroGlow { inset: -220px auto auto -150px; width: 760px; height: 500px; background: radial-gradient(circle, var(--theme-glow-soft), transparent 66%); }
.eyebrow { margin-bottom: 6px; color: var(--color-accent-strong); font: 700 10px/1.25 var(--font-sans); letter-spacing: .12em; }
.hero h1 { max-width: 780px; margin: 0; color: var(--color-text-strong); font: 800 clamp(32px, 4vw, 48px)/1.04 var(--font-display); letter-spacing: -.025em; }
.hero h1 br { display: none; }
.hero h1 em { color: var(--color-accent-strong); background: none; font-style: normal; -webkit-text-fill-color: currentColor; }
.heroCopy { max-width: 72ch; margin: 13px 0 20px; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.searchBar { max-width: 760px; margin: 0; }
.searchInputWrap { min-height: 44px; border-color: var(--color-border-strong); border-radius: 8px; background: var(--color-surface-subtle); box-shadow: none; }
.searchInputWrap:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.searchInputWrap > span { color: var(--color-accent); font-size: 24px; }
.searchInputWrap input { font-size: 13px; }
.heroMeta { justify-content: flex-start; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.heroMeta span { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: rgba(255,255,255,.025); }
.sectionHeading { align-items: start; margin-bottom: 16px; }
.sectionHeading h2, .editorialNote h2 { font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); letter-spacing: -.01em; }
.sectionHeading > p { font-size: 13px; line-height: 1.5; }
.seriesSection, .explore { border-top-color: var(--color-border); }
.seriesGrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.seriesCard { min-height: 215px; padding: 16px; border-radius: 10px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); }
.seriesCard::after { border-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.seriesCard > p { color: var(--color-accent-strong); }
.seriesCard h3 { font-size: 17px; }
.seriesCard button, .storyCard .cardFooter button, .searchInputWrap button, .textButton { color: var(--color-accent-strong); }
.topicFilters { gap: 6px; }
.topicFilters button { padding: 7px 11px; border-radius: 999px; background: var(--color-surface-subtle); }
.topicFilters button:hover, .topicFilters button:focus-visible, .topicFilters button.active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); color: var(--color-text-strong); }
.filterRow { padding-top: 14px; border-top: 1px solid var(--color-border); }
.filterRow select { min-width: 210px; border-radius: 8px; background: var(--color-surface-subtle); }
.featuredStory { padding: 20px; }
.featuredCard { min-height: 300px; border-color: var(--color-border); border-radius: 12px; background: linear-gradient(135deg, var(--color-surface-elevated), var(--color-surface-subtle) 68%); }
.featuredCopy { padding: clamp(24px, 4vw, 42px); }
.featuredCopy h2 { font: 750 clamp(27px, 3.5vw, 42px)/1.07 var(--font-display); letter-spacing: -.025em; }
.storyKicker { color: var(--color-accent-strong); font-family: var(--font-sans); font-size: 10px; }
.readButton { border: 1px solid color-mix(in srgb, var(--color-accent) 44%, transparent); background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); color: var(--color-accent-strong); font-size: 12px; }
.featuredIndex { background: rgba(0,0,0,.12); }
.storySection { padding-top: 20px; }
.storyGrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.storyCard { min-height: 270px; padding: 16px; border-radius: 10px; background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); }
.storyCard:hover { transform: translateY(-2px); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-surface) 94%, transparent); }
.storyCard h3 { font-size: 18px; }
.filterPill { border-color: color-mix(in srgb, var(--color-accent) 28%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-accent-strong); }
.editorialNote { grid-template-columns: .8fr 1.2fr; gap: 40px; margin-top: 0; margin-bottom: 16px; }
.readerPanel { background: var(--color-bg-soft); border-left: 1px solid var(--color-border); }
.readerClose { background: var(--color-surface); }
.readerPanel h2 { font-size: clamp(30px, 5vw, 48px); }
footer { max-width: var(--max); min-height: 96px; border-top: 1px solid var(--color-border); }

@media (max-width: 760px) {
  .siteTopbar { min-height: 64px; padding: 10px 12px; }
  .brandCopy strong { font-size: 17px; }
  .brandCopy small, .headerButton:not(.primary), .themeControl > span { display: none; }
  .themeControl select { min-width: 76px; }
  .headerButton.primary { padding: 8px 9px; white-space: nowrap; }
  .siteTabs { padding-inline: 10px; }
  main { padding: 10px 10px 24px; }
  .hero, .explore, .seriesSection, .storySection, .featuredStory, .editorialNote { margin-bottom: 10px; padding: 15px 14px; }
  .hero { padding: 20px 16px; }
  .hero h1 { font-size: 32px; }
  .heroMeta { overflow: visible; white-space: normal; }
  .editorialNote { grid-template-columns: 1fr; gap: 24px; }
}

/* Full-article cards (link out to standalone article pages) -------------- */
.storyCard.isArticle { border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.storyCard .cardFooter .cardLink { color: var(--color-accent-strong); font-size: 12px; font-weight: 800; text-decoration: none; }
.storyCard .cardFooter .cardLink:hover { text-decoration: underline; }
a.readButton { text-decoration: none; }

/* ===== Blog index rebuild ==============================================
   Lead + secondary well + dated river, sized for frequent publishing.
   Replaces the series grid / story grid / modal-reader layout.          */

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

/* Almost every toggled region here also carries a display rule (flex/grid/block),
   which outranks the UA sheet's `[hidden] { display: none }` and leaves the
   element on screen. blog.js toggles visibility with `.hidden`, so make it win. */
[hidden] { display: none !important; }

.blogMain { width: min(100%, var(--max)); margin: 0 auto; padding: 22px 24px 40px; }

.mastRow { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.mastKicker { margin: 0 0 6px; color: var(--color-accent-strong); font: 600 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.mastRow h1 { margin: 0; color: var(--color-text-strong); font: 800 clamp(26px, 3.4vw, 40px)/1.05 var(--font-display); letter-spacing: -.03em; }
.mastCopy { max-width: 44ch; margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }

.controls { display: grid; gap: 12px; margin: 20px 0 26px; }
.controlsLower { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chipRow { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.chip:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.chip.active { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-strong); }
.controls .searchBar { max-width: 320px; margin: 0; flex: 1 1 220px; }
.controls .searchInputWrap { min-height: 38px; padding: 0 12px; border-radius: 999px; }
.controls .searchInputWrap > span { font-size: 17px; }
/* Stretch so the whole pill is a tap target, not just the text line box. */
.controls .searchInputWrap input { align-self: stretch; font-size: 13px; }

.rowMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--color-text-subtle); font: 600 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.rowMeta .dot { opacity: .55; }
.typeTag { color: var(--color-accent-strong); }
.posChip { padding: 2px 6px; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-muted); letter-spacing: .04em; }

/* ===== Pinned flagship band ===========================================
   A standing publication rather than a post in the stream, so it sits above
   the river with its own cover art. It drops back into the ordinary list the
   moment a filter, search or scope is applied. */
.pinnedFeature { display: grid; gap: 14px; margin-bottom: 18px; }
.pinnedCard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(18px, 2.6vw, 28px); border: 1px solid color-mix(in srgb, var(--color-accent) 34%, var(--color-border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-elevated)), color-mix(in srgb, var(--color-surface) 96%, transparent)); box-shadow: 0 14px 38px rgba(0,0,0,.26); transition: border-color .15s ease, transform .15s ease; }
.pinnedCard.hasCover { grid-template-columns: 168px minmax(0, 1fr); }
.pinnedCard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pinnedCover { border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border-strong); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.pinnedCover img { display: block; width: 100%; height: auto; }
.pinnedKicker { margin: 0 0 8px; color: var(--color-accent-strong); font: 600 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pinnedCard h2 { margin: 0 0 10px; max-width: 26ch; color: var(--color-text-strong); font: 800 clamp(22px, 3vw, 34px)/1.06 var(--font-display); letter-spacing: -.03em; }
.pinnedCard .pinnedDek { margin: 0; max-width: 68ch; color: var(--color-text-muted); font-size: 14.5px; line-height: 1.6; }
.pinnedFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.pinnedCard .rowMeta { margin-bottom: 0; }
.pinnedCard .leadCta { margin-top: 0; }

@media (max-width: 760px) {
  .pinnedCard { gap: 14px; align-items: start; padding: 16px; }
  .pinnedCard.hasCover { grid-template-columns: 96px minmax(0, 1fr); }
  .pinnedCard h2 { max-width: none; font-size: clamp(19px, 5.4vw, 24px); }
  .pinnedCard .pinnedDek { font-size: 13.5px; }
  .pinnedFoot { margin-top: 12px; }
}

.leadStory { margin-bottom: 14px; }
.leadCard { display: block; padding: clamp(22px, 3.2vw, 38px); border: 1px solid color-mix(in srgb, var(--color-accent) 26%, var(--color-border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 88%, transparent), color-mix(in srgb, var(--color-surface) 96%, transparent)); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.leadCard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.leadCard h2 { margin: 12px 0 10px; max-width: 22ch; color: var(--color-text-strong); font: 800 clamp(24px, 3.4vw, 40px)/1.06 var(--font-display); letter-spacing: -.03em; }
.leadCard p { margin: 0; max-width: 68ch; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.leadCta { display: inline-block; margin-top: 18px; color: var(--color-accent-strong); font-size: 13px; font-weight: 800; }

.secondaryWell { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 30px; }
.wellCard { display: block; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: color-mix(in srgb, var(--color-surface) 88%, transparent); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.wellCard:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.wellCard h3 { margin: 10px 0 8px; color: var(--color-text-strong); font: 750 19px/1.18 var(--font-display); letter-spacing: -.02em; }
.wellCard p { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }

.sectionBar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.sectionBar h2 { margin: 0; color: var(--color-text-strong); font: 750 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.sectionBar p { margin: 0; color: var(--color-text-subtle); font: 600 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

.riverList { display: grid; }
.riverRow { display: flex; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: background .15s ease; }
.riverRow:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.riverMain { flex: 1; min-width: 0; }
.riverRow h3 { margin: 8px 0 6px; color: var(--color-text-strong); font: 750 20px/1.22 var(--font-display); letter-spacing: -.02em; }
.riverRow p { margin: 0; max-width: 78ch; color: var(--color-text-muted); font-size: 13.5px; line-height: 1.55; }
.riverArrow { flex: 0 0 auto; color: var(--color-accent); font-size: 17px; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.riverRow:hover .riverArrow { opacity: 1; transform: translateX(3px); }

.loadMore { display: block; width: 100%; margin-top: 18px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: transparent; color: var(--color-accent-strong); font-size: 13px; font-weight: 750; cursor: pointer; }
.loadMore:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

.evergreenShelf { margin-top: 38px; padding: 22px; border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface-subtle) 78%, transparent); }
.shelfHead h2 { margin: 0 0 4px; color: var(--color-text-strong); font: 750 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.shelfHead p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 12.5px; }
.shelfList { display: grid; }
.shelfRow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 2px; border-top: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: 13.5px; }
.shelfRow:hover .shelfTitle { color: var(--color-accent-strong); }
.shelfMeta { flex: 0 0 auto; color: var(--color-text-subtle); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ===== Controls: scope, filters, topic keywords ========================= */

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

.scopeTabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: color-mix(in srgb, var(--color-surface-subtle) 70%, transparent); }
.scopeTab { min-height: 32px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-muted); font-size: 12.5px; font-weight: 750; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.scopeTab:hover { color: var(--color-text-strong); }
.scopeTab.active { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent-strong); }

.filterCount { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--color-accent); color: #06101d; font: 800 11px/1 var(--font-sans); }

.filterPanel { display: grid; gap: 9px; margin-top: 14px; }
.filterGroup { display: flex; min-width: 0; align-items: center; gap: 12px; flex-wrap: wrap; }
.filterLabel { flex: 0 0 58px; color: var(--color-text-subtle); font: 600 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.archiveSelect { box-sizing: border-box; width: min(260px, 100%); max-width: 100%; min-width: 0; min-height: 36px; padding: 6px 32px 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-subtle); color: var(--color-text); font-size: 12.5px; font-weight: 700; }

.moreFilters { margin-top: 12px; border-top: 1px solid var(--color-border); }
.moreFilters summary { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin-top: 10px; padding: 5px 0; color: var(--color-accent-strong); font-size: 12.5px; font-weight: 750; list-style: none; cursor: pointer; }
.moreFilters summary::-webkit-details-marker { display: none; }
.moreFilters summary > span[aria-hidden] { transition: transform .16s ease; }
.moreFilters[open] summary > span[aria-hidden] { transform: rotate(180deg); }
.moreFiltersPanel { display: grid; min-width: 0; gap: 10px; padding: 6px 0 3px; overflow: hidden; }

.activeFilters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; min-height: 0; }
.activeFilters .filterPill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-strong); font-size: 12px; font-weight: 700; cursor: pointer; }
.activeFilters .filterPill:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.activeFilters .filterPill.clearAll { border-color: var(--color-border); background: transparent; color: var(--color-text-muted); }

/* Keyword labels. They classify what a piece is *about*, alongside the four
   types that classify what it *is*. Clicking one filters; clicking it again
   clears — which is why cards use a stretched title link (below) instead of
   wrapping the whole card in an anchor. */
.topicTags { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; margin-top: 12px; }
.topicTag { min-height: 26px; padding: 4px 9px; border: 1px solid var(--color-border); border-radius: 6px; background: color-mix(in srgb, var(--color-surface-subtle) 60%, transparent); color: var(--color-text-muted); font: 600 11px/1.2 var(--font-sans); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.topicTag:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
.topicTag.active { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-strong); }

/* ===== Card link plumbing ============================================== */

.leadCard, .wellCard, .riverRow { position: relative; }
.cardLink { color: inherit; text-decoration: none; }
.cardLink::after { content: ""; position: absolute; inset: 0; }
.cardLink:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
@supports selector(:has(*)) {
  .cardLink:focus-visible { outline: none; }
  .leadCard:has(.cardLink:focus-visible),
  .wellCard:has(.cardLink:focus-visible),
  .riverRow:has(.cardLink:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
}

.weekTag { padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-strong); letter-spacing: .04em; }
.staleTag { padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-subtle); letter-spacing: .04em; }
.isArchived { opacity: .72; }
.isArchived:hover, .isArchived:focus-within { opacity: 1; }

/* ===== Archive shelf =================================================== */

.archiveShelf { margin-top: 16px; }
.archiveShelf summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.archiveShelf summary::-webkit-details-marker { display: none; }
.archiveShelf summary h2 { margin: 0; color: var(--color-text-strong); font: 750 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.archiveShelf summary::after { content: "▾"; margin-left: 2px; color: var(--color-text-subtle); font-size: 13px; transition: transform .15s ease; }
.archiveShelf details[open] summary::after { transform: rotate(180deg); }
.archiveShelf summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 6px; }
.archiveCount { margin-left: auto; color: var(--color-text-subtle); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.archiveNote { margin: 6px 0 10px; color: var(--color-text-muted); font-size: 12.5px; }

/* ===== Focus, motion, tap behaviour ==================================== */

.chip:focus-visible, .scopeTab:focus-visible, .topicTag:focus-visible,
.filterPill:focus-visible, .loadMore:focus-visible, .moreFilters summary:focus-visible,
.shelfRow:focus-visible, .archiveSelect:focus-visible, .headerButton:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
.chip, .scopeTab, .topicTag, .filterPill, .cardLink, .shelfRow, .siteTabs a {
  -webkit-tap-highlight-color: transparent;
}

/* ===== Responsive ====================================================== */

@media (max-width: 900px) {
  /* The tab strip is the only horizontally scrolling thing on the page, so it
     needs to look scrollable: fade the right edge and snap to tabs. */
  .siteHeader .siteTabs { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%); scroll-snap-type: x proximity; scrollbar-width: none; }
  .siteHeader .siteTabs::-webkit-scrollbar { display: none; }
  .siteHeader .siteTabs a { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  /* 74px of topbar plus a 45px tab strip is too much permanent chrome on a
     phone. Only the topbar stays pinned; the tabs scroll away. */
  .siteHeader { position: static; }
  .siteTopbar { position: sticky; top: 0; z-index: 30; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .siteHeader .siteTabs a { padding: 12px 13px; }

  .blogMain { padding: 14px 12px 32px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mastRow { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
  .mastCopy { max-width: none; }

  .controls { margin: 16px 0 20px; }
  .controlsTop { gap: 8px; }
  .scopeTabs { flex: 1 1 100%; order: -1; justify-content: space-between; }
  .scopeTab { flex: 1; padding: 8px 10px; min-height: 38px; }
  .controls .searchBar { flex: 1 1 auto; max-width: none; }
  .controls .searchInputWrap { min-height: 42px; }
  /* iOS zooms the page on focus for anything under 16px. */
  .controls .searchInputWrap input { font-size: 16px; }
  .filterPanel { display: grid; margin-top: 12px; padding-top: 12px; gap: 14px; }
  .filterGroup { gap: 8px; }
  .filterLabel { flex: 1 1 100%; }
  .chip { min-height: 36px; padding: 8px 14px; }
  .topicTag { min-height: 32px; padding: 7px 11px; font-size: 12px; }
  .archiveSelect { flex: 1 1 auto; min-height: 42px; width: 100%; }
  .moreFilters summary { min-height: 44px; }
  .moreFiltersPanel { gap: 14px; padding-top: 8px; }
  .activeFilters { margin-top: 12px; }

  .leadCard { padding: 20px 18px; }
  .leadCard h2 { max-width: none; font-size: clamp(23px, 6.6vw, 30px); }
  .leadCard p { font-size: 14.5px; }
  .secondaryWell { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
  .wellCard { padding: 16px; }

  .riverRow { padding: 16px 2px; }
  .riverRow h3 { font-size: 18px; }
  .riverRow p { font-size: 13.5px; }
  .riverArrow { display: none; }
  .sectionBar { flex-wrap: wrap; gap: 4px 12px; }
  .loadMore { min-height: 46px; }

  .evergreenShelf { margin-top: 26px; padding: 18px 16px; }
  .shelfRow { padding: 13px 2px; gap: 10px; }

  footer { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  footer nav { flex-wrap: wrap; gap: 2px; margin-left: -8px; }
  footer nav a { padding: 11px 8px; }
}

@media (max-width: 520px) {
  .rowMeta { gap: 5px; font-size: 9.5px; }
  /* Two separators plus four chips is more noise than signal at this width. */
  .rowMeta .dot { display: none; }
  .leadCta { margin-top: 14px; }
  .shelfRow { flex-direction: column; align-items: flex-start; gap: 3px; }
  .archiveShelf summary { flex-wrap: wrap; }
}

/* Touch browsers zoom the page when a focused control is under 16px, at any
   viewport width — a tablet in landscape hits it too. Key off the pointer. */
@media (pointer: coarse) {
  .controls .searchInputWrap input,
  .archiveSelect,
  .themeControl select { font-size: 16px; }
  .themeControl select { min-height: 38px; }
  .archiveSelect { min-height: 42px; }
}

/* ===== Structured blog index: evergreen deck, search, publications ===== */

.evergreenDeck { margin: 24px 0 22px; }
.evergreenDeckHead,
.controlsHeading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.evergreenDeckHead h2,
.controlsHeading h2 { margin: 0; color: var(--color-text-strong); font: 760 clamp(20px, 2.4vw, 28px)/1.08 var(--font-display); letter-spacing: -.025em; }
.evergreenDeckHead > p,
.controlsHeading > p { max-width: 48ch; margin: 0; color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; text-align: right; }
.evergreenDeckHead .mastKicker,
.controlsHeading .mastKicker { margin-bottom: 5px; }

.evergreenDeckGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.evergreenFeatureCard { min-width: 0; padding: 11px 11px 13px; border: 1px solid var(--color-border); border-radius: 16px; background: color-mix(in srgb, var(--color-surface) 96%, transparent); color: var(--color-text); box-shadow: 0 12px 28px rgba(0,0,0,.2); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.evergreenFeatureCard:hover { border-color: color-mix(in srgb, var(--color-accent) 72%, var(--color-border)); box-shadow: 0 18px 38px rgba(0,0,0,.3), 0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent); transform: translateY(-3px); }
.evergreenFeatureCard:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.evergreenFeatureCard.isReserved { border-style: dashed; opacity: .58; }
.evergreenFeaturePreview { position: relative; display: block; width: 100%; aspect-ratio: 1.72; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-border-strong) 82%, #000); border-radius: 10px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent) 8%, #090c12), #07090d 70%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.015); }
.evergreenFeaturePreview img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.005); transition: filter .2s ease, transform .25s ease; }
.evergreenFeaturePreview::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,7,16,.02), rgba(3,7,16,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
a.evergreenFeatureCard:hover .evergreenFeaturePreview img { filter: saturate(1.08) brightness(1.05); transform: scale(1.045); }
.isReserved .evergreenFeaturePreview img { filter: saturate(.72) brightness(.72); }
.evergreenFeatureMeta { display: flex; align-items: center; gap: 7px; margin: 13px 4px 4px; }
.evergreenFeatureMeta b { color: var(--color-text-strong); font: 800 13px/1 var(--font-display); }
.evergreenFeatureMeta small { padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--color-text-subtle); font: 650 9px/1 var(--font-sans); }
.evergreenFeatureCard > strong { display: block; margin: 0 4px; overflow: hidden; color: var(--color-text-strong); font: 720 14px/1.25 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.evergreenFeatureCta { display: block; margin: 7px 4px 0; color: var(--color-accent-strong); font-size: 10.5px; font-weight: 700; }
.isReserved .evergreenFeatureCta { color: var(--color-text-subtle); }

.controls { margin: 0 0 30px; padding: 18px; border: 1px solid var(--color-border); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface-elevated) 72%, transparent), color-mix(in srgb, var(--color-surface) 96%, transparent)); box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.controlsHeading { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.controls .searchBar { max-width: 420px; }
.controls .searchInputWrap { min-height: 42px; border-color: color-mix(in srgb, var(--color-accent) 24%, var(--color-border-strong)); background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-subtle) 92%, transparent), var(--color-surface)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.16); }
.controls .searchInputWrap:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent), 0 10px 24px rgba(0,0,0,.22); }
.controls .filterPanel { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--color-border); }

.riverList { display: grid; gap: 24px; padding-top: 18px; }
.publicationCard { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-border-strong) 85%, #000); border-radius: 16px; background: color-mix(in srgb, var(--color-surface) 94%, #05070c); box-shadow: 0 16px 38px rgba(0,0,0,.28); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.publicationCard:hover { border-color: color-mix(in srgb, var(--color-accent) 58%, var(--color-border)); box-shadow: 0 22px 48px rgba(0,0,0,.34); transform: translateY(-2px); }
.publicationCardHeader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-elevated) 72%, #080a0f), color-mix(in srgb, var(--color-surface) 90%, #05070c)); }
.publicationNumber { color: color-mix(in srgb, var(--color-accent) 72%, white); font: 700 11px/1 var(--font-mono); letter-spacing: .08em; }
.publicationTitleGroup { min-width: 0; }
.publicationTitleGroup > span { display: block; margin-bottom: 2px; color: var(--color-text-subtle); font: 650 8.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.publicationTitleGroup h3 { margin: 0; overflow: hidden; color: var(--color-text-strong); font: 700 clamp(14px, 1.5vw, 18px)/1.2 var(--font-display); letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.publicationAction { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: color-mix(in srgb, var(--color-accent) 6%, transparent); color: var(--color-accent-strong); font-size: 10.5px; font-weight: 750; }
.publicationPreview { position: relative; display: grid; align-content: center; min-height: 220px; padding: clamp(28px, 4.5vw, 56px); background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 46%), linear-gradient(145deg, color-mix(in srgb, var(--color-surface-elevated) 82%, var(--color-bg-soft)), color-mix(in srgb, var(--color-surface) 94%, var(--color-bg)) 72%); color: var(--color-text); }
.publicationPreview::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-grad); opacity: .82; }
.publicationPreviewLabel { display: block; margin-bottom: 12px; color: color-mix(in srgb, var(--color-accent-strong) 78%, var(--color-text-muted)); font: 700 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.publicationOpening { max-width: 66ch; margin: 0; color: var(--color-text-strong); font: 650 clamp(18px, 2.15vw, 27px)/1.45 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.publicationOpening::before { content: "“"; margin-right: .08em; color: var(--color-accent); }
.publicationOpening::after { content: "”"; margin-left: .04em; color: var(--color-accent); }
.publicationPreviewFoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.publicationPreview .rowMeta { color: var(--color-text-subtle); font-size: 10.5px; }
.publicationPreview .typeTag { color: var(--color-accent-strong); }
.publicationPreview .posChip { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--color-surface-subtle) 76%, transparent); color: var(--color-text-muted); }
.publicationPreview .topicTags { justify-content: flex-end; margin-top: 0; }
.publicationPreview .topicTag { min-height: 30px; border-color: var(--color-border-strong); background: color-mix(in srgb, var(--color-surface-subtle) 76%, transparent); color: var(--color-text-muted); }
.publicationPreview .topicTag:hover,
.publicationPreview .topicTag.active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface)); color: var(--color-accent-strong); }
.publicationCard { cursor: pointer; }
.publicationCard .cardLink::after { inset: 0; z-index: 2; }
/* Topic chips remain real filter controls above the stretched article link. */
.publicationCard .topicTags { z-index: 3; }
@supports selector(:has(*)) {
  .publicationCard:has(.cardLink:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }
}

/* Magnetic treatment for search/filter actions. */
.fancyButton { --fancy-shift-x: 0px; --fancy-shift-y: 0px; --fancy-pointer-x: 50%; --fancy-pointer-y: 50%; --fancy-scale: 1; transform: translate3d(var(--fancy-shift-x), var(--fancy-shift-y), 0) scale(var(--fancy-scale)); will-change: transform; transition: transform 210ms cubic-bezier(.22,1,.36,1), border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; }
.fancyButton.isMagnetic { transition-duration: 85ms, 160ms, 160ms, 160ms, 160ms; }
.siteTabs a.fancyButton.isMagnetic { --fancy-scale: 1.045; z-index: 1; }
.fancyButton:hover { background-image: radial-gradient(circle at var(--fancy-pointer-x) var(--fancy-pointer-y), color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 65%); box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--color-accent) 14%, transparent); }
.scopeTab.active.fancyButton,
.chip.active.fancyButton,
.topicTag.active.fancyButton { background: radial-gradient(circle at var(--fancy-pointer-x) var(--fancy-pointer-y), color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 68%), color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); }
.fancyButton:active { transform: translate3d(var(--fancy-shift-x), var(--fancy-shift-y), 0) scale(.97); }

@media (max-width: 1180px) {
  .evergreenDeckGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .evergreenDeck { margin: 18px 0; }
  .evergreenDeckHead,
  .controlsHeading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .evergreenDeckHead > p,
  .controlsHeading > p { max-width: none; text-align: left; }
  .evergreenDeckGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .evergreenFeatureCard { padding: 8px 8px 11px; border-radius: 13px; }
  .evergreenFeatureCard > strong { font-size: 13px; }
  .controls { margin-bottom: 22px; padding: 14px; border-radius: 14px; }
  .controls .filterPanel { border-top: 0; }
  .riverList { gap: 16px; padding-top: 14px; }
  .publicationCardHeader { grid-template-columns: auto minmax(0, 1fr); min-height: 54px; padding: 9px 12px; }
  .publicationTitleGroup h3 { display: -webkit-box; overflow: hidden; font-size: 14px; text-overflow: initial; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .publicationAction { display: none; }
  .publicationPreview { min-height: 200px; padding: 28px 22px; }
  .publicationOpening { font-size: clamp(17px, 5.2vw, 22px); }
  .publicationPreviewFoot { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 22px; }
  .publicationPreview .topicTags { justify-content: flex-start; }
  .publicationPreview .topicTag { min-height: 38px; padding-inline: 12px; }
}

@media (max-width: 440px) {
  .evergreenDeckGrid { grid-template-columns: 1fr; }
  .evergreenFeaturePreview { aspect-ratio: 2.15; }
}

@media (prefers-reduced-motion: reduce) {
  .fancyButton,
  .fancyButton.isMagnetic,
  .fancyButton:active { transform: none !important; will-change: auto; }
  .evergreenFeatureCard,
  .publicationCard { transition: none; }
}

/* ===== Phone reading pass ==============================================
   Keep the desktop publication treatment intact, but make the Blog index
   behave like a readable article list on narrow screens. */
@media (max-width: 760px) {
  body {
    --color-text-muted: #b5c1d1;
    --color-text-subtle: #96a5b9;
  }

  .siteTopbar { gap: 10px; }
  .siteTopbar .brand { min-width: 0; gap: 8px; }
  .siteTopbar .brandCopy { display: block; min-width: 0; }
  .siteTopbar .brandCopy strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .siteTopbar .themeControl { display: none; }
  .siteTopbar .headerActions { flex: 0 0 auto; margin-left: auto; }
  .siteTopbar .headerButton.primary { padding: 9px 11px; font-size: 0; }
  .siteTopbar .headerButton.primary::before { content: "Draft room"; font-size: 12px; }
  .siteTopbar .headerButton.primary span { font-size: 12px; }

  .siteHeader .siteTabs { gap: 0; padding-inline: 6px; }
  .siteHeader .siteTabs a { padding: 11px 10px 10px; font-size: 12px; }

  .blogMain { padding: 18px 14px 32px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .mastRow { gap: 8px; padding-bottom: 18px; }
  .mastRow h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.08; }
  .mastCopy { color: var(--color-text-muted); font-size: 15px; line-height: 1.62; }

  .evergreenDeck { margin: 22px 0 24px; }
  .evergreenDeckHead,
  .controlsHeading { gap: 6px; margin-bottom: 16px; }
  .evergreenDeckHead h2,
  .controlsHeading h2 { font-size: 22px; line-height: 1.14; }
  .evergreenDeckHead > p,
  .controlsHeading > p { color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
  .evergreenDeckGrid { grid-template-columns: 1fr; gap: 10px; }
  .evergreenFeatureCard { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 13px; align-content: center; min-height: 108px; padding: 10px; }
  .evergreenFeatureCard.isReserved { display: none; }
  .evergreenFeaturePreview { grid-column: 1; grid-row: 1 / 4; align-self: stretch; height: auto; min-height: 86px; aspect-ratio: auto; }
  .evergreenFeatureMeta { grid-column: 2; grid-row: 1; margin: 0 0 5px; }
  .evergreenFeatureCard > strong { grid-column: 2; grid-row: 2; margin: 0; font-size: 15px; white-space: normal; }
  .evergreenFeatureCta { grid-column: 2; grid-row: 3; margin: 6px 0 0; font-size: 11.5px; }

  .controls { margin-bottom: 24px; padding: 16px; }
  .controlsTop { align-items: stretch; }
  .scopeTab { min-height: 42px; font-size: 13px; }
  .moreFilters summary { min-height: 44px; }

  .sectionBar { padding-bottom: 10px; }
  .sectionBar h2 { font-size: 20px; }
  .sectionBar p { font-size: 10.5px; }
  .riverList { gap: 11px; padding-top: 12px; }
  .publicationCard { border-radius: 13px; box-shadow: 0 10px 24px rgba(0,0,0,.23); }
  .publicationCardHeader { min-height: 58px; padding: 10px 12px; }
  .publicationNumber { font-size: 10.5px; }
  .publicationTitleGroup > span { color: var(--color-text-muted); font-size: 9px; }
  .publicationTitleGroup h3 { font-size: 16px; line-height: 1.25; }
  .publicationPreview { min-height: 0; padding: 14px 14px 15px; }
  .publicationPreviewLabel { display: none; }
  .publicationOpening { display: -webkit-box; overflow: hidden; color: var(--color-text); font: 550 15.5px/1.52 var(--font-sans); letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .publicationPreviewFoot { gap: 8px; margin-top: 12px; padding-top: 10px; }
  .publicationPreview .rowMeta { color: var(--color-text-muted); font-size: 10px; line-height: 1.45; }
  .publicationPreview .typeTag,
  .publicationPreview .posChip { display: none; }
  .publicationPreview .topicTags { display: none; }
}

@media (max-width: 350px) {
  .siteTopbar .brand > .brandMark { width: 34px; height: 34px; }
  .siteTopbar .brandCopy strong { font-size: 14px; }
  .siteTopbar .headerButton.primary { padding-inline: 9px; }
  .siteTopbar .headerButton.primary::before,
  .siteTopbar .headerButton.primary span { font-size: 11px; }
}

/* The app uses a location header and a fixed five-destination bar on phones.
   Blog keeps its desktop tab strip above 768px and joins that shell below it. */
.blogMobileAppHeader,
.blogMobileBottomNav,
.blogMobileMoreBackdrop,
.blogMobileMoreMenu { display: none; }

@media (max-width: 768px) {
  :root {
    --blog-mobile-header-height: calc(56px + env(safe-area-inset-top, 0px));
    --blog-mobile-bottom-height: calc(62px + env(safe-area-inset-bottom, 0px));
    --blog-sticky-header-height: var(--blog-mobile-header-height);
  }

  html,
  body { overflow-x: clip; }
  body { padding-bottom: var(--blog-mobile-bottom-height); }
  body.blogMobileMoreOpen { overflow: hidden; }

  .siteHeader { display: none; }

  .blogMobileAppHeader {
    position: sticky;
    top: 0;
    z-index: 3000;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
    min-height: var(--blog-mobile-header-height);
    padding: env(safe-area-inset-top, 0px) 8px 0;
    border-bottom: 1px solid rgba(125, 154, 205, .18);
    background: rgba(6, 14, 27, .96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .blogMobileAppHeader button,
  .blogMobileAppBrand {
    display: grid;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(125, 154, 205, .22);
    border-radius: 10px;
    background: rgba(20, 33, 52, .82);
    color: #dcecff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
  }

  .blogMobileAppBrand {
    padding: 0;
    overflow: hidden;
    border-color: rgba(96, 165, 250, .42);
    background: linear-gradient(145deg, rgba(37, 99, 235, .36), rgba(13, 148, 136, .2));
  }
  .blogMobileAppBrand img { width: 100%; height: 100%; object-fit: contain; }

  .blogMobileAppLocation { display: grid; min-width: 0; gap: 1px; }
  .blogMobileAppLocation small,
  .blogMobileAppLocation strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blogMobileAppLocation small { color: #7894b6; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .blogMobileAppLocation strong { color: #f5f9ff; font-size: 14px; }

  .blogMobileBottomNav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--blog-mobile-bottom-height);
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(125, 154, 205, .18);
    background: rgba(5, 12, 24, .97);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .blogMobileBottomNav a,
  .blogMobileBottomNav button {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 3px 2px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #96a9c2;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
  }
  .blogMobileBottomNav a > span:first-child,
  .blogMobileBottomNav button > span:first-child { font-size: 16px; }
  .blogMobileBottomNav .active,
  .blogMobileBottomNav [aria-current="page"] { border-color: rgba(96, 165, 250, .2); background: rgba(59, 130, 246, .13); color: #8fc1ff; }

  .blogMobileMoreBackdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 4690;
    display: block;
    background: rgba(1, 5, 12, .72);
    backdrop-filter: blur(4px);
  }

  .blogMobileMoreMenu:not([hidden]) {
    position: fixed;
    right: 8px;
    bottom: calc(var(--blog-mobile-bottom-height) + 7px);
    left: 8px;
    z-index: 4700;
    display: grid;
    gap: 10px;
    max-height: calc(100dvh - var(--blog-mobile-header-height) - var(--blog-mobile-bottom-height) - 18px);
    padding: 12px;
    overflow-y: auto;
    border: 1px solid rgba(125, 154, 205, .25);
    border-radius: 18px;
    background: #0a1628;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .52);
  }

  .blogMobileMoreMenuHeader { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin: -12px -12px 0; padding: 8px 12px; border-bottom: 1px solid rgba(125, 154, 205, .16); background: #0a1628; color: #f5f9ff; }
  .blogMobileMoreMenuHeader button { min-width: 44px; min-height: 44px; border: 1px solid rgba(125, 154, 205, .22); border-radius: 10px; background: rgba(20, 33, 52, .82); color: #dcecff; font-size: 20px; }
  .blogMobileMoreSectionLabel { color: #7f9abb; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
  .blogMobileMoreUtilities,
  .blogMobileMoreMenuGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .blogMobileMoreUtilities button,
  .blogMobileMoreUtilities label,
  .blogMobileMoreMenuGrid a { display: grid; min-width: 0; min-height: 48px; place-items: center; padding: 8px 10px; border: 1px solid rgba(125, 154, 205, .18); border-radius: 10px; background: rgba(20, 33, 52, .8); color: #dcecff; font-size: 12px; font-weight: 750; text-align: center; text-decoration: none; }
  .blogMobileMoreUtilities label { grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
  .blogMobileMoreUtilities select { min-width: 0; min-height: 40px; border: 0; background: transparent; color: #dcecff; font-size: 16px; }
  .blogMobileMoreMenuGrid a.active,
  .blogMobileMoreMenuGrid a[aria-current="page"] { border-color: rgba(96, 165, 250, .5); background: rgba(37, 99, 235, .18); color: #8fc1ff; }

  .blogMobileAppHeader button:focus-visible,
  .blogMobileAppBrand:focus-visible,
  .blogMobileBottomNav a:focus-visible,
  .blogMobileBottomNav button:focus-visible,
  .blogMobileMoreMenu button:focus-visible,
  .blogMobileMoreMenu a:focus-visible,
  .blogMobileMoreMenu select:focus-visible { outline: 2px solid #78aaff; outline-offset: -2px; }
}

/* ===== Draft-position card swap ========================================
   Native HTML/CSS/JS version of the stacked-card motion used by Svelte Bits.
   It lives before the article river and remains a direct index to all 12 plans. */
.draftSlotSeries { margin: 32px 0; padding-top: 30px; border-top: 1px solid var(--color-border); }
.draftSlotSeriesShell { position: relative; display: grid; grid-template-columns: minmax(260px, .72fr) minmax(480px, 1.28fr); min-height: 440px; overflow: clip; border: 1px solid color-mix(in srgb, var(--color-accent) 32%, var(--color-border)); border-radius: 20px; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--color-surface-elevated) 94%, #05070c), color-mix(in srgb, var(--color-surface) 96%, #03050a)); box-shadow: 0 24px 56px rgba(0,0,0,.34); }
.draftSlotSeriesShell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(96deg, transparent 0 28px, color-mix(in srgb, var(--color-accent) 12%, transparent) 29px 30px); mask-image: linear-gradient(90deg, transparent, #000 55%, #000); }
.draftSlotSeriesCopy { position: relative; z-index: 5; display: flex; justify-content: center; flex-direction: column; padding: 42px 18px 42px 42px; }
.draftSlotSeriesCopy h2 { max-width: 10ch; margin: 0; color: var(--color-text-strong); font: 800 clamp(28px, 3.5vw, 43px)/1.02 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.draftSlotSeriesCopy > p:not(.mastKicker) { max-width: 38ch; margin: 16px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }
.draftSlotPickGrid { display: grid; grid-template-columns: repeat(6, 36px); gap: 7px; margin-top: 23px; }
.draftSlotPickGrid button,
.draftSlotControls button { display: inline-grid; place-items: center; border: 1px solid var(--color-border-strong); background: color-mix(in srgb, var(--color-surface-subtle) 82%, transparent); color: var(--color-text-muted); cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.draftSlotPickGrid button { width: 36px; height: 34px; border-radius: 8px; font: 700 10px/1 var(--font-mono); }
.draftSlotPickGrid button:hover,
.draftSlotPickGrid button.active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); color: var(--color-accent-strong); transform: translateY(-1px); }
.draftSlotPickGrid button:focus-visible,
.draftSlotControls button:focus-visible,
.draftSlotCard:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.draftSlotControls { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.draftSlotControls button { width: 42px; height: 38px; border-radius: 999px; font-size: 16px; }
.draftSlotControls button:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-1px); }
.draftSlotControls > span { min-width: 104px; color: var(--color-text-subtle); font: 650 10px/1 var(--font-mono); letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.draftSlotStage { position: relative; min-width: 0; min-height: 440px; perspective: 1100px; }
.draftSlotStack { position: absolute; top: 112px; right: 126px; left: 22px; height: 286px; transform-style: preserve-3d; }
.draftSlotCard { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 20px 24px 18px; border: 1px solid color-mix(in srgb, var(--color-accent) 48%, var(--color-border-strong)); border-radius: 17px; background: radial-gradient(circle at 90% 105%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--color-surface-elevated) 96%, #090b11), color-mix(in srgb, var(--color-surface) 98%, #030408)); color: var(--color-text); box-shadow: 0 22px 44px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.045); text-decoration: none; transform: translate3d(calc(var(--depth) * 42px), calc(var(--depth) * -31px), calc(var(--depth) * -72px)) skewY(3.8deg) scale(calc(1 - var(--depth) * .018)); transform-origin: center; transition: transform 780ms cubic-bezier(.2,.82,.18,1.16), opacity 360ms ease, border-color .18s ease, box-shadow .18s ease; will-change: transform; backface-visibility: hidden; }
.draftSlotCard[data-depth="4"] { opacity: 0; pointer-events: none; }
.draftSlotCard:not(.is-front) { pointer-events: none; }
.draftSlotCard.is-front:hover { border-color: var(--color-accent); box-shadow: 0 28px 54px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.draftSlotCard.is-leaving { opacity: 0 !important; pointer-events: none; transform: translate3d(0, 135%, 0) skewY(3.8deg) rotate(2deg) !important; transition-timing-function: cubic-bezier(.65,0,.85,.25); }
.draftSlotCardWatermark { position: absolute; right: 17px; bottom: -24px; color: color-mix(in srgb, var(--color-accent) 10%, transparent); font: 900 126px/1 var(--font-display); letter-spacing: -.08em; pointer-events: none; }
.draftSlotCardTop { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--color-text-subtle); font: 650 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.draftSlotCardTop strong { color: var(--color-accent-strong); font-size: 10px; }
.draftSlotCardRule { height: 1px; margin: 15px -24px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 58%, transparent), var(--color-border), transparent); }
.draftSlotCardBody { position: relative; z-index: 1; display: flex; flex: 1; justify-content: center; flex-direction: column; max-width: 86%; padding: 18px 0 14px; }
.draftSlotCardEyebrow { margin-bottom: 8px; color: var(--color-text-subtle); font: 650 8.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.draftSlotCardTitle { display: block; color: var(--color-text-strong); font: 760 clamp(20px, 2vw, 27px)/1.1 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.draftSlotCardExcerpt { display: -webkit-box; max-width: 58ch; margin-top: 9px; overflow: hidden; color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.draftSlotCardFoot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; border-top: 1px solid var(--color-border); color: var(--color-text-subtle); font: 650 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.draftSlotCardFoot strong { color: var(--color-accent-strong); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0; text-transform: none; }

@media (max-width: 980px) {
  .draftSlotSeriesShell { grid-template-columns: minmax(238px, .66fr) minmax(430px, 1.34fr); }
  .draftSlotSeriesCopy { padding-left: 28px; }
  .draftSlotStack { right: 108px; }
  .draftSlotCard { transform: translate3d(calc(var(--depth) * 34px), calc(var(--depth) * -28px), calc(var(--depth) * -65px)) skewY(3.8deg) scale(calc(1 - var(--depth) * .018)); }
  .draftSlotPickGrid { grid-template-columns: repeat(4, 36px); }
}

@media (max-width: 760px) {
  .draftSlotSeries { margin: 24px 0; padding-top: 24px; }
  .draftSlotSeriesShell { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .draftSlotSeriesShell::before { opacity: .18; }
  .draftSlotSeriesCopy { padding: 26px 18px 4px; }
  .draftSlotSeriesCopy h2 { max-width: 12ch; font-size: clamp(27px, 9vw, 36px); }
  .draftSlotSeriesCopy > p:not(.mastKicker) { margin-top: 12px; font-size: 13.5px; line-height: 1.58; }
  .draftSlotPickGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 18px; }
  .draftSlotPickGrid button { width: 100%; min-width: 0; height: 38px; }
  .draftSlotControls { justify-content: center; margin-top: 14px; }
  .draftSlotControls button { width: 44px; height: 42px; }
  .draftSlotStage { min-height: 370px; }
  .draftSlotStack { top: 66px; right: 46px; left: 14px; height: 280px; }
  .draftSlotCard { padding: 17px 18px 16px; border-radius: 14px; transform: translate3d(calc(var(--depth) * 10px), calc(var(--depth) * -10px), calc(var(--depth) * -38px)) skewY(2.2deg) scale(calc(1 - var(--depth) * .012)); }
  .draftSlotCard.is-leaving { transform: translate3d(0, 135%, 0) skewY(2.2deg) rotate(1deg) !important; }
  .draftSlotCardRule { margin-right: -18px; margin-left: -18px; }
  .draftSlotCardBody { max-width: 92%; padding: 15px 0 12px; }
  .draftSlotCardTitle { font-size: clamp(19px, 5.6vw, 23px); }
  .draftSlotCardExcerpt { margin-top: 8px; font-size: 12px; -webkit-line-clamp: 3; }
  .draftSlotCardFoot { align-items: flex-end; }
  .draftSlotCardFoot > span { display: none; }
  .draftSlotCardWatermark { right: 10px; font-size: 104px; }
}

@media (max-width: 370px) {
  .draftSlotSeriesCopy { padding-inline: 14px; }
  .draftSlotPickGrid { gap: 4px; }
  .draftSlotStage { min-height: 350px; }
  .draftSlotStack { top: 58px; right: 40px; left: 10px; height: 270px; }
  .draftSlotCard { padding-inline: 15px; }
  .draftSlotCardRule { margin-right: -15px; margin-left: -15px; }
}

@media (prefers-reduced-motion: reduce) {
  .draftSlotCard,
  .draftSlotPickGrid button,
  .draftSlotControls button { transition: none; }
}


/* Crawlable fallback for the draft-slot carousel.
   initDraftSlotSeries() replaces #draftSlotStack on load, so this list only
   ever renders before hydration or with scripting off. Kept visually plain on
   purpose - it must not read as a broken version of the card deck. */
.draftSlotFallback { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 4px 0 0; list-style: none; }
.draftSlotFallback a { display: block; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-text-subtle); font: 500 13px/1.3 var(--font-body, inherit); text-decoration: none; }
.draftSlotFallback a:hover, .draftSlotFallback a:focus-visible { border-color: var(--color-accent); color: var(--color-text-strong); }