/* ============================================================================
   BurnWeek Blog — site stylesheet (round 2b, approved 2026-10-01)
   ----------------------------------------------------------------------------
   Overrides the engine's templates/blog.css via blog.config.json
   `site.css`. Full replacement: every class bake.mjs emits is styled here.
   Spec: docs/plans/blog-article-redesign/README.md + the boards in
   docs/design/blog-article/ (Main = 1440, Mobile/MobileOpen = 390).

   White page, one green accent, landing-page tokens. Bricolage Grotesque 800
   for display (logo, H1, H2, H3), Inter for furniture (nav, meta, captions,
   summary, TOC, citations, tables), Source Serif 4 for reading (body, dek).
   Forced light theme (decided; no dark mode).

   Fonts are self-hosted woff2 subsets (latin + latin-ext, unicode-range split
   so only what a page uses downloads) under blog/public/images/fonts/ — the
   engine copies public/images/ into dist/images/. Filenames carry a content
   hash because nginx serves woff2 as immutable/1y. All three families are
   SIL Open Font License 1.1 (see fonts/LICENSE.txt).
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/blog/images/fonts/bricolage-grotesque-latin-ext.734f941c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/blog/images/fonts/bricolage-grotesque-latin.d9671912.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/blog/images/fonts/inter-latin-ext.a28eb6d3.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/blog/images/fonts/inter-latin.c9407645.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/blog/images/fonts/source-serif-4-latin-ext.1ed39fb3.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/blog/images/fonts/source-serif-4-latin.286e05e5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/blog/images/fonts/source-serif-4-italic-latin-ext.6731b049.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/blog/images/fonts/source-serif-4-italic-latin.ad17ab41.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens (landing: apps/mobile/public/landing.html) ------------- */
:root {
  color-scheme: light;

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-read: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, Cambria, 'Times New Roman', serif;

  --ink: #0B1220;          /* headings, logo, active states */
  --green: #12C46A;        /* the one accent: progress line, TOC current rule */
  --green-deep: #097A3F;   /* links, topic line, chevron, CTA (AA on white) */
  --muted: #5B6573;        /* meta, captions, nav */
  --hairline: #E7ECF2;     /* every rule and border */
  --body: #1F2937;         /* reading text */
  --dek: #4B5563;          /* standfirst */
  --list: #243049;         /* summary list, tables */
  --wash: #F5F7FA;         /* no-image tile, code */
  --surface: #FFFFFF;

  --measure: 680px;        /* reading column */
  --page-max: 1120px;
  --gutter: 32px;
  --stack: 22px;           /* vertical rhythm of the article intro */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--green-deep); }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: rgba(18, 196, 106, 0.22); }

/* ---- Site header (style/header.html) --------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-logo:hover { color: var(--ink); }

.site-logo-sub {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14.5px;
  font-weight: 600;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--ink); }

.site-nav .site-nav-cta { color: var(--green-deep); }
.site-nav .site-nav-cta:hover { color: var(--ink); }

/* ---- Reading progress: a 2px green line on the header's bottom rule -------
   The engine emits it right after the header as a fixed bar; sticky instead
   so it sits ON the header hairline at the top of the page and pins to the
   top of the viewport once the header scrolls away. Zero net flow height. */
.article-progress {
  position: sticky;
  top: 0;
  height: 2px;
  margin: -1px 0 -1px;
  z-index: 60;
  pointer-events: none;
}

.article-progress-fill {
  height: 100%;
  width: 0;
  background: var(--green);
}

/* ---- Article page ------------------------------------------------------------ */
.article-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}

/* Visual breadcrumb hidden — the BreadcrumbList JSON-LD in <head> stays. */
.article-breadcrumb { display: none; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 240px;
  gap: 96px;
  justify-content: space-between;
  align-items: start;
}

/* Flex column so the hero can be lifted above the header with `order`. */
.article-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.article-main > * { margin-top: 0; }

/* Intro: topic line → H1 → dek → byline */
.article-header {
  display: flex;
  flex-direction: column;
  gap: var(--stack);
  margin: 0 0 var(--stack);
}

.article-category {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--green-deep);
  text-decoration: none;
}

.article-category:hover { color: var(--ink); }

.article-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 96;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.article-dek {
  font-family: var(--font-read);
  font-size: 22px;
  line-height: 1.5;
  color: var(--dek);
  margin: 0;
  text-wrap: pretty;
}

