/* ==========================================================================
   The Almanac — digital stylesheet
   Implements the Web-Design.md brand pack (Colours, Typography, Grid, Spacers,
   Trees, Components). All inline styling has been removed from the markup and
   consolidated here.

   No external resources are loaded. Fonts are rendered from the user's OS
   (native font stack) so the page ships embedded — no CDN, no @import, no
   network fetches. The exact brand fonts are TBC (see Web-Design.md §5 and
   §13); the stacks below pick the closest native Serif and Sans available on
   macOS, iOS, Windows, Android and Linux.
   ========================================================================== */

/* ===== 0. FONTS =========================================================== */
@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Aeonik-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Aeonik-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Aeonik-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Aeonik-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Martina Plantijn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MartinaPlantijn-Regular.otf") format("opentype");
}

/* ===== 1. TOKENS ========================================================= */
:root {
  /* --- Colours (Web-Design.md §4, hexes verified against sarasinandpartners.com live CSS) --- */
  /* Neutrals */
  --c-black:    #000000;
  --c-white:    #ffffff;
  --c-dove:     #a1b0c7;
  --c-birch:    #bec6ce;
  --c-ash:      #bfb9b9;
  --c-copper:   #ab826e;
  /* Warm palette */
  --c-rose:     #d6918a;
  --c-taupe:    #aca4a3;
  --c-laurel:   #7f9d97;
  --c-gorse:    #eaab00;
  --c-cherry:   #d4382e;
  /* Vivid accents */
  --c-mandarin: #ff7800;
  --c-mulberry: #9e1c66;
  --c-lime:     #70c200;
  --c-blue:     #0070cf;

  /* Tinted shades used across the UI (see §4 usage map) */
  --c-dove-10:   color-mix(in srgb, var(--c-dove)  10%, var(--c-white));
  --c-dove-30:   color-mix(in srgb, var(--c-dove)  30%, var(--c-white));
  --c-dove-40:   color-mix(in srgb, var(--c-dove)  40%, var(--c-white));
  --c-dove-50:   color-mix(in srgb, var(--c-dove)  50%, var(--c-white));
  --c-dove-60:   color-mix(in srgb, var(--c-dove)  60%, var(--c-white));
  --c-dove-90:   #363b42; /* verified against sarasinandpartners.com live CSS */
  --c-birch-10:  color-mix(in srgb, var(--c-birch) 10%, var(--c-white));
  --c-birch-50:  color-mix(in srgb, var(--c-birch) 50%, var(--c-white));
  --c-birch-60:  color-mix(in srgb, var(--c-birch) 60%, var(--c-white));
  --c-cherry-30: color-mix(in srgb, var(--c-cherry) 30%, var(--c-white));
  --c-cherry-90: color-mix(in srgb, var(--c-cherry) 90%, var(--c-black));

  /* Semantic role tokens */
  --c-bg:          var(--c-white);
  --c-bg-off:      var(--c-dove-10);
  --c-bg-inverse:  var(--c-black);
  --c-text:        var(--c-black);
  --c-text-muted:  #5b6a8a; /* ~ Dove @ AA on white */
  --c-text-soft:   #3a3f4a;
  --c-divider:     var(--c-birch-50);
  --c-accent:      var(--c-cherry);
  --c-accent-alt:  var(--c-mandarin);
  --c-masthead:    var(--c-black);

  /* --- Layout chrome --- */
  --masthead-h: 88px;

  /* --- Spacers (§3) --- */
  --space-1:  10px;
  --space-2:  20px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  72px;
  --space-8:  80px;
  --space-9: 100px;

  /* Section vertical rhythm (§3 padding table) */
  --section-pad: var(--space-5);

  /* --- Grid (§2) --- */
  --grid-cols:    4;
  --grid-margin:  var(--space-2);
  --grid-gutter:  var(--space-2);

  /* --- Fonts (Web-Design.md §5, confirmed brand faces) --- */
  --f-sans:  "Aeonik", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-serif: "Martina Plantijn", "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
             Palatino, "Cambria", "Georgia", "Times New Roman", Times, serif;

  /* --- Type scale (desktop, §5.1) --- */
  --t-h1:          400 54px/1.1  var(--f-serif);
  --t-h2:          600 32px/1.2  var(--f-sans);
  --t-h3:          700 54px/1.1  var(--f-sans);
  --t-h3-sm:       600 28px/1.2  var(--f-sans);
  --t-h4:          600 25px/1.3  var(--f-sans);
  --t-h5:          400 40px/1.2  var(--f-sans);
  --t-h6:          400 25px/1.3  var(--f-sans);

  /* Default (non-article) body */
  --t-body:        500 20px/1.55 var(--f-sans);
  --t-body-lead:   700 22px/1.4  var(--f-sans);

  /* Article body */
  --t-article:     400 20px/1.65 var(--f-serif);
  --t-article-lead:400 24px/1.45 var(--f-serif);

  /* Supporting */
  --t-small:       400 16px/1.55 var(--f-sans);
  --t-micro:       600 14px/1.4  var(--f-sans);
  --t-nano:        400 12px/1.45 var(--f-sans);
  --t-metric:      400 60px/1.0  var(--f-sans);
}

