/* ============================================================
   MMM Website — shared stylesheet
   Every visual decision derives from the Mighty Minds Movement
   design system. Tokens imported from colors_and_type.css.
   Motion language references kinfolk.com: slow, weighted,
   editorial. Fade-and-rise reveals, images that settle into
   frame on scroll. Nothing drifts, nothing bounces.
   ============================================================ */

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

html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  background: var(--mmm-ink);
  color: var(--mmm-ivory);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* ============================================================
   NAV — floating wordmark (scrolls away) + persistent color-adapting hamburger.
   Open: full-screen ink-3 overlay.
   ============================================================ */
/* Wordmark — absolutely positioned at page top; scrolls away with content. */
.site-logo {
  position: absolute; top: 31px; left: var(--gutter); z-index: 40;
  display: inline-flex; align-items: center; height: 24px;
  opacity: 0; transform: translateY(-12px);
  animation: navReveal var(--duration-3) var(--ease-editorial) 100ms forwards;
}
.site-logo img { height: 24px; width: auto; display: block; filter: brightness(0) invert(1); }
@keyframes navReveal { to { opacity: 1; transform: translateY(0); } }

/* Hamburger — fixed, persistent; lines flip ink/ivory to stay visible. */
.site-ham {
  position: fixed; top: 24px; right: var(--gutter); z-index: 60;
  display: flex; flex-direction: column; width: 36px;
  padding: 14px 0; margin: 0; background: transparent; border: none; cursor: pointer;
  opacity: 0; animation: hamReveal var(--duration-2) var(--ease-editorial) 380ms forwards;
}
@keyframes hamReveal { to { opacity: 1; } }
.site-ham .line {
  display: block; width: 100%; height: 1px; background: var(--mmm-ivory); flex: none;
  transition: margin var(--duration-2) var(--ease-editorial), background-color var(--duration-2) var(--ease-editorial);
}
.site-ham .line:first-child { margin-bottom: 7px; }
.site-ham:hover .line:first-child { margin-bottom: 11px; }
.site-ham.on-light .line { background: var(--mmm-ink); }
.site-ham.is-hidden { opacity: 0 !important; pointer-events: none; }

/* Overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--mmm-ink-3); color: var(--mmm-ivory);
  transform: translateY(-100%);
  transition: transform var(--duration-3) var(--ease-editorial);
  visibility: hidden; pointer-events: none;
}
.menu-overlay.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; }
.menu-overlay__chrome {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 24px var(--gutter) 0;
  display: flex; align-items: flex-start; justify-content: space-between; z-index: 3;
  pointer-events: none; /* don't let the empty chrome box block the top menu links */
}
.menu-overlay__chrome a, .menu-overlay__chrome button { pointer-events: auto; }
.menu-overlay__logo { display: inline-flex; align-items: center; margin-top: 108px; transition: margin-top var(--duration-2) var(--ease-editorial); }
.menu-overlay__logo img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.menu-overlay__close {
  position: fixed; top: 24px; right: var(--gutter); z-index: 5;
  width: 36px; height: 38px; background: transparent; border: none; cursor: pointer; padding: 0;
  opacity: 0; transition: opacity var(--duration-1) var(--ease-editorial);
}
.menu-overlay.is-open .menu-overlay__close { opacity: 1; transition-delay: 200ms; }
.menu-overlay__close::before, .menu-overlay__close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; margin-left: -13px; height: 1px; background: var(--mmm-ivory);
}
.menu-overlay__close::before { transform: rotate(45deg); }
.menu-overlay__close::after  { transform: rotate(-45deg); }
.menu-overlay__grid {
  position: relative; z-index: 2; min-height: 100vh; padding: 128px 0 64px;
  display: grid; grid-template-columns: 48% 18% 7% 27%; align-content: start;
}
.menu-overlay__col-left  { grid-column: 2; padding-right: 24px; display: flex; flex-direction: column; gap: 32px; }
.menu-overlay__col-right { grid-column: 4; padding-right: var(--gutter); display: flex; flex-direction: column; }
.menu-overlay__col-left, .menu-overlay__col-right { opacity: 0; transform: translateY(-22px); transition: opacity var(--duration-2) var(--ease-editorial), transform var(--duration-2) var(--ease-editorial); }
.menu-overlay.is-open .menu-overlay__col-left  { opacity: 1; transform: none; transition-delay: 240ms; }
.menu-overlay.is-open .menu-overlay__col-right { opacity: 1; transform: none; transition-delay: 300ms; }
.menu-overlay__col-left ul { display: flex; flex-direction: column; gap: 6px; }
.menu-overlay__col-left ul li a {
  font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: -0.002em;
  color: var(--mmm-ivory); display: inline-block; transition: opacity var(--duration-1) var(--ease-editorial);
}
.menu-overlay__col-right ul { display: flex; flex-direction: column; gap: 6px; }
.menu-overlay__col-right ul li {
  font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.3; letter-spacing: -0.012em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
}
.menu-overlay__col-right ul li:first-child { margin-top: -4px; }
.menu-overlay__col-right ul li a { color: var(--mmm-ivory); display: inline-block; transition: opacity var(--duration-1) var(--ease-editorial); }
.menu-overlay__col-right ul li.support-now a { color: var(--mmm-gold); }
.menu-overlay__col-left ul:hover  li a:not(:hover) { opacity: 0.4; }
.menu-overlay__col-right ul:hover li a:not(:hover) { opacity: 0.32; }
body.menu-open { overflow: hidden; }

/* ============================================================
   SHARED ATOMS
   ============================================================ */
.overline {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mmm-ivory);
}
.overline__mark { display: inline-block; width: 28px; height: 1px; background: var(--mmm-gold-light); flex: none; }
.overline--on-ivory { color: var(--mmm-grey); }
.overline--on-ivory .overline__mark { background: var(--mmm-gold-deep); }

.beat { font-style: italic; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1; }
.terminus { color: var(--mmm-gold-light); }
.terminus--on-ivory { color: var(--mmm-gold-deep); }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mmm-ivory); color: var(--mmm-ink);
  font-family: var(--font-sans); font-size: var(--type-ui-sm); font-weight: 500; letter-spacing: 0.02em;
  padding: 16px 22px; transition: background var(--duration-2) var(--ease-editorial), color var(--duration-2) var(--ease-editorial);
}
.cta:hover { background: var(--mmm-gold-light); }
.cta--on-ivory { background: var(--mmm-ink); color: var(--mmm-ivory); }
.cta--on-ivory:hover { background: var(--mmm-gold-deep); color: var(--mmm-ivory); }
.cta .arrow { transition: transform var(--duration-2) var(--ease-editorial); }
.cta:hover .arrow { transform: translateX(3px); }

.cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--mmm-hairline); color: var(--mmm-ivory);
  font-family: var(--font-sans); font-size: var(--type-ui-sm); font-weight: 500; letter-spacing: 0.02em;
  padding: 15px 21px; transition: border-color var(--duration-2) var(--ease-editorial), background var(--duration-2) var(--ease-editorial);
}
.cta-ghost:hover { border-color: var(--mmm-gold-light); background: rgba(247,244,237,0.04); }
.cta-ghost--on-ivory { border-color: var(--mmm-hairline-ink); color: var(--mmm-ink); }
.cta-ghost--on-ivory:hover { border-color: var(--mmm-gold-deep); background: rgba(12,16,24,0.03); }

.link {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-sans); font-size: var(--type-ui-md); font-weight: 500; letter-spacing: 0.02em;
  color: var(--mmm-gold-deep); padding-bottom: 4px; border-bottom: 1px solid var(--mmm-gold-deep);
  transition: color var(--duration-1) var(--ease-editorial), border-color var(--duration-1) var(--ease-editorial);
}
.link:hover { color: var(--mmm-ink); border-bottom-color: var(--mmm-ink); }
.link .arrow { transition: transform var(--duration-2) var(--ease-editorial); }
.link:hover .arrow { transform: translateX(4px); }
.link--on-ink { color: var(--mmm-gold-light); border-bottom-color: var(--mmm-gold-light); }
.link--on-ink:hover { color: var(--mmm-ivory); border-bottom-color: var(--mmm-ivory); }

/* ============================================================
   SECTION FRAMES
   ============================================================ */
.section { position: relative; padding: var(--s-10) var(--gutter) var(--s-9); }
.section--ivory { background: var(--mmm-ivory); color: var(--mmm-ink); }
.section--ink   { background: var(--mmm-ink);   color: var(--mmm-ivory); }
.section--ink-2 { background: var(--mmm-ink-2);  color: var(--mmm-ivory); }
.section--tight { padding-top: var(--s-9); }
.wrap { max-width: 1320px; margin: 0 auto; }
.wrap--narrow { max-width: 920px; margin: 0 auto; }

.h1 {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-display-1);
  line-height: var(--lead-display); letter-spacing: var(--track-display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
}
.h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-display-2);
  line-height: var(--lead-headline); letter-spacing: var(--track-headline);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; max-width: 16ch;
}
.h2--wide { max-width: 24ch; }
.h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-display-3);
  line-height: var(--lead-headline); letter-spacing: var(--track-headline);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0;
}
.h3 .beat { font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1; }
.phero__h1 .hl { display: block; }
.lede {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-lede);
  line-height: var(--lead-lede); letter-spacing: var(--track-lede); max-width: var(--measure-wide);
}
.body {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-body);
  line-height: var(--lead-body); max-width: var(--measure-wide);
}
.body + .body { margin-top: 1em; }
.body--secondary { color: var(--mmm-grey); }
.section--ink .body--secondary, .section--ink-2 .body--secondary { color: rgba(247,244,237,0.62); }

/* ============================================================
   HERO (page-level) — two registers: dark (ink) and light (ivory)
   ============================================================ */
.phero {
  position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 160px var(--gutter) 80px; isolation: isolate; overflow: hidden;
}
.phero--ink { background: var(--mmm-ink); color: var(--mmm-ivory); }
.phero--ivory { background: var(--mmm-ivory); color: var(--mmm-ink); }
.phero__inner { position: relative; z-index: 5; max-width: 1320px; margin: 0 auto; width: 100%; }
.phero__label { margin-bottom: 40px; }
.phero__h1 { max-width: 16ch; margin-bottom: 36px; }
.phero__sub {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--type-lede);
  line-height: var(--lead-lede); letter-spacing: var(--track-lede); max-width: 30ch; margin-bottom: 32px;
}
.phero__body { max-width: 52ch; margin-bottom: 44px; color: rgba(247, 244, 237, 0.82); }
.phero__cta { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }

/* Full-bleed hero photo + heavy scrim (masks low-res source imagery).
   Every page hero is dark with a picture. */
.phero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-color: var(--mmm-ink);
  transform: scale(1.04); opacity: 0;
  animation: heroPhotoIn 1600ms var(--ease-editorial) 120ms forwards;
}
@keyframes heroPhotoIn { to { transform: scale(1); opacity: 1; } }
.phero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,16,24,0.78) 0%, rgba(12,16,24,0.46) 44%, rgba(12,16,24,0.08) 100%),
    linear-gradient(0deg, rgba(12,16,24,0.92) 0%, rgba(12,16,24,0.55) 20%, rgba(12,16,24,0) 52%);
}

/* Heroes are dark; inner overlines/termini follow the ink register
   regardless of any --on-ivory modifier carried over from earlier layout. */
.phero .overline,
.phero .overline--on-ivory { color: var(--mmm-ivory); }
.phero .overline__mark,
.phero .overline--on-ivory .overline__mark { background: var(--mmm-gold-light); }
.phero .terminus,
.phero .terminus--on-ivory { color: var(--mmm-gold-light); }
.phero .cta--on-ivory { background: var(--mmm-ivory); color: var(--mmm-ink); }
.phero .cta--on-ivory:hover { background: var(--mmm-gold-light); }
.phero .cta-ghost--on-ivory { border-color: var(--mmm-hairline); color: var(--mmm-ivory); }
.phero .cta-ghost--on-ivory:hover { border-color: var(--mmm-gold-light); }

/* Hero load orchestration — staggered reveal */
.phero [data-load] { opacity: 0; transform: translateY(10px); }
.phero.is-loaded [data-load] { opacity: 1; transform: translateY(0); transition: opacity var(--duration-3) var(--ease-editorial), transform var(--duration-3) var(--ease-editorial); }
.phero.is-loaded [data-load="1"] { transition-delay: 240ms; }
.phero.is-loaded [data-load="2"] { transition-delay: 380ms; }
.phero.is-loaded [data-load="3"] { transition-delay: 520ms; }
.phero.is-loaded [data-load="4"] { transition-delay: 640ms; }

/* ============================================================
   KINFOLK / TRES MARES MOTION — scroll reveals
   .reveal: fade + rise. .reveal-img: image settles, de-zooms, sharpens.
   Hero headlines clip-rise. Stagger children with [data-stagger].
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1100ms var(--ease-editorial), transform 1100ms var(--ease-editorial); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }

.reveal-img { overflow: hidden; }
.reveal-img img { transform: scale(1.09); filter: blur(6px); transition: transform 1600ms var(--ease-editorial), filter 1200ms var(--ease-editorial); will-change: transform, filter; }
.reveal-img.is-in img { transform: scale(1); filter: blur(0); }

[data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity 950ms var(--ease-editorial), transform 950ms var(--ease-editorial); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 110ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 220ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 330ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 440ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 550ms; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 660ms; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: 770ms; }
[data-stagger].is-in > *:nth-child(9) { transition-delay: 880ms; }
[data-stagger].is-in > *:nth-child(10) { transition-delay: 990ms; }

/* Cinematic clip-rise for hero headlines (wrapped by site.js).
   The hero is not opacity-faded, so the clip reveal is always visible. */
