/* ============================================================
   styles.css
   Warm community-library aesthetic: navy/charcoal shadows,
   amber light, cream type. Avoids "elite club" / "luxury hotel"
   / corporate-dashboard territory in favor of calm, editorial
   nonprofit design.
   ============================================================ */

:root {
  /* ---- Library background ------------------------------------
     Swap this single variable to change the room image. The 200
     light coordinates in data.js are hand-fit to library-bg.jpg
     (tables/lamps left and right of the center aisle, lamps
     unlit) -- if the image changes significantly, re-check the
     coordinate alignment. A subtle gradient is layered underneath
     as a fallback fade so the top/bottom edges blend into the
     page even if the image doesn't perfectly fill the hero. */
  --library-bg:
    url("library-bg.jpg"),
    linear-gradient(180deg, #0c1220 0%, #121a2e 35%, #1a2338 65%, #0c1220 100%);

  /* SEN-inspired dark blue accents */
  --sen-navy: #000744;
  --sen-blue: #3162f5;

  /* Library palette */
  --charcoal: #10141f;
  --navy-deep: #0c1220;
  --amber: #e3a15a;
  --amber-bright: #ffcf8a;
  --cream: #f4ead9;
  --cream-dim: rgba(244, 234, 217, 0.72);

  --radius-md: 10px;
  --radius-lg: 18px;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  background: var(--navy-deep);
  color: var(--cream);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px;
}

/* Small uppercase eyebrow used above a section-title -- "THE LETTER
   THAT STARTED IT" / "THE RESPONSE" / "THE CLASS CHALLENGE" -- ties
   the three-act narrative together visually without repeating a
   full heading treatment each time. */
.section-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--amber-bright);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--cream);
  margin-bottom: 8px;
}

.section-subtitle {
  color: var(--cream-dim);
  font-size: 1rem;
  margin-bottom: 32px;
}

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:focus-visible {
  outline: 3px solid var(--sen-blue);
  outline-offset: 3px;
}

.btn--primary {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #241407;
  box-shadow: 0 8px 24px rgba(227, 161, 90, 0.35);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(227, 161, 90, 0.45);
}

.btn--secondary {
  background: var(--sen-blue);
  color: #fff;
}

.btn--secondary:hover {
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244, 234, 217, 0.35);
}

.btn--ghost:hover {
  border-color: var(--amber);
  color: var(--amber-bright);
}

.btn--large {
  padding: 18px 36px;
  font-size: 0.95rem;
}

/* ============================================================
   SECTION 1 — HERO / LIVE ROOM
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 320px;
  background: var(--charcoal);
  overflow: hidden;
}

.hero__room {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 100vh;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--library-bg);
  background-size: cover;
  background-position: center;
}

/* ----------------------------------------------------------
   Chapter-frame crossfade layers (replaces the canvas light-dot
   system). Two stacked images; JS toggles which one is opacity:1
   so the transition fades smoothly instead of popping. */
.hero__frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

.hero__frame--visible {
  opacity: 1;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(6, 9, 16, 0.75) 100%);
  pointer-events: none;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__overlay {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 32px 48px 64px;
  pointer-events: none;
}

.hero__overlay > * {
  pointer-events: auto;
}

.hero__top {
  display: flex;
  align-items: center;
}

.sen-logo {
  display: flex;
  align-items: center;
}

