/* ============================================================
   PSR / PSR Collective / Kwaray — theme.css
   World: dawn over Holy Hill. Signature accent: PSR purple #521c78
   (OKLCH ramp, hue 307 constant, chroma gamut-fit, AA-verified).
   Faces: Alegreya (display, true italics) / Plus Jakarta Sans (body).
   Motif: the ray — light breaking over the hill (pure CSS gradients).
   Photo system: dawn-wash-arch (dawn-gradient hero wash + chapel-arch
   interior frames). No SVG anywhere.
   ============================================================ */

:root {
  /* Paper & ink */
  --paper: #f7f8f6;
  --surface: #ffffff;
  --ink: #241b2e;
  --ink-soft: #564d61;
  --line: #d8dcd6;

  /* Signature accent ramp — PSR purple, OKLCH L .97→.22, hue 307 */
  --accent: #521c78;
  --accent-50: #f8f2ff;
  --accent-100: #efe1ff;
  --accent-200: #e0c2ff;
  --accent-300: #c793f7;
  --accent-400: #9e6bcb;
  --accent-500: #7a47a4;
  --accent-600: #632f8b;
  --accent-700: #4f1975;
  --accent-800: #3c005e;
  --accent-900: #290042;

  /* The rest of PSR's world */
  --dawn: #f24f00;          /* PSR orange: decorative gradients/rules only */
  --dawn-text: #b03a00;     /* AA-safe burnt dawn: small text on paper (5.65:1) and button fills under white (6.07:1) */
  --dawn-deep: #8f2e00;     /* hover state for burnt-dawn fills (8.5:1 under white) */
  --spark: #c900a3;         /* PSR magenta: sparks, never body text */
  --olive: #344233;         /* Kwaray dark olive: the deep room */
  --olive-deep: #0e1d16;
  --olive-ink: #e9ede4;     /* text on olive */
  --cream: #fff2a8;         /* Kwaray cream: accents on dark rooms */

  /* Fluid type scale — anchors 360px (ratio 1.2) → 1280px (ratio 1.28) */
  --fs--1: clamp(0.831rem, 0.812rem + 0.087vw, 0.881rem);
  --fs-0: clamp(1rem, 0.951rem + 0.2174vw, 1.125rem);
  --fs-1: clamp(1.2rem, 1.106rem + 0.4174vw, 1.44rem);
  --fs-2: clamp(1.44rem, 1.282rem + 0.7011vw, 1.843rem);
  --fs-3: clamp(1.728rem, 1.481rem + 1.0978vw, 2.359rem);
  --fs-4: clamp(2.074rem, 1.703rem + 1.6457vw, 3.02rem);
  --fs-5: clamp(2.488rem, 1.949rem + 2.3957vw, 3.866rem);
  --fs-6: clamp(2.986rem, 2.219rem + 3.4109vw, 4.948rem);

  --font-display: "Alegreya", "Iowan Old Style", Georgia, serif;
  --font-body: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;

  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 0.4rem;
  --arch: 999px 999px 0.4rem 0.4rem; /* chapel-arch photo frame */
  --shadow: 0 16px 44px rgba(41, 0, 66, 0.12);
  --ray-grad: linear-gradient(90deg, var(--accent-700), var(--accent-500) 45%, var(--dawn) 100%);
}

/* ---- Base ---------------------------------------------------- */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0.2em 0 0.45em;
  letter-spacing: 0.002em;
}
h1 { font-size: var(--fs-6); max-width: 16ch; }
h2 { font-size: var(--fs-4); max-width: 24ch; }
h3 { font-size: var(--fs-2); }
h4 { font-size: var(--fs-1); }
p { margin: 0.2em 0 0.9em; max-width: 68ch; }
.lead { font-size: var(--fs-1); line-height: 1.5; max-width: 56ch; }
.fine { font-size: var(--fs--1); color: var(--ink-soft); }
.voice {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2);
  line-height: 1.35;
  color: var(--accent-700);
  max-width: 44ch;
}

a { color: var(--accent-600); text-decoration-thickness: from-font; text-underline-offset: 0.16em; }
a:hover { color: var(--accent-800); }
:focus-visible { outline: 3px solid var(--dawn); outline-offset: 2px; border-radius: 2px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-600);
  margin: 0 0 0.6rem;
}