.rise { overflow: hidden; }
.rise__in { display: block; transform: translateY(112%); transition: transform 1300ms var(--ease-editorial); will-change: transform; padding-bottom: 0.12em; }
.phero__h1.rise .rise__in { transition-delay: 360ms; }
.phero.is-loaded .rise.is-armed .rise__in,
.rise.is-in .rise__in { transform: none; }

/* Hero photo parallax layer (driven by site.js translateY) */
.phero__photo { will-change: transform; }

/* Hover zoom for gallery / grid imagery (kinfolk-style restraint) */
.gallery .figure, .dir-person__photo, .story__media, .figure.arch-photo,
.proof-photo, .session-photo, .sj-photo, .village-photo, .origin-photo {
  overflow: hidden;
}
.gallery .figure img, .dir-person__photo img {
  transition: transform 900ms var(--ease-editorial);
  will-change: transform;
}
.gallery .figure:hover img, .dir-person__photo:hover img { transform: scale(1.05); }

/* ============================================================
   FIGURE / IMAGE
   ============================================================ */
.figure { position: relative; }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure__cap {
  margin-top: 14px; font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--mmm-grey);
}
.section--ink .figure__cap, .section--ink-2 .figure__cap { color: var(--fg-3); }
.figure--portrait { aspect-ratio: 4/5; }
.figure--landscape { aspect-ratio: 3/2; }
.figure--square { aspect-ratio: 1/1; }
.fullbleed { width: 100%; }
.fullbleed img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   EDITORIAL TWO-COLUMN (sticky head + body)
   ============================================================ */
.editorial { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-9); align-items: start; max-width: 1320px; margin: 0 auto; }
.editorial__head { display: flex; flex-direction: column; gap: var(--s-5); position: sticky; top: 120px; }
.editorial__body { display: flex; flex-direction: column; gap: var(--s-6); padding-top: 6px; }
.editorial__body .body { max-width: 46ch; }
.editorial__link { margin-top: var(--s-3); }

.hairline-divider { height: 1px; background: var(--mmm-hairline-ink); max-width: 1320px; margin: 0 auto; }
.hairline-divider--on-ink { background: var(--mmm-hairline); }

/* Reusable image + text split (portrait beside copy) */
.media-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-9); align-items: center; max-width: 1320px; margin: 0 auto; }
.media-split--rev .media-split__media { order: 2; }
.media-split__media { aspect-ratio: 4/5; overflow: hidden; }
.media-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .media-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .media-split--rev .media-split__media { order: 0; }
  .media-split__media { aspect-ratio: 3/2; max-height: 420px; }
}

/* ============================================================
   PATHWAYS COLLAGE — masonry of photo / text / video tiles
   ============================================================ */
.collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 188px; gap: 16px; grid-auto-flow: dense; }
.ctile { position: relative; overflow: hidden; display: block; color: inherit; background: var(--mmm-ink-2); }
.ctile--wide { grid-column: span 2; }
.ctile--tall { grid-row: span 2; }
.ctile--big { grid-column: span 2; grid-row: span 2; }
.ctile--media img, .ctile--media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease-editorial); }
.ctile--media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,24,0) 38%, rgba(12,16,24,0.86) 100%); pointer-events: none; }
a.ctile--media:hover img { transform: scale(1.05); }
.ctile__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ctile__cat { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mmm-gold-light); }
.ctile__name { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: -0.015em; font-variation-settings: "opsz" 72,"SOFT" 40,"WONK" 0; color: var(--mmm-ivory); }
.ctile__sub { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.02em; color: rgba(247,244,237,0.72); }
.ctile__loop { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mmm-ivory); }
.ctile__loop::before { content: ""; width: 7px; height: 7px; background: var(--mmm-gold-light); border-radius: 50%; animation: loopPulse 2.4s var(--ease-editorial) infinite; }
@keyframes loopPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ctile--text { background: transparent; border: 1px solid var(--mmm-hairline-ink); display: flex; flex-direction: column; padding: 20px; }
.ctile--text .ctile__cat { color: var(--mmm-gold-deep); }
.ctile--text .ctile__name { color: var(--mmm-ink); margin-top: 10px; }
.ctile--text .ctile__sub { color: var(--mmm-grey); margin-top: 8px; }
.ctile--text .ctile__rule { margin-top: auto; width: 28px; height: 2px; background: var(--mmm-gold-deep); transition: width var(--duration-2) var(--ease-editorial); }
a.ctile--text { transition: border-color var(--duration-2) var(--ease-editorial); }
a.ctile--text:hover { border-color: var(--mmm-gold-deep); }
a.ctile--text:hover .ctile__rule { width: 52px; }
.ctile__ext { position: absolute; top: 16px; right: 18px; color: var(--mmm-gold-deep); opacity: 0; transition: opacity var(--duration-2) var(--ease-editorial); font-size: 15px; }
a.ctile--text:hover .ctile__ext { opacity: 1; }
@media (max-width: 900px) {
  .collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 12px; }
  .ctile--big { grid-column: span 2; }
}
@media (max-width: 560px) {
  .collage { grid-auto-rows: 150px; }
  .ctile--wide, .ctile--big { grid-column: span 2; }
  .ctile--tall { grid-row: span 1; }
}

/* placeholder media tiles (image/video to be added later) */
.ctile--ph { background: var(--mmm-ink-2); }
.ctile--ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,24,0) 44%, rgba(12,16,24,0.72) 100%); pointer-events: none; }
.ctile__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(247,244,237,0.28); z-index: 1; }
.ctile__ph svg { width: 46px; height: 46px; }
.ctile__phtag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mmm-gold-light); border: 1px solid rgba(212,166,86,0.45); padding: 4px 8px; }
.ctile--ph .ctile__overlay { z-index: 2; }

/* ============================================================
   CONTEXTUAL SURFACE CORRECTION
   So a section's theme can be flipped by changing only its
   wrapper class — inner overline / terminus / link / cta
   modifiers adapt to the actual surface they sit on.
   ============================================================ */
