/* ============================================================================
   IMYUN Pharmaceuticals — Site CSS
   Instantiates Design System v0.1 · The Brand Whisperer · Apr 2026
   This file obeys the rules. When it disagrees with them, it loses.
   ============================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1 · TOKENS — direct port from the design system.
   Nothing in this stylesheet references a raw hex or px outside this block.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* Color · primary */
  --c-ground:        #F4F2EC;
  --c-text:          #0B0B0C;
  --c-signal:        #E8244A;
  --c-mute:          #8A8A86;

  /* Color · semantic · light */
  --bg-primary:      var(--c-ground);
  --bg-alt:          #ECEAE3;
  --bg-inverse:      var(--c-text);
  --text-primary:    var(--c-text);
  --text-muted:      #2A2A2B;
  --text-caption:    var(--c-mute);
  --text-inverse:    var(--c-ground);
  --accent:          var(--c-signal);
  --rule:            #0B0B0C14;
  --rule-strong:     #0B0B0C33;

  /* Color · semantic · inverse */
  --text-caption-d:  #7E7E7A;
  --text-muted-d:    #CECEC8;
  --rule-d:          #F4F2EC1A;

  /* Typography · families */
  --ff-sans:   'Instrument Sans', system-ui, -apple-system, sans-serif;
  --ff-serif:  'Instrument Serif', Georgia, serif;
  --ff-mono:   'JetBrains Mono', ui-monospace, monospace;

  /* Typography */
  --fs-display: clamp(3.25rem, 11vw, 13.5rem);
  --fs-hero:    clamp(2.5rem, 6.5vw, 6rem);
  --fs-sub:     clamp(1.5rem, 3vw, 2.5rem);
  --fs-lead:    clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-caption: 0.8125rem;
  --fs-anno:    0.72rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --tr-display:  -0.045em;
  --tr-hero:     -0.04em;
  --tr-sub:      -0.025em;
  --tr-anno:     0.14em;

  --lh-display:  0.92;
  --lh-hero:     0.95;
  --lh-sub:      1.05;
  --lh-body:     1.55;

  /* Space · 4pt */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;
  --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.5rem;   --sp-6:  2rem;
  --sp-7:  3rem;     --sp-8:  4rem;
  --sp-9:  6rem;     --sp-10: 8rem;
  --sp-11: 12rem;

  /* Layout */
  --page-pad:    clamp(1.5rem, 5vw, 5rem);
  --content-max: 76rem;
  --prose-max:   62ch;

  --radius-0: 0;
  --radius-1: 2px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2 · BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern", "liga";
}
body { min-height: 100vh; }
::selection { background: var(--accent); color: var(--bg-primary); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3 · TYPOGRAPHY PRIMITIVES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.h-display {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
}
.h-hero {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-hero);
  margin: 0;
}
.h-sub {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sub);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  margin: 0;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: var(--prose-max);
  margin: 0;
}
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--prose-max);
  color: var(--text-primary);
}
.t-caption {
  font-size: var(--fs-caption);
  color: var(--text-caption);
  line-height: 1.45;
}

/* Serif italic — grace note, one per major surface (Rule 06) */
.em-serif {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
}

/* The single crimson accent per surface (Rule 03) */
.t-accent { color: var(--accent); }