/* ---- A11y utilities ------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0.8rem;
  background: var(--surface); color: var(--ink);
  padding: 0.75rem 1.1rem; z-index: 60; border-radius: var(--radius);
  box-shadow: var(--shadow); font-weight: 700;
}
.skip-link:focus { left: 0.8rem; }

/* ---- Proto banner (the one disclosure home) ------------------- */
.proto-banner {
  background: var(--accent-900);
  color: var(--accent-100);
  text-align: center;
  padding: 0.5rem var(--gutter);
  font-size: var(--fs--1);
}
.proto-banner a { color: #ffffff; }

/* ---- Masthead -------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(41, 0, 66, 0.04);
}
.masthead::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--ray-grad);
}
/* Sticky depth via scroll-state queries (design-radar trial, 2026-07-12):
   the ray line under the masthead casts a soft dusk shadow only while the
   header is actually stuck. Compositor-driven, no JS; browsers without
   scroll-state support keep the calm base shadow. */
@supports (container-type: scroll-state) {
  .masthead { container: psr-masthead / scroll-state; }
  @container psr-masthead scroll-state(stuck: top) {
    .masthead::after { box-shadow: 0 12px 22px -14px rgba(41, 0, 66, 0.45); }
  }
}
.masthead-inner {
  display: flex; align-items: center; gap: 1.1rem;
  padding-block: 0.65rem;
  flex-wrap: wrap;
}
.brand-lockup {
  display: flex; flex-direction: column; gap: 0.15rem;
  text-decoration: none; min-width: 10.5rem;
  view-transition-name: psr-lockup;
}
.brand-mark { width: clamp(8.2rem, 12vw, 9.8rem); height: auto; }
.brand-sub {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.menu-btn {
  display: none;
  border: 2px solid var(--accent-700); background: var(--surface);
  color: var(--accent-700); border-radius: var(--radius);
  padding: 0.6rem 1rem; font: inherit; font-weight: 700;
  min-height: 44px; min-width: 44px; cursor: pointer;
}

/* Native nav disclosure: the <details> ships open, so every primary-nav
   destination is reachable with zero JavaScript. display: contents lets the
   summary (the Menu button) and the nav participate in the masthead flex
   layout directly; nav.js only syncs the open state across the breakpoint. */
.nav-disclosure { display: contents; }
.nav-disclosure > summary { list-style: none; }
.nav-disclosure > summary::marker { content: ""; }
.nav-disclosure > summary::-webkit-details-marker { display: none; }

/* Omnibox — one box in the chrome, skinned for this world */
.omnibox {
  position: relative;
  display: flex; align-items: stretch;
  flex: 1 1 16rem; max-width: 26rem;
}
.omnibox input {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--accent-300);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent-50);
  padding: 0.55rem 0.9rem;
  font: inherit; color: var(--ink);
  appearance: none;
}
.omnibox input::placeholder { color: var(--ink-soft); opacity: 1; }
.omnibox input:focus { background: var(--surface); }
.omnibox button {
  min-height: 44px; min-width: 44px;
  border: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-700); color: #fff;
  font: inherit; font-weight: 700; padding-inline: 1rem;
  cursor: pointer;
}
.omnibox button:hover { background: var(--accent-800); }
/* Focus ring wraps the whole search unit: input and button read as one pill,
   so a ring on the input alone clips against the flush button. */
.omnibox:focus-within,
#search-form:focus-within { outline: 3px solid var(--dawn); outline-offset: 3px; border-radius: var(--radius); }
.omnibox input:focus-visible,
#search-form input[type="search"]:focus-visible { outline: none; }
.omnibox ul[role="listbox"] {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
  max-height: 60vh; overflow: auto;
}
.omnibox ul[role="listbox"]:empty { display: none; }
.omnibox li[role="option"] {
  padding: 0.55rem 0.7rem; border-radius: 0.3rem;
  cursor: pointer; font-size: var(--fs--1); font-weight: 600;
}
.omnibox li[role="option"]:hover,
.omnibox li[role="option"][aria-selected="true"] { background: var(--accent-100); color: var(--accent-900); }
.omnibox .omni-group-label {
  padding: 0.5rem 0.7rem 0.15rem;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dawn-text);
}
.omnibox .omni-ask {
  background: var(--accent-900); color: var(--accent-100);
  font-weight: 700;
}
.omnibox .omni-ask:hover, .omnibox .omni-ask[aria-selected="true"] { background: var(--accent-800); color: #fff; }
.omnibox .omni-empty { padding: 0.6rem 0.7rem; color: var(--ink-soft); font-size: var(--fs--1); }

/* Primary nav */
.primary-nav .nav-list {
  display: flex; align-items: center; gap: 0.15rem;
  margin: 0; padding: 0; list-style: none;
}
.primary-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.5rem 0.75rem;
  font-weight: 600; font-size: var(--fs--1);
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius);
}
.primary-nav a:hover { background: var(--accent-50); color: var(--accent-800); }
.primary-nav a[aria-current="page"] {
  color: var(--accent-800);
  box-shadow: inset 0 -3px 0 var(--dawn);
  border-radius: var(--radius) var(--radius) 0 0;
}
.primary-nav .nav-cta a {
  background: var(--dawn-text); color: #fff; font-weight: 700;
  padding-inline: 1.05rem; margin-left: 0.35rem;
}
.primary-nav .nav-cta a:hover { background: var(--dawn-deep); color: #fff; }
.omnibox--mobile { display: none; }

/* ---- The ray motif -------------------------------------------- */
/* Divider: a rule lit from one end, dawn breaking over the hill */
.ray-rule {
  border: 0; height: 3px; width: 100%;
  margin: clamp(1.6rem, 4vw, 2.8rem) 0;
  background: var(--ray-grad);
  border-radius: 2px;
}
.ray-rule--short { width: 6.5rem; margin-inline: 0; }

/* Stacked contact block (one detail per line, never a middot run-on) */
.contact-lines span { display: block; }
.contact-lines .contact-lines-label {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dawn-text); margin-bottom: 0.2rem;
}
.room-chapel .ray-rule, .room-olive .ray-rule {
  background: linear-gradient(90deg, var(--cream), var(--dawn) 55%, transparent 100%);
}

