/* ================================================================
   ABBOTTABAD PUBLIC SCHOOL — MAIN STYLESHEET
   ================================================================
   Section map:
     Design Tokens > Reset/Base > Typography > Shared Components >
     Header/Nav > Hero > Intro > Statistics > Discover APS >
     Academics > Boarding/Houses > Sports > Student Life > News >
     Heritage > Principal > Admissions > Footer > Responsive >
     Reduced Motion

   "Shared Components" holds cross-cutting pieces used by more than
   one page section (buttons, the media-surface system,
   the scroll-reveal motion utility, the ticker, and the carousel
   engine shared by Stats / Houses / Sports) rather than forcing them
   into whichever section happens to use them first.

   Component-specific responsive breakpoints live next to the
   component they adjust (e.g. the Hero's mobile behaviour is in the
   Hero section). The dedicated Responsive section near the end holds
   only small cross-cutting adjustments that touch several components
   at once.
   ================================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* ---- Color: primary institutional navy scale ---- */
  --navy-950:#081426;
  --navy-900:#0b1c33;
  --navy-800:#122a49;
  --navy-700:#1a3a63;
  --navy-600:#264c7a;

  /* ---- Color: APS gold accent scale ---- */
  --gold-600:#a3812f;
  --gold-500:#b8923a;
  --gold-400:#c9a54f;
  --gold-300:#d9bd7c;
  --gold-200:#e8d6ab;

  /* ---- Color: neutrals ---- */
  --cream-50:#f7f4ec;
  --cream-100:#f1ecdf;
  --paper:#ffffff;
  --ink-900:#14181f;
  --ink-700:#333c49;
  --ink-600:#565f6e;
  --ink-400:#8891a0;
  --hairline:rgba(10,25,48,0.12);
  --hairline-on-dark:rgba(255,255,255,0.14);

  /* ---- Typography ---- */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --eyebrow:.6875rem;
  --fs-nav:.8125rem;
  --fs-small:.8125rem;
  --fs-body:1rem;
  --fs-body-lg:1.125rem;
  --fs-h3:clamp(1.375rem,1.1rem + 1vw,1.875rem);
  --fs-h2:clamp(2rem,1.4rem + 2.4vw,3.375rem);
  --fs-h1:clamp(2.75rem,1.9rem + 3.6vw,5.5rem);
  --fs-stat:clamp(2.75rem,2rem + 3vw,4.75rem);

  /* ---- Spacing scale (8px base) ---- */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --sp-8:4rem;
  --sp-9:6rem;
  --sp-10:8rem;
  --sp-11:10rem;

  --section-pad:clamp(4.5rem,3.4rem + 4.5vw,9rem);
  --container-max:1360px;
  --container-pad:clamp(1.25rem,-0.4rem + 6.5vw,5rem);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.16,.8,.28,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-cinematic:cubic-bezier(.19,1,.22,1);
  --dur-fast:.25s;
  --dur-std:.45s;
  --dur-slow:.8s;
  --dur-cinematic:1.1s;

  /* ---- Header height (for scroll offset / anchor accuracy) ---- */
  --header-h:84px;

  /* ---- Radius (used sparingly) ---- */
  --radius-img:3px;
  --radius-pill:999px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;scroll-padding-top:calc(var(--header-h) + 12px);}

/* ---- Lenis smooth-scroll base styles ----
   Applied only while the global Lenis engine is active (it adds the
   `.lenis` class to <html> itself). When Lenis is absent — reduced
   motion, or the script failing to load — none of these classes exist
   and the page falls back to ordinary native scrolling, untouched.
   `scroll-behavior:auto` is forced under Lenis so the browser's own
   smooth-scroll never runs a second, competing animation on top of it. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:clip;}
.lenis.lenis-scrolling iframe{pointer-events:none;}

body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea{font:inherit;}

/* Visible keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:999;background:var(--navy-950);color:#fff;
  padding:.75rem 1.25rem;border-radius:4px;transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:1rem;}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.01em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);
  font-size:var(--eyebrow);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-600);
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;display:inline-block;
}
.on-dark .eyebrow{color:var(--gold-300);}

.section-head{
  max-width:46rem;
  margin-bottom:var(--sp-8);
}
.section-head h2{margin-top:var(--sp-4);}
.section-head p{margin-top:var(--sp-4);font-size:var(--fs-body-lg);color:var(--ink-600);max-width:38rem;}
.on-dark .section-head p{color:rgba(255,255,255,.72);}

.section-head--split{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-6);
  max-width:none;flex-wrap:wrap;
}

.italic-serif{font-family:var(--font-display);font-style:italic;font-weight:400;}

/* ============================================================
   SHARED COMPONENTS
   (Cross-cutting pieces used by more than one page section: buttons,
   the media-surface system, the scroll-reveal motion utility,
   the ticker, and the carousel engine shared by Stats / Houses / Sports.)
   ============================================================ */
/* -- Scroll progress indicator -- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  background:var(--gold-400);
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none;
}

/* -- Layout utilities (container, section padding) -- */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.section{padding-block:var(--section-pad);}
.section-tight{padding-block:calc(var(--section-pad) * .55);}

/* -- Buttons -- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:1.05em 1.9em;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease-cinematic),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease-out);flex-shrink:0;}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.98);}

/* Directional fill: a pseudo-element sweeps in from the left rather than
   the whole button flatly recolouring — precise, not a "glow". Negative
   z-index inside an isolated stacking context keeps it reliably BEHIND
   the button's own text/icon, including bare text nodes with no wrapper. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-cinematic);
}


.btn--gold{background:var(--gold-500);color:var(--navy-950);border-color:var(--gold-500);}
.btn--gold::before{background:var(--gold-400);}
.btn--gold:hover::before{transform:scaleX(1);}

.btn--outline-dark{background:transparent;color:var(--navy-950);border-color:var(--ink-900);}
.btn--outline-dark::before{background:var(--navy-950);}
.btn--outline-dark:hover{color:#fff;}
.btn--outline-dark:hover::before{transform:scaleX(1);}

.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn--outline-light::before{background:#fff;}
.btn--outline-light:hover{color:var(--navy-950);border-color:#fff;}
.btn--outline-light:hover::before{transform:scaleX(1);}

.btn--ghost{padding:.6em 0;letter-spacing:.08em;border:0;}
.btn--ghost-dark{color:var(--navy-900);}
.btn--ghost-dark:hover{color:var(--gold-600);}
.btn--ghost-light{color:#fff;}
.btn--ghost-light:hover{color:var(--gold-300);}

/* -- Media surface (photo slot with a clean empty state) --
   Every photo spot on the site — hero, houses, sports, news, and so on —
   is one of these. With no image supplied it reads as a quiet, deliberate
   surface in the school's own palette; the moment a real <img> or <video>
   is added (see .media-fill below) that photograph becomes the entire
   visual and this surface is simply never seen. */
.media{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    linear-gradient(146deg, var(--navy-700) 0%, var(--navy-900) 52%, var(--navy-950) 100%);
  box-shadow:inset 0 0 0 1px var(--hairline-on-dark);
  border-radius:var(--radius-img);
  isolation:isolate;
}
.media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(6,13,26,.55) 0%, rgba(6,13,26,0) 38%);
  pointer-events:none;
}
.media-caption{
  position:absolute;left:0;bottom:0;
  z-index:2;
  padding:var(--sp-4) var(--sp-5);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  transition:transform var(--dur-std) var(--ease-out);
}
.media--tall{aspect-ratio:3/4;}
.media--wide{aspect-ratio:16/9;}
.media--square{aspect-ratio:1/1;}
.media--panorama{aspect-ratio:21/7;}

/* Real-photography slot: once a real <img>/<video> is dropped in with this
   class, it fills the .media box, sits above the neutral surface, and
   automatically inherits hover + reveal treatment. Nothing else in the
   layout needs to change when real APS photography is added. */
.media-fill{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
  color:transparent; /* if the image 404s, this hides the alt-text browsers
                         would otherwise print next to the broken-image icon;
                         the icon glyph itself is removed by the small,
                         page-wide error handler in main.js (CSS alone can't
                         detect a failed image load) */
}
@media (hover:hover) and (pointer:fine){
  .media--hover .media-fill{transition:transform 1.1s var(--ease-cinematic);}
  .media--hover:hover .media-fill{transform:scale(1.035);}
  .media--hover:hover .media-caption{transform:translateY(-2px);}
}

/* -- Scroll-reveal motion system (fade / scale / eyebrow-line / masked-line) -- */
/* Type A — simple fade + upward movement (default) */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal].reveal-done{will-change:auto;}
[data-reveal="fade"]{transform:none;}

/* Image entrance — clip-path + scale, not a plain fade (Section 7) */
[data-reveal="scale"]{
  opacity:0;
  transform:none;
  clip-path:inset(4% 4% 4% 4% round 2px);
  transition:opacity var(--dur-cinematic) var(--ease-cinematic),
             clip-path var(--dur-cinematic) var(--ease-cinematic);
  transition-delay:var(--reveal-delay, 0s);
}
[data-reveal="scale"] .media-fill{transform:scale(1.09);transition:transform 1.4s var(--ease-cinematic);transition-delay:var(--reveal-delay, 0s);}
[data-reveal="scale"].is-visible{opacity:1;clip-path:inset(0 0 0 0 round 2px);}
[data-reveal="scale"].is-visible .media-fill{transform:scale(1);}

/* Type C — eyebrow rule expands horizontally before the label appears */
[data-reveal="eyebrow"]{opacity:1;transform:none;transition:none;}
[data-reveal="eyebrow"]::before{width:0;transition:width .6s var(--ease-cinematic);}
[data-reveal="eyebrow"] .eyebrow-text{
  display:inline-block;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-out) .25s, transform .5s var(--ease-out) .25s;
}
[data-reveal="eyebrow"].is-visible::before{width:22px;}
[data-reveal="eyebrow"].is-visible .eyebrow-text{opacity:1;transform:none;}

