/* ================================================================
   MIKE KINGSELLA — SHARED SITE STYLES (level-2 pages)
   Mobile-first · base 390px · breakpoints 768/1024
   ================================================================ */

:root {
  --cream:        #f4efe4;
  --cream-dark:   #ede8dc;
  --ink:          #141410;
  --teal:         #006869;
  --teal-mid:     #007f80;
  --teal-light:   #009496;
  --teal-tint-04: rgba(0, 104, 105, 0.04);
  --teal-tint-08: rgba(0, 104, 105, 0.08);
  --teal-tint-16: rgba(0, 104, 105, 0.16);
  --rule:         rgba(20, 20, 16, 0.12);
  --rule-light:   rgba(20, 20, 16, 0.07);
  --rule-strong:  rgba(20, 20, 16, 0.25);
  --fg-2:         rgba(20, 20, 16, 0.72);
  --fg-3:         rgba(20, 20, 16, 0.55);
  --fg-4:         rgba(20, 20, 16, 0.32);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-body:    'Lora', Georgia, 'Times New Roman', serif;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);

  --pad-x:        24px;
  --nav-h:        56px;
  /* Safe-zone: minimum breathing room below the fixed nav for any
     scrolled or sticky content. Sticky elements must offset by
     var(--nav-h) + var(--space-safe) — never less. */
  --space-safe:   40px;

  /* Rule-gap system — see HANDOFF.md §4.
     Every horizontal rule has identical breathing room on both sides
     via these tokens. `--rule-gap` for section breaks; `--rule-gap-tight`
     for dividers inside cards / row borders. */
  --rule-gap:       56px;
  --rule-gap-tight: 20px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ── KICKER ─────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--teal);
  flex-shrink: 0;
}

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 202;
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
}
.nav-wordmark {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.nav-links { display: none; align-items: center; }
.nav-links li { display: flex; align-items: center; }
.nav-links li + li::before {
  content: '';
  width: 1px; height: 12px;
  background: var(--rule);
  margin: 0 18px;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color 180ms var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.nav-accent { color: var(--teal); }
.nav-links a.nav-accent:hover { color: var(--teal-mid); }
.nav-links a.is-active {
  color: var(--ink);
}
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -19px;
  height: 2px;
  background: var(--teal);
}

.nav-toggle {
  background: transparent;
  border: 0;
  padding: 8px;
  margin-right: -8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 20px;
  background: var(--ink);
  transition: transform 220ms var(--ease), opacity 180ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-110%);
  transition: transform 280ms var(--ease);
  z-index: 201;
  padding: 8px var(--pad-x) 28px;
}
.nav-drawer[data-open="true"] { transform: translateY(0); }
.nav-drawer ul { display: flex; flex-direction: column; }
.nav-drawer li { border-bottom: 1px solid var(--rule-light); }
.nav-drawer li:last-child { border-bottom: none; }
.nav-drawer a {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 18px 0;
}
.nav-drawer a.nav-accent { color: var(--teal); }
.nav-drawer a.is-active { color: var(--teal); }

main { padding-top: var(--nav-h); }

/* ── HOMEFRONT PROMO TICKER (site-wide above-the-nav ink strip) ──────────
   Moved here from home.css: the dismissible Homefront subscribe banner is
   now rendered site-wide (via partials/nav.ejs, gated server-side by the
   hf_promo_dismissed cookie → the `showPromo` local). The --ticker-h /
   .has-ticker offset cascade lives here too so EVERY page that mounts the
   banner pushes its content down by the banner height (no overlap). The
   homepage's sticky .signal ticker (home.css) composes with --ticker-h. */
.hf-promo {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  z-index: 150; height: 38px;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: stretch; overflow: hidden;
  border-bottom: 1px solid rgba(244, 239, 228, 0.08);
}
.hf-promo[hidden] { display: none; }
.hf-promo-label {
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
  border-right: 1px solid rgba(244, 239, 228, 0.10);
  flex-shrink: 0; user-select: none;
}
.hf-promo-dot {
  width: 6px; height: 6px;
  background: var(--teal-light); border-radius: 50%;
  animation: hfPromoPulse 1.9s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hfPromoPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.30; transform: scale(0.78); }
}
.hf-promo-link {
  flex: 1; min-width: 0; display: flex; align-items: center;
  overflow: hidden; text-decoration: none;
  color: var(--cream); position: relative; cursor: pointer;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 18px), transparent 100%);
  /* min-width: 0 releases the link from its content's intrinsic
     min-content size (the wide nowrap .hf-promo-track inside). Without
     it, flex-shrink can't shrink the link below its content width, the
     box-model layout exceeds viewport, and iOS Safari leaks that into
     document horizontal scroll even though .hf-promo has overflow:hidden.
     Mirrors the same fix already applied to .signal-viewport. */
}
.hf-promo-track {
  display: flex; align-items: center; gap: 32px;
  white-space: nowrap; padding-left: 32px;
  animation: hfPromoScroll 42s linear infinite;
  will-change: transform;
}
.hf-promo:hover .hf-promo-track,
.hf-promo:focus-within .hf-promo-track { animation-play-state: paused; }
@keyframes hfPromoScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.hf-promo-item {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream);
  flex-shrink: 0;
}
.hf-promo-item--ed {
  font-family: var(--font-body); font-style: italic;
  font-size: 13.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: rgba(244, 239, 228, 0.78);
}
.hf-promo-item--cta {
  color: var(--teal-light);
  display: inline-flex; align-items: center; gap: 6px;
}
.hf-promo-item--cta .hf-promo-arrow { transition: transform 200ms var(--ease); }
.hf-promo-link:hover .hf-promo-item--cta { color: var(--cream); }
.hf-promo-link:hover .hf-promo-arrow { transform: translateX(4px); }
.hf-promo-sep {
  width: 4px; height: 4px;
  background: var(--teal); flex-shrink: 0; opacity: 0.85;
}
.hf-promo-close {
  flex-shrink: 0; background: transparent; border: none;
  border-left: 1px solid rgba(244, 239, 228, 0.10);
  color: rgba(244, 239, 228, 0.55);
  font-family: var(--font-ui); font-size: 20px; line-height: 1;
  padding: 0 16px; cursor: pointer;
  transition: color 160ms var(--ease);
}
.hf-promo-close:hover,
.hf-promo-close:focus-visible { color: var(--cream); outline: none; }

