/* ============================================================
   Marlowe — Editorial design system (light)
   Ported from the editorial-light style mockup.
   Tokens carry dormant dark variants so a [data-theme="dark"]
   override + upper-right toggle can be layered on later.
   ============================================================ */

/* --- Tokens --- */
:root {
  --cardinal: #8C1515;
  --cardinal-700: #6E1010;
  --cardinal-300: #C7847E;
  --ember: #B83A2C;

  --cream: #faf6ee;
  --cream-200: #f1ead9;
  --cream-300: #e6dcc4;
  --sand: #d8cdb1;

  --ink: #1a1714;
  --ink-700: #3a342d;
  --ink-500: #6b6055;
  --ink-300: #9b9082;

  --night: #100e0c;
  --night-700: #1f1a16;
  --night-600: #2a231d;
  --night-500: #3b322a;

  --rule: rgba(26, 23, 20, 0.12);
  --rule-strong: rgba(26, 23, 20, 0.28);
  --rule-dark: rgba(250, 246, 238, 0.16);
  --rule-dark-strong: rgba(250, 246, 238, 0.32);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Semantic surface tokens (overridable by a future dark theme) */
  --bg: var(--cream-200);
  --surface: var(--cream);
  --surface-2: var(--cream-300);
  --text: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { max-width: 1440px; margin: 0 auto; }
a { color: inherit; }
img { max-width: 100%; }

/* --- Striped image placeholder --- */
.ph {
  position: relative;
  background-color: var(--cream-200);
  background-image:
    repeating-linear-gradient(135deg, rgba(26,23,20,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(26,23,20,.04) 0 1px, transparent 1px 22px);
  overflow: hidden;
}
.ph.dark {
  background-color: #1a1612;
  background-image:
    repeating-linear-gradient(135deg, rgba(250,246,238,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(250,246,238,.04) 0 1px, transparent 1px 22px);
}
.ph .ph-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.03);
}
.ph.dark .ph-img {
  opacity: .72;
  filter: saturate(.85) contrast(1.08) brightness(.72);
}
.ph > *:not(.ph-img) { position: relative; z-index: 1; }
.ph .ph-label {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: rgba(250, 246, 238, 0.82);
  padding: 4px 8px;
  border-radius: 2px;
}
.ph.dark .ph-label { color: var(--cream); background: rgba(16, 14, 12, 0.6); }

/* --- Nav --- */
.m-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  transition: transform 0.28s ease;
  will-change: transform;
}
/* Auto-hide on scroll-down, reveal on scroll-up (toggled by nav.html). */
.m-nav.nav--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .m-nav { transition: none; }
}
.m-nav .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  text-decoration: none;
  color: inherit;
}
.m-nav .brand .brand-logo {
  height: 70px;
  width: auto;
  display: block;
}
/* Wordmark + sub grouped and baseline-aligned, then centered against the
   logo as one unit — keeps the serif name and mono tag on a shared baseline
   instead of each line-box centering independently (which floated "Marlowe"
   high against the badge). */