/* Mono · does the science (Rule 05) */
.mono, .anno {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  font-weight: var(--fw-regular);
}
.mono--ink, .anno--ink { color: var(--text-primary); }
.mono--tag, .anno--tag { color: var(--accent); }
.anno .sep { color: var(--accent); margin: 0 0.6em; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4 · LAYOUT · 4pt / 12-col skeleton
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

section {
  padding: clamp(5rem, 10vh, 9rem) var(--page-pad);
  border-top: 1px solid var(--rule);
  position: relative;
}
section:first-of-type { border-top: 0; }
section.inverse {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
section.inverse .mono,
section.inverse .anno { color: var(--text-caption-d); }
section.inverse .anno--ink { color: var(--text-inverse); }
section.inverse .t-body { color: var(--text-inverse); }
section.inverse .t-lead { color: var(--text-muted-d); }
section.inverse .section-label .num { color: var(--accent); }

.wrap { max-width: var(--content-max); margin: 0 auto; }

.section-label {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-8);
}
.section-label .num {
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
}
.section-head {
  max-width: 22ch;
  margin-bottom: var(--sp-6);
}
.section-intro {
  max-width: var(--prose-max);
  margin: var(--sp-5) 0 var(--sp-8);
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: 1.45;
}
section.inverse .section-intro { color: var(--text-muted-d); }

.cols-2  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-7); }
.cols-3  { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-7); }
.cols-4  { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-5); }
@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; gap: var(--sp-6); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5 · LOCKUP — mark signs, does not announce (Rule 04)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.lockup .wm {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.lockup svg { height: 1.3em; width: auto; display: block; }
section.inverse .lockup .wm { color: var(--text-inverse); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6 · NAV — no backdrop-filter, flat (Rule 09)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--page-pad);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-links {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: var(--fs-caption);
  color: var(--text-primary);
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease);
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; color: var(--accent); }
.nav-contact {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

/* Burger — hidden on desktop */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-primary);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Full-width nav drawer — mobile/tablet only */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--sp-9) var(--page-pad) var(--sp-8);
  padding-top: 20vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-drawer-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.nav-drawer-links a {
  font-size: clamp(2rem, 7vw, 3rem);
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-sub);
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  line-height: 1.1;
  transition: opacity var(--dur-base) var(--ease);
}
.nav-drawer-links a:hover { opacity: 0.4; }
.nav-drawer-links a.active { color: var(--accent); opacity: 1; }
.nav-drawer-cta {
  position: absolute;
  bottom: var(--sp-8);
  left: var(--page-pad);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 900px) {
  .nav-links,
  .nav-contact { display: none; }
  .nav-burger { display: flex; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7 · BUTTONS — no filled variants
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-1);
  transition: color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.btn:hover { background: var(--text-primary); color: var(--bg-primary); }
.btn--tag   { color: var(--accent); border-color: var(--accent); }
.btn--tag:hover { background: var(--accent); color: var(--bg-primary); }
.btn--ghost {
  border-color: transparent;
  padding-left: 0; padding-right: 0;
  color: var(--accent);
}
.btn--ghost:hover { color: var(--accent); opacity: 0.6; }

section.inverse .btn { color: var(--text-inverse); border-color: var(--text-inverse); }
section.inverse .btn:hover { background: var(--text-inverse); color: var(--text-primary); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8 · COVER / HERO — one idea per surface (Rule 01)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.cover {
  min-height: 92svh;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-rows: 1fr auto;
  border-top: 0;
}
.cover-mid {
  align-self: center;
  padding: var(--sp-10) 0 var(--sp-8);
  display: grid;
  gap: var(--sp-6);
}
.cover-eyebrow {
  display: inline-flex;
  align-items: center;
}
.cover-head {
  font-weight: var(--fw-medium);
  font-size: clamp(3rem, 10.5vw, 13rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin: 0;
}
.cover-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--sp-6);
  max-width: 72ch;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
  margin-top: var(--sp-4);
}
@media (max-width: 780px) {
  .cover-meta { grid-template-columns: 1fr; gap: var(--sp-5); }
}
.cover-meta .k {
  color: var(--text-caption);
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
}
.cover-meta .v {
  font-size: var(--fs-caption);
  color: var(--text-primary);
  line-height: 1.5;
}
.cover-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9 · PAGE TITLE — non-home pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-title {
  padding: clamp(4rem, 10vh, 8rem) var(--page-pad) clamp(3rem, 6vh, 5rem);
  border-bottom: 1px solid var(--rule);
}
.page-title .eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-7);
}
.page-title h1 {
  font-weight: var(--fw-medium);
  font-size: clamp(2.75rem, 9vw, 10rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin: 0;
}
.page-title .lede {
  margin-top: var(--sp-6);
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.4;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10 · METRIC — the canonical data pattern
   Tag color reserved for stats of consequence.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  border: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
.m-cell {
  padding: var(--sp-5);
  border-right: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-3);
  align-content: space-between;
  min-height: 9rem;
}
.m-cell:last-child { border-right: 0; }
@media (max-width: 900px) {
  .m-cell:nth-child(2) { border-right: 0; }
  .m-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.m-k {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.m-v {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.m-v.tag { color: var(--accent); }
.m-d {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.4;
}
section.inverse .metric-grid { border-color: var(--rule-d); }
section.inverse .m-cell { border-right-color: var(--rule-d); }
section.inverse .m-cell:nth-child(-n+2) { border-bottom-color: var(--rule-d); }
section.inverse .m-d { color: var(--text-muted-d); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11 · DATA ROW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.data-row {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.data-row:last-child { border-bottom: 1px solid var(--rule); }
.data-row .dr-k {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.data-row .dr-v { font-size: var(--fs-caption); line-height: 1.5; }
.data-row .dr-x {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 720px) {
  .data-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .data-row .dr-x { justify-self: start; }
}
section.inverse .data-row,
section.inverse .data-row:last-child { border-color: var(--rule-d); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12 · COMPARISON TABLE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.vs-table th, .vs-table td {
  text-align: left;
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}
.vs-table th {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tr-anno);
  color: var(--text-caption);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--text-primary);
}
.vs-table th.is-ours { color: var(--accent); }
.vs-table tr.lead td { background: var(--bg-alt); }
.vs-table tr.lead td:first-child { font-weight: var(--fw-medium); }
.vs-table td:first-child {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  width: 20%;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13 · PERSON ROW — team
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.person-row {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--sp-7);
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.person-row:last-child { border-bottom: 1px solid var(--rule); }
.person-row .p-role {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.person-row .p-name {
  font-weight: var(--fw-medium);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 var(--sp-2);
}
.person-row .p-affil {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.person-row .p-bio {
  font-size: var(--fs-body);
  color: var(--text-primary);
  line-height: 1.55;
  max-width: 56ch;
}
.person-row .p-bio > p { margin: 0; }
@media (max-width: 720px) {
  .person-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14 · RULE ROW — features list
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rule-list { border-top: 1px solid var(--rule); }
.rule-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.rule-row .num {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.rule-row h4 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sub);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  margin: 0 0 var(--sp-3);
}
.rule-row p {
  font-size: var(--fs-body);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .rule-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}
section.inverse .rule-list,
section.inverse .rule-row { border-color: var(--rule-d); }
section.inverse .rule-row p { color: var(--text-muted-d); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15 · FUNDS ROW
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.funds-list { border-top: 1px solid var(--rule); }
.funds-row {
  display: grid;
  grid-template-columns: 1fr 7rem 18rem;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.funds-row .category { font-size: var(--fs-body); color: var(--text-primary); }
.funds-row .category .sub {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.funds-row .amount {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--text-primary);
}
.funds-row .bar {
  height: 2px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}
.funds-row .bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: var(--text-primary);
}
.funds-row.total { border-bottom-width: 2px; border-bottom-color: var(--text-primary); }
.funds-row.total .category,
.funds-row.total .amount { font-weight: var(--fw-medium); }
@media (max-width: 720px) {
  .funds-row { grid-template-columns: 1fr auto; }
  .funds-row .bar { grid-column: 1 / -1; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16 · FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.site-footer {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding: clamp(4rem, 8vh, 7rem) var(--page-pad) var(--sp-7);
}
.site-footer .f-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--rule-d);
}
.site-footer .f-claim {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
  margin: 0;
  color: var(--text-inverse);
}
.site-footer .f-col h5 {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption-d);
  font-weight: var(--fw-regular);
  margin: 0 0 var(--sp-5);
}
.site-footer .f-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer .f-col li { margin-bottom: var(--sp-3); }
.site-footer .f-col a {
  color: var(--text-inverse);
  opacity: 0.75;
  font-size: var(--fs-caption);
  transition: opacity var(--dur-base);
}
.site-footer .f-col a:hover { opacity: 1; }
.site-footer .f-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption-d);
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .site-footer .f-top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .site-footer .f-claim { grid-column: 1 / -1; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17 · UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.stack-sm  > * + * { margin-top: var(--sp-3); }
.stack     > * + * { margin-top: var(--sp-5); }
.stack-lg  > * + * { margin-top: var(--sp-7); }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.tm {
  font-size: 0.35em;
  vertical-align: super;
  margin-left: 1px;
  font-feature-settings: normal;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL REVEAL — fade + lift, staggered within groups
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }

.m-cell[data-reveal] { transform: translateY(8px) scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19 · NAV DROPDOWN — About Us sub-nav
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.nav-links li { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: calc(var(--sp-4) * -1);
  min-width: 160px;
  background: var(--bg-primary);
  border: 1px solid var(--rule-strong);
  padding: var(--sp-2) 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-primary) !important;
  opacity: 0.5 !important;
  white-space: nowrap;
}
.nav-dropdown a:hover { opacity: 1 !important; }
.nav-dropdown a.active { opacity: 1 !important; color: var(--accent) !important; }

/* Mobile drawer sub-items — indented */
.nav-drawer-links .drawer-sub a {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  opacity: 0.4;
  padding-left: var(--sp-5);
}
.nav-drawer-links .drawer-sub a:hover { opacity: 1; }
.nav-drawer-links .drawer-sub a.active { color: var(--accent); opacity: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20 · BTK GRID — three-column Bind / Tag / Kill
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  margin-top: var(--sp-7);
}
.btk-cell {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--rule);
}
.btk-cell:last-child { border-right: 0; }
.btk-k {
  font-family: var(--ff-sans);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  margin-bottom: var(--sp-4);
}
.btk-v {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
section.inverse .btk-grid { border-color: var(--rule-d); }
section.inverse .btk-cell { border-color: var(--rule-d); }
section.inverse .btk-k { color: var(--text-inverse); }
section.inverse .btk-v { color: var(--text-muted-d); }
@media (max-width: 720px) {
  .btk-grid { grid-template-columns: 1fr; }
  .btk-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .btk-cell:last-child { border-bottom: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21 · FEATURE GRID — ITC advantage cards
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--rule);
  margin-top: var(--sp-7);
}
.feature-cell {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.feature-cell:nth-child(even) { border-right: 0; }
.feature-cell:nth-last-child(-n+2):nth-child(odd):last-child,
.feature-cell:nth-last-child(-n+2):nth-child(even) { border-bottom: 0; }
.feature-k {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  margin-bottom: var(--sp-2);
  color: var(--text-primary);
}
.feature-v {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-cell { border-right: 0; }
  .feature-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .feature-cell:last-child { border-bottom: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22 · BLOG FILTER + GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.blog-filter {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.blog-filter a {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease);
}
.blog-filter a:hover,
.blog-filter a.active { opacity: 1; }

.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  margin-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule);
}
.blog-img-placeholder {
  background: var(--bg-alt);
  aspect-ratio: 16/10;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-4);
}
.blog-date {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: var(--sp-3);
}
.blog-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  color: var(--text-primary);
}
.blog-featured-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-7);
}
.blog-card-img {
  background: var(--bg-alt);
  aspect-ratio: 16/10;
  margin-bottom: var(--sp-4);
}
.blog-card-title {
  font-family: var(--ff-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}
@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23 · CONTACT FORM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-field.span-2 { grid-column: span 2; }
.form-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.form-input,
.form-textarea {
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  outline: none;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.form-input:focus,
.form-textarea:focus { border-color: var(--text-primary); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.form-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--text-primary);
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: span 1; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24 · EMAIL SIGNUP — inline
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.email-signup {
  display: flex;
  max-width: 460px;
  margin-top: var(--sp-5);
  border: 1px solid var(--rule-strong);
}
.email-signup-input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}
.email-signup-input::placeholder { color: var(--text-caption); }
.email-signup-btn {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: 0;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease);
}
.email-signup-btn:hover { opacity: 0.7; }
section.inverse .email-signup { border-color: var(--rule-d); }
section.inverse .email-signup-input { color: var(--text-inverse); }
section.inverse .email-signup-input::placeholder { color: var(--text-caption-d); }
section.inverse .email-signup-btn {
  background: var(--bg-primary);
  color: var(--text-primary);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25 · PULLQUOTE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pullquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 58ch;
}
.pullquote q {
  display: block;
  font-family: var(--ff-sans);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-sub);
  line-height: var(--lh-sub);
  quotes: none;
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  font-style: normal;
}
section.inverse .pullquote { border-color: var(--rule-d); }
section.inverse .pullquote q { color: var(--text-inverse); }
section.inverse .pullquote cite { color: var(--text-caption-d); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   26 · ARTICLE LAYOUT — prose max 62ch
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.article-date {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: var(--sp-5);
}
.article-lede {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  max-width: var(--prose-max);
  margin-top: var(--sp-5);
}
.article-body {
  max-width: var(--prose-max);
  margin-top: var(--sp-7);
}
.article-body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.article-body p:last-child { margin-bottom: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   27 · MEDIA KIT TILES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.media-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.media-tile {
  border: 1px solid var(--rule);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.media-tile-k {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
.media-tile-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   28 · CONTACT DETAIL GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.contact-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.contact-detail-cell {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}
.contact-detail-k {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: var(--sp-2);
}
.contact-detail-v a {
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.contact-detail-v a:hover { color: var(--accent); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   29 · ARTICLE CARDS — latest section
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.latest-card {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
}
section.inverse .latest-card { border-color: var(--rule-d); }
.latest-card-date {
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: var(--sp-3);
}
section.inverse .latest-card-date { color: var(--text-caption-d); }
.latest-card-title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
section.inverse .latest-card-title { color: var(--text-inverse); }
@media (max-width: 720px) {
  .latest-grid { grid-template-columns: 1fr; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   30 · PRE-FOOTER CTA — dark closing band
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.pre-footer {
  background: var(--bg-inverse);
  padding: clamp(5rem, 10vh, 9rem) var(--page-pad);
  border-top: 1px solid var(--rule);
}
.pre-footer .pf-claim {
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  letter-spacing: var(--tr-hero);
  line-height: var(--lh-hero);
  color: var(--text-inverse);
  max-width: 18ch;
  margin-bottom: var(--sp-7);
}
.pre-footer .pf-sub {
  font-size: var(--fs-body);
  color: var(--text-muted-d);
  max-width: 52ch;
  margin-bottom: var(--sp-7);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19 · BRAND FIGURE — photography placement
   One image per surface, max. Mono caption per Rule 05.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.brand-figure {
  margin: var(--sp-8) 0;
}
.brand-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-figure figcaption {
  margin-top: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-anno);
  letter-spacing: var(--tr-anno);
  text-transform: uppercase;
  color: var(--text-caption);
}
section.inverse .brand-figure figcaption { color: var(--text-caption-d); }

/* Full-bleed atmosphere — escapes section page-pad */
.brand-figure--bleed {
  margin-left: calc(var(--page-pad) * -1);
  margin-right: calc(var(--page-pad) * -1);
}

/* Atmosphere section — lives between major sections as a breath */
.atmosphere {
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.atmosphere img {
  width: 100%;
  height: auto;
  display: block;
}