/* ============================================================================
   blog.css - the BiWize library theme. One stylesheet, both themes.

   This file is self contained on purpose. A page under /insights/ loads this
   and nothing else: not styles.css, not article.css, not core.css. Mixing two
   of the site's stylesheets on one page has shipped real bugs, because all of
   them define --text, --accent and --surface differently.

   It also carries the styling for the chrome that /nav.js injects, because
   nav.js is founder approved markup this file may restyle but never rewrite.

   Themes key off [data-theme="dark"] on <html>, set by theme.js before this
   file is parsed. Never off the media query alone, or an explicit reader
   choice could not override the operating system.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Palette values are founder chosen and contrast checked. Do not invent new
   ones. The stage tones below are the only derived colours in this file and
   each carries its computed ratio.
   --------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --page:    #EFEDE7;   /* warm paper */
  --surface: #E4E1D9;   /* raised */
  --text:    #15191A;   /* 15.1:1 on page */
  --muted:   #4A5053;
  --accent:  #16394E;   /* 10.4:1 on page, 9.3:1 on surface, printed ink */
  --line:    #D9D6CE;

  /* Stage tones, light. Derived by mixing --accent #16394E toward an inked
     brass, itself 55% --accent-dark #C9A227 over 45% --text #15191A (#786421).
     Five steps, every one of them text safe on --page:
       foundation   #16394E  10.4:1
       intelligence #2F4443   8.3:1
       systems      #474F38   7.3:1
       enablement   #60592C   6.1:1
       operate      #786421   4.9:1                                          */
  --tone-foundation:   #16394E;
  --tone-intelligence: #2F4443;
  --tone-systems:      #474F38;
  --tone-enablement:   #60592C;
  --tone-operate:      #786421;

  /* Legacy aliases. nav.js carries inline style="" attributes that reference
     --green, --black and --blue-light. That markup is founder approved and
     this file may not edit it, so the names are mapped into this palette
     instead of being left undefined. */
  --green: var(--accent);
  --black: var(--page);
  --blue-light: var(--accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:    #1A1815;   /* warm near black */
  --surface: #242018;   /* raised */
  --text:    #EDE8DE;   /* 14.5:1 on page, 13.3:1 on surface */
  --muted:   #A89F8E;   /*  6.8:1 on page,  6.2:1 on surface */
  --accent:  #C9A227;   /*  7.3:1 on page,  6.7:1 on surface, brass */
  --line:    rgba(237, 232, 222, 0.14);

  /* Stage tones, dark. Derived by mixing --accent #C9A227 toward an aired
     accent, itself 40% --accent-light #16394E over 60% --text #EDE8DE
     (#97A2A4). Five steps, every one text safe on --page and on --surface:
       foundation   #C9A227  7.3:1 / 6.7:1
       intelligence #BDA246  7.1:1 / 6.5:1
       systems      #B0A266  6.9:1 / 6.3:1
       enablement   #A4A285  6.8:1 / 6.3:1
       operate      #97A2A4  6.8:1 / 6.2:1                                   */
  --tone-foundation:   #C9A227;
  --tone-intelligence: #BDA246;
  --tone-systems:      #B0A266;
  --tone-enablement:   #A4A285;
  --tone-operate:      #97A2A4;
}

:root {
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --ui:    "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;

  --shell: 1080px;
  --read:  68ch;
  --radius: 4px;
}

/* ---------------------------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 600; }
a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:root[data-theme="dark"] :focus-visible { outline-color: var(--accent); }

/* The three decoration layers the legacy stack injected. The library theme has
   no rain and no reveal effects, so they never take space. */
.matrix-rain,
#site-ambient-matrix,
.footer-matrix { display: none !important; }

/* ---------------------------------------------------------------------------
   3. INJECTED CHROME (nav.js)
   --------------------------------------------------------------------------- */

.skip-link {
  font-family: var(--ui) !important;
  background: var(--accent) !important;
  color: var(--page) !important;
}

#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  background: transparent;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
/* nav.js writes <img src="images/logo.png">, a document relative path. From a
   page under /insights/ that resolves to /insights/images/logo.png, which does
   not exist, so the catch all returned the homepage HTML with a 200 status and
   the browser rendered a 16 KB document as an image. Fixed at source on
   2026-09-26: nav.js now writes a root relative path, which resolves the same
   from every directory. The rule that hid the broken image is gone with it. */
.nav-logo-img img { width: 30px; height: 30px; object-fit: contain; }
.nav-logo-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.nav-logo-text span { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--text); background: var(--line); }
.nav-links a.active { color: var(--text); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--page);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { opacity: 0.88; }
.btn-login,
.btn-outline {
  background: transparent;
  color: var(--accent);
}
.btn-login:hover,
.btn-outline:hover { background: var(--line); opacity: 1; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 24px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.mobile-nav a:last-child { border-bottom: 0; }

footer {
  margin-top: 0;
  padding: 48px 24px 32px;
  border-top: 1px solid var(--line);
  background: var(--page);
}
.footer-map {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: var(--shell);
  margin: 0 auto 32px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.footer-group { display: flex; flex-direction: column; gap: 7px; }
.footer-group-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.footer-group a {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
}
.footer-group a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--shell);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); }

