/* ==================================================================
   HIS — About page. Loads after styles.css; everything below the hero
   uses the Academics classes unchanged (fhead, approach-body, collage,
   tcard, growth, step-card, footer, and the scroll-drawn line system).
   ================================================================== */

/* ---------- hero (layout measured from AboutPage.pdf) ---------- */
.ab-hero { position: relative; height: 860vh; }
.ab-stage { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; background: #fff; }

.ab-title {
  position: absolute; left: 4.9vw; top: 8vh; z-index: 3;
  font-family: "Raleway", system-ui, sans-serif; font-weight: 300;
  font-size: clamp(32px, 3.8vw, 72px); line-height: 1.12; color: var(--ink);
}
.ab-title .ln > span { animation: lineUp 1.3s var(--ease-out) 0.3s forwards; }
.ab-title .ln:nth-child(2) > span { animation-delay: 0.45s; }

.ab-lead {
  position: absolute; left: 4.9vw; top: calc(8vh + 9.4vw); z-index: 3; width: 26vw; min-width: 220px;
  font-family: "Raleway", system-ui, sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.05vw, 17px); line-height: 1.4; color: var(--ink);
  opacity: 0; animation: fadeTo 1s ease 0.9s forwards;
}

/* ---------- the valley, full bleed ----------
   Every ridge is a 2:1 SVG anchored to the bottom of the stage. It is never
   narrower than its natural ratio (176vh wide for 88vh tall), so wide screens
   stretch it slightly flatter and tall screens crop the sides, but peaks are
   never squeezed. Distance is shown only by tone: no outlines, no shadows.
   Same language as the v2 globe: muted sage-to-slate lands, trees and the school
   as quiet silhouettes, warm lit windows, a light paper grain. */