.m-nav .brand .brand-text {
  display: flex;
  align-items: baseline;
  gap: 14px;
  transform: translateY(-2px); /* optical lift to the badge's visual center (heavy black hat sits high) */
}
.m-nav .brand .brand-name {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.m-nav .brand .sub {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
  line-height: 1;
}
.m-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.m-nav ul a {
  color: inherit;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.m-nav ul a:hover { border-bottom-color: currentColor; }
.m-nav ul a.active { border-bottom-color: var(--cardinal); color: var(--cardinal); }
.m-nav .cta {
  font-size: 17px;
  padding: 8px 16px;
  background: var(--cardinal);
  color: var(--cream);
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.m-nav .cta:hover { background: var(--cardinal-700); }
/* Right-side action group: secondary (OnDemand) + primary (Apply) buttons. */
.m-nav .nav-actions { display: flex; align-items: center; gap: 12px; }
.m-nav .cta--ghost {
  background: transparent;
  color: var(--cardinal);
  border-color: var(--cardinal);
  font-weight: 500;
}
.m-nav .cta--ghost:hover { background: var(--cardinal); color: var(--cream); }
.m-nav .cta--ghost .ext { font-size: 0.9em; }
/* On the access page: occupy the slot but stay invisible so the nav links keep
   their normal position (avoids the space-between shift when the CTA is absent). */
.m-nav .cta--hidden { visibility: hidden; }
.nav-toggle { display: none; }

/* --- Kicker --- */
.kicker {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cardinal);
}
.kicker.muted { color: var(--ink-500); }
.kicker.cream { color: var(--cream); }

/* --- Section header --- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  line-height: 1.05;
}
.section-head .view-all {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.section-head .stories-links {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--cardinal); color: var(--cream); }
.btn-primary:hover { background: var(--cardinal-700); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.arrow { display: inline-block; width: 1em; transform: translateY(1px); }

/* --- Footer --- */
.m-foot {
  border-top: 1px solid var(--rule);
  padding: 42px 48px 36px;
  font-size: 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  column-gap: 48px;
  /* row-gap 32 + .legal margin-top 10 = 42 below the top row, matching the
     42px padding-top above it — so the colophon stays equidistant from the
     footer's top rule and the .legal rule (tightened ~15% from 56). */
  row-gap: 32px;
}
.m-foot h4 {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink-500);
  font-weight: 600;
}
.m-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-foot a { color: inherit; text-decoration: none; opacity: 0.85; }
.m-foot a:hover { opacity: 1; }
.m-foot .colophon {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  max-width: 36ch;
  /* Stay centered in the top row even when the nav columns are taller
     (e.g. a link wraps at larger zoom), so it reads equidistant. */
  align-self: center;
}
.m-foot .colophon .mark {
  display: inline-block; width: 14px; height: 14px;
  background: var(--cardinal); margin-right: 8px; vertical-align: middle;
}
.m-foot .colophon a {
  color: var(--cardinal);
  text-decoration: none;
  opacity: 1;
}
.m-foot .colophon a:hover { color: var(--cardinal-700); }
.m-foot .legal {
  grid-column: 1/-1;
  margin-top: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
}

/* --- Utilities --- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

/* ============================================================
   Homepage sections
   ============================================================ */

/* --- Hero --- */
.hero {
  padding: 64px 48px 68px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: end;
}
.hero .lede h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 24px 0 0;
  text-wrap: balance;
}
.hero .lede h2 em { font-style: normal; color: inherit; }
.hero .lede h2 strong { font-weight: 600; color: var(--cardinal); }
.hero .lede .deck {
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 48ch;
}
.hero .lede .meta {
  margin-top: 28px;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.hero .lede .meta .note {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero .figure { aspect-ratio: 1/1; border-radius: 2px; }
.hero .figure-caption {
  grid-column: 2;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
  display: flex;
  justify-content: space-between;
}

/* --- Status strip --- */
.status-strip {
  margin: 0 48px;
  border-top: 1px solid var(--rule);
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.status-strip .item .num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.status-strip .item .num .unit {
  font-size: 16px;
  color: var(--ink-500);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-strip .item .label {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-500);
  margin-top: 4px;
}
.status-strip .item .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: #2f7a4d;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(47, 122, 77, .5);
  animation: pulse 2.4s infinite;
  transform: translateY(-2px);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 122, 77, .5); }
  70% { box-shadow: 0 0 0 10px rgba(47, 122, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 122, 77, 0); }
}

