/* ==========================================================================
   ux.css — leahbadach.com design system. Loaded last on every page by
   automation/enhance-ux.js, after site.css (the shared base) and any page CSS.

   Direction: a quiet, editorial "private practice" look. Warm paper surfaces,
   deep navy ink, one blue for actions, Newsreader for display type and
   Instrument Sans for reading and interface. Evidence and clarity carry the
   credibility; decoration stays out of the way.

   Sections: 1 fonts · 2 tokens · 3 base · 4 actions · 5 forms · 6 header + menu
   · 7 action bar · 8 footer · 9 content components · 10 articles · 11 motion
   ========================================================================== */

/* ---- 1. Fonts (self-hosted, latin; see assets/fonts) ---- */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/newsreader-display.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/newsreader-display-italic.woff2') format('woff2');
}
/* Body face: `optional` never swaps after first paint (no layout shift); it is used as soon
   as it is cached, i.e. from the second page view on, and the fallback below is metric-matched. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: optional;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
}
/* Metric-matched fallbacks keep text from jumping while the fonts load. Values computed with
   fontTools from the shipped woff2 files against Georgia/Arial (advance widths of a sample
   line + hhea metrics), not estimated. */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 96.2%; ascent-override: 76.4%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Sans Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 101.1%; ascent-override: 95.9%; descent-override: 24.7%; line-gap-override: 0%; }

/* ---- 2. Tokens ---- */
:root {
  --font-display: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --font-sans: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Colour. Contrast on --paper: ink 16:1, ink-2 11:1, ink-3 6.9:1, ink-4 5.0:1, accent 8.6:1. */
  --ink: #0F1D2E;
  --ink-2: #2A3645;
  --ink-3: #4A5667;
  --ink-4: #616C7B;
  --paper: #FAF8F4;
  --paper-2: #F3EFE8;
  --paper-3: #E8E2D7;
  --surface-1: #FFFFFF;
  --line: rgba(15, 29, 46, .11);
  --line-2: rgba(15, 29, 46, .2);
  --accent: #0C4A86;
  --accent-hover: #093A6B;
  --accent-2: #2C6FB3;
  --accent-soft: #E8EEF5;
  --brass: #85633A;          /* warm accent for rules and ordinals (5.2:1 on paper) */
  --night: #0E1B2B;
  --night-2: #172940;
  --ok: #1D6B45;
  --danger: #A8261B;

  /* Type scale (1.2 → 1.25 fluid). */
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.3rem, 1.2rem + .45vw, 1.55rem);
  --fs-xl: clamp(1.55rem, 1.3rem + 1vw, 2.05rem);
  --fs-2xl: clamp(1.95rem, 1.5rem + 1.9vw, 2.85rem);
  --fs-3xl: clamp(2.45rem, 1.7rem + 3.1vw, 4.1rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Space, measure, shape, depth. */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4.5rem; --s-9: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1.1rem, .7rem + 2vw, 2.5rem);
  --page: 1200px;
  --measure: 68ch;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 29, 46, .06);
  --shadow-2: 0 14px 34px -22px rgba(15, 29, 46, .35), 0 1px 2px rgba(15, 29, 46, .05);
  --shadow-3: 0 40px 90px -40px rgba(15, 29, 46, .45);
  --header-h: 72px;

  /* Motion. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-1: 160ms; --t-2: 280ms; --t-3: 560ms;

  /* Legacy names used by site.css, generated pages and inline styles, mapped onto the system. */
  --bg: var(--paper);
  --bg-elevated: var(--paper-2);
  --bg-2: var(--paper-2);
  --surface: var(--surface-1);
  --surface-2: var(--paper-2);
  --surface-hover: var(--paper-2);
  --border: var(--line);
  --border-strong: var(--line-2);
  --gold: var(--accent);
  --gold-bright: var(--accent-hover);
  --gold-br: var(--accent-hover);
  --gold-soft: var(--accent-soft);
  --gold-line: rgba(12, 74, 134, .28);
  --white: var(--ink);
  --text: var(--ink-2);
  --text-mid: var(--ink-3);
  --text-dim: var(--ink-4);
  --text-faint: #9AA3AE;
  --success: var(--ok);
  --radius-sm: var(--r-xs);
  --radius: var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-lg);
  --action: var(--accent);
  --action-hover: var(--accent-hover);
  --focus: var(--ink);
  --read: var(--ink-2);
  --link: var(--accent);
}

