/* =========================================================
   ERIC FU · Personal Portfolio — v4 (Kettmeir Editorial)
   Inspired by Cantina Kettmeir (Alto Adige, Italy)
   Cream + Navy + Gold · Playfair Display + Outfit
   ========================================================= */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(./assets/fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./assets/fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/font-9.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/font-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/font-10.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/font-11.ttf) format('truetype');
}


/* ---------- 1. RESET + VARIABLES ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Kettmeir palette — cream + navy + gold */
  --bg:         #dfd9d2;          /* primary background — warm cream */
  --surface:    #d4ccbf;          /* card / panel surface */
  --surface-2:  #c2b8a4;          /* elevated panel */
  --line:       #a89e8a;          /* subtle border */

  /* Navy text — Kettmeir's primary brand color */
  --text:       #00205b;
  --text-90:    rgba(0, 32, 91, 0.9);
  --text-60:    rgba(0, 32, 91, 0.62);
  --text-40:    rgba(0, 32, 91, 0.4);
  --text-20:    rgba(0, 32, 91, 0.2);
  --text-10:    rgba(0, 32, 91, 0.08);

  /* Accents — muted, editorial */
  --accent:     #8c6d2a;          /* restrained heritage gold — quiet, not flashy */
  --brick:      #8b2e1a;          /* deep heritage red */
  --ochre:      #8c6d2a;          /* matching muted gold */
  --olive:      #4a6a48;          /* deep olive */
  --plum:       #5a3f78;          /* deep plum */
  --sage:       #3a6b62;          /* deep sage */
  --cream-hi:   #f3ebd9;          /* brighter cream for highlights */
  --dark:       #1c1610;          /* for footer / dark accent panels */

  /* Gold tone — single restrained heritage gold. No animated shimmer,
     no bright highlight stops — keeps the typography quiet and editorial. */
  --gold-tone: #8c6d2a;
  --gold-1:   #8c6d2a;        /* mid */
  --gold-2:   #a88040;        /* slightly lighter for borders */
  --gold-3:   #6e5520;        /* deeper shadow */

  /* Aliases — keep legacy class names */
  --cream:      var(--bg);
  --paper:      var(--surface);
  --cream-2:    var(--surface-2);
  --ink:        var(--text);
  --ink-90:     var(--text-90);
  --ink-60:     var(--text-60);
  --ink-40:     var(--text-40);
  --ink-20:     var(--text-20);
  --ink-10:     var(--text-10);
  --cherry:     var(--brick);
  --rust:       var(--brick);
  --navy:       var(--text);
  --coral:      var(--brick);
  --teal:       var(--sage);
  --violet:     var(--plum);

  /* Type — Playfair Display (Flecha Bronzea substitute) + Outfit (Flecha M substitute) */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Outfit", "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --gutter:    clamp(20px, 4vw, 56px);
  --max:       1320px;
  --pad-y:     clamp(72px, 9vw, 140px);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.95vw, 16px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 1.5. Custom navy cursor (follows the mouse) ---------- */
*, *::before, *::after { cursor: none; }
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  /* Hover SHRINKS the dot to 8px so it never obscures the underlying
     text/button beneath the cursor (Eric: "放在字体上面时要让它变小"). */
  transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s var(--ease-out), background-color .35s var(--ease-out);
  background: var(--text);
  border-radius: 50%;
  will-change: transform;
  opacity: 0;
}
.cursor.is-ready { opacity: 1; }
/* Hover state: collapse to a 8px pinpoint dot. Stays the same navy colour
   so it reads as a precise targeting mark on top of text — the inverse of
   the typical "expand on hover" pattern. */
.cursor.is-hovering { width: 8px; height: 8px; }
/* On dark sections (navy footer / forward) invert the cursor to cream so
   it stays visible against the navy background. */
.forward .cursor,
.footer .cursor,
[data-cursor-dark] .cursor {
  background: var(--bg);
}
@media (hover: none) {
  *, *::before, *::after { cursor: auto; }
  .cursor { display: none; }
}
/* overflow-x: clip (not hidden) so position: sticky on descendants still
   works against the viewport instead of being trapped inside body's
   own scroll container. */
html { overflow-x: clip; }