/* Type B/D — masked line reveal for headings: each .line-mask clips a
   .line-inner that wipes upward into place. Lines stagger via nth-child. */
[data-reveal="mask"]{opacity:1;transform:none;transition:none;}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.line-inner{display:block;transform:translateY(112%);transition:transform var(--dur-cinematic) var(--ease-cinematic);}
[data-reveal="mask"] .line-mask:nth-child(1) .line-inner{transition-delay:calc(var(--reveal-delay, 0s) + .0s);}
[data-reveal="mask"] .line-mask:nth-child(2) .line-inner{transition-delay:calc(var(--reveal-delay, 0s) + .08s);}
[data-reveal="mask"] .line-mask:nth-child(3) .line-inner{transition-delay:calc(var(--reveal-delay, 0s) + .16s);}
[data-reveal="mask"].is-visible .line-inner{transform:translateY(0);}

/* -- News ticker -- */
.ticker{
  background:var(--gold-500);
  color:var(--navy-950);
  overflow:hidden;
  position:relative;
}
.ticker-inner{
  display:flex;align-items:center;
  white-space:nowrap;
  width:max-content;
  animation:tickerScroll 38s linear infinite;
}
.ticker:hover .ticker-inner{animation-play-state:paused;}
.ticker.is-paused .ticker-inner{animation-play-state:paused;}
@keyframes tickerScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.ticker-item{
  display:inline-flex;align-items:center;gap:.9em;
  padding:.9em 2.2em;
  font-size:.8125rem;font-weight:600;letter-spacing:.03em;
}
.ticker-item b{
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.ticker-item::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--navy-950);opacity:.4;
  margin-left:2.2em;
}

/* -- Shared carousel component (stats / houses / sports all use this) -- */
.carousel{position:relative;}
.carousel-viewport{
  display:flex;
  gap:var(--sp-5);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--container-pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  cursor:grab;
}
.carousel-viewport:active{cursor:grabbing;}
.carousel-viewport.is-dragging,.carousel-viewport.is-animating{
  scroll-snap-type:none; /* Chromium otherwise snaps any programmatic scrollLeft write
                             straight back to the nearest existing snap point, which
                             silently defeats a custom smooth-scroll animation before
                             it can show a single intermediate frame. */
}
.carousel-viewport.is-dragging{
  cursor:grabbing;
  user-select:none;-webkit-user-select:none;
}
.carousel-viewport:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:-3px;
  border-radius:var(--radius-img);
}
.carousel-viewport::-webkit-scrollbar{display:none;}
.carousel-viewport::before{content:"";flex:0 0 1px;}
.carousel-viewport::after{content:"";flex:0 0 clamp(1rem,4vw,2.5rem);}
.carousel-track{display:contents;}

/* -- Pinned, scroll-driven horizontal sections (Houses / Sports, desktop
      + motion-allowed only — see js/main.js → initScrollDrivenGallery).
      `.is-pin-active` is added by JS only once GSAP ScrollTrigger has
      actually taken over; on mobile, on reduced-motion, or if the CDN
      script failed to load, none of this applies and these two sections
      behave exactly like the plain native-scroll rules directly above. -- */
.carousel--pin.is-pin-active .carousel-viewport{
  overflow:hidden;
  cursor:default;
  scroll-snap-type:none;
}
.carousel--pin.is-pin-active .carousel-viewport::before,
.carousel--pin.is-pin-active .carousel-viewport::after{
  content:none; /* these were scroll-snap alignment spacers; GSAP drives the
                    exact position directly, so they're not needed here */
}
.carousel--pin.is-pin-active .carousel-track{
  display:flex;
  gap:var(--sp-5);
  padding-left:var(--container-pad);
  will-change:transform;
}
.carousel--pin.is-pin-active .carousel-controls{
  position:relative;
  z-index:1;
}
.carousel--pin:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:-3px;
  border-radius:var(--radius-img);
}

/* Active-slide emphasis + adjacent-slide visibility: the centred slide
   reads at full strength, neighbours recede slightly rather than
   disappearing — the eye is guided without anything being hidden. */
.carousel-track > *{
  opacity:.55;
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.carousel-track > *.is-active-slide{opacity:1;transform:scale(1.015);}


.carousel-controls{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.carousel-progress{
  flex:1 1 auto;max-width:180px;height:2px;border-radius:2px;
  background:var(--hairline);overflow:hidden;
}
.on-dark .carousel-progress{background:var(--hairline-on-dark);}
.carousel-progress-fill{
  height:100%;width:100%;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.carousel-arrow{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  flex-shrink:0;
}
.carousel-arrow svg{width:16px;height:16px;}
.carousel-arrow:hover{background:var(--navy-950);border-color:var(--navy-950);color:#fff;}
.carousel-arrow:active{transform:scale(.94);}
.carousel-arrow[disabled]{opacity:.3;pointer-events:none;}
.on-dark .carousel-arrow{border-color:var(--hairline-on-dark);color:#fff;}
.on-dark .carousel-arrow:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-950);}

.carousel-dots{display:flex;align-items:center;gap:.5rem;margin-left:.5rem;}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;background:var(--hairline);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.on-dark .carousel-dot{background:rgba(255,255,255,.28);}
.carousel-dot.is-active{background:var(--gold-500);width:22px;border-radius:4px;}

/* -- Count-up stat number -- */
.stat-number{
  font-family:var(--font-display);
  font-size:var(--fs-stat);
  font-weight:400;
  color:#fff;
  line-height:1;
  display:flex;align-items:baseline;gap:.15em;
}
.stat-number .stat-suffix{font-size:.4em;color:var(--gold-300);font-family:var(--font-body);font-weight:600;letter-spacing:.02em;}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* Padding scales with viewport — comfortable 32px at ≥1440px,
     ~24px on narrower desktops. Was a static var(--sp-5) (24px) —
     lifted so the navbar reads less cramped at wider widths. */
  padding-block:clamp(1.5rem, .95rem + .6vw, 2rem);
  transition:background var(--dur-std) var(--ease-out), padding var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
}
.site-header::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,20,38,.55) 0%, rgba(8,20,38,0) 100%);
  opacity:1;transition:opacity var(--dur-std) var(--ease-out);
  z-index:-1;
}
.site-header.is-scrolled{
  background:rgba(8,20,38,.92);
  backdrop-filter:blur(10px);
  /* Also tuned up a touch from var(--sp-3) (12px) — the previous
     collapsed state felt uncomfortably tight against the logo. */
  padding-block:clamp(.9rem, .6rem + .3vw, 1.15rem);
  box-shadow:0 8px 30px rgba(6,13,26,.18);
}
.site-header.is-scrolled::before{opacity:0;}

.nav-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
}
.brand{display:flex;align-items:center;gap:.75rem;color:#fff;}
.brand-mark{
  width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  transition:width var(--dur-std),height var(--dur-std),flex-basis var(--dur-std);
}
.brand-logo{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  color:transparent; /* if the logo file is missing, this hides the alt-text
                         browsers would otherwise print next to it — see
                         images/logo/README.txt for the expected file */
}
.site-header.is-scrolled .brand-mark{width:40px;height:40px;flex:0 0 40px;}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-name{font-family:var(--font-display);font-size:1rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;}
.brand-tag{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-300);margin-top:2px;white-space:nowrap;}

/* Nav-links responsive sizing.
   Fitting 8 categories + a nav-CTA + the Menu button on one line is
   impossible with fixed spacing across the full desktop range, so gap
   and font-size both scale down with viewport width — big enough at
   1600px to feel spacious, tight enough at 1200px that "STUDENT LIFE"
   and "ADMISSIONS" still fit without pushing Menu off-screen. Below
   the nav-links show/hide breakpoint further down we collapse to the
   Menu button anyway, so this only has to hold from ~1200–2000px. */
.nav-links{
  display:flex;align-items:center;
  /* Fit 9 items (Home + 8 categories) + Menu without overflow.
     Gap and font both scale with viewport width. */
  gap:clamp(.55rem,-.4rem + 1.2vw,1.5rem);
  flex:0 1 auto;
  min-width:0;
}
.nav-links a{
  font-size:clamp(.7rem,.55rem + .22vw,.82rem);
  font-weight:600;
  /* Editorial 0.09em tracking — a touch wider than the previous .06em
     for a more institutional feel. */
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  position:relative;padding-block:.5rem;
  white-space:nowrap;
  transition:color .3s var(--ease-out);
}
/* Hover underline animates from the left; active state locks a permanent
   gold underline on so the current page is always readable at a glance. */
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--gold-400);
  transition:right .45s var(--ease-cinematic);
}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff;}
.nav-links a:hover::after,.nav-links a:focus-visible::after{right:0;}

/* Optional subtle first-item separator between HOME and the categories —
   restrained hairline, respects the header's dark background. */
.nav-links .nav-home{
  padding-right:clamp(.75rem,.4rem + .5vw,1.25rem);
  margin-right:clamp(.35rem,.1rem + .5vw,.85rem);
  border-right:1px solid rgba(255,255,255,.14);
}

.nav-actions{display:flex;align-items:center;gap:clamp(.5rem,.25rem + .4vw,1rem);flex:0 0 auto;}
.nav-cta{
  display:none;
}
/* Apply-Now button held back until the layout has real breathing room
   for it — below this width the Menu button carries admissions from
   inside the mega-menu (which already features Admissions prominently). */
@media (min-width:1500px){
  .nav-cta{
    display:inline-flex;align-items:center;gap:.6em;
    font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    background:var(--gold-500);color:var(--navy-950);
    padding:.75em 1.25em;border-radius:var(--radius-pill);
    white-space:nowrap;
    transition:background var(--dur-fast) var(--ease-out);
  }
  .nav-cta:hover{background:var(--gold-400);}
}