/* On INK sections: anything authored for ivory flips to the ink register */
.section--ink .overline--on-ivory,
.section--ink-2 .overline--on-ivory { color: var(--fg-2); }
.section--ink .overline--on-ivory .overline__mark,
.section--ink-2 .overline--on-ivory .overline__mark { background: var(--mmm-gold-light); }
.section--ink .terminus--on-ivory,
.section--ink-2 .terminus--on-ivory { color: var(--mmm-gold-light); }
.section--ink .body--on-ivory,
.section--ink-2 .body--on-ivory { color: var(--mmm-ivory); }
.section--ink .link:not(.link--on-ink),
.section--ink-2 .link:not(.link--on-ink) { color: var(--mmm-gold-light); border-bottom-color: var(--mmm-gold-light); }
.section--ink .link:not(.link--on-ink):hover,
.section--ink-2 .link:not(.link--on-ink):hover { color: var(--mmm-ivory); border-bottom-color: var(--mmm-ivory); }
.section--ink .cta:not(.cta--on-ivory),
.section--ink-2 .cta:not(.cta--on-ivory) { background: var(--mmm-ivory); color: var(--mmm-ink); }
.section--ink .cta:not(.cta--on-ivory):hover,
.section--ink-2 .cta:not(.cta--on-ivory):hover { background: var(--mmm-gold-light); }
.section--ink .cta--on-ivory { background: var(--mmm-ivory); color: var(--mmm-ink); }
.section--ink .cta--on-ivory:hover { background: var(--mmm-gold-light); }
.section--ink .cta-ghost--on-ivory,
.section--ink-2 .cta-ghost--on-ivory { border-color: var(--mmm-hairline); color: var(--mmm-ivory); }
.section--ink .cta-ghost--on-ivory:hover,
.section--ink-2 .cta-ghost--on-ivory:hover { border-color: var(--mmm-gold-light); background: rgba(247,244,237,0.04); }

/* On IVORY sections: anything authored for ink flips to the ivory register */
.section--ivory .overline:not(.overline--on-ivory) { color: var(--mmm-grey); }
.section--ivory .overline:not(.overline--on-ivory) .overline__mark { background: var(--mmm-gold-deep); }
.section--ivory .terminus:not(.terminus--on-ivory) { color: var(--mmm-gold-deep); }
.section--ivory .body--secondary { color: var(--mmm-grey); }
.section--ivory .link--on-ink { color: var(--mmm-gold-deep); border-bottom-color: var(--mmm-gold-deep); }
.section--ivory .link--on-ink:hover { color: var(--mmm-ink); border-bottom-color: var(--mmm-ink); }
.section--ivory .cta:not(.cta--on-ivory) { background: var(--mmm-ink); color: var(--mmm-ivory); }
.section--ivory .cta:not(.cta--on-ivory):hover { background: var(--mmm-gold-deep); color: var(--mmm-ivory); }
.section--ivory .cta-ghost:not(.cta-ghost--on-ivory) { border-color: var(--mmm-hairline-ink); color: var(--mmm-ink); }
.section--ivory .cta-ghost:not(.cta-ghost--on-ivory):hover { border-color: var(--mmm-gold-deep); background: rgba(12,16,24,0.03); }

/* ============================================================
   COMPONENT SURFACE OVERRIDES
   Page-local components hard-code one surface's colors; these
   contextual rules (specificity 0,2,0) let them flip cleanly so
   sections can alternate light/dark on every page.
   ============================================================ */
/* Big number */
.section--ivory .bignum { color: var(--mmm-gold-deep); }

/* Speaker roster (pathways) — tiles stay dark on either surface */
.section--ivory .spk__role { color: var(--mmm-grey); }

/* Career blueprint (pathways) */
.section--ink .bp__num { color: var(--mmm-gold-light); }
.section--ink .bp__body { color: rgba(247,244,237,0.62); }

/* Final-CTA cards (pathways, values) */
.section--ivory .fc__card { border-color: var(--mmm-hairline-ink); }
.section--ivory .fc__card p { color: var(--mmm-grey); }

/* Manifesto (about, values) */
.section--ivory .manifesto { border-top-color: var(--mmm-hairline-ink); }
.section--ivory .manifesto__row { border-bottom-color: var(--mmm-hairline-ink); }
.section--ivory .manifesto__num { color: var(--mmm-gold-deep); }

/* Values list (values) */
.section--ink .values { border-top-color: var(--mmm-hairline); }
.section--ink .value { border-bottom-color: var(--mmm-hairline); }
.section--ink .value__num { color: var(--mmm-gold-light); }
.section--ink .value__quote { color: rgba(247,244,237,0.6); }
.section--ink .value__embody li { color: var(--mmm-ivory); }
.section--ink .value__embody li::before { background: var(--mmm-gold-light); }

/* Funding channels (support) */
.section--ink .ch { border-top-color: var(--mmm-hairline); }
.section--ink .ch__num { color: var(--mmm-gold-light); }
.section--ink .ch__body { color: rgba(247,244,237,0.62); }

/* Fund cards (donors) */
.section--ink .fund__card { border-top-color: var(--mmm-hairline); }
.section--ink .fund__num { color: var(--mmm-gold-light); }
.section--ink .fund__b { color: rgba(247,244,237,0.62); }

/* Role / structure list (parents) */
.section--ink .role { border-top-color: var(--mmm-hairline); }
.section--ink .role__n { color: var(--mmm-gold-light); }
.section--ink .role__b { color: rgba(247,244,237,0.62); }

/* Collaboration grid (companies) */
.section--ink .collab { border-top-color: var(--mmm-hairline); }
.section--ink .collab__cell { border-color: var(--mmm-hairline); }
.section--ink .collab__num { color: var(--mmm-gold-light); }
.section--ink .collab__b { color: rgba(247,244,237,0.62); }

/* Intake form (support) on a light surface */
.section--ivory .field label { color: var(--mmm-grey); }
.section--ivory .field input,
.section--ivory .field textarea { color: var(--mmm-ink); border-color: var(--mmm-hairline-ink); }
.section--ivory .field input::placeholder,
.section--ivory .field textarea::placeholder { color: rgba(12,16,24,0.4); }
.section--ivory .field input:focus,
.section--ivory .field textarea:focus { border-color: var(--mmm-gold-deep); box-shadow: inset 0 0 0 1px var(--mmm-gold-deep); }
.section--ivory .checks { border-color: var(--mmm-hairline-ink); }
.section--ivory .checks__legend { color: var(--mmm-grey); border-bottom-color: var(--mmm-hairline-ink); }
.section--ivory .check { color: var(--mmm-ink); }
.section--ivory .check + .check { border-top-color: var(--mmm-hairline-ink); }
.section--ivory .check:hover { background: rgba(12,16,24,0.03); }
.section--ivory .form-note { color: var(--mmm-grey); }
.section--ivory .form-thanks { color: var(--mmm-gold-deep); }

/* ============================================================
   PERSON CAROUSEL (About — one member at a time)
   ============================================================ */
.carousel { position: relative; }
.board-cluster + .board-cluster { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--mmm-hairline); }
.board-cluster__head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }

/* Named workstreams strip (scholar journey) */
.wstreams { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mmm-hairline-ink); }
.section--ink .wstreams, .section--ink-2 .wstreams { border-top-color: var(--mmm-hairline); }
.wstream { padding: var(--s-6) var(--s-5) 0 0; border-right: 1px solid var(--mmm-hairline-ink); display: flex; flex-direction: column; gap: 10px; }
.section--ink .wstream { border-right-color: var(--mmm-hairline); }
.wstream:last-child { border-right: none; padding-right: 0; }
.wstream:not(:first-child) { padding-left: var(--s-5); }
.wstream__n { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; color: var(--mmm-gold-deep); }
.section--ink .wstream__n { color: var(--mmm-gold-light); }
.wstream__t { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.12; letter-spacing: -0.015em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; }
.wstream__b { font-family: var(--font-serif); font-size: var(--type-body-sm); line-height: 1.5; color: var(--mmm-grey); }
.section--ink .wstream__b { color: rgba(247,244,237,0.6); }
@media (max-width: 900px) { .wstreams { grid-template-columns: 1fr 1fr; } .wstream { padding: var(--s-5) var(--s-5) 0 0 !important; } .wstream:nth-child(2n) { border-right: none; } }
@media (max-width: 560px) { .wstreams { grid-template-columns: 1fr; } .wstream { border-right: none !important; padding-left: 0 !important; border-top: 1px solid var(--mmm-hairline); padding-top: var(--s-5) !important; } }
.carousel__viewport { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-9); align-items: start; }
.carousel__slide { display: none; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-9); align-items: start; }
.carousel__slide.is-active { display: grid; animation: slideIn var(--duration-2) var(--ease-editorial); }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.carousel__media { display: flex; flex-direction: column; gap: var(--s-5); }
.carousel__photo { width: 100%; max-width: 360px; aspect-ratio: 4/5; background: var(--mmm-ink-3); overflow: hidden; }
.carousel__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__name { font-family: var(--font-sans); font-size: var(--type-ui-md); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.carousel__role { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mmm-gold-light); margin-top: 8px; }
.section--ivory .carousel__role { color: var(--mmm-gold-deep); }
.carousel__body { display: flex; flex-direction: column; gap: var(--s-6); padding-top: 4px; }
.carousel__kicker { font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-3); display: flex; align-items: center; gap: 14px; }
.section--ivory .carousel__kicker { color: var(--mmm-grey); }
.carousel__kicker::before { content: ""; width: 28px; height: 1px; background: var(--mmm-gold-light); }
.section--ivory .carousel__kicker::before { background: var(--mmm-gold-deep); }
.carousel__statement { font-family: var(--font-serif); font-weight: 400; font-size: var(--type-display-3); line-height: 1.18; letter-spacing: -0.015em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; max-width: 22ch; }
.carousel__detail { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--lead-body); color: rgba(247,244,237,0.62); max-width: 46ch; }
.section--ivory .carousel__detail { color: var(--mmm-grey); }
.carousel__controls { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s-3); }
.carousel__btn { width: 46px; height: 46px; border: 1px solid var(--mmm-hairline); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mmm-ivory); transition: border-color var(--duration-2) var(--ease-editorial), background var(--duration-2) var(--ease-editorial), color var(--duration-2) var(--ease-editorial); }
.section--ivory .carousel__btn { border-color: var(--mmm-hairline-ink); color: var(--mmm-ink); }
.carousel__btn:hover { border-color: var(--mmm-gold-light); color: var(--mmm-gold-light); }
.section--ivory .carousel__btn:hover { border-color: var(--mmm-gold-deep); color: var(--mmm-gold-deep); }
.carousel__btn svg { width: 16px; height: 16px; }
.carousel__counter { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; color: var(--fg-3); margin-left: 6px; }
.section--ivory .carousel__counter { color: var(--mmm-grey); }
.carousel__counter b { color: var(--mmm-gold-light); font-weight: 500; }
.section--ivory .carousel__counter b { color: var(--mmm-gold-deep); }
@media (max-width: 900px) {
  .carousel__slide.is-active { grid-template-columns: 1fr; gap: var(--s-6); }
  .carousel__photo { max-width: 280px; }
  .carousel__statement { font-size: var(--type-deck); }
}

/* ============================================================
   PHASE COLUMNS (Architecture / Journey)
   ============================================================ */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mmm-hairline-ink); border-bottom: 1px solid var(--mmm-hairline-ink); }
.section--ink .phases, .section--ink-2 .phases { border-color: var(--mmm-hairline); }
.phase { padding: var(--s-7) var(--s-6) var(--s-7) 0; border-right: 1px solid var(--mmm-hairline-ink); display: flex; flex-direction: column; gap: var(--s-5); }
.section--ink .phase, .section--ink-2 .phase { border-color: var(--mmm-hairline); }
.phase:last-child { border-right: none; padding-right: 0; }
.phase:not(:first-child) { padding-left: var(--s-6); }
.phase__grade {
  font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--mmm-gold-deep); display: flex; align-items: center; gap: 14px;
}
.section--ink .phase__grade, .section--ink-2 .phase__grade { color: var(--mmm-gold-light); }
.phase__grade::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; }
.phase__numeral {
  font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -0.04em;
  color: var(--mmm-gold-deep); font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
}
.section--ink .phase__numeral, .section--ink-2 .phase__numeral { color: var(--mmm-gold-light); }
.phase__title {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1;
  letter-spacing: -0.02em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; max-width: 12ch;
}
.phase__body { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--lead-body); color: var(--mmm-grey); max-width: 34ch; }
.section--ink .phase__body, .section--ink-2 .phase__body { color: rgba(247,244,237,0.62); }

/* ============================================================
   ALUMNI / STORY ENTRIES
   ============================================================ */
.alumni { display: flex; flex-direction: column; border-top: 1px solid var(--mmm-hairline); }
.alumni__entry { display: grid; grid-template-columns: 227px 1fr; gap: var(--s-9); padding: var(--s-8) 0; border-bottom: 1px solid var(--mmm-hairline); align-items: center; }
.alumni__entry--rev { grid-template-columns: 1fr 227px; }
.alumni__entry--rev .alumni__media { order: 2; }
.alumni__media { width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.alumni__text { display: flex; flex-direction: column; gap: var(--s-4); }
.alumni__index {
  font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--mmm-gold-light); display: flex; align-items: center; gap: 14px;
}
.alumni__index::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--mmm-gold-light); }
.alumni__name {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(56px, 6vw, 96px); line-height: 0.96;
  letter-spacing: var(--track-display); font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; color: var(--mmm-ivory);
}
.alumni__name .terminus { color: var(--mmm-gold-light); }
.alumni__trajectory {
  font-family: var(--font-serif); font-size: var(--type-deck); line-height: 1.55; color: var(--mmm-ivory);
  display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-2);
}
.alumni__trajectory li { display: flex; align-items: baseline; gap: 16px; opacity: 0.92; }
.alumni__trajectory li + li { border-top: 1px solid var(--mmm-hairline); padding-top: 10px; }
.alumni__trajectory li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--mmm-gold-light); transform: translateY(-6px); }

/* ============================================================
   ECOSYSTEM / DIRECTORY GRID
   ============================================================ */