/* Subtle paper-noise texture like kettmeir's noise.jpg */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

img, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--ease-out);
}

button, input, textarea {
  font-family: inherit;
  color: inherit;
}

::selection {
  background: var(--text);
  color: var(--bg);
}

/* ---------- 2. TYPOGRAPHY ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.018em;
}

.eyebrow {
  /* Same family as the hero title (Playfair Display italic) so the whole
     site uses a single typographic voice — display serif italic across
     header, eyebrow, and title. Slight letter-spacing + uppercase
     keeps the small-label role distinct from the big title. */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; z-index: 2; }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
}

/* ---------- 4. HEADER (centered navy nav, no logo) ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* (Eric Fu logo removed from header per Eric's request — see .nav below
   for the only remaining header element.) */

/* Nav links — Playfair Display italic, lowercase, centered at the top
   of the viewport. All navy to match the hero block below. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
.nav a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.02em;
  position: relative;
  color: var(--text);
  padding-bottom: 4px;
}
/* Persistent navy hairline under every nav label.
   On hover, the line collapses from right to left with a quick ease —
   the "咻一下" swipe-out feel. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--text);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.nav a:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* ---------- 5. HERO — Kettmeir-style scroll-driven cover ---------- */
/* Single-screen cover. A canvas fills the hero and redraws a different
   pre-rendered frame on every scroll progress (kettmeir pattern). The
   caption (name + title) sits on top and sinks + fades as the user
   scrolls through the cover. */
.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin-left: calc(50% - 50vw);
  background: var(--bg);
  overflow: hidden;
}

/* Typography block (eyebrow + title). Each .hero__line is the per-line
   SplitText-style overflow wrapper — the inner span sinks on scroll. */
/* Hero typography — single-line trio anchored to the upper viewport.
   Each word sits in an overflow:hidden wrapper so it can sink DOWN on
   scroll, fading toward the cream background. Stagger is from RIGHT to
   LEFT so the rightmost word drops first, like kettmeir. */
.hero__caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  /* Tighter top distance so the eyebrow + title sit closer to the gold
     header (Eric: "略微往上再提一些些"). */
  top: clamp(95px, 11vh, 160px);
  z-index: 2;
  max-width: none;
  will-change: transform, opacity;
}
.hero__caption .eyebrow {
  /* Tight gap to title (was clamp(20, 2vw, 32px)). */
  margin-bottom: 0;
  display: block;
  /* Full-strength navy, matching the hero title below (Eric: "封面所有
     字体都改成这种蓝色"). */
  color: var(--text);
  font-size: 11px;
}

/* Eric Fu name + eyebrow sit on the same line, sharing one typographic
   voice (Playfair Display italic navy). Eric Fu is in the hero block so
   it stays in sync with the pinned scroll behaviour — both names move
   together as the title sinks. */
.hero__caption-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 26px);
  margin-bottom: clamp(10px, 1.1vw, 18px);
}
.hero__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 1.85vw, 28px);
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
/* The line itself stays as a normal text row (not display:block, no
   overflow:hidden) so the words remain a single horizontal line. */
.hero__title .hero__line {
  display: block;
  line-height: 1.1;
}
/* Each word is an inline-block overflow:hidden sink target. The inner
   <span> is what GSAP translates via yPercent. */
.hero__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.1;
  margin-right: 0.32em;
}
.hero__word > span {
  display: inline-block;
  will-change: transform, opacity;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;       /* keep the three words on one line */
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--text);    /* navy italic — all words stay in the blue family */
}