.menu-toggle{
  display:flex;align-items:center;gap:.65em;
  color:#fff;
  padding:.6em .5em .6em 1.1em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius-pill);
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover{border-color:#fff;}
.menu-toggle-icon{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.menu-toggle-icon span{
  display:block;width:14px;height:1.5px;background:#fff;position:relative;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.menu-toggle-icon span::before,.menu-toggle-icon span::after{
  content:"";position:absolute;left:0;width:14px;height:1.5px;background:#fff;
  transition:transform var(--dur-fast) var(--ease-out),top var(--dur-fast) var(--ease-out);
}
.menu-toggle-icon span::before{top:-5px;}
.menu-toggle-icon span::after{top:5px;}
.menu-open .menu-toggle-icon span{background:transparent;}
.menu-open .menu-toggle-icon span::before{top:0;transform:rotate(45deg);}
.menu-open .menu-toggle-icon span::after{top:0;transform:rotate(-45deg);}

/* Below this breakpoint we drop the inline nav-links and rely on the
   Menu button (mega-menu) alone. Chosen so we NEVER attempt to squeeze
   8 items into insufficient width — a graceful step-down, not a squeeze. */
@media (max-width:1199px){
  .nav-links{display:none;}
}
/* ---------------- Header nav-links active state ---------------- */
.nav-links a.is-active{color:#fff;}
.nav-links a.is-active::after{
  right:0;
  background:var(--gold-400);
  height:1.5px;
}

/* ---------------- Overlay Mega-Menu (compact editorial) ----------------
   Restrained typography, columnar grid, one column per top-level
   category. Above 820px every column stays open; below, each column is
   a tap-to-expand accordion (see .mega-col-head). The animation is
   short and single-purpose — the whole overlay fades and lifts in
   ~400ms rather than 800+, and individual link staggers are removed
   entirely; the effect should feel institutional, not theatrical. */
.overlay-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--navy-950);
  visibility:hidden;
  opacity:0;
  transition:opacity .4s var(--ease-out), visibility 0s linear .4s;
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.menu-open .overlay-menu{
  visibility:visible;opacity:1;
  transition:opacity .4s var(--ease-out), visibility 0s;
}
.overlay-menu::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.045'%3E%3Cpath d='M-40 480 Q160 380 300 440 T640 380'/%3E%3Cpath d='M-40 520 Q160 440 300 490 T640 430'/%3E%3Cpath d='M-40 90 Q180 30 320 80 T640 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  pointer-events:none;
}
.overlay-menu-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-5) var(--container-pad);
  position:relative;z-index:1;
}
.overlay-menu-top .brand-name{color:#fff;}
.overlay-menu-top .brand-tag{color:var(--gold-300);}
.overlay-menu-body{
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;
  padding:0 var(--container-pad) var(--sp-8);
  gap:var(--sp-6);
  max-width:var(--container-max);
  margin-inline:auto;
  width:100%;
}
.overlay-eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);
  padding-top:var(--sp-4);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease-out) .05s, transform .35s var(--ease-out) .05s;
}
.menu-open .overlay-eyebrow{opacity:1;transform:none;}

.mega-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease-out) .1s, transform .4s var(--ease-out) .1s;
}
.menu-open .mega-grid{opacity:1;transform:none;}
@media (min-width:640px){ .mega-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-6);} }
@media (min-width:900px){ .mega-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-6) var(--sp-7);} }
@media (min-width:1200px){ .mega-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-6) var(--sp-7);} }

.mega-col{
  padding-block:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.06);
}
@media (min-width:821px){
  .mega-col{border-top:0;padding-block:0;}
}

/* Column header — the small uppercase category label. On desktop it's
   a plain heading; on mobile it becomes the accordion trigger. */
.mega-col-head{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:.55em 0;
  text-align:left;
  color:#fff;
  cursor:pointer;
}
.mega-col-label{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);
}
.mega-col-chev{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
  transition:transform .3s var(--ease-out);
}
.mega-col-chev svg{width:16px;height:16px;}
.mega-col.is-open .mega-col-chev{transform:rotate(180deg);}

@media (min-width:821px){
  .mega-col-head{
    cursor:default;padding:0;margin-bottom:var(--sp-4);
    display:block;
  }
  .mega-col-chev{display:none;}
  .mega-col-label{display:inline-block;padding-bottom:.75em;border-bottom:1px solid rgba(255,255,255,.08);width:100%;}
}

/* Primary link — the "go straight to the section" affordance under the
   column label. Reads as an editorial call-out rather than a nav link. */
.mega-col-primary{
  display:none;
  align-items:center;justify-content:space-between;gap:.75em;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.35;
  padding:.65em 0;
  margin-bottom:var(--sp-3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mega-col-primary svg{width:14px;height:14px;flex-shrink:0;color:var(--gold-400);transition:transform var(--dur-fast) var(--ease-out);}
.mega-col-primary:hover{color:var(--gold-300);}
.mega-col-primary:hover svg{transform:translateX(3px);}
@media (min-width:821px){
  .mega-col-primary{display:flex;}
}

/* Secondary link list — the actual page links. Compact, high-contrast,
   hoverable. */
.mega-col-list{
  display:none;
  flex-direction:column;
}
.mega-col.is-open .mega-col-list{display:flex;}
@media (min-width:821px){
  .mega-col-list{display:flex;}
}
.mega-col-list li{margin:0;}
.mega-col-list a{
  display:inline-flex;align-items:center;gap:.55em;
  color:rgba(255,255,255,.72);
  font-size:.9375rem;
  padding-block:.35em;
  transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mega-col-list a::before{
  content:"";width:6px;height:1px;background:currentColor;opacity:.5;
  transition:width var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.mega-col-list a:hover,.mega-col-list a:focus-visible{color:#fff;transform:translateX(2px);}
.mega-col-list a:hover::before,.mega-col-list a:focus-visible::before{width:12px;opacity:1;background:var(--gold-400);}

/* Menu foot — Visit / Contact / Follow, sat under the column grid. */
.overlay-foot{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease-out) .18s, transform .4s var(--ease-out) .18s;
}
.menu-open .overlay-foot{opacity:1;transform:none;}
@media (min-width:640px){ .overlay-foot{grid-template-columns:repeat(3,1fr);gap:var(--sp-7);} }
.overlay-foot-col h4{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:.9em;
  font-family:var(--font-body);
}
.overlay-foot-col address,
.overlay-foot-col a{
  color:rgba(255,255,255,.72);font-size:.875rem;font-style:normal;line-height:1.55;
  padding-block:.2em;display:block;
}
.overlay-foot-col a:hover{color:#fff;}
.overlay-social{display:flex;gap:.65rem;padding-top:.3em;}
.overlay-social a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.overlay-social a:hover{border-color:var(--gold-400);color:var(--gold-300);}
.overlay-social svg{width:14px;height:14px;}

.close-menu-btn{
  display:flex;align-items:center;gap:.6em;color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

body.menu-locked{position:fixed;left:0;right:0;overflow:hidden;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  --hero-progress:0; /* 0→1, driven by JS scroll handler; drives parallax below */
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;
  overflow:hidden;
}
/* Outer frame absorbs the JS-driven scroll parallax (translate only).
   Inner .hero-media absorbs the CSS-driven ambient drift (scale only) —
   splitting the two prevents an inline transform from fighting the
   running keyframe animation. */
.hero-media-frame{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  transform:translateY(calc(var(--hero-progress) * 70px));
  will-change:transform;
}
.hero-media{position:absolute;inset:-6%;border-radius:0;}
.hero-media::after{
  background:linear-gradient(0deg, rgba(6,12,24,.92) 0%, rgba(6,12,24,.45) 42%, rgba(6,12,24,.28) 65%, rgba(6,12,24,.5) 100%);
}
.hero-video{opacity:0;transition:opacity 1.2s var(--ease-out);}
.hero-video.is-playing{opacity:1;}
.hero-content{
  padding-block:clamp(7rem,5rem + 8vw,11rem) var(--sp-8);
  transform:translateY(calc(var(--hero-progress) * -34px));
  opacity:calc(1 - (var(--hero-progress) * .7));
}
.hero-eyebrow{color:var(--gold-300);}
.hero h1{
  margin-top:var(--sp-5);
  font-size:var(--fs-h1);
  max-width:23ch;
}
.hero h1 .line-mask{padding-bottom:.1em;margin-bottom:-.1em;}
.hero-motto{
  display:block;margin-top:var(--sp-3);
  font-size:clamp(1.1rem,.9rem + 1vw,1.6rem);
  color:var(--gold-300);
}
.hero-sub{
  margin-top:var(--sp-6);
  max-width:34rem;
  font-size:var(--fs-body-lg);
  color:rgba(255,255,255,.82);
}
.hero-actions{
  margin-top:var(--sp-7);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
}
.hero-scroll{
  position:absolute;right:var(--container-pad);bottom:var(--sp-6);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  color:rgba(255,255,255,.65);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:calc(1 - (var(--hero-progress) * 2));
}
.hero-scroll-line{width:1px;height:46px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));position:relative;overflow:hidden;}
.hero-scroll-line::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--gold-400);
  animation:scrollDrop 2.2s var(--ease-in-out) infinite;
  animation-delay:1.4s;
}
@keyframes scrollDrop{
  0%{top:-100%;}
  60%{top:100%;}
  100%{top:100%;}
}
@media (max-width:640px){
  .hero-scroll{display:none;}
}

/* Ambient hero motion: a one-time fade-in plus a very slow, continuous
   drift (100% → ~103.5%) — reads as atmosphere, not as "zooming in". */
@keyframes heroFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes heroDrift{from{transform:scale(1);}to{transform:scale(1.035);}}
.hero-media{
  animation:heroFadeIn 1.6s var(--ease-cinematic) both,
            heroDrift 22s var(--ease-in-out) infinite alternate;
  animation-delay:0s, .6s;
}

/* Parallax is a desktop-scroll refinement, not a mobile requirement —
   keep touch scrolling native and untouched. */
@media (max-width:820px), (pointer:coarse){
  .hero-media-frame,.hero-content{transform:none !important;}
  .hero-content{opacity:1 !important;}
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{background:var(--cream-50);}
.intro-top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  align-items:start;
}
@media (min-width:920px){
  .intro-top{grid-template-columns:.85fr 1fr;gap:var(--sp-10);}
}
.intro-pills{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:var(--sp-6);
}
.pill{
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  padding:.65em 1.2em;border-radius:var(--radius-pill);
  border:1px solid var(--hairline);
  color:var(--ink-700);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pill:hover{border-color:var(--navy-900);color:var(--navy-900);}
.pill.is-active{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}

.intro-right{display:flex;flex-direction:column;gap:var(--sp-6);}
.intro-seal{
  width:96px;height:96px;color:var(--navy-800);opacity:.85;
}
.intro-right p{font-size:var(--fs-body-lg);color:var(--ink-700);max-width:38rem;}
.intro-right p+p{margin-top:1.1em;}

.intro-panorama{
  margin-top:var(--sp-9);
  height:clamp(220px,32vw,380px);
}

/* ============================================================
   STATISTICS
   ============================================================ */
.stats{
  background:var(--navy-950);
  position:relative;
  overflow:hidden;
}
.stats::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500' viewBox='0 0 800 500'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.06'%3E%3Cpath d='M-40 420 Q200 340 400 400 T840 340'/%3E%3Cpath d='M-40 450 Q200 380 400 430 T840 380'/%3E%3Cpath d='M-40 60 Q220 10 420 55 T840 20'/%3E%3Cpath d='M-40 100 Q220 55 420 95 T840 60'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;background-position:center;
  pointer-events:none;
}
.stats .container{position:relative;}
.stat-card{
  scroll-snap-align:start;
  flex:0 0 clamp(240px,26vw,320px);
  min-height:clamp(300px,26vw,360px);
  padding:var(--sp-6);
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--hairline-on-dark);
  border-radius:var(--radius-img);
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(155deg, var(--navy-700), var(--navy-900) 70%);
  z-index:-1;
}
.stat-label{
  margin-top:var(--sp-3);
  color:rgba(255,255,255,.7);
  font-size:.9375rem;
  max-width:14ch;
}

/* ============================================================
   DISCOVER APS
   ============================================================ */
.discover{background:var(--paper);}
.discover-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(210px,20vw,300px);
  gap:var(--sp-5);
}
.discover-tile{
  position:relative;
  grid-column:span 12;
  grid-row:span 1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-6);
  color:#fff;
}
.discover-tile--hero{grid-column:span 12;grid-row:span 2;}
.discover-tile--half{grid-column:span 12;}
.discover-tile--third{grid-column:span 12;}
@media (min-width:760px){
  .discover-tile--hero{grid-column:1 / span 7;grid-row:1 / span 2;}
  .discover-tile--half{grid-column:8 / span 5;}
  .discover-tile--third{grid-column:span 4;}
}
.discover-tile-cat{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);position:relative;z-index:1;
}
.discover-tile h3{color:#fff;margin-top:.5em;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);position:relative;z-index:1;}
.discover-tile p{
  margin-top:.5em;font-size:.9375rem;color:rgba(255,255,255,.75);max-width:30ch;
  position:relative;z-index:1;
}
.discover-go{
  position:absolute;right:var(--sp-5);bottom:var(--sp-5);z-index:2;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.discover-go svg{width:16px;height:16px;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-out);}
.discover-tile:hover .discover-go{background:var(--gold-500);color:var(--navy-950);}
.discover-tile:hover .discover-go svg{transform:rotate(0deg);}

/* ============================================================
   ACADEMICS
   ============================================================ */
.split{
  display:grid;grid-template-columns:1fr;gap:var(--sp-7);
  align-items:center;
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--sp-9);}
  .split--reverse .split-media{order:2;}
}
.split-media{aspect-ratio:4/5;}
.split-text .eyebrow{margin-bottom:var(--sp-4);}
.split-text h2{margin-bottom:var(--sp-5);}
.split-text p{color:var(--ink-600);font-size:var(--fs-body-lg);max-width:34rem;}
.split-text p + p{margin-top:1em;}
.split-list{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
.split-list li{
  display:flex;gap:.9em;font-size:.9375rem;color:var(--ink-700);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--hairline);
}
.split-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:.15em;color:var(--gold-600);}
.split-text .btn{margin-top:var(--sp-7);}