/* Grid swaps at 768 / 1920 */
@media (min-width: 768px) {
  :root {
    --grid-cols: 6;
    --grid-margin: var(--space-4);
    --section-pad: var(--space-7);
  }
}
@media (min-width: 1920px) {
  :root {
    --grid-cols: 12;
    --grid-margin: var(--space-5);
    --section-pad: var(--space-9);
  }
}

/* Mobile type swaps (§5.2) */
@media (max-width: 767.98px) {
  :root {
    --t-h1:       400 40px/1.15 var(--f-serif);
    --t-h2:       600 20px/1.3  var(--f-sans);
    --t-h3:       700 40px/1.15 var(--f-sans);
    --t-h3-sm:    600 24px/1.25 var(--f-sans);
    --t-h5:       400 25px/1.25 var(--f-sans);
    --t-h6:       400 22px/1.3  var(--f-sans);
    --t-metric:   400 44px/1.0  var(--f-sans);
    --t-body:     500 17px/1.55 var(--f-sans);
    --t-body-lead:700 19px/1.4  var(--f-sans);
    --t-article:  400 18px/1.65 var(--f-serif);
  }
}

/* ===== 2. RESET / BASE =================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
button   { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a        { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover  { text-decoration: none; }
hr       { border: 0; border-top: 1px solid var(--c-divider); margin: var(--space-5) 0; }
strong, b { font-weight: 700; }
em        { font-style: italic; }

/* Headings default to black per §11 */
h1, h2, h3, h4, h5, h6 { color: var(--c-text); margin: 0 0 var(--space-2); }
h1 { font: var(--t-h1); }
h2 { font: var(--t-h2); letter-spacing: 0.2px; }
h3 { font: var(--t-h3-sm); }
h4 { font: var(--t-h4); }
h5 { font: var(--t-h5); }
h6 { font: var(--t-h6); }

p  { margin: 0 0 var(--space-2); font: var(--t-body); color: var(--c-text-soft); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-3) var(--space-3); padding: 0; color: var(--c-text-soft); }
li     { margin: 6px 0; line-height: 1.55; }

/* Bulleted lists use a Cherry marker (§7.4) */
ul { list-style: none; padding-left: 0; }
ul > li { position: relative; padding-left: var(--space-4); }
ul > li::before {
  content: "—";
  color: currentColor;
  position: absolute;
  left: 0; top: 0;
  font-weight: 400;
  line-height: inherit;
}

/* Focus ring — 2px solid Cherry, 2px offset (§10) */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ===== 3. SKIP LINK ====================================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-accent);
  color: var(--c-white);
  padding: 8px 16px;
  z-index: 999;
  font: var(--t-micro);
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ===== 4. MASTHEAD ======================================================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--c-masthead);
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  color: var(--c-white);
}
.masthead-brand {
  height: 32px;
  width: auto;
}