/* --ticker-h is the dynamic offset that everything docked-below-nav
   composes with. Default 0; the .has-ticker body class (server-set when the
   banner renders; removed client-side on dismiss) bumps it to the promo's
   height. Both `main { padding-top }` and the sticky `.signal { top }`
   (homepage) read it, so dismissing the promo slides content/ticker up. */
:root         { --ticker-h: 0px;  }
.has-ticker   { --ticker-h: 38px; }

/* When the ticker is mounted, push everything anchored to the nav down. */
.has-ticker main        { padding-top: calc(var(--nav-h) + var(--ticker-h)); }
.has-ticker .nav-drawer { top: calc(var(--nav-h) + var(--ticker-h)); }
/* When the drawer opens, hf-promo is hidden via JS so the ticker
   offset becomes an empty 38px gap. Pin the drawer back to var(--nav-h)
   only while it's open; the closed-state offset still applies. */
.has-ticker .nav-drawer[data-open="true"] { top: var(--nav-h); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--teal); color: var(--cream); }
.btn-primary:hover { background: var(--teal-mid); }
.btn-primary:active { background: var(--teal-light); }
.btn-ghost {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--fg-2);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header {
  padding: 80px var(--pad-x) 48px;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.page-header::before {
  content: '';
  position: absolute;
  top: 40px; left: var(--pad-x);
  width: 40px; height: 2px;
  background: var(--teal);
}
.ph-breadcrumb {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 24px;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ph-breadcrumb a { color: var(--fg-3); transition: color 160ms var(--ease); }
.ph-breadcrumb a:hover { color: var(--teal); }
.ph-breadcrumb .sep { color: var(--fg-4); }
.ph-breadcrumb .current { color: var(--ink); }
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 13vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.page-title em {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--teal);
}
.page-deck {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 600px;
  text-wrap: pretty;
}
.page-meta {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-light);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}
.page-meta strong {
  display: block;
  color: var(--fg-4);
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 9px;
}
.page-meta span { color: var(--ink); font-weight: 600; }

/* ── SECTION SHELL ──────────────────────────────────────── */
.section {
  padding: 56px var(--pad-x);
  border-top: 1px solid var(--rule);
}
.section:first-of-type { border-top: none; }
.section h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 22px;
  margin-bottom: 28px;
  text-wrap: balance;
}
.section h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.section p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-2);
  margin-bottom: 18px;
  text-wrap: pretty;
}
.section p strong { color: var(--ink); font-weight: 600; }

/* ── BADGES ────────────────────────────────────────────── */
.badge {
  font-family: var(--font-ui);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-tint-08);
  padding: 3px 7px;
  line-height: 1.4;
  display: inline-block;
}
.meta-date {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── INDEX LIST (used by writing/media/speaking/homefront) ── */
.index-list { display: flex; flex-direction: column; }
.index-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-light);
  position: relative;
  transition: padding-left 200ms var(--ease);
}
.index-item:first-child { border-top: 1px solid var(--rule-light); }
.index-item:hover { padding-left: 6px; }
.index-item:hover .idx-title { color: var(--teal); }
.index-item:hover .idx-arrow { gap: 12px; color: var(--teal-mid); }
.idx-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.idx-title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: color 180ms var(--ease);
  text-wrap: pretty;
}
.idx-dek {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-3);
  font-style: italic;
  text-wrap: pretty;
}
.idx-arrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 180ms var(--ease), color 160ms var(--ease);
}
.idx-arrow::after { content: '→'; }

