/* ==========================================================================
   Salåppeʼta — site stylesheet
   Tokens and rules from the design handoff. Font sizes are in rem so the
   "A+ larger text" toggle (html.large) scales all reading text.
   ========================================================================== */

/* ---- Fonts (self-hosted) ------------------------------------------------ */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --almond: #F3ECE0;
  --almond-deep: #EADFCD;
  --almond-hover: #E2D5C0;
  --forest: #2F4A3D;
  --sage: #3F5A4C;
  --sage-muted: #6F8A78;
  --sage-pale: #AFC0B3;
  --sage-mist: #EEF3ED;
  --sage-text: #DDE6DF;       /* secondary text on sage/forest */
  --sand: #D9CDB8;            /* cash in the allocation bar */
  --terracotta: #C4553A;
  --terracotta-soft: #D98B77; /* "running the Fund" bar */
  --terracotta-light: #EA8B70;
  --white: #FFFFFF;

  --sans: "Outfit", system-ui, sans-serif;
  --mono: "Courier Prime", ui-monospace, monospace;

  --s1: 6px; --s2: 12px; --s3: 18px; --s4: 29px; --s5: 47px; --s6: 76px; --s7: 94px; --s8: 123px;
  --gutter: clamp(20px, 5vw, 88px);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.large { font-size: 118%; }
body {
  margin: 0;
  background: var(--almond);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--sage); }
.on-dark a:hover, .on-terracotta a:hover { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
strong { font-weight: 700; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.on-terracotta :focus-visible { outline-color: var(--forest); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 50;
  background: var(--forest); color: var(--almond); padding: var(--s2) var(--s3); font-weight: 600;
}
.skip-link:focus { top: var(--s2); color: var(--almond); }
[hidden] { display: none !important; }

/* ---- Layout ------------------------------------------------------------- */
.section { padding: var(--s8) var(--gutter); }
.section--94 { padding-block: var(--s7) var(--s8); }
.section--flat-top { padding-top: 0; }
.rule-top { border-top: 1px solid var(--sage-pale); }

.bg-deep { background: var(--almond-deep); }
.bg-forest { background: var(--forest); color: var(--almond); font-weight: 500; }
.bg-sage { background: var(--sage); color: var(--sage-mist); font-weight: 500; }
.bg-terracotta { background: var(--terracotta); color: var(--white); font-weight: 500; }

/* Golden-ratio split: narrow meta column + wide content column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
  gap: var(--s5);
}
.split--flip { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); }
.split > .aside-r { text-align: right; }
.split > .aside-r.stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }

/* Responsive auto grid; set --min on the element */
.auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 340px)), 1fr));
  gap: var(--gap, var(--s5) var(--s6));
}
.align-end { align-items: end; }
.align-start { align-items: start; }
.align-center { align-items: center; }
.justify-end { justify-self: end; }
.stack { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); }
.mb-3 { margin-bottom: var(--s3); } .mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.measure { max-width: 30em; }
.measure-wide { max-width: 36em; }

@media (max-width: 700px) {
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .split > .aside-r { text-align: left; }
  .split > .aside-r.stack { align-items: flex-start; }
  .split > .spacer { display: none; }
  .justify-end { justify-self: start; }
}