/* List marker: a small light-tick */
.ray-list { list-style: none; margin: 0.4rem 0 1rem; padding: 0; }
.ray-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.ray-list li::before {
  content: "";
  position: absolute; left: 0; top: calc(0.8em - 1.5px);
  width: 1rem; height: 3px; border-radius: 2px;
  background: var(--ray-grad);
}

/* The journey spine (homepage stations hang on this) */
.ray-line { position: relative; }
.ray-line::before {
  content: "";
  position: absolute; left: 1.05rem; top: 0; bottom: 0;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-700), var(--accent-500) 55%, var(--dawn) 100%);
}
.ray-station { position: relative; padding-left: 3.4rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); --station-bg: var(--paper); }
.room-chapel .ray-station { --station-bg: var(--accent-900); }
.room-olive .ray-station { --station-bg: var(--olive); }
/* The station sun: a cream core, a quiet gap, eight slim soft-edged rays
   rotated off the vertical so none fights the spine, and a room-colored
   backing disc so the line passes behind the sun, never through it. */
.ray-station::before {
  content: "";
  position: absolute; left: calc(1.05rem + 1.5px); top: 0.17rem;
  transform: translateX(-50%);
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background:
    radial-gradient(circle, var(--cream) 0 24%, rgba(255, 242, 168, 0.5) 27%, transparent 30%),
    radial-gradient(circle, transparent 0 30%, var(--station-bg) 32% 38%, transparent 40%),
    repeating-conic-gradient(from 0deg, transparent 0deg 14deg, var(--dawn) 17deg 27deg, transparent 30deg 45deg),
    radial-gradient(circle, var(--station-bg) 0 74%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, #000 0 66%, transparent 90%);
  mask-image: radial-gradient(circle, #000 0 66%, transparent 90%);
}
.ray-station-kicker {
  font-size: var(--fs--1); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dawn-text); margin-bottom: 0.3rem;
}

/* Empty states + 404 */
.ray-empty {
  position: relative;
  padding: 1.6rem 1.4rem 1.4rem 3.2rem;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
  max-width: 46rem;
}
.ray-empty::before {
  content: "";
  position: absolute; left: 1rem; top: 1.55rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 100%, var(--cream) 0 30%, rgba(255, 242, 168, 0.5) 34%, transparent 38%),
    radial-gradient(circle at 50% 100%, transparent 0 38%, var(--accent-50) 40% 48%, transparent 50%),
    conic-gradient(from -70deg at 50% 100%, transparent 0deg 8deg, var(--dawn) 10.5deg 17.5deg, transparent 20deg 36deg, var(--dawn) 38.5deg 45.5deg, transparent 48deg 64deg, var(--dawn) 66.5deg 73.5deg, transparent 76deg 92deg, var(--dawn) 94.5deg 101.5deg, transparent 104deg 120deg, var(--dawn) 122.5deg 129.5deg, transparent 132deg 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 0 74%, transparent 98%);
  mask-image: radial-gradient(circle at 50% 100%, #000 0 74%, transparent 98%);
}
.ray-empty p { margin: 0 0 0.5rem; }

/* Hover warmth (gated below in the motion block) */
.ray-warm { transition: none; }

/* ---- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.35rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent-700); color: #fff; }
.btn-primary:hover { background: var(--accent-800); color: #fff; }
.btn-dawn { background: var(--dawn-text); color: #fff; }
.btn-dawn:hover { background: var(--dawn-deep); color: #fff; }
.btn-on-dark { border: 2px solid var(--accent-200); background: transparent; color: #fff; }
.btn-on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-ghost { border-color: var(--accent-600); color: var(--accent-700); background: transparent; }
.btn-ghost:hover { background: var(--accent-50); color: var(--accent-800); }
.room-chapel .btn-ghost, .room-olive .btn-ghost, .hero .btn-ghost { border-color: var(--accent-200); color: #fff; }
.room-chapel .btn-ghost:hover, .room-olive .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ---- Rooms (register changes from one seed hue + the olive ground) */
.room { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.room-chapel {
  background: var(--accent-900);
  color: var(--accent-100);
  box-shadow: inset 0 1px rgba(255, 242, 168, 0.18), inset 0 -1px rgba(255, 242, 168, 0.12);
}
.room-chapel h2, .room-chapel h3 { color: #fff; }
.room-chapel a { color: var(--accent-300); }
.room-chapel a:hover { color: var(--accent-200); }
.room-chapel .eyebrow { color: var(--cream); }
.room-chapel .voice { color: var(--accent-200); }
.room-olive {
  background: var(--olive);
  color: var(--olive-ink);
  box-shadow: inset 0 1px rgba(255, 242, 168, 0.12), inset 0 -1px rgba(255, 242, 168, 0.08);
}
.room-olive h2, .room-olive h3 { color: #fff; }
.room-olive a { color: var(--cream); }
.room-olive a:hover { color: #fff; }
.room-olive .eyebrow { color: var(--cream); }
.room-dawn {
  background: linear-gradient(115deg, var(--accent-800), var(--accent-700) 42%, var(--dawn-text) 100%);
  color: #fff;
}
.room-dawn h2 { color: #fff; }
.room-dawn a { color: var(--cream); }

/* ---- Hero: dawn wash over Holy Hill ---------------------------- */
.hero {
  position: relative;
  min-height: clamp(30rem, 72vh, 42rem);
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: clip;
  background: var(--accent-900);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(41, 0, 66, 0.28), rgba(41, 0, 66, 0.62) 78%),
    linear-gradient(25deg, rgba(41, 0, 66, 0.85) 0%, rgba(82, 28, 120, 0.5) 45%, rgba(242, 79, 0, 0.28) 100%);
}
.hero-copy {
  position: relative; z-index: 1;
  padding-block: clamp(2.4rem, 6vw, 4rem);
  max-width: 44rem;
}
.hero-copy .eyebrow { color: var(--cream); }
.hero-copy h1 { color: #fff; text-wrap: balance; }
.hero-copy .lead { color: rgba(255, 255, 255, 0.94); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }

/* ---- Photos: the arch system ----------------------------------- */
.arch-photo {
  border-radius: var(--arch);
  overflow: clip;
  position: relative;
  aspect-ratio: 3 / 4;
}
.arch-photo img { width: 100%; height: 100%; object-fit: cover; }
.arch-photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--arch);
  background: linear-gradient(25deg, rgba(82, 28, 120, 0.32), transparent 55%, rgba(242, 79, 0, 0.14));
  mix-blend-mode: multiply;
}
.arch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
}
.arch-row .arch-photo:nth-child(2n) { transform: translateY(1.6rem); }
.arch-row--tight { max-width: 56rem; }
.arch-row--tight .arch-photo { aspect-ratio: 16 / 10; border-radius: var(--radius); }
figure.arch-fig { margin: 0; }
figure.arch-fig figcaption { font-size: var(--fs--1); color: var(--ink-soft); padding-top: 0.6rem; }
.room-chapel figure.arch-fig figcaption, .room-olive figure.arch-fig figcaption { color: inherit; }

/* Historic Pathway hero: keep the building visible, but give the question a
   real reading surface instead of asking white type to fight the masonry. */
.hero--dawn::after {
  background: rgba(41, 0, 66, 0.24);
}
.hero--dawn .hero-copy {
  max-width: min(50rem, calc(100% - 2rem));
  margin-block: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(31, 0, 49, 0.9);
  border-left: 5px solid var(--cream);
  box-shadow: 0 18px 44px rgba(14, 0, 24, 0.28);
}
.hero--dawn .hero-copy h1 {
  max-width: 14ch;
  font-size: clamp(2.65rem, 6vw, 4.6rem);
}
.hero--dawn .hero-copy .lead { max-width: 46ch; }
}

/* Pillar section identity (collective page) */
.pillar-head { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); margin-bottom: 1rem; }
.pillar-head .pillar-mark { width: clamp(5.5rem, 10vw, 7.5rem); flex: none; }
.pillar-head > div { min-width: 0; }
.pillar-head h2 { margin-bottom: 0.2em; font-size: clamp(2.15rem, 5vw, var(--fs-4)); text-wrap: balance; }
.collective-intro-photo { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.collective-intro-photo .arch-photo { display: block; aspect-ratio: 16 / 7; border-radius: var(--radius); }
.about-campus-grid { align-items: stretch; }
.about-campus-grid .arch-photo { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); }
.about-campus-grid figure.arch-fig { display: flex; flex-direction: column; }
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.intro-split .arch-photo { aspect-ratio: 16 / 10; border-radius: 2px; }
.people-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 5vw, 4rem);
  margin-top: 1.5rem;
  border-top: 2px solid currentColor;
}
.people-roster article { padding: 1.2rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.people-roster h3 { margin: 0 0 0.25rem; font-size: var(--fs-1); }
.people-roster p { margin: 0.35rem 0 0; }
.people-roster .people-role { color: var(--ink-soft); font-size: var(--fs--1); font-weight: 700; }
.room-chapel .people-roster .people-role, .room-olive .people-roster .people-role { color: var(--accent-200); }
.room-chapel .fine, .room-olive .fine { color: var(--accent-200); }
.heritage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(13rem, 0.65fr);
  gap: clamp(1rem, 3vw, 1.8rem);
  margin-top: 2rem;
}
.heritage-figure {
  margin: 0;
  padding: clamp(0.55rem, 1.2vw, 0.85rem);
  background: #ffffff;
  color: var(--ink);
  border: 1px solid #c8cec7;
  box-shadow: 0 10px 30px rgba(14, 29, 22, 0.18);
}
.heritage-figure--wide { grid-row: span 2; align-self: stretch; }
.heritage-figure img { width: 100%; height: auto; object-fit: cover; object-position: center; }
.heritage-figure--wide img { height: 100%; max-height: 31rem; }
.heritage-figure--portrait img { max-height: 15rem; object-fit: contain; background: #eef1ed; }
.heritage-figure figcaption {
  padding: 0.65rem 0.15rem 0.1rem;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs--1);
  font-weight: 600;
  line-height: 1.4;
}