/* Byline line — one quiet Inter line, no rules, no pill. */
.article-meta {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.article-meta-line a {
  color: var(--muted);
  text-decoration: none;
}

.article-meta-line a:hover { color: var(--ink); }

.article-meta .dot { margin: 0 0.4em; }

/* The engine's "Evidence-based · N sources" badge reads as the line's tail. */
.article-badge {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.article-badge::before {
  content: "\00B7";
  margin: 0 0.4em;
}

.article-badge:hover { color: var(--ink); }

/* Hero — first in the column, short wide crop (SDXL masters are 3:2). */
.article-hero {
  order: -1;
  margin: 0 0 var(--stack);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  border-radius: 8px;
  background: var(--wash);
}

.article-hero figcaption {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.hero-credit { color: var(--muted); }
.hero-credit a { color: var(--muted); }
.hero-credit a:hover { color: var(--ink); }

/* ---- Summary (keyTakeaways) -------------------------------------------------
   engine ≥0.8.0 `article.takeaways: "collapsed"` → <details> with a chevron.
   The card form (older engines / default) gets the same plain treatment. */
.article-takeaways {
  font-family: var(--font-ui);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 var(--stack);
  padding: 0;
  background: none;
}

.article-takeaways-summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.article-takeaways-summary::-webkit-details-marker { display: none; }
.article-takeaways-summary::marker { content: ""; }

.article-takeaways-summary:hover { color: var(--green-deep); }

.article-takeaways-chevron {
  flex-shrink: 0;
  color: var(--green-deep);
  transition: transform 0.15s ease;
}

.article-takeaways[open] .article-takeaways-chevron { transform: rotate(90deg); }

/* Card-mode title (no chevron) — same line as the summary. */
.article-takeaways-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.article-takeaways ul {
  margin: 4px 0 16px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--list);
}

.article-takeaways li { margin: 0 0 10px; }
.article-takeaways li:last-child { margin-bottom: 0; }

/* ---- Body ------------------------------------------------------------------ */
.article-content {
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.7;
  color: var(--body);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.article-content p { margin: 0 0 1.1em; }

.article-content strong,
.article-content b { font-weight: 600; color: var(--ink); }

.article-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 42px 0 22px;
}

.article-content > h2:first-child { margin-top: 0; }

.article-content h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0 12px;
}

/* FAQ — question headings become a tight, divided Q&A list. */
.article-content h3.blog-faq-q {
  border-top: 1px solid var(--hairline);
  margin: 0;
  padding-top: 20px;
  font-size: 20px;
}

.article-content h3.blog-faq-q + p { margin: 8px 0 22px; }

.article-content a:not([class]) {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(9, 122, 63, 0.4);
}

.article-content a:not([class]):hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.article-content ul,
.article-content ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.article-content li { margin-bottom: 0.45em; }
.article-content li::marker { color: var(--muted); }

/* Plain blockquote — no pull-quote styling. */
.article-content blockquote {
  margin: 0 0 1.1em;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--hairline);
  color: var(--dek);
  font-style: normal;
}

.article-content blockquote p:last-child { margin-bottom: 0; }

.article-content hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2em 0;
}

.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--wash);
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

.article-content img { border-radius: 8px; }

/* Plain hairline tables: Inter, 1px rules, no zebra, no fills. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.4em;
  -webkit-overflow-scrolling: touch;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--list);
  border: none;
}

.article-content th {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: bottom;
}

.article-content td {
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
}

.article-content th:last-child,
.article-content td:last-child { padding-right: 0; }

.article-content td a:not([class]) { text-underline-offset: 2px; }

/* Code blocks (only when site.codeBlocks is on) */
.code-block {
  margin: 0 0 1.4em;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-ui);
}

.code-block-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--muted);
}

.code-lang { font-weight: 600; }

.code-copy {
  font: inherit;
  font-weight: 600;
  color: var(--green-deep);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
}

.code-block pre,
.code-plain {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--wash);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.55;
}

.code-block pre code,
.code-plain code { background: none; padding: 0; font-size: inherit; }

/* ---- Citations: [n] in Inter, green-deep, on the baseline -------------------- */
.article-cite {
  font-family: var(--font-ui);
  font-size: 0.75em;
  font-weight: 500;
  line-height: 0;
  vertical-align: baseline;
  margin-left: 0.15em;
  white-space: nowrap;
}