/* Reference-matched ellipse and downward double-line arrow. */
.hero__hint {
  position: absolute;
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(32px, 4.5vh, 56px);
  z-index: 3;
  width: 72px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--text);
  background: transparent;
  cursor: pointer;
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
  will-change: opacity;
}
.hero__hint svg {
  width: 11px;
  height: 23px;
  fill: currentColor;
  overflow: visible;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation:
    hint-drift 6.4s linear infinite,
    hint-fade 6.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
.hero__hint:hover {
  background-color: rgba(0, 32, 91, 0.05);
}
/* Continuous, constant-speed movement; fade independently before the hidden reset. */
@keyframes hint-drift {
  from { transform: translate3d(0, -6px, 0); }
  to { transform: translate3d(0, 6px, 0); }
}
@keyframes hint-fade {
  0% { opacity: 0; }
  22%, 50% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ---------- 6. INTRO ---------- */

/* ---------- 6. INTRO ---------- */
.intro {
  min-height: 100vh;
  min-height: 100svh; /* mobile-safe fallback */
  padding: var(--pad-y) 0;
  background: var(--bg);
  position: relative;
  display: flex;
  align-items: center;
}
.intro .container {
  width: 100%;
}
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 38px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.intro__lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text);
}
.intro__lede em {
  font-style: italic;
  color: var(--accent);
}

/* ---------- 7. SECTION HEADERS (h-move supported) ---------- */
.section-head {
  padding: var(--pad-y) 0 50px;
  position: relative;
  overflow: hidden;
}
.section-head__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-40);
  display: block;
  margin-bottom: 18px;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform;
}
.section-head__title span {
  display: block;
  will-change: transform;
}
.section-head__title em {
  font-style: italic;
  color: var(--accent);
}
.section-head__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
}
.section-head__meta::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--text-40);
}

/* ---------- 8. BASKETBALL SECTION (split image + content) ---------- */
.court {
  padding: clamp(40px, 6vh, 80px) 0 var(--pad-y);
  background: var(--bg);
}
.court__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 96px);
}
.court__grid > .court__media-grid { flex: 0 0 42%; }
.court__grid > .court__content    { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
  .court__grid { grid-template-columns: 1fr; }
}
.court__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}
.court__media-grid {
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
}
.court__media-grid .court__img {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.court__media-grid .court__img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.court__img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), filter 0.4s var(--ease-out);
  margin: 0;
  will-change: transform, filter;
}
.court__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
}
.court__media-grid:hover .court__img {
  filter: brightness(0.55) saturate(0.8);
  transform: translateY(10px);
}
.court__media-grid:hover .court__img:hover {
  filter: brightness(1) saturate(1);
  transform: translateY(-22px) scale(1.04);
  z-index: 2;
  box-shadow: 0 18px 36px -12px rgba(0, 32, 91, 0.35);
}
@media (max-width: 720px) {
  .court__media-grid .court__img { width: 100%; }
}

/* === COURT · VIDEO PLACEHOLDER (button only — fullscreen lightbox opens on click) === */
.court__video {
  margin-top: clamp(28px, 4vw, 48px);
  align-self: center;
  display: flex;
  justify-content: center;
  transform: translateX(-64px);
}

/* The pill — kettmeir-style, basketball icon + label + double-line arrow */
.court__play-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 16px;
  height: 44px;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(0, 32, 91, 0.45);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
              box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.court__play-pill:hover {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 14px 30px -14px rgba(0, 32, 91, 0.55);
  transform: translateY(-1px);
}
.court__play-bball {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  transition: transform .45s var(--ease-out);
}
.court__play-pill:hover .court__play-bball {
  transform: rotate(-18deg) scale(1.06);
}
.court__play-label {
  display: inline-block;
  white-space: nowrap;
}
.court__play-arrow {
  width: 22px;
  height: 11px;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
  transform: rotate(0deg);
  transition: transform .45s var(--ease-out);
}
.court__play-pill:hover .court__play-arrow {
  transform: translateX(4px);
}
@media (max-width: 720px) {
  .court__play-pill { height: 38px; font-size: 10px; gap: 8px; padding: 0 14px 0 12px; letter-spacing: 0.22em; }
  .court__play-bball { width: 18px; height: 18px; }
  .court__play-arrow { width: 16px; height: 8px; }
}

/* === LIGHTBOX (fullscreen video overlay, close × reverts to button) === */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 12, 24, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
  z-index: 2;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}