/* ── FILTER BAR ────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px var(--pad-x) 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  /* Filter bar docks directly under nav — its own padding (22px top)
     acts as the safe zone. Other sticky elements should use
     top: calc(var(--nav-h) + var(--space-safe)). */
}
.filter-bar-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
  width: 100%;
  margin-bottom: 4px;
}
.filter-chip {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 7px 12px;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.filter-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.filter-count {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  color: var(--fg-4);
  margin-left: 6px;
  letter-spacing: 0;
}
.filter-chip[aria-pressed="true"] .filter-count { color: rgba(244, 239, 228, 0.5); }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 36px var(--pad-x) 32px;
  background: var(--cream-dark);
}
.footer-brand p {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.footer-brand span {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.footer-links {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.footer-links a {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color 180ms var(--ease);
}
.footer-links a:hover { color: var(--teal); }
.footer-meta {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-light);
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}

/* ── PROSE BLOCK (long-form text on About) ─────────────── */
.prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.78;
  color: var(--fg-2);
  margin-bottom: 22px;
}
.prose p:first-of-type::first-line {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 32px 0;
  padding-left: 22px;
  border-left: 2px solid var(--teal);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ── NEWSLETTER STRIP (used at bottom of multiple pages) ── */
.newsletter-strip {
  border-top: 1px solid var(--rule);
  background: var(--cream-dark);
  padding: 64px var(--pad-x);
}
.newsletter-strip h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 22px;
  margin-bottom: 16px;
  text-wrap: balance;
}
.newsletter-strip .ns-desc {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg-2);
  font-style: italic;
  margin-bottom: 28px;
}
.ns-form { display: flex; flex-direction: column; gap: 10px; }
.ns-form input {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 15px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 180ms var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ns-form input:focus { border-color: var(--teal); }
.ns-form input::placeholder { color: var(--fg-4); font-style: italic; }
.ns-form button {
  background: var(--teal);
  color: var(--cream);
  border: none;
  padding: 15px 24px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 180ms var(--ease);
}
.ns-form button:hover { background: var(--teal-mid); }
.ns-fine {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── ENTRY ANIMATIONS ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .a1 { animation: fadeUp 0.7s 0.05s var(--ease) both; }
  .a2 { animation: fadeUp 0.7s 0.18s var(--ease) both; }
  .a3 { animation: fadeUp 0.7s 0.32s var(--ease) both; }
  .a4 { animation: fadeUp 0.7s 0.46s var(--ease) both; }
}

/* ================================================================
   TABLET — min-width: 768px
   ================================================================ */
@media (min-width: 768px) {
  :root {
    --pad-x: 40px;
    --nav-h: 58px;
    --space-safe: 56px;
    --rule-gap: 80px;
    --rule-gap-tight: 22px;
  }
  .nav-toggle, .nav-drawer { display: none; }
  .nav-links { display: flex; }
  .nav-links a.is-active::after { bottom: -20px; }

  .page-header { padding: 104px var(--pad-x) 64px; }
  .page-header::before { top: 56px; left: var(--pad-x); width: 48px; }
  .page-title { font-size: clamp(60px, 9vw, 84px); }

  .section { padding: 80px var(--pad-x); }
  .section h2 { font-size: clamp(34px, 5vw, 44px); }

  .filter-bar {
    align-items: center;
    gap: 10px;
    padding: 18px var(--pad-x);
  }
  .filter-bar-label { width: auto; margin-bottom: 0; margin-right: 10px; }

  .newsletter-strip { padding: 80px var(--pad-x); }

  footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: start;
    padding: 40px var(--pad-x);
  }
  .footer-links {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }
  .footer-meta { grid-column: 1 / -1; }
}

/* ================================================================
   DESKTOP — min-width: 1024px
   ================================================================ */
@media (min-width: 1024px) {
  :root {
    --pad-x: 52px;
    --rule-gap: 96px;
    --rule-gap-tight: 24px;
  }

  .page-header { padding: 112px var(--pad-x) 80px; }
  .page-header::before { top: 80px; width: 56px; }

  .section { padding: 96px var(--pad-x); }
}

@media (min-width: 1400px) {
  :root { --pad-x: 64px; }
}

/* ================================================================
   ARTICLE PAGE — used by hf-*, md-*, sp-*, wr-* article files
   ================================================================ */