/* ---- Type --------------------------------------------------------------- */
.h-name {
  font-weight: 100; font-size: clamp(4.5rem, 12.5vw, 12.4375rem);
  line-height: .9; letter-spacing: -.045em; text-align: right;
}
.h-page {
  font-weight: 100; font-size: clamp(3.75rem, 7.5vw, 7.5rem);
  line-height: .95; letter-spacing: -.04em; text-wrap: balance;
}
.h-section {
  font-weight: 100; font-size: clamp(3.75rem, 7vw, 6.875rem);
  line-height: .95; letter-spacing: -.035em;
}
.h-section--sm { font-size: clamp(3.75rem, 6.5vw, 6.25rem); }
.h-section--xs { font-size: clamp(3.75rem, 6vw, 6rem); }
.h-item { font-size: 1.625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.h-item--lg { font-size: clamp(1.5rem, 2.4vw, 1.8125rem); }
.h-sub { font-size: 1.8125rem; font-weight: 600; line-height: 1.2; }
.h-article { font-size: 2.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.lede { font-size: clamp(1.375rem, 2.2vw, 1.8125rem); font-weight: 400; line-height: 1.382; max-width: 30em; text-wrap: pretty; }
.body-sm { font-size: 1.125rem; line-height: 1.618; }
.body { font-size: 1.25rem; line-height: 1.618; text-wrap: pretty; }
.meta { font-family: var(--mono); font-size: 1.125rem; line-height: 1.5; color: var(--sage); }
.meta--bold { font-weight: 700; }
.meta--forest { color: var(--forest); }
.on-dark .meta, .bg-forest .meta, .bg-sage .meta { color: var(--sage-pale); }
.bg-terracotta .meta { color: var(--white); font-weight: 700; font-size: 1.25rem; }
.big {
  font-weight: 100; line-height: .85; letter-spacing: -.04em;
  font-size: clamp(4.75rem, 9vw, 8.75rem);
}
.figure-60 { font-weight: 300; font-size: 3.75rem; line-height: 1; letter-spacing: -.02em; }
.figure-47 { font-weight: 300; font-size: 2.9375rem; line-height: 1; }
.accent { color: var(--terracotta); }
.link-strong { font-size: 1.25rem; font-weight: 600; }
.ext::after { content: " ↗"; }

/* ---- Recurring elements ------------------------------------------------- */
.sigbar { height: 14px; width: 61.8%; background: var(--terracotta); }
.bar-v { width: 10px; background: var(--forest); flex: none; }
.bar-v--6 { width: 6px; }

.lockup { text-decoration: none; }
.lockup .ta { color: var(--terracotta); }

/* Notice box */
.notice {
  border: 3px solid var(--terracotta); padding: 24px var(--s4);
  display: flex; gap: var(--s3); align-items: flex-start; max-width: 760px;
}
.notice::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--terracotta); flex: none; margin-top: 8px;
}
.notice p { font-size: 1.375rem; line-height: 1.5; }
.notice strong:first-child { font-size: 1.5rem; }

/* Outlined note (inline) */
.note-outline {
  display: inline-flex; align-items: center; gap: 14px;
  border: 2px solid currentColor; padding: 14px 20px;
  font-size: 1.375rem; font-weight: 500; line-height: 1.3;
}
.note-outline strong { font-weight: 700; }
.note-outline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--terracotta); flex: none; }
.note-outline .dot--light { background: currentColor; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--terracotta); color: var(--white);
  font-size: 1.375rem; font-weight: 700; text-decoration: none;
  padding: 20px 32px; min-height: 56px; border: 0; cursor: pointer;
}
.btn:hover { color: var(--white); filter: brightness(.9); }
.btn .arrow { font-weight: 400; }
.btn--sm { font-size: 1.25rem; padding: 14px var(--s4); min-height: 52px; }
.btn--forest { background: var(--forest); color: var(--almond); }
.btn--forest:hover { background: var(--sage); color: var(--almond); filter: none; }
.btn-outline {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  border: 2px solid var(--forest); background: transparent; color: var(--forest);
  font-size: 1.25rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-outline:hover { background: var(--forest); color: var(--almond); font-weight: 500; }

/* Chips (filters, feed tabs, form type) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center;
  font-size: 1.125rem; min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--forest); background: transparent; color: var(--forest); cursor: pointer;
}
.chip--round { border-radius: 22px; padding: 0 20px; }
.chip[aria-pressed="true"], .chip-radio input:checked + span {
  background: var(--forest); color: var(--almond);
}
.chip:hover { background: var(--almond-hover); }
.chip[aria-pressed="true"]:hover { background: var(--forest); }
.on-dark .chip { border-color: var(--almond); color: var(--almond); }
.on-dark .chip:hover { background: var(--sage); }
.on-dark .chip[aria-pressed="true"] { background: var(--almond); color: var(--forest); }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--forest); font-size: 1.125rem; cursor: pointer;
}
.chip-radio input:focus-visible + span { outline: 3px solid var(--terracotta); outline-offset: 3px; }

/* Circle photo with flat multiply disc */
.circle { position: relative; aspect-ratio: 1; }
.circle__img {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  filter: grayscale(1); background: var(--almond-deep);
}
.circle__img img, .circle__img picture { width: 100%; height: 100%; object-fit: cover; }
.circle__disc {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  mix-blend-mode: multiply; pointer-events: none;
}
.photo-slot {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18%;
  font-family: var(--mono); font-size: .875rem; line-height: 1.4; color: var(--sage-muted);
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(47,74,61,.05) 14px 15px);
}