.lightbox__frame {
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__video {
  width: 100%;
  max-height: calc(100vh - 96px);
  display: block;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
body.lightbox-open {
  overflow: hidden;
}
@media (max-width: 720px) {
  .lightbox { padding: 64px 16px 24px; }
  .lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 22px; }
  .lightbox__frame, .lightbox__video { max-height: calc(100vh - 88px); }
}

.court__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
.court__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,32,91,0) 60%, rgba(0,32,91,0.35));
  pointer-events: none;
}
.court__caption {
  position: absolute;
  left: 24px; bottom: 24px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.court__content {
  display: flex;
  flex-direction: column;
  padding-right: 0;
}
.court__label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-60);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.court__label::before {
  content: ""; width: 28px; height: 1px; background: var(--text-60);
}
.court__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 26px;
}
.court__title em {
  font-style: italic;
  color: var(--accent);
}
.court__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-90);
  margin-bottom: 32px;
  max-width: 520px;
}
.court__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.court__stat strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.06;
  color: var(--text);
  margin-bottom: 4px;
}
.court__stat span {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
}
.court__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border: 1px solid var(--text);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.court__cta:hover { background: var(--text); color: var(--bg); }
.court__cta svg { width: 16px; }

/* ---------- 9. HEALTH SECTION (3-card deck) ---------- */
.health {
  padding: var(--pad-y) 0;
  background: var(--surface);
}
.health__deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .health__deck { grid-template-columns: 1fr; }
}
.health__card {
  position: relative;
  padding: 36px 32px 38px;
  background: var(--cream-hi);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  overflow: hidden;
}
.health__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 32, 91, 0.08);
}
.health__card--feature {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.health__card--feature .health__eyebrow,
.health__card--feature .health__date { color: rgba(223, 217, 210, 0.7); }
.health__card--feature .health__title,
.health__card--feature .health__num,
.health__card--feature .health__num-label,
.health__card--feature .health__body { color: var(--bg); }
.health__card--feature .health__title em { color: var(--accent); }
.health__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
  margin-bottom: 18px;
}
.health__eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor;
}
.health__date {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
  position: absolute;
  top: 36px; right: 32px;
}
.health__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 18px;
}
.health__title em {
  font-style: italic;
  color: var(--accent);
}
.health__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-90);
  margin-bottom: 28px;
}
.health__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.health__num-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
}
.health__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.health__tag {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-90);
}

.health__media {
  margin: -36px -32px 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
}
.health__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
}
.health__card--feature .health__media { background: rgba(223, 217, 210, 0.08); }
@media (max-width: 720px) {
  .health__media { margin: -36px -24px 20px; }
}

/* ---------- 10. STANFORD SECTION ---------- */
.stanford {
  padding: var(--pad-y) 0;
  background: var(--bg);
}

/* A loose arrangement of four photo prints; upload order runs right to left. */
.stanford__gallery {
  position: relative;
  height: clamp(330px, 43vw, 610px);
  margin: 0 0 clamp(42px, 5vw, 80px);
  isolation: isolate;
}
.stanford__memory {
  position: absolute;
  width: 27%;
  margin: 0;
  transform: rotate(var(--photo-angle));
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.stanford__memory img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
.stanford__memory--fountain {
  right: 1%;
  top: 8%;
  --photo-angle: 4deg;
  z-index: 2;
}
.stanford__memory--hike {
  right: 25%;
  top: 21%;
  --photo-angle: -3deg;
  z-index: 4;
}
.stanford__memory--family {
  right: 49%;
  top: 0;
  --photo-angle: 2deg;
  z-index: 3;
}
.stanford__memory--sunset {
  right: 73%;
  top: 13%;
  --photo-angle: -5deg;
  z-index: 1;
}
@media (hover: hover) {
  .stanford__memory:hover .stanford__print {
    transform: translate3d(0, -5px, 0) scale(1.035);
    box-shadow: 0 18px 32px -16px rgba(28, 22, 16, .34);
  }
}
@media (max-width: 580px) {
  .stanford__gallery {
    height: auto;
    aspect-ratio: .59;
    margin-bottom: 44px;
  }
  .stanford__memory { width: 53%; }
  .stanford__print { padding: 5px 5px 15px; }
  .stanford__memory--fountain { right: 0; top: 0; }
  .stanford__memory--hike { right: 47%; top: 8%; }
  .stanford__memory--family { right: 0; top: 48%; }
  .stanford__memory--sunset { right: 47%; top: 55%; }
}
.stanford__row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: 90px;
}
@media (max-width: 900px) {
  .stanford__row { grid-template-columns: 1fr; }
}
.stanford__row:nth-child(even) {
  grid-template-columns: 0.9fr 1.1fr;
}
.stanford__row:nth-child(even) .stanford__media { order: 2; }
@media (max-width: 900px) {
  .stanford__row:nth-child(even) .stanford__media { order: 0; }
}
.stanford__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}
.stanford__media img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.stanford__media--wide { aspect-ratio: 16 / 11; }
.stanford__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-60);
  margin-bottom: 22px;
}
.stanford__eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--text-60);
}
.stanford__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 22px;
}
.stanford__title em {
  font-style: italic;
  color: var(--accent);
}
.stanford__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-90);
  max-width: 480px;
  margin-bottom: 26px;
}
.stanford__date {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
  margin-bottom: 16px;
}