/* ============================================================
   BOARDING / HOUSES
   ============================================================ */
.boarding{background:var(--navy-950);color:#fff;position:relative;overflow:hidden;}
.boarding::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500' viewBox='0 0 900 500'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.05'%3E%3Cpath d='M-40 40 Q240 -10 460 35 T940 10'/%3E%3Cpath d='M-40 460 Q240 400 460 450 T940 400'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;pointer-events:none;
}
.boarding .container{position:relative;}
.boarding-intro{
  display:grid;grid-template-columns:1fr;gap:var(--sp-7);
  margin-bottom:var(--sp-9);
}
@media (min-width:900px){
  .boarding-intro{grid-template-columns:1fr 1fr;gap:var(--sp-10);align-items:start;}
}
.boarding-intro p{color:rgba(255,255,255,.75);font-size:var(--fs-body-lg);}
.boarding-intro .btn{margin-top:var(--sp-6);}
.house-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-6);}
.house-tags span{
  font-size:.75rem;font-weight:600;letter-spacing:.03em;
  padding:.55em 1em;border-radius:var(--radius-pill);
  border:1px solid var(--hairline-on-dark);color:rgba(255,255,255,.75);
}

.house-panel{
  scroll-snap-align:start;
  flex:0 0 clamp(260px,30vw,360px);
  aspect-ratio:3/4.1;
  padding:var(--sp-5);
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;
}
.house-panel-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);position:relative;z-index:1;}
.house-panel h3{color:#fff;font-size:1.4rem;margin-top:.4em;position:relative;z-index:1;}
.house-panel p{color:rgba(255,255,255,.68);font-size:.8125rem;margin-top:.5em;position:relative;z-index:1;max-width:26ch;}
.house-panel .btn--ghost{margin-top:1em;color:#fff;font-size:.75rem;position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.house-panel .btn--ghost svg{width:12px;height:12px;}

/* ============================================================
   SPORTS
   ============================================================ */
.sports{background:var(--navy-900);color:#fff;}
.sports-banner{max-width:40rem;margin-bottom:var(--sp-8);}
.sports-banner p{color:rgba(255,255,255,.72);font-size:var(--fs-body-lg);margin-top:var(--sp-4);}
.sports-banner .btn{margin-top:var(--sp-6);}

.sport-tile{
  scroll-snap-align:start;
  flex:0 0 clamp(150px,15vw,190px);
  aspect-ratio:3/4.4;
  padding:var(--sp-4);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.sport-tile span{position:relative;z-index:1;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:#fff;}

/* ============================================================
   STUDENT LIFE
   ============================================================ */
.life{background:var(--cream-50);}
.life-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-7);
}
@media (min-width:900px){
  .life-grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-9);align-items:center;}
}
.life-collage{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-5);}
.life-collage .media:first-child{aspect-ratio:3/4;}
.life-collage .media:last-child{aspect-ratio:3/4;margin-top:var(--sp-9);}
.life-text ul{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);}
.life-text li{display:flex;gap:1em;}
.life-text li .num{
  font-family:var(--font-display);font-size:1.1rem;color:var(--gold-600);flex-shrink:0;width:2ch;
}
.life-text li div h4{font-family:var(--font-body);font-weight:600;font-size:.9375rem;color:var(--ink-900);}
.life-text li div p{font-size:.875rem;color:var(--ink-600);margin-top:.2em;}

/* ============================================================
   NEWS
   ============================================================ */
.news{background:var(--paper);}
.news-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-7);
}
@media (min-width:900px){
  .news-grid{grid-template-columns:1.3fr 1fr;gap:var(--sp-8);}
}
.news-feature .media{aspect-ratio:4/3;margin-bottom:var(--sp-5);}
.news-feature .news-date{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600);}
.news-feature h3{margin-top:.5em;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);}
.news-feature p{margin-top:.7em;color:var(--ink-600);max-width:36rem;}
.news-list{display:flex;flex-direction:column;}
.news-row{
  display:flex;gap:var(--sp-4);
  padding-block:var(--sp-5);
  border-top:1px solid var(--hairline);
}
.news-row:last-child{border-bottom:1px solid var(--hairline);}
.news-row .media{width:110px;aspect-ratio:1/1;flex-shrink:0;}
.news-row-body .news-date{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-600);}
.news-row-body h4{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;margin-top:.3em;}

/* ============================================================
   HERITAGE
   ============================================================ */