/* ===== 5. LAYOUT ========================================================= */
.layout-wrapper {
  display: flex;
  min-height: calc(100vh - var(--masthead-h));
  background: var(--c-bg);
}

main {
  flex: 1;
  min-width: 0;
  background: var(--c-bg);
}

.main-column {
  max-width: none;
  padding: 0 var(--grid-margin) var(--section-pad);
}

/* ===== 6. SIDEBAR NAVIGATION ============================================= */
.v3-nav {
  width: 340px;
  min-width: 340px;
  background: var(--c-bg-off);
  border-right: 1px solid var(--c-divider);
  position: sticky;
  top: var(--masthead-h);
  height: calc(100vh - var(--masthead-h));
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  z-index: 100;
}
.v3-nav .nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 0;
}
.v3-nav .nav-footer {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--c-divider);
}
.v3-nav .nav-footer-icon {
  height: 90px;
  width: auto;
}
.v3-nav .nav-header {
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: var(--space-1);
}
.v3-nav .nav-title {
  font-family: var(--f-sans);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--c-text);
}
.v3-nav .nav-subtitle {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.v3-nav .nav-group-label {
  display: block;
  font: var(--t-micro);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  padding: var(--space-2) var(--space-3) 6px;
}
.nav-section {
  padding: var(--space-1) 0;
}
.nav-section + .nav-section {
  border-top: 1px solid var(--c-divider);
  margin-top: var(--space-1);
}
.v3-nav button[data-target],
.mobile-toc button[data-target] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px var(--space-3) 8px calc(var(--space-3) + 6px);
  color: var(--c-text-soft);
  font: var(--t-small);
  font-size: 17px;
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.v3-nav button[data-target]:hover,
.mobile-toc button[data-target]:hover {
  background: color-mix(in srgb, var(--c-dove) 18%, var(--c-white));
  color: var(--c-text);
}
.v3-nav button.is-active,
.mobile-toc button.is-active {
  background: color-mix(in srgb, var(--c-cherry) 8%, var(--c-white));
  color: var(--c-text);
  border-left-color: var(--c-accent);
  font-weight: 600;
}

/* ===== 7. MOBILE TOC ===================================================== */
.mobile-toc {
  display: none;
  background: var(--c-bg-off);
  border-bottom: 1px solid var(--c-divider);
  position: sticky;
  top: var(--masthead-h);
  z-index: 150;
}
.mobile-toc summary {
  padding: 14px var(--space-2);
  font: var(--t-micro);
  letter-spacing: 0.3px;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-toc summary::-webkit-details-marker { display: none; }
.mobile-toc summary::after { content: "▾"; font-size: 14px; color: var(--c-text-muted); }
details.mobile-toc[open] summary::after { content: "▴"; }
.mobile-toc-inner {
  max-height: 65vh;
  overflow-y: auto;
  padding: 6px 0 var(--space-2);
}
.mobile-toc .nav-group-label {
  display: block;
  font: var(--t-micro);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  padding: var(--space-1) var(--space-2) 4px;
}

/* ===== 8. HERO =========================================================== */
.hero {
  background: var(--c-bg);
  margin: 0 calc(var(--grid-margin) * -1) var(--section-pad);
  padding: var(--section-pad) var(--grid-margin) var(--space-5);
  border-bottom: 1px solid var(--c-divider);
}
.hero-eyebrow {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  margin-bottom: var(--space-2);
}
.hero-title {
  font: var(--t-h1);
  color: var(--c-text);
  margin: 0;
  letter-spacing: -0.5px;
}
.hero-subtitle {
  font: var(--t-h4);
  font-weight: 400;
  color: var(--c-text-muted);
  margin-top: var(--space-1);
  letter-spacing: 0.5px;
}
.hero-rule {
  width: 80px;
  height: 2px;
  background: var(--c-accent);
  margin: var(--space-3) 0 0;
  border: 0;
}
.hero-lede {
  font: var(--t-article-lead);
  font-size: 26px;
  color: var(--c-mulberry);
  max-width: 60ch;
  margin-top: var(--space-3);
  padding-left: var(--space-2);
  border-left: 3px solid var(--c-mulberry);
}

/* ===== 9. SECTIONS ======================================================= */
section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
section:first-of-type { padding-top: 0; }

/* Section heading pattern (§7.1 — title in a Dove shade, no accent bar).
   Cherry is reserved for highlights/CTAs/figures, not heading text. */
.section-head {
  margin-bottom: var(--space-3);
}
.section-head h2,
.section-head h3 {
  color: var(--c-dove-90);
  margin: 0;
  font: var(--t-h3);
}
.section-grid-head h2.section-title,
.section-grid-head h3.section-title {
  color: var(--c-dove-90);
  font: var(--t-h3);
  /* Scales with the rail's own width (4/12 of the main column) rather than
     the viewport, so long/short section titles both avoid mid-word splits
     and single-short-word orphan lines at any screen size. Selector
     includes .section-title to out-specificity that rule (defined later
     in the cascade) which would otherwise win the font-size tie and
     silently cancel this clamp(). */
  font-size: clamp(26px, 11cqw, 54px);
}
.section-grid-head h2 { margin-bottom: var(--space-3); }
.section-grid-head h3 { margin-bottom: var(--space-2); }
.section-grid-body h4 { font: var(--t-h4); margin: var(--space-4) 0 var(--space-2); color: var(--c-text); }
.section-grid-body h5 { font: var(--t-h5); margin: var(--space-4) 0 var(--space-2); color: var(--c-text); }

/* ===== 9a. SECTION GRID — standard 12-column grid (§2). The heading rail
   sits in columns 1–4, body copy in columns 6–12 (7 of 12, matching the
   corporate site's col-4/offset-1/col-7 convention), leaving column 5 as
   a gutter. The rail is a container-query container so its heading type
   can scale to the rail's own measured width (see clamp() above). ===== */
.section-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-3);
  align-items: start;
}
.section-grid-head {
  grid-column: 1 / span 4;
  container-type: inline-size;
  position: sticky;
  top: calc(var(--masthead-h) + var(--space-4));
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.section-grid-body {
  grid-column: 6 / span 7;
  min-width: 0;
}
@media (max-width: 959.98px) {
  .section-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .section-grid-head {
    grid-column: auto;
    position: static;
  }
  .section-grid-head h2,
  .section-grid-head h3 {
    font-size: unset;
  }
  .section-grid-body {
    grid-column: auto;
  }
}

.part-divider {
  background: #edf2f5;
  padding: calc(var(--space-5) * 2) var(--grid-margin);
  margin: 0 calc(var(--grid-margin) * -1);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.part-divider-text {
  flex: 1 1 auto;
  min-width: 0;
}
/* Reserved for a future image — no asset yet, so it renders as empty
   space sized generously enough to hold one at the divider's full height
   once it's added (min-height, not just "stretch to match the text",
   since the text alone is shorter than the doubled section height). */
.part-divider-media {
  flex: 0 0 40%;
  align-self: stretch;
  min-height: 220px;
}
@media (max-width: 767.98px) {
  .part-divider { flex-direction: column; align-items: flex-start; }
  .part-divider-media { display: none; }
}

.section-subtitle {
  font: var(--t-small);
  color: var(--c-text-muted);
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  letter-spacing: 0.3px;
}

.part-label {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-accent);
  margin-bottom: 6px;
}

/* Section divider — two separate rules (head-column width, body-column
   width) with a gap between where the columns meet, instead of one line
   running the full width. */
.section-divider {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-3);
  margin: calc(var(--space-6) * 2 / 3) 0;
}
.section-divider-line {
  height: 1px;
  background: var(--c-divider);
}
.section-divider-line--head { grid-column: 1 / span 4; }
.section-divider-line--body { grid-column: 6 / span 7; }
@media (max-width: 959.98px) {
  .section-divider { grid-template-columns: 1fr; }
  .section-divider-line--head { display: none; }
  .section-divider-line--body { grid-column: 1; }
}

