/* ==========================================================================
   JOSEPH P. FIRMAGE — THE ARCHITECTURE OF PROGRESS
   Design system + page layouts
   --------------------------------------------------------------------------
   01 Tokens        05 Buttons & links     09 About page
   02 Base          06 Header / nav        10 Mission page
   03 Grid          07 Shared components   11 Footer / modal
   04 Typography    08 Home page           12 Responsive & motion
   ========================================================================== */

/* ---------- 01 TOKENS ---------- */
:root {
  --eyebrow-h: calc(18px + var(--s-4));   /* eyebrow height incl. gap: top-aligns side columns with headlines */
  /* colour */
  --mineral: #F3F4F0;
  --white: #FFFFFF;
  --carbon: #171B20;
  --carbon-2: #20252C;
  --cobalt: #2448D8;
  --cobalt-deep: #1B37A8;
  --lime: #D9F36A;
  --grey: #858C95;
  --line: #E5E8E4;
  --ink-2: #4A5058;            /* secondary text on light — AA contrast */
  --on-dark-2: #B4BAC2;        /* secondary text on carbon */
  --on-cobalt-2: #D3DBFA;      /* secondary text on cobalt */

  /* type */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* spacing scale — 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160 */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 160px;

  /* layout */
  --max: 1600px;
  --margin: 160px;              /* outer margin, recalculated per breakpoint */
  --gutter: 32px;
  --section: 160px;             /* vertical section padding */
  --header-h: 80px;
  --measure: 640px;             /* readable paragraph width */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 420ms;
}