.sen-logo__image {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.hero__content {
  max-width: 620px;
}

/* Both the headline and subhead sit directly on top of the animated
   photo (no solid background behind them), so legibility varies by
   frame -- a bright window or light-colored wall can wash the text
   out. -webkit-text-stroke draws a crisp outline in Chrome/Safari/
   Edge; the layered text-shadow (soft depth shadow + a tight 1px
   outline in all 4 directions) is the universal fallback/backup for
   browsers that ignore text-stroke, so the outline effect holds up
   everywhere, not just WebKit browsers. */
/* Short lead-in sentence above the headline -- smaller/dimmer than
   the headline itself so the two sentences read as setup -> payoff
   instead of one flat six-line block. Same legibility treatment
   (outline + shadow) since it sits on the same photo. */
.hero__eyebrow-line {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--cream-dim);
  margin-bottom: 8px;
  -webkit-text-stroke: 0.5px rgba(6, 9, 16, 0.55);
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.75),
    1px -1px 0 rgba(6, 9, 16, 0.75),
    -1px 1px 0 rgba(6, 9, 16, 0.75),
    1px 1px 0 rgba(6, 9, 16, 0.75);
}

.hero__headline {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  color: var(--cream);
  -webkit-text-stroke: 1px rgba(6, 9, 16, 0.65);
  text-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.85),
    1px -1px 0 rgba(6, 9, 16, 0.85),
    -1px 1px 0 rgba(6, 9, 16, 0.85),
    1px 1px 0 rgba(6, 9, 16, 0.85);
}

/* Narrative copy between the headline and the "THE ROOM KEEPS
   FILLING" kicker -- same legibility treatment (outline + shadow)
   as the headline/subhead since it sits on the same photo. */
.hero__story {
  margin-top: 18px;
  max-width: 560px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--cream);
  -webkit-text-stroke: 0.5px rgba(6, 9, 16, 0.55);
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.75),
    1px -1px 0 rgba(6, 9, 16, 0.75),
    -1px 1px 0 rgba(6, 9, 16, 0.75),
    1px 1px 0 rgba(6, 9, 16, 0.75);
}

.hero__subhead {
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--cream-dim);
  -webkit-text-stroke: 0.6px rgba(6, 9, 16, 0.65);
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.8),
    1px -1px 0 rgba(6, 9, 16, 0.8),
    -1px 1px 0 rgba(6, 9, 16, 0.8),
    1px 1px 0 rgba(6, 9, 16, 0.8);
}

.hero__progress {
  margin-top: 28px;
}

.hero__progress-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amber-bright);
}

.hero__progress-remaining {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--cream-dim);
}

.hero__progress-bar {
  margin-top: 12px;
  width: 100%;
  max-width: 360px;
  height: 8px;
  border-radius: 999px;
  background: rgba(244, 234, 217, 0.14);
  overflow: hidden;
}

.hero__progress-fill {
  height: 100%;
  width: 42%; /* set dynamically by app.js */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
  transition: width 0.6s ease;
}

.hero__cta {
  margin-top: 26px;
}

.hero__community-note {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--cream-dim);
  font-style: italic;
}

/* Right-side stats panel (desktop) */
.stats-panel {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin: 32px 32px 0 0;
  padding: 24px;
  width: 280px;
  background: rgba(12, 18, 32, 0.72);
  border: 1px solid rgba(244, 234, 217, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

.stats-panel__title {
  font-size: 1rem;
  color: var(--cream);
  margin-bottom: 16px;
}

.stats-panel__list {
  margin: 0 0 16px;
}

.stats-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 234, 217, 0.08);
}

.stats-panel__row dt {
  font-size: 0.78rem;
  color: var(--cream-dim);
}

.stats-panel__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--amber-bright);
  font-size: 0.95rem;
}

.stats-panel__note {
  font-size: 0.78rem;
  color: var(--cream-dim);
  line-height: 1.5;
}

.stats-panel__updated {
  margin-top: 12px;
  font-size: 0.7rem;
  color: rgba(244, 234, 217, 0.5);
  letter-spacing: 0.02em;
}

/* ============================================================
   SECTION 1.0 — LETTER INTRO (cinematic photo + headline)
   Desktop: .letter-intro__photo is absolutely positioned full-
   bleed (object-fit:cover), text sits in the naturally darker
   left portion of the frame with only a left-to-right gradient
   scrim (subtle -- Larry and the gold rings stay unobstructed).
   Mobile (see media query): the photo reverts to a normal,
   static, full-width block and the text drops below it in plain
   flow -- not a forced version of the desktop overlay.
   ============================================================ */