/* Square library tiles (Kwaray course art only) */
.mosaic-tile {
  border-radius: var(--radius) var(--radius) 0 0; overflow: clip;
  aspect-ratio: 1; position: relative;
  background: var(--olive-deep);
}
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Content shapes (deliberately different per type) ----------- */
/* Programs: ledger rows, not cards */
.program-ledger { border-top: 2px solid var(--ink); }
.program-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2.2fr) repeat(3, minmax(6.5rem, 1fr)) auto;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.program-row:hover { background: var(--accent-50); }
.program-row .program-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1); color: var(--accent-800); }
.program-row .program-fact { font-size: var(--fs--1); color: var(--ink-soft); }
.program-row .program-go { font-size: var(--fs-1); color: var(--accent-700); white-space: nowrap; }

/* Courses: square mosaic tiles with an olive plinth */
.course-tile {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-radius: var(--radius);
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--line);
}
.course-tile .course-plinth {
  background: var(--olive); color: var(--olive-ink);
  padding: 0.8rem 1rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  flex: 1;
}
.course-tile h2, .course-tile h3 { font-size: var(--fs-1); color: #fff; margin: 0; max-width: none; }
.course-tile .course-meta { font-size: var(--fs--1); color: var(--cream); }
.course-tile:hover { border-color: var(--accent-400); box-shadow: var(--shadow); }

/* Pathway steps: milestones, not cards */
.pathway-steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: step; }
.pathway-step {
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--accent-200);
  counter-increment: step;
}
.pathway-step::before {
  content: counter(step);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-2); color: var(--dawn);
  line-height: 1;
}
.pathway-step .step-what { font-weight: 700; font-size: var(--fs-1); font-family: var(--font-display); }
.pathway-step .step-why { color: var(--ink-soft); margin: 0.15rem 0 0.4rem; }
.step-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.45rem 1.35rem;
  margin: 0.9rem 0 1.4rem;
}
.pathway-step .step-facts { margin: 0.65rem 0 0; }
.fact-chip {
  display: block;
  font-size: var(--fs--1); font-weight: 650;
  color: var(--accent-900);
  padding: 0.6rem 0 0.25rem;
  margin: 0;
  border-top: 1px solid var(--line);
}
.fact-chip + .fact-chip { border-left: 0; padding-left: 0; }
.fact-chip--dawn { color: var(--dawn-text); }
.course-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0;
  margin: 1.5rem 0;
  border-block: 1px solid var(--line);
}
.course-facts > div { padding: 0.9rem 1rem 0.9rem 0; }
.course-facts dt { color: var(--ink-soft); font-size: var(--fs--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.course-facts dd { margin: 0.2rem 0 0; color: var(--ink); }
.course-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: 2rem;
}
.course-masthead .course-hero-art { width: 100%; max-width: 28rem; margin: 0; justify-self: end; border-radius: var(--radius); }
.apply-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  margin-top: 2rem;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  background: var(--accent-50);
  border-left: 4px solid var(--dawn);
}
.apply-contact-card .arch-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }

.sequence-summary {
  display: grid; gap: 0.2rem;
  margin: 1.1rem 0 1.5rem;
  padding: 1rem 0;
  border-block: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.sequence-summary strong {
  font-family: var(--font-display); font-size: var(--fs-2); color: #fff;
}
.sequence-summary span { color: var(--accent-200); }

/* Courses filter input (the library's own filter, not a second omnibox) */
[data-courses-q] {
  width: min(26rem, 100%);
  min-height: 44px;
  border: 1.5px solid var(--accent-300);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  font: inherit;
  margin-bottom: 0.4rem;
}
[data-courses-q]:focus { border-color: var(--accent-600); }

/* Filter chips (composer + courses) */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 1rem; }
.chip {
  min-height: 44px;
  border: 1.5px solid var(--accent-400); border-radius: 999px;
  background: var(--surface); color: var(--accent-800);
  padding: 0.5rem 1.1rem; font: inherit; font-weight: 600; font-size: var(--fs--1);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent-700); border-color: var(--accent-700); color: #fff;
}
.chip:hover { border-color: var(--accent-700); }

[data-facet="pillar"] {
  display: inline-grid; grid-template-columns: 2.25rem auto;
  align-items: center; gap: 0.65rem;
  min-height: 52px; padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  border-radius: var(--radius);
}
[data-facet="pillar"]::before {
  content: ""; width: 2.25rem; aspect-ratio: 1;
  border-radius: calc(var(--radius) * 0.65);
  background-position: center; background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(41, 0, 66, 0.14);
}
[data-facet="pillar"][data-value="theological-imagination"]::before { background-image: url("img/pillar-theological-imagination.jpg"); }
[data-facet="pillar"][data-value="contemplative-activism"]::before { background-image: url("img/pillar-contemplative-activism.jpg"); }
[data-facet="pillar"][data-value="intentional-creation"]::before { background-image: url("img/pillar-intentional-creation.jpg"); }
[data-facet="pillar"][data-value="wisdom-based-leadership"]::before { background-image: url("img/pillar-wisdom-based-leadership.jpg"); }
.chip-label {
  font-size: var(--fs--1); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-top: 0.9rem;
}