/* Timeline */
.timeline { border-left: 2px solid var(--forest); display: flex; flex-direction: column; gap: var(--s4); }
.timeline__item { position: relative; padding-left: var(--s4); }
.tl-dot {
  position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--forest); background: var(--almond);
}
.tl-dot--almond { background: var(--almond); }
.tl-dot--sage { background: var(--sage); }
.tl-dot--pale { background: var(--sage-pale); }
.tl-dot--forest { background: var(--forest); }
.tl-dot--terracotta { background: var(--terracotta); }

/* Rows used for lists with a meta column */
.row-list .row { padding: var(--s4) 0; border-top: 2px solid var(--forest); text-decoration: none; }
.row-list--thin .row { border-top-width: 1px; }
a.row { display: grid; color: inherit; }
a.row:hover { color: inherit; background: var(--almond-hover); }
.bg-sage a.row:hover { background: var(--forest); }
.row-meta { font-family: var(--mono); font-size: 1.125rem; display: flex; flex-direction: column; gap: var(--s1); align-items: flex-end; text-align: right; line-height: 1.5; }
@media (max-width: 700px) {
  .row-meta { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; column-gap: var(--s3); }
}

/* ---- Header & nav ------------------------------------------------------- */
.site-header {
  padding: 40px var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
  gap: clamp(16px, 3vw, 47px); align-items: start;
}
.site-header .lockup { font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.3; }
.site-nav { justify-self: end; display: flex; gap: var(--s4); align-items: stretch; }
.site-nav__links { display: flex; flex-direction: column; }
.site-nav__links a {
  text-decoration: none; font-size: 1.25rem; line-height: 1.2; min-height: 34px;
  display: flex; align-items: center; padding: 0 10px; margin: 0 -10px;
  transition: background .15s, color .15s;
}
.site-nav__links a:hover, .site-nav__links a[aria-current] { background: var(--sage); color: var(--sage-mist); }
.text-toggle {
  font-size: 1.25rem; font-weight: 600; background: none; border: none; padding: 0;
  min-height: 44px; cursor: pointer; color: var(--sage); text-align: left; white-space: pre;
}
.text-toggle:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.date-mark {
  font-family: var(--mono); font-size: 1.125rem; line-height: 1.1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.date-mark span:nth-child(2) { border-top: 1.5px solid var(--forest); padding-top: 4px; }
@media (max-width: 700px) {
  .site-nav__links a { min-height: 44px; }
  .site-header { grid-template-columns: minmax(0, 1fr); }
  .site-nav { justify-self: stretch; justify-content: flex-end; }
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  padding: var(--s7) var(--gutter) var(--s5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--s6) var(--s5); align-items: end;
}
.site-footer--home { padding-top: var(--s8); }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.site-footer__brand .kicker { display: flex; flex-direction: column; gap: var(--s2); font-size: 1.8125rem; line-height: 1.2; }
.site-footer__brand .kicker span:last-child { font-weight: 600; white-space: nowrap; }
.site-footer__brand .rule { height: 12px; width: 100%; background: var(--forest); }
.vertical-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 700; font-size: clamp(3.75rem, 6vw, 6rem); line-height: .85; letter-spacing: -.03em;
}
.site-footer__links { justify-self: end; display: flex; gap: var(--s3); align-items: stretch; }
.site-footer__links ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; font-size: 1.25rem; line-height: 1.3; font-weight: 600;
}
.site-footer__links li a { text-decoration: none; display: inline-flex; min-height: 34px; align-items: center; }
.site-footer__links li a:hover { text-decoration: underline; color: var(--white); }
.site-footer__legal {
  grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.6);
  padding-top: var(--s3); margin-top: var(--s4); font-size: 1.125rem; font-weight: 600;
}
@media (max-width: 700px) { .site-footer__links { justify-self: start; } }