.article-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.article-header {
  padding: 80px 0 40px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.article-header::before {
  content: '';
  position: absolute;
  top: 40px; left: 0;
  width: 40px; height: 2px;
  background: var(--teal);
}

.article-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.article-byline {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.article-byline strong { color: var(--ink); font-weight: 600; }

/* Tag chips (under the byline on piece headers; also on listing rows). Topic
   chips reuse the legacy .entry-tag badge look (lifted out of the entry-only
   inline block so all sections share it). Track chips carry a teal accent so
   the blocker facet reads as distinct. On piece headers the chips render as
   <a> links to the pre-filtered archive (track -> /archive?track=<key>,
   topic -> /archive?topic=<slug>); text-decoration:none keeps the look
   identical to the span chips on listing rows. */
.entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.entry-tag {
  font-family: var(--font-ui); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
  padding: 3px 8px; border: 1px solid var(--rule); text-decoration: none;
}
.entry-tag--track { color: var(--teal); border-color: var(--teal); }
/* Link affordance — only the linked (header) chips get a pointer + hover. */
a.entry-tag {
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
a.entry-tag:hover { color: var(--teal); border-color: var(--teal); background: var(--teal-tint-08); }

.article-hero {
  padding: 32px 0 0;
  border-bottom: 1px solid var(--rule-light);
}
.article-hero-frame {
  background: var(--cream-dark);
  border: 1px solid var(--rule-light);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
.article-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-hero-frame--filled { background: var(--ink); }
.article-hero-placeholder {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.article-hero-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  padding: 0 0 32px;
  text-wrap: pretty;
}

.article-body { padding: 40px 0; }

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 40px 0 18px;
  text-wrap: balance;
}
.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 32px 0 14px;
}

.article-body p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.article-body p:last-child { margin-bottom: 0; }

/* Inline prose links get the teal underline treatment. Buttons that
   live inside article body (e.g. :::tout CTAs rendered as
   <a class="btn btn-primary">) are explicitly excluded so they keep
   their .btn-primary cream-on-teal color and don't pick up an
   accidental teal-underline border that competes with the button
   shape. The :not(.btn) bump also wins specificity against any
   future .btn variants placed inside article body. */
.article-body a:not(.btn) {
  color: var(--teal);
  border-bottom: 1px solid currentColor;
  transition: color 160ms var(--ease);
}
.article-body a:not(.btn):hover { color: var(--teal-mid); }

.article-body ul {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
}
.article-body ul li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  padding: 8px 0 8px 26px;
  position: relative;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 14px; height: 1.5px;
  background: var(--teal);
}

.article-body blockquote.callout {
  margin: 32px 0;
  padding: 24px 22px;
  background: var(--teal-tint-04);
  border-left: 3px solid var(--teal);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.article-body blockquote.callout cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── :::quote — pull quote with attribution (HANDOFF.md §A15.1) ─────
   Distinct from .callout: no tinted background, thinner left rule,
   body-size italic body, attribution in label color (not teal). */
.article-body blockquote.quote {
  margin: 32px 0;
  padding-left: var(--rule-gap-tight);
  border-left: 2px solid var(--teal);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.article-body blockquote.quote p { margin-bottom: 12px; }
.article-body blockquote.quote p:last-of-type { margin-bottom: 0; }
.article-body blockquote.quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.article-body .tout {
  margin: 36px 0;
  padding: 26px 24px;
  background: var(--cream-dark);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
}
.article-body .tout-kicker {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.article-body .tout p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.68;
  color: var(--fg-2);
  margin-bottom: 14px;
}
/* .tout-cta used to live here as a bespoke button style for the
   :::tout CTA. HANDOFF.md §8 calls for `<a class="btn btn-primary">`
   instead, which the content loader now emits — making .tout-cta
   dead code. Removed in the same commit that fixed the .article-body
   a vs .btn-primary specificity collision. */

/* Related reading */
.related-reading {
  border-top: 1px solid var(--rule);
  padding: 56px 0 40px;
}
.related-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
}
.related-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-light);
  transition: padding-left 180ms var(--ease);
  display: block;
}
.related-item:first-child { border-top: 1px solid var(--rule-light); }
.related-item:hover { padding-left: 6px; }
.related-item:hover h3 { color: var(--teal); }
.related-item .related-meta {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
.related-item h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 6px;
  transition: color 180ms var(--ease);
  text-wrap: pretty;
}
.related-item p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-3);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .article-page { padding: 0 calc(var(--pad-x) + 24px); }
  .article-header { padding: 104px 0 48px; }
  .article-header::before { top: 56px; width: 48px; }
  .article-body { padding: 56px 0; }
  .related-reading { padding: 72px 0 48px; }
}
@media (min-width: 1024px) {
  .article-page { max-width: 820px; padding: 0 var(--pad-x); }
  .article-header { padding: 112px 0 56px; }
  .article-header::before { top: 80px; width: 56px; }
}

/* Honeypot field — visually hidden but available to bots that fill
   every input. The original left:-10000px offscreen hide leaked on
   some mobile browsers (the field rendered visibly under the email
   input). This is the bulletproof visually-hidden pattern — keeps the
   field in the DOM and tab order suppressed via tabindex="-1" on the
   markup side, but reliably invisible across every viewport including
   mobile. Do not switch back to display:none — naive scrapers can
   detect that and skip the field. */
.hp-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ================================================================
   PRESS PAGE — /press
   Reference: press-kit-handoff/reference/press-page-reference.html
   Two-column grid (bios | photos) on tablet+; stacked on mobile.
   ================================================================ */