/* ---- Forms (apply flow + signup) -------------------------------- */
fieldset[data-apply-step] {
  border: 1.5px solid var(--accent-200);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.6rem 1.7rem 1.8rem;
  max-width: 36rem;
  margin: 0;
}
fieldset[data-apply-step] h2, fieldset[data-apply-step] h3 { margin-top: 0; }
fieldset[data-apply-step] h2:focus, fieldset[data-apply-step] h3:focus { outline: none; }
[data-apply-done] {
  border-left: 6px solid var(--dawn);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  max-width: 36rem;
  box-shadow: var(--shadow);
}
.form-progress { max-width: 36rem; }
.field { margin-bottom: 1.1rem; max-width: 30rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px;
  border: 1.5px solid var(--accent-300); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 0.6rem 0.85rem; font: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-600); }
.field .field-help { font-size: var(--fs--1); color: var(--ink-soft); margin-top: 0.25rem; }
.field.field-error input { border-color: var(--dawn-text); background: #fff7f2; }
.field .field-error-note {
  display: flex; gap: 0.4rem; align-items: baseline;
  color: var(--dawn-text); font-weight: 600; font-size: var(--fs--1);
  margin-top: 0.3rem;
}
.form-progress {
  display: flex; gap: 0.4rem; align-items: center;
  margin-bottom: 1.4rem; list-style: none; padding: 0;
}
.form-progress li {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--accent-100);
}
.form-progress li[data-done="true"] { background: var(--ray-grad); }
.form-progress li[data-current="true"] { background: var(--accent-500); }
.save-note {
  background: var(--accent-50); border: 1px solid var(--accent-200);
  border-radius: var(--radius); padding: 0.8rem 1rem;
  font-size: var(--fs--1); max-width: 30rem;
}

.signup-form { display: flex; gap: 0; max-width: 22rem; }
.signup-form input {
  flex: 1; min-height: 44px;
  border: 1.5px solid var(--accent-400); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0.55rem 0.8rem; font: inherit;
  background: var(--surface); color: var(--ink);
}
.signup-form button {
  min-height: 44px; border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--dawn-text); color: #fff; font: inherit; font-weight: 700;
  padding-inline: 1rem; cursor: pointer;
}
.signup-form button:hover { background: var(--dawn-deep); }