/* ===== 10. CALLOUTS / PULL-QUOTES =========================================
   Two distinct patterns: plain .callout is section intro copy (neutral
   sans text, Dove-toned accent). Anything carrying quote text — a
   .callout with a .pull-p child, .callout-quote, or .pull-quote — is a
   serif Mulberry quote. Cherry is reserved for highlights/CTAs/figures,
   not quotes or intro copy. ===== */
.callout {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--c-bg-off);
  border-left: 3px solid var(--c-dove-60);
}
.callout p,
.callout :last-child { margin-bottom: 0; }
.callout strong { color: var(--c-text); }

.callout:has(.pull-p),
.callout-quote {
  background: color-mix(in srgb, var(--c-mulberry) 6%, var(--c-white));
  border-left-color: var(--c-mulberry);
}

.callout-quote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--c-mulberry);
}
.callout-quote p {
  font: var(--t-article-lead);
  font-size: 26px;
  font-style: italic;
  color: var(--c-mulberry);
  margin: 0;
}

.pull-quote {
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-mulberry);
  margin: var(--space-5) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-mulberry);
}

/* ===== 11. FIGURES / CHARTS ============================================== */
.fig {
  margin: var(--space-4) 0;
}
.fig-label {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.fig-title {
  font: var(--t-h4);
  font-size: 18px;
  color: var(--c-text);
  margin: 0 0 var(--space-2);
}
.fig figure {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  padding: var(--space-1);
}
.fig figure img,
.fig figure svg {
  width: 100%;
  height: auto;
  display: block;
}
.fig-source,
.source {
  font: var(--t-nano);
  color: var(--c-text-muted);
  margin-top: 6px;
  letter-spacing: 0.2px;
}

/* Decorative image (tree graphics, editorial photos) */
.hero-image,
.editorial-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== 12. TABLES — cleaner/lighter, larger type (no heavy black header
   band); loosely inspired by the corporate site's light-border, generous-
   padding card language since it has no literal <table> to mirror
   directly. ======================================================== */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-sans);
  font-size: 16px;
}
thead th {
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 14px 16px;
  line-height: 1.3;
  border-bottom: 2px solid var(--c-dove-60);
  vertical-align: bottom;
}
thead th:first-child { text-align: left; }
tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-birch-10);
  color: var(--c-text-soft);
  text-align: center;
  font-size: 15.5px;
  vertical-align: top;
}
tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--c-text);
}
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-dove) 5%, var(--c-white)); }
tbody tr:nth-child(odd) td  { background: var(--c-white); }