.ab-scene {
  /* the ridges' box: --vlh tall, --vlw wide, anchored to the bottom and centred (offset by --shift of its width) */
  --vlh: 88vh; --vlw: max(110vw, 176vh); --shift: 0;
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(0deg, #34465a 0 2%, transparent 2%),
    linear-gradient(180deg, #e3e3e2 0%, #ece8e2 34%, #f3e8da 58%, #f1e6d8 100%);
}
/* paper grain over the whole scene, as on the globe: a small pre-rendered tile, no blending, so it costs nothing per frame */
.ab-scene::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0.7; background: url("assets/valley/grain.png") repeat; }
.pl { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 4vh, 0); animation: plIn 1.8s var(--ease-out) forwards; animation-delay: calc(0.15s + var(--i) * 0.12s); }
@keyframes plIn { to { opacity: 1; transform: none; } }
.pl-in { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.vl { position: absolute; bottom: 0; left: calc(50% + var(--shift) * var(--vlw)); height: var(--vlh); width: var(--vlw); max-width: none; transform: translateX(-50%); display: block; }
/* anything placed at an art coordinate (--x, --y) on the ridges */
.vl-at { position: absolute; left: calc(50% + (var(--x) / 1600 - 0.5 + var(--shift)) * var(--vlw)); top: calc(100% - var(--vlh) + var(--y) / 800 * var(--vlh)); }
/* The campus, the window glass and the classroom are placed in screen pixels by about.js every frame
   (left / top / width / height, not a transform), so the vector art is redrawn sharp at any zoom. */
.vl-campus { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vl-campus > svg, .vl-room-in > svg { display: block; width: 100%; height: 100%; }
/* reflections on the open window, fading as the camera comes up to it */
.vl-glass { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0;
  background: linear-gradient(115deg, rgba(40, 52, 64, 0.82) 0%, rgba(40, 52, 64, 0.7) 38%, rgba(220, 230, 236, 0.32) 46%, rgba(40, 52, 64, 0.66) 54%, rgba(40, 52, 64, 0.8) 100%); }
/* the classroom fills the screen, clipped to the window until the camera is through it */
.vl-room { position: absolute; inset: 0; visibility: hidden; }
.vl-room-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* a low sun, kept round however the ridges stretch: centred where the art expects it (1130, 352) */
.vl-sun::before, .vl-sun::after { content: ""; position: absolute; left: 70.6%; top: 44%; border-radius: 50%; transform: translate(-50%, -50%); }
.vl-sun::before { width: 100vh; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(246, 214, 172, 0.55), rgba(246, 222, 190, 0.26) 35%, rgba(246, 232, 214, 0) 100%); }
.vl-sun::after { width: 5vh; aspect-ratio: 1; background: #f6e3bd; }
/* mist lying in the fold in front of a ridge. Three layers: a soft base bank, and two layers of
   wisps (assets/valley/mist.png, fractal noise stretched sideways) drifting past each other at
   different speeds, so it never looks like a stamped shape. A vertical mask keeps it in the fold.
   The texture is a pre-rendered PNG and the wisps move by transform only, so drifting is cheap. */
.vl-mist {
  --tile: calc(var(--h) * 5);                       /* the wisp texture is 5:1 */
  position: absolute; left: -25%; width: 150%; height: var(--h); opacity: var(--o);
  top: calc(100% - var(--vlh) + var(--y) / 800 * var(--vlh) - var(--h) / 2); will-change: transform;
  background:
    radial-gradient(28% 46% at 22% 56%, rgba(250, 248, 243, 0.8), rgba(250, 248, 243, 0) 100%),
    radial-gradient(34% 40% at 55% 52%, rgba(250, 248, 243, 0.75), rgba(250, 248, 243, 0) 100%),
    radial-gradient(24% 44% at 82% 58%, rgba(250, 248, 243, 0.8), rgba(250, 248, 243, 0) 100%),
    linear-gradient(180deg, rgba(250, 248, 243, 0) 20%, rgba(250, 248, 243, 0.42) 55%, rgba(250, 248, 243, 0) 90%);
}
.vl-mist::before, .vl-mist::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + var(--tile) * 1.4); will-change: transform;
  background: url("assets/valley/mist.png") repeat-x 0 50% / var(--tile) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%);
  animation: mistDrift 110s linear infinite;
}
.vl-mist::after { background-size: calc(var(--tile) * 1.4) 130%; background-position: 0 60%; opacity: 0.6; animation-name: mistDriftWide; animation-duration: 170s; animation-direction: reverse; }
/* each layer slides exactly one tile, then repeats seamlessly */
@keyframes mistDrift { to { transform: translate3d(calc(var(--tile) * -1), 0, 0); } }
@keyframes mistDriftWide { to { transform: translate3d(calc(var(--tile) * -1.4), 0, 0); } }
.vl-mist.thin::before { opacity: 0.7; }
.vl-mist.thin { background: radial-gradient(30% 50% at 34% 50%, rgba(250, 248, 243, 0.85), rgba(250, 248, 243, 0) 100%), radial-gradient(24% 50% at 80% 50%, rgba(250, 248, 243, 0.8), rgba(250, 248, 243, 0) 100%); }
/* the whiteboard: a white sheet that takes over the screen, and the Story written on the board. The copy is laid
   out at its final, full-screen size and scaled by about.js to sit on the board until the camera arrives. */