.ecosystem { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mmm-hairline-ink); }
.section--ink .ecosystem { border-color: var(--mmm-hairline); }
.ecosystem__cell {
  display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-7) var(--s-6) var(--s-7) 0;
  border-bottom: 1px solid var(--mmm-hairline-ink); border-right: 1px solid var(--mmm-hairline-ink);
  cursor: pointer; transition: background var(--duration-2) var(--ease-editorial);
}
.ecosystem__cell:last-child { border-right: none; padding-right: 0; }
.ecosystem__cell:not(:first-child) { padding-left: var(--s-6); }
.ecosystem__cell:hover { background: rgba(12, 16, 24, 0.03); }
.ecosystem__cell:hover .ecosystem__arrow { transform: translateX(4px); }
.ecosystem__label { font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mmm-gold-deep); }
.ecosystem__heading { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; color: var(--mmm-ink); }
.ecosystem__body { font-family: var(--font-serif); font-size: var(--type-body-sm); line-height: 1.55; color: var(--mmm-grey); max-width: 26ch; flex: 1; }
.ecosystem__link { font-family: var(--font-sans); font-size: var(--type-ui-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--mmm-ink); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
.ecosystem__arrow { display: inline-block; transition: transform var(--duration-2) var(--ease-editorial); color: var(--mmm-gold-deep); }

/* ============================================================
   PEOPLE GRID (board, scholars, speakers)
   ============================================================ */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-6); }
.people--3 { grid-template-columns: repeat(3, 1fr); }
.person__photo { width: 100%; aspect-ratio: 4/5; background: var(--mmm-ink-2); margin-bottom: var(--s-4); }
.person__name { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; }
.person__role { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mmm-gold-deep); margin-top: 8px; }
.section--ink .person__role, .section--ink-2 .person__role { color: var(--mmm-gold-light); }
.person__detail { font-family: var(--font-serif); font-size: var(--type-body-sm); line-height: 1.5; color: var(--mmm-grey); margin-top: 8px; }
.section--ink .person__detail { color: rgba(247,244,237,0.6); }
/* Typographic speaker (no photo) */
.person--type .person__photo {
  display: flex; align-items: flex-end; padding: 18px; background: var(--mmm-ink-2);
  position: relative; overflow: hidden;
}
.person--type .person__photo::before {
  content: ""; position: absolute; top: 18px; left: 18px; width: 28px; height: 1px; background: var(--mmm-gold-light);
}
.person--type .person__initial { font-family: var(--font-serif); font-weight: 400; font-size: 72px; line-height: 0.9; color: var(--mmm-gold-light); font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1; font-style: italic; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { display: flex; flex-direction: column; border-top: 1px solid var(--mmm-hairline-ink); }
.section--ink .timeline { border-color: var(--mmm-hairline); }
.tl-entry { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-7); padding: var(--s-6) 0; border-bottom: 1px solid var(--mmm-hairline-ink); }
.section--ink .tl-entry { border-color: var(--mmm-hairline); }
.tl-date { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mmm-gold-deep); padding-top: 6px; }
.section--ink .tl-date { color: var(--mmm-gold-light); }
.tl-title { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0; margin-bottom: 10px; }
.tl-body { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--lead-body); color: var(--mmm-grey); max-width: 52ch; }
.section--ink .tl-body { color: rgba(247,244,237,0.62); }

/* ============================================================
   QUOTE / TESTIMONIAL
   ============================================================ */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-9); }
.quote { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--mmm-hairline-ink); }
.section--ink .quote, .section--ink-2 .quote { border-top-color: var(--mmm-hairline); }
.quote__mark { width: 28px; height: 1px; background: var(--mmm-gold-deep); }
.section--ink .quote__mark, .section--ink-2 .quote__mark { background: var(--mmm-gold-light); }
.quote__text { font-family: var(--font-serif); font-weight: 400; font-size: var(--type-deck); line-height: 1.45; letter-spacing: -0.005em; flex: 1; }
.quote__by { display: flex; align-items: center; gap: 16px; }
.quote__face { width: 60px; height: 60px; border-radius: 0; object-fit: cover; object-position: center top; flex: none; background: var(--mmm-ink-2); }
.quote__attr { font-family: var(--font-sans); font-size: var(--type-ui-sm); font-weight: 500; }
.quote__attr span { display: block; color: var(--mmm-grey); font-weight: 400; margin-top: 2px; }
.section--ink .quote__attr span, .section--ink-2 .quote__attr span { color: var(--fg-3); }

/* ============================================================
   MANIFESTO (numbered statements)
   ============================================================ */
.manifesto { display: flex; flex-direction: column; border-top: 1px solid var(--mmm-hairline); }
.manifesto__row { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--mmm-hairline); align-items: baseline; }
.manifesto__num { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; color: var(--mmm-gold-light); padding-top: 10px; }
.manifesto__text { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.012em; font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 0; }

/* ============================================================
   VALUES (principles list with Mandela quote + embodiment)
   ============================================================ */
.values { display: flex; flex-direction: column; border-top: 1px solid var(--mmm-hairline-ink); }
.value { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); padding: var(--s-8) 0; border-bottom: 1px solid var(--mmm-hairline-ink); }
.value__head { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 120px; align-self: start; }
.value__num { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500; letter-spacing: 0.16em; color: var(--mmm-gold-deep); }
.value__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; }
.value__quote { font-family: var(--font-serif); font-style: italic; font-size: var(--type-body); line-height: 1.5; color: var(--mmm-grey); max-width: 30ch; font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1; }
.value__body { display: flex; flex-direction: column; gap: var(--s-5); }
.value__embody { display: flex; flex-direction: column; gap: var(--s-4); }
.value__embody li { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--lead-body); padding-left: 26px; position: relative; color: var(--mmm-ink); }
.value__embody li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 14px; height: 1px; background: var(--mmm-gold-deep); }
.value__embody b { font-weight: 400; }

/* ============================================================
   IMPACT TIERS / STATS
   ============================================================ */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.tier { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-7); border: 1px solid var(--mmm-hairline-ink); }
.section--ink .tier, .section--ink-2 .tier { border-color: var(--mmm-hairline); }
.tier__amount { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; }
.tier__label { font-family: var(--font-sans); font-size: var(--type-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mmm-gold-deep); }
.section--ink .tier__label, .section--ink-2 .tier__label { color: var(--mmm-gold-light); }
.tier__body { font-family: var(--font-serif); font-size: var(--type-body); line-height: var(--lead-body); color: var(--mmm-grey); }
.section--ink .tier__body, .section--ink-2 .tier__body { color: rgba(247,244,237,0.62); }
.bignum { font-family: var(--font-serif); font-weight: 400; font-size: clamp(80px, 12vw, 180px); line-height: 0.9; letter-spacing: -0.04em; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; color: var(--mmm-gold-light); }

/* ============================================================
   FORM (corporate intake)
   ============================================================ */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--s-6); max-width: 880px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.field input, .field textarea {
  font-family: var(--font-sans); font-size: var(--type-ui-md); color: var(--mmm-ivory);
  background: transparent; border: 1px solid var(--mmm-hairline); padding: 15px 16px;
  transition: border-color var(--duration-2) var(--ease-editorial), box-shadow var(--duration-2) var(--ease-editorial);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247,244,237,0.34); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mmm-gold-light); box-shadow: inset 0 0 0 1px var(--mmm-gold-light); }
