/* ============================================================
   Homepage stylesheet — the only stylesheet index.html loads.
   (Other pages still use styles.css; this file owns the homepage
   so there is one design layer instead of override wars.)

   System: etched-atlas editorial. Paper surfaces, hairline rules,
   one serif display face and one sans text face (both set as
   variables so ?fonts can swap them), and a single engraved globe
   behind the hero. Structure comes from spacing and rules, not
   nested panels.
   ============================================================ */

:root {
  --paper: #f5f2e9;
  --paper-2: #fbf9f3;
  --paper-rgb: 245, 242, 233;
  --paper-2-rgb: 251, 249, 243;
  /* Default palette: the seal's forest green anchors the brand and the
     complete hero headline. Blue is reserved for interaction; gold is a
     small editorial/status accent. Open ?colors to compare alternatives. */
  --ink: #1f4229;
  --ink-rgb: 31, 66, 41;
  --copy: #43584e;
  --muted: #617168;
  --ocean: #2a5a70;
  --interactive-rgb: 42, 90, 112;
  --sage: #1f4229;
  --sage-wash: #e2e8d9;
  --ochre: #8a5e0a;
  --line: #d8d2c2;
  --line-soft: #e6e1d3;
  --on-ink: #fffdf7;
  --panel: #fffdf7;
  --shadow-rgb: 28, 49, 43;
  --dot-paper: #f9f6ec;
  --glass-tint: rgba(251, 249, 243, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.62);
  --glass-edge-soft: rgba(255, 255, 255, 0.18);
  --glass-shadow: rgba(28, 49, 43, 0.1);
  --glass-glow: rgba(255, 255, 255, 0.28);

  --globe-ink-rgb: 28, 49, 43;
  --globe-limb-rgb: 28, 49, 43;
  --globe-ocean-center: #eae5d4;
  --globe-ocean-edge: #dcd5c0;
  --globe-land: #f4efde;
  --globe-land-light: #f5f0df;
  --globe-land-dark: #ddd3bb;
  --globe-coast-alpha: 0.42;
  --globe-rim-alpha: 0.5;
  --globe-limb-alpha: 0.1;

  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --content: 84rem;
  --gutter: max(1.5rem, calc((100vw - var(--content)) / 2));
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  background: var(--paper);
  color-scheme: light;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  padding-top: 4.25rem;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(var(--interactive-rgb), 0.18); }

a { color: var(--ocean); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(var(--interactive-rgb), 0.35);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; }

/* legacy hook from script.js's scroll-reveal: everything is simply
   visible; entrances never gate content */
.reveal { opacity: 1; }

/* ── header ─────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  /* An opaque header is materially more stable over the continuously
     repainting fixed globe than a live backdrop-filter surface. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - 2.5rem, var(--content));
  min-height: 4.25rem;
  margin-inline: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}

.wordmark-seal { display: block; flex: none; opacity: 0.92; }

.site-nav { display: flex; align-items: center; gap: 0.6rem; }

.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 650 0.75rem/1 var(--font-text);
  white-space: nowrap;
  cursor: pointer;
}

.motion-toggle-icon { display: block; flex: none; width: 20px; height: 20px; }

.motion-toggle:hover { color: var(--ocean); }
.motion-toggle[aria-pressed="true"] { color: var(--ochre); }

.site-nav-link {
  padding: 0.55rem 0.45rem;
  color: var(--copy);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}

.site-nav-link:hover { color: var(--ocean); }

/* ── buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.66rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-text);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}

.btn:hover { background: var(--ocean); border-color: var(--ocean); color: var(--on-ink); }

.btn-small { min-height: 2.4rem; padding: 0.55rem 0.9rem; font-size: 0.82rem; }

.btn-small-ghost {
  background: transparent;
  border-color: rgba(var(--ink-rgb), 0.42);
  color: var(--ink);
}

.btn-small-ghost:hover {
  background: rgba(var(--ink-rgb), 0.06);
  border-color: var(--ink);
  color: var(--ink);
}

.btn-big { min-height: 3rem; padding: 0.85rem 1.35rem; font-size: 0.92rem; }

/* ── shared section chrome ──────────────────────────────── */

main { position: relative; z-index: 1; }
main#top { scroll-margin-top: 7rem; }