/* ---- Home: hero --------------------------------------------------------- */
.hero { position: relative; padding: 40px var(--gutter) 0; }
.hero-body { padding: 0 var(--gutter) var(--s8); overflow: hidden; }
.hero__top { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s4); }
.hero__name { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); width: 100%; }
.hero__body { margin-top: var(--s6); --min: 320px; --gap: var(--s6) var(--s5); align-items: start; }
.hero__intro { display: flex; gap: var(--s4); max-width: 520px; }
.hero__art { width: min(100%, 620px); justify-self: end; margin-right: 6%; }
.hero__art .circle__disc--pale { width: 61.8%; left: -16%; top: -10%; background: var(--sage-pale); }
.hero__badge {
  position: absolute; width: 28%; aspect-ratio: 1; right: -6%; top: 4%; border-radius: 50%;
  background: var(--sage); color: var(--sage-mist); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero__badge b { font-weight: 300; font-size: clamp(1.8125rem, 3.4vw, 3.25rem); line-height: 1; }
.hero__badge span { font-family: var(--mono); font-size: clamp(.75rem, 1.1vw, 1rem); line-height: 1.3; }
.hero__vertical {
  position: absolute; right: -10%; bottom: 6%;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(1.8125rem, 3.2vw, 2.9375rem); font-weight: 600; color: var(--sage);
  letter-spacing: -.01em; line-height: 1.2; white-space: nowrap;
}
@media (max-width: 700px) {
  .hero__art { margin-right: 10%; }
  .hero__vertical { right: -14%; }
}

/* Running number */
.running { padding: var(--s7) var(--gutter); --min: 300px; --gap: var(--s4) var(--s5); align-items: end; }
.running__num { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; }
.running__num b { font-weight: 100; font-size: clamp(6.875rem, 16vw, 15rem); line-height: .85; letter-spacing: -.05em; }
.running__num span { font-weight: 600; font-size: 1.8125rem; }

/* Where things stand */
.standing__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); }
.standing__n { font-weight: 300; font-size: 3.75rem; line-height: .9; color: var(--sage-muted); }
.standing__n--urgent { color: var(--terracotta); }

/* Calculator */
.calc-tag { display: inline-block; background: var(--terracotta); color: var(--white); font-size: 1.375rem; font-weight: 700; padding: 8px var(--s3); margin-bottom: var(--s4); }
.calc-field { display: flex; flex-direction: column; gap: var(--s2); max-width: 420px; }
.calc-input {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 2px solid var(--terracotta-light); padding-bottom: var(--s1);
}
.calc-input span { font-weight: 300; font-size: 2.9375rem; color: var(--terracotta-light); }
.calc-input input {
  font-weight: 300; font-size: 3.75rem; background: transparent; border: none;
  color: var(--terracotta-light); caret-color: var(--terracotta-light);
  width: 100%; outline: none; padding: 0; min-width: 0;
}
.calc-input:focus-within { outline: 3px solid var(--terracotta-light); outline-offset: 6px; }
.split-bar { display: flex; height: 47px; width: 100%; }
.split-bar .a { flex: 75; background: var(--sage-pale); }
.split-bar .b { flex: 25; background: var(--terracotta); }
.split-bar--article .a { background: var(--sage); }
.calc-out__label { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--s1); display: flex; align-items: center; gap: 10px; }
.calc-out__label .sq { width: 16px; height: 16px; background: var(--terracotta); flex: none; }
.calc-out__value { font-weight: 300; font-size: 3.75rem; letter-spacing: -.02em; line-height: 1; }
.calc-out__value--warn { color: var(--terracotta-light); }
.calc-year {
  border-top: 1px solid var(--sage-muted); padding-top: var(--s4);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.calc-year b { font-weight: 300; font-size: 4.75rem; letter-spacing: -.03em; line-height: 1; color: var(--terracotta-light); }

/* Home timeline */
.timeline--home { margin-left: clamp(0px, 18vw, 38.2%); gap: 0; }
.timeline--home .timeline__item {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--s2) var(--s4); padding: 0 0 var(--s5) var(--s4);
}
.timeline--home .tl-dot { top: 16px; }
.timeline__year { font-weight: 300; font-size: clamp(2.9375rem, 5vw, 4.75rem); line-height: 1; letter-spacing: -.03em; }

/* Stories */
.stories { --min: 260px; --gap: var(--s6) var(--s5); align-items: start; }
.story { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--offset, 0); }
.story .circle { width: var(--size, 100%); }
@media (max-width: 700px) { .story { margin-top: 0; } }

/* Bar charts (vertical) */
.vchart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
.vchart__axis { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 1.125rem; color: var(--sage); text-align: center; }
.vchart__bars {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--bar-gap, clamp(4px, 1vw, 14px)); align-items: end;
  height: var(--h, clamp(260px, 32vw, 420px)); border-bottom: 2px solid var(--forest);
}
.vchart__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: var(--s1); }
.vchart__col span { font-size: clamp(.875rem, 1.4vw, 1.25rem); font-weight: 600; }
.vchart__col i { display: block; width: 100%; background: var(--sage-pale); }
.vchart__labels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--bar-gap, clamp(4px, 1vw, 14px)); margin-top: var(--s1); }
.vchart__labels span { font-family: var(--mono); font-size: clamp(.75rem, 1.2vw, 1.125rem); text-align: center; }
.c-forest { background: var(--forest) !important; }
.c-sage { background: var(--sage) !important; }
.c-sage-muted { background: var(--sage-muted) !important; }
.c-sage-pale { background: var(--sage-pale) !important; }
.c-sand { background: var(--sand) !important; }
.c-almond { background: var(--almond) !important; }
.c-terracotta { background: var(--terracotta) !important; }
.c-terracotta-soft { background: var(--terracotta-soft) !important; }