.letter-intro {
  position: relative;
  /* Locked to the photo's own ratio (2200x1118) instead of a fixed
     min-height. A fixed height + object-fit:cover meant the crop
     depended on how far the container's own ratio drifted from the
     photo's -- on a browser window taller/narrower than my test
     sizes, "cover" scaled way up to fill that height, zooming in and
     cropping out almost everything but a sliver near the right edge.
     aspect-ratio guarantees the box always matches the photo, so
     cover never has to crop beyond what's intentional, on any
     window size. min/max-height are just sane bounds for extreme
     window shapes. */
  aspect-ratio: 2200 / 1118;
  min-height: 380px;
  max-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(244, 234, 217, 0.08);
}

.letter-intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.letter-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 18, 0.88) 0%,
    rgba(8, 10, 18, 0.68) 26%,
    rgba(8, 10, 18, 0.3) 48%,
    rgba(8, 10, 18, 0.04) 62%,
    transparent 75%
  );
}

.letter-intro__content {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 56px 48px;
}

.letter-intro__headline {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: 16px;
  -webkit-text-stroke: 1px rgba(6, 9, 16, 0.65);
  text-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.85),
    1px -1px 0 rgba(6, 9, 16, 0.85),
    -1px 1px 0 rgba(6, 9, 16, 0.85),
    1px 1px 0 rgba(6, 9, 16, 0.85);
}

.letter-intro__body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cream-dim);
  -webkit-text-stroke: 0.5px rgba(6, 9, 16, 0.55);
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.5),
    -1px -1px 0 rgba(6, 9, 16, 0.75),
    1px -1px 0 rgba(6, 9, 16, 0.75),
    -1px 1px 0 rgba(6, 9, 16, 0.75),
    1px 1px 0 rgba(6, 9, 16, 0.75);
}

.letter-intro__link {
  margin-top: 14px;
  font-size: 0.85rem;
  -webkit-text-stroke: 0.5px rgba(6, 9, 16, 0.55);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.letter-intro__link a {
  color: var(--cream-dim);
  text-decoration: underline;
}

/* ============================================================
   SECTION 1.1 — THE LETTER THAT STARTED IT
   Editorial, reflective treatment -- a paper-toned card rather
   than the site's usual amber-glow UI chrome, since this is meant
   to read as an actual letter, not another campaign panel.
   ============================================================ */
.letter {
  background: var(--charcoal);
  border-top: 1px solid rgba(244, 234, 217, 0.08);
}

/* Letter card + Larry's photo side by side (photo on the right, per
   Chau's call) -- a dedicated photo panel with object-fit:cover is
   far more predictable than trying to reveal a specific subject
   through background-position math on a full-bleed photo. Stacks on
   mobile (photo below the letter card). */

.letter-card {
  position: relative;
  max-width: 640px;
  margin: 8px auto 0;
  padding: 36px 40px;
  background: rgba(244, 234, 217, 0.05);
  border: 1px solid rgba(244, 234, 217, 0.14);
  border-radius: var(--radius-lg);
}

.letter-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 6px;
}

.letter-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amber-bright);
  margin-bottom: 22px;
}

.letter-card__text p {
  color: var(--cream);
  line-height: 1.75;
  margin-bottom: 16px;
}

.letter-card__text p:last-child {
  margin-bottom: 0;
}

/* Visual cue that more of the letter exists below, shown only
   while collapsed -- JS hides this the moment #letterMore is
   revealed (see toggleLetter() in app.js). */
.letter-card__fade {
  display: block;
  height: 40px;
  margin-top: -16px;
  background: linear-gradient(180deg, transparent, rgba(16, 20, 31, 0.96));
  pointer-events: none;
}

.letter-card__signoff {
  margin-top: 24px;
}