.article-cite a {
  color: var(--green-deep);
  text-decoration: none;
}

.article-cite a:hover { color: var(--ink); text-decoration: underline; }

.article-cite a::before { content: "["; }
.article-cite a::after { content: "]"; }

/* Numbered sources list */
.article-content .article-sources {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 1.6em;
}

.article-content .article-sources li {
  margin-bottom: 10px;
  scroll-margin-top: 24px;
  overflow-wrap: anywhere;
}

.article-content .article-sources li::marker { color: var(--muted); font-weight: 500; }

.article-content .article-sources li:target { color: var(--ink); }
.article-content .article-sources li:target::marker { color: var(--green-deep); font-weight: 700; }

.article-content .article-sources a {
  color: var(--list);
  text-decoration: none;
}

.article-content .article-sources a:hover {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-content h2[id],
.article-content h3[id] { scroll-margin-top: 24px; }

/* Hover anchors on section headings */
.hanchor {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 0.4em;
  color: var(--muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}

h2:hover .hanchor,
h3:hover .hanchor,
.hanchor:focus-visible { opacity: 0.75; }

.hanchor:hover { color: var(--green-deep); opacity: 1; }

/* Citation & license line (engine v0.9.0 `attribution`, blog-engine#47): last
   child of .article-content, after Sources. Quiet furniture, not prose — the
   line is there for agents that copy text, so it reads small and muted. Tokens
   only, so it follows the theme (forced light today). */
.article-content .article-citation {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 28px 0 0;
  overflow-wrap: anywhere;
}

.article-content .article-citation a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline);
}

.article-content .article-citation a:hover {
  color: var(--green-deep);
  text-decoration-color: currentColor;
}

/* ---- After the body: disclosure, tags -------------------------------------- */
.article-ai-disclosure {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 40px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.article-ai-disclosure a {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: none;
}

.article-ai-disclosure a:hover { color: var(--ink); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.article-tags:empty { display: none; }

.article-tag {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* ---- Sidebar: "On this page" ----------------------------------------------- */
.article-sidebar {
  position: sticky;
  top: 32px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding-top: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
}

.article-toc-title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}

.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-toc-item {
  padding-left: 15px;
}

.article-toc-link {
  display: block;
  color: var(--muted);
  text-decoration: none;
}

.article-toc-link:hover { color: var(--ink); }

.article-toc-item.active {
  margin-left: -1px;
  padding-left: 14px;
  border-left: 2px solid var(--green);
}

.article-toc-item.active .article-toc-link {
  color: var(--ink);
  font-weight: 600;
}

/* The phone board shows no TOC before the article — the collapsible
   mobile TOC is hidden at every width (decision recorded in the deploy file). */
.article-toc-mobile { display: none; }

/* ---- "Get the app" CTA (style/banner.html) — one quiet hairline block ------ */
.blog-cta {
  font-family: var(--font-ui);
  margin: 40px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.blog-page > .blog-cta { max-width: var(--measure); }

.blog-cta-eyebrow { display: none; }

.blog-cta-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.blog-cta-lede {
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 14px;
}

.blog-cta-form {
  display: flex;
  gap: 8px;
}

.blog-cta-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #D5DCE5;
  border-radius: 6px;
  padding: 10px 12px;
}

.blog-cta-form input[type="email"]:focus {
  outline: none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(9, 122, 63, 0.15);
}

.blog-cta-form button {
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--green-deep);
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
}

.blog-cta-form button:hover { background: var(--ink); }
.blog-cta-form button:disabled { opacity: 0.6; cursor: default; }

/* Honeypot — visually hidden. */
.blog-cta-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.blog-cta-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
  margin: 8px 0 0;
}

.blog-cta-msg:empty { display: none; }

.blog-cta-fine {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ---- Related articles ("Keep reading") ---------------------------------------- */
.related-articles {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.related-articles h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 20px;
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.related-articles .article-card-excerpt { display: none; }
.related-articles .article-card-title { font-size: 17px; }

/* ---- Blog index + hub pages ----------------------------------------------------- */
.blog-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--gutter) 80px;
}

.blog-header,
.hub-header { margin-bottom: 28px; max-width: 760px; }

.blog-header h1,
.hub-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 96;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.blog-header p,
.hub-header p {
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.5;
  color: var(--dek);
  margin: 0;
}

.hub-header .hub-eyebrow {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 10px;
}