/* Myths */
.myth { --min: 300px; --gap: var(--s3) var(--s6); padding: var(--s4) 0; border-top: 2px solid var(--forest); }
.myth__side { display: flex; gap: var(--s3); align-items: baseline; }
.myth__label { font-family: var(--mono); font-size: 1.125rem; flex: none; }
.myth__heard { font-size: 1.5rem; line-height: 1.382; }
.myth__fact { font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin-bottom: 8px; }
.tag-notquite {
  display: inline-block; font-family: var(--mono); font-size: 1rem; font-weight: 700;
  border: 1.5px solid var(--sage-muted); color: var(--sage); padding: 0 8px; margin-bottom: 8px;
}

/* Laws */
.bg-sage .row { border-top: 1px solid var(--sage-muted); }
.bg-sage .row-meta .date { color: var(--sage-pale); }
.bg-sage .row p { color: var(--sage-text); }

/* Bill tracker */
.bills__title { position: sticky; top: var(--s4); align-self: start; }
.bill { padding-bottom: var(--s5); }
.bill h3 { font-size: clamp(1.8125rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.2; margin-bottom: var(--s2); }
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: var(--s5) 0 0; padding: 0; }
.stage { display: flex; flex-direction: column; gap: var(--s2); }
.stage__track { display: flex; align-items: center; }
.stage__dot { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--white); background: transparent; }
.stage__line { flex: 1; height: 2px; background: rgba(255,255,255,.45); }
.stage--done .stage__dot { background: var(--white); }
.stage--done .stage__line { background: var(--white); }
.stage--current .stage__dot { background: var(--forest); }
.stage:last-child .stage__line { background: transparent; }
.stage__label { font-size: clamp(1rem, 1.6vw, 1.375rem); font-weight: 500; padding-right: 8px; line-height: 1.3; }
.stage--current .stage__label { font-weight: 700; }
@media (max-width: 700px) { .bills__title { position: static; } }

/* Feed */
.feed-list a, .feed-list .feed-item { display: block; padding: 20px 0; border-top: 1px solid var(--sage-pale); text-decoration: none; }
.feed-list .t { font-size: 1.375rem; font-weight: 500; line-height: 1.382; }
.js .feed-panel:not(.is-active) { display: none; }
.feed-panel h3 { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--s1); }
.js .feed-panel h3 { display: none; }

/* Stay informed */
.stay-form { display: flex; flex-direction: column; gap: var(--s3); max-width: 440px; }
.field-label { font-size: 1.25rem; font-weight: 600; }
.field-line {
  font-size: 1.375rem; padding: 14px 0; background: transparent;
  border: none; border-bottom: 2px solid var(--forest); outline: none; color: var(--forest);
}
.field-line:focus { border-bottom-color: var(--terracotta); }
.field-box {
  font-size: 1.25rem; line-height: 1.5; padding: var(--s3); background: var(--almond);
  border: 1px solid var(--sage-muted); outline: none; resize: vertical; color: var(--forest); width: 100%;
}
.field-box:focus { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.feedback { border-left: 6px solid var(--forest); padding-left: var(--s5); }
.feedback form { display: flex; flex-direction: column; gap: var(--s3); }
.feedback fieldset { border: 0; padding: 0; margin: 0; }
.form-status { font-size: 1.5rem; font-weight: 600; }
.stay-submit { align-self: flex-start; }
.btn-outline.stay-submit { font-size: 1.25rem; padding: 0 var(--s4); }
@media (max-width: 700px) { .feedback { padding-left: var(--s4); } }

/* ---- Blog --------------------------------------------------------------- */
.page-title { padding: var(--s7) var(--gutter) var(--s6); }
.title-bar { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); }
.title-bar div { height: 14px; background: var(--terracotta); }
.h-display {
  font-weight: 100; font-size: clamp(4.5rem, 12vw, 11.25rem);
  line-height: .9; letter-spacing: -.045em; margin: var(--s3) 0 var(--s5) -0.04em;
}
.featured { --min: 360px; --gap: var(--s6); align-items: center; overflow-x: clip; }
.featured__art { width: min(100%, 520px); }
.featured__art .circle__disc { width: 38.2%; right: -8%; bottom: -4%; background: var(--sage); }
.featured__link { text-decoration: none; display: flex; flex-direction: column; gap: var(--s3); max-width: 560px; }
.featured__link h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.featured__link:hover { color: inherit; }
.featured__link:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.featured__link .btn { align-self: flex-start; }
.post-row { grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: var(--s5); }
.post-row .date { font-weight: 700; }
.post-row .read { color: var(--sage-muted); }
.post-row .ago { color: var(--sage); }
div.post-row { display: grid; }
@media (max-width: 700px) { .post-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

/* ---- Article ------------------------------------------------------------ */
.progress { position: fixed; top: 0; left: 0; height: 6px; width: 0; background: var(--terracotta); z-index: 30; }
.in-short { background: var(--forest); color: var(--almond); font-weight: 500; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); max-width: 760px; }
.in-short li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.in-short .n { font-weight: 300; font-size: 1.8125rem; color: var(--sage-pale); }
.in-short p { font-size: 1.25rem; line-height: 1.5; }
.in-short ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }

.article-body {
  padding: 0 var(--gutter) var(--s8);
  display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr);
  column-gap: var(--s5);
}
/* Plain markdown content lands in the wide column */
.article-body > * { grid-column: 2; max-width: 36em; }
.article-body > h2 { font-size: 2.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin: var(--s6) 0 var(--s4); }
.article-body > p, .article-body > ul, .article-body > ol { font-size: 1.25rem; line-height: 1.618; margin: 0 0 var(--s4); text-wrap: pretty; }
/* Designed blocks span both columns */
.article-body > .a-row { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: subgrid; margin-bottom: var(--s6); }
.article-body > .a-row--94 { margin-bottom: var(--s7); }
.a-row > .aside { grid-column: 1; text-align: right; color: var(--sage); font-size: 1.125rem; line-height: 1.5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: var(--s2); }
.a-row > .aside .meta { color: var(--sage); }
.a-row > .aside b { font-weight: 600; color: var(--forest); }
.a-row > .aside span:last-child { max-width: 16em; }
.a-row > .main { grid-column: 2; max-width: 36em; }
.a-row > .full { grid-column: 1 / -1; }
.a-row h2 { font-size: 2.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; margin-bottom: var(--s4); }
.a-row p { font-size: 1.25rem; line-height: 1.618; text-wrap: pretty; }
.a-row p + p { margin-top: var(--s4); }
.dropcap::first-letter {
  float: left; font-weight: 100; font-size: 6.875rem; line-height: .8;
  margin: 6px 12px 0 -4px; color: var(--sage);
}
.a-figure {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s4); align-items: end; border-top: 2px solid var(--forest); padding-top: var(--s4);
}
.a-figure .arrow { font-weight: 300; font-size: 2.9375rem; color: var(--sage-muted); }
.a-figure figcaption { grid-column: 1 / -1; font-size: 1.125rem; color: var(--sage); }
.a-figure figcaption strong { font-weight: 600; color: var(--forest); }
.pull {
  grid-column: 1 / -1 !important; max-width: none !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s5);
  margin-bottom: var(--s7); padding: var(--s6) 0;
  border-top: 1px solid var(--sage-pale); border-bottom: 1px solid var(--sage-pale);
}
.pull blockquote { color: var(--terracotta); font-weight: 300; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.pull__mark { align-self: end; justify-self: end; display: flex; gap: var(--s3); align-items: stretch; }
.pull__mark .meta { align-self: flex-end; }
.pull__mark .bar-v { height: 94px; }
.contacts .contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--sage-pale); align-items: baseline; }
.contacts .contact span { font-size: 1.25rem; font-weight: 600; }
.contacts .contact a { font-family: var(--mono); font-size: 1.25rem; white-space: nowrap; }
.contacts--bold .contact a { font-family: var(--sans); font-weight: 700; }
.sources-list { margin: 0; padding: 0 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s2); font-size: 1.125rem; line-height: 1.5; max-width: 40em; }
@media (max-width: 700px) {
  .article-body, .article-body > .a-row { grid-template-columns: minmax(0, 1fr); }
  .article-body > *, .a-row > .aside, .a-row > .main { grid-column: 1; }
  .a-row > .aside { text-align: left; align-items: flex-start; padding: 0 0 var(--s3); }
}