.press-grid-section {
  padding: 56px var(--pad-x);
  border-top: 1px solid var(--rule);
}
.press-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
.press-col-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.press-col-label::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--teal);
}
.press-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bio card */
.bio-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
}
.bio-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 6px;
}
.bio-length {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.bio-words {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.bio-use {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 0 16px;
}
.bio-preview {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 22px;
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  text-wrap: pretty;
  white-space: pre-wrap;
}
.bio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Photo card */
.shot-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.shot-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--cream-dark);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.shot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-thumb--illustration {
  aspect-ratio: 4 / 5;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-thumb--illustration img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.shot-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shot-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shot-type {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.shot-format {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.shot-credit {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
}
.shot-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Section-scoped utility button — third variant beyond .btn-primary /
   .btn-ghost, scoped to /press and the kit teaser cards. See
   BRAND-STANDARDS.md §17 for the rationale. */
.kit-action {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 14px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms var(--ease),
              color 180ms var(--ease),
              border-color 180ms var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}
.kit-action:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.kit-action--primary {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
}
.kit-action--primary:hover {
  background: var(--teal-mid);
  color: var(--cream);
  border-color: var(--teal-mid);
}
.kit-action--primary.is-copied {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* Rights & contact footer strip on /press */
.press-footer {
  padding: 56px var(--pad-x);
  border-top: 1px solid var(--rule);
  background: var(--cream-dark);
}
.press-footer .kicker { margin-bottom: 18px; }
.press-footer p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
  margin: 0 0 14px;
  max-width: 720px;
  text-wrap: pretty;
}
.press-footer p:last-child { margin-bottom: 0; }
.press-footer a {
  color: var(--teal);
  border-bottom: 1px solid currentColor;
}
.press-footer a:hover { color: var(--teal-mid); }

@media (min-width: 768px) {
  .press-grid-section { padding: 88px var(--pad-x); }
  .press-footer       { padding: 88px var(--pad-x); }
  .press-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}
@media (min-width: 1024px) {
  .press-grid { gap: 72px; }
}

/* ================================================================
   PRESS-KIT TEASER — shared by /speaking and /media
   Reference: press-kit-handoff/reference/teasers-reference.html
   ================================================================ */
.kit-teaser {
  padding: 56px var(--pad-x);
  border-top: 1px solid var(--rule);
  background: var(--cream-dark);
}
.teaser-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 28px 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.teaser-meta .kicker { margin-bottom: 14px; }
.teaser-meta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4.6vw, 30px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.teaser-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 16px;
  max-width: 460px;
  text-wrap: pretty;
}
.teaser-link {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 200ms var(--ease), color 180ms var(--ease);
  text-decoration: none;
}
.teaser-link::after { content: '→'; }
.teaser-link:hover { gap: 12px; color: var(--teal-mid); }

@media (min-width: 768px) {
  .kit-teaser { padding: 88px var(--pad-x); }
  .teaser-card {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 36px 36px;
    align-items: center;
  }
}


/* ================================================================
   ARTICLE TEMPLATE — three-column shell (amendment)
   ================================================================
   Source: article-template-handoff/article-styles.css, appended per
   article-template-handoff/HANDOFF.md §5. Additions only — the existing
   .article-page / .article-header / .article-body / .prose blocks above
   are untouched.

   Single variant breakpoint: 1100px (grid / sidebar / .mobile-toc /
   .article-related--mobile-only). The foot Related grid snaps to the
   existing 768px breakpoint. The retired .article-end-mark system is
   replaced by .article-signoff / .article-endmark below.
   ================================================================ */


/* ── Three-column layout shell ──────────────────────────── */
/* Below 1100px the wrapper is a transparent passthrough so the article
   keeps its standalone .article-page sizing (centered, capped, padded).
   At >= 1100px the wrapper becomes the centered grid container and the
   article fills the middle column. Scoped to >= 1100px (reconciliation):
   keeps the 768-1100 range at its capped line length rather than going
   full width. */

.article-sidebar { display: none; }

@media (min-width: 1100px) {
  .article-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 240px minmax(0, 760px) 1fr;
    gap: 64px;
    align-items: start;
  }
  .article-layout .article-page {
    /* Override the standalone article-page max-width/padding inside the
       grid (this wins over the >= 1024px max-width:820px rule). */
    padding: 0;
    max-width: none;
  }
  .article-sidebar {
    display: block;
    position: sticky;
    top: var(--nav-h);
    /* padding-top calibrated so the sidebar's section-label rule aligns
       pixel-for-pixel with the .article-header::before teal accent rule
       (top: 80px on >= 1024px viewports). */
    padding-top: 76px;
    padding-bottom: 80px;
  }
}


/* ── Sidebar section label (Contents / Related reading) ── */
/* Locked: display:flex (not inline-flex) + line-height:1 so the line-box
   leading doesn't push the rule below the article accent rule. */

.sb-block + .sb-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-light);
}
.sb-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  width: fit-content;
  align-items: center;
  line-height: 1;
  gap: 12px;
  margin-bottom: 18px;
}
.sb-label::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--teal);
  flex-shrink: 0;
}


/* ── TOC (long-article rail) ─────────────────────────────── */

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { display: block; }
.toc-list a {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  /* Full heading text wraps to multiple lines; tighter leading keeps a wrapped
     entry compact while the 7px top/bottom padding keeps a clear gap between
     entries so adjacent items never visually merge. (Previously clipped to one
     line with nowrap + ellipsis — removed so labels show in full.) */
  line-height: 1.25;
  color: var(--fg-2);
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--rule-light);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.toc-list a:hover {
  color: var(--ink);
  border-left-color: var(--rule-strong);
}
.toc-list a.is-active {
  color: var(--teal);
  border-left-color: var(--teal);
  font-weight: 600;
}

/* H2 anchor offset so TOC jumps don't land under the fixed nav. */
.article-body h2[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }


/* ── Related reading (short-article rail) ────────────────── */

.sb-related a {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--rule-light);
  transition: color 160ms var(--ease);
}
.sb-related a:first-of-type { border-top: 0; padding-top: 0; }
.sb-related a:last-of-type { padding-bottom: 0; }
.sb-related .rr-meta {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.sb-related .rr-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  text-wrap: pretty;
  transition: color 160ms var(--ease);
}
.sb-related a:hover .rr-title { color: var(--teal); }


/* ── Mobile Contents disclosure (long article, < 1100px) ── */

.mobile-toc {
  display: block;
  margin: 0 0 32px;
}
@media (min-width: 1100px) {
  .mobile-toc { display: none; }
}
.mobile-toc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1;
}
.mobile-toc summary::-webkit-details-marker { display: none; }
.mobile-toc summary::marker { content: ''; }
.mobile-toc summary::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--teal);
  flex-shrink: 0;
}
.mobile-toc .mt-count {
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.mobile-toc .mt-caret {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
  transition: transform 220ms var(--ease);
}
.mobile-toc[open] .mt-caret {
  transform: rotate(180deg);
  color: var(--teal);
}
.mobile-toc .mt-list {
  list-style: none;
  padding: 16px 0 0;
  margin: 0;
}
.mobile-toc .mt-list li { display: block; }
.mobile-toc .mt-list a {
  display: block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  /* Match the rail: full text wraps with tight leading (the 9px padding keeps
     entries separated). */
  line-height: 1.25;
  color: var(--fg-2);
  padding: 9px 0 9px 14px;
  border-left: 1px solid var(--rule-light);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.mobile-toc .mt-list a:hover,
.mobile-toc .mt-list a:active {
  color: var(--teal);
  border-left-color: var(--teal);
}


/* ── End-of-essay signoff + endmark ──────────────────────── */
/* Italic source line followed by an inline teal mark, with a single
   hairline rule above (.article-signoff). When there is no signoff,
   .article-endmark renders just the mark with no rule above it. Replaces
   the retired .article-end-mark / page.js inline-placement system. */

.article-signoff {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-3);
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule-light);
  text-wrap: pretty;
}
/* `.article-body .endmark` covers the page.js-injected inline mark (a
   bare .endmark in a trailing <p>/<li>); the other two are subsets but
   kept explicit. */