/* ===== 13. LAYOUT HELPERS ================================================ */
.row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  flex-wrap: wrap;
}
.row.row-tight { gap: var(--space-1); }

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767.98px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
}

.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-4); }

/* Key-point rows (icon + body) */
.key-row {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-bottom: var(--space-1);
}
.key-row .key-bullet {
  flex-shrink: 0;
  width: 20px;
  visibility: hidden;
  position: relative;
}
.key-row .key-bullet::before {
  content: "—";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-text-soft);
}
.key-row .key-body { flex: 1; min-width: 0; }

/* ===== 14. STEP-BY-STEP (§7.3) =========================================== */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1199.98px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .steps { grid-template-columns: 1fr; } }

.step-number {
  font: var(--t-h3);
  color: var(--c-accent);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.step-label { font: var(--t-body-lead); margin-bottom: 6px; color: var(--c-text); }
.step-body  { font: var(--t-body); color: var(--c-text-soft); }

/* ===== 15. METRICS ======================================================= */
.metric {
  font: var(--t-metric);
  color: var(--c-accent);
  letter-spacing: -1px;
  line-height: 1;
}
.metric-label {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  margin-top: 6px;
}

/* ===== 16. BUTTONS (§7.5) ================================================ */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  font: var(--t-micro);
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
@media (max-width: 767.98px) { .btn { padding: 10px 16px; } }

.btn-primary {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn-primary:hover { background: var(--c-cherry-90); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] { background: var(--c-cherry-30); cursor: not-allowed; }

.btn-secondary {
  background: var(--c-dove-50);
  color: var(--c-text);
}
.btn-secondary:hover { background: var(--c-dove-60); }
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  background: var(--c-dove-40);
  color: var(--c-dove-30);
  cursor: not-allowed;
}

/* ===== 17. PEOPLE / BIO CARDS ============================================ */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-divider);
}
@media (max-width: 767.98px) { .bio-grid { grid-template-columns: 1fr; } }