/* ---------- 11. TRAVEL — horizontal pinned scroll ---------- */
.travel {
  background: var(--surface);
  padding: var(--pad-y) 0 0;
}
.travel__head {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
  padding: 0 var(--gutter);
}
.travel__head .section-head__title {
  font-size: clamp(28px, 3vw, 48px);
}

.travel__pin {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--surface);
}
.travel__track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: 0 clamp(40px, 8vw, 120px);
  will-change: transform;
}
.travel__progress {
  position: absolute;
  left: var(--gutter);
  bottom: 40px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
}
.travel__progress-track {
  width: 200px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.travel__progress-bar {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--text);
  transition: right .1s linear;
}

.place {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: min(90vw, 980px);
  height: min(72vh, 660px);
}
@media (max-width: 700px) {
  .place { grid-template-columns: 1fr; height: auto; }
  .place__image { aspect-ratio: 16 / 11; }
}
.place__image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-hi);
}
.place__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.place__year {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 12px;
  background: rgba(0, 32, 91, 0.7);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.place__content { padding: 0 6px; }
.place__location {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-60);
  margin-bottom: 14px;
}
.place__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 18px;
}
.place__name em { font-style: italic; color: var(--accent); }
.place__story {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-90);
}

/* ---------- 12. FORWARD ---------- */
.forward {
  padding: var(--pad-y) 0;
  background: var(--text);
  color: var(--bg);
}
.forward__inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.forward__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(223, 217, 210, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.forward__eyebrow::before,
.forward__eyebrow::after {
  content: "";
  width: 28px; height: 1px;
  background: rgba(223, 217, 210, 0.4);
}
.forward__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bg);
  margin-bottom: 26px;
}
.forward__title em {
  font-style: italic;
  color: var(--accent);
}
.forward__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(223, 217, 210, 0.85);
  max-width: 620px;
  margin: 0 auto 38px;
}

/* ---------- 13. FOOTER (two-column nav like kettmeir) ---------- */
.footer {
  background: var(--bg);
  color: var(--text);
  padding: var(--pad-y) 0 36px;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .footer__top { grid-template-columns: 1fr; }
}
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 600px) {
  .footer__nav { grid-template-columns: 1fr; }
}
.footer__nav h4 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-60);
  margin-bottom: 18px;
  font-weight: 400;
}
.footer__nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__nav a {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--text);
  position: relative;
  display: inline-block;
  font-style: italic;
}
.footer__nav a:hover { color: var(--accent); }
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer__contact h4 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-60);
  font-weight: 400;
}
.footer__contact-row {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2;
  color: var(--text);
  font-style: italic;
}
.footer__contact-row span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-60);
  font-style: normal;
  margin-top: 4px;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 36px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-60);
}
.footer__bottom .crest {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text);
}