.hub-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  margin: 40px 0 20px;
}

/* Topic tabs — hairline pills, ink when active. */
.blog-category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 32px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog-category-tabs::-webkit-scrollbar { display: none; }

.blog-category-tab {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 10px 14px;
}

.blog-category-tab:hover { color: var(--ink); border-color: #D5DCE5; }

.blog-category-tab.active {
  color: #FFFFFF;
  background: var(--ink);
  border-color: var(--ink);
}

/* Featured (latest / pillar) card */
.blog-featured { margin-bottom: 40px; }

.blog-featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.blog-featured-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--wash);
}

.blog-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-featured-content { padding: 0; }

.blog-featured-category,
.article-card-category {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 8px;
}

.blog-featured-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.blog-featured-excerpt {
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.5;
  color: var(--dek);
  margin: 0 0 14px;
}

.blog-featured-meta,
.article-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}

.blog-featured-meta span + span::before,
.article-card-meta span + span::before {
  content: "\00B7";
  margin: 0 0.5em;
}

.blog-featured-card:hover .blog-featured-title,
.article-card:hover .article-card-title { color: var(--green-deep); }

/* Card grid — image, then text; hairline separation, no shadows. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
  margin-bottom: 40px;
}

.article-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.article-card-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: var(--wash);
}

.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No-image tile — quiet wash + topic name. Never a broken img. */
.article-card-image--noimg,
.blog-featured-image--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wash);
  border: 1px solid var(--hairline);
}

.noimg-topic {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
}

.article-card-content { padding: 14px 0 0; }

.article-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-excerpt {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.5;
  color: var(--dek);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Editorial policy page reuses .article-page without a hero/meta. */
.article-content--plain h2:first-child { margin-top: 0; }

/* ---- Footer (style/footer.html) ----------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

.site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.site-footer-brand { color: var(--ink); font-weight: 500; }

.site-footer-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .article-layout { gap: 48px; grid-template-columns: minmax(0, var(--measure)) 220px; }
  .blog-grid,
  .related-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

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

  .article-sidebar { display: none; }

  .blog-featured-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 760px) {
  .site-nav-secondary { display: none; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --stack: 16px;
  }

  .site-header-inner { height: 52px; }
  .site-logo { font-size: 18px; }
  .site-logo-sub { display: none; }

  .site-nav .site-nav-cta {
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .article-page { padding: 20px var(--gutter) 64px; }

  /* Hero bleeds to the screen edges and meets the header. */
  .article-hero {
    margin: -20px calc(-1 * var(--gutter)) var(--stack);
    gap: 6px;
  }

  .article-hero img {
    aspect-ratio: 2 / 1;
    border-radius: 0;
  }

  .article-hero figcaption {
    padding: 0 var(--gutter);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .article-category { font-size: 13px; }

  .article-title {
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .article-dek { font-size: 18px; }

  .article-meta { font-size: 13px; }

  /* The phone board's byline stops at the date — no sources tail, so the
     line never wraps into a dangling "· Evidence-based". */
  .article-badge { display: none; }

  .article-takeaways-summary,
  .article-takeaways-title { min-height: 44px; font-size: 14px; }

  .article-takeaways ul { font-size: 15px; }

  .article-content { font-size: 18px; line-height: 1.65; }
  .article-content p { margin-bottom: 0.9em; }

  .article-content h2 {
    font-size: 25px;
    line-height: 1.15;
    margin: 32px 0 16px;
  }

  .article-content h3 { font-size: 20px; margin: 26px 0 10px; }
  .article-content h3.blog-faq-q { font-size: 18px; padding-top: 16px; }
  .article-content h3.blog-faq-q + p { margin-bottom: 18px; }

  .article-content table { font-size: 14px; }
  .article-content th { font-size: 13px; }
  .article-content .article-sources { font-size: 14px; }

  .blog-cta { padding: 16px; }
  .blog-cta-form { flex-direction: column; }
  .blog-cta-form button { width: 100%; }

  .related-articles-grid,
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .blog-page { padding: 28px var(--gutter) 56px; }

  .blog-header h1,
  .hub-header h1 { font-size: 32px; letter-spacing: -0.02em; }

  .blog-header p,
  .hub-header p { font-size: 18px; }

  .blog-featured-title { font-size: 26px; }
  .blog-featured-excerpt { font-size: 17px; }
}