.field textarea { resize: vertical; min-height: 132px; }
.checks { display: flex; flex-direction: column; gap: 0; grid-column: 1 / -1; border: 1px solid var(--mmm-hairline); }
.checks__legend { font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); padding: 14px 16px; border-bottom: 1px solid var(--mmm-hairline); }
.check { display: flex; align-items: center; gap: 14px; cursor: pointer; font-family: var(--font-sans); font-size: var(--type-ui-md); padding: 13px 16px; transition: background var(--duration-1) var(--ease-editorial); }
.check + .check { border-top: 1px solid var(--mmm-hairline); }
.check input { width: 18px; height: 18px; accent-color: var(--mmm-gold); flex: none; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER — design-system canonical (preview/components-footer)
   nav links left · shield-stack lockup right · legal bar bracketed by lines
   ============================================================ */
.footer { background: var(--mmm-ink); color: var(--mmm-ivory); padding: var(--s-7) 0 var(--s-6); }
.footer__inner { max-width: 1320px; margin: 0 auto; }
.footer__main { display: flex; justify-content: space-between; align-items: stretch; gap: var(--s-8); padding: 0 var(--gutter); }
.footer__links { display: grid; grid-template-columns: max-content max-content; gap: 0 var(--s-8); align-items: stretch; }
.footer__primary { display: flex; flex-direction: column; gap: 7px; }
.footer__primary li a { font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.3; letter-spacing: -0.012em; color: var(--mmm-ivory); font-variation-settings: "opsz" 72,"SOFT" 40,"WONK" 0; transition: opacity var(--duration-1) var(--ease-editorial); }
.footer__primary:hover li a { opacity: 0.34; }
.footer__primary li a:hover { opacity: 1; }
.footer__primary li a.support { color: var(--mmm-gold); }
.footer__secondary { display: flex; flex-direction: column; gap: 22px; }
.footer__secondary ul { display: flex; flex-direction: column; gap: 6px; }
.footer__secondary ul li a { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: -0.002em; color: rgba(247,244,237,0.78); transition: opacity var(--duration-1) var(--ease-editorial); }
.footer__secondary ul:hover li a { opacity: 0.4; }
.footer__secondary ul li a:hover { opacity: 1; }
.footer__brand { align-self: stretch; position: relative; flex: 0 0 164px; }
.footer__brand img { position: absolute; top: 0; right: 0; height: 100%; width: auto; filter: brightness(0) invert(0.87) sepia(0.22) saturate(0.7) brightness(1.02); opacity: 0.9; }
.footer__legal { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); margin-top: 28px; padding: 13px var(--gutter); border-top: 1px solid var(--mmm-hairline); border-bottom: 1px solid var(--mmm-hairline); }
.footer__legal span { font-family: var(--font-sans); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(247,244,237,0.45); white-space: nowrap; }
@media (max-width: 760px) {
  .footer__main { flex-direction: column-reverse; gap: var(--s-7); align-items: flex-start; }
  .footer__brand { align-self: flex-start; flex: none; position: static; }
  .footer__brand img { position: static; height: 132px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__legal span { white-space: normal; }
}

/* Light footer — continues the alternating rhythm when the last
   content section is ivory. Tokens only; ink type, hairline-ink rules. */
.footer--light { background: var(--mmm-ivory); color: var(--mmm-ink); }
.footer--light .footer__primary li a { color: var(--mmm-ink); }
.footer--light .footer__primary li a.support { color: var(--mmm-gold-deep); }
.footer--light .footer__secondary ul li a { color: var(--mmm-grey); }
.footer--light .footer__brand img { filter: brightness(0) saturate(100%) invert(6%) sepia(18%) saturate(1100%) hue-rotate(184deg) brightness(96%); opacity: 0.92; }
.footer--light .footer__legal { border-top-color: var(--mmm-hairline-ink); border-bottom-color: var(--mmm-hairline-ink); }
.footer--light .footer__legal span { color: var(--mmm-grey); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .menu-overlay__logo { margin-top: 0; }
  .menu-overlay__grid { grid-template-columns: var(--gutter) 1fr var(--gutter); padding-top: 168px; }
  .menu-overlay__col-left  { grid-column: 2; padding-right: 0; }
  .menu-overlay__col-right { grid-column: 2; padding-right: 0; margin-top: 48px; }
  .menu-overlay__col-right ul li { font-size: 32px; }
  .editorial { grid-template-columns: 1fr; gap: var(--s-7); }
  .editorial__head { position: static; }
  .phases { grid-template-columns: 1fr; }
  .phase { border-right: none; border-bottom: 1px solid var(--mmm-hairline-ink); padding: var(--s-6) 0 !important; }
  .phase:last-child { border-bottom: none; }
  .section--ink .phase { border-color: var(--mmm-hairline); }
  .alumni__entry { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6) 0; }
  .alumni__entry--rev .alumni__media { order: 0; }
  .alumni__media { max-width: 227px; }
  .alumni__trajectory { padding-top: 0; }
  .ecosystem { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
  .people--3 { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; gap: var(--s-7); }
  .value { grid-template-columns: 1fr; gap: var(--s-5); }
  .value__head { position: static; }
  .tiers, .form { grid-template-columns: 1fr; }
  .tl-entry { grid-template-columns: 140px 1fr; gap: var(--s-5); }
}
@media (max-width: 640px) {
  :root { --gutter: 24px; }
  .site-ham { top: 16px; }
  .menu-overlay__close { top: 16px; }
  .site-logo { top: 22px; }
  .section { padding: var(--s-9) var(--gutter) var(--s-8); }
  .phero { padding: 130px var(--gutter) 56px; min-height: 86vh; }
  .ecosystem { grid-template-columns: 1fr; }
  .ecosystem__cell { border-right: none !important; padding: var(--s-6) 0 !important; }
  .people, .people--3 { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .tl-entry { grid-template-columns: 1fr; gap: 10px; }
  .footer__legal { flex-direction: column; gap: 14px; align-items: flex-start; }
  .manifesto__row { grid-template-columns: 48px 1fr; gap: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-logo, .site-ham, .menu-overlay, .menu-overlay__close, .menu-overlay__col-left, .menu-overlay__col-right,
  .phero [data-load], .reveal, .reveal-img img, [data-stagger] > *, .rise__in, .phero__photo, .home-hero__photo {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ============================================================
   TWEAK VARIANTS — site-wide, driven by body[data-voice|character|motion].
   Defaults match the build; alternates re-orchestrate the feel.
   ============================================================ */

/* ---- VOICE: the loud editorial register ---- */
body[data-voice="quiet"] .h1 { font-size: var(--type-display-2); }
body[data-voice="quiet"] .h2,
body[data-voice="quiet"] .manifesto__text { font-size: var(--type-display-3); }
body[data-voice="quiet"] .phero__sub { font-size: var(--type-deck); }
body[data-voice="quiet"] .alumni__name,
body[data-voice="quiet"] .story__title { font-size: clamp(40px, 4.4vw, 64px); }
body[data-voice="quiet"] .beat {
  font-style: normal !important;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0 !important;
}
body[data-voice="quiet"] .terminus,
body[data-voice="quiet"] .terminus--on-ivory { color: inherit !important; }

body[data-voice="declarative"] .h1 { font-size: calc(var(--type-display-1) * 1.1); line-height: 0.95; }
body[data-voice="declarative"] .h2,
body[data-voice="declarative"] .manifesto__text { font-size: calc(var(--type-display-2) * 1.1); }
body[data-voice="declarative"] .phero__sub { font-size: calc(var(--type-lede) * 1.12); }
body[data-voice="declarative"] .alumni__name,
body[data-voice="declarative"] .story__title { font-size: clamp(72px, 7.4vw, 120px); }
body[data-voice="declarative"] .terminus { text-shadow: 0 0 24px rgba(212, 166, 86, 0.45); }
body[data-voice="declarative"] .terminus--on-ivory { text-shadow: 0 0 18px rgba(156, 116, 55, 0.22); }

/* ---- TYPE CHARACTER: Fraunces SOFT / WONK axes ----
   Grouped by optical size so opsz is preserved per tier. */
/* Display tier (opsz 144) */
body[data-character="strict"] .h1,
body[data-character="strict"] .h2,
body[data-character="strict"] .alumni__name,
body[data-character="strict"] .manifesto__text,
body[data-character="strict"] .value__name,
body[data-character="strict"] .story__title,
body[data-character="strict"] .bignum,
body[data-character="strict"] .tier__amount,
body[data-character="strict"] .phase__numeral { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0 !important; }
/* Mid tier (opsz 72) */
body[data-character="strict"] .h3,
body[data-character="strict"] .phase__title,
body[data-character="strict"] .ecosystem__heading,
body[data-character="strict"] .tl-title,
body[data-character="strict"] .spk__name,
body[data-character="strict"] .quote__text,
body[data-character="strict"] .bp__title,
body[data-character="strict"] .ch__title { font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0 !important; }
/* Text tier (opsz 36) */
body[data-character="strict"] .body,
body[data-character="strict"] .lede,
body[data-character="strict"] .phero__sub,
body[data-character="strict"] .phase__body,
body[data-character="strict"] .footer__tagline { font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0 !important; }
body[data-character="strict"] .beat { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0 !important; }

body[data-character="wonky"] .h1,
body[data-character="wonky"] .h2,
body[data-character="wonky"] .alumni__name,
body[data-character="wonky"] .manifesto__text,
body[data-character="wonky"] .value__name,
body[data-character="wonky"] .story__title,
body[data-character="wonky"] .bignum,
body[data-character="wonky"] .tier__amount,
body[data-character="wonky"] .phase__numeral { font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1 !important; }
body[data-character="wonky"] .h3,
body[data-character="wonky"] .phase__title,
body[data-character="wonky"] .ecosystem__heading,
body[data-character="wonky"] .tl-title,
body[data-character="wonky"] .spk__name,
body[data-character="wonky"] .quote__text,
body[data-character="wonky"] .bp__title,
body[data-character="wonky"] .ch__title { font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1 !important; }
body[data-character="wonky"] .body,
body[data-character="wonky"] .lede,
body[data-character="wonky"] .phero__sub,
body[data-character="wonky"] .phase__body,
body[data-character="wonky"] .footer__tagline { font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 0 !important; }
body[data-character="wonky"] .beat { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1 !important; }

/* ---- MOTION: kinfolk scroll-reveal intensity ---- */
body[data-motion="still"] .reveal,
body[data-motion="still"] [data-stagger] > *,
body[data-motion="still"] .phero [data-load] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
body[data-motion="still"] .reveal-img img { transform: none !important; transition: none !important; }

body[data-motion="cinematic"] .reveal { transform: translateY(44px); transition-duration: 1200ms; }
body[data-motion="cinematic"] .reveal.is-in { transform: none; }
body[data-motion="cinematic"] [data-stagger] > * { transform: translateY(44px); transition-duration: 1100ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(2) { transition-delay: 130ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(3) { transition-delay: 260ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(4) { transition-delay: 390ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(5) { transition-delay: 520ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(6) { transition-delay: 650ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(7) { transition-delay: 780ms; }
body[data-motion="cinematic"] [data-stagger].is-in > *:nth-child(8) { transition-delay: 910ms; }
body[data-motion="cinematic"] .reveal-img img { transform: scale(1.22); transition-duration: 1900ms; }
body[data-motion="cinematic"] .reveal-img.is-in img { transform: scale(1); }

/* ============================================================
   TWEAKS PANEL — in-page control surface (hidden until toggled).
   Styled to the MMM system: ink-2 surface, hairline, sharp corners.
   ============================================================ */
.tweaks-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 300px;
  background: var(--mmm-ink-2); color: var(--mmm-ivory);
  border: 1px solid var(--mmm-hairline);
  box-shadow: var(--shadow-3);
  display: none; flex-direction: column;
  font-family: var(--font-sans);
}
.tweaks-panel.is-open { display: flex; }
.tweaks-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--mmm-hairline);
}
.tweaks-panel__title {
  font-family: var(--font-sans); font-size: var(--type-meta); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--mmm-ivory);
  display: flex; align-items: center; gap: 12px;
}
.tweaks-panel__title::before { content: ""; width: 22px; height: 1px; background: var(--mmm-gold-light); }
.tweaks-panel__close { position: relative; width: 16px; height: 16px; cursor: pointer; opacity: 0.7; transition: opacity var(--duration-1) var(--ease-editorial); }
.tweaks-panel__close:hover { opacity: 1; }
.tweaks-panel__close::before, .tweaks-panel__close::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--mmm-ivory); }
.tweaks-panel__close::before { transform: rotate(45deg); }
.tweaks-panel__close::after { transform: rotate(-45deg); }
.tweaks-panel__body { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 20px; }
.tweak-control { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.tweak-control__label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-3);
}
.tweak-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--mmm-hairline); }
.tweak-seg button {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--fg-2); background: transparent; border: none; border-right: 1px solid var(--mmm-hairline);
  padding: 9px 4px; cursor: pointer; transition: background var(--duration-1) var(--ease-editorial), color var(--duration-1) var(--ease-editorial);
}
.tweak-seg button:last-child { border-right: none; }
.tweak-seg button:hover { color: var(--mmm-ivory); }
.tweak-seg button.is-active { background: var(--mmm-ivory); color: var(--mmm-ink); }
.tweaks-panel__note { font-family: var(--font-serif); font-size: 12px; line-height: 1.4; color: var(--fg-3); padding: 0 18px 16px; }
@media (max-width: 640px) {
  .tweaks-panel { right: 12px; left: 12px; bottom: 12px; width: auto; }
}