/* ---------------------------------------------------------------------------
   4. THE BLOG'S OWN HEADER AND THE THEME TOGGLE
   The toggle lives here, never in the shared nav.
   --------------------------------------------------------------------------- */

.blog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 24px 0;
}
.blog-bar-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.blog-bar-mark:hover { color: var(--text); }
.blog-bar-mark::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.theme-toggle .tg-icon { display: inline-flex; color: var(--accent); }
.theme-toggle .tg-icon svg { width: 15px; height: 15px; }
.theme-toggle .tg-icon svg.tg-sun { display: block; }
.theme-toggle .tg-icon svg.tg-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .tg-icon svg.tg-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .tg-icon svg.tg-moon { display: block; }

/* ---------------------------------------------------------------------------
   5. READING PROGRESS
   --------------------------------------------------------------------------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  z-index: 50;
}
.read-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .read-progress > span { transition: width 0.12s linear; }
}

/* ---------------------------------------------------------------------------
   6. SHELL AND INDEX HERO
   --------------------------------------------------------------------------- */

.blog-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.blog-hero {
  padding: 40px 0 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.blog-hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 16px;
  max-width: 17ch;
}
.blog-hero p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   7. CATALOGUE LOOKUP: SIDEBAR, SEARCH, CHIPS, VIEW SWITCH
   --------------------------------------------------------------------------- */

.blog-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.blog-sidebar { position: sticky; top: 20px; align-self: start; }
.blog-main { min-width: 0; }
.blog-controls { display: flex; flex-direction: column; gap: 18px; }

.blog-cat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
#blog-search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 14px;
  color: var(--text);
  outline: none;
}
#blog-search::placeholder { color: var(--muted); }
#blog-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.blog-filters { display: flex; flex-direction: column; gap: 1px; }
.filter-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
}
.filter-chip:hover { color: var(--text); background: var(--line); }
.filter-chip .count { font-family: var(--mono); font-size: 10.5px; }
.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--page);
  font-weight: 600;
}
.filter-chip.active .count { color: var(--page); opacity: 0.75; }

.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.view-switch button {
  padding: 5px 13px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--page);
}

.main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.result-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-count strong { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------------------
   8. SHELVES AND CARDS
   --------------------------------------------------------------------------- */

.shelf { margin: 0 0 12px; }
.shelf[hidden] { display: none; }
.shelf-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--tone, var(--accent));
  margin-bottom: 4px;
}
.shelf-h {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0;
}
.shelf-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.shelf[data-shelf="foundation"]   { --tone: var(--tone-foundation); }
.shelf[data-shelf="intelligence"] { --tone: var(--tone-intelligence); }
.shelf[data-shelf="systems"]      { --tone: var(--tone-systems); }
.shelf[data-shelf="enablement"]   { --tone: var(--tone-enablement); }
.shelf[data-shelf="operate"]      { --tone: var(--tone-operate); }

.blog-list { display: flex; flex-direction: column; }

.blog-card {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.blog-card:hover .blog-title { color: var(--accent); }
.blog-card:hover .blog-read::after { transform: translateX(4px); }

.blog-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.blog-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.blog-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tone, var(--muted));
}
.blog-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tone, var(--muted));
}
.blog-tag.foundation,   [data-stage="foundation"]   { --tone: var(--tone-foundation); }
.blog-tag.intelligence, [data-stage="intelligence"] { --tone: var(--tone-intelligence); }
.blog-tag.systems,      [data-stage="systems"]      { --tone: var(--tone-systems); }
.blog-tag.enablement,   [data-stage="enablement"]   { --tone: var(--tone-enablement); }
.blog-tag.operate,      [data-stage="operate"]      { --tone: var(--tone-operate); }

.blog-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 8px;
  transition: color 0.15s ease;
}
.blog-excerpt {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.58;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 64ch;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.blog-byline { font-size: 12.5px; color: var(--muted); }
.blog-byline .author { color: var(--text); font-weight: 600; }
.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.blog-read::after { content: '\2192'; transition: transform 0.18s ease; }

/* ---- the anchor piece -----------------------------------------------------
   The featured article is the catalogue's deliberate starting point, so it is
   a plate of its own above the shelves rather than a badge on the first row. */

.shelf-anchor { margin-bottom: 32px; }
.blog-card.is-featured {
  position: relative;
  padding: 26px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone-foundation);
  border-radius: var(--radius);
}
.blog-card.is-featured:hover { border-color: var(--accent); }
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.featured-badge::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.blog-card.is-featured .blog-title {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.blog-card.is-featured .blog-excerpt { font-size: 16.5px; }

/* ---- spine view -----------------------------------------------------------
   All ten titles at once, denser than a card. */

#blog-spine { display: none; border-top: 1px solid var(--line); }
body[data-view="spine"] #blog-grid { display: none; }
body[data-view="spine"] #blog-spine { display: block; }

.spine-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: baseline;
  gap: 16px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.spine-row:hover { background: var(--line); }
.spine-row:hover .spine-title { color: var(--accent); }
.spine-title {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 2px;
}
.spine-line {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spine-tag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone, var(--muted));
  white-space: nowrap;
}
.spine-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tone, var(--muted));
}