.heritage{background:var(--navy-950);color:#fff;position:relative;overflow:hidden;}
.heritage::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.055'%3E%3Cpath d='M-40 120 Q220 40 460 100 T940 60'/%3E%3Cpath d='M-40 170 Q220 100 460 150 T940 110'/%3E%3Cpath d='M-40 220 Q220 160 460 205 T940 165'/%3E%3Cpath d='M-40 560 Q220 480 460 545 T940 500'/%3E%3Cpath d='M-40 610 Q220 545 460 595 T940 550'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;pointer-events:none;
}
.heritage .container{position:relative;}
.timeline{
  --timeline-progress:0; /* 0→1, driven by JS as the section scrolls through view */
  margin-top:var(--sp-9);position:relative;
}
.timeline::before{
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;
  background:var(--hairline-on-dark);
}
.timeline::after{
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg, var(--gold-400), var(--gold-300));
  transform-origin:top;
  transform:scaleY(var(--timeline-progress));
  transition:transform .1s linear;
}
@media (min-width:760px){
  .timeline::before,.timeline::after{left:50%;transform-origin:top;}
  .timeline::before{transform:translateX(-50%);}
  .timeline::after{transform:translateX(-50%) scaleY(var(--timeline-progress));}
}
.timeline-item{
  position:relative;
  padding-left:calc(var(--sp-6) + 8px);
  padding-bottom:var(--sp-8);
  opacity:.4;
  transition:opacity .6s var(--ease-out);
}
.timeline-item.is-active{opacity:1;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;
  background:var(--navy-950);border:1.5px solid var(--gold-400);
  transition:background var(--dur-std) var(--ease-out), transform var(--dur-std) var(--ease-out);
}
.timeline-item.is-active::before{background:var(--gold-400);transform:scale(1.15);}
@media (min-width:760px){
  .timeline-item{
    width:calc(50% - var(--sp-8));
    padding-left:0;padding-right:0;
  }
  .timeline-item::before{left:auto;right:calc(-1 * var(--sp-8) - 10px);}
  .timeline-item:nth-child(even){margin-left:calc(50% + var(--sp-8));}
  .timeline-item:nth-child(odd)::before{right:calc(-1 * var(--sp-8) - 10px);}
  .timeline-item:nth-child(even)::before{left:calc(-1 * var(--sp-8) - 10px);}
}
.timeline-year{
  font-family:var(--font-display);font-size:1.75rem;color:var(--gold-300);
  transition:color var(--dur-std) var(--ease-out);
}
.timeline-item.is-active .timeline-year{color:#fff;}
.timeline-item p{margin-top:.5em;color:rgba(255,255,255,.72);max-width:32rem;}

/* Light-context overrides.
   The timeline was originally styled only for the dark Heritage
   section (white years on navy). Reused on light pages — the About
   history section, for one — every colour token flipped to invisible
   white-on-cream. When the timeline sits outside .on-dark, use dark
   ink for the body copy, the hairline gold for years, and the strong
   navy for the active state, and swap the connector rail to the
   light-mode hairline. `.timeline-year` is itself a <p>, so the body
   selector explicitly excludes it or the year colour is clobbered. */
:not(.on-dark) > .container > .timeline .timeline-item p:not(.timeline-year){
  color:var(--ink-600);
}
:not(.on-dark) > .container > .timeline .timeline-year{color:var(--gold-600);}
:not(.on-dark) > .container > .timeline .timeline-item.is-active .timeline-year{color:var(--navy-900);}
:not(.on-dark) > .container > .timeline::before{background:var(--hairline);}
:not(.on-dark) > .container > .timeline .timeline-item::before{
  background:var(--paper);
  border-color:var(--gold-500);
}
:not(.on-dark) > .container > .timeline .timeline-item.is-active::before{
  background:var(--gold-500);
}

/* ============================================================
   PRINCIPAL
   ============================================================ */
.principal{background:var(--cream-50);}
.principal-media{aspect-ratio:4/5;}
.principal-quote-mark{width:40px;height:40px;color:var(--gold-500);margin-bottom:var(--sp-4);}
.principal-note{
  margin-top:var(--sp-6);font-size:.8125rem;color:var(--ink-400);font-style:italic;
}
.principal-sig{margin-top:var(--sp-6);}
.principal-sig .name{font-family:var(--font-display);font-size:1.125rem;}
.principal-sig .role{font-size:.8125rem;color:var(--ink-600);margin-top:.2em;}

/* ============================================================
   ADMISSIONS
   ============================================================ */
.admissions-cta{
  background:linear-gradient(155deg, var(--navy-800), var(--navy-950) 70%);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.admissions-cta::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='400' viewBox='0 0 900 400'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.07'%3E%3Cpath d='M-40 320 Q220 260 460 305 T940 260'/%3E%3Cpath d='M-40 350 Q220 300 460 335 T940 300'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;pointer-events:none;
}
.admissions-cta .container{position:relative;}
.admissions-cta-inner{max-width:38rem;margin-inline:auto;}
.admissions-cta h2{color:#fff;margin-top:var(--sp-4);}
.admissions-cta p{margin-top:var(--sp-5);color:rgba(255,255,255,.75);font-size:var(--fs-body-lg);}
.admissions-cta .hero-actions{justify-content:center;margin-top:var(--sp-7);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.7);}
.footer-top{
  display:grid;grid-template-columns:1fr;gap:var(--sp-8);
  padding-block:var(--sp-9);
  border-bottom:1px solid var(--hairline-on-dark);
}
@media (min-width:760px){
  .footer-top{grid-template-columns:1.3fr .8fr .8fr .8fr;gap:var(--sp-7);}
}
.footer-brand .brand{color:#fff;margin-bottom:var(--sp-5);}
.footer-brand .brand-mark{width:52px;height:52px;flex:0 0 52px;}
.footer-brand p{max-width:26rem;font-size:.9375rem;color:rgba(255,255,255,.6);}
.footer-col h4{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);margin-bottom:var(--sp-4);
}
.footer-col a,.footer-col address{
  display:block;font-size:.9375rem;font-style:normal;color:rgba(255,255,255,.68);
  padding-block:.35em;
}
.footer-col a:hover{color:#fff;}
.footer-social{display:flex;gap:.75rem;margin-top:var(--sp-5);}
.footer-social a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline-on-dark);
  display:flex;align-items:center;justify-content:center;
}
.footer-social a:hover{border-color:var(--gold-400);color:var(--gold-300);}
.footer-social svg{width:14px;height:14px;}

.footer-stats{
  display:flex;flex-wrap:wrap;gap:var(--sp-8);
  padding-block:var(--sp-6);
  border-bottom:1px solid var(--hairline-on-dark);
}
.footer-stats div{font-size:.8125rem;color:rgba(255,255,255,.55);}
.footer-stats strong{
  display:block;font-family:var(--font-display);font-size:1.5rem;color:#fff;font-weight:400;
}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-5);
  font-size:.8125rem;color:rgba(255,255,255,.45);
}
.footer-bottom a{color:rgba(255,255,255,.45);}
.footer-bottom a:hover{color:#fff;}
.footer-legal{display:flex;gap:var(--sp-5);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  .brand-mark{width:38px;height:38px;flex:0 0 38px;}
  .site-header.is-scrolled .brand-mark{width:32px;height:32px;flex:0 0 32px;}
  .brand-tag{display:none;}
  .menu-toggle span:first-child{display:none;}
  .menu-toggle{padding:.35em;border:0;}
  .menu-toggle-icon{width:40px;height:40px;background:rgba(255,255,255,.14);}
  .close-menu-btn span:first-child{display:none;}
  .overlay-nav-links a{font-size:clamp(1.9rem,9vw,2.6rem);}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;}
  .stat-card{min-height:260px;}
  .discover-tile{padding:var(--sp-5);}
  .footer-stats{gap:var(--sp-6);}
}
@media (max-width:400px){
  :root{--container-pad:1.1rem;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
}

/* ============================================================
   REDUCED MOTION
   (Consolidated overrides — see design-tokens comment for the global
   *,*::before,*::after duration reset that backs all of these up.)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media (prefers-reduced-motion:reduce){.scroll-progress{display:none;}}

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

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;clip-path:none !important;}
  [data-reveal] .media-fill,[data-reveal] .line-inner{transform:none !important;transition:none !important;}
  [data-reveal="eyebrow"]::before{width:22px !important;}
  [data-reveal="eyebrow"] .eyebrow-text{opacity:1 !important;}
}

@media (prefers-reduced-motion:reduce){
  .hero-media{animation:heroFadeIn .6s linear both;}
  .hero-media-frame,.hero-content,.hero-scroll{transform:none !important;opacity:1 !important;}
}

@media (prefers-reduced-motion:reduce){
  .ticker-inner{animation:none;overflow-x:auto;}
}

@media (prefers-reduced-motion:reduce){
  .carousel-track > *{opacity:1;transition:none;}
  .carousel-track > *.is-active-slide{transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .timeline-item{opacity:1;}
  .timeline::after{transform:scaleY(1) !important;}
  @media (min-width:760px){.timeline::after{transform:translateX(-50%) scaleY(1) !important;}}
}

/* ============================================================
   INTERNAL PAGES — page-hero, breadcrumb, prose, related-cards,
   next-prev navigation
   These components are used by every non-homepage page. They keep the
   layout restrained: page hero is roughly two-thirds the height of the
   homepage hero, the copy sits under the fold rather than filling the
   viewport, and everything hangs off the same container/spacing tokens
   as the rest of the site.
   ============================================================ */

/* -- Breadcrumb --------------------------------------------------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--ink-400);
  padding-block:var(--sp-3);
}
.on-dark .breadcrumb{color:rgba(255,255,255,.5);}
.breadcrumb a{
  color:var(--ink-600);
  transition:color var(--dur-fast) var(--ease-out);
}
.on-dark .breadcrumb a{color:rgba(255,255,255,.7);}
.breadcrumb a:hover{color:var(--navy-900);}
.on-dark .breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb [aria-current="page"]{color:var(--ink-900);font-weight:500;}
.on-dark .breadcrumb [aria-current="page"]{color:#fff;}

/* -- Page hero (internal pages) ---------------------------------- */
.page-hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--sp-8));
  padding-bottom:var(--sp-8);
  background:var(--cream-50);
  overflow:hidden;
}
.page-hero.on-dark{background:var(--navy-950);color:#fff;}
.page-hero.on-dark::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500' viewBox='0 0 900 500'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.05'%3E%3Cpath d='M-40 40 Q240 -10 460 35 T940 10'/%3E%3Cpath d='M-40 460 Q240 400 460 450 T940 400'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;pointer-events:none;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero-head{
  display:grid;grid-template-columns:1fr;gap:var(--sp-6);
  align-items:end;
  padding-block:var(--sp-6) var(--sp-4);
}
@media (min-width:900px){
  .page-hero-head{grid-template-columns:1.05fr .95fr;gap:var(--sp-9);}
}
.page-hero h1{
  font-size:clamp(2rem,1.3rem + 3vw,3.75rem);
  max-width:20ch;
}
.page-hero-lede{
  font-size:var(--fs-body-lg);
  color:var(--ink-600);
  max-width:36rem;
}
.page-hero.on-dark .page-hero-lede{color:rgba(255,255,255,.75);}
.page-hero-media{
  position:relative;
  margin-top:var(--sp-7);
  aspect-ratio:21/9;
  border-radius:var(--radius-img);
  overflow:hidden;
}
@media (max-width:640px){
  .page-hero-media{aspect-ratio:4/3;}
}

/* -- Section — light + dark variants for internal pages ---------- */
.section--cream{background:var(--cream-50);}
.section--paper{background:var(--paper);}
.section--navy{background:var(--navy-950);color:#fff;}

/* -- Prose (long-form editorial body copy) ------------------------ */
.prose{
  max-width:38rem;
  color:var(--ink-700);
  font-size:var(--fs-body-lg);
  line-height:1.7;
}
.on-dark .prose{color:rgba(255,255,255,.75);}
.prose p + p{margin-top:1.1em;}
.prose h2,.prose h3{
  color:var(--ink-900);
  font-family:var(--font-display);font-weight:500;
  line-height:1.2;
}
.on-dark .prose h2,.on-dark .prose h3{color:#fff;}
.prose h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2rem);margin-top:2em;margin-bottom:.6em;}
.prose h3{font-size:clamp(1.15rem,1rem + .6vw,1.375rem);margin-top:1.6em;margin-bottom:.4em;}
.prose h2 + p,.prose h3 + p{margin-top:0;}
.prose ul{
  margin-top:1em;padding-left:0;
  display:flex;flex-direction:column;gap:.5em;
}
.prose ul li{
  padding-left:1.4em;position:relative;
  font-size:var(--fs-body);
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--gold-500);
}