/* --- Events --- */
.events {
  margin-top: 72px;
  padding: 66px 48px 72px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.events-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
}
.events-carousel.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.events-carousel::-webkit-scrollbar { display: none; }
.events-carousel > .event-card { flex: 0 0 31%; scroll-snap-align: start; }
@media (max-width: 860px) { .events-carousel > .event-card { flex-basis: 46%; } }
@media (max-width: 540px) { .events-carousel > .event-card { flex-basis: 84%; } }
.event-card {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.event-card:hover { transform: translateY(-2px); }
.event-card .date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.event-card .date .day {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.event-card .img { aspect-ratio: 3/2; border-radius: 2px; }
.event-card h3 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.event-card .tag {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cardinal);
}
.events-controls { display: flex; gap: 12px; align-items: center; }
.ctrl {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  color: var(--ink);
}
.ctrl:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --- Updates strip (auto-scrolling announce ticker) --- */
.updates-strip {
  margin: 32px 48px 0;
  padding: 42px 0 18px;
  border-top: 1px solid var(--rule);
}
.updates-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.updates-strip__label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}
.updates-strip__head .view-all {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  text-decoration: none;
  white-space: nowrap;
}
.updates-strip__head .view-all:hover { color: var(--cardinal); }
.u-ticker {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.u-ticker::-webkit-scrollbar { display: none; }
.u-ticker.dragging { cursor: grabbing; user-select: none; }
.u-ticker__track { display: flex; gap: 14px; width: max-content; }
.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  max-width: 440px;
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s;
}
.u-chip:hover { border-color: var(--rule-strong); }
.u-chip__type {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink-500);
}
.u-chip__type.type-research-milestone,
.u-chip__type.type-talks-seminars { color: var(--cardinal); }
.u-chip__type.type-press,
.u-chip__type.type-education { color: var(--ink-700); }
.u-chip__type.type-system-status { color: var(--ink-500); }
.u-chip__type.type-maintenance { color: var(--ink-300); }
.u-chip__date { font-family: var(--mono); font-size: 13px; color: var(--ink-300); white-space: nowrap; }
.u-chip__title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shared button row used in panels */
.panel-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* --- Stories --- */
.stories { padding: 88px 48px 48px; }
.stories-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.story {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.story .img { border-radius: 2px; }
.story.feature { grid-row: span 2; }
.story.feature .img { aspect-ratio: 4/5; }
.story:not(.feature) .img { aspect-ratio: 16/10; }
.story h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
  line-height: 1.15;
}
.story.feature h3 { font-size: 36px; }
.story:not(.feature) h3 { font-size: 23px; }
.story .deck { font-size: 17px; line-height: 1.5; color: var(--ink-700); }
.story .byline {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* --- Story card (shared: /stories/ grid + Research hub slice) --- */
.s-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.s-card .s-img {
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
}
.s-card .s-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-card .s-initials {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 44px;
  color: var(--ink-300);
}
.s-card .s-byline {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.s-card h3 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 4px 0 0;
}
.s-card .s-deck { font-size: 16px; line-height: 1.5; color: var(--ink-700); margin: 0; }
.s-card .s-more {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cardinal);
  margin-top: auto;
  padding-top: 4px;
}
.s-card:hover h3 { color: var(--cardinal); }

/* Horizontal story carousel (Research hub) */
.s-carousel {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
}
.s-carousel.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.s-carousel::-webkit-scrollbar { display: none; }
.s-carousel > .s-card { flex: 0 0 31%; scroll-snap-align: start; }
@media (max-width: 860px) { .s-carousel > .s-card { flex-basis: 62%; } }
@media (max-width: 540px) { .s-carousel > .s-card { flex-basis: 86%; } }

/* --- Video carousel + cards (shared: front page + Research hub) --- */
/* Front-page "Marlowe on film" mirrors the Events box above it:
   cream shade, full-width top + bottom rules. (Research hub uses
   .hub-section, not .videos, so it's unaffected.) */
.videos {
  margin-top: 24px;
  padding: 66px 48px 72px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.vid-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
}
.vid-carousel.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.vid-carousel::-webkit-scrollbar { display: none; }
.vid-carousel > .vid-card { flex: 0 0 48%; scroll-snap-align: start; }
.vid-carousel.is-single { cursor: default; }
.vid-carousel.is-single > .vid-card { flex-basis: 66%; }
@media (max-width: 860px) {
  .vid-carousel > .vid-card { flex-basis: 82%; }
  .vid-carousel.is-single > .vid-card { flex-basis: 100%; }
}
.vid-card { display: flex; flex-direction: column; gap: 14px; }
.vid-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  display: block;
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 100%);
  transition: opacity 0.15s;
}
.vid-thumb.playing::before { display: none; }
.vid-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cardinal);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;
  transition: transform 0.15s, background 0.15s;
}
.vid-thumb:hover .vid-play { transform: translate(-50%, -50%) scale(1.08); background: var(--cardinal-700); }
.vid-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-byline {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.vid-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

/* --- Researcher card + grid (shared: Research hub + /research/profiles/) --- */
.researchers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.r-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: border-color 0.2s;
}
.r-card:hover { border-color: var(--rule-strong); }
.r-card .r-portrait {
  aspect-ratio: 4/3;
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}
.r-card .r-portrait .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.92) contrast(1.03);
}
.r-card .r-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--ink-300);
  letter-spacing: -0.02em;
}
[data-theme="dark"] .r-card .r-portrait { background: var(--surface-2); }
[data-theme="dark"] .r-card .r-portrait .ph-img {
  opacity: 0.82;
  filter: saturate(0.88) contrast(1.06) brightness(0.82);
}
.r-card .r-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.r-card .r-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.r-card .r-meta {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0;
}
.r-card .r-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-card .r-links a {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cardinal);
  text-decoration: none;
}
.r-card .r-links a:hover { color: var(--cardinal-700); }
.r-card .r-project {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
}
.r-card .r-summary {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.r-card .r-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.r-card .r-domain {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cardinal);
}
.r-card .r-read-more {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cardinal);
  text-decoration: none;
  white-space: nowrap;
}
.r-card .r-read-more:hover { color: var(--cardinal-700); }
@media (max-width: 1080px) {
  .researchers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .researchers-grid { grid-template-columns: 1fr; }
}