.article-body .endmark,
.article-signoff .endmark,
.article-endmark .endmark {
  color: var(--teal);
  font-style: normal;
  margin-left: 6px;
}
.article-endmark {
  font-family: var(--font-ui);
  margin: 28px 0 0;
}

/* ── TAKE-page outbound source call-out ──────────────────── */
/* media · speaking · entries. Rendered in views/partials/take.ejs as a
   styled call-out (kicker "ORIGINAL SOURCE" + "{Verb} at {outlet/venue} ↗"),
   reusing the .tout card look — see .article-body .tout above. The
   take-source class is a semantic hook; .tout supplies the styling. */


/* ── Article-foot Related reading ────────────────────────── */
/* Always in markup. Hidden on desktop for short articles (the rail
   carries it). 1-col on mobile, 3-col at >= 768px. */

.article-related {
  border-top: 1px solid var(--rule);
  padding: 56px 0 72px;
  margin-top: 64px;
}

.article-related .ar-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.article-related .ar-label::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--teal);
  flex-shrink: 0;
}

.article-related .ar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .article-related .ar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

.article-related .ar-item {
  display: block;
  padding: 4px 0 4px 18px;
  border-left: 1px solid var(--rule-light);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.article-related .ar-item:hover {
  border-left-color: var(--rule-strong);
}
.article-related .ar-meta {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.article-related .ar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
  margin-bottom: 8px;
}
.article-related .ar-blurb {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.article-related .ar-item:hover .ar-title { color: var(--teal); }


/* ── Unified detail shell: rail collapse + promoted Related (7a amendment) ──
   Below 1100px the layout is a passthrough (sidebar hidden, foot Related
   shown), so these rules only take effect on desktop. Related is rendered
   once in the foot (above); /scripts/article-shell.js promotes that single
   node into the rail and adds --in-rail when (Contents + Related) fits the
   main column, else it stays in the foot. */
@media (min-width: 1100px) {
  /* No Contents to anchor the rail AND Related not promoted → collapse the
     grid to one centered column so there's no empty gutter. article-shell.js
     removes --no-rail if it promotes Related into the rail. */
  .article-layout--no-rail {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
  }
  .article-layout--no-rail > .article-sidebar { display: none; }

  /* Related promoted into the sticky rail: re-render the foot grid markup as
     a compact vertical list (one column, no blurb), matching the rail's
     Contents/Related aesthetic; separated from Contents by a hairline. */
  .article-related--in-rail {
    border-top: 0;
    margin: 0;
    padding: 0;
  }
  .sb-contents + .article-related--in-rail {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule-light);
  }
  .article-related--in-rail .ar-label { margin-bottom: 18px; }
  /* When Related is the FIRST rail block (take pages: media/speaking/entries
     have no Contents above it), its accent rule must land on the same baseline
     as the .article-header teal rule — exactly as .sb-label does. .sb-label is
     locked to display:flex + line-height:1 precisely so the line-box leading
     can't push the rule down (see the sidebar-label block). .ar-label is
     display:inline-flex, so as the rail's first element it rides the parent
     block's 1.72 line-box leading and its rule landed ~14px below the column
     top. Apply the same lock here. Scoped to :first-child so the
     Contents-then-Related case on full pages is unchanged. */
  .article-sidebar > .article-related--in-rail:first-child .ar-label {
    display: flex;
    line-height: 1;
  }
  .article-related--in-rail .ar-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .article-related--in-rail .ar-item {
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--rule-light);
  }
  .article-related--in-rail .ar-item:first-of-type { border-top: 0; padding-top: 0; }
  .article-related--in-rail .ar-item:last-of-type { padding-bottom: 0; }
  .article-related--in-rail .ar-meta {
    font-size: 9.5px;
    margin-bottom: 6px;
  }
  .article-related--in-rail .ar-title {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--fg-2);
    margin-bottom: 0;
  }
  .article-related--in-rail .ar-item:hover .ar-title { color: var(--teal); }
  .article-related--in-rail .ar-blurb { display: none; }
}

/* ── RECENT HEADER / MORE LINK ─────────────────────────────────────────
   Shared list-introducer header: a kicker + h2 on the left, an
   "All ___ →" .more-link on the right. Used by the homepage Recent Work
   + Homefront panel and every section landing (/writing, /media,
   /speaking, /homefront) plus the /archive entry points.

   Promoted here from home.css (where it was home-only) so there is one
   canonical copy. .more-link is a STANDALONE token — it also styles the
   link in the homefront .archive-header and the speaking engagements
   header, not only inside .recent-header. */
.recent-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.recent-header h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 8vw, 34px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 22px 0 0;
  line-height: 1.02;
}
.more-link {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  transition: color 180ms var(--ease);
}
.more-link:hover { color: var(--teal-mid); }