.ab-sheet { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
/* Our Story, on the white the hero ends on: ordinary content that scrolls in once the board has locked */
.ab-onboard { position: relative; display: flex; flex-direction: column; gap: 5vh; padding: 10vh 9vw 12vh; background: #fff; color: var(--ink); }
.ab-onboard .ab-scrub { align-self: auto; color: var(--ink); }
/* a stroke of gold marker under the title, as if written on the board */
.ab-marker { display: block; width: min(18em, 46vw); height: 1.1em; margin-top: 1.4vh; overflow: visible; }
.ab-marker path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the scene canvas (about.js draws everything on it) */
.vl-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.vl-canvas.vl-front { z-index: 3; }
/* leaves on the wind, drawn by about.js in front of the valley */
.vl-leaves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* lifts the copy off the landscape while the story is read */
.vl-veil { position: absolute; inset: 0; z-index: 1; opacity: 0; background: radial-gradient(60% 46% at 50% 26%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4) 55%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 68%); mask-image: linear-gradient(180deg, #000 40%, transparent 68%); }
@media (max-width: 900px) {
  .ab-scene { --vlh: 62vh; --vlw: max(110vw, 124vh); --shift: -0.07; } /* brings the school into a phone-width view */
  .vl-veil { background: rgba(255, 255, 255, 0.88); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 80%); mask-image: linear-gradient(180deg, #000 55%, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .pl { animation: none; opacity: 1; transform: none; }
  .vl-mist::before, .vl-mist::after { animation: none; }
  .vl-leaves { display: none; }
}

/* names the stage you have scrolled to; same card language as the Academics hero */
.ab-tag {
  position: absolute; left: 4.9vw; bottom: 5vh; z-index: 3;
  display: flex; align-items: center; gap: 24px; padding: 16px 20px;
  background: #fff; border: 1px solid #dcdce1; border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  opacity: 0; animation: fadeTo 1s ease 1.4s forwards;
  transition: border-color 0.4s, background 0.4s, color 0.4s;
}
.ab-tag:hover, .ab-tag:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; outline: none; }
.ab-tag .t { display: block; min-width: 11em; transition: opacity 0.25s, transform 0.5s var(--ease-out); }
.ab-tag.swap .t { opacity: 0; transform: translateY(8px); }
.ab-tag em { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); transition: color 0.4s; }
.ab-tag:hover em, .ab-tag:focus-visible em { color: #fff; }
.ab-tag strong { display: block; margin-top: 5px; font-family: "Raleway", sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.ab-tag small { display: block; margin-top: 3px; font-size: 12px; color: var(--grey-text); transition: color 0.4s; }
.ab-tag:hover small, .ab-tag:focus-visible small { color: rgba(255, 255, 255, 0.85); }
.ab-tag b { font-weight: 400; transition: transform 0.45s var(--ease-spring); }
.ab-tag:hover b { transform: translateX(5px); }
.ab-dots { display: flex; gap: 6px; }
.ab-dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background 0.4s, transform 0.4s var(--ease-spring); }
.ab-dots i.on { background: var(--gold); border-color: var(--gold); transform: scale(1.35); }
.ab-tag:hover .ab-dots i.on { background: #fff; border-color: #fff; }

/* ---------- hero camera overlays ---------- */
/* the one opening line, as on the Academics hero: light, centred, gone as soon as you scroll */
.ab-head {
  position: absolute; left: 0; right: 0; top: 17vh; z-index: 4; margin: 0; padding: 0 6vw; pointer-events: none; text-align: center;
  font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(24px, 2.6vw, 46px); line-height: 1.2; color: var(--ink);
  animation: abHeadIn 1.4s var(--ease-out) 0.3s backwards;
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.ab-head.gone { opacity: 0; transform: translateY(-14px); }
@keyframes abHeadIn { from { opacity: 0; translate: 0 14px; } }
.ab-card {
  position: absolute; top: 30vh; right: 4.9vw; z-index: 3; width: clamp(280px, 27vw, 410px); padding: 28px 30px 20px;
  background: #fff; border: 1px solid #dcdce1; border-radius: var(--radius); color: var(--ink);
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
.ab-card.l { right: auto; left: 4.9vw; }
.ab-card h3 { font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(28px, 2.6vw, 46px); line-height: 1.08; }
.ab-card .sub { margin-top: 6px; font-size: 13px; color: var(--grey-text); }
.ab-card .txt { margin-top: 16px; font-size: clamp(13px, 1vw, 16px); line-height: 1.55; }
.ab-card ul { margin: 18px 0 0; padding: 0; list-style: none; }
.ab-card li { display: grid; grid-template-columns: 5.6em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid #e6e6ea; font-size: 13px; line-height: 1.4; }
.ab-card li span { color: var(--gold); font-weight: 600; }

/* ---------- voyage: the plate frame opens onto the campus photo -> words light up ---------- */
.ab-voyage { position: relative; height: 280vh; }
.ab-vstick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: 11vh 9vw 9vh; }
.ab-vphoto { position: absolute; inset: 0; z-index: 0; clip-path: inset(6vh 4.9vw 6vh 4.9vw round 20px); }
.ab-vphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-vphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(15, 22, 60, 0.4), rgba(15, 22, 60, 0.78)); }
.ab-vhead, .ab-scrub { position: relative; z-index: 1; }
.ab-scrub { align-self: end; max-width: 62vw; font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(18px, 1.95vw, 34px); line-height: 1.36; color: var(--ink); transition: color 0.5s; }
.ab-scrub .w { opacity: 0.22; transition: opacity 0.35s; }
.ab-scrub .w.lit { opacity: 1; }
.ab-vstick.on-photo .ab-scrub, .ab-vstick.on-photo .cap-title, .ab-vstick.on-photo .cap-title .ln > span { color: #fff; }


/* ---------- numbers: ledger ---------- */
.ab-log { padding: 9vw 9vw 8vw; background: var(--navy, #1f2b73); color: #fff; }
.ab-log-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 6vw; }
.ab-log-top { align-self: start; position: sticky; top: 14vh; }
.ab-lrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 2vw; padding: 2vw 0 2.2vw; }
.ab-lrow::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.7); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out); }
.ab-lrow.in::before { transform: scaleX(1); }
.ab-lrow .num { font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(54px, 7.4vw, 130px); line-height: 0.95; font-variant-numeric: tabular-nums; }
.ab-lrow p { max-width: 22em; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.ab-lrow p b { display: block; margin-bottom: 4px; font-weight: 600; color: #fff; }

/* ---------- visit ---------- */

.ab .a:focus-visible, .ab a:focus-visible, .ab button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- tablet / mobile ---------- */
@media (max-width: 900px) {
  .ab-hero { height: 760vh; }
  .ab-title { top: 14vh; font-size: clamp(32px, 9vw, 46px); }
  .ab-lead { left: 4.9vw; top: calc(14vh + 26vw); width: 72vw; font-size: 14px; }
  .ab-tag { bottom: 3vh; right: 4.9vw; gap: 14px; padding: 12px 16px; }
  .ab-tag .t { min-width: 0; flex: 1; }
  .ab-dots { display: none; }
  .ab-card, .ab-card.l { top: auto; bottom: calc(3vh + 88px); left: 4.9vw; right: 4.9vw; width: auto; padding: 18px 20px 8px; }
  .ab-card h3 { font-size: 26px; }
  .ab-card .txt { margin-top: 10px; font-size: 13px; }
  .ab-card ul { margin-top: 10px; }
  .ab-card li:nth-child(n+3) { display: none; }

  .ab-voyage { height: 240vh; }
  .ab-vphoto { clip-path: inset(6vh 4.9vw 5vh 4.9vw round 20px); }
  .ab-vstick { padding: 14vh 7vw 8vh; }
  .ab-scrub { max-width: none; font-size: clamp(17px, 4.6vw, 24px); }


  .ab-log { padding: 16vw 7vw 12vw; }
  .ab-log-grid { grid-template-columns: 1fr; gap: 40px; }
  .ab-log-top { position: static; }
  .ab-lrow { grid-template-columns: 1fr; gap: 8px; padding: 22px 0 26px; }
  .ab-lrow .num { font-size: clamp(56px, 18vw, 96px); }

}

@media (prefers-reduced-motion: reduce) {
  .ab-lrow::before { transition: none; }
}

/* ---------- faith ---------- */

/* ---------- people: founders, leadership, board ---------- */
.ab-leaders { padding: 8vw 9vw; }
.ab-leaders .body { margin-top: 1.6vw; max-width: 34em; }
.ab-founders { display: grid; grid-template-columns: 6fr 5fr; gap: 5vw; align-items: center; margin-top: 5vw; }
.ab-fphoto { margin: 0; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #eef0f4; }
.ab-fphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-role { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ab-fcopy h3 { margin-top: 10px; font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(38px, 4.6vw, 84px); line-height: 1.04; color: var(--ink); }
.ab-fcopy blockquote { margin: 2.2vw 0 0; padding-left: 1.4vw; border-left: 2px solid var(--gold); font-family: "Raleway", system-ui, sans-serif; font-size: clamp(17px, 1.5vw, 25px); line-height: 1.45; color: var(--ink); }
.ab-fcopy p:last-child { margin-top: 1.6vw; max-width: 30em; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--grey-text); }
.ab-grouph { margin-top: 7vw; font-family: "Raleway", system-ui, sans-serif; font-weight: 400; font-size: clamp(22px, 2vw, 34px); color: var(--ink); }
.ab-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4vw; margin-top: 2.4vw; align-items: start; }
.ab-person { opacity: 0; transform: translateY(24px); transition: opacity 0.9s, transform 1s var(--ease-out); }
.ab-person.in { opacity: 1; transform: none; }
.ab-person:nth-child(2) { transition-delay: 0.1s; } .ab-person:nth-child(3) { transition-delay: 0.2s; } .ab-person:nth-child(4) { transition-delay: 0.3s; }
.ab-person .pic { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); background: #e6e8ee; overflow: hidden; }
.ab-person .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-person h4 { margin-top: 16px; font-family: "Raleway", system-ui, sans-serif; font-weight: 500; font-size: clamp(16px, 1.4vw, 22px); }
.ab-person.tbc h4 { color: var(--grey-text); font-weight: 400; }
.ab-person p { margin-top: 4px; font-size: 13px; color: var(--grey-text); }
.ab-person small { display: block; margin-top: 10px; max-width: 26em; font-size: 13px; line-height: 1.55; color: var(--grey-text); }
.ab-board { display: grid; grid-template-columns: 4fr 8fr; gap: 5vw; align-items: start; margin-top: 7vw; padding-top: 3vw; border-top: 1px solid #dcdce1; }
.ab-board .ab-grouph { margin-top: 0; }
.ab-board-head { position: sticky; top: 14vh; }
.ab-board-head p { margin-top: 14px; max-width: 24em; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--grey-text); }
.ab-bdphoto { margin: 0; }
.ab-bdphoto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.ab-bdphoto figcaption { margin-top: 18px; }
.ab-bdphoto figcaption > span { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ab-blist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4vw; margin: 10px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #dcdce1; }
.ab-blist b { display: block; font-family: "Raleway", system-ui, sans-serif; font-weight: 500; font-size: clamp(13px, 1vw, 16px); color: var(--ink); }
.ab-blist li:nth-child(-n+4) b { font-weight: 400; color: var(--grey-text); }
.ab-blist small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--grey-text); }

/* ---------- teachers: staff photo and cards ---------- */
.ab-staff { position: relative; margin: 6vw 0 0; border-radius: var(--radius); overflow: hidden; }
.ab-staff img { display: block; width: 100%; aspect-ratio: 2.1 / 1; object-fit: cover; object-position: 50% 62%; }
.ab-staff figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 4vw 2vw 1.6vw; font-size: clamp(13px, 1vw, 16px); color: #fff; background: linear-gradient(transparent, rgba(15, 22, 60, 0.7)); }
.ab-faculty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; margin: 1.6vw 0 0; padding: 0; list-style: none; }
.ab-tcard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; color: var(--ink); }
.ab-tcard .pic { position: relative; aspect-ratio: 4 / 5; background: #e6e8ee; }
.ab-tcard .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-tcard .txt { display: flex; flex-direction: column; padding: 16px 18px 20px; }
.ab-tcard b { font-family: "Raleway", system-ui, sans-serif; font-weight: 500; font-size: clamp(16px, 1.3vw, 21px); color: var(--grey-text); }
.ab-tcard span { margin-top: 6px; font-size: clamp(13px, 1vw, 15px); font-weight: 600; color: var(--ink); }
.ab-tcard small { margin-top: 2px; font-size: 12px; color: var(--grey-text); }

/* ---------- teachers extras ---------- */
.ab-log-p { margin-top: 1.6vw; max-width: 22em; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.ab-subjects { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2.4vw; border-top: 1px solid rgba(255, 255, 255, 0.7); }
.ab-subjects span { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; font-size: clamp(13px, 1vw, 16px); }
.ab-log-link { display: inline-block; margin-top: 2.4vw; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: #fff; font-weight: 600; text-decoration: none; }

/* ---------- campus ---------- */

@media (max-width: 900px) {
  .ab-leaders { padding: 14vw 7vw; }
  .ab-founders, .ab-board { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .ab-fcopy blockquote { margin-top: 18px; padding-left: 14px; }
  .ab-grouph { margin-top: 56px; }
  .ab-people { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
  .ab-blist li { padding: 14px 0; }
  .ab-board-head { position: static; }
  .ab-blist { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .ab-staff { margin-top: 48px; }
  .ab-staff img { aspect-ratio: 4 / 3; }
  .ab-staff figcaption { padding: 40px 16px 14px; }
  .ab-faculty { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .ab-tcard .txt { padding: 12px 12px 16px; }
  .ab-subjects { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-person { opacity: 1; transform: none; transition: none; }
}

/* ---------- refinements ---------- */
.ab-vtop { position: relative; z-index: 1; }
.ab-ch { display: flex; align-items: baseline; gap: 8px; margin: 0 0 1.4vw; font-size: 13px; color: var(--grey-text); transition: color 0.5s; }
.ab-ch b { font-family: "Raleway", system-ui, sans-serif; font-weight: 500; font-size: 15px; color: var(--gold); }
.ab-vstick.on-photo .ab-ch, .ab-log .ab-ch { color: rgba(255, 255, 255, 0.72); }
.ab-card .no { position: absolute; top: 24px; right: 26px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--gold); }
@media (min-width: 901px) {
  .ab-card { top: 11vh; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(220, 220, 225, 0.9); }
}
@media (max-width: 900px) { .ab-card .no { display: none; } }

/* the one story, told as you scroll, over the valley */
/* the story, in the sky above the campus: between the two scene canvases, so the school can pass in front
   of it. about.js scales it up from the point the camera is heading for as the camera closes in. */
.ab-story {
  transform-origin: 50% 0;
  position: absolute; left: 50%; top: 13vh; z-index: 2; width: min(66vw, 52em); margin: 0 0 0 calc(min(66vw, 52em) / -2); opacity: 0;
  text-align: center; font-family: "Raleway", system-ui, sans-serif; font-weight: 400; font-size: clamp(17px, 1.5vw, 26px); line-height: 1.5;
  color: var(--ink); pointer-events: none;
}
/* each word is invisible until it appears (about.js fades them up in step with the zoom) */
.ab-story .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
@media (max-width: 900px) {
  .ab-story { left: 5vw; right: 5vw; width: auto; margin-left: 0; top: 11vh; font-size: 15px; line-height: 1.5; }
  .ab-head { top: 14vh; font-size: clamp(22px, 6.4vw, 32px); }
  .ab-lead { display: none; }
}
@media (max-width: 900px) { .ab-onboard { padding: 8vh 7vw 12vh; gap: 4vh; } }

/* ==================================================================
   Story, Vision & Mission, Core Values, Campus, Apply
   ================================================================== */
/* ---------- 01 our story ---------- */
.ab-onboard { gap: 0; padding: 10vh 9vw 9vw; }
.ab-onboard .ab-scrub { max-width: 30em; margin-top: 4vw; font-size: clamp(22px, 2.6vw, 44px); line-height: 1.3; }
.ab-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin: 6vw 0 0; }
.ab-facts > div { padding-top: 1.4vw; border-top: 1px solid #dcdce1; }
.ab-facts dt { font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(34px, 3.6vw, 62px); line-height: 1; color: var(--ink); }
.ab-facts dd { margin: 12px 0 0; max-width: 20em; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55; color: var(--grey-text); }

/* ---------- 02 vision & mission ---------- */
.ab-vm { display: grid; grid-template-columns: 4fr 8fr; gap: 3vw 5vw; padding: 8vw 9vw; border-top: 1px solid #dcdce1; margin: 0 9vw; padding-left: 0; padding-right: 0; }
.ab-vm-body { display: grid; gap: 3.4vw; }
.ab-vm-item h3, .ab-camp-info h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.ab-vm-item p { margin-top: 14px; max-width: 34em; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.65; color: var(--grey-text); }
.ab-vm-item p.big { max-width: 22em; font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(24px, 2.6vw, 44px); line-height: 1.28; color: var(--ink); }
.ab-vm-photo { grid-column: 1 / -1; margin: 2vw 0 0; border-radius: var(--radius); overflow: hidden; }
.ab-vm-photo img { display: block; width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; object-position: 50% 55%; }

/* ---------- 03 core values ---------- */
.ab-values { padding: 4vw 9vw 9vw; }
.ab-vals-head .body { margin-top: 1.2vw; }
.ab-vals { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4vw 0 0; padding: 0; list-style: none; border-top: 1px solid #dcdce1; border-left: 1px solid #dcdce1; }
.ab-vals li { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 1.8vw 1.8vw 2.2vw; border-right: 1px solid #dcdce1; border-bottom: 1px solid #dcdce1; transition: color 0.45s, opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.ab-vals li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy, #1f2b73); clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease-out); }
.ab-vals li:hover { color: #fff; }
.ab-vals li:hover::before { clip-path: inset(0); }
.ab-vals span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); }
.ab-vals h3 { margin-top: 4.4vw; font-family: "Raleway", system-ui, sans-serif; font-weight: 400; font-size: clamp(20px, 1.8vw, 30px); line-height: 1.15; color: inherit; }
.ab-vals p { margin-top: 12px; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.6; color: var(--grey-text); transition: color 0.45s; }
.ab-vals li:hover p { color: rgba(255, 255, 255, 0.8); }
.ab-vals li.reveal:nth-child(4n+2) { transition-delay: 0.06s; } .ab-vals li.reveal:nth-child(4n+3) { transition-delay: 0.12s; } .ab-vals li.reveal:nth-child(4n+4) { transition-delay: 0.18s; }

/* ---------- 06 campus ---------- */
.ab-campus { padding: 8vw 9vw; }
.ab-camp-head .body { margin-top: 1.4vw; max-width: 32em; }
.ab-camp-grid { display: grid; grid-template-columns: 7fr 4fr; grid-template-rows: auto auto; gap: 1.6vw; margin-top: 4vw; }
.ab-camp-img { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; clip-path: inset(0 0 100% 0 round var(--radius)); transition: clip-path 1.4s var(--ease-out); }
.ab-camp-img.in { clip-path: inset(0 round var(--radius)); }
.ab-camp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-camp-img.a { aspect-ratio: 3 / 2; }
.ab-camp-img.b { grid-row: span 2; }
.ab-camp-img.c { aspect-ratio: 3 / 1.3; transition-delay: 0.15s; }
.ab-camp-img figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 3vw 1.6vw 1.2vw; font-size: clamp(12px, 0.95vw, 15px); color: #fff; background: linear-gradient(transparent, rgba(15, 22, 60, 0.6)); }
.ab-camp-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; margin-top: 4vw; }
.ab-camp-info > div { padding-top: 1.4vw; border-top: 1px solid #dcdce1; }
.ab-camp-info p { margin-top: 12px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.65; color: var(--ink); }
.ab-camp-info a { color: inherit; text-decoration: none; border-bottom: 1px solid #c9c9cf; transition: border-color 0.3s, color 0.3s; }
.ab-camp-info a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- apply: the same panel as the Admissions page ---------- */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.abtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 26px; border-radius: var(--radius);
  border: 1px solid #c9c9cf; background: #fff; color: var(--ink);
  font: 600 13px/1 "Raleway", sans-serif; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  transition: color 0.45s var(--ease-out), border-color 0.45s;
}
.abtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); clip-path: inset(100% 0 0 0); transition: clip-path 0.55s var(--ease-out); }
.abtn:hover::before { clip-path: inset(0 0 0 0); }
.abtn i { font-style: normal; transition: transform 0.45s var(--ease-spring); }
.abtn:hover i { transform: translateX(5px); }
.apply { position: relative; padding: 2vw 9vw 9vw; }
.apply-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1100px; margin: 0 auto; padding: 8vw 6vw; text-align: center; color: #fff; }
.apply-in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: var(--navy, #1f2b73); clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.2s var(--ease-out); }
.apply-in.in::before { clip-path: inset(0 0 0 0 round var(--radius)); }
.apply-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft, #e0b54a); margin-bottom: 1.6vw; }
.apply-title { font-family: "Raleway", system-ui, sans-serif; font-weight: 300; font-size: clamp(30px, 4.2vw, 70px); line-height: 1.06; margin-bottom: 3vw; color: #fff; }
.apply .abtn { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #fff; }
.apply .abtn:hover { color: #fff; border-color: var(--gold); }
.apply .abtn.solid { background: var(--gold); border-color: var(--gold); color: #fff; }
.apply .abtn.solid::before { background: #fff; }
.apply .abtn.solid:hover { color: var(--navy, #1f2b73); border-color: #fff; }

@media (max-width: 900px) {
  .ab-onboard { padding: 8vh 7vw 14vw; }
  .ab-onboard .ab-scrub { margin-top: 28px; font-size: clamp(21px, 6vw, 30px); }
  .ab-facts { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .ab-facts > div { padding-top: 16px; }
  .ab-vm { grid-template-columns: 1fr; gap: 28px; margin: 0 7vw; padding: 14vw 0; }
  .ab-vm-body { gap: 32px; }
  .ab-vm-photo img { aspect-ratio: 4 / 3; }
  .ab-values { padding: 4vw 7vw 14vw; }
  .ab-vals { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .ab-vals li { min-height: 0; padding: 18px 14px 22px; }
  .ab-vals h3 { margin-top: 26px; font-size: 19px; }
  .ab-vals p { font-size: 13px; }
  .ab-campus { padding: 14vw 7vw; }
  .ab-camp-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .ab-camp-img.a { grid-column: 1 / -1; }
  .ab-camp-img.b { grid-row: auto; aspect-ratio: 3 / 4; }
  .ab-camp-img.c { aspect-ratio: 3 / 4; }
  .ab-camp-info { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
  .ab-camp-info > div { padding-top: 16px; }
  .apply { padding: 10px 7vw 70px; }
  .apply-in { padding: 60px 24px; }
  .apply-kicker { margin-bottom: 14px; }
  .apply-title { margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .ab-vals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-camp-img, .apply-in::before { clip-path: none; transition: none; }
}

/* ==================================================================
   The whiteboard writing (placed and scaled onto the board by about.js)
   Each piece is written in turn from --w (0..1, scrubbed by the camera's
   arrival): the date, the welcome, a marker stroke, the motto, the hills.
   ================================================================== */
.ab-bt {
  --w: 0;
  position: absolute; left: 0; top: 0; z-index: 7; visibility: hidden; pointer-events: none;
  transform-origin: 0 0; will-change: transform;
  display: flex; align-items: center; justify-content: center;
  container-type: size; color: var(--ink);
}
/* the same pieces as the page's section heads (Our Story): the small chapter kicker, an uppercase
   Raleway title, the gold brushstroke under it, and a line of grey body copy, set left */
.bt-in { width: min(100%, 78cqh * 1.6); }
.bt-in > * { --pi: clamp(0, calc((var(--w) - var(--a)) / var(--d)), 1); }
.bt-k { --a: 0; --d: 0.2; display: flex; align-items: baseline; gap: 8px; margin: 0 0 3cqh; font-size: max(12px, min(2.2cqh, 1.4cqw)); color: var(--grey-text);
  opacity: var(--pi); }
.bt-k b { font-family: "Raleway", system-ui, sans-serif; font-weight: 500; color: var(--gold); }
.bt-h { --a: 0.1; --d: 0.4; margin: 0; font-family: "Raleway", system-ui, sans-serif; font-weight: 400; font-size: max(30px, min(12cqh, 7.6cqw));
  line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
  clip-path: inset(0 0 calc((1 - var(--pi)) * 100%) 0); translate: 0 calc((1 - var(--pi)) * 2cqh); }
.bt-ul { --a: 0.45; --d: 0.25; display: block; width: min(36cqw, 18em); height: 1.1em; margin-top: 2cqh; overflow: visible;
  font-size: max(16px, min(3cqh, 2cqw)); clip-path: inset(-50% calc((1 - var(--pi)) * 100%) -50% -2%); }
.bt-ul path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bt-m { --a: 0.62; --d: 0.3; max-width: 34em; margin: 5cqh 0 0; font-size: max(14px, min(2.8cqh, 1.7cqw)); line-height: 1.6; color: var(--grey-text);
  opacity: var(--pi); translate: 0 calc((1 - var(--pi)) * 1.4cqh); }

/* ==================================================================
   Ranges: the hero's ridgelines as graphics down the page (about.js
   fills each [data-range] with an inline SVG)
   ================================================================== */
.ab-range { pointer-events: none; }
.ab-range svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* a fine line drawing of the far ranges, drawn on as it comes into view */
.ab-range.range-line { position: relative; height: clamp(90px, 13vw, 210px); margin: 5vw -9vw -9vw; }
.range-line path { fill: none; stroke-width: 1.1; }
.range-line svg { clip-path: inset(-10% 100% -10% 0); transition: clip-path 3s cubic-bezier(0.45, 0, 0.2, 1); }
.range-line.in svg { clip-path: inset(-10% 0 -10% 0); }
/* the valley at dusk, rising out of the white above into the navy of the section */
.ab-log { position: relative; }
.ab-range.range-dusk { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(110px, 15vw, 240px); }
.ab-leaders { padding-bottom: calc(8vw + clamp(110px, 15vw, 240px)); }
/* faint hills at night along the foot of the apply panel, revealed with it */
.apply-in { overflow: hidden; border-radius: var(--radius); }
.ab-range.range-night { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 45%; opacity: 0; transition: opacity 1.4s ease 0.6s; }
.apply-in.in .range-night { opacity: 1; }

@media (max-width: 900px) {
  .ab-range.range-line { margin: 30px -7vw -14vw; height: 110px; }
  .ab-range.range-dusk { height: 120px; }
  .ab-leaders { padding-bottom: calc(14vw + 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .range-line svg { transition: none; clip-path: none; }
}