/* ---- Podcast ------------------------------------------------------------ */
.pod-title { position: relative; padding: var(--s7) var(--gutter) var(--s8); display: flex; flex-direction: column; gap: var(--s6); overflow: hidden; }
.pod-title h1 { font-weight: 100; font-size: clamp(3.75rem, 9vw, 9.375rem); line-height: .9; letter-spacing: -.045em; margin-left: -0.04em; }
.pod-art { width: min(100%, 480px); justify-self: end; }
.pod-art .circle__disc { width: 38.2%; left: -10%; top: -6%; background: var(--sage-pale); }
.formats { --min: 220px; --gap: var(--s5); }
.format__n { font-weight: 300; font-size: 3.75rem; line-height: .9; color: var(--sage-muted); }
.episode { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--sage); }
.episode__no { font-weight: 300; font-size: 2.9375rem; line-height: 1; letter-spacing: -.02em; }
.episode p { color: var(--sage-text); }
.episode__links { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 1.125rem; font-weight: 600; margin-top: var(--s3); }
.episode__links a { color: var(--almond); }
.episode__links .soon { color: var(--sage-pale); font-family: var(--mono); font-weight: 400; }
@media (max-width: 700px) { .episode { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }

/* ---- Fund health -------------------------------------------------------- */
.cards { --min: 240px; --gap: 2px; }
.card { padding: var(--s5) 36px; display: flex; flex-direction: column; gap: var(--s3); }
.card--outline { outline: 2px solid var(--forest); outline-offset: -2px; }
.card--almond { background: var(--almond); color: var(--forest); }
.card--terracotta { background: var(--terracotta); color: var(--white); }
.card--forest { background: var(--forest); color: var(--almond); }
.card .q { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; }
.card .big-word { font-weight: 300; font-size: clamp(2.9375rem, 5vw, 4.75rem); line-height: .95; letter-spacing: -.03em; }
.card p { font-size: 1.25rem; font-weight: 500; line-height: 1.5; }

.hbars { display: flex; flex-direction: column; gap: var(--s3); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; }
.hbar .label { font-size: 1.25rem; font-weight: 600; }
.hbar .v { font-weight: 300; font-size: 1.8125rem; text-align: right; }
.hbar .v--out { color: var(--terracotta); }
.hbar i { grid-column: 1 / -1; height: 29px; display: block; }
.total-row { border-top: 2px solid var(--forest); padding-top: var(--s3); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; align-items: baseline; }
.total-row b { font-size: 1.375rem; font-weight: 700; }
.total-row span { font-weight: 300; font-size: 2.9375rem; }

.govpay { display: flex; flex-direction: column; gap: var(--s2); max-width: 640px; }
.govpay__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px; gap: var(--s3); align-items: center; }
.govpay__row .y { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; }
.govpay__row i { height: 22px; display: block; }
.govpay__row .v { font-size: 1.25rem; font-weight: 600; text-align: right; }
.callout { margin-top: var(--s5); padding: var(--s4); background: var(--sage); display: flex; gap: var(--s3); align-items: flex-start; max-width: 640px; }
.callout::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sage-pale); flex: none; margin-top: 6px; }
.callout p { font-size: 1.25rem; line-height: 1.5; }
@media (max-width: 480px) { .govpay__row { grid-template-columns: 96px minmax(0, 1fr) 72px; gap: var(--s2); } }

.returns { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding-top: 36px; }
.returns__goal { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--terracotta); }
.returns__goal span { position: absolute; top: 0; left: 8px; font-family: var(--mono); font-size: 1.125rem; font-weight: 700; color: var(--terracotta); white-space: nowrap; }
.return { display: grid; gap: var(--s1); }
.return__head { display: flex; justify-content: space-between; gap: var(--s2); font-size: 1.25rem; }
.return__head span:first-child { font-weight: 600; }
.return__head span:last-child { font-weight: 700; }
.return i { height: 29px; display: block; }
.return--above .return__head span:last-child { color: var(--sage); }
.return--below .return__head span:last-child { color: var(--terracotta); }

.alloc-bar { display: flex; height: 76px; margin-bottom: var(--s4); }
.alloc-legend { --min: 220px; --gap: var(--s3) var(--s4); }
.alloc-legend > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s2); align-items: center; }
.alloc-legend .sw { width: 18px; height: 18px; }
.alloc-legend b { font-size: 1.25rem; font-weight: 600; }
.alloc-legend p { grid-column: 2; font-size: 1.125rem; line-height: 1.4; }