/* ---- 3. Base (element typography lives in site.css; these are the shared extras) ---- */
html { background: var(--paper); scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
p, li { color: var(--ink-2); }
::selection { background: #D6E3F1; color: var(--ink); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); }

/* p.eyebrow outranks section paragraph rules (e.g. `.sec-head p`) so labels stay labels. */
.eyebrow, p.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-3);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brass); }
.lede { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
p, li { text-wrap: pretty; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Keyboard focus: always visible, never colour-only. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.skip-link {
  position: fixed; top: 10px; left: 12px; z-index: 13000; padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--ink); font-weight: 600; text-decoration: none; border: 2px solid var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* Layout primitives shared by the homepage and landing sections. */
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); }

/* ---- 4. Actions ---- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.35rem; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: .98rem; font-weight: 600; line-height: 1.1; letter-spacing: .005em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-line); box-shadow: none;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-1), border-color var(--t-1), color var(--t-1), box-shadow var(--t-2), transform var(--t-2) var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary, .topnav-cta, .nav-cta, .modal-btn {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-line: var(--accent);
  background: var(--btn-bg); color: #fff; border-color: var(--btn-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 22px -14px rgba(12, 74, 134, .9);
}
.btn-primary:hover, .topnav-cta:hover, .nav-cta:hover, .modal-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-secondary, .btn-ghost { --btn-bg: var(--surface-1); --btn-fg: var(--ink); --btn-line: var(--line-2); background: var(--btn-bg); color: var(--ink); border-color: var(--btn-line); box-shadow: var(--shadow-1); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--surface-1); border-color: var(--ink); color: var(--ink); }
.btn-sm { min-height: 40px; padding: .55rem 1.05rem; font-size: .9rem; }
.btn-lg { min-height: 54px; padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn .arr, .text-link .arr { display: inline-block; transition: transform var(--t-2) var(--ease-out); }
.btn:hover .arr, .text-link:hover .arr { transform: translateX(3px); }
.text-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.text-link:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ---- 5. Forms ---- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  font-family: var(--font-sans); font-size: 16px; color: var(--ink);
}
.form-row label, .fg label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; }
.form-row input, .form-row select, .form-row textarea, .fg input, .fg select, .fg textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--surface-1); border: 1px solid var(--line-2); box-shadow: inset 0 1px 1px rgba(15, 29, 46, .04);
  transition: border-color var(--t-1), box-shadow var(--t-1);
}
.form-row input:hover, .fg input:hover, .fg select:hover, .fg textarea:hover { border-color: rgba(15, 29, 46, .32); }
.form-row :is(input, select, textarea):focus, .fg :is(input, select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(12, 74, 134, .14);
}
[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 4px rgba(168, 38, 27, .1) !important; }
.field-error { display: flex; gap: .35rem; align-items: baseline; color: var(--danger); font-size: .85rem; margin-top: .35rem; }
.field-error:empty { display: none; }
::placeholder { color: #6B7480; opacity: 1; } /* 4.8:1 on white */