/* -- Two-column editorial layout (used by inner pages) ----------- */
.editorial{
  display:grid;grid-template-columns:1fr;gap:var(--sp-7);
  align-items:start;
}
@media (min-width:900px){
  .editorial{grid-template-columns:.9fr 1.1fr;gap:var(--sp-9);}
  .editorial--reverse .editorial-media{order:2;}
}
.editorial-media{
  aspect-ratio:4/5;
  border-radius:var(--radius-img);
  overflow:hidden;
}
.editorial-media--wide{aspect-ratio:16/10;}
.editorial-eyebrow{margin-bottom:var(--sp-4);}
.editorial h2{
  margin-bottom:var(--sp-5);
  font-size:var(--fs-h2);
}
.on-dark .editorial h2{color:#fff;}

/* -- Content cards grid (used on Academics/Boarding/Student Life) - */
.content-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media (min-width:640px){ .content-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .content-grid{grid-template-columns:repeat(3,1fr);} }
.content-card{
  padding:var(--sp-6);
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-img);
  transition:transform var(--dur-std) var(--ease-cinematic), box-shadow var(--dur-std) var(--ease-cinematic), border-color var(--dur-std) var(--ease-cinematic);
}
.content-card:hover{
  transform:translateY(-2px);
  border-color:rgba(163,129,47,.35);
  box-shadow:0 12px 40px -18px rgba(10,25,48,.18);
}
.on-dark .content-card{
  background:transparent;
  border-color:var(--hairline-on-dark);
  color:rgba(255,255,255,.85);
}
.on-dark .content-card:hover{border-color:rgba(217,189,124,.4);}
.content-card .eyebrow{margin-bottom:var(--sp-4);}
.content-card h3{
  font-size:1.25rem;
  color:var(--ink-900);
  margin-bottom:.5em;
}
.on-dark .content-card h3{color:#fff;}
.content-card p{
  color:var(--ink-600);
  font-size:.9375rem;
  line-height:1.6;
}
.on-dark .content-card p{color:rgba(255,255,255,.7);}

/* -- Fact grid (used on About / Admissions) ---------------------- */
.fact-grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  margin-top:var(--sp-7);
}
@media (min-width:640px){ .fact-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .fact-grid{grid-template-columns:repeat(4,1fr);} }
.fact{
  padding-top:var(--sp-4);
  border-top:1px solid var(--hairline);
}
.on-dark .fact{border-top-color:var(--hairline-on-dark);}
.fact strong{
  display:block;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  color:var(--navy-900);
  line-height:1;
}
.on-dark .fact strong{color:#fff;}
.fact span{
  display:block;margin-top:.6em;
  font-size:.8125rem;
  color:var(--ink-600);
  letter-spacing:.02em;
}
.on-dark .fact span{color:rgba(255,255,255,.65);}

/* -- Related content cards (bottom of every internal page) ------- */
.related{
  padding-block:var(--section-pad);
  background:var(--cream-50);
  border-top:1px solid var(--hairline);
}
.related-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);
  margin-bottom:var(--sp-7);
  flex-wrap:wrap;
}
.related-head h2{
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2rem);
}
.related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media (min-width:640px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .related-grid{grid-template-columns:repeat(3,1fr);} }
.related-card{
  display:flex;flex-direction:column;
  padding:var(--sp-6);
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-img);
  color:var(--ink-900);
  transition:transform var(--dur-std) var(--ease-cinematic), border-color var(--dur-std) var(--ease-cinematic), box-shadow var(--dur-std) var(--ease-cinematic);
  min-height:170px;
}
.related-card:hover{
  transform:translateY(-2px);
  border-color:rgba(163,129,47,.4);
  box-shadow:0 12px 40px -18px rgba(10,25,48,.18);
}
.related-card .eyebrow{margin-bottom:var(--sp-4);}
.related-card h3{
  font-size:1.25rem;margin-bottom:.35em;
}
.related-card p{
  color:var(--ink-600);
  font-size:.9375rem;
  line-height:1.55;
}
.related-card .go{
  margin-top:auto;padding-top:var(--sp-5);
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-600);
}
.related-card .go svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease-out);}
.related-card:hover .go svg{transform:translateX(3px);}

/* -- Next / previous ends-of-page navigation --------------------- */
.next-prev{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  padding-block:var(--section-pad);
  border-top:1px solid var(--hairline);
}
@media (min-width:760px){
  .next-prev{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
}
.next-prev a{
  display:flex;flex-direction:column;gap:.35em;
  padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--hairline);
  border-radius:var(--radius-img);
  transition:transform var(--dur-std) var(--ease-cinematic), border-color var(--dur-std) var(--ease-cinematic);
}
.next-prev a:hover{transform:translateY(-2px);border-color:rgba(163,129,47,.4);}
.next-prev .np-label{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-400);
  display:inline-flex;align-items:center;gap:.5em;
}
.next-prev .np-label svg{width:14px;height:14px;}
.next-prev .np-title{
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--navy-900);
}
.next-prev .np-next{text-align:right;align-items:flex-end;}

/* -- Individual house-page hero (small variant) ------------------ */
.house-hero-media{
  aspect-ratio:16/9;
  border-radius:var(--radius-img);
  overflow:hidden;
  margin-top:var(--sp-7);
}
@media (max-width:640px){
  .house-hero-media{aspect-ratio:4/3;}
}
.house-facts{
  display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  margin-top:var(--sp-6);
}
@media (min-width:640px){ .house-facts{grid-template-columns:repeat(3,1fr);} }
.house-fact{
  padding-top:var(--sp-3);
  border-top:1px solid var(--hairline);
}
.house-fact-label{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);
}
.house-fact-value{
  display:block;margin-top:.35em;
  font-family:var(--font-display);
  font-size:1.125rem;
  color:var(--navy-900);
}

/* -- Houses grid on the houses index ---------------------------- */
.houses-index-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media (min-width:640px){ .houses-index-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .houses-index-grid{grid-template-columns:repeat(4,1fr);} }
.houses-index-grid .house-panel{
  flex:none;aspect-ratio:3/4.1;
}

/* ============================================================
   FACULTY DIRECTORY
   Editorial portrait grid with search, department filter chips,
   and a profile modal. Data-driven from js/main.js → faculty[].
   ============================================================ */

/* -- Restrained page-hero eyebrow row on Faculty ---------------- */
.faculty-directory-head{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  align-items:end;
  margin-bottom:var(--sp-6);
}
@media (min-width:900px){
  .faculty-directory-head{grid-template-columns:1fr auto;}
}
.faculty-directory-head h2{
  font-size:clamp(1.5rem,1.15rem + 1.4vw,2rem);
}
.faculty-count{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);
  font-weight:600;
}

/* -- Controls row (search + filter chips) ----------------------- */
.fd-controls{
  display:flex;flex-direction:column;
  gap:var(--sp-4);
  padding-block:var(--sp-4);
  margin-bottom:var(--sp-6);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:760px){
  .fd-controls{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-6);}
}

.fd-search{
  position:relative;
  flex:0 1 320px;
}
.fd-search svg{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--ink-400);pointer-events:none;
}
.fd-search input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--hairline);
  background:transparent;
  padding:.75em 0 .75em 1.7rem;
  font-size:.9375rem;
  font-family:var(--font-body);
  color:var(--ink-900);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.fd-search input::placeholder{color:var(--ink-400);}
.fd-search input:focus{outline:none;border-bottom-color:var(--gold-500);}