.letter-card__signoff-title {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--cream-dim);
}

.letter-card__toggle {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
}

.letter-card__original {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
}

.letter-card__original a {
  color: var(--cream-dim);
  text-decoration: underline;
}

/* ============================================================
   SECTION 1.2 — THE RESPONSE
   Warm, simple, emotional -- the calmest of the three "act"
   transitions before the more energetic class challenge below.
   ============================================================ */
.response {
  background-image:
    linear-gradient(180deg, rgba(12, 18, 32, 0.55), rgba(16, 20, 31, 0.62) 45%, rgba(12, 18, 32, 0.72)),
    url("cohort-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(244, 234, 217, 0.08);
  text-align: center;
}

.response__lights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 28px 0 18px;
}

.response__lights .light-icon {
  width: 26px;
  height: 26px;
}

.response .section-inner {
  max-width: 720px;
}

.response__caption {
  color: var(--cream-dim);
  font-style: italic;
}

/* ---- gift-builds__* paragraphs, folded into .response -------
   (used to be their own section; kept as standalone classes since
   nothing here depends on a .gift-builds parent wrapper). */
.gift-builds__body {
  margin-top: 32px;
  color: var(--cream-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}

.gift-builds__closer {
  color: var(--cream);
  font-style: italic;
}

/* ============================================================
   SECTION 2 — COHORT EXPLORER
   Background photo: 20 book spines lined up on a desk -- one
   spine per class-year cohort, echoing the section's content.
   A dark scrim sits between the image and the text/buttons so
   contrast stays high regardless of the photo's own brightness.
   ============================================================ */
.cohort-explorer {
  background: linear-gradient(180deg, var(--charcoal), var(--navy-deep));
  border-top: 1px solid rgba(244, 234, 217, 0.08);
}

.cohort-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.cohort-nav__btn {
  font-family: inherit;
  background: rgba(244, 234, 217, 0.06);
  color: var(--cream);
  border: 1px solid rgba(244, 234, 217, 0.16);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cohort-nav__btn:hover {
  border-color: var(--amber);
  color: var(--amber-bright);
}

.cohort-nav__btn:focus-visible {
  outline: 3px solid var(--sen-blue);
  outline-offset: 2px;
}

.cohort-nav__btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #241407;
  border-color: transparent;
  font-weight: 700;
}

.cohort-reset {
  margin-bottom: 32px;
}

.cohort-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}

/* display:grid above beats the browser's default [hidden]{display:none}
   rule, so without this the grid never actually disappears once shown.
   Same fix needed anywhere else `hidden` is combined with a custom
   display value. */
.cohort-all-grid[hidden] {
  display: none;
}

.cohort-all-grid__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: inherit;
  text-align: left;
  background: rgba(244, 234, 217, 0.05);
  border: 1px solid rgba(244, 234, 217, 0.12);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cohort-all-grid__card:hover {
  border-color: var(--amber);
  background: rgba(244, 234, 217, 0.09);
}

.cohort-all-grid__card:focus-visible {
  outline: 3px solid var(--sen-blue);
  outline-offset: 2px;
}

/* "Lit" cohort (at least one sustaining scholar) -- warm amber glow,
   matching the lightbulb icons used everywhere else on the page, so
   the grid itself reads as part of the same light metaphor instead
   of every card looking identical regardless of who's shown up. */
.cohort-all-grid__card--lit {
  background: rgba(227, 161, 90, 0.12);
  border-color: rgba(227, 161, 90, 0.4);
  box-shadow: 0 0 18px rgba(255, 207, 138, 0.12);
}

.cohort-all-grid__card--lit:hover {
  border-color: var(--amber-bright);
  background: rgba(227, 161, 90, 0.18);
}

.cohort-all-grid__card--lit .cohort-all-grid__count {
  color: var(--amber-bright);
  font-weight: 700;
}