/* ---- 6. Header + menu (markup: automation/site-chrome.js) ---- */
.sh { position: sticky; top: 0; z-index: 1000; background: rgba(250, 248, 244, .86); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: border-color var(--t-2), box-shadow var(--t-2), background-color var(--t-2); }
.sh.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -26px rgba(15, 29, 46, .6); background: rgba(250, 248, 244, .94); }
.sh-bar { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.sh-brand { display: grid; line-height: 1.1; text-decoration: none; color: var(--ink); margin-right: auto; }
.sh-name { font-family: var(--font-display); font-size: 1.42rem; font-weight: 500; letter-spacing: -.015em; }
.sh-role { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: .18rem; }
.sh-brand:hover { color: var(--ink); }
.sh-nav { display: flex; align-items: center; gap: .3rem; }
.sh-nav a { position: relative; padding: .55rem .8rem; font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: var(--r-pill); }
.sh-nav a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-2) var(--ease-out); }
.sh-nav a:hover { color: var(--ink); }
.sh-nav a:hover::after, .sh-nav a[aria-current]::after { transform: scaleX(1); }
.sh-nav a[aria-current] { color: var(--ink); }
.sh-actions { display: flex; align-items: center; gap: var(--s-4); }
.sh-phone { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-phone svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; }
.sh-phone:hover { color: var(--accent); }
.sh-toggle { display: none; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .95rem 0 .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface-1); color: var(--ink); font: 600 .9rem/1 var(--font-sans); cursor: pointer; }
.sh-toggle-icon { position: relative; width: 16px; height: 10px; }
.sh-toggle-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--t-2) var(--ease-out), top var(--t-2) var(--ease-out); }
.sh-toggle-icon i:first-child { top: 0; }
.sh-toggle-icon i:last-child { top: 8px; }
.sh-toggle[aria-expanded="true"] .sh-toggle-icon i:first-child { top: 4px; transform: rotate(45deg); }
.sh-toggle[aria-expanded="true"] .sh-toggle-icon i:last-child { top: 4px; transform: rotate(-45deg); }

.sh-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 999; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); padding: var(--s-5) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom)); }
.sh-menu[hidden] { display: none; }
.sh-menu-nav { display: grid; gap: var(--s-5); }
.sh-menu-h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 .35rem; }
.sh-menu ul { list-style: none; margin: 0; padding: 0; }
.sh-menu li { margin: 0; border-bottom: 1px solid var(--line); }
.sh-menu-group a { display: block; padding: .72rem 0; font-family: var(--font-display); font-size: 1.28rem; color: var(--ink); text-decoration: none; }
.sh-menu-group a[aria-current] { color: var(--accent); }
.sh-menu-contact { display: grid; gap: .2rem; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-2); }
.sh-menu-contact .btn { margin-bottom: var(--s-3); }
.sh-menu-line { display: block; padding: .6rem 0; font: 600 1rem/1.3 var(--font-sans); color: var(--ink); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; }
.sh-menu-ask { color: var(--accent); }
html.menu-open, html.menu-open body { overflow: hidden; }
/* backdrop-filter makes the header the containing block for its fixed menu; drop it while open. */
html.menu-open .sh { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); border-bottom-color: var(--line); }
.sh-menu.is-open .sh-menu-group, .sh-menu.is-open .sh-menu-contact { animation: rise var(--t-3) var(--ease-out) both; }
.sh-menu.is-open .sh-menu-group:nth-child(2) { animation-delay: 40ms; }
.sh-menu.is-open .sh-menu-group:nth-child(3) { animation-delay: 80ms; }
.sh-menu.is-open .sh-menu-group:nth-child(4) { animation-delay: 120ms; }
.sh-menu.is-open .sh-menu-contact { animation-delay: 160ms; }