/* ── ARCHIVE PAGE ──────────────────────────────────────────────────────
   Searchable, filterable index of everything (/archive). Lifted verbatim
   from archive-handoff/mockups/archive.html, EXCEPT: the per-row atoms
   (.ar-date / .ar-badge / .ar-title / .ar-desc / .ar-arrow) are scoped
   under .archive-row so they cannot bleed onto the article Related-Reading
   .ar-* classes above (which are scoped under .article-related). The class
   names are unchanged, so the verbatim archive.js (.ar-title selector) is
   unaffected. */

/* ── FILTER BAR ─────────────────────────────────────────── */
.archive-filters {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding: 18px var(--pad-x);
}
.arf-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.arf-row + .arf-row { margin-top: 12px; }
/* Contextual TYPE row: collapses to zero height when the client hides it
   (author display:flex above would otherwise beat the UA [hidden] default,
   same pattern as .archive-row[hidden]). */
.arf-row[hidden] { display: none; }

/* Search */
.arf-search {
  flex: 1 1 240px;
  min-width: 0;
  position: relative;
}
.arf-search input {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 12px 14px 12px 38px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 180ms var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.arf-search input:focus { border-color: var(--teal); }
.arf-search input::placeholder { color: var(--fg-4); font-style: italic; }
.arf-search::before {
  content: '';
  position: absolute;
  top: 50%; left: 14px;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006869' stroke-width='1.5'><circle cx='7' cy='7' r='5'/><line x1='10.5' y1='10.5' x2='14' y2='14'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  pointer-events: none;
}

/* Sort */
.arf-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.arf-sort-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.arf-sort select {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 8px 32px 8px 12px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 180ms var(--ease);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141410' stroke-width='1.5'><polyline points='1,1 6,6 11,1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
.arf-sort select:focus { border-color: var(--teal); }

/* Toolbar layout — search grows; the Filters button holds its size. (Sort
   keeps its default flex so it can still shrink on narrow mobile, as before.) */
.arf-toolbar { align-items: center; }
.arf-toggle { flex: 0 0 auto; }

/* Filters disclosure button (DESKTOP-ONLY, JS-ONLY — see .arf-facets notes).
   Hidden by default; the desktop media query reveals it only once .arf-js is
   present, so no-JS users never see a dead control. Matches the sort control's
   square, uppercase, bordered treatment. */
.arf-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.arf-toggle:hover { border-color: var(--rule-strong); }
.arf-toggle[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); }
/* Active-filter count badge — filled teal, light text; hidden at 0. */
.arf-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  background: var(--teal);
}
.arf-toggle-count[hidden] { display: none; }
/* Chevron — points down when collapsed, flips up when expanded. */
.arf-toggle-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  position: relative;
  top: -2px;
  transition: transform 200ms var(--ease), top 200ms var(--ease);
}
.arf-toggle[aria-expanded="true"] .arf-toggle-chevron { transform: rotate(225deg); top: 1px; }

/* Filter group (Section · Track · Topic · contextual Type — one component for
   all). In the disclosed panel each group is a block: a label + one-line
   italic hint on top, chips wrapping beneath. */
.arf-group { display: block; }
.arf-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.arf-group-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.arf-group-hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-3);
}
.arf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.arf-chip {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  line-height: 1.4;
  border-radius: 0;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.arf-chip:hover { color: var(--ink); border-color: var(--rule-strong); }
/* A SELECTED value chip is unmistakable: filled teal, light text. */
.arf-chip[aria-pressed="true"]:not([data-value="all"]) {
  color: var(--cream);
  border-color: var(--teal);
  background: var(--teal);
}
/* The "All" chip is the default "no filter" state, not a real selection — keep
   it a quiet teal-tint indicator so the panel doesn't open as a wall of fills. */
.arf-chip[data-value="all"][aria-pressed="true"] {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-tint-08);
}
/* Keyboard focus ring (square, on-palette) for every interactive control. */
.arf-chip:focus-visible,
.arf-toggle:focus-visible,
.arf-pill:focus-visible,
.arf-clear:focus-visible,
.arf-applied-clear:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Panel footer — the "Clear all filters" control lives inside the panel. */
.arf-panel-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-light);
}
.arf-clear {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 160ms var(--ease), opacity 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
  opacity: 0.5;
  pointer-events: none;
}
.arf-clear.is-active {
  opacity: 1;
  pointer-events: auto;
}
.arf-clear:hover { color: var(--teal-mid); }

/* Result-count footer — always visible (the live "showing X of Y"). */
.arf-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-light);
}
.arf-count {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.arf-count strong { color: var(--ink); font-weight: 700; }

/* Applied-filters summary — the removable "Filtering by" pill row shown when
   the panel is collapsed (and on mobile) with >=1 active filter. */
.arf-applied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-light);
}
.arf-applied[hidden] { display: none; }
.arf-applied-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.arf-applied-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.arf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-tint-08);
  border: 1px solid var(--teal);
  padding: 5px 8px;
  border-radius: 0;
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.arf-pill:hover { color: var(--cream); background: var(--teal); }
.arf-pill-x { font-size: 13px; line-height: 1; }
.arf-applied-clear {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.arf-applied-clear:hover { color: var(--teal-mid); }

/* Facet panel disclosure. BASE (< 768px) = SEARCH-ONLY: the whole panel is
   display:none so the short search bar + result list lead. The engine stays
   live: deep-linked section/track/type/topic URLs still filter the list, the
   count reflects it, and the applied-summary "Clear all" resets (the mobile
   escape hatch). Search covers the facet vocab (labels folded into data-search,
   see server/lib/archive.js). Desktop disclosure is wired in the responsive
   block below. Same DOM at every width — presentation only; filtering, URL
   state, and the contextual TYPE logic are untouched. */
.arf-facets { display: none; }

/* ── RESULTS LIST ───────────────────────────────────────── */
.archive-list {
  padding: 0 var(--pad-x) 96px;
}
.archive-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-light);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 160ms var(--ease), padding-left 200ms var(--ease);
}
.archive-row:first-child { border-top: 1px solid var(--rule-light); }
.archive-row:hover {
  padding-left: 6px;
}
.archive-row:hover .ar-title { color: var(--teal); }
.archive-row:hover .ar-arrow { gap: 12px; }
.archive-row[hidden] { display: none; }