.fd-filters{
  display:flex;
  gap:.4rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
  margin-right:-1rem;padding-right:1rem;
}
.fd-filters::-webkit-scrollbar{display:none;}
@media (min-width:760px){
  .fd-filters{flex-wrap:wrap;overflow:visible;margin:0;padding:0;}
}
.fd-chip{
  flex-shrink:0;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.65em 1.15em;
  border-radius:var(--radius-pill);
  border:1px solid var(--hairline);
  color:var(--ink-700);
  background:transparent;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.fd-chip:hover{border-color:var(--navy-900);color:var(--navy-900);}
.fd-chip.is-active{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}

/* -- Grid ------------------------------------------------------- */
.fd-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6) var(--sp-5);
}
@media (min-width:560px){ .fd-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .fd-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1280px){ .fd-grid{grid-template-columns:repeat(4,1fr);} }

/* Cards — button-typed so they're keyboard-focusable and semantically
   announce the "opens dialog" interaction. */
.fd-card{
  display:flex;flex-direction:column;
  text-align:left;
  padding:0;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  transition:transform .35s var(--ease-cinematic), opacity .3s var(--ease-out);
}
.fd-card.is-hidden{display:none;}
.fd-card:hover .fd-photo{transform:scale(1.03);}
.fd-card:hover .fd-hint{color:var(--gold-600);gap:.8em;}
.fd-card:focus-visible{outline:none;}
.fd-card:focus-visible .fd-portrait{outline:2px solid var(--gold-500);outline-offset:3px;}

.fd-portrait{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius-img);
  /* Neutral navy surface underneath so the monogram — or a photo still
     loading — always reads as intentional. */
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  isolation:isolate;
  color:#fff;
}
.fd-portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(6,13,26,.55) 0%, rgba(6,13,26,0) 45%);
  z-index:1;pointer-events:none;
}
.fd-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  z-index:0;
  color:transparent;
  transition:transform 1.1s var(--ease-cinematic);
}
/* Monogram — a large gold serif initial that acts as a graceful
   placeholder when no image path is set. Photos win visually by being
   above it; when a real photo loads (or is already loaded), the card
   picks up .has-photo and the monogram fades away. */
.fd-monogram{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3.5rem,3rem + 2.5vw,5.5rem);
  color:rgba(217,189,124,.28);
  letter-spacing:0;line-height:1;
  z-index:0;
  pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
.fd-card.has-photo .fd-monogram{opacity:0;}

.fd-info{
  display:flex;flex-direction:column;gap:.25em;
  padding-top:var(--sp-4);
}
.fd-dept{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-600);
}
.fd-name{
  font-family:var(--font-display);font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  color:var(--ink-900);
}
.fd-designation{
  font-size:.8125rem;
  color:var(--ink-600);
  line-height:1.45;
}
.fd-hint{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:.75em;
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);
  transition:color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.fd-hint svg{width:12px;height:12px;transition:transform var(--dur-fast) var(--ease-out);}
.fd-card:hover .fd-hint svg{transform:translateX(3px);}

/* Empty state --------------------------------------------------- */
.fd-empty{
  padding:var(--sp-8) 0;
  text-align:center;
  color:var(--ink-600);
  font-size:var(--fs-body);
  font-style:italic;
}

/* -- Profile modal --------------------------------------------- */
.fd-modal{
  position:fixed;inset:0;z-index:250;
  background:rgba(6,13,26,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
  opacity:0;
  transition:opacity .25s var(--ease-out);
  overflow-y:auto;
}
.fd-modal.is-open{opacity:1;}
.fd-modal[hidden]{display:none;}
.fd-modal-panel{
  position:relative;
  width:100%;
  max-width:820px;
  max-height:calc(100vh - var(--sp-6));
  overflow-y:auto;
  background:var(--paper);
  color:var(--ink-900);
  border-radius:var(--radius-img);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.98);
  transition:transform .35s var(--ease-cinematic);
  scrollbar-width:thin;
}
.fd-modal.is-open .fd-modal-panel{transform:none;}
.fd-modal-close{
  position:absolute;top:var(--sp-4);right:var(--sp-4);z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.85);
  border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;
  color:var(--ink-700);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fd-modal-close:hover{background:var(--navy-950);color:#fff;border-color:var(--navy-950);}

.fd-modal-body{
  display:grid;grid-template-columns:1fr;
}
@media (min-width:720px){
  .fd-modal-body{grid-template-columns:.85fr 1.15fr;}
}
.fd-modal-portrait{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  color:#fff;
}
@media (min-width:720px){
  .fd-modal-portrait{aspect-ratio:auto;height:100%;}
}
.fd-modal-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  color:transparent;
  z-index:1;
}
.fd-monogram-lg{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:clamp(5rem,4rem + 4vw,8rem);
  color:rgba(217,189,124,.35);
  z-index:0;
  transition:opacity .35s var(--ease-out);
}
.fd-modal.has-photo .fd-monogram-lg{opacity:0;}

.fd-modal-info{
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.fd-modal-info .eyebrow{margin-bottom:var(--sp-2);}
.fd-modal-info h2{
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  line-height:1.15;
}
.fd-modal-role{
  font-size:.9375rem;
  color:var(--ink-600);
  font-family:var(--font-body);
  margin-top:-.4em;
}
.fd-modal-meta{
  display:flex;flex-direction:column;
  border-top:1px solid var(--hairline);
  margin-top:var(--sp-4);
}
.fd-modal-meta-row{
  display:grid;grid-template-columns:110px 1fr;
  gap:var(--sp-4);
  padding-block:.7rem;
  border-bottom:1px solid var(--hairline);
  font-size:.875rem;
  align-items:baseline;
}
.fd-modal-meta-row span{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);
}
.fd-modal-meta-row strong{
  font-weight:500;color:var(--ink-900);
  font-family:var(--font-body);
}
.fd-modal-profile{
  font-size:var(--fs-body);
  margin-top:var(--sp-3);
}
.fd-modal-link{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:var(--sp-3);
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-600);
  align-self:flex-start;
}
.fd-modal-link:hover{color:var(--navy-950);}
.fd-modal-link svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease-out);}
.fd-modal-link:hover svg{transform:translateX(3px);}

body.fd-modal-open{overflow:hidden;}

/* ============================================================
   BACK-TO-TOP
   Subtle floating up-arrow. Injected by initBackToTop() in
   main.js — the element is always at the end of <body>, so it
   sits above every section but below the mega-menu overlay
   (z:200) and faculty modal (z:250).
   ============================================================ */
.back-to-top{
  position:fixed;
  right:clamp(1rem, .4rem + 1.4vw, 2rem);
  bottom:clamp(1rem, .4rem + 1.4vw, 2rem);
  z-index:95;

  width:48px;height:48px;
  border-radius:50%;
  background:rgba(8,20,38,.9);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;

  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:
    opacity .5s cubic-bezier(.19,1,.22,1),
    transform .5s cubic-bezier(.19,1,.22,1),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.42);
}
.back-to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.back-to-top:hover{
  background:var(--gold-500);
  color:var(--navy-950);
  border-color:var(--gold-500);
}
.back-to-top svg{
  width:16px;height:16px;
  transition:transform var(--dur-fast) var(--ease-out);
}
.back-to-top:hover svg{transform:translateY(-2px);}
.back-to-top:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}
@media (max-width:640px){
  .back-to-top{width:44px;height:44px;}
}

/* ============================================================
   ALUMNI MARQUEE
   Continuous horizontal auto-scroll of alumni cards. Sits on
   the homepage between News and Admissions. The track is
   duplicated in HTML so translateX(-50%) restarts at frame 1.
   ============================================================ */
.alumni-section{
  background:var(--navy-950);
  color:#fff;
  padding-block:var(--section-pad);
  position:relative;
  overflow:hidden;
}
.alumni-section::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='500' viewBox='0 0 900 500'%3E%3Cg fill='none' stroke='%23d9bd7c' stroke-width='1' opacity='0.045'%3E%3Cpath d='M-40 40 Q240 -10 460 35 T940 10'/%3E%3Cpath d='M-40 460 Q240 400 460 450 T940 400'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;pointer-events:none;
}
.alumni-head{
  position:relative;
  max-width:46rem;
  margin-bottom:var(--sp-8);
}
.alumni-head h2{
  margin-top:var(--sp-4);
  color:#fff;
}
.alumni-lede{
  margin-top:var(--sp-4);
  font-size:var(--fs-body-lg);
  color:rgba(255,255,255,.72);
  max-width:38rem;
}

.alumni-marquee{
  position:relative;
  overflow:hidden;
  /* Fade the ends so cards don't hard-clip at the edges. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.alumni-track{
  display:flex;
  gap:var(--sp-5);
  width:max-content;
  padding-inline:var(--container-pad);
  /* Total translation is exactly -50% because the row is duplicated;
     landing on frame-N+1 aligns with frame-1, so the loop is seamless. */
  animation:alumni-scroll 60s linear infinite;
  will-change:transform;
}
.alumni-marquee:hover .alumni-track,
.alumni-marquee:focus-within .alumni-track{animation-play-state:paused;}
@keyframes alumni-scroll{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

.alumni-card{
  flex:0 0 clamp(260px, 22vw, 320px);
  display:flex;flex-direction:column;
  padding:var(--sp-5);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-img);
  transition:border-color .5s var(--ease-cinematic), background .5s var(--ease-cinematic);
}
.alumni-card:hover{
  border-color:rgba(217,189,124,.35);
  background:rgba(255,255,255,.05);
}
.alumni-portrait{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  width:56px;height:56px;
  background:
    radial-gradient(80% 100% at 20% 10%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
  margin-bottom:var(--sp-4);
  isolation:isolate;
}
.alumni-monogram{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:400;
  font-size:1.6rem;
  color:var(--gold-300);
  opacity:.6;
}
.alumni-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  z-index:1;
}
.alumni-year{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300);
  margin-bottom:.35rem;
}
.alumni-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.15rem;
  color:#fff;
  line-height:1.2;
  margin-bottom:.35rem;
}
.alumni-role{
  font-size:.9375rem;
  color:rgba(255,255,255,.78);
  line-height:1.5;
}
.alumni-quote{
  margin-top:var(--sp-4);
  font-family:var(--font-display);
  font-style:italic;
  font-size:.9375rem;
  color:rgba(255,255,255,.62);
  line-height:1.5;
  padding-top:var(--sp-3);
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width:640px){
  .alumni-card{flex-basis:78vw;}
  .alumni-track{animation-duration:45s;}
}