@media (min-width: 700px) {
  .sh-menu-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
}
@media (max-width: 1080px) { .sh-phone span { display: none; } .sh-phone { padding: .5rem; } .sh-phone svg { width: 19px; height: 19px; } }
/* Tablets keep "Talk to Leah" in the header; phones get it in the action bar instead. */
@media (max-width: 760px) { .sh-cta { display: none; } }
@media (max-width: 900px) {
  .sh-nav, .sh-phone { display: none; }
  .js .sh-toggle { display: inline-flex; }
  /* Without JavaScript the primary links stay visible as a scrollable row. */
  html:not(.js) .sh-bar { height: auto; flex-wrap: wrap; padding-block: .8rem; }
  html:not(.js) .sh-nav { display: flex; order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 420px) { .sh-role { display: none; } .sh-name { font-size: 1.3rem; } }

/* ---- 7. Phone action bar (built by app.js) ---- */
.ab { display: none; }
@media (max-width: 760px) {
  .ab {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 990;
    display: grid; grid-template-columns: auto auto 1fr; gap: 6px; padding: 6px;
    background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: var(--r-pill);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -20px rgba(15, 29, 46, .45);
    transition: transform var(--t-3) var(--ease-out), opacity var(--t-2);
  }
  .ab a, .ab button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: 0 1rem;
    border-radius: var(--r-pill); border: 0; background: transparent; color: var(--ink); font: 600 .92rem/1 var(--font-sans); text-decoration: none; cursor: pointer;
  }
  .ab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ab .ab-talk { background: var(--accent); color: #fff; }
  .ab .ab-talk:active { background: var(--accent-hover); }
  .ab.is-waiting, html.menu-open .ab, body:has(.modal-overlay.active) .ab, body:has(.lba-panel.open) .ab { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .lba-bubble { display: none !important; }
  .lba-panel { bottom: calc(12px + env(safe-area-inset-bottom)) !important; max-height: calc(100dvh - 96px) !important; }
}
.tabbar { display: none !important; } /* retired: replaced by the header menu + action bar */
.reveal, .reveal.in { opacity: 1; transform: none; } /* legacy app.css reveal never hides content */

/* The assistant launcher (styles in assets/js/assistant.js) is desktop only; phones use "Ask" in the action bar. */
body:has(.modal-overlay.active) :is(.lba-bubble, .lba-panel) { visibility: hidden; }
/* The sticky bottom CTA (conversion.js) duplicated the header's Talk to Leah; the header now carries it. */
.stickyCta { display: none !important; }

/* ---- 8. Footer (markup: automation/site-chrome.js) ---- */
.sf { margin-top: var(--s-8); background: var(--night); color: #C5CEDA; padding: 0; border: 0; }
.sf-inner { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-5); }
.sf a { color: #E6ECF3; text-decoration: none; }
.sf a:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
.sf-grid { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.sf-name { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin: 0 0 .5rem; line-height: 1.15; }
.sf-bio { font-size: .93rem; line-height: 1.6; color: #B3BECC; margin: 0 0 var(--s-4); max-width: 34ch; }
.sf-contact, .sf-social { list-style: none; margin: 0; padding: 0; }
.sf-contact li { margin: 0 0 .3rem; }
.sf-contact a { font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-social { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s-4); }
.sf-social a { display: inline-flex; min-height: 36px; align-items: center; padding: 0 .85rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-pill); font-size: .84rem; }
.sf-social a:hover { border-color: rgba(255, 255, 255, .5); text-decoration: none; }
.sf .footer-col :is(h2, h5) { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8FA0B4; margin: 0 0 .8rem; }
.sf .footer-col ul { list-style: none; margin: 0; padding: 0; }
.sf .footer-col li { margin: 0 0 .5rem; }
.sf .footer-col a { font-size: .9rem; color: #D3DBE5; }
.sf .footer-col a[aria-current] { color: #fff; font-weight: 600; }
.sf-legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: var(--s-3); }
.sf-quick { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0; font-size: .86rem; color: #8FA0B4; }
.sf-quick a { color: #D3DBE5; }
.sf-disclaimer { margin: 0; max-width: 90ch; font-size: .8rem; line-height: 1.6; color: #8FA0B4; }
.sf .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem; margin-top: var(--s-5); padding: var(--s-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; color: #8FA0B4; text-align: left; background: none; }
.sf-bottom-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.sf-bottom-links a { color: #B3BECC; }
@media (max-width: 1000px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-inner { padding-top: var(--s-7); } }

/* ---- 9. Content components (site.css markup) ---- */
.breadcrumbs { font-size: .86rem; color: var(--ink-4); margin-bottom: var(--s-5); }
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs .sep { color: #A7AEB8; margin: 0 .45rem; }

.card, .callout, .related-reading, .author-box, .person-card, .fact, .stat, .post-card, .dl-card, .toc {
  background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
a.card, a.post-card { transition: border-color var(--t-2), box-shadow var(--t-2), transform var(--t-2) var(--ease-out); }
a.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.post-card { transition: border-color var(--t-2), box-shadow var(--t-2), transform var(--t-2) var(--ease-out); }
.post-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.post-card h3 { font-size: 1.28rem; line-height: 1.25; }
.post-card .tag { color: var(--accent); letter-spacing: .1em; }
.post-card a.read-more { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); }

.callout { padding: 1.15rem 1.35rem; border-left: 3px solid var(--accent); border-radius: var(--r-sm); }
.callout-title { font-family: var(--font-sans); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.callout-warning { border-left-color: var(--danger); background: #FFFBF9; }
.callout-warning .callout-title { color: var(--danger); }

.stat-row { gap: var(--s-3); }
.stat { padding: 1.2rem 1rem; text-align: left; }
.stat-num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 450; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.stat-label { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-top: .5rem; }

.faq details { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: .5rem; padding: 0; overflow: hidden; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { padding: 1rem 3rem 1rem 1.2rem; font-weight: 600; color: var(--ink); position: relative; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.25rem; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--t-2) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > :not(summary) { padding: 0 1.2rem; }
.faq details > :last-child { padding-bottom: 1.1rem; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
th { background: var(--paper-2); color: var(--ink); font-weight: 650; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: .88rem; }
th, td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
tbody tr:hover { background: #FCFBF8; }

blockquote { border-left: 2px solid var(--brass); background: none; padding: .2rem 0 .2rem 1.2rem; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--ink); }

/* Closing consultation blocks: one dark card per page, centred (their markup centres its copy). */
.cta-end { margin: var(--s-7) 0 var(--s-5); }
.cta-band, .cta-end { background: var(--night) !important; color: #D3DBE5; border: 0; border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 3rem) clamp(1.3rem, 4vw, 3rem) !important; text-align: center; }
.cta-band :is(h2, h3), .cta-end :is(h2, h3) { color: #fff; margin-top: 0; }
.cta-band :is(h2, h3)::before, .cta-end :is(h2, h3)::before { display: none !important; }
.cta-band p, .cta-end p, .cta-band .lede, .cta-end .lede { color: #C5CEDA; }
.cta-band strong, .cta-end strong { color: #fff; }
.cta-band .eyebrow { color: #9FC0E3; justify-content: center; }
.cta-band .btn, .cta-end .btn { margin: .25rem; }
.cta-band .btn-primary, .cta-end .btn-primary { --btn-bg: #fff; background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
.cta-band .btn-primary:hover, .cta-end .btn-primary:hover { background: #E8EEF5; border-color: #E8EEF5; color: var(--ink); }
.cta-band .btn-secondary, .cta-end .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.cta-band a:not(.btn), .cta-end a:not(.btn) { color: #fff; }
/* Mid-article asides stay light so they do not interrupt reading. */
.cta-inline { background: var(--surface-1) !important; border: 1px solid var(--line) !important; border-left: 3px solid var(--accent) !important;
  border-radius: var(--r-sm) !important; box-shadow: var(--shadow-1); padding: 1.3rem 1.5rem !important; }

/* ---- 10. Articles ---- */
.article { max-width: 740px; padding-top: var(--s-6); font-size: 1.09rem; line-height: 1.75; }
.article h1 { font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.15rem); line-height: 1.08; margin-bottom: var(--s-4); }
.article h2 { font-size: clamp(1.55rem, 1.3rem + .9vw, 2rem); line-height: 1.18; margin-top: 3rem; margin-bottom: .9rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.article h2::before { width: 28px; height: 1px; background: var(--brass); margin-bottom: 1rem; }
.article h3 { font-size: 1.32rem; margin-top: 2rem; scroll-margin-top: calc(var(--header-h) + 20px); color: var(--ink); }
.article p, .article li { color: var(--ink-2); }
.article p { margin-bottom: 1.15rem; }
.article a:not(.btn) { color: var(--accent); }
.article .lede { font-size: clamp(1.12rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6; color: var(--ink-3); }
/* Dark closing bands inside articles: the article text colours above must not win here (they left this copy at 2.3:1). */
.article :is(.cta-band, .cta-end) :is(p, li, .lede) { color: #C5CEDA; }
.article :is(.cta-band, .cta-end) a:not(.btn) { color: #fff; }
:is(.cta-band, .cta-end) :is(p, span, small)[style*="color"] { color: #C5CEDA !important; } /* legacy inline colours were written for a light band */
.article-meta { color: var(--ink-4); font-size: .88rem; line-height: 1.6; flex-wrap: wrap; gap: .25rem .6rem; }
.article-meta a { color: var(--ink-2); }
.article-attribution, .article-disclaimer { font-size: .88rem; color: var(--ink-4); }
.article-figure figcaption { color: var(--ink-4); font-size: .86rem; }
.article img { border-radius: var(--r-sm); }

.reading-guide { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: .9rem 1.2rem; margin: var(--s-5) 0 var(--s-6); box-shadow: var(--shadow-1); }
.reading-guide > summary { cursor: pointer; color: var(--ink); font-weight: 600; font-size: .95rem; min-height: 34px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.reading-guide > summary::-webkit-details-marker { display: none; }
.reading-guide > summary::after { content: ''; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: auto; transition: transform var(--t-2) var(--ease-out); }
.reading-guide[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.reading-guide ol { margin: .6rem 0 .2rem; padding-left: 1.3rem; display: grid; gap: .05rem; }
.reading-guide li { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.reading-guide a { display: inline-block; padding: .3rem 0; color: var(--ink-2); text-decoration: none !important; }
.reading-guide a:hover { color: var(--accent); }
.reading-guide a[aria-current="location"] { font-weight: 650; color: var(--accent); }
.reading-guide.toc { padding: .9rem 1.2rem; }

.reading-progress { position: fixed; top: 0; left: 0; z-index: 1001; width: 100%; height: 2px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

.person-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.2rem; margin: var(--s-5) 0; padding: 1rem 1.2rem; }
.person-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0; }
.person-card figcaption { line-height: 1.45; min-width: 0; }
.person-name { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.person-role, .person-exp { display: block; font-size: .88rem; color: var(--ink-3); }

.author-box { padding: 1.2rem 1.35rem; }
.author-box .author-name a { color: var(--ink); }
.author-box .author-desc { color: var(--ink-3); }
.related-reading { padding: 1.4rem 1.6rem; }
.related-reading h2 { font-size: 1.2rem; }

.form-optional { margin: .2rem 0 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem 1rem; background: var(--paper); }
.form-optional > summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); min-height: 30px; display: flex; align-items: center; }
.form-optional[open] > summary { margin-bottom: .9rem; }

@media (max-width: 760px) {
  .article { padding: var(--s-5) var(--gutter) var(--s-7); font-size: 1.05rem; }
  .article h2 { margin-top: 2.3rem; }
  .person-card { grid-template-columns: 72px 1fr; }
  .person-card img { width: 72px; height: 72px; }
  .person-card .btn { grid-column: 1 / -1; width: 100%; }
  .stat-num { font-size: 2rem; }
}

/* ---- 11. Motion ---- */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Scroll reveals: app.js adds .rv only to content below the first screen, and removes it
   again after the transition. Without JS nothing is ever hidden. */
.js .rv { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .rv.rv-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--rv-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .reading-progress { display: none; }
}
@media print {
  .sh, .ab, .sf, .lba-bubble, .reading-progress { display: none !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
}