.bio-name  { font: var(--t-micro); font-size: 16px; font-weight: 700; color: var(--c-text); }
.bio-role  { font: var(--t-nano); color: var(--c-text-muted); margin-top: 3px; }

/* ===== 18. CARDS ("Relevant thinking" §7.7) ============================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
@media (max-width: 1199.98px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .card-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.card-eyebrow {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
}
.card-title { font: var(--t-h3-sm); color: var(--c-text); margin: 0; }
.card-meta  { font: var(--t-nano); color: var(--c-text-muted); margin-top: auto; }

/* ===== 19. END-MATTER (data sources, important information) ============== */
#data-sources,
#important-information {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-divider);
}
/* Disclaimer/warning "boxes" now stack as plain body copy — no
   background, border, or contained-component treatment. */
.disclaimer-box {
  margin: var(--space-3) 0;
}
.disclaimer-box h3 { font: var(--t-h4); color: var(--c-text); margin: 0 0 var(--space-1); }

.warning-box {
  margin: var(--space-3) 0;
}

/* ===== 20. ENDMATTER — stack single-column like the rest of the page */
#data-sources .grid-2,
#important-information .grid-2,
#data-sources .grid-3,
#important-information .grid-3 {
  grid-template-columns: 1fr;
  gap: 0;
}

/* ===== 21. TREE IMAGERY (§6) ============================================= */
.module-with-tree {
  overflow: hidden;
  position: relative;
}
.module-with-tree .tree {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}
.module-with-tree > :not(.tree) { position: relative; z-index: 1; }
@media (max-width: 1199.98px) {
  .module-with-tree .tree { width: 50%; }
}
@media (max-width: 767.98px) {
  .module-with-tree .tree { display: none; }
}