.cohort-all-grid__rank {
  font-size: 0.72rem;
  color: var(--amber-bright);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cohort-all-grid__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
}

.cohort-all-grid__count {
  font-size: 0.85rem;
  color: var(--cream-dim);
}

.cohort-all-grid__of {
  font-size: 0.78rem;
}

.cohort-panel {
  background: rgba(244, 234, 217, 0.04);
  border: 1px solid rgba(244, 234, 217, 0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 520px;
}

.cohort-panel__year {
  font-size: 1.4rem;
  color: var(--amber-bright);
  margin-bottom: 18px;
}

.cohort-panel__stats {
  display: flex;
  gap: 28px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.cohort-panel__stat {
  display: flex;
  flex-direction: column;
}

.cohort-panel__stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cream);
}

.cohort-panel__stat-label {
  font-size: 0.78rem;
  color: var(--cream-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cohort-panel__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(244, 234, 217, 0.12);
  overflow: hidden;
  margin-bottom: 22px;
}

.cohort-panel__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ============================================================
   SECTION 3 — LEADERBOARD
   Background photo: a single bright reading lamp on a foreground
   desk, more lamps glowing down the room -- echoes "who's showing
   up" (one lit spot standing out, more lit further back). Same
   dark-scrim approach as the cohort section for text contrast.
   ============================================================ */
.leaderboard {
  background-image:
    linear-gradient(180deg, rgba(16, 20, 31, 0.55), rgba(16, 20, 31, 0.62) 45%, rgba(16, 20, 31, 0.72)),
    url("leaderboard-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(244, 234, 217, 0.08);
}

/* ---- The Race Right Now -----------------------------------
   Ranked bar rows, replacing the old flat top-3 cards -- bar
   length is proportional to the #1 cohort's donor count, so the
   GAP between classes is the thing that's visually obvious, not
   just the ordering. */
.race__title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cream-dim);
  margin-bottom: 14px;
}

.race {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.race__row {
  display: grid;
  grid-template-columns: 36px 1fr 3fr 34px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.race__row--selected {
  background: rgba(227, 161, 90, 0.12);
  border-color: rgba(227, 161, 90, 0.4);
}

.race__rank {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--amber-bright);
}

.race__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race__bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(244, 234, 217, 0.1);
  overflow: hidden;
}

.race__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
}

.race__row--selected .race__bar-fill {
  background: linear-gradient(90deg, #ffcf8a, #fff2d9);
}

.race__count {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cream-dim);
  text-align: right;
}

.race__row--selected .race__count {
  color: var(--amber-bright);
}

.leaderboard__mover {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  background: rgba(49, 98, 245, 0.12);
  border: 1px solid rgba(49, 98, 245, 0.3);
  border-radius: var(--radius-md);
  padding: 14px 20px;
}

.leaderboard__mover-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9db4ff;
  font-weight: 700;
}

.leaderboard__mover-detail {
  color: var(--cream);
  font-weight: 600;
}

/* ---- YOUR CLASS -- personalized, screenshot-friendly card --
   Designed to make sense on its own: SEN/campaign identity in the
   footer line, everything else self-contained. Text-align:center +
   a tight max-width keep it feeling like a single shareable card
   rather than another wide page section. */
.your-class {
  margin-top: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 28px 24px;
  text-align: center;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(227, 161, 90, 0.14), transparent 70%), rgba(244, 234, 217, 0.04);
  border: 1px solid rgba(227, 161, 90, 0.3);
  border-radius: var(--radius-lg);
}

.your-class__prompt {
  color: var(--cream-dim);
  margin-bottom: 16px;
}

.your-class__kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--amber-bright);
  margin-bottom: 10px;
}

.your-class__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
}

.your-class__rank {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cream);
  margin-top: 2px;
  margin-bottom: 16px;
}

.your-class__lights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
}

.light-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.light-icon--lit .light-icon__glow {
  fill: var(--amber-bright);
  filter: drop-shadow(0 0 5px rgba(255, 207, 138, 0.75));
}