/* ---- Footer ------------------------------------------------------ */
.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  background: var(--olive-deep);
  color: var(--olive-ink);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 4px solid transparent;
  border-image: var(--ray-grad) 1;
}
main:has(> .next-step-band:last-child) + .site-footer { margin-top: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2.2rem;
}
.footer-brand img { background: #fff; padding: 0.55rem 0.8rem; border-radius: var(--radius); }
.footer-mission { font-family: var(--font-display); font-style: italic; font-size: var(--fs-1); color: #fff; margin-top: 1rem; }
.footer-contact { font-size: var(--fs--1); }
.footer-heading {
  font-family: var(--font-body); font-size: var(--fs--1);
  font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 0.7rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--olive-ink); }
.site-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 1rem; margin-top: 0.9rem !important; }
.footer-legal {
  border-top: 1px solid rgba(233, 237, 228, 0.18);
  padding-block: 1.1rem;
  font-size: var(--fs--1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
}
.footer-legal a { color: var(--cream); }

/* ---- Search / Ask destination page ------------------------------ */
.search-hero { padding-block: clamp(2rem, 5vw, 3.2rem) 0.6rem; }
#search-form {
  display: flex;
  align-items: stretch;
  max-width: 44rem;
  margin-block: 1.2rem 1rem;
}
#search-form input[type="search"] {
  flex: 1;
  min-height: 54px;
  font-size: var(--fs-1);
  border: 2px solid var(--accent-400);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-family: inherit;
  appearance: none;
}
#search-form input[type="search"]:focus { border-color: var(--accent-700); }
#search-form button {
  min-height: 54px;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-700);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-0);
  padding-inline: 1.6rem;
  cursor: pointer;
}
#search-form button:hover { background: var(--accent-800); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.answer-panel {
  background: var(--surface);
  border: 1.5px solid var(--accent-300);
  border-left: 6px solid var(--dawn);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-block: 1.2rem;
  max-width: 52rem;
  box-shadow: var(--shadow);
}
.answer-panel .answer-text { font-size: var(--fs-1); line-height: 1.55; max-width: 60ch; }
.answer-hedge { font-size: var(--fs--1); color: var(--ink-soft); margin-bottom: 0.4rem; }
.source-cards { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.source-card {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper);
  padding: 0.45rem 1rem;
  font-size: var(--fs--1); font-weight: 600;
  color: var(--accent-800); text-decoration: none;
}
.source-card:hover { border-color: var(--accent-400); background: var(--accent-50); }
.results-groups { margin-top: 1.4rem; }
.result-group-title {
  font-size: var(--fs--1); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dawn-text); margin: 1.6rem 0 0.5rem;
}
.result-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.result-list li { border-bottom: 1px solid var(--line); }
.result-list a {
  display: block; padding: 0.85rem 0.3rem;
  text-decoration: none; color: inherit;
}
.result-list a:hover { background: var(--accent-50); }
.result-list .result-title { font-weight: 700; color: var(--accent-800); }
.result-list .result-body { font-size: var(--fs--1); color: var(--ink-soft); margin: 0.15rem 0 0; }

/* Browse-all asks (search page pre-query body) */
.browse-asks { margin-top: 2.2rem; max-width: 52rem; }
.ask-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 0.6rem;
  padding: 0;
}
.ask-item summary {
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  padding: 0.9rem 1.1rem;
  color: var(--accent-800);
  list-style-position: inside;
}
.ask-item summary:hover { background: var(--accent-50); border-radius: var(--radius); }
.ask-item[open] summary { border-bottom: 1px solid var(--line); }
.ask-item p { padding: 0.8rem 1.1rem 0.2rem; margin: 0 0 0.6rem; }
.ask-item .source-cards { padding: 0 1.1rem 1rem; }

/* ---- Ecosystem constellation ------------------------------------ */
.eco-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 3vw, 1.8rem);
  margin-block: 1.6rem;
  position: relative;
  padding-top: 1rem;
}
/* The ecosystem reads as one branched ray, not four floating boxes
   (2026-07-12 critique): a lit branch runs over the row, each node hangs
   from it on a short stub, and PSR carries the dawn-burst source. */
.eco-map::before {
  content: "";
  position: absolute; top: 0; left: 3%; right: 3%;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cream), var(--dawn) 55%, rgba(242, 79, 0, 0.28) 100%);
}
.eco-node::before {
  content: "";
  position: absolute; top: -0.95rem; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 0.95rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--dawn), rgba(242, 79, 0, 0.25));
}
.eco-node[data-eco="psr"]::after {
  content: "";
  position: absolute; top: -1.42rem; left: 50%;
  transform: translateX(-50%);
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: radial-gradient(circle, var(--cream) 0 30%, var(--dawn) 36% 60%, transparent 68%);
}
.eco-node {
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  border: 1.5px solid var(--line);
  background: var(--surface);
  position: relative;
}
/* Four different rooms, not one box color-swapped: PSR is the established
   institution, PSRC a spark-gradient banner card, Kwaray its own dark-olive
   room, GTU an open outline (the consortium around them all). */
.eco-node[data-eco="psr"] {
  border-radius: 2px;
  background: var(--surface);
  border-color: var(--accent-300);
  border-top: 6px solid var(--accent-700);
  padding: 1.7rem 1.6rem 1.5rem;
  text-align: left;
}
.eco-node[data-eco="psr"] h3 { max-width: 18ch; font-size: clamp(1.5rem, 2.3vw, 2rem); }
.eco-node[data-eco="psrc"] {
  border: 0;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--spark), var(--accent-500)) border-box;
  border: 3px solid transparent;
}
.eco-node[data-eco="kwaray"] {
  background:
    radial-gradient(120% 100% at 90% -20%, rgba(255, 242, 168, 0.12), transparent 55%),
    var(--olive);
  color: var(--olive-ink);
  border-color: var(--olive-deep);
}
.eco-node[data-eco="kwaray"] h3 { color: #fff; }
.eco-node[data-eco="kwaray"] a { color: var(--cream); }
.eco-node[data-eco="kwaray"] .eco-for { color: var(--cream); }
.eco-node[data-eco="gtu"] {
  background: transparent;
  border: 2px dashed var(--accent-400);
}
.eco-node h3 { margin-top: 0; }
.eco-node .eco-for { font-weight: 700; color: var(--dawn-text); font-size: var(--fs--1); text-transform: uppercase; letter-spacing: 0.1em; }
/* Light-bg nodes hold their own ink even inside dark rooms */
.eco-node[data-eco="psr"], .eco-node[data-eco="psrc"] { color: var(--ink); }
.room-chapel .eco-node[data-eco="psr"] h3, .room-olive .eco-node[data-eco="psr"] h3,
.room-chapel .eco-node[data-eco="psrc"] h3, .room-olive .eco-node[data-eco="psrc"] h3 { color: var(--accent-800); }
.room-chapel .eco-node[data-eco="psr"] a, .room-olive .eco-node[data-eco="psr"] a,
.room-chapel .eco-node[data-eco="psrc"] a, .room-olive .eco-node[data-eco="psrc"] a { color: var(--accent-700); }
.room-chapel .eco-node[data-eco="gtu"] .eco-for, .room-olive .eco-node[data-eco="gtu"] .eco-for { color: var(--cream); }
.eco-node:hover, .eco-node:focus-within { box-shadow: var(--shadow); border-color: var(--accent-400); }

/* ---- Stats / proof rows ------------------------------------------ */
.proof-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-block: 1.4rem;
}
.proof-stat .stat-number {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-4); line-height: 1; color: var(--dawn);
}
.room-chapel .proof-stat .stat-number, .room-olive .proof-stat .stat-number { color: var(--cream); }
.proof-stat .stat-what { font-size: var(--fs--1); margin-top: 0.35rem; }