/* ---- empty state and pagination ------------------------------------------ */

.empty-state {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  margin: 20px 0;
}
.empty-state h3 { font-size: 18px; margin: 0 0 6px; color: var(--text); }
.empty-state p { margin: 0; font-size: 14px; color: var(--muted); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pagination button {
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.pagination button:hover:not(:disabled) { color: var(--text); background: var(--line); }
.pagination button.active { background: var(--accent); border-color: var(--accent); color: var(--page); }
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   9. BANDS: SUBSCRIBE AND END CTA
   --------------------------------------------------------------------------- */

.subscribe-section,
.end-cta {
  margin: 56px 0 72px;
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.subscribe-section .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.subscribe-section h2,
.end-cta h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 10px;
}
.subscribe-section p,
.end-cta p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   10. ARTICLE
   --------------------------------------------------------------------------- */

.page-hero {
  padding: 36px 0 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.art-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 18px;
}
.art-meta .stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}
.art-meta .stage::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tone, var(--accent));
}
.art-meta .author { color: var(--text); }

.art-h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 18px;
}
.art-lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.art-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.72;
  color: var(--text);
  max-width: var(--read);
}
.art-body p { margin: 0 0 1.25em; }
.art-body h2 {
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 2.2em 0 0.7em;
  padding-top: 0.6em;
  border-top: 1px solid var(--line);
}
.art-body h3 {
  font-size: 20.5px;
  line-height: 1.3;
  margin: 1.9em 0 0.5em;
}
.art-body a { color: var(--accent); text-underline-offset: 3px; }
.art-body strong {
  font-weight: 700;
  color: var(--text);
  box-shadow: inset 0 -0.42em 0 var(--line);
}
.art-body ul, .art-body ol { padding-left: 1.2em; margin: 0 0 1.25em; }
.art-body li { margin-bottom: 0.45em; }
.art-body code { font-family: var(--mono); font-size: 0.88em; }

/* WIDE CONTENT SCROLLS ITSELF RATHER THAN BEING CUT OFF.
   body carries overflow-x:hidden so a stray full width element cannot drag
   the whole page sideways. The cost is that anything wider than the reading
   measure is silently CLIPPED instead of merely overflowing, and clipped is
   worse than a scrollbar: the reader cannot tell there is more, so a table's
   last column or a long line of code simply does not exist for them on a
   phone. These two get their own scroll container so the page stays put and
   the content stays reachable.

   display:block on a table is what makes overflow-x apply to it at all. It
   costs the table its automatic full width stretch, which is the cheaper
   loss. */
.art-body table,
.art-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* A scrollable region needs to be reachable by keyboard, and CSS alone cannot
   make one focusable. Nothing here adds tabindex, so a keyboard only reader
   still cannot pan a wide table. Recorded rather than hidden: it needs a
   markup change across the article set, which is its own job. */

/* The pull quote. The only block level break in the prose, so it is the
   skimmer's anchor. Styled from markup the article already carries. */
.art-body blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--text);
}

.author-box {
  margin: 48px 0 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.author-box strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 5px;
}
.author-box p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.author-box a { color: var(--accent); }

.related { margin: 36px 0 0; }
.related h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}
.related li a { font-family: var(--serif); font-weight: 600; color: var(--text); text-decoration: none; }
.related li a:hover { color: var(--accent); text-decoration: underline; }

.end-cta { text-align: left; }
.end-cta p { margin-left: 0; }

/* ---------------------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .nav-links { display: none; }
  #main-nav .btn-primary { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 860px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .blog-sidebar { position: static; }
  .blog-filters { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .filter-chip {
    width: auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 680px) {
  #main-nav { padding: 12px 16px; }
  #main-nav .btn-login { display: none; }
  .blog-shell, .art-shell, .blog-bar { padding-left: 16px; padding-right: 16px; }
  .blog-hero { padding: 28px 0 28px; }
  .blog-title { font-size: 19px; }
  .blog-card.is-featured { padding: 20px 18px; }
  .blog-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .spine-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .spine-tag { justify-self: start; }
  .subscribe-section, .end-cta { padding: 28px 20px; margin: 40px 0 56px; }
  .subscribe-section h2, .end-cta h3 { font-size: 22px; }
  .art-body { font-size: 17px; }
  .art-body h2 { font-size: 23px; }
  .art-body blockquote { font-size: 19px; padding-left: 18px; }
  footer { padding: 36px 16px 28px; }
  .footer-map { gap: 26px; }
}

/* ---------------------------------------------------------------------------
   12. PRINT
   --------------------------------------------------------------------------- */

@media print {
  #main-nav, .mobile-nav, footer, .read-progress, .blog-bar, .end-cta { display: none !important; }
  body { background: #fff; color: #000; }
}