/* ---------- 14. UTILITY & ANIMATION STATES ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .hero, .travel__pin { height: auto; }
}
/* A chapter's heading and full contents share one comfortable viewport. */
.chapter {
  min-height: 100svh;
  padding: 78px 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter > .section-head { padding: 0 0 22px; flex: 0 0 auto; scroll-margin-top: 80px; }
.chapter .section-head__num { font-size: 11px; margin-bottom: 9px; }
.section-head__title { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.08; }
.chapter .section-head__meta { margin-top: 14px; font-size: 9px; }
.chapter > .court, .chapter > .health, .chapter > .stanford { padding: 0; }
.chapter .court__grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1060px;
  margin: 0 auto;
}
.chapter .court__media-grid {
  width: 100%;
  max-width: min(28vw, calc((100svh - 290px) * .75), 300px);
  justify-self: center;
}
.chapter .court__label { font-size: 10px; margin-bottom: 14px; }
.chapter .court__body { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.65; margin-bottom: 20px; max-width: 560px; }
.chapter .court__stats { margin-bottom: 0; gap: 14px; }
.chapter .court__stat strong { font-size: clamp(24px, 2.1vw, 32px); }
.chapter .court__stat span { font-size: 9px; letter-spacing: .15em; }
.chapter .court__video { margin-top: 22px; transform: none; }
.chapter .court__play-pill { height: 38px; font-size: 10px; }
.chapter--stanford .stanford__gallery {
  width: min(100%, calc((100svh - 350px) * 1.9), 1000px);
  height: auto;
  aspect-ratio: 2.05;
  margin: 8px auto 24px;
}
.chapter--stanford .stanford__row { display: block; margin: 0; }
.chapter--stanford .stanford__row > div {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  column-gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.chapter--stanford .stanford__eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 6px; font-size: 9px; }
.chapter--stanford .stanford__date { grid-column: 1; grid-row: 2; margin-bottom: 10px; font-size: 9px; }
.chapter--stanford .stanford__title { grid-column: 1; grid-row: 3 / 5; font-size: clamp(24px, 2.3vw, 33px); margin: 0; }
.chapter--stanford .stanford__body { grid-column: 2; grid-row: 1 / 4; font-size: clamp(12px, 1vw, 14px); line-height: 1.6; margin: 0; }
.chapter--stanford .health__tags { grid-column: 2; grid-row: 4; margin-top: 12px; }
.chapter--stanford .health__tag { font-size: 8px; padding: 4px 9px; }
.intro { padding: 80px 0 32px; }
.intro__grid { gap: 26px; }
.intro__lede { font-size: clamp(21px, 2.2vw, 32px); }
.travel { padding: 0; }
.travel__pin { height: 100svh; min-height: 0; }
.travel__head { position: absolute; top: 78px; left: 0; right: 0; z-index: 5; margin: 0 auto; }
.travel__head .section-head__num { font-size: 11px; margin-bottom: 8px; }
.travel__head .section-head__title { font-size: clamp(26px, 2.7vw, 40px); }
.travel__head > p { font-size: 16px !important; margin-top: 10px !important; }
.travel__track { top: 220px; bottom: 78px; }
.place { height: min(100%, 480px); }
.place__name { font-size: clamp(24px, 2.8vw, 40px); }
.place__story { font-size: clamp(12px, 1vw, 15px); }
.forward { min-height: 100svh; display: grid; place-items: center; padding: 90px 0 40px; }
.forward__title { font-size: clamp(28px, 2.8vw, 40px); }
.footer { padding-top: 78px; }
@media (min-width: 600px) and (max-width: 900px) {
}
@media (max-width: 599px) {
  .chapter { padding: 72px 0 24px; }
  .chapter > .section-head { padding-bottom: 18px; }
  .section-head__title { font-size: 25px; }
  .chapter .court__grid { grid-template-columns: .7fr 1.3fr; gap: 17px; }
  .chapter .court__media-grid { max-width: 100%; align-self: start; }
  .chapter .court__label { font-size: 8px; letter-spacing: .1em; gap: 6px; }
  .chapter .court__label::before { width: 14px; }
  .chapter .court__body { font-size: 11px; line-height: 1.55; margin-bottom: 16px; }
  .chapter .court__stat strong { font-size: 22px; }
  .chapter .court__stat span { font-size: 7px; letter-spacing: .07em; }
  .chapter .court__stats { gap: 6px; }
  .chapter .court__video { margin-top: 18px; }
  .chapter .court__play-pill { font-size: 8px; padding: 0 10px; gap: 7px; letter-spacing: .16em; }
  .chapter--stanford .stanford__gallery { width: min(85%, 260px); aspect-ratio: .8; margin: 8px auto 36px; }
  .chapter--stanford .stanford__memory--family { top: 43%; }
  .chapter--stanford .stanford__memory--sunset { top: 50%; }
  .chapter--stanford .stanford__row > div { grid-template-columns: 1fr 1.1fr; gap: 0 18px; }
  .chapter--stanford .stanford__eyebrow, .chapter--stanford .stanford__date { font-size: 7px; letter-spacing: .1em; }
  .chapter--stanford .stanford__title { font-size: 24px; }
  .chapter--stanford .stanford__body { font-size: 11px; }
  .chapter--stanford .health__tags { gap: 4px; }
  .chapter--stanford .health__tag { font-size: 6px; padding: 3px 6px; }
  .travel__head { top: 72px; }
  .travel__track { top: 215px; bottom: 75px; }
  .place { height: 100%; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; }
  .place__name { font-size: 24px; margin-bottom: 10px; }
  .place__story { font-size: 12px; }
}