.archive-row .ar-date {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.archive-row .ar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archive-row .ar-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: color 180ms var(--ease);
  text-wrap: pretty;
}
.archive-row .ar-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-style: italic;
  color: var(--fg-3);
  line-height: 1.5;
  margin-top: 2px;
  /* One line, ellipsis on overflow — the explorer rows stay scannable.
     Wrapping is allowed then clamped, so the description never widens the
     1fr grid track the way white-space:nowrap would. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.archive-row .ar-arrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 180ms var(--ease);
  margin-top: 4px;
}
.archive-row .ar-arrow::after { content: '→'; }

/* NOTE: the archive's entry tags deliberately use the SHARED outlined-chip
   style (.entry-tag / .entry-tag--track in this stylesheet, via the shared
   tag-chips partial) — identical to every other surface. The interactive
   filter chips (.arf-chip selected) and the "Filtering by" pills (.arf-pill)
   stay FILLED teal, so controls (filled) read as distinct from metadata
   (outlined) by state, even with the filter panel open. */

/* Homefront variant of the shared entry block (home + /homefront "Recent
   Issues"). Keeps the distinctive large teal issue number as the lead element;
   title / one-line desc / chips / action link are the standard block. Its grid
   is fluid (number · content · action) so it fits BOTH the full-width
   /homefront list and the narrower home "Recent Issues" column — the
   .archive-row.archive-row--hf specificity overrides the standard row's
   fixed-column grid at every breakpoint. */
.archive-row.archive-row--hf {
  grid-template-columns: 1fr;
  gap: 10px;
}
.archive-row .ar-issue-no {
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  color: var(--teal); opacity: 0.35; line-height: 1;
}
.archive-row--hf .ar-hf-body {
  display: flex; flex-direction: column; align-items: flex-start;
}
.archive-row--hf .ar-badge { margin-bottom: 8px; }
@media (min-width: 768px) {
  .archive-row.archive-row--hf {
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: start;
  }
}

/* Empty state */
.archive-empty {
  padding: 72px var(--pad-x);
  text-align: center;
  border-bottom: 1px solid var(--rule-light);
  display: none;
}
.archive-empty.is-shown { display: block; }
.archive-empty-kicker {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 14px;
}
.archive-empty h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.archive-empty p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-2);
  max-width: 460px;
  margin: 0 auto;
}

/* ── ARCHIVE RESPONSIVE ─────────────────────────────────── */
@media (min-width: 768px) {
  .archive-filters { padding: 22px var(--pad-x); }
  .arf-search input { padding: 14px 16px 14px 42px; }
  .arf-search::before { left: 18px; width: 16px; height: 16px; }

  /* Desktop disclosure. The Filters button appears only with JS (.arf-js) so
     no-JS users never see a dead control. The panel is OPEN by default (no-JS
     fallback = the old always-visible rig); .arf-js collapses it (max-height:0)
     and the engine animates max-height to the measured content height to expand
     (then releases it to 'none' so the contextual Type row never clips). The
     transition is held off until .arf-ready (added next frame) so the initial
     collapse is instant — no open->closed flash on load. */
  .arf-js .arf-toggle { display: inline-flex; }
  .arf-facets {
    display: block;
    overflow: hidden;
    max-height: none;
  }
  .arf-facets-inner { padding-top: 16px; }
  .arf-facets-inner .arf-row + .arf-row { margin-top: 18px; }
  .arf-js .arf-facets { max-height: 0; }
  .arf-ready .arf-facets { transition: max-height 320ms var(--ease); }

  .archive-row {
    grid-template-columns: 130px 180px 1fr 56px;
    gap: 28px;
    align-items: start;
    padding: 24px 0;
  }
  .archive-row .ar-date { padding-top: 4px; }
  .archive-row .ar-arrow {
    align-self: center;
    margin-top: 0;
    justify-self: end;
  }

  /* Two-part row: a left meta column (date stacked over the SECTION | TYPE
     badge) and the content block directly beside it — no empty middle band.
     Scoped to .archive-list so the shared entry-block on other pages keeps its
     own four-column grid. */
  .archive-list .archive-row {
    grid-template-columns: 150px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "date  content arrow"
      "badge content arrow";
    column-gap: 32px;
    row-gap: 6px;
    align-items: start;
  }
  .archive-list .archive-row .ar-date { grid-area: date; padding-top: 2px; }
  .archive-list .archive-row .ar-badge { grid-area: badge; align-self: start; }
  .archive-list .archive-row > div { grid-area: content; min-width: 0; }
  .archive-list .archive-row .ar-arrow {
    grid-area: arrow;
    align-self: center;
    justify-self: end;
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .archive-row {
    grid-template-columns: 150px 200px 1fr 56px;
    gap: 36px;
  }
  .archive-list .archive-row {
    grid-template-columns: 180px 1fr auto;
    column-gap: 40px;
  }
}