/* ---------- 02 BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-3)); }
body {
  margin: 0;
  background: var(--mineral);
  color: var(--carbon);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p + p { margin-top: var(--s-3); }
::selection { background: var(--lime); color: var(--carbon); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.statement :focus-visible, .shift :focus-visible, .presentations :focus-visible,
.site-footer :focus-visible, .m-hero :focus-visible, .m-themes :focus-visible,
.m-academy :focus-visible, .tech-years :focus-visible, .a-close :focus-visible,
.mobile-menu :focus-visible { outline-color: var(--lime); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 200; padding: var(--s-1) var(--s-2); background: var(--lime); color: var(--carbon); font-family: var(--f-mono); font-size: 14px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---------- 03 GRID ---------- */
.container { width: min(var(--max), calc(100% - 2 * var(--margin))); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

.section { padding-block: var(--section); }
.section--white { background: var(--white); }

/* ---------- 04 TYPOGRAPHY ---------- */
.t-mega, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.t-mega   { font-size: clamp(48px, 7.3vw, 140px); line-height: .9; text-transform: uppercase; letter-spacing: -0.045em; }
.t-display{ font-size: clamp(40px, 5vw, 96px);  line-height: .94; text-transform: uppercase; letter-spacing: -0.04em; }
.t-h1     { font-size: clamp(36px, 3.75vw, 72px); line-height: 1; }
.t-h2     { font-size: clamp(28px, 2.5vw, 48px); line-height: 1.04; }
.t-h3     { font-size: clamp(22px, 1.67vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.t-lead   { font-size: clamp(20px, 1.35vw, 26px); line-height: 1.45; letter-spacing: -0.01em; max-width: 34ch; }
.t-mega .line { display: block; }

.label {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.eyebrow {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow__mark { width: 10px; height: 10px; background: var(--cobalt); flex: none; }
.eyebrow__num { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--cobalt); }
.eyebrow__num::after { content: ''; width: 32px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--on-dark-2); }
.eyebrow--light .eyebrow__num { color: var(--lime); }

.accent-dot { color: var(--cobalt); }
.note { display: block; margin-top: var(--s-2); font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--on-dark-2); }
.source-note { margin-top: var(--s-4); font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }

/* ---------- 05 BUTTONS & LINKS ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-4);
  border: 1px solid transparent;
  font-family: var(--f-display); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--sm { min-height: 48px; padding: 0 var(--s-3); font-size: 13px; }
.btn--primary { background: var(--cobalt); color: var(--white); }
.btn--primary:hover { background: var(--carbon); }
.btn--ghost { border-color: var(--carbon); color: var(--carbon); background: transparent; }
.btn--ghost:hover { background: var(--carbon); color: var(--white); }
.btn--lime { background: var(--lime); color: var(--carbon); }
.btn--lime:hover { background: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cobalt);
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { gap: var(--s-2); }
.link-arrow--light { color: var(--lime); }

/* ---------- 06 HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mineral);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(243, 244, 240, .97); }
.page-mission .site-header:not(.is-scrolled) { background: var(--cobalt); color: var(--white); }
.page-mission .site-header:not(.is-scrolled) .nav__link[aria-current="page"]::after { background: var(--lime); }
.page-mission .site-header:not(.is-scrolled) .site-header__cta { background: var(--lime); color: var(--carbon); }
.page-mission .site-header:not(.is-scrolled) .brand__mark { background: var(--white); color: var(--cobalt); }
.page-mission .site-header:not(.is-scrolled) .menu-toggle__bars,
.page-mission .site-header:not(.is-scrolled) .menu-toggle__bars::before,
.page-mission .site-header:not(.is-scrolled) .menu-toggle__bars::after { background: var(--white); }

.site-header__inner { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: auto; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  width: 48px; height: 48px;
  background: var(--cobalt); color: var(--white);
  font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
}
.brand__mark i { font-style: normal; color: var(--lime); }
.brand__name { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }

.nav__list { display: flex; gap: var(--s-4); }
.nav__link {
  position: relative; display: block; padding-block: var(--s-1);
  font-family: var(--f-display); font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cobalt); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  position: absolute; left: 12px; width: 24px; height: 2px; background: var(--carbon);
  transition: transform var(--dur) var(--ease), opacity 200ms;
}
.menu-toggle__bars { top: 23px; }
.menu-toggle__bars::before { content: ''; left: 0; top: -8px; }
.menu-toggle__bars::after  { content: ''; left: 0; top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent !important; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); background: var(--white); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); background: var(--white); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  padding-top: calc(var(--header-h) + var(--s-5));
  background: var(--carbon); color: var(--white);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { margin-bottom: var(--s-5); }
.mobile-menu__list a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding-block: var(--s-2);
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--f-display); font-size: clamp(32px, 8vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
}
.mobile-menu__list a span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--lime); }
.mobile-menu__list a[aria-current="page"] { color: var(--lime); }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: var(--carbon) !important; color: var(--white); border-bottom-color: rgba(255,255,255,.12); }
body.menu-open .site-header .site-header__cta { visibility: hidden; }

/* ---------- 07 SHARED COMPONENTS ---------- */

/* image treatment: monochrome, with optional cobalt duotone */
.media { position: relative; overflow: hidden; background: var(--carbon); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease), filter var(--dur) var(--ease); }
.media--mono img { filter: grayscale(1) contrast(1.08); }
.media--cobalt img { filter: grayscale(1) contrast(1.15) brightness(1.05); }
.media--cobalt::after { content: ''; position: absolute; inset: 0; background: var(--cobalt); mix-blend-mode: multiply; pointer-events: none; transition: opacity var(--dur) var(--ease); }
a:hover .media img, .media:hover img { transform: scale(1.03); }
/* fallback when a remote image fails */
.media.is-fallback { background: var(--cobalt) repeating-linear-gradient(45deg, transparent 0 15px, rgba(255,255,255,.08) 15px 16px); }
.media.is-fallback img { opacity: 0; }

.geo { color: currentColor; }
.geo__node { fill: currentColor; stroke: none; }
.geo__node--lime { fill: var(--lime); }

.meta-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); border-top: 1px solid var(--carbon); padding-top: var(--s-3); }
.meta-strip dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); margin-bottom: var(--s-1); }
.meta-strip dd { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.35; }
.meta-strip__quote dd { font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-4); }
.tags li { padding: 4px 12px; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

.source-quote { margin-top: var(--s-5); padding-left: var(--s-3); border-left: 3px solid var(--cobalt); }
.source-quote p { font-family: var(--f-display); font-size: clamp(20px, 1.5vw, 28px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.source-quote cite { display: block; margin-top: var(--s-2); font-family: var(--f-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.filter {
  min-height: 40px; padding: 0 var(--s-2);
  border: 1px solid var(--line); background: transparent;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter:hover { border-color: var(--carbon); }
.filter.is-active { background: var(--carbon); border-color: var(--carbon); color: var(--white); }
.filter__count { margin-left: 6px; color: var(--grey); }
.filter.is-active .filter__count { color: var(--lime); }

/* video card */
.video { display: flex; flex-direction: column; gap: var(--s-3); }
.video__thumb { display: block; aspect-ratio: 16 / 9; }
.video__thumb img { filter: grayscale(.85) contrast(1.05); }
.video:hover .video__thumb img { filter: grayscale(0); }
.video__play {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  width: 64px; height: 64px; background: var(--lime);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.video__play::before { content: ''; margin-left: 4px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--carbon); }
.video:hover .video__play { transform: scale(1.08); }
.video__meta { display: flex; flex-direction: column; gap: var(--s-1); }
.video__title { display: block; }

/* reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 08 HOME PAGE ---------- */

/* hero */
.hero { position: relative; padding-top: var(--s-6); padding-bottom: var(--s-6); }
.hero__grid { align-items: end; row-gap: var(--s-6); }
.hero__copy { grid-column: 1 / span 7; padding-bottom: var(--s-6); }
.hero__title { margin-bottom: var(--s-5); }
.hero__lead { margin-bottom: var(--s-5); color: var(--ink-2); }
.hero__visual {
  grid-column: 8 / span 5;
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: var(--s-8) auto auto auto;
}
.hero__panel {
  grid-column: 3 / -1; grid-row: 1 / 3;
  position: relative;
  background: var(--cobalt); color: rgba(255,255,255,.55);
  margin-right: calc(-1 * var(--margin));     /* bleeds to the viewport edge */
  min-height: 100%;
}
.hero__panel .geo--hero { position: absolute; top: var(--s-4); right: calc(var(--margin) + var(--s-4)); width: 45%; max-width: 280px; animation: spin 120s linear infinite; }
.hero__panel-tag { position: absolute; top: var(--s-4); left: var(--s-4); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.hero__portrait { grid-column: 1 / span 8; grid-row: 2 / 4; aspect-ratio: 4 / 5; z-index: 1; }
.hero__portrait img { object-position: 60% 30%; }
.hero__caption {
  grid-column: 1 / span 8; grid-row: 4;
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding-top: var(--s-2);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.hero__meta { margin-top: var(--s-7); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ticker */
.ticker { overflow: hidden; background: var(--carbon); color: var(--white); padding-block: var(--s-3); }
.ticker__track { display: flex; align-items: center; gap: var(--s-5); width: max-content; animation: ticker 50s linear infinite; }
.ticker span { font-family: var(--f-display); font-size: clamp(22px, 1.9vw, 36px); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.ticker i { width: 10px; height: 10px; background: var(--lime); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* throughline */
.throughline__head { grid-column: 1 / span 6; }
.throughline__body { grid-column: 8 / span 5; padding-top: var(--eyebrow-h); }
.throughline__body > p:not(.t-lead) { color: var(--ink-2); max-width: var(--measure); }
.throughline__body .t-lead { margin-bottom: var(--s-3); }

.continuum {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
}
.continuum::before, .continuum::after { content: ''; position: absolute; top: 0; left: 0; height: 2px; }
.continuum::before { right: 0; background: var(--line); }
.continuum::after { width: 100%; background: var(--cobalt); transform-origin: left; transform: scaleX(var(--progress, 1)); transition: transform 1600ms var(--ease); }
.js .continuum::after { --progress: 0; }
.js .continuum.is-drawn::after { --progress: 1; }
.continuum__node { position: relative; display: flex; flex-direction: column; gap: 4px; }
.continuum__node::before { content: ''; position: absolute; top: calc(-1 * var(--s-5) - 7px); left: 0; width: 16px; height: 16px; background: var(--mineral); border: 2px solid var(--cobalt); }
.continuum__node--now::before { background: var(--lime); border-color: var(--carbon); }
.continuum__year { font-family: var(--f-display); font-size: clamp(32px, 3vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.continuum__field { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-top: var(--s-1); }
.continuum__note { font-size: 15px; color: var(--ink-2); line-height: 1.45; }

/* journey / chapters */
.journey__intro { align-items: end; margin-bottom: var(--s-7); }
.journey__head { grid-column: 1 / span 8; }
.journey__aside { grid-column: 10 / span 3; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.chapters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.chapters__index { grid-column: 1 / span 4; display: flex; flex-direction: column; border-top: 1px solid var(--carbon); }
.chapters__tab {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: var(--s-2);
  width: 100%; padding: var(--s-3) 0;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left;
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.chapters__num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--grey); }
.chapters__name { font-family: var(--f-display); font-size: clamp(20px, 1.5vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.chapters__date { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.chapters__tab:hover .chapters__name { color: var(--cobalt); }
.chapters__tab[aria-selected="true"] { padding-left: var(--s-2); box-shadow: inset 4px 0 0 var(--cobalt); }
.chapters__tab[aria-selected="true"] .chapters__name { color: var(--cobalt); }
.chapters__tab[aria-selected="true"] .chapters__num { color: var(--cobalt); }

.chapters__panels { grid-column: 6 / span 7; }
.chapter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); }
.chapter__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.chapter__body { grid-column: 1 / span 6; }
.chapter__kicker { display: flex; gap: var(--s-3); margin-bottom: var(--s-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); }
.chapter__role { margin-top: var(--s-1); margin-bottom: var(--s-3); font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.chapter__body > p:not(.chapter__kicker):not(.chapter__role) { max-width: var(--measure); color: var(--ink-2); }
@media (min-width: 1025px) {
  .js .chapter:not(.is-active) { display: none; }
  .js .chapter.is-active { animation: fadeUp 600ms var(--ease); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* shift */
.shift { background: var(--carbon); color: var(--white); padding-top: var(--section); }
.shift__head { margin-bottom: var(--s-7); }
.shift__split { display: grid; grid-template-columns: 1fr auto 1fr; }
.shift__side { position: relative; display: flex; flex-direction: column; min-height: 640px; }
.shift__side--code { background: var(--carbon-2); }
.shift__side--matter { background: var(--cobalt); }
.shift__media { flex: 1; min-height: 360px; }
.shift__media img { opacity: .75; }
.shift__diagram { flex: 1; min-height: 360px; display: grid; place-items: center; position: relative; padding: var(--s-5); color: rgba(255,255,255,.7); }
.shift__diagram .geo--atom { width: min(360px, 80%); }
.shift__diagram-cap { position: absolute; top: var(--s-3); right: max(var(--s-3), calc((100vw - var(--max)) / 2)); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-cobalt-2); }
.shift__content { padding: var(--s-5) var(--s-6) var(--s-6); }
.shift__side--code .shift__content { padding-left: max(var(--s-6), calc((100vw - var(--max)) / 2)); }
.shift__side--matter .shift__content { padding-right: max(var(--s-6), calc((100vw - var(--max)) / 2)); }
.shift__tag { margin-bottom: var(--s-3); font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.shift__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid rgba(255,255,255,.16); font-family: var(--f-display); font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; }
.shift__list li span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); align-self: center; }
.shift__side--matter .shift__list li { border-bottom-color: rgba(255,255,255,.28); }
.shift__side--matter .shift__list li span { color: var(--on-cobalt-2); }
.shift__bridge { position: relative; width: 96px; background: var(--carbon); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); }
.shift__bridge-year { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-display); font-size: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--lime); }
.shift__bridge-line { width: 2px; height: 160px; background: linear-gradient(var(--grey), var(--cobalt)); }
.shift__text { padding-block: var(--s-7) var(--section); }
.shift__text .t-lead { grid-column: 1 / span 6; max-width: none; }
.shift__text > p:last-child { grid-column: 8 / span 5; margin: 0; color: var(--on-dark-2); max-width: var(--measure); }

/* academy */
.academy .grid { align-items: center; }
.academy__emblem { grid-column: 1 / span 5; position: relative; aspect-ratio: 1; background: var(--cobalt); color: rgba(255,255,255,.6); display: grid; place-items: center; }
.academy__emblem svg { width: 78%; animation: spin 200s linear infinite reverse; }
.academy__emblem-label { position: absolute; left: var(--s-4); bottom: var(--s-4); font-family: var(--f-display); font-size: clamp(48px, 5vw, 96px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--white); }
.academy__copy { grid-column: 7 / span 6; }
.academy__copy .t-display { margin-bottom: var(--s-5); }
.academy__copy > p:not(.eyebrow) { max-width: var(--measure); }
.academy__copy > p:not(.eyebrow):not(.t-lead) { color: var(--ink-2); margin-top: var(--s-3); }
.academy__video { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cobalt); }
.academy__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.academy__video .academy__emblem-label { pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
@media (max-width: 800px) { .academy__video { aspect-ratio: 16 / 9; } }
.themes { margin-block: var(--s-6); }
.themes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-2); border-top: 1px solid var(--carbon); }
.themes__list li { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 20px; font-weight: 500; }
.themes__list span { font-family: var(--f-mono); font-size: 12px; color: var(--cobalt); }

/* library */
.library__intro { align-items: end; margin-bottom: var(--s-7); }
.library__head { grid-column: 1 / span 7; }
.library__aside { grid-column: 10 / span 3; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.library__body { align-items: start; }
.feature-pub { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-3); }
.feature-pub__cover {
  position: relative; aspect-ratio: 3 / 4; padding: var(--s-4);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--cobalt); color: var(--white); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-pub:hover .feature-pub__cover { box-shadow: 0 24px 48px -24px rgba(23, 27, 32, .5); }
.feature-pub__series { position: relative; z-index: 1; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.feature-pub__geo { position: absolute; top: 50%; left: 50%; width: 120%; transform: translate(-50%, -55%); color: rgba(255,255,255,.28); }
.feature-pub__title { position: relative; z-index: 1; font-family: var(--f-display); font-size: clamp(32px, 2.9vw, 56px); font-weight: 600; line-height: .95; letter-spacing: -0.04em; text-transform: uppercase; }
.feature-pub__meta { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }

.archive { grid-column: 6 / span 7; }
.archive .filters { margin-bottom: var(--s-4); }
.archive__list { border-top: 1px solid var(--carbon); counter-reset: pub; }
.pub-row a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 32px; gap: var(--s-3); align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.pub-row__n { font-family: var(--f-mono); font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; }
.pub-row__t { font-family: var(--f-display); font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.pub-row__c { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.pub-row__go { font-family: var(--f-mono); color: var(--cobalt); text-align: right; transition: transform var(--dur) var(--ease); }
.pub-row a:hover { background: var(--mineral); padding-inline: var(--s-2); }
.pub-row a:hover .pub-row__t { color: var(--cobalt); }
.pub-row a:hover .pub-row__go { transform: translate(2px, -2px); }
.archive__more { margin-top: var(--s-4); }

/* presentations */
.presentations { background: var(--carbon); color: var(--white); }
.presentations .label { color: var(--on-dark-2); }
.presentations__intro { align-items: end; margin-bottom: var(--s-7); }
.presentations__head { grid-column: 1 / span 8; }
.presentations__channel { grid-column: 10 / span 3; justify-self: end; }
.video-grid { row-gap: var(--s-5); }
.video--feature { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.video-grid .video:nth-child(2) { grid-column: 9 / span 4; }
.video-grid .video:nth-child(3) { grid-column: 9 / span 4; }
.video--feature .video__play { width: 96px; height: 96px; left: var(--s-4); bottom: var(--s-4); }
.video--feature .video__play::before { border-width: 14px 0 14px 22px; }
.video-list { margin-top: var(--s-7); border-top: 1px solid rgba(255,255,255,.2); }
.video-list a {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px 80px; gap: var(--s-3); align-items: baseline;
  padding-block: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.video-list__n { font-family: var(--f-mono); font-size: 12px; color: var(--grey); }
.video-list__t { font-family: var(--f-display); font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; letter-spacing: -0.015em; }
.video-list__s { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.video-list__play { justify-self: end; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.video-list a:hover { color: var(--lime); padding-left: var(--s-2); }

/* statement */
.statement { position: relative; overflow: hidden; background: var(--cobalt); color: var(--white); padding-block: var(--s-9); }
.statement__geo { position: absolute; right: -16%; top: 50%; width: min(800px, 56vw); transform: translateY(-50%); color: rgba(255,255,255,.16); animation: spin 240s linear infinite; }
.statement__inner { position: relative; }
.statement__text { max-width: none; }
.statement__em { color: var(--carbon); }
.statement .accent-dot { color: var(--lime); }

/* contact */
.contact .grid { align-items: start; }
.contact__info { grid-column: 1 / span 6; }
.contact__info .t-display { margin-bottom: var(--s-6); }
.contact__direct, .contact__social { padding-top: var(--s-3); border-top: 1px solid var(--carbon); margin-bottom: var(--s-5); }
.contact__email { display: inline-block; margin-top: var(--s-1); font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--cobalt); border-bottom: 2px solid transparent; transition: border-color var(--dur) var(--ease); word-break: break-word; }
.contact__email:hover { border-bottom-color: var(--cobalt); }
.copy-btn { display: block; margin-top: var(--s-2); padding: 0; border: 0; background: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.copy-btn:hover { color: var(--carbon); }
.social { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-1); }
.social a { font-family: var(--f-display); font-size: 20px; font-weight: 500; }
.social a:hover { color: var(--cobalt); }

.form { grid-column: 8 / span 5; margin-top: var(--eyebrow-h); display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5); background: var(--white); }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: var(--s-2);
  border: 0; border-bottom: 2px solid var(--line); border-radius: 0;
  background: var(--mineral); font-size: 17px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cobalt); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.select { position: relative; }
.select::after { content: ''; position: absolute; right: var(--s-2); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--carbon); border-bottom: 2px solid var(--carbon); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: #C2361F; }
.field__error { min-height: 0; font-size: 14px; color: #B02E1A; }
.field__error:empty { display: none; }
.form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.form__note { font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.form__status:empty { display: none; }
.form__status { padding: var(--s-2); background: var(--carbon); color: var(--white); font-size: 15px; border-left: 4px solid var(--lime); }

/* ---------- 09 ABOUT PAGE ---------- */
.a-hero { position: relative; padding-top: var(--s-7); padding-bottom: var(--section); }
.a-hero__title { margin-bottom: var(--s-7); max-width: 16ch; }
.a-hero__cobalt { color: var(--cobalt); }
.a-hero__grid { align-items: start; }
.a-hero__portrait { grid-column: 1 / span 6; aspect-ratio: 5 / 4; }
.a-hero__portrait img { object-position: 50% 28%; }
.a-hero__fig { position: absolute; left: 0; bottom: 0; display: flex; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--cobalt); color: var(--white); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.a-hero__intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-5); }
.bio-meta { border-top: 1px solid var(--carbon); }
.bio-meta div { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-2); padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
.bio-meta dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.bio-meta dd { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; }

.foundations__head { grid-column: 1 / span 5; }
.foundations__text { grid-column: 7 / span 6; padding-top: var(--eyebrow-h); }
.foundations__text .t-lead { margin-bottom: var(--s-3); }
.foundations__text > p:not(.t-lead) { color: var(--ink-2); max-width: var(--measure); }
.foundations__lower { margin-top: var(--s-8); align-items: start; row-gap: var(--s-5); }
.starmap { grid-column: 1 / span 6; background: var(--carbon); color: rgba(255,255,255,.2); padding: var(--s-4); }
.starmap svg { width: 100%; }
.starmap__lines { color: rgba(255,255,255,.55); }
.starmap__stars circle { fill: var(--white); }
.starmap__focus { stroke: var(--lime); }
.starmap figcaption { display: flex; gap: var(--s-2); align-items: baseline; margin-top: var(--s-3); font-size: 14px; color: var(--on-dark-2); }
.starmap figcaption .label { color: var(--lime); }
.foundations__project { grid-column: 7 / span 3; }
.foundations__project .t-h3 { margin-block: var(--s-1) var(--s-2); }
.foundations__project p:last-child { font-size: 16px; color: var(--ink-2); }
.facts { grid-column: 10 / span 3; border-top: 1px solid var(--carbon); }
.facts li { padding-block: var(--s-2); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.facts__k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.facts__v { font-size: 16px; line-height: 1.45; }

.tech-years { background: var(--carbon); color: var(--white); }
.tech-years__intro { align-items: end; margin-bottom: var(--s-7); }
.tech-years__head { grid-column: 1 / span 7; }
.tech-years__aside { grid-column: 9 / span 4; color: var(--on-dark-2); }
.ledger { border-top: 1px solid rgba(255,255,255,.24); }
.ledger__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-3);
  padding-block: var(--s-5); border-bottom: 1px solid rgba(255,255,255,.12);
}
.ledger__year { grid-column: 1 / span 2; font-family: var(--f-display); font-size: clamp(36px, 3.3vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.ledger__body { grid-column: 4 / span 5; }
.ledger__body .t-h3 { margin-bottom: var(--s-2); }
.ledger__body p { color: var(--on-dark-2); }
.ledger__tag { grid-column: 11 / span 2; justify-self: end; align-self: start; padding: 4px 12px; border: 1px solid rgba(255,255,255,.24); font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; }
.ledger__media { grid-column: 10 / span 3; aspect-ratio: 4 / 3; }
.tech-years__note { margin-top: var(--s-5); max-width: 72ch; font-family: var(--f-mono); font-size: 13px; line-height: 1.7; color: var(--on-dark-2); }

.inquiry__band { background: var(--cobalt); color: var(--white); padding-block: var(--s-8); overflow: hidden; }
.inquiry__band-inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.inquiry__band .eyebrow { grid-column: 1 / -1; }
.inquiry__year { grid-column: 1 / span 7; font-family: var(--f-display); font-size: clamp(120px, 18vw, 340px); font-weight: 700; line-height: .8; letter-spacing: -0.06em; color: var(--white); }
.inquiry__title { grid-column: 8 / span 5; align-self: end; }
.inquiry__lead { grid-column: 8 / span 5; margin-top: var(--s-4); color: var(--on-cobalt-2); max-width: none; }
.inquiry__chapters .grid:first-child { row-gap: var(--s-5); }
.inq-card { padding-top: var(--s-3); border-top: 2px solid var(--carbon); }
.inq-card .t-h2, .inq-card .t-h3 { margin-block: var(--s-2); }
.inq-card p:last-child { color: var(--ink-2); }
.inq-card--wide { grid-column: 1 / span 6; }
.inq-card:nth-child(2) { grid-column: 7 / span 3; }
.inq-card:nth-child(3) { grid-column: 10 / span 3; }
.inquiry__knowledge { margin-top: var(--s-8); align-items: center; }
.inquiry__media { grid-column: 1 / span 6; aspect-ratio: 3 / 2; }
.inquiry__knowledge-text { grid-column: 8 / span 5; }
.inquiry__knowledge-text .t-h2 { margin-block: var(--s-2) var(--s-3); }
.inquiry__knowledge-text > p:not(.label) { color: var(--ink-2); max-width: var(--measure); }
.portal-list { margin-top: var(--s-4); border-top: 1px solid var(--carbon); }
.portal-list li { padding-block: var(--s-2); border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.portal-list strong { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--carbon); }
.physics-path { margin-top: var(--s-8); padding: var(--s-5); background: var(--mineral); }
.physics-path__steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block: var(--s-3); }
.physics-path__steps li { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-display); font-size: clamp(20px, 1.67vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
.physics-path__steps li:not(:last-child)::after { content: '→'; color: var(--cobalt); font-weight: 400; }
.physics-path__steps li.is-now { padding: 4px var(--s-2); background: var(--cobalt); color: var(--white); }
.physics-path__text { max-width: var(--measure); color: var(--ink-2); }

.timeline-sec__intro { align-items: end; margin-bottom: var(--s-6); row-gap: var(--s-4); }
.timeline-sec__head { grid-column: 1 / span 6; }
.timeline-sec__filters { grid-column: 7 / span 6; justify-content: flex-end; }
.tl { border-top: 1px solid var(--carbon); }
.tl__item {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline;
  padding-block: var(--s-3); border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tl__item:hover { background: var(--white); }
.tl__item[hidden] { display: none; }
.tl__date { grid-column: 1 / span 2; font-family: var(--f-mono); font-size: 14px; font-weight: 500; color: var(--cobalt); font-variant-numeric: tabular-nums; padding-left: var(--s-1); }
.tl__title { grid-column: 4 / span 7; font-family: var(--f-display); font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; letter-spacing: -0.015em; }
.tl__track { grid-column: 11 / span 2; justify-self: end; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-right: var(--s-1); }
.tl__item--now .tl__date::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-1); background: var(--lime); outline: 1px solid var(--carbon); }

.appearances__head { grid-column: 1 / span 5; }
.press-wall { grid-column: 7 / span 6; padding-top: var(--eyebrow-h); }
.press-wall__list { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin-top: var(--s-2); }
.press-wall__list li { font-family: var(--f-display); font-size: clamp(28px, 2.5vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; }
.press-wall__list li:nth-child(3n+2) { color: var(--cobalt); }
.appearances__lower { margin-top: var(--s-8); align-items: start; row-gap: var(--s-6); }
.video--about { grid-column: 1 / span 5; }
.works { grid-column: 7 / span 3; }
.works__list { margin-block: var(--s-2) var(--s-5); }
.works__list li { padding-block: var(--s-1); border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 20px; font-weight: 500; }
.pub-mini { margin-block: var(--s-2) var(--s-4); }
.pub-mini a { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-1); border-bottom: 1px solid var(--line); font-size: 16px; }
.pub-mini a::after { content: '↗'; color: var(--cobalt); }
.pub-mini a:hover { color: var(--cobalt); }
.recognition { grid-column: 10 / span 3; }
.recognition__list { margin-block: var(--s-2) var(--s-5); }
.recognition__list li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); padding-block: var(--s-1); border-bottom: 1px solid var(--line); font-size: 16px; }
.recognition__list span { font-family: var(--f-mono); font-size: 13px; color: var(--cobalt); }
.recognition__list--plain li { grid-template-columns: 1fr; }

.a-close { background: var(--carbon); color: var(--white); padding-block: var(--s-9); }
.a-close .grid { align-items: end; row-gap: var(--s-5); }
.a-close__eyebrow { grid-column: 1 / -1; }
.a-close__title { grid-column: 1 / -1; }
.a-close__side { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.a-close__side .t-lead { color: var(--on-dark-2); }
.a-close .accent-dot { color: var(--lime); }

/* ---------- 10 MISSION PAGE ---------- */
.m-hero { position: relative; overflow: hidden; background: var(--cobalt); color: var(--white); padding-block: var(--s-7) var(--s-8); }
.m-hero__geo { position: absolute; left: 30%; top: 50%; width: min(1000px, 72vw); transform: translateY(-50%); color: rgba(255,255,255,.14); pointer-events: none; }
.m-hero__grid { position: relative; align-items: end; row-gap: var(--s-6); }
.m-hero__copy { grid-column: 1 / span 7; }
.m-hero__title { margin-bottom: var(--s-5); }
.m-hero .accent-dot { color: var(--lime); }
.m-hero__lead { color: var(--on-cobalt-2); }
.m-hero__media { grid-column: 9 / span 4; aspect-ratio: 3 / 4; border: 1px solid rgba(255,255,255,.3); background: var(--white); }
.m-hero__media img { filter: grayscale(1) contrast(1.1); }
.m-hero__media figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: var(--s-2) var(--s-3); background: var(--carbon); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.m-hero__media figcaption span:first-child { color: var(--lime); }

.m-central__head { grid-column: 1 / span 9; margin-bottom: var(--s-7); }
.m-central__body { align-items: start; }
.m-quote { grid-column: 1 / span 6; padding: var(--s-5); background: var(--mineral); border-top: 4px solid var(--cobalt); }
.m-quote p { font-family: var(--f-display); font-size: clamp(28px, 2.5vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.m-quote cite { display: block; margin-top: var(--s-4); font-family: var(--f-mono); font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.m-central__text { grid-column: 8 / span 5; }
.m-central__text .t-lead { margin-bottom: var(--s-3); }
.m-central__text > p:not(.t-lead) { color: var(--ink-2); max-width: var(--measure); }
.m-note { margin-top: var(--s-5); padding-left: var(--s-3); border-left: 3px solid var(--lime); }
.m-note p { font-size: 17px; font-style: italic; }
.m-note figcaption { margin-top: var(--s-1); font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.m-themes { background: var(--carbon); color: var(--white); }
.m-themes__intro { align-items: end; margin-bottom: var(--s-7); }
.m-themes__intro > div { grid-column: 1 / span 7; }
.m-themes__aside { grid-column: 9 / span 4; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--on-dark-2); }
.theme-rail { display: flex; gap: 2px; min-height: 520px; }
.theme {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  background: var(--carbon-2);
  transition: flex-grow 700ms var(--ease), background-color var(--dur) var(--ease);
  outline-offset: -2px;
}
.theme:hover, .theme:focus-within, .theme:focus, .theme.is-open { flex-grow: 1.8; background: var(--cobalt); }
.theme__num { font-family: var(--f-display); font-size: clamp(48px, 5vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--lime); }
.theme__title { font-family: var(--f-display); font-size: clamp(24px, 2vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-transform: uppercase; }
.theme__text { color: var(--on-dark-2); max-width: 36ch; }
.theme:hover .theme__text, .theme:focus .theme__text, .theme.is-open .theme__text { color: var(--white); }
.theme__src { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.2); font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }
.theme__src span { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.theme:hover .theme__src, .theme:focus .theme__src, .theme.is-open .theme__src { color: var(--on-cobalt-2); }

.sequence-sec__head { grid-column: 1 / span 8; margin-bottom: var(--s-7); }
.sequence { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.sequence::before { content: ''; position: absolute; top: 32px; left: 0; right: 0; height: 2px; background: var(--line); }
.sequence__step { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.sequence__n {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-3);
  background: var(--white); border: 2px solid var(--carbon);
  font-family: var(--f-mono); font-size: 14px; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sequence__step.is-lit .sequence__n { background: var(--cobalt); color: var(--white); border-color: var(--cobalt); }
.sequence__step--end.is-lit .sequence__n { background: var(--lime); color: var(--carbon); border-color: var(--carbon); }
.sequence__step:not(:last-child)::after { content: '→'; position: absolute; top: 16px; right: 0; font-family: var(--f-display); font-size: 24px; line-height: 1; color: var(--cobalt); }
.sequence__t { font-family: var(--f-display); font-size: clamp(28px, 2.5vw, 48px); font-weight: 600; letter-spacing: -0.035em; text-transform: uppercase; line-height: 1; }
.sequence__step p { font-size: 16px; color: var(--ink-2); max-width: 34ch; }
.sequence__note { display: flex; gap: var(--s-2); align-items: baseline; margin-top: var(--s-6); padding: var(--s-3); background: var(--mineral); max-width: 960px; line-height: 1.7; }
.sequence__flag { flex: none; padding: 2px 8px; background: var(--carbon); color: var(--lime); }

.m-academy { background: var(--carbon); color: var(--white); padding-block: var(--section); }
.m-academy .grid { align-items: center; row-gap: var(--s-5); }
.m-academy__media { grid-column: 1 / span 6; aspect-ratio: 4 / 3; }
.m-academy__copy { grid-column: 8 / span 5; }
.m-academy__copy .t-h1 { margin-bottom: var(--s-4); }
.m-academy__copy .t-lead { margin-bottom: var(--s-3); }
.m-academy__copy > p:not(.t-lead):not(.eyebrow) { color: var(--on-dark-2); margin-bottom: var(--s-5); max-width: var(--measure); }

.invite__title { margin-bottom: var(--s-7); max-width: 18ch; }
.invite__grid { row-gap: var(--gutter); }
.invite__card {
  grid-column: span 4;
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 320px; padding: var(--s-5) var(--s-4);
  background: var(--white); border-top: 4px solid var(--carbon);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.invite__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--cobalt); }
.invite__t { font-family: var(--f-display); font-size: clamp(24px, 2vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.invite__d { color: var(--ink-2); font-size: 16px; max-width: 32ch; }
.invite__go { margin-top: auto; font-family: var(--f-display); font-size: 32px; color: var(--cobalt); transition: transform var(--dur) var(--ease); }
.invite__card:hover .invite__go { transform: translateX(8px); }
.invite__card--cta { background: var(--cobalt); color: var(--white); border-top-color: var(--lime); }
.invite__card--cta .invite__n, .invite__card--cta .invite__go { color: var(--lime); }
.invite__card--cta .invite__d { color: var(--on-cobalt-2); }

/* ---------- 11 FOOTER / MODAL ---------- */
.site-footer { background: var(--carbon); color: var(--white); padding-top: var(--s-8); overflow: hidden; }
.site-footer .label { color: var(--on-dark-2); margin-bottom: var(--s-2); }
.site-footer__top { row-gap: var(--s-5); }
.site-footer__brand { grid-column: 1 / span 5; }
.site-footer__wordmark { font-family: var(--f-display); font-size: clamp(28px, 2.5vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.site-footer__statement { margin-top: var(--s-2); color: var(--on-dark-2); max-width: 36ch; }
.site-footer__nav { grid-column: 7 / span 2; }
.site-footer__social { grid-column: 10 / span 3; }
.site-footer ul li { padding-block: 4px; }
.site-footer ul a { transition: color var(--dur) var(--ease); }
.site-footer ul a:hover { color: var(--lime); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-7); padding-block: var(--s-4); border-top: 1px solid rgba(255,255,255,.12); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--on-dark-2); }
.site-footer__top-link:hover { color: var(--lime); }

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--s-3); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(23, 27, 32, .92); }
.modal__dialog { position: relative; width: min(1280px, 100%); animation: fadeUp 400ms var(--ease); }
.modal__close { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-2) auto; min-height: 40px; padding: 0 var(--s-2); border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--white); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.modal__close:hover { background: var(--lime); color: var(--carbon); border-color: var(--lime); }
.modal__frame { aspect-ratio: 16 / 9; background: #000; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 12 RESPONSIVE ---------- */

/* 1440 */
@media (max-width: 1600px) {
  :root { --margin: 128px; }
}
@media (max-width: 1440px) {
  :root { --margin: 96px; --section: 128px; }
  .nav__list { gap: var(--s-3); }
}

/* 1280 */
@media (max-width: 1280px) {
  :root { --margin: 64px; --gutter: 24px; }
  .site-header__cta { display: none; }
  .hero__copy { grid-column: 1 / span 7; }
  .shift__side { min-height: 560px; }
  .shift__content { padding: var(--s-5); }
  .shift__side--code .shift__content { padding-left: var(--margin); }
  .shift__side--matter .shift__content { padding-right: var(--margin); }
  .ledger__body { grid-column: 3 / span 6; }
  .video-list a { grid-template-columns: 48px minmax(0, 1fr) 140px 64px; }
}

/* 1024 — tablet landscape */
@media (max-width: 1024px) {
  :root { --margin: 48px; --section: 96px; --header-h: 72px; }
  body { font-size: 17px; }
  .nav { display: none; }
  .menu-toggle { display: block; }

  .hero__copy, .hero__visual { grid-column: 1 / -1; }
  .hero__copy { padding-bottom: 0; }
  .hero__visual { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: var(--s-7) auto auto auto; }
  .hero__panel { grid-column: 4 / -1; }
  .hero__portrait { grid-column: 1 / span 8; aspect-ratio: 4 / 4.4; }
  .hero__caption { grid-column: 1 / span 8; }
  .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }

  .throughline__head, .throughline__body { grid-column: 1 / -1; }
  .throughline__body, .foundations__text, .press-wall { padding-top: 0; }
  .continuum { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: var(--s-5); margin-top: var(--s-7); }
  .continuum::before, .continuum::after { top: 0; bottom: 0; left: 7px; width: 2px; height: auto; right: auto; }
  .continuum::after { transform-origin: top; transform: scaleY(var(--progress, 1)); }
  .continuum__node { padding-bottom: var(--s-5); }
  .continuum__node::before { top: 6px; left: calc(-1 * var(--s-5)); }

  .journey__head, .journey__aside { grid-column: 1 / -1; }
  .journey__aside { margin-top: var(--s-3); }
  .chapters__index { display: none; }
  .chapters__panels { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-7); }
  .chapter { grid-template-columns: 1fr; }
  .chapter__body { grid-column: 1; }

  .shift__split { grid-template-columns: 1fr; }
  .shift__bridge { width: auto; flex-direction: row; padding-block: var(--s-3); }
  .shift__bridge-year { writing-mode: horizontal-tb; transform: none; font-size: 40px; }
  .shift__bridge-line { width: 96px; height: 2px; background: linear-gradient(90deg, var(--grey), var(--cobalt)); }
  .shift__side { min-height: 0; }
  .shift__media, .shift__diagram { min-height: 320px; flex: none; }
  .shift__content, .shift__side--code .shift__content, .shift__side--matter .shift__content { padding: var(--s-5) var(--margin); }
  .shift__text .t-lead, .shift__text > p:last-child { grid-column: 1 / -1; }
  .shift__text > p:last-child { margin-top: var(--s-4); }

  .academy__emblem { grid-column: 1 / span 6; }
  .academy__copy { grid-column: 1 / -1; margin-top: var(--s-6); }

  .library__head, .library__aside { grid-column: 1 / -1; }
  .library__aside { margin-top: var(--s-3); }
  .feature-pub { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end; margin-bottom: var(--s-6); }
  .archive { grid-column: 1 / -1; }

  .presentations__head, .presentations__channel { grid-column: 1 / -1; justify-self: start; }
  .presentations__channel { margin-top: var(--s-3); }
  .video--feature { grid-column: 1 / -1; grid-row: auto; }
  .video-grid .video:nth-child(2) { grid-column: 1 / span 6; }
  .video-grid .video:nth-child(3) { grid-column: 7 / span 6; }

  .contact__info, .form { grid-column: 1 / -1; }
  .form { margin-top: var(--s-6); }

  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__nav { grid-column: 1 / span 6; }
  .site-footer__social { grid-column: 7 / span 6; }

  /* about */
  .a-hero__portrait { grid-column: 1 / span 7; }
  .a-hero__intro { grid-column: 8 / span 5; }
  .foundations__head, .foundations__text { grid-column: 1 / -1; }
  .foundations__text { margin-top: var(--s-5); }
  .starmap { grid-column: 1 / -1; }
  .foundations__project { grid-column: 1 / span 6; }
  .facts { grid-column: 7 / span 6; }
  .tech-years__head, .tech-years__aside { grid-column: 1 / -1; }
  .tech-years__aside { margin-top: var(--s-3); }
  .ledger__year { grid-column: 1 / span 3; }
  .ledger__body { grid-column: 4 / span 9; }
  .ledger__tag { grid-column: 4 / span 9; justify-self: start; grid-row: 2; }
  .ledger__media { grid-column: 4 / span 6; grid-row: 2; }
  .inquiry__year { grid-column: 1 / -1; }
  .inquiry__title, .inquiry__lead { grid-column: 1 / -1; }
  .inquiry__title { margin-top: var(--s-4); }
  .inq-card--wide { grid-column: 1 / -1; }
  .inq-card:nth-child(2) { grid-column: 1 / span 6; }
  .inq-card:nth-child(3) { grid-column: 7 / span 6; }
  .inquiry__media, .inquiry__knowledge-text { grid-column: 1 / -1; }
  .inquiry__knowledge-text { margin-top: var(--s-5); }
  .timeline-sec__head, .timeline-sec__filters { grid-column: 1 / -1; justify-content: flex-start; }
  .appearances__head, .press-wall { grid-column: 1 / -1; }
  .press-wall { margin-top: var(--s-5); }
  .video--about { grid-column: 1 / -1; }
  .works { grid-column: 1 / span 6; }
  .recognition { grid-column: 7 / span 6; }
  .a-close__title, .a-close__side { grid-column: 1 / -1; }

  /* mission */
  .m-hero__copy { grid-column: 1 / span 8; }
  .m-hero__media { grid-column: 9 / span 4; }
  .m-central__head { grid-column: 1 / -1; }
  .m-quote, .m-central__text { grid-column: 1 / -1; }
  .m-central__text { margin-top: var(--s-6); }
  .m-themes__intro > div, .m-themes__aside { grid-column: 1 / -1; }
  .m-themes__aside { margin-top: var(--s-3); }
  .theme-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .theme { min-height: 360px; }
  .sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .sequence::before { display: none; }
  .sequence__step:nth-child(2)::after { display: none; }
  .m-academy__media, .m-academy__copy { grid-column: 1 / -1; }
  .invite__card { grid-column: 1 / -1; min-height: 0; }
  .invite__go { margin-top: var(--s-3); }
}

/* 768 — tablet portrait */
@media (max-width: 768px) {
  :root { --margin: 32px; --section: 96px; --gutter: 16px; }
  .meta-strip { grid-template-columns: 1fr; }
  .hero__panel .geo--hero { width: 40%; }
  .academy__emblem { grid-column: 1 / -1; }
  .themes__list { grid-template-columns: 1fr; }
  .feature-pub { grid-template-columns: 1fr; }
  .feature-pub__cover { max-width: 480px; }
  .pub-row a { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .pub-row__c { grid-column: 2; grid-row: 2; }
  .pub-row__go { grid-column: 3; grid-row: 1; }
  .video-grid .video:nth-child(2), .video-grid .video:nth-child(3) { grid-column: 1 / -1; }
  .video-list a { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .video-list__s { grid-column: 2; grid-row: 2; }
  .video-list__play { grid-column: 3; grid-row: 1; }
  .form { padding: var(--s-5) var(--s-4); }
  .site-footer__nav, .site-footer__social { grid-column: 1 / -1; }

  .a-hero__portrait, .a-hero__intro { grid-column: 1 / -1; }
  .a-hero__intro { margin-top: var(--s-5); }
  .foundations__project, .facts { grid-column: 1 / -1; }
  .ledger__year, .ledger__body, .ledger__tag, .ledger__media { grid-column: 1 / -1; grid-row: auto; }
  .ledger__media { aspect-ratio: 16 / 9; }
  .inq-card:nth-child(2), .inq-card:nth-child(3) { grid-column: 1 / -1; }
  .tl__item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .tl__date { grid-column: 1; grid-row: 1; padding-left: 0; }
  .tl__track { grid-column: 2; grid-row: 1; padding-right: 0; }
  .tl__title { grid-column: 1 / -1; grid-row: 2; }
  .works, .recognition { grid-column: 1 / -1; }

  .m-hero__copy, .m-hero__media { grid-column: 1 / -1; }
  .m-hero__media { aspect-ratio: 4 / 3; max-width: 560px; }
  .m-hero__media img { object-position: 50% 80%; }
  .m-quote { padding: var(--s-4); }
  .theme-rail { grid-template-columns: 1fr; }
  .theme { min-height: 0; }
  .sequence { grid-template-columns: 1fr; padding-left: 0; }
  .sequence__step::after { display: none; }
  .physics-path { padding: var(--s-4); }
}

/* 480 — mobile (390 target) */
@media (max-width: 480px) {
  :root { --margin: 16px; --section: 64px; --header-h: 64px; }
  body { font-size: 16px; }
  .brand__mark { width: 40px; height: 40px; font-size: 13px; }
  .brand__name { font-size: 16px; }
  .hero { padding-top: var(--s-5); }
  .hero__visual { grid-template-rows: var(--s-6) auto auto auto; }
  .hero__panel { grid-column: 3 / -1; }
  .hero__portrait { grid-column: 1 / span 10; }
  .hero__caption { grid-column: 1 / span 10; }
  .hero__panel-tag { top: var(--s-2); left: var(--s-2); }
  .hero__panel .geo--hero { top: var(--s-2); right: calc(var(--margin) + var(--s-2)); }
  .hero__meta { margin-top: var(--s-6); }
  .btn-row .btn { width: 100%; }
  .btn { white-space: normal; text-align: center; }
  .ticker { padding-block: var(--s-2); }
  .chapters__panels { gap: var(--s-6); }
  .chapter { row-gap: var(--s-3); }
  .shift__media, .shift__diagram { min-height: 240px; }
  .shift__list li { flex-direction: column; }
  .shift__list li span { align-self: flex-start; }
  .feature-pub__cover { padding: var(--s-3); }
  .video__play { width: 48px; height: 48px; left: var(--s-2); bottom: var(--s-2); }
  .video--feature .video__play { width: 64px; height: 64px; left: var(--s-2); bottom: var(--s-2); }
  .statement { padding-block: var(--s-8); }
  .form { padding: var(--s-4) var(--s-3); }
  .bio-meta div { grid-template-columns: 1fr; gap: 4px; }
  .starmap { padding: var(--s-2); }
  .a-hero__fig { padding: var(--s-1) var(--s-2); }
  .inquiry__band { padding-block: var(--s-7); }
  .m-quote { padding: var(--s-3); }
  .theme { padding: var(--s-4) var(--s-3); }
  .invite__card { padding: var(--s-4) var(--s-3); }
  .sequence__note { flex-direction: column; }
  .site-footer { padding-top: var(--s-7); }
}

/* ---------- MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .continuum::after { --progress: 1; }
  .ticker__track { flex-wrap: wrap; width: auto; gap: var(--s-2) var(--s-4); padding-inline: var(--margin); }
  .ticker__track > :nth-child(n+13) { display: none; }
}

/* ==========================================================================
   13 MOTION & INTERACTION
   Every initial "hidden" state is scoped to html.motion, which JS adds only
   when the visitor has not asked for reduced motion.
   ========================================================================== */

/* scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 3px; background: var(--cobalt); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.page-mission .progress { background: var(--lime); }

/* header hides on scroll down, returns on scroll up */
.site-header { transition: transform 500ms var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }

/* architectural column guides */
.guides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.guides .grid { height: 100%; }
.guides i { border-left: 1px solid rgba(23, 27, 32, .06); transform-origin: top; }
.guides i:last-child { border-right: 1px solid rgba(23, 27, 32, .06); }
.m-hero .guides i { border-color: rgba(255, 255, 255, .1); }
.hero > .container, .a-hero > .container, .m-hero > .container { position: relative; z-index: 1; }
.motion .guides i { transform: scaleY(0); transition: transform 1600ms var(--ease) calc(var(--i) * 60ms); }
.motion.is-loaded .guides i { transform: scaleY(1); }

/* headline line masks */
.split { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.split__in { display: block; }
.motion .split__in { transform: translateY(110%); }
.motion .is-split-in .split__in { transform: none; transition: transform 1100ms var(--ease) calc(var(--i) * 90ms); }

/* hero entrance */
.motion .hero__lead, .motion .hero .btn-row, .motion .hero .eyebrow, .motion .hero__caption, .motion .hero__meta,
.motion .a-hero .eyebrow, .motion .a-hero__intro, .motion .m-hero .eyebrow, .motion .m-hero__lead {
  opacity: 0; transform: translateY(20px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.motion.is-loaded .hero .eyebrow, .motion.is-loaded .a-hero .eyebrow, .motion.is-loaded .m-hero .eyebrow { opacity: 1; transform: none; transition-delay: 100ms; }
.motion.is-loaded .hero__lead, .motion.is-loaded .m-hero__lead { opacity: 1; transform: none; transition-delay: 550ms; }
.motion.is-loaded .hero .btn-row, .motion.is-loaded .a-hero__intro { opacity: 1; transform: none; transition-delay: 700ms; }
.motion.is-loaded .hero__caption, .motion.is-loaded .hero__meta { opacity: 1; transform: none; transition-delay: 900ms; }
.motion .hero__panel { clip-path: inset(0 0 0 100%); transition: clip-path 1400ms var(--ease) 200ms; }
.motion.is-loaded .hero__panel { clip-path: inset(0 0 0 0); }

/* image wipe reveal */
.media::before { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--wipe, var(--cobalt)); transform-origin: right; transform: scaleX(0); pointer-events: none; }
.motion .media::before { transform: scaleX(1); transition: transform 1200ms var(--ease) var(--delay, 0ms); }
.motion .media.is-in::before { transform: scaleX(0); }
.motion .media img { transform: scale(1.14); }
.motion .media.is-in img { transform: scale(1); transition: transform 1600ms var(--ease) var(--delay, 0ms), filter var(--dur) var(--ease); }
.motion a:hover .media.is-in img, .motion .media.is-in:hover img { transform: scale(1.04); transition: transform 900ms var(--ease), filter var(--dur) var(--ease); }
.shift .media, .tech-years .media, .presentations .media, .m-academy .media { --wipe: var(--carbon); }
.m-hero .media { --wipe: var(--lime); }

/* staggered lists */
.motion .stagger:not(.is-in) > * { opacity: 0; }
.motion .stagger.is-in > * { animation: staggerIn 800ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes staggerIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 3D tilt */
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform 500ms var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.tilt.is-tilting { transition: transform 120ms linear, box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.feature-pub:hover .feature-pub__cover, .invite__card:hover { --ty: -6px; }

/* cursor spotlight */
.spot { position: relative; isolation: isolate; }
.spot::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(36, 72, 216, .12)), transparent 60%); }
.spot:hover::after { opacity: 1; }
.theme.spot, .invite__card--cta.spot { --spot: rgba(217, 243, 106, .16); }

/* magnetic buttons use the independent `translate` property so they never fight transform */
.btn { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 160ms var(--ease), translate 400ms var(--ease); }

/* button fill sweep */
.btn--primary, .btn--ghost, .btn--lime { overflow: hidden; isolation: isolate; }
.btn--primary::before, .btn--ghost::before, .btn--lime::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform 500ms var(--ease); }
.btn--primary::before, .btn--ghost::before { background: var(--carbon); }
.btn--lime::before { background: var(--white); }
.btn--primary:hover { background-color: var(--cobalt); }
.btn--ghost:hover { background-color: transparent; }
.btn--lime:hover { background-color: var(--lime); }
.btn:hover::before { transform: none; }
.page-mission .site-header:not(.is-scrolled) .site-header__cta::before { background: var(--white); }

/* chapter autoplay progress */
.chapters__tab { position: relative; }
.chapters__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--cobalt); transform-origin: left; transform: scaleX(0); }
.chapters.is-auto .chapters__tab[aria-selected="true"] .chapters__bar { animation: chapterBar 7s linear forwards; animation-play-state: paused; }
.chapters.is-auto.is-playing:not(:hover):not(:focus-within) .chapters__tab[aria-selected="true"] .chapters__bar { animation-play-state: running; }
@keyframes chapterBar { to { transform: scaleX(1); } }

/* ticker pauses on hover */
.ticker:hover .ticker__track { animation-play-state: paused; }

/* publication row hover marker */
.pub-row a { position: relative; }
.pub-row a::before { content: ''; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px; background: var(--cobalt); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur) var(--ease); }
.pub-row a:hover::before { transform: scaleY(1); }

/* timeline row hover */
.tl__item { position: relative; }
.tl__item::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.tl__item:hover::before { transform: scaleX(1); }

/* continuum nodes pop in as the line draws, the current one pulses */
.motion .continuum__node::before { transform: scale(0); transition: transform 500ms var(--ease) calc(300ms + var(--i, 0) * 280ms); }
.motion .continuum.is-drawn .continuum__node::before { transform: none; }
.continuum.is-drawn .continuum__node--now::before { animation: pulse 2.4s var(--ease) 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 243, 106, .9); } 70% { box-shadow: 0 0 0 14px rgba(217, 243, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 243, 106, 0); } }

/* sequence connector draws in */
.sequence::after { content: ''; position: absolute; top: 32px; left: 0; right: 0; height: 2px; background: var(--cobalt); transform-origin: left; transform: scaleX(0); transition: transform 1400ms var(--ease); }
.sequence.is-drawn::after { transform: scaleX(1); }

/* footer link underline sweep */
.site-footer ul a { background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.site-footer ul a:hover { background-size: 100% 1px; }

@media (max-width: 1024px) {
  .sequence::after, .chapters__bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .site-header.is-hidden { transform: none; }
}

/* keep the "In the record" rows level across theme cards */
.theme__src { min-height: 6.5em; }
@media (max-width: 1024px) { .theme__src { min-height: 0; } }
/* twelve guides are too dense on phones */
@media (max-width: 768px) { .guides { display: none; } }

/* fallback link under the embedded player */
.modal__frame { position: relative; }
.modal__yt { position: absolute; right: 0; top: calc(100% + var(--s-2)); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.modal__yt:hover { color: var(--white); }

/* ==========================================================================
   14 PRESENTATIONS — inline cinema player, playlist, series wall
   ========================================================================== */
.presentations__side { grid-column: 9 / span 4; justify-self: end; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
.presentations__count { display: flex; align-items: flex-end; gap: var(--s-2); }
.presentations__count span:first-child { font-family: var(--f-display); font-size: clamp(64px, 5vw, 96px); font-weight: 700; line-height: .8; letter-spacing: -0.05em; color: var(--lime); }
.presentations__count span:last-child { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }

.theater { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); }
.theater__main { grid-column: 1 / span 8; min-width: 0; }
.theater__side { grid-column: 9 / span 4; position: relative; min-width: 0; }
.theater__side-inner { position: absolute; inset: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.2); }

/* stage */
.stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.stage__facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; }
.stage__poster { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.05); transition: transform 1400ms var(--ease), filter 600ms var(--ease), opacity 300ms var(--ease); }
.stage.is-swapping .stage__poster { opacity: 0; transform: scale(1.02); }
.stage__facade:hover .stage__poster, .stage__facade:focus-visible .stage__poster { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }
.stage__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,27,32,.85) 0%, rgba(23,27,32,0) 45%), linear-gradient(to bottom right, rgba(23,27,32,.55), rgba(23,27,32,0) 40%); pointer-events: none; }
.stage__play {
  position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  display: grid; place-items: center; background: var(--lime);
  transition: transform 500ms var(--ease), background-color var(--dur) var(--ease);
}
.stage__play::before { content: ""; margin-left: 8px; border-style: solid; border-width: 18px 0 18px 30px; border-color: transparent transparent transparent var(--carbon); }
.stage__play-ring { position: absolute; inset: -12px; border: 1px solid rgba(217, 243, 106, .7); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.stage__facade:hover .stage__play { transform: scale(1.08); background: var(--white); }
.stage__hint { position: absolute; left: 50%; top: calc(50% + 80px); transform: translateX(-50%); font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.stage__index { position: absolute; left: var(--s-3); top: var(--s-3); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--lime); }
.stage__frame { position: absolute; inset: 0; background: #000; }
.stage__frame[hidden] { display: none; }
.stage__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage__notice { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s-3); padding: var(--s-6); background: linear-gradient(rgba(23,27,32,.9), rgba(23,27,32,.9)), var(--poster) center / cover; color: var(--white); }
.stage__notice p { max-width: 52ch; color: var(--on-dark-2); font-size: 16px; }
.stage__notice strong { display: block; margin-bottom: var(--s-1); font-family: var(--f-display); font-size: clamp(22px, 2vw, 32px); color: var(--white); letter-spacing: -0.02em; }
.stage__notice code { font-family: var(--f-mono); font-size: 14px; color: var(--lime); }

.theater__info { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.12); }
.theater__titles { min-width: 0; }
.theater__series { margin-bottom: var(--s-1); font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.theater__title { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.theater__controls { display: flex; gap: var(--s-1); flex: none; }
.ctrl { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--white); font-family: var(--f-display); font-size: 18px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ctrl:hover { background: var(--lime); border-color: var(--lime); color: var(--carbon); }
.ctrl--wide { padding: 0 var(--s-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* playlist */
.playlist__head { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-2); }
.playlist__head .label { color: var(--on-dark-2); }
.playlist__head .label span { color: var(--lime); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--on-dark-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip:hover { border-color: var(--white); color: var(--white); }
.chip.is-active { background: var(--lime); border-color: var(--lime); color: var(--carbon); }

.playlist { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; margin-right: calc(-1 * var(--s-1)); padding-right: var(--s-1); }
.playlist::-webkit-scrollbar { width: 6px; }
.playlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }
.pl-item[hidden] { display: none; }
.pl-item button {
  position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-2); align-items: center;
  width: 100%; padding: 12px 12px 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent; color: var(--white); text-align: left;
  transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.pl-item button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); transform: scaleY(0); transition: transform var(--dur) var(--ease); }
.pl-item button:hover { background: rgba(255,255,255,.04); padding-left: var(--s-1); }
.pl-item.is-active button { background: rgba(36, 72, 216, .22); padding-left: var(--s-2); }
.pl-item.is-active button::before { transform: scaleY(1); }
.pl-item__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--carbon-2); }
.pl-item__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6); transition: transform 700ms var(--ease), filter var(--dur) var(--ease); }
.pl-item button:hover .pl-item__thumb img, .pl-item.is-active .pl-item__thumb img { filter: grayscale(0); transform: scale(1.06); }
.pl-item__n { position: absolute; left: 0; bottom: 0; padding: 2px 6px; background: var(--carbon); font-family: var(--f-mono); font-size: 11px; color: var(--lime); }
.pl-item__eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 30%; background: rgba(36, 72, 216, .55); }
.pl-item.is-active .pl-item__eq { display: flex; }
.pl-item__eq i { width: 4px; height: 18px; background: var(--lime); transform-origin: bottom; animation: eq 900ms ease-in-out infinite alternate; }
.pl-item__eq i:nth-child(2) { animation-delay: -300ms; }
.pl-item__eq i:nth-child(3) { animation-delay: -600ms; }
.pl-item:not(.is-playing) .pl-item__eq i { animation-play-state: paused; transform: scaleY(.4); }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.pl-item__series { display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.pl-item.is-active .pl-item__series { color: var(--lime); }
.pl-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--f-display); font-size: 16px; font-weight: 500; line-height: 1.3; }

/* series wall */
.series-wall__label { margin-top: var(--s-7); margin-bottom: var(--s-3); color: var(--on-dark-2); }
.series-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.series-card {
  display: flex; flex-direction: column; gap: var(--s-3); width: 100%; height: 100%;
  padding: var(--s-3); border: 1px solid rgba(255,255,255,.1); background: var(--carbon-2); color: var(--white); text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.series-card:hover { border-color: rgba(255,255,255,.35); }
.series-card.is-active { border-color: var(--lime); background: #1d2330; }
.series-card__stack { position: relative; aspect-ratio: 16 / 10; }
.series-card__stack img {
  position: absolute; left: 12%; top: 10%; width: 76%; aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.8); filter: grayscale(.5);
  transition: transform 700ms var(--ease), filter var(--dur) var(--ease);
}
.series-card__stack img:nth-child(1) { transform: rotate(-7deg) translate(-8%, 4%); }
.series-card__stack img:nth-child(2) { transform: rotate(5deg) translate(8%, 6%); }
.series-card__stack img:last-child { transform: translateY(14%); z-index: 1; }
.series-card:hover .series-card__stack img { filter: grayscale(0); }
.series-card:hover .series-card__stack img:nth-child(1) { transform: rotate(-11deg) translate(-16%, 2%); }
.series-card:hover .series-card__stack img:nth-child(2) { transform: rotate(9deg) translate(16%, 4%); }
.series-card:hover .series-card__stack img:last-child { transform: translateY(8%) scale(1.04); }
.series-card__name { font-family: var(--f-display); font-size: clamp(20px, 1.5vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.series-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.series-card__foot span:first-child { color: var(--lime); }
.series-card__foot span:last-child { transition: transform var(--dur) var(--ease); }
.series-card:hover .series-card__foot span:last-child { transform: translateX(4px); color: var(--white); }

@media (max-width: 1024px) {
  .presentations__side { grid-column: 1 / -1; justify-self: start; align-items: flex-start; margin-top: var(--s-4); }
  .theater__main, .theater__side { grid-column: 1 / -1; }
  .theater__side-inner { position: static; }
  .playlist { flex: none; max-height: 520px; }
  .series-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .theater__info { flex-direction: column; align-items: flex-start; }
  .stage__play { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
  .stage__play::before { border-width: 13px 0 13px 22px; margin-left: 6px; }
  .stage__hint { top: calc(50% + 60px); }
  .stage__notice { padding: var(--s-3); }
  .stage__notice p { font-size: 14px; }
  .pl-item button { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .stage__hint { display: none; }
  .stage__notice strong { font-size: 18px; }
  .stage__notice p { display: none; }
  .series-wall { grid-template-columns: 1fr; }
  .pl-item button { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .pl-item__title { font-size: 15px; }
}

/* phones: series chips become one swipeable row */
@media (max-width: 768px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* ==========================================================================
   15 ABOUT — section 01 (foundations) and 06 (closing) alignment
   Same 6 / gap / 5 column split as the other editorial sections.
   ========================================================================== */
.foundations__text .t-lead, .foundations__text > p:not(.t-lead) { max-width: none; }
.foundations__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.foundations__project p:last-child { font-size: 17px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }

.a-close__side { padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .2); }

@media (min-width: 1025px) {
  .foundations__head { grid-column: 1 / span 6; }
  .foundations__text { grid-column: 8 / span 5; }
  .foundations__lower { align-items: stretch; }
  .starmap { grid-column: 1 / span 6; }
  .foundations__aside { grid-column: 8 / span 5; }

  .a-close .grid { align-items: end; }
  .a-close__title { grid-column: 1 / span 7; }
  .a-close__side { grid-column: 9 / span 4; }
}
@media (max-width: 1024px) {
  .foundations__aside { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
}

/* About 06: label-to-title spacing matches other sections; text column top-aligned to the title */
.a-close { padding-block: var(--section) var(--s-8); }
.a-close .grid { row-gap: 0; }
@media (min-width: 1025px) {
  .a-close .grid { align-items: start; }
  .a-close__side { margin-top: 12px; }
}
@media (max-width: 1024px) {
  .a-close__side { margin-top: var(--s-5); }
}
/* closing band and footer share carbon, so mark where the footer begins */
.page-about .site-footer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

/* =====================================================================
   Supplied media — colour portrait, documents, covers, archive
   Images are never cropped: frames use the picture's own proportions.
   ===================================================================== */
.media--natural { background: var(--mineral); }
.media--natural img { height: auto; object-fit: contain; filter: none; display: block; }
.motion .media--natural.is-in:hover img, .motion a:hover .media--natural.is-in img { transform: none; }
.media--natural > a { display: block; cursor: zoom-in; }
.media--doc { background: var(--mineral); border: 1px solid var(--line); }
.media--doc > a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.media--doc img { box-sizing: border-box; padding: var(--s-3); object-fit: contain; filter: none; }
.motion .media.media--doc.is-in:hover img, .motion a:hover .media.media--doc.is-in img { transform: none; }
.media--doc::after { content: none; }

/* home hero portrait — natural 1501:2200, one column narrower to keep the old height */
.hero__portrait.media--natural { aspect-ratio: 1501 / 2200; grid-column: 1 / span 7; }
.hero__portrait.media--natural img { width: 100%; height: 100%; object-position: 50% 50%; }
.hero__caption { grid-column: 1 / span 7; }

/* about hero portrait */
.a-hero__portrait { grid-column: 1 / span 3; aspect-ratio: auto; position: relative; }
.a-hero__frame { aspect-ratio: 1501 / 2200; }
.a-hero__frame img { width: 100%; height: 100%; }
.a-hero__portrait .a-hero__fig { position: static; }
.a-hero__intro { grid-column: 5 / span 7; }

/* chapter credit + inline video */
.chapter__credit { margin-top: var(--s-3); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.chapter__body > .chapter__credit { max-width: none; }
.chapter__link { margin-top: var(--s-3); }
.chapter__media--tall { aspect-ratio: 3 / 2; }
.chapter__media--tall img { padding: var(--s-2); }
.video--inline { flex-direction: row; align-items: center; gap: var(--s-3); max-width: var(--measure); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.video--inline .video__thumb { position: relative; flex: 0 0 clamp(150px, 20vw, 232px); }
.video--inline .video__play { left: var(--s-2); bottom: var(--s-2); width: 44px; height: 44px; }
.video--inline .video__play::before { border-width: 7px 0 7px 12px; margin-left: 3px; }
.video--inline .video__title { font-size: clamp(18px, 1.4vw, 22px); }

/* about — ISSO photo + video row */
.inq-media { margin-top: var(--s-7); align-items: start; row-gap: var(--s-5); }
.inq-media__photo { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s-2); }
.inq-media__frame { aspect-ratio: 2200 / 1692; }
.inq-media__frame img { width: 100%; height: 100%; }
.inq-media__cap { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.inq-media__video { grid-column: 7 / span 6; gap: var(--s-2); }
.inq-media__video .video__thumb { position: relative; }
.inq-media__video .video__title { font-size: clamp(20px, 1.6vw, 26px); }

/* about — ledger image that is a document */
.ledger__media.media--doc { background: var(--white); border-color: rgba(255,255,255,.2); }
.ledger__media.media--doc img { padding: var(--s-1); }

/* about — ManyOne screenshot, natural proportions */
.inquiry__media.media--doc { grid-column: 1 / span 4; aspect-ratio: 1982 / 2200; }
.inquiry__media.media--doc img { padding: 0; }
.inquiry__knowledge-text { grid-column: 6 / span 6; }

/* about — personal archive */
.archive-photo { padding-block: var(--section); background: var(--mineral); }
.archive-photo__grid { align-items: center; }
.archive-photo__text { grid-column: 1 / span 4; }
.archive-photo__text .t-h1 { margin-block: var(--s-2) var(--s-3); }
.archive-photo__text > p:not(.eyebrow) { color: var(--ink-2); max-width: var(--measure); }
.archive-photo__fig { grid-column: 7 / span 6; }
.archive-photo__media { aspect-ratio: 2200 / 1467; }
.archive-photo__media img { width: 100%; height: 100%; }
.archive-photo__cap { margin-top: var(--s-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* mission hero — colour illustration, natural proportions */
.m-hero__media { grid-column: 8 / span 5; aspect-ratio: auto; border: 0; background: none; }
.m-hero__frame { aspect-ratio: 2200 / 1839; border: 1px solid rgba(255,255,255,.3); background: var(--carbon); }
.m-hero__frame img { width: 100%; height: 100%; }
.m-hero__media figcaption { position: static; }

/* mission — a continuing conversation */
.m-convo { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.2); }
.m-convo .label { color: var(--on-dark-2); margin-bottom: var(--s-1); }
.m-convo > p:not(.label) { color: var(--on-dark-2); max-width: var(--measure); margin-bottom: 0; }
.m-convo .video--inline { border-top: 0; padding-top: 0; margin-top: var(--s-3); color: var(--white); }
.m-convo .video--inline .label { margin: 0; }
.m-convo .video:hover .video__title { color: var(--lime); }

/* library — cover shelf: three identical frames */
.library__shelf .shelf { margin-top: var(--s-7); }
.shelf { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--carbon); }
.shelf__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.shelf__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.shelf__item { display: flex; flex-direction: column; gap: var(--s-2); }
.shelf__cover { aspect-ratio: 4 / 5; background: var(--mineral); border: 1px solid var(--line); padding: var(--s-3); display: flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.shelf__cover img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 24px -12px rgba(23,27,32,.45); }
.shelf__item:hover .shelf__cover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(23,27,32,.5); }
.shelf__title { font-family: var(--f-display); font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.shelf__item:hover .shelf__title { color: var(--cobalt); }

@media (max-width: 1024px) {
  .hero__portrait.media--natural { grid-column: 1 / span 8; }
  .hero__caption { grid-column: 1 / span 8; }
  .a-hero__portrait { grid-column: 1 / span 6; }
  .a-hero__intro { grid-column: 1 / -1; }
  .inq-media__photo, .inq-media__video { grid-column: 1 / -1; }
  .inquiry__media.media--doc { grid-column: 1 / span 6; }
  .inquiry__knowledge-text { grid-column: 1 / -1; }
  .archive-photo__text, .archive-photo__fig { grid-column: 1 / -1; }
  .archive-photo__text { margin-bottom: var(--s-4); }
  .m-hero__media { grid-column: 1 / -1; max-width: 640px; }
}
@media (max-width: 720px) {
  .hero__portrait.media--natural, .hero__caption { grid-column: 1 / -1; }
  .a-hero__portrait, .inquiry__media.media--doc { grid-column: 1 / -1; max-width: 420px; }
  .shelf__list { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .shelf__list li:nth-child(3) { grid-column: 1 / -1; max-width: 50%; }
  .video--inline { flex-direction: column; align-items: flex-start; }
  .video--inline .video__thumb { flex-basis: auto; width: 100%; }
}
.m-academy .grid { align-items: start; }