.people { --min: 220px; --gap: var(--s5); }
.person { display: flex; flex-direction: column; gap: var(--s2); border-top: 2px solid var(--forest); padding-top: var(--s3); }
.person b { font-weight: 100; font-size: clamp(3.75rem, 6vw, 6rem); line-height: .9; letter-spacing: -.04em; }
.person strong { font-size: 1.25rem; font-weight: 600; }
.person span { font-size: 1.125rem; line-height: 1.5; }

.risk { --min: 300px; --gap: var(--s3) var(--s6); padding: var(--s4) 0; border-top: 2px solid var(--forest); }
.risk__head { display: flex; gap: var(--s3); align-items: baseline; }
.risk__head .n { font-weight: 300; font-size: 2.9375rem; line-height: .9; color: var(--sage); }
.risk__head .n--urgent { color: var(--terracotta); }

.terms > div { padding: var(--s3) 0; border-top: 1px solid var(--sage-pale); }
.terms b { display: block; font-size: 1.375rem; font-weight: 700; margin-bottom: 4px; }
.terms p { font-size: 1.25rem; line-height: 1.5; }

/* ---- Glossary ----------------------------------------------------------- */
.search-field { display: flex; flex-direction: column; gap: var(--s2); max-width: 560px; }
.search-field input {
  font-size: 1.5rem; padding: 14px var(--s3); background: var(--white);
  border: 2px solid var(--forest); outline: none; color: var(--forest); min-height: 56px; border-radius: 0;
}
.search-field input:focus { box-shadow: 0 0 0 3px var(--terracotta); }
.letters { display: flex; flex-wrap: wrap; gap: 8px; }
.letters a {
  min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--forest); font-size: 1.375rem; font-weight: 700; text-decoration: none;
}
.letters a:hover { background: var(--forest); color: var(--almond); }
.gloss-group { border-top: 2px solid var(--forest); padding: var(--s4) 0 var(--s3); }
.gloss-group__ch { font-weight: 100; font-size: clamp(3.75rem, 7vw, 6.875rem); line-height: .85; text-align: right; color: var(--terracotta); }
.gloss-term { padding: var(--s3) 0; border-bottom: 1px solid var(--sage-pale); max-width: 40em; }
.gloss-term h2 { font-size: 1.625rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.gloss-term p { font-size: 1.25rem; line-height: 1.618; }
@media (max-width: 700px) { .gloss-group__ch { text-align: left; } }

/* ---- About -------------------------------------------------------------- */
.about-art { width: min(100%, 460px); }
.about-art .circle__disc { width: 38.2%; right: -6%; bottom: -4%; background: var(--terracotta); }
.supplement { background: var(--almond-deep); padding: var(--s5); max-width: 820px; display: flex; flex-direction: column; gap: var(--s3); }
.supplement .btn { align-self: flex-start; margin-top: 8px; font-size: 1.25rem; padding: 16px 26px; }
.fair-q { display: inline-block; background: var(--terracotta); color: var(--white); font-size: 1.25rem; font-weight: 700; padding: 8px 16px; margin-bottom: var(--s3); }
.h-fair { font-weight: 100; font-size: clamp(2.9375rem, 5vw, 4.75rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.compare { --min: 220px; --gap: 8px var(--s4); padding: 20px 0; border-top: 1px solid var(--sage-pale); }
.compare > div { display: flex; flex-direction: column; gap: 4px; }
.compare .who { font-family: var(--mono); font-size: 1.125rem; font-weight: 700; color: var(--sage); }
.compare .who--us { color: var(--terracotta); }
.compare p { font-size: 1.25rem; line-height: 1.4; }
.compare .us { font-weight: 600; }
.principles { --min: 240px; --gap: var(--s5); }
.principle { display: flex; flex-direction: column; gap: var(--s2); border-top: 2px solid var(--sage-pale); padding-top: var(--s3); }
.principle .n { font-weight: 300; font-size: 3.75rem; line-height: .9; color: var(--terracotta-light); }
.principle h3 { font-size: 1.5rem; font-weight: 700; }
.principle p { font-size: 1.25rem; line-height: 1.5; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: 20px 0; border-top: 1px solid var(--sage-pale); text-decoration: none; }
.source-row:hover { background: var(--almond-deep); color: inherit; }
.source-row b { font-size: 1.375rem; font-weight: 700; }
.source-row .arr { font-size: 1.25rem; font-weight: 700; color: var(--terracotta); }
.source-row p { grid-column: 1 / -1; font-size: 1.25rem; line-height: 1.5; }
.side-rule { border-left: 6px solid var(--forest); padding-left: 36px; }
.side-rule--accent { border-left-color: var(--terracotta); }

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