/* ---- Sticky next-step band (detail pages) ------------------------ */
.next-step-band {
  background: var(--accent-900); color: var(--accent-100);
  padding: 1.15rem var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap;
  border-top: 3px solid var(--dawn);
}
.next-step-band p { margin: 0; font-weight: 600; }
.next-step-band > .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem 1.4rem; flex-wrap: wrap;
}

@media (max-width: 540px) {
  .next-step-band { padding-block: 1.4rem; }
  .next-step-band > .wrap { align-items: flex-start; flex-direction: column; }
  .next-step-band .btn { width: auto; padding: 0.7rem 1rem; }
  .proof-row { grid-template-columns: 1fr; }
}

/* ---- 404 ---------------------------------------------------------- */
.tmpl-404 main { min-height: 55vh; }

/* ---- Motion (opt-in only; still is the default) ------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ray-warm { transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease, background-color 220ms ease; }
  .course-tile:hover { transform: translateY(-3px); }
  .eco-node:hover { transform: translateY(-3px); }
  .arch-photo::after { transition: opacity 300ms ease; }
  .arch-photo:hover::after { opacity: 0.45; }
  /* The dawn climbs the hill: pure-CSS scroll-driven journey (no JS).
     Each station rises as it enters view, and a small dawn light travels
     the spine as the journey scrolls toward "Begin." Degrades to the
     complete static page wherever animation-timeline is unsupported. */
  @supports (animation-timeline: view()) {
    .ray-station {
      animation: psr-station-rise 1ms ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .ray-line { view-timeline: --psr-ray block; }
    .ray-line::after {
      content: "";
      position: absolute; left: calc(1.05rem + 1.5px); top: 0;
      width: 15px; height: 15px; border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, var(--cream) 0 24%, rgba(255, 242, 168, 0.85) 30%, var(--dawn) 40% 52%, rgba(242, 79, 0, 0.35) 58%, transparent 68%);
      box-shadow: 0 0 12px 2px rgba(242, 79, 0, 0.4);
      animation: psr-ray-descend 1ms linear both;
      animation-timeline: --psr-ray;
      animation-range: cover 10% cover 90%;
    }
    @keyframes psr-station-rise {
      from { transform: translateY(14px); }
      to { transform: none; }
    }
    @keyframes psr-ray-descend {
      from { top: 0; }
      to { top: 100%; }
    }
  }
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .proto-banner, .masthead, .site-footer, .next-step-band { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 62rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .program-row { grid-template-columns: 1fr auto; }
  .program-row .program-fact { display: none; }
}
@media (max-width: 52rem) {
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .omnibox--desktop { display: none; }
  .omnibox--mobile { display: flex; max-width: none; margin-bottom: 0.9rem; }
  .primary-nav {
    width: 100%;
    padding: 0.9rem 0 0.6rem;
    border-top: 1px solid var(--line);
  }
  .nav-disclosure:not([open]) .primary-nav { display: none; }
  .primary-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .primary-nav a { min-height: 48px; font-size: var(--fs-0); }
  .arch-row .arch-photo:nth-child(2n) { transform: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 26rem; }
  .pillar-head { align-items: flex-start; }
  .pillar-head .pillar-mark { width: 5.5rem; }
  .course-masthead, .apply-contact-card, .intro-split { grid-template-columns: 1fr; }
  .course-masthead .course-hero-art { justify-self: start; max-width: 24rem; }
  .people-roster { grid-template-columns: 1fr; }
  .heritage-grid { grid-template-columns: 1fr; }
  .heritage-figure--wide { grid-row: auto; }
}