/* Photo planes keep a fixed stacking order and fixed pointer targets. */
.stanford__print {
  padding: clamp(4px, .55vw, 8px);
  padding-bottom: clamp(12px, 1.6vw, 22px);
  background: #f3ebd9;
  box-shadow: 0 7px 14px -9px rgba(28,22,16,.3), 0 20px 40px -25px rgba(28,22,16,.32);
  pointer-events: none;
  transform: translate3d(0,0,0);
  transition: transform .65s cubic-bezier(.22,.61,.36,1), box-shadow .65s ease;
}
/* Restore the original scale, with only a small reduction. */
.section-head__title, .travel__head .section-head__title { font-size: clamp(30px, 3.2vw, 48px); }
.chapter .court__grid { max-width: 1200px; grid-template-columns: .9fr 1.1fr; }
.chapter .court__media-grid { max-width: min(40vw, calc((100svh - 270px) * .75), 410px); }
.chapter .court__label { font-size: 11px; margin-bottom: 18px; }
.chapter .court__body { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.chapter .court__stat strong { font-size: clamp(28px, 2.4vw, 36px); }
.chapter .court__stat span { font-size: 10px; }
.chapter .court__video { align-self: flex-start; justify-content: flex-start; transform: none; margin-top: 24px; }
.chapter .court__play-pill { height: 42px; font-size: 11px; }
.intro__lede { font-size: clamp(25px, 2.5vw, 35px); }
.chapter--stanford .stanford__gallery { width: min(100%, calc((100svh - 300px) * 1.9), 1120px); }
.chapter--stanford .stanford__row > div { align-items: center; }
.chapter--stanford .stanford__eyebrow { grid-column: 1; grid-row: 1; font-size: 11px; margin: 0; }
.chapter--stanford .stanford__body { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.65; }
.place__story { font-size: 14px; }
.forward__body { font-size: 15px; }
.footer__nav { grid-template-columns: 1fr; }
.farewell { padding-top: 80px; padding-bottom: 60px; }
.farewell__title { font-family: var(--font-display); font-size: clamp(30px,3.2vw,46px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 clamp(28px,4vw,56px); }
.farewell__title em { color: var(--accent); }
.farewell__gallery { display: grid; grid-template-columns: 1.08fr 1fr 1fr; gap: clamp(16px,2.2vw,32px); align-items: center; padding-bottom: 30px; }
.farewell__photo { margin: 0; }
.farewell__photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; }
.farewell__photo--dinner { transform: translateY(28px); }
.farewell__photo--friends { transform: translateY(-10px); }
@media (max-width: 900px) {
}
@media (max-width: 760px) {
  .farewell__gallery { grid-template-columns: 1fr 1fr; gap: 20px; }
  .farewell__photo--night { grid-column: 1 / -1; width: min(100%, 520px); justify-self: center; }
  .farewell__photo--dinner, .farewell__photo--friends { transform: none; }
}
@media (max-width: 599px) {
  .section-head__title, .travel__head .section-head__title { font-size: 28px; }
  .chapter .court__grid { grid-template-columns: 1fr; gap: 24px; }
  .chapter .court__media-grid { max-width: min(70%,270px); }
  .chapter .court__label { font-size: 10px; }
  .chapter .court__body { font-size: 14px; }
  .chapter .court__stat span { font-size: 9px; }
  .chapter .court__play-pill { font-size: 10px; }
  .chapter--stanford .stanford__gallery { width: min(90%,300px); margin-bottom: 60px; }
  .chapter--stanford .stanford__row > div { grid-template-columns: 1fr; gap: 12px; }
  .chapter--stanford .stanford__eyebrow { grid-column: 1; grid-row: 1; font-size: 10px; }
  .chapter--stanford .stanford__body { grid-column: 1; grid-row: 2; font-size: 14px; }
  .stanford__print { padding: 5px 5px 15px; }
  .farewell { padding-bottom: 40px; }
}

/* Close the excess space around Stanford and its farewell continuation. */
.chapter--stanford {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 78px;
  padding-bottom: 22px;
}
.chapter--stanford .stanford__gallery { margin-bottom: 20px; }
.farewell.chapter {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 30px;
  padding-bottom: 48px;
}
.farewell__title { margin-bottom: 26px; }
.farewell__gallery { padding-bottom: 10px; }
/* Natural 4:3 photos and a centered, evenly balanced deck. */
.chapter--health { background: var(--surface); padding-top: 78px; padding-bottom: 42px; }
.chapter--health .container { max-width: 1240px; }
.chapter--health .health__deck {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(18px,2vw,28px);
  align-items: stretch;
}
.chapter--health .health__card {
  padding: 0 22px 26px;
  display: flex;
  flex-direction: column;
}
.chapter--health .health__media {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  margin: 0 -22px 22px;
}
.chapter--health .health__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.chapter--health .health__eyebrow { font-size: 10px; letter-spacing: .14em; margin-bottom: 14px; }
.chapter--health .health__title { font-size: clamp(21px,1.8vw,26px); margin-bottom: 14px; }
.chapter--health .health__body { font-size: 14px; line-height: 1.65; margin-bottom: 22px; flex: 1 0 auto; }
.chapter--health .health__num { display: block; font-size: clamp(36px,3.3vw,48px); margin-bottom: 6px; }
.chapter--health .health__num-label { font-size: 10px; letter-spacing: .14em; }
/* Keep the pointer targets and photo stacking fixed while the image comes forward. */
.stanford__print { transform-origin: center center; }
.court__media-grid:hover .court__img,
.court__media-grid:hover .court__img:hover { transform: none; filter: none; }
.court__img img, .health__media img, .farewell__photo img {
  transition: transform .65s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
}
.farewell__photo { overflow: hidden; }
@media (hover:hover) {
  .court__img:hover img, .health__media:hover img, .farewell__photo:hover img { transform: scale(1.035); }
}
@media (max-width: 900px) and (min-width: 681px) {
  .chapter--health .health__card { padding: 0 16px 22px; }
  .chapter--health .health__media { margin: 0 -16px 18px; }
  .chapter--health .health__body { font-size: 13px; }
  .chapter--health .health__title { font-size: 21px; }
}
@media (max-width: 680px) {
  .chapter--health .health__deck { grid-template-columns: 1fr; max-width: 430px; gap: 26px; }
  .chapter--health .health__body { font-size: 14px; }
  .chapter--health .health__title { font-size: 25px; }
  .chapter--health .health__num { font-size: 42px; }
  .chapter--stanford .stanford__gallery { margin-bottom: 56px; }
  .farewell.chapter { padding-top: 24px; padding-bottom: 36px; }
}
/* On shorter desktop windows, tighten typography and spacing rather than flatten photos. */
@media (min-width: 681px) and (max-height: 780px) {
  .chapter--health { padding-top: 70px; padding-bottom: 24px; }
  .chapter--health > .section-head { padding-bottom: 16px; }
  .chapter--health .section-head__title { font-size: clamp(28px,2.8vw,36px); }
  .chapter--health .health__card { padding-bottom: 18px; }
  .chapter--health .health__media { margin-bottom: 16px; }
  .chapter--health .health__eyebrow { margin-bottom: 9px; }
  .chapter--health .health__title { font-size: 22px; margin-bottom: 10px; }
  .chapter--health .health__body { font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }
  .chapter--health .health__num { font-size: 36px; margin-bottom: 4px; }
}