/* ============================================================
   PARTNERS STRIP
   Subtler than Alumni — slower scroll, quiet mono wordmarks.
   ============================================================ */
.partners-section{
  background:var(--paper);
  border-top:1px solid var(--hairline);
  padding-block:var(--sp-8);
  position:relative;
  overflow:hidden;
}
.partners-head{
  margin-bottom:var(--sp-5);
}
.partners-head .eyebrow{color:var(--ink-400);}
.partners-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-track{
  display:flex;
  align-items:center;
  gap:clamp(2.5rem, 4vw, 5rem);
  width:max-content;
  padding-inline:var(--container-pad);
  /* Slower and smaller than the alumni marquee — this is a credibility
     strip, not a hero moment. */
  animation:partners-scroll 90s linear infinite;
  will-change:transform;
}
.partners-marquee:hover .partners-track{animation-play-state:paused;}
@keyframes partners-scroll{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}
.partner-item{
  flex:0 0 auto;
  /* Row height ~90px on wide screens, scaling down on mobile — gives
     the logos room to read at their intended proportions rather than
     being crushed into a 56px strip. */
  height:clamp(72px, 5vw + 32px, 96px);
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(var(--sp-4), 2vw, var(--sp-6));
  opacity:.7;
  transition:opacity .3s var(--ease-out);
}
.partner-item:hover{opacity:1;}
.partner-logo{
  /* Bigger than before — max-height keyed to the row height so the
     logo fills the strip. */
  max-height:clamp(56px, 4vw + 24px, 80px);
  max-width:clamp(160px, 12vw + 60px, 240px);
  width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1);
  transition:filter .3s var(--ease-out), transform .4s var(--ease-cinematic);
}
.partner-item:hover .partner-logo{filter:none;transform:scale(1.04);}
.partner-wordmark{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.15rem;
  color:var(--ink-600);
  letter-spacing:.02em;
  white-space:nowrap;
  padding:.6em 1.2em;
  border:1px solid var(--hairline);
  border-radius:2px;
}

/* ================================================================
   FEE STATEMENT   (/admissions/fees/)
   Editorial financial statement — reads as a printed fee schedule
   rather than a spreadsheet. Amounts set large and typographic; each
   row is a "line item" separated by hairlines.
   ================================================================ */
.fee-statement{
  max-width:none;
  padding:clamp(2rem,1rem+3vw,4rem) 0;
}
.fee-statement-head{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(1.5rem,1rem+2vw,3rem);
  align-items:end;
  padding-bottom:clamp(2rem,3vh,3rem);
  border-bottom:2px solid var(--ink-900);
  margin-bottom:clamp(2.5rem,3vh,4rem);
}
.fee-statement-head h2{
  margin-top:.6rem;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem,1rem+1.6vw,2.4rem);
  line-height:1.05;
  color:var(--ink-900);
}
.fee-statement-note{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--ink-600);
  line-height:1.5;
  max-width:22em;
  justify-self:end;
  text-align:right;
}
.fee-statement-note strong{color:var(--gold-600);font-weight:600;}
@media (max-width:720px){
  .fee-statement-head{grid-template-columns:1fr;}
  .fee-statement-note{justify-self:start;text-align:left;}
}

.fee-block + .fee-block{margin-top:clamp(2.5rem,3vh,4rem);}
.fee-block-label{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:1.2rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--hairline);
  display:inline-flex;align-items:center;gap:.7em;
}
.fee-rows{
  display:flex;flex-direction:column;
}
.fee-row{
  display:grid;
  grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1rem,.5rem+1vw,2rem);
  align-items:baseline;
  padding-block:clamp(1.1rem,.8rem+.6vw,1.6rem);
  border-bottom:1px solid var(--hairline);
}
.fee-row:last-child{border-bottom:0;}
.fee-row-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.15rem,1rem+.5vw,1.5rem);
  line-height:1.2;
  color:var(--ink-900);
}
.fee-row-note{
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--ink-600);
  line-height:1.4;
}
.fee-row-amt{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem,1rem+1.4vw,2.4rem);
  line-height:1;
  color:var(--ink-900);
  text-align:right;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.fee-row-amt small{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.55em;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-600);
  margin-right:.5em;
  vertical-align:.3em;
}
@media (max-width:640px){
  .fee-row{
    grid-template-columns:1fr auto;
    gap:.4rem clamp(.5rem,1vw,1rem);
  }
  .fee-row-title{grid-column:1;grid-row:1;}
  .fee-row-amt{grid-column:2;grid-row:1;}
  .fee-row-note{grid-column:1 / -1;grid-row:2;}
}
.fee-footnote{
  margin-top:clamp(2.5rem,3vh,3.5rem);
  padding-top:clamp(1.5rem,2vh,2rem);
  border-top:1px solid var(--hairline);
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--ink-600);
  line-height:1.6;
  max-width:44rem;
}
.fee-footnote strong{color:var(--ink-900);font-weight:500;}

/* ================================================================
   DAILY ROUTINE   (/boarding/routine/)
   The routine time table set as a printed timetable — hour column
   on the left, event on the right, hairline between rows. Break
   rows and "final" (Lights Out) get a distinct treatment.
   ================================================================ */
.routine-block-head{
  margin-bottom:clamp(2rem,3vh,3rem);
  padding-bottom:clamp(1rem,2vh,1.5rem);
  border-bottom:1px solid var(--hairline);
}
.routine-block-head h2{
  margin-top:.6rem;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.8rem,1.1rem + 2vw,3rem);
  line-height:1.05;
  color:var(--ink-900);
}
.routine-list{
  list-style:none;
  padding:0;margin:0;
}
.routine-row{
  display:grid;
  grid-template-columns:minmax(180px, 240px) 1fr;
  gap:clamp(1rem, 1rem + 1.5vw, 3rem);
  align-items:baseline;
  padding-block:clamp(.9rem, .7rem + .5vw, 1.3rem);
  border-bottom:1px solid var(--hairline);
}
.routine-row:last-child{border-bottom:0;}
.routine-time{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.15rem, .95rem + .7vw, 1.7rem);
  line-height:1.1;
  color:var(--gold-600);
  letter-spacing:.01em;
  white-space:nowrap;
}
.routine-name{
  font-family:var(--font-body);
  font-size:clamp(1rem, .95rem + .2vw, 1.15rem);
  font-weight:500;
  color:var(--ink-900);
  line-height:1.4;
}
.routine-note{
  display:inline;
  color:var(--ink-600);
  font-weight:400;
  font-size:.92em;
  margin-left:.35em;
}
.routine-row--break{
  background:linear-gradient(90deg, rgba(184,146,58,.04) 0%, transparent 60%);
  padding-inline:.6rem;
  margin-inline:-.6rem;
}
.routine-row--break .routine-name{color:var(--gold-600);text-transform:uppercase;letter-spacing:.06em;font-size:.95em;}
.routine-row--final .routine-time,
.routine-row--final .routine-name{
  color:var(--ink-900);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-family:var(--font-body);
  font-size:.95rem;
}
.routine-row--final{
  border-top:2px solid var(--ink-900);
  padding-top:1.3rem;
  margin-top:.6rem;
}
@media (max-width:640px){
  .routine-row{grid-template-columns:1fr;gap:.2rem;}
  .routine-time{font-size:1.05rem;}
}

/* House rules / notes list */
.routine-notes{
  list-style:decimal;
  padding-left:1.4em;
  margin-top:clamp(1.5rem,2vh,2rem);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(2rem,1rem+3vw,4rem);
  row-gap:1rem;
  max-width:none;
}
.routine-notes li{
  padding-left:.4rem;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--ink-600);
  line-height:1.65;
  break-inside:avoid;
}
.routine-notes li::marker{
  color:var(--gold-600);
  font-family:var(--font-display);
  font-weight:400;
}
.routine-notes li strong{color:var(--ink-900);font-weight:500;}
@media (max-width:820px){
  .routine-notes{grid-template-columns:1fr;}
}

.routine-signoff{
  margin-top:clamp(3rem,4vh,4rem);
  padding-top:clamp(1.5rem,2vh,2rem);
  border-top:1px solid var(--hairline);
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-600);
  text-align:right;
}

/* -- Reduced-motion overrides for new components ----------------- */
@media (prefers-reduced-motion:reduce){
  .overlay-menu{transition:none;}
  .overlay-eyebrow,.mega-grid,.overlay-foot{opacity:1 !important;transform:none !important;transition:none !important;}
  .content-card,.related-card,.next-prev a{transition:none !important;}
  .content-card:hover,.related-card:hover,.next-prev a:hover{transform:none !important;}
  .fd-card,.fd-photo,.fd-monogram,.fd-modal,.fd-modal-panel{transition:none !important;}
  .fd-card:hover .fd-photo{transform:none !important;}
  .fd-modal-panel{transform:none !important;}
  .fd-modal.is-open{opacity:1;}
  .back-to-top{transition:opacity .2s linear;}
  .back-to-top:hover svg{transform:none !important;}
  .alumni-track,.partners-track{animation:none !important;transform:none !important;}
  .alumni-marquee,.partners-marquee{overflow-x:auto;}
}