/* --- PI spotlight --- */
/* Section header sits above the card, matching the other front-page sections
   (kicker + h2 + rule) so the spotlight isn't orphaned. The Events cream box
   above now closes with its own bottom rule, so the separator above the
   spotlight is that box edge — no extra top rule needed here. */
.spotlight-head {
  margin: 64px 48px 32px;
}
.spotlight {
  margin: 0 48px;
  padding: 64px;
  background: var(--cream-300);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.spotlight .portrait { aspect-ratio: 4/5; border-radius: 2px; }
.spotlight .body h2 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 24px;
}
.spotlight .body .quote {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.35;
  font-style: italic;
  color: var(--ink-700);
  border-left: 2px solid var(--cardinal);
  padding-left: 18px;
  margin-bottom: 24px;
}
.spotlight .body .quote::before { content: "\201C"; }
.spotlight .body .quote::after { content: "\201D"; }
.spotlight .body .who {
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* --- Access + Training duo --- */
.duo {
  padding: 96px 48px 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.panel { border-top: 2px solid var(--ink); padding-top: 28px; }
.panel h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
}
.panel .lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 42ch;
  margin-bottom: 24px;
}
.panel ol { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: step; }
.panel ol li {
  counter-increment: step;
  border-bottom: 1px solid var(--rule);
  padding: 14px 0 14px 38px;
  position: relative;
  font-size: 17px;
}
.panel ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 14px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--cardinal);
  font-weight: 600;
}
.panel ol li .t { font-weight: 600; display: block; margin-bottom: 2px; }
.panel ol li .d { color: var(--ink-500); font-size: 17px; }
.panel .workshops { display: flex; flex-direction: column; }
.workshop {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.workshop .when {
  font-family: var(--mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.workshop .what { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.workshop .level {
  font-family: var(--mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cardinal);
  padding: 4px 10px;
  border: 1px solid var(--cardinal-300);
  border-radius: 999px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero .figure-caption { grid-column: 1; }
  .stories-grid { grid-template-columns: 1fr 1fr; }
  .story.feature { grid-row: auto; grid-column: 1 / -1; }
  .story.feature .img { aspect-ratio: 16/9; }
  .spotlight { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .status-strip { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
  .m-foot { grid-template-columns: 1fr 1fr; }
  .m-foot .colophon { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .m-nav { flex-wrap: wrap; gap: 16px; padding: 16px 24px; }
  .m-nav ul { gap: 18px; order: 3; width: 100%; flex-wrap: wrap; }
  /* nav wraps on mobile, so no layout to preserve — drop the hidden CTA entirely */
  .m-nav .cta--hidden { display: none; }
  .hero, .events, .stories, .duo { padding-left: 24px; padding-right: 24px; }
  .status-strip, .updates-strip, .spotlight { margin-left: 24px; margin-right: 24px; }
  .spotlight-head { margin: 56px 24px 24px; }
  .spotlight { padding: 36px 28px; }
  .m-foot { padding: 40px 24px 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 540px) {
  .stories-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dark theme
   Activated by [data-theme="dark"] on <html> (nav toggle +
   no-flash script in default.html; default is light).
   Implemented as a token remap so component rules are reused
   unchanged — only the dormant night and rule-dark surfaces,
   the ink/accent scale, and a few per-section surface swaps
   (events band, spotlight, placeholders) are overridden.
   ============================================================ */
:root[data-theme="dark"] {
  /* Surfaces from the Stanford Black tint scale (#2E2D29 + 10% lifts). Lifted
     off near-black so the dark theme reads "dark, not pitch-black"; Stanford
     Black's faint warmth keeps it on-brand without going espresso/sepia. */
  --bg: #2E2D29;          /* Stanford Black 100% */
  --surface: #43423E;     /* Stanford Black 90%  — cards, one step up */
  --surface-2: #585754;   /* Stanford Black 80%  — raised panels */
  --text: #f3efe8;

  /* Hairlines from the same tint scale so dividers/borders read against both
     --bg (100%) and --surface (90%). */
  --rule: #585754;        /* Stanford Black 80% */
  --rule-strong: #6D6C69; /* Stanford Black 70% */

  /* Ink scale: a 4-step text ladder from off-white to dim. --ink also drives
     solid borders (.event-card, .panel) and .ctrl. */
  --ink: #efebe3;
  --ink-700: #c9c5be;
  --ink-500: #aaa39a;
  --ink-300: #7d7770;

  /* Stanford-adjacent cardinal, slightly brightened for contrast on charcoal */
  --cardinal: #d34a3a;
  --cardinal-700: #b83a2c;
  --cardinal-300: #8a4a42;
}

/* Per-section surface swaps (these reference literal creams, not --bg) */
[data-theme="dark"] .events,
[data-theme="dark"] .videos { background: var(--surface); }
[data-theme="dark"] .spotlight { background: var(--surface-2); }

/* Striped image placeholders → dark stripes (mirrors the .ph.dark variant) */
[data-theme="dark"] .ph {
  background-color: #43423E;
  background-image:
    repeating-linear-gradient(135deg, rgba(250,246,238,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(250,246,238,.04) 0 1px, transparent 1px 22px);
}
[data-theme="dark"] .ph .ph-img { opacity: .82; filter: saturate(.88) contrast(1.06) brightness(.82); }
[data-theme="dark"] .ph .ph-label { color: var(--cream); background: rgba(46, 45, 41, 0.62); }

/* .ctrl hover inverts to a light fill on dark instead of the light-theme ink fill */
[data-theme="dark"] .ctrl:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }

/* The logo's dark hat blends into the near-black nav — add a faint light rim so it reads */
[data-theme="dark"] .m-nav .brand .brand-logo {
  filter: drop-shadow(0 0 0.6px rgba(250,246,238,.9)) drop-shadow(0 0 0.6px rgba(250,246,238,.7));
}

/* --- Theme toggle button --- */
.m-nav .theme-toggle {
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  width: 34px; height: 34px;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.m-nav .theme-toggle:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ============================================================
   Prose — shared article/update body typography
   Applied to {{ content }} bodies in _layouts/article.html and
   _layouts/update.html. The reading column width + page chrome
   (breadcrumb, back-link, meta, title) live in those layouts;
   this owns body element styling only. Token-based → dark theme
   remaps for free, no per-section override needed.
   ============================================================ */
.prose {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-700);
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 20px; }
.prose h1 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 24px;
}
.prose h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text);
  margin: 48px 0 16px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
/* Dek line sits just above the first question; match its gap-to-rule to the
   rule-to-heading gap (28px) so the spacing reads uniform. */
.prose .dek + h2 { margin-top: 28px; }
.prose h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 36px 0 12px;
}
.prose h4 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  margin: 32px 0 8px;
}
.prose a {
  color: var(--cardinal);
  text-decoration: none;
  border-bottom: 1px solid var(--cardinal-300);
  padding-bottom: 1px;
}
.prose a:hover { border-bottom-color: var(--cardinal); }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose img { display: block; width: 100%; border-radius: 2px; margin: 28px 0 0; }
.prose .figcaption {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-500);
  margin: 8px 0 28px;
}
.prose blockquote {
  border-left: 2px solid var(--cardinal);
  padding-left: 20px;
  margin: 32px 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-700);
}
.prose blockquote p { font: inherit; margin: 0; }
/* Atavist-style pull-quote: large centered serif that breaks out wider than the
   reading column to give long-form articles rhythm. No quote marks — the scale
   and centering carry the emphasis. */
.prose .pullquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 3.3vw, 33px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--text);
  width: min(860px, 92vw);
  margin: 60px 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 720px) {
  .prose .pullquote { margin-top: 40px; margin-bottom: 40px; }
}
/* Let a figure break out wider than the reading column — for panoramic graphics
   (e.g. the scaling-law strip) that look cramped at body measure. */
.prose .figure-wide {
  width: min(1100px, 94vw);
  margin: 40px 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
.prose .figure-wide img { margin-top: 0; }
.prose .figure-wide .figcaption { text-align: center; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 48px 0; }
.prose code {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--surface-2);
  color: var(--ink-700);
  padding: 2px 6px;
  border-radius: 2px;
}
.prose pre {
  background: var(--surface-2);
  border-radius: 2px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 24px 0;
}
.prose pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }
/* Article-meta block authored inside the spotlight markdown */
.prose .article-meta {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-500);
  background: var(--surface-2);
  border-left: 2px solid var(--cardinal-300);
  padding: 16px 20px;
  border-radius: 0 2px 2px 0;
  margin: 28px 0 36px;
}
.prose .article-meta strong { color: var(--ink-700); font-weight: 600; }
@media (max-width: 720px) { .prose h2 { font-size: 22px; } }