.light-icon--lit .light-icon__base {
  fill: var(--amber);
}

.light-icon--unlit .light-icon__glow {
  fill: none;
  stroke: rgba(244, 234, 217, 0.38);
  stroke-width: 1.4;
}

.light-icon--unlit .light-icon__base {
  fill: none;
  stroke: rgba(244, 234, 217, 0.28);
  stroke-width: 1.2;
}

.light-icon__more {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cream-dim);
  margin: 0 4px;
}

.your-class__headline {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--amber-bright);
  line-height: 1.25;
  margin-bottom: 6px;
}

.your-class__sub {
  color: var(--cream-dim);
  margin-bottom: 18px;
}

.your-class__lights-caption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--cream-dim);
  margin-bottom: 20px;
}

.your-class__ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.your-class__rally-sub {
  font-size: 0.85rem;
  color: var(--cream-dim);
  margin-bottom: 16px;
}

.your-class__brand {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(244, 234, 217, 0.45);
}

/* ============================================================
   SECTION 4 — YESTERDAY VS TODAY
   ============================================================ */
.daily-change {
  background: linear-gradient(180deg, var(--charcoal), var(--navy-deep));
  border-top: 1px solid rgba(244, 234, 217, 0.08);
  text-align: center;
}

.daily-change .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.daily-change__explainer {
  max-width: 480px;
  color: var(--cream-dim);
  margin-top: 10px;
}

.daily-change__compare {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 12px 0 28px;
}

.daily-change__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.daily-change__stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cream-dim);
}

.daily-change__stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--amber-bright);
}

.daily-change__arrow {
  font-size: 1.4rem;
  color: var(--cream-dim);
}

.daily-change__summary {
  margin-top: 20px;
  color: var(--cream-dim);
  font-style: italic;
}

/* ============================================================
   SECTION 5 — THE ROOM IS OURS TO BUILD (closing + donation)
   ============================================================ */
.donor-demo__preview-btn {
  margin-top: 16px;
  font-size: 0.78rem;
  opacity: 0.8;
}

.donor-demo__moment {
  /* margin: 0 auto (not flex align-items:center) since this now
     lives inside .goal-state, which isn't a flex container -- was
     previously centered via .donor-demo's flex-column parent before
     the two near-duplicate closing sections were merged into one. */
  margin: 32px auto 0;
  padding: 28px 32px;
  background: rgba(227, 161, 90, 0.1);
  border: 1px solid rgba(227, 161, 90, 0.35);
  border-radius: var(--radius-lg);
  max-width: 440px;
}

.donor-demo__moment-title {
  font-size: 1.5rem;
  color: var(--amber-bright);
  font-weight: 700;
  margin-bottom: 6px;
}

.donor-demo__moment-detail {
  color: var(--cream);
  margin-bottom: 20px;
}

.donor-demo__moment-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION 6 — THE ROOM IS OURS TO BUILD (closing section)
   ============================================================ */
.goal-state {
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255, 207, 138, 0.18), transparent 65%), var(--navy-deep);
  border-top: 1px solid rgba(244, 234, 217, 0.08);
  text-align: center;
}

.goal-state__headline {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--amber-bright);
  margin-top: 12px;
  margin-bottom: 20px;
}

.goal-state__copy {
  color: var(--cream);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 18px;
}

.goal-state__cta {
  margin-top: 12px;
}

/* ============================================================
   FOOTER + TOAST
   ============================================================ */
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  padding: 40px 24px 8px;
  background: var(--charcoal);
}

/* Same height as the hero's top-left SEN logo (.sen-logo__image) so
   the two feel like one consistent brand size across the page,
   instead of the footer versions reading smaller/secondary. */
.partner-logos__logo {
  height: 64px;
  width: auto;
  opacity: 0.85;
}