/* ===== 22. RESPONSIVE — LAYOUT ========================================== */
/* Narrow desktop: shrink sidebar */
@media (max-width: 1199.98px) {
  .v3-nav { width: 280px; min-width: 280px; }
}
/* Tablet/mobile: sidebar becomes mobile TOC */
@media (max-width: 959.98px) {
  .v3-nav    { display: none; }
  .mobile-toc { display: block; }
  main       { min-width: 0; width: 100%; }
}
@media (max-width: 767.98px) {
  .hero { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

/* ===== 23. UTILITIES ==================================================== */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.u-center      { text-align: center; }
.u-accent      { color: var(--c-accent); }
.u-muted       { color: var(--c-text-muted); }
.u-serif       { font-family: var(--f-serif); }
.u-sans        { font-family: var(--f-sans); }
.u-nowrap      { white-space: nowrap; }
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-4 { margin-bottom: var(--space-4); }

/* Article pages use the serif body per §5.3 */
.article section p,
.article .main-column p {
  font: var(--t-article);
  color: var(--c-text-soft);
}
.article .hero-lede,
.article .callout-quote p {
  font: var(--t-article-lead);
}

/* Eyebrow labels (generic) */
.eyebrow {
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-accent);
  margin-bottom: 6px;
}
.eyebrow-muted { color: var(--c-text-muted); }

/* ===== 24. CONTEXT-SPECIFIC OVERRIDES ==================================== */

/* Legacy accent bars are removed in the new brand (§7.1). */
.accent-bar-legacy { display: none; }

/* Section titles (h2/h3 given `.section-title` by the classifier) sit flush
   left in a Dove shade — Cherry is reserved for highlights/CTAs/figures. */
h2.section-title {
  color: var(--c-dove-90);
  font: var(--t-h3);
  margin: 0 0 var(--space-3);
}
h3.section-title {
  color: var(--c-dove-90);
  font: var(--t-h3);
  margin: 0 0 var(--space-2);
}

.subsection-title {
  font: var(--t-h4);
  color: var(--c-text);
  margin: var(--space-4) 0 var(--space-2);
}

/* Pull-paragraph variant inside a callout — bigger, italic Serif quote */
.callout .pull-p,
.pull-p {
  font-family: var(--f-serif);
  font-size: 24px;
  line-height: 1.4;
  font-style: italic;
  color: var(--c-mulberry);
  margin: 0;
}

/* Fig/table wrappers — the classifier's plain <div> around
   .fig-label + .fig-title + figure.fig-frame (or .table-scroll) is now the
   single bordered/padded card, so the label and heading sit inside the
   same frame as the chart or table, not floating above it. Also gives
   figures/tables more breathing room from surrounding body copy. */
div:has(> .fig-label) {
  background: var(--c-white);
  border: 1px solid var(--c-divider);
  padding: var(--space-4);
  margin: var(--space-6) 0;
}
.fig-label {
  display: block;
  font: var(--t-micro);
  letter-spacing: 0.4px;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.fig-title {
  display: block;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--c-text);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}
figure.fig-frame {
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
}
figure.fig-frame img,
figure.fig-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Inline source / caption line */
.source {
  font: var(--t-nano);
  color: var(--c-text-muted);
  margin: var(--space-2) 0 0;
  letter-spacing: 0.2px;
}

/* Table-scroll wrapper — gains a subtle fade on the right on mobile */
.table-scroll { scrollbar-width: thin; }

/* Key-row: the classifier marked 3-part bullet rows.
   Structure: <div.key-row><span>•</span><span>content</span></div>
   The literal bullet glyph is hidden and replaced with an em-dash in the
   body-copy colour, matching the rest of the page's bullet styling. */
.key-row {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-bottom: var(--space-1);
  color: var(--c-text-soft);
}
.key-row > span:first-child {
  width: 20px;
  min-width: 20px;
  flex-shrink: 0;
  visibility: hidden;
  position: relative;
}
.key-row > span:first-child::before {
  content: "—";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-text-soft);
}
.key-row > span:last-child,
.key-row > span:nth-child(2) {
  flex: 1;
  font: var(--t-body);
  line-height: 1.55;
}

/* Bio grids (preface) — the classifier tagged the 2-col grid .grid-2 and the
   inner name/role lines .bio-name / .bio-role. */
.bio-name { font: var(--t-micro); font-size: 15px; font-weight: 700; color: var(--c-text); }
.bio-role { font: var(--t-nano); color: var(--c-text-muted); margin-top: 3px; line-height: 1.45; }

/* Small strong-as-label inside disclaimer / warning boxes */
strong.box-label {
  display: block;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
}

/* Disclaimer/warning text now matches normal body copy — no compressed
   "in-a-box" type sizing. */
.disclaimer-box h3,
.warning-box   h3 {
  font: var(--t-h4);
  color: var(--c-text);
  margin: 0 0 var(--space-1);
}
.disclaimer-box > div:first-child:not(.disclaimer-box-title):not([class]) {
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}


/* Section head wrapper (the div that used to wrap section h3 + accent bar) */
section > div:has(> h3.section-title),
section > div:has(> h2.section-title) {
  margin-bottom: var(--space-3);
}

/* Contact row in the important-information footer */
.contact-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--c-divider);
  color: var(--c-text-muted);
  font: var(--t-nano);
  font-size: 13px;
  line-height: 1.7;
}
.contact-row > div { min-width: 200px; }
.contact-row strong.box-label { color: var(--c-text); font-size: 13px; }

/* Nav group label */
.nav-group-label {
  display: block;
  font: var(--t-micro);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--c-text-muted);
  padding: var(--space-2) var(--space-3) 4px;
}

/* Mobile-toc hr inherits brand divider */
.mobile-toc-inner hr {
  margin: var(--space-1) 0;
  border: 0;
  border-top: 1px solid var(--c-divider);
}

/* Preload link elements shouldn't render */
body > link[rel="preload"] { display: none; }