.section-kicker,
.globe-stage-kicker,
.school-table-kicker {
  margin: 0 0 1.1rem;
  color: var(--ochre);
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ── hero ───────────────────────────────────────────────── */

.globe-stage {
  position: relative;
  isolation: isolate;
  color: var(--ink);
}

.globe-stage-atmosphere { display: none; }

.globe-stage-header {
  --hero-title-protection: 0.68;
  --hero-lede-protection: 0.78;
  --hero-detail-protection: 0.82;
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: calc(100svh - 4.25rem);
  margin: 0;
  /* same gutter as every band below, so the whole page shares one left edge */
  padding: clamp(4rem, 9vh, 6.5rem) var(--gutter) clamp(6rem, 12vh, 9rem);
  /* the header spans the whole hero, but only its content should catch
     the mouse — the globe's dots underneath stay hoverable */
  pointer-events: none;
  isolation: isolate;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.globe-stage-header > * { pointer-events: auto; }

/* A cached canvas measures the actual rendered line fragments, following the
   UCSB reference treatment. It softens only the globe behind copy, never the
   content itself, and sits below every interactive hero element. */
.hero-copy-protection-canvas {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

/* The school line has its own compositor-only protection field. Its base box
   follows the settled wordmark; only scaleX animates between landings, so the
   ocean changes gradually without re-running the canvas blur every frame. */
.hero-wordmark-protection {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  background: rgba(var(--paper-rgb), 0.7);
  filter: blur(44px);
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.globe-stage-lede { color: var(--ink); font-weight: 500; }

.globe-stage-actions .advisor-signup-title,
.globe-stage-actions .advisor-signup-note,
.globe-stage-actions .advisor-signup-status,
.hero-stats,
.globe-stage-funded {
  color: var(--ink);
  text-shadow: none;
}

.globe-stage-title {
  max-width: 11em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.8vw, 5.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

/* The school wordmark lives on its own, consistently sized line. The
   artwork is aligned inside this line instead of borrowing a text
   baseline, which keeps very different university marks from pulling the
   lines above and below them around. */
.globe-school-line {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.18em;
  margin: -0.04em 0 -0.02em;
  overflow: visible;
  white-space: nowrap;
}

.school-rotator { color: var(--sage); }

/* ── cylindrical school reel (script.js builds this DOM) ──
   The width is fixed to the widest mark in the 25-school lineup. That keeps
   a short destination from clipping a longer outgoing school. The viewport
   is a narrow window onto a much larger wheel; only the middle and fragments
   of the more distant, faded neighbours are meant to be visible. */
.rotator-stage {
  position: relative;
  display: block;
  flex: 0 0 min(var(--reel-width, 11em), calc(100vw - var(--gutter) - 1.25rem));
  width: min(var(--reel-width, 11em), calc(100vw - var(--gutter) - 1.25rem));
  height: 1.9em;
  margin: 0;
  padding-inline: 0.09em;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint style;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, #000 28%, #000 72%, transparent 100%);
}

.rotator-3d {
  /* Kept as a semantic hook. The cylinder is projected mathematically into
     2D so it reads as real rotation without WebKit's unstable 3D layers. */
}

.rotator-item {
  position: absolute;
  top: 50%;
  left: 0.09em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 0.18em);
  height: 0.8em;
  white-space: nowrap;
  line-height: 1;
  transform-origin: 0 50%;
  transform:
    translateY(-50%)
    translateY(var(--slot-y, 0em))
    scale(var(--slot-scale-x, 1), var(--slot-scale-y, 1));
  opacity: var(--slot-opacity, 0);
  pointer-events: none;
}

/* Exact university wordmark artwork. The shared alpha-bound rule in script.js
   gives every mark the same visible-letter height and center; width remains
   intrinsic, so no mark is stretched or squeezed. */
.rotator-logo {
  display: block;
  width: var(--wordmark-width, 8em);
  max-width: calc(100% - 0.14em);
  max-height: 0.8em;
  height: auto;
  aspect-ratio: var(--wordmark-aspect, auto);
  margin: 0;
  object-fit: contain;
  object-position: left center;
  translate: 0 var(--wordmark-shift-y, 0);
  filter: drop-shadow(0 0 2px rgba(var(--paper-rgb), 0.9));
}

/* Used only if a wordmark image cannot load. */
.rotator-wordmark {
  display: inline-block;
  font-size: 0.98em;
  line-height: 1.06;
  max-width: 100%;
  white-space: nowrap;
}

.type-caret {
  display: inline-block;
  width: 0.045em;
  height: 0.78em;
  margin-left: 0.05em;
  background: var(--sage);
  vertical-align: -0.06em;
  animation: caret-blink 1.1s steps(1) infinite;
}

/* the caret exists only for typewriter mode; display:inline-block above
   would otherwise defeat the hidden attribute the script sets */
.type-caret[hidden] { display: none; }

@keyframes caret-blink { 50% { opacity: 0; } }

.globe-change-line { display: block; color: var(--sage); }

.globe-stage-lede {
  max-width: min(34rem, 42vw);
  margin: 1.7rem 0 0;
  color: var(--copy);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.65;
}

.globe-stage-actions {
  width: min(100%, 34rem);
  margin-top: 2rem;
}

.advisor-signup-form {
  width: min(100%, 42rem);
}

.globe-stage-actions .advisor-signup-form {
  display: block;
}

.advisor-signup-title {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font: 650 1.02rem/1.25 var(--font-text);
}

.advisor-signup-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: stretch;
  padding: 0.3rem;
  border: 1px solid rgba(var(--ink-rgb), 0.38);
  border-radius: 6px;
  background: rgba(var(--paper-2-rgb), 0.88);
  box-shadow: 0 1rem 2.8rem rgba(var(--shadow-rgb), 0.1);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.advisor-signup-row:focus-within {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(var(--interactive-rgb), 0.16), 0 1rem 2.8rem rgba(var(--shadow-rgb), 0.1);
}

.advisor-signup-email {
  width: 100%;
  min-width: 0;
  min-height: 3.45rem;
  padding: 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1rem/1.2 var(--font-text);
}

.advisor-signup-email::placeholder {
  color: var(--muted);
  opacity: 0.88;
}

.advisor-signup-submit {
  width: auto;
  min-width: 9.2rem;
  min-height: 3.45rem;
  gap: 0.35rem;
  padding: 0 0.95rem;
  font-size: 0.82rem;
  line-height: 1;
}

.advisor-signup-submit span {
  display: block;
  transition: transform 150ms ease;
}

.advisor-signup-submit:hover span,
.advisor-signup-submit:focus-visible span {
  transform: translateX(0.16rem);
}

.advisor-signup-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.advisor-signup-row[hidden],
.advisor-signup-note[hidden] {
  display: none;
}

.advisor-signup-note,
.advisor-signup-status {
  margin: 0.65rem 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.advisor-signup-status {
  color: var(--ink);
  font-weight: 600;
}

.advisor-signup-status:empty { display: none; }

.advisor-signup-honey {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.hero-stats {
  margin: 2.4rem 0 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.funded-by {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  color: var(--ink);
}

.funded-by-label { color: var(--ink); font-size: 0.78rem; font-weight: 600; }

.funded-by img { display: block; filter: grayscale(1) contrast(1.12); opacity: 0.9; }

/* ── the globe ──────────────────────────────────────────── */

.map-figure {
  position: fixed;
  z-index: 0;
  top: clamp(2.5rem, 7vh, 5.5rem);
  right: auto;
  left: 0;
  width: 100vw;
  margin: 0;
  contain: layout paint style;
  isolation: isolate;
  backface-visibility: hidden;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

/* The pointer can be over headline copy while the sphere is visually behind
   it, so JS supplies the circular hit test and these root states supply the
   cursor. A non-drag click does not disable selection; only a gesture that has
   crossed the small movement threshold enters the global no-selection state. */
html.globe-can-grab,
html.globe-can-grab body { cursor: grab; }

html.globe-node-hover,
html.globe-node-hover body,
html.globe-node-hover body * { cursor: pointer; }

html.globe-grab-pending,
html.globe-grab-pending body,
html.globe-is-dragging,
html.globe-is-dragging body,
html.globe-is-dragging body * { cursor: grabbing !important; }

/* A globe gesture may leave the fixed map and cross the headline. Keep the
   gesture in pan mode until pointer-up instead of turning it into native text
   selection halfway through. */
html.globe-is-dragging,
html.globe-is-dragging body,
html.globe-is-dragging body * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

#us-map {
  /* positioned so the dots layer paints above the absolutely
     positioned canvas beneath it. The canvas already clips the map to its
     own box; matching that here keeps SVG school nodes from escaping the
     same frame when the globe is enlarged. */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.globe-canvas { position: absolute; inset: 0; }

.map-legend, .globe-region-label, .map-tooltip { display: none; }

/* fixed hover readout: hovering a dot names the school here, in one calm
   corner of the stage, instead of a chip chasing the cursor */
.globe-readout {
  position: fixed;
  right: 1rem;
  bottom: 4.6rem;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  box-sizing: border-box;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 0.8rem 2rem rgba(var(--shadow-rgb), 0.2);
  opacity: 0;
  translate: 0 0.4rem;
  transition: opacity 160ms ease, translate 160ms ease;
  pointer-events: none;
}

.globe-readout.is-visible { opacity: 1; translate: 0 0; }

/* School details are click-selected in the persistent campus popup. The
   legacy hover readout stays suppressed so hover never replaces that state. */
.globe-readout { display: none; }

/* On the homepage the hover result is the reel's focused row, not a separate
   tooltip card. It uses the same name / status columns and school-dot grammar
   as the moving rows beneath it. */
.hero-campus-directory .hero-campus-highlight {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.15rem;
  gap: 0.25rem;
  align-items: center;
  max-width: none;
  min-height: 2.36rem;
  padding: 0 0.68rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  translate: 0 0.16rem;
}

.hero-campus-directory .hero-campus-highlight.is-visible { translate: 0 0; }

.hero-campus-directory .globe-readout-school {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hero-campus-directory .hero-campus-highlight strong {
  overflow: hidden;
  font-family: var(--font-text);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-campus-directory .hero-campus-highlight small {
  flex-basis: auto;
  padding-left: 0;
  overflow: hidden;
  font-size: 0.64rem;
  line-height: 1.15;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-campus-directory .hero-campus-highlight small.is-group { color: var(--sage); }
.hero-campus-directory .hero-campus-highlight small.is-forming,
.hero-campus-directory .hero-campus-highlight small.is-open { color: var(--ochre); }

.globe-readout-swatch {
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--school-color, var(--sage));
}

.globe-readout-swatch.is-open {
  box-sizing: border-box;
  border: 1.3px solid var(--school-color, var(--ochre));
  background: transparent;
}

.globe-readout strong {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.globe-readout small {
  flex-basis: 100%;
  padding-left: 1.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.map-tooltip {
  position: absolute;
  z-index: 10;
  translate: -50% calc(-100% - 0.6rem);
  padding: 0.5rem 0.65rem;
  border-radius: 3px;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 0.75rem/1.35 var(--font-text);
  white-space: nowrap;
  pointer-events: none;
}

.dot-has { opacity: 0.95; stroke: rgba(var(--paper-2-rgb), 0.9); stroke-width: 0.8; }
.dot-has.is-link { cursor: pointer; }

.dot-needs,
.dot-partner {
  fill: var(--dot-paper);
  stroke-width: 1.1;
  opacity: 0.88;
  cursor: pointer;
}

/* partner-region (Japan) dots keep their school colors like everyone
   else; the stroke color comes from the data via the SVG attribute */

.dot-hit { fill: transparent; cursor: pointer; }

.dot-easter {
  stroke: rgba(var(--paper-2-rgb), 0.92);
  stroke-width: 0.85;
  cursor: zoom-out;
}

.dot-easter-hit { cursor: zoom-out; }

.globe-school-picker {
  position: fixed;
  z-index: 10020;
  width: min(18rem, calc(100vw - 1.5rem));
  max-height: min(23rem, calc(100vh - 1.5rem));
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: 0.65rem;
  background: rgba(var(--paper-2-rgb), 0.98);
  box-shadow: 0 0.8rem 2.4rem rgba(var(--ink-rgb), 0.2);
  cursor: default;
}

.globe-school-picker[hidden] { display: none; }

.globe-school-picker p {
  margin: 0;
  padding: 0.38rem 0.58rem 0.48rem;
  color: rgba(var(--ink-rgb), 0.65);
  font: 600 0.67rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.globe-school-picker button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.6rem;
  padding: 0.58rem;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  color: var(--ink);
  font: 500 0.82rem/1.25 var(--font-text);
  text-align: left;
  cursor: pointer;
}

.globe-school-picker button::before {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--school-color);
  content: "";
}

.globe-school-picker button:hover,
.globe-school-picker button:focus-visible {
  outline: none;
  background: rgba(var(--ink-rgb), 0.075);
}

.globe-school-picker button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--ink-rgb), 0.42);
}

.globe-readout.is-easter {
  border-color: rgba(138, 94, 10, 0.42);
}

.globe-readout.is-easter .globe-readout-swatch {
  background: var(--ochre) !important;
  box-shadow: 0 0 0 3px rgba(138, 94, 10, 0.14) !important;
}

/* ── Antarctica Easter egg: the impossible zoom ─────────── */

body.solar-mode { overflow: hidden; }

.solar-easter-egg {
  position: fixed;
  z-index: 300;
  inset: 0;
  overflow: hidden;
  contain: strict;
  background-color: #101c1a;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 250, 221, 0.76) 0 0.7px, transparent 1px),
    radial-gradient(circle at 28% 72%, rgba(221, 232, 218, 0.52) 0 0.65px, transparent 1px),
    radial-gradient(circle at 43% 12%, rgba(255, 250, 221, 0.58) 0 0.8px, transparent 1.1px),
    radial-gradient(circle at 67% 76%, rgba(207, 222, 217, 0.48) 0 0.65px, transparent 1px),
    radial-gradient(circle at 84% 24%, rgba(255, 240, 196, 0.62) 0 0.75px, transparent 1px),
    radial-gradient(circle at 93% 69%, rgba(221, 232, 218, 0.5) 0 0.65px, transparent 1px),
    linear-gradient(145deg, #13231f 0%, #0b1415 58%, #11191a 100%);
  background-size: 137px 151px, 181px 163px, 211px 197px, 257px 229px, 293px 271px, 347px 313px, auto;
  color: #f5f2e9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms ease;
}

.solar-easter-egg.is-open {
  opacity: 1;
  pointer-events: auto;
}

.solar-milky-way {
  position: absolute;
  z-index: 0;
  top: -36%;
  left: 47%;
  width: 28vw;
  height: 175%;
  rotate: 31deg;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, rgba(215, 225, 205, 0.14), rgba(178, 194, 178, 0.055) 34%, transparent 70%);
  filter: blur(18px);
  transition: opacity 900ms 240ms ease;
}

.solar-easter-egg.is-open .solar-milky-way { opacity: 0.78; }

.solar-system-scene,
.solar-planets {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  transform: scale(0.86);
  transform-origin: 10% 54%;
  transition: opacity 620ms 300ms ease, transform 1100ms cubic-bezier(0.16, 0.76, 0.22, 1);
}

.solar-planets { z-index: 3; pointer-events: none; }

.solar-easter-egg.is-open .solar-system-scene,
.solar-easter-egg.is-open .solar-planets {
  opacity: 1;
  transform: scale(1);
}

.solar-orbit {
  position: absolute;
  left: 10%;
  top: 54%;
  width: var(--orbit-width);
  height: calc(var(--orbit-width) * 0.44);
  border: 1px solid rgba(220, 225, 205, 0.105);
  border-left-color: rgba(220, 225, 205, 0.025);
  border-radius: 50%;
  transform: translate(-8%, -50%) rotate(var(--orbit-tilt));
}

.orbit-1 { --orbit-width: 24vw; --orbit-tilt: -5deg; }
.orbit-2 { --orbit-width: 39vw; --orbit-tilt: 5deg; }
.orbit-3 { --orbit-width: 55vw; --orbit-tilt: -3deg; }
.orbit-4 { --orbit-width: 70vw; --orbit-tilt: 3deg; }
.orbit-5 { --orbit-width: 96vw; --orbit-tilt: -6deg; }
.orbit-6 { --orbit-width: 122vw; --orbit-tilt: 4deg; }
.orbit-7 { --orbit-width: 147vw; --orbit-tilt: -2deg; }
.orbit-8 { --orbit-width: 171vw; --orbit-tilt: 3deg; }

.solar-sun {
  position: absolute;
  left: 10%;
  top: 54%;
  width: clamp(3.8rem, 7vw, 7.2rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 232, 162, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff5c7 0 8%, #e7bd5c 35%, #b87821 72%, #65441f 100%);
  box-shadow: 0 0 2.4rem rgba(215, 167, 62, 0.3), 0 0 7rem rgba(196, 139, 43, 0.12);
  transform: translate(-50%, -50%);
}

.solar-sun span {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  color: rgba(245, 242, 233, 0.64);
  font: 600 0.68rem/1 var(--font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.solar-planet {
  position: absolute;
  left: var(--planet-x);
  top: var(--planet-y);
  width: var(--planet-size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: #f5f2e9;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: crosshair;
}

.planet-body {
  position: absolute;
  inset: 0;
  overflow: visible;
  border: 1px solid rgba(245, 242, 233, 0.32);
  border-radius: 50%;
  background: var(--planet-paint);
  box-shadow: inset -0.22em -0.12em 0.42em rgba(4, 9, 9, 0.48), 0 0 0.8rem rgba(230, 223, 190, 0.08);
}

.planet-label {
  position: absolute;
  top: calc(100% + 0.68rem);
  left: 50%;
  color: rgba(245, 242, 233, 0.66);
  font: 550 0.68rem/1 var(--font-text);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 140ms ease, translate 140ms ease;
}

.solar-planet:hover .planet-label,
.solar-planet:focus-visible .planet-label {
  color: #fff8df;
  translate: 0 -0.12rem;
}

.solar-planet:focus-visible .planet-body { outline: 2px solid #d6ab4d; outline-offset: 4px; }

.solar-mercury { --planet-x: 22%; --planet-y: 52%; --planet-size: clamp(0.55rem, 0.9vw, 0.85rem); --planet-paint: radial-gradient(circle at 34% 30%, #b7aea0, #675f57 72%); }
.solar-venus { --planet-x: 29%; --planet-y: 61%; --planet-size: clamp(0.82rem, 1.25vw, 1.2rem); --planet-paint: linear-gradient(155deg, #e0c18b, #9c7443 55%, #725033); }
.solar-mars { --planet-x: 43%; --planet-y: 57%; --planet-size: clamp(0.7rem, 1.05vw, 1rem); --planet-paint: radial-gradient(circle at 35% 30%, #c77d55, #84442f 65%, #442820); }
.solar-jupiter { --planet-x: 57%; --planet-y: 42%; --planet-size: clamp(2rem, 3.7vw, 3.7rem); --planet-paint: repeating-linear-gradient(175deg, #b99774 0 8%, #e1c7a2 8% 17%, #8f6d58 17% 22%, #d6b88d 22% 33%); }
.solar-saturn { --planet-x: 70%; --planet-y: 61%; --planet-size: clamp(1.7rem, 3vw, 3rem); --planet-paint: linear-gradient(165deg, #ead6a5, #a88c59); }
.solar-uranus { --planet-x: 82%; --planet-y: 46%; --planet-size: clamp(1.2rem, 2vw, 2rem); --planet-paint: linear-gradient(150deg, #a9d2ce, #5f9091); }
.solar-neptune { --planet-x: 92%; --planet-y: 57%; --planet-size: clamp(1.15rem, 1.9vw, 1.9rem); --planet-paint: linear-gradient(145deg, #6485b8, #264b7b 70%); }

.solar-saturn .planet-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 175%;
  height: 42%;
  border: 0.18rem solid rgba(216, 190, 131, 0.62);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
}

.solar-earth-proxy {
  position: absolute;
  z-index: 5;
  left: var(--earth-start-left);
  top: var(--earth-start-top);
  width: var(--earth-start-size);
  height: var(--earth-start-size);
  border: 1px solid rgba(245, 242, 233, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    left 1050ms cubic-bezier(0.16, 0.8, 0.2, 1),
    top 1050ms cubic-bezier(0.16, 0.8, 0.2, 1),
    width 1050ms cubic-bezier(0.16, 0.8, 0.2, 1),
    height 1050ms cubic-bezier(0.16, 0.8, 0.2, 1),
    box-shadow 800ms ease;
}

.solar-easter-egg.is-open .solar-earth-proxy {
  left: var(--earth-target-left);
  top: var(--earth-target-top);
  width: var(--earth-target-size);
  height: var(--earth-target-size);
  box-shadow: 0 0 0.85rem rgba(209, 226, 204, 0.2);
}

.solar-earth-label {
  position: absolute;
  left: 36%;
  top: calc(47% + 1.1rem);
  display: grid;
  gap: 0.18rem;
  text-align: center;
  transform: translateX(-50%);
}

.solar-earth-label strong { font: 600 0.72rem/1 var(--font-text); }
.solar-earth-label small { color: rgba(245, 242, 233, 0.48); font: 500 0.62rem/1 var(--font-text); white-space: nowrap; }

.solar-copy {
  position: absolute;
  z-index: 8;
  top: clamp(2rem, 7vh, 5rem);
  left: clamp(1.5rem, 5vw, 5rem);
  max-width: 32rem;
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 500ms 650ms ease, translate 650ms 650ms ease;
}

.solar-easter-egg.is-open .solar-copy { opacity: 1; translate: 0 0; }

.solar-kicker {
  margin: 0 0 0.85rem;
  color: #d6ab4d;
  font: 700 0.7rem/1.3 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.solar-copy h2 {
  margin: 0;
  color: #f5f2e9;
  font: 500 clamp(2rem, 4vw, 4.25rem)/1.02 var(--font-display);
  letter-spacing: -0.03em;
}

.solar-status {
  margin: 1rem 0 0;
  color: rgba(245, 242, 233, 0.64);
  font: 450 clamp(0.86rem, 1.25vw, 1rem)/1.5 var(--font-text);
}

.solar-close {
  position: absolute;
  z-index: 9;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.8rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(245, 242, 233, 0.27);
  border-radius: 3px;
  background: rgba(16, 28, 26, 0.78);
  color: #f5f2e9;
  font: 600 0.78rem/1 var(--font-text);
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms 720ms ease, background 140ms ease;
}

.solar-easter-egg.is-open .solar-close { opacity: 1; }
.solar-close:hover, .solar-close:focus-visible { background: rgba(42, 90, 112, 0.82); outline: none; }

.solar-galaxy-marker {
  position: absolute;
  z-index: 4;
  right: 4%;
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(245, 242, 233, 0.38);
  font: 600 0.62rem/1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 500ms 950ms ease;
}

.solar-galaxy-marker span { width: 2.4rem; height: 1px; background: currentColor; }
.solar-easter-egg.is-open .solar-galaxy-marker { opacity: 1; }

/* ── support, proof, and advisors ───────────────────────── */

/* One large, restrained translucent sheet over the world. The tint and
   highlights are ordinary colors rather than a live sample of the rotating
   canvas, which keeps scrolling and layer ordering stable. */
.support-advising-shell {
  position: relative;
  z-index: 3;
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--glass-edge-soft);
  background: var(--glass-tint);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-edge-soft),
    0 -1rem 3rem var(--glass-shadow);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(18rem, 23rem);
  grid-template-areas: "case proof";
  justify-content: space-between;
  align-items: start;
  gap: clamp(3rem, 6vw, 6rem);
  padding: clamp(4.5rem, 8vw, 6.5rem) var(--gutter) clamp(1.75rem, 3vw, 2.75rem);
}

.support-overview-layout {
  padding: clamp(4rem, 7vw, 6rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}

/* Optical interest is concentrated at the entering edge, where a thick
   glass sheet would catch light. Keeping the center quiet protects the long
   copy and directory labels from the low-contrast glassmorphism problem. */
.support-advising-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(70% 5rem at 22% 0%, var(--glass-glow), transparent 72%),
    linear-gradient(105deg, var(--glass-edge-soft) 0%, transparent 23%, transparent 76%, var(--glass-edge-soft) 100%);
  pointer-events: none;
}

.case-copy { grid-area: case; }

.support-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  scroll-margin-top: 8rem;
}

.support-intro .case-lede { margin-bottom: 0; }

.support-points .case-point {
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding-block: 1.3rem;
}

.support-points .case-point:first-child { padding-top: 0; border-top: 0; }
.support-points .case-point:last-child { padding-bottom: 0; }

.support-application-copy {
  max-width: 38rem;
  margin: 0;
  color: var(--copy);
  font-size: 0.92rem;
  line-height: 1.6;
}

.support-signup-form {
  width: min(100%, 31rem);
  margin: 0;
}

.case-copy h2 {
  max-width: 13em;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.case-lede {
  max-width: 38rem;
  margin: 0 0 2.4rem;
  color: var(--copy);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}

.case-point {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.case-point h3 {
  margin: 0;
  font: 600 0.95rem/1.45 var(--font-text);
  color: var(--ink);
}

.case-point p {
  margin: 0;
  color: var(--copy);
  font-size: 0.92rem;
  line-height: 1.65;
}

.case-sources {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* directory */

.school-table-wrap { grid-area: directory; }

.school-table-intro .school-table-kicker { margin-bottom: 0.5rem; }

.school-table-intro > p:last-child {
  margin: 0 0 1rem;
  color: var(--copy);
  font-size: 0.9rem;
  line-height: 1.5;
}

.school-table-head {
  display: flex;
  justify-content: space-between;
  /* Match the protected scrollbar gutter in the rows below. */
  padding: 0.85rem 1.35rem 0.5rem 0.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 600 0.66rem/1.2 var(--font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.table-search #school-search {
  width: 100%;
  padding: 0.7rem 0 0.7rem 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent no-repeat left center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7d75' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background-size: 0.95rem;
  color: var(--ink);
  font: 400 0.88rem/1.4 var(--font-text);
}

.table-search #school-search::placeholder { color: var(--muted); opacity: 1; }

.school-table-scroll {
  max-height: min(70vh, 37rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.28) transparent;
  /* Overlay scrollbars no longer sit directly on the status copy. */
  padding-right: 0.55rem;
  /* rows fade at the edges instead of clipping mid-line */
  mask-image: linear-gradient(180deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.1rem), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.1rem, #000 calc(100% - 1.1rem), transparent 100%);
}

.school-table-scroll::-webkit-scrollbar { width: 0.55rem; }
.school-table-scroll::-webkit-scrollbar-track { background: transparent; }
.school-table-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.28);
  background-clip: padding-box;
}

.school-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-text);
}

.school-table td {
  padding: 0.62rem 0.35rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.35;
}

.school-table tbody tr { cursor: pointer; }
.school-table tbody tr:hover td { background: rgba(var(--ink-rgb), 0.045); }

.t-school { display: flex; align-items: center; gap: 0.5rem; }

.t-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--school-color, var(--sage));
}

.row-needs .t-dot {
  border: 1.3px solid var(--school-color, var(--ochre));
  background: transparent;
  box-shadow: none;
}

.t-status { text-align: right; white-space: nowrap; }
.t-status a { color: inherit; text-decoration: none; }
.school-table tbody tr:hover .t-status a { text-decoration: underline; }
.row-has .t-status { color: var(--sage); }
.row-needs .t-status { color: var(--ochre); }

.table-note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* ── lower bands ────────────────────────────────────────── */

.section:not(#map-section) {
  position: relative;
  z-index: 3;
  padding: clamp(4.5rem, 8vw, 6.5rem) var(--gutter);
  background: var(--paper);
}

.section:not(#map-section) h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

/* advisors */

.advisor-band {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(3.5rem, 6vw, 5rem);
}

.advisor-band-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.advisor-band h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.mentor-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}

.mentor-controls-label {
  margin-right: 0.35rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mentor-control {
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.26);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font: 500 1.1rem/1 var(--font-text);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.mentor-control:hover {
  border-color: var(--ocean);
  background: var(--ocean);
  color: var(--on-ink);
}

.mentor-control:active { translate: 0 1px; }

/* advisors drift by at a reading pace, and the strip is a real scroll
   area: wheel or drag it yourself, hover pauses the drift.
   script.js duplicates the track's children so the loop is seamless. */
.mentor-marquee {
  overflow-x: auto;
  scrollbar-width: none;
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  cursor: grab;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}

.mentor-marquee.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.mentor-marquee::-webkit-scrollbar { display: none; }

.mentor-track {
  display: flex;
  width: max-content;
}

.mentor {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 24rem;
  padding: 2rem 2.2rem;
  border-right: 1px solid var(--line);
  color: var(--ink);
  cursor: grab;
  text-decoration: none;
  transition: background 140ms ease;
}

.mentor-marquee.is-dragging .mentor { cursor: grabbing; }
.mentor img { -webkit-user-drag: none; }

.mentor:hover { background: var(--paper); }

.mentor-photo {
  flex: none;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--line-soft);
}

.mentor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mentor-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copy);
  font: 600 1.15rem/1 var(--font-text);
}

.mentor strong {
  display: block;
  font: 600 1.02rem/1.35 var(--font-text);
}

.mentor small {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.network-note {
  max-width: 54rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.advisor-application {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: 0;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 8rem;
}

.support-application-intro h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
}

.advisor-application .support-signup-form { width: 100%; max-width: none; }

.initiative-proof {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.support-proof {
  grid-area: proof;
  margin: 0;
  padding: 0.2rem 0 0;
  border-top: 0;
}

.support-proof .initiative-quote-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.support-proof .quote-slot {
  min-height: 0;
  padding: 1.45rem 0 1.55rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.support-proof .quote-slot::before { top: 0.75rem; left: 0; }
.support-proof .quote-slot blockquote { padding-left: 1.35rem; }
.support-proof .quote-slot figcaption { padding-left: 1.35rem; }

.initiative-proof h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.7vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.initiative-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.2rem;
}

.advisor-next-step {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: 5px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 650;
  text-decoration: none;
}

.advisor-next-step:hover { background: var(--ocean); color: var(--on-ink); }

/* organizer quotes */

.pull-quote { position: relative; margin: 0; padding-top: 1.6rem; }

.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: -0.1rem;
  color: var(--ochre);
  font: 500 3.2rem/1 var(--font-display);
}

.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-style: italic;
  font-weight: 450;
  line-height: 1.5;
  color: var(--ink);
}

.pull-quote figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.quote-slot {
  min-height: 10.5rem;
  padding: 1.7rem 1.4rem 1.35rem;
  border: 1px dashed rgba(var(--ink-rgb), 0.24);
  background: rgba(var(--paper-2-rgb), 0.5);
}

.quote-slot::before { top: 0.25rem; left: 0.9rem; opacity: 0.72; }
.quote-slot blockquote { color: var(--muted); font-size: 1.08rem; }

.why-organize-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
}

.why-organize-copy { max-width: 46rem; }

.why-organize-copy .case-lede { max-width: none; margin-bottom: 1.2rem; }

.why-organize-caution {
  margin: 0;
  color: var(--copy);
  font-size: 0.92rem;
  line-height: 1.65;
}

.student-quote { margin: 0; padding-block: 1.4rem; }
.student-quote + .student-quote { border-top: 1px solid var(--line); }
.student-quote:first-of-type { padding-top: 0; }
.student-quote:last-child { padding-bottom: 0; }
.student-quote blockquote { margin: 0; }
.student-quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.65vw, 1.4rem);
  line-height: 1.5;
  font-weight: 400;
}
.student-quote figcaption { margin-top: 0.85rem; font-size: 0.78rem; line-height: 1.6; }
.student-quote figcaption strong { display: block; font-weight: 650; }
.student-quote figcaption span { color: var(--muted); }

.organizer-evidence {
  padding-top: 0.25rem;
}

.organizer-evidence h3 {
  max-width: 15em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.organizer-path-list {
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.organizer-path {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
}

.organizer-path strong {
  color: var(--ochre);
  font: 700 0.68rem/1.5 var(--font-mono);
  letter-spacing: 0.08em;
}

.organizer-path p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.6;
}

.organizer-path-note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.why-campus-directory {
  grid-area: auto;
  padding-top: 2.2rem;
}

/* faq */

#faq {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
}

#faq h2 { max-width: 12em; }

.faq { min-width: 0; margin-top: 0; }

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-item summary {
  position: relative;
  padding: 1.1rem 2rem 1.1rem 0;
  color: var(--ink);
  font: 600 0.95rem/1.45 var(--font-text);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.15rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--ochre);
  font: 400 1.25rem/1 var(--font-text);
  transition: rotate 160ms ease;
}

.faq-item[open] summary::after { rotate: 45deg; }

.faq-item p {
  max-width: 44rem;
  margin: 0;
  padding: 0 0 1.3rem;
  color: var(--copy);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ── footer ─────────────────────────────────────────────── */

.site-footer {
  position: relative;
  z-index: 4;
  padding: 3.25rem var(--gutter) 3.75rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--copy);
  font-size: 0.88rem;
}

.site-footer p { margin: 0.45rem 0; }


/* ── ?fonts panel ───────────────────────────────────────── */

.font-panel {
  position: fixed;
  z-index: 200;
  right: 1rem;
  bottom: 1rem;
  width: 19rem;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 1rem 2.4rem rgba(var(--shadow-rgb), 0.28);
  color: var(--ink);
  font: 400 0.8rem/1.45 var(--font-text);
}

.font-panel h3 {
  margin: 0 0 0.7rem;
  font: 700 0.7rem/1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochre);
}

.font-panel label {
  display: block;
  margin: 0.55rem 0 0.15rem;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted);
}

.font-panel select {
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
}

.font-panel-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.font-panel-presets button {
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--copy);
  font: 500 0.72rem/1 var(--font-text);
  cursor: pointer;
}

.font-panel-presets button:hover { border-color: var(--ink); color: var(--ink); }
.font-panel-presets button.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.font-panel-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.font-panel-row button {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--copy);
  font: 600 0.72rem/1 var(--font-text);
  cursor: pointer;
}

.font-panel-row button:hover { border-color: var(--ink); color: var(--ink); }

.font-panel-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.68rem; }

.hero-panel { right: auto; left: 1rem; width: 17rem; }

/* ── ?colors panel ──────────────────────────────────────── */

.color-panel {
  position: fixed;
  z-index: 201;
  left: 1rem;
  bottom: 1rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 1rem 2.4rem rgba(var(--shadow-rgb), 0.28);
  color: var(--ink);
  font: 400 0.78rem/1.4 var(--font-text);
}

.color-panel h3 {
  margin: 0 0 0.25rem;
  color: var(--ochre);
  font: 700 0.7rem/1 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.color-panel-intro {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
}

.color-panel-options { display: grid; gap: 0.38rem; }

.color-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--copy);
  text-align: left;
  cursor: pointer;
}

.color-option:hover { border-color: var(--ink); }
.color-option.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.color-swatches { display: flex; gap: 0.18rem; }
.color-swatch { width: 0.72rem; height: 1.7rem; border-radius: 2px; }

.color-option-copy { display: grid; gap: 0.08rem; }
.color-option-copy strong { color: var(--ink); font: 650 0.74rem/1.2 var(--font-text); }
.color-option-copy small { color: var(--muted); font: 400 0.66rem/1.25 var(--font-text); }

.color-panel-row { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.color-panel-row button {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--copy);
  font: 600 0.7rem/1 var(--font-text);
  cursor: pointer;
}
.color-panel-row button:hover { border-color: var(--ink); color: var(--ink); }

/* ── ?edit / ?tune chrome (dev helpers) ─────────────────── */

.edit-bar,
.tune-panel {
  position: fixed;
  z-index: 200;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0.6rem 1.6rem rgba(var(--shadow-rgb), 0.26);
  font: 500 0.78rem/1.3 var(--font-text);
}

/* ── noscript ───────────────────────────────────────────── */

noscript p {
  max-width: 40rem;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
  font-family: var(--font-text);
}

/* ── responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  .map-figure {
    top: 10vh;
    right: auto;
    left: 0;
    width: 100vw;
  }

  .map-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: 3rem;
  }

  .case-point { grid-template-columns: 1fr; gap: 0.45rem; }

  .initiative-quote-grid { grid-template-columns: 1fr; }

  .organizer-evidence { max-width: 46rem; }
}

@media (max-width: 900px) {
  .support-copy,
  .advisor-application,
  .why-organize-section,
  #faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .support-points .case-point:first-child {
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
  }

  .support-points .case-point {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 1.5rem;
  }

  .support-intro .case-lede,
  .support-application-copy { max-width: 42rem; }

  #faq h2 { max-width: none; margin-bottom: 0; }
}

@media (max-width: 600px) {
  .support-points .case-point { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
}

@media (max-width: 760px) {
  body { padding-top: 6.75rem; }

  .site-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: min(100% - 1.5rem, var(--content));
    gap: 0.5rem 0.7rem;
    padding: 0.65rem 0 0.72rem;
  }

  .wordmark {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 0.98rem;
    gap: 0.42rem;
  }
  .wordmark-seal { width: 24px; height: 24px; }
  .site-nav { grid-column: 2; grid-row: 1; gap: 0.35rem; }
  .motion-toggle { padding-inline: 0.25rem; }
  .motion-toggle-noun { display: none; }
  .campus-search-header {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .campus-search-header .campus-search-results {
    right: 0;
    left: 0;
    width: 100%;
  }

  .globe-stage-title { font-size: clamp(2.7rem, 11.5vw, 4.2rem); }

  .globe-school-line {
    min-height: 2.12em;
    margin-block: -0.04em -0.02em;
  }

  .rotator-stage {
    flex-basis: min(var(--reel-width, 11em), calc(100vw - 2.5rem));
    width: min(var(--reel-width, 11em), calc(100vw - 2.5rem));
    height: 1.9em;
  }

  .globe-stage-actions {
    display: block;
    width: 100%;
    max-width: none;
    align-self: stretch;
  }

  .globe-stage-actions .advisor-signup-form,
  .advisor-signup-form {
    width: 100%;
    max-width: none;
  }

  .advisor-signup-title { text-align: left; }

  .advisor-signup-row { grid-template-columns: minmax(0, 1fr) auto; }

  .advisor-signup-email {
    min-height: 3.25rem;
  }

  .advisor-signup-submit {
    width: auto;
    min-width: 8.4rem;
    min-height: 3.25rem;
    padding-inline: 0.75rem;
    font-size: 0.76rem;
  }

  .advisor-signup-note,
  .advisor-signup-status {
    margin-left: 0;
    text-align: left;
  }

  .globe-readout { display: none; }

  .solar-copy {
    top: 5.5rem;
    right: 1.25rem;
    left: 1.25rem;
    max-width: 25rem;
  }

  .solar-copy h2 { font-size: clamp(2rem, 9vw, 3.1rem); }
  .solar-status { max-width: 18rem; }

  .solar-system-scene,
  .solar-planets {
    transform-origin: 10% 58%;
  }

  .solar-sun { left: 8%; top: 58%; }
  .solar-orbit { left: 8%; top: 58%; }
  .solar-mercury { --planet-x: 17%; --planet-y: 56%; }
  .solar-venus { --planet-x: 27%; --planet-y: 63%; }
  .solar-mars { --planet-x: 48%; --planet-y: 59%; }
  .solar-jupiter { --planet-x: 61%; --planet-y: 49%; }
  .solar-saturn { --planet-x: 74%; --planet-y: 64%; }
  .solar-uranus { --planet-x: 85%; --planet-y: 51%; }
  .solar-neptune { --planet-x: 94%; --planet-y: 61%; }
  .solar-earth-label { left: 50%; top: calc(42% + 1rem); }
  .planet-label { display: none; }
  .solar-earth-label small { display: none; }
  .solar-galaxy-marker { display: none; }
  .solar-close { top: 1rem; right: 1rem; }

  .map-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "case" "proof";
    gap: 4rem;
    padding: 4rem 1.25rem 1.5rem;
  }

  .support-overview-layout { padding: 3.5rem 1.25rem 2rem; }

  .advisor-band { padding: 0 1.25rem 3.5rem; }

  .advisor-band-heading {
    align-items: center;
    gap: 0.75rem;
  }

  .mentor-controls-label { display: none; }
  .mentor-control { width: 2.4rem; height: 2.4rem; }

  .advisor-application {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .school-table-scroll { max-height: 26rem; }

  .section:not(#map-section) { padding: 4rem 1.25rem; }

  .mentor { width: 20rem; padding: 1.5rem 1.6rem; }

  .mentor-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
  }

  .why-campus-directory { padding-top: 0; }

  .site-footer { padding: 2.75rem 1.25rem 3.25rem; }

  .font-panel { right: 0.75rem; left: 0.75rem; width: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  .support-advising-shell {
    background: var(--paper-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .support-advising-shell::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .type-caret { animation: none; }
  body { transition: none; }

  .solar-easter-egg,
  .solar-milky-way,
  .solar-system-scene,
  .solar-planets,
  .solar-earth-proxy,
  .solar-copy,
  .solar-close,
  .solar-galaxy-marker {
    transition: none;
  }
}

/* ── compact hero campus navigator ────────────────────────
   This belongs to the globe composition and disappears with the hero. */
.hero-campus-directory {
  position: fixed;
  z-index: 3;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vh, 2.25rem);
  width: min(20rem, calc(100vw - 2rem));
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg,
    rgba(var(--paper-2-rgb), 0.62) 0%,
    rgba(var(--paper-2-rgb), 0.68) 15%,
    rgba(var(--paper-2-rgb), 0.72) 50%,
    rgba(var(--paper-2-rgb), 0.62) 85%,
    rgba(var(--paper-2-rgb), 0) 100%);
  box-shadow: none;
  opacity: 0;
  translate: 0 0.6rem;
  pointer-events: none;
  transition: opacity 180ms ease, translate 220ms ease;
}

/* Continue the reel's background one row upward, fading it completely into
   the globe. The hover content sits in this extension, so no rectangular
   tooltip surface appears or disappears around it. */
.hero-campus-directory::before {
  display: none;
}

/* Campus hover and selection now share the persistent detail row. Keep the
   older globe readout node inert as a compatibility fallback. */
.hero-campus-directory .hero-campus-highlight { display: none; }

.hero-campus-directory.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.campus-search { position: relative; }
.campus-search-header {
  z-index: 2;
  flex: 0 1 18rem;
  width: min(25vw, 18rem);
  margin-left: auto;
}

.campus-search-input {
  display: block;
  width: 100%;
  min-height: 2.3rem;
  padding: 0.52rem 0.72rem 0.52rem 2rem;
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: 0.42rem;
  outline: 0;
  background: rgba(var(--paper-2-rgb), 0.88) no-repeat 0.68rem center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23617168' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background-size: 0.9rem;
  color: var(--ink);
  font: 500 0.76rem/1.2 var(--font-text);
}

.campus-search-input::placeholder { color: var(--muted); opacity: 0.88; }
.campus-search-input:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(var(--interactive-rgb), 0.12);
}

.campus-search-header .campus-search-input {
  min-height: 2.35rem;
  background-color: rgba(var(--paper-2-rgb), 0.7);
  font-size: 0.78rem;
}

.campus-search-header .campus-search-results {
  right: 0;
  left: auto;
  width: min(22rem, calc(100vw - 2.5rem));
}

.campus-search-results {
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.3rem);
  right: 0;
  left: 0;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.28rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 0.5rem;
  background: var(--paper-2);
  box-shadow: 0 0.8rem 2rem rgba(var(--shadow-rgb), 0.16);
}

.campus-search-results[hidden] { display: none; }

.campus-search-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.52rem 0.5rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--ink);
  font: 500 0.72rem/1.25 var(--font-text);
  text-align: left;
  cursor: pointer;
}

.campus-search-option:hover,
.campus-search-option.is-active { background: rgba(var(--interactive-rgb), 0.08); }

.campus-search-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campus-search-option .t-dot {
  display: inline-block;
  margin-right: 0.45rem;
  vertical-align: 0.02em;
}

.campus-search-dot-needs {
  border: 1.3px solid var(--school-color, var(--ochre));
  background: transparent;
  box-shadow: none;
}
.campus-search-option-status { color: var(--muted); font-size: 0.62rem; white-space: nowrap; }
.campus-search-option-status.is-group { color: var(--sage); }
.campus-search-option-status.is-open { color: var(--ochre); }
.campus-search-option-status.is-untracked { color: var(--ocean); }
.campus-search-dot-untracked { border-style: dashed; opacity: 0.72; }
.campus-search-empty { margin: 0; padding: 0.7rem 0.55rem; color: var(--muted); font-size: 0.72rem; }

.hero-campus-directory .school-table-scroll {
  height: calc(11 * 2.12rem);
  max-height: none;
  overflow: hidden;
  padding-right: 0;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-campus-directory .school-table-scroll::-webkit-scrollbar { display: none; }
.hero-campus-directory .school-table { table-layout: fixed; }

.hero-campus-directory .school-table td {
  height: 2.12rem;
  padding: 0 0.68rem;
  border-bottom-color: rgba(var(--ink-rgb), 0.08);
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-campus-directory .school-table .t-school {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-campus-directory .t-dot {
  display: inline-block;
  margin-right: 0.45rem;
  vertical-align: 0.02em;
}

.hero-campus-directory .school-table .t-status {
  width: 7.15rem;
  padding-left: 0.25rem;
  color: var(--muted);
  font-size: 0.64rem;
  text-align: right;
  text-decoration: none;
}

.hero-campus-directory .school-table tbody tr:focus-visible {
  outline: 2px solid var(--ocean);
  outline-offset: -2px;
}

.hero-campus-directory .school-table tbody tr:hover td,
.hero-campus-directory .school-table tbody tr:focus-visible td,
.hero-campus-directory .school-table tbody tr.is-selected td {
  background: rgba(var(--interactive-rgb), 0.07);
}

.hero-campus-directory .row-has .t-status { color: var(--sage); }
.hero-campus-directory .row-needs .t-status { color: var(--ochre); }

.why-organize-copy { max-width: 50rem; }

/* Keep the desktop headline readable through laptop widths. The former
   campus directory has been removed, so it must no longer reserve a lane. */
@media (min-width: 761px) and (max-width: 1280px) {
  .site-header-inner {
    width: calc(100% - 2rem);
    gap: 0.72rem;
  }

  .wordmark {
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(0.98rem, 1.45vw, 1.1rem);
    white-space: nowrap;
  }

  .campus-search-header {
    flex: 0 1 16rem;
    width: clamp(12rem, 24vw, 16rem);
    min-width: 12rem;
  }

  .site-nav {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .hero-campus-directory {
    right: 1rem;
    width: clamp(18rem, 28vw, 20rem);
  }

  .globe-stage-title {
    width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
    max-width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
    font-size: clamp(2.85rem, 5vw, 4.3rem);
  }

  .rotator-stage {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  .hero-campus-directory .school-table-scroll {
    height: calc(8 * 2.12rem);
  }

  .hero-campus-directory .school-table .t-status {
    width: 7rem;
    padding-right: 0.35rem;
  }
}

/* Give the headline the same reading measure on wide screens. */
@media (min-width: 1281px) {
  .globe-stage-title {
    width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
    max-width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
  }

  .rotator-stage {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* The title is constrained by both dimensions through the common laptop
   height range. Using vh alone would make narrow laptops too small; using vw
   alone is what made a wide 960px-high window grow past its first view. */
@media (min-width: 761px) and (max-height: 1000px) {
  .globe-stage-header {
    justify-content: flex-start;
    padding-top: clamp(2.25rem, 5vh, 3.25rem);
    padding-bottom: 4rem;
  }

  .globe-stage-title {
    width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
    max-width: min(13em, calc(100vw - 2 * var(--gutter) - 3.5rem));
    font-size: clamp(3rem, min(5vw, 7.3vh), 4.75rem);
    line-height: 1.03;
  }

  .globe-school-line { min-height: 2em; }
  .rotator-stage { height: 1.74em; }
  .globe-stage-lede { margin-top: 1.15rem; }
  .globe-stage-actions { margin-top: 1.35rem; }
  .hero-stats { margin-top: 1.65rem; }
}

/* Short laptop screens need the same ambitious composition at a tighter
   reading scale. Keep the complete email action in the opening view; the
   statistics and sponsor note can continue immediately below it. */
@media (min-width: 761px) and (max-height: 760px) {
  .globe-stage-header {
    justify-content: flex-start;
    min-height: calc(100svh - 4.25rem);
    padding-top: clamp(1.5rem, 4vh, 2.25rem);
    padding-bottom: 3rem;
  }

  .globe-stage-title {
    font-size: clamp(2.65rem, 4.6vw, 3.75rem);
    line-height: 1.01;
  }

  .globe-school-line { min-height: 1.88em; }
  .rotator-stage { height: 1.64em; }

  .globe-stage-lede {
    max-width: 32rem;
    margin-top: 0.9rem;
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .globe-stage-actions {
    width: min(100%, 32rem);
    margin-top: 0.9rem;
  }

  .advisor-signup-title {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
  }

  .advisor-signup-email,
  .advisor-signup-submit { min-height: 2.9rem; }

  .advisor-signup-note,
  .advisor-signup-status {
    margin-top: 0.4rem;
    font-size: 0.7rem;
  }

  .hero-stats { margin-top: 1rem; }
  .globe-stage-funded { margin-top: 0.55rem; }
  .hero-campus-directory .school-table-scroll { height: calc(7 * 2.12rem); }
}

@media (max-width: 760px) {
  .hero-campus-directory {
    display: none;
  }

  /* These rules intentionally live after the compact navigator's desktop
     declarations so the search field cannot collapse back to 25vw. */
  .campus-search-header {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .campus-search-header .campus-search-results {
    right: 0;
    left: 0;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .site-nav-link { display: none; }
  .site-nav { gap: 0; }
  .site-nav .btn-small { padding-inline: 0.72rem; font-size: 0.78rem; }
  .wordmark { font-size: 0.9rem; }

  .advisor-signup-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .advisor-signup-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-campus-directory { transition: none; }
}

/* Narrow screens become an intentional reading sequence rather than a globe
   with copy laid over it. `display: contents` lets the existing semantic
   header children participate in the stage grid without duplicating content. */
@media (max-width: 800px) {
  .hero-copy-protection-canvas,
  .hero-wordmark-protection { display: none; }

  .globe-stage {
    --mobile-hero-gutter: clamp(1.25rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .globe-stage-header { display: contents; }

  .globe-stage-title,
  .globe-stage-lede,
  .globe-stage-actions,
  .hero-stats,
  .globe-stage-funded {
    width: auto;
    margin-right: var(--mobile-hero-gutter);
    margin-left: var(--mobile-hero-gutter);
  }

  .globe-stage-title,
  .globe-stage-lede,
  .globe-stage-actions .advisor-signup-title,
  .globe-stage-actions .advisor-signup-note,
  .globe-stage-actions .advisor-signup-status,
  .hero-stats,
  .globe-stage-funded {
    -webkit-text-stroke: 0 transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
  }

  .rotator-logo { filter: none; }

  .globe-stage-title {
    order: 1;
    max-width: 11em;
    margin-top: clamp(2.25rem, 8vw, 4rem);
    font-size: clamp(2.55rem, 8.5vw, 4.15rem);
    line-height: 1.035;
  }

  .globe-stage-lede {
    order: 2;
    max-width: 34rem;
    margin-top: clamp(1.15rem, 3vw, 1.6rem);
    font-size: clamp(1rem, 2.4vw, 1.12rem);
  }

  .map-figure {
    --map-control-rail: 3.25rem;
    position: relative;
    order: 3;
    top: auto;
    right: auto;
    left: auto;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    margin: clamp(0.65rem, 2vw, 1.2rem) 0 0;
    padding-top: var(--map-control-rail);
    overflow: hidden;
    pointer-events: auto;
  }

  #us-map {
    position: relative;
    width: 100%;
    height: auto;
  }

  .map-figure .globe-canvas {
    top: var(--map-control-rail);
    right: auto;
    bottom: auto;
    left: 0;
  }

  .globe-stage-actions {
    order: 4;
    max-width: 34rem;
    margin-top: clamp(1.1rem, 3vw, 1.65rem);
  }

  .hero-stats {
    order: 5;
    margin-top: 1.25rem;
  }

  .globe-stage-funded {
    order: 6;
    margin-top: 0.65rem;
    margin-bottom: clamp(3rem, 8vw, 5rem);
  }

  .support-advising-shell { order: 7; }
}

/* Short landscape phones show the complete sphere without distorting the
   shared 900:700 render surface. Width derives from the available viewport
   height; the SVG and its canvas stay centered and keep identical geometry. */
@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  #us-map {
    width: clamp(15rem, calc(128.57svh - 14.15rem), 100%);
    margin-inline: auto;
  }

  .map-figure .globe-canvas {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 761px) and (max-width: 800px) and (max-height: 500px) and (orientation: landscape) {
  #us-map {
    width: clamp(15rem, calc(128.57svh - 10.95rem), 100%);
    margin-inline: auto;
  }

  .map-figure .globe-canvas {
    left: 50%;
    transform: translateX(-50%);
  }
}