.site-footer {
  padding: 28px 24px;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(244, 234, 217, 0.4);
  background: var(--charcoal);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--sen-navy);
  color: var(--cream);
  border: 1px solid rgba(49, 98, 245, 0.5);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  /* Letter intro: photo first (plain, full-width block -- not the
     desktop's absolute full-bleed overlay), headline/body below it
     in normal flow. Deliberately NOT a scaled-down version of the
     desktop composition. */
  .letter-intro {
    display: block;
    aspect-ratio: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }

  .letter-intro__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: center 35%;
  }

  .letter-intro__scrim {
    display: none;
  }

  .letter-intro__content {
    max-width: none;
    padding: 28px 20px 36px;
  }

  .letter-intro__headline,
  .letter-intro__body,
  .letter-intro__link {
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }

  .hero__overlay {
    grid-column: 1;
    padding: 24px 20px 40px;
    /* .hero__overlay shares a grid cell with .hero__room (see the
       NOTE below), so as a grid item it stretches to fill that
       cell's height -- 78vh, from .hero__room's min-height. With
       min-height reset to auto here (not the desktop 100vh) that
       78vh is the real, image-sized box, so justify-content:
       space-between now correctly pins the logo to the top and the
       headline block to the bottom of the IMAGE, not of an
       oversized phantom 100vh space -- maximizing the empty top
       breathing room over the photo. */
    min-height: auto;
    justify-content: space-between;
    gap: 24px;
  }

  .stats-panel {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    margin: 0 20px 24px;
    width: auto;
    position: relative;
    z-index: 2;
  }

  .hero__room {
    min-height: 78vh;
  }

  /* NOTE: .hero stays display:grid (inherited from the base rule) on
     mobile, same as desktop -- hero__room and hero__overlay share
     grid-column:1/grid-row:1 so the headline overlaps the animation
     instead of sitting in a separate block below it. (A stray
     display:flex override used to live here and broke that overlap
     -- the stats-panel grid-row:2 rule above was already written
     assuming the grid stays intact, so removing the override was
     the fix, not a new layout.) */

  /* Hero text on mobile: the desktop sizes/spacing (built for a wide
     line length) wrap into many short lines on a narrow phone screen
     and read as a wall of text. Scaling everything down + loosening
     the gaps between headline/story/subhead lets the same words
     breathe instead of stacking edge-to-edge. Wording is unchanged --
     this is sizing/spacing only. */
  .sen-logo__image,
  .partner-logos__logo {
    height: 40px;
  }

  .hero__eyebrow-line {
    /* Chau's feedback ("too small") was about desktop -- mobile
       already read fine at the original size, so this un-does the
       base clamp()'s desktop-driven bump for mobile specifically. */
    font-size: 1rem;
  }

  .hero__headline {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .hero__story {
    margin-top: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .hero__subhead {
    margin-top: 18px;
    font-size: 0.85rem;
  }

  .hero__cta {
    margin-top: 20px;
  }

  .hero__community-note {
    margin-top: 14px;
    font-size: 0.85rem;
  }

  .cohort-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .cohort-nav__btn {
    flex: 0 0 auto;
  }

  /* The race rows' desktop ratio (1fr label : 3fr bar) squeezes
     labels like "Class of 2000" down to "Class..." on a narrow
     phone screen -- exactly the "careful reading required" problem
     this whole redesign is trying to avoid. Give the label more
     room and the bar less on mobile. */
  .race__row {
    grid-template-columns: 24px 1.3fr 1fr 26px;
    gap: 8px;
    padding: 9px 10px;
  }

  .race__label {
    font-size: 0.8rem;
  }

  .race__rank,
  .race__count {
    font-size: 0.82rem;
  }

  .your-class {
    padding: 24px 18px 20px;
  }

  .section-inner {
    padding: 48px 20px;
  }
}

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .hero__progress-fill,
  .cohort-panel__bar-fill,
  .toast {
    transition: none !important;
  }
}