/* ==================================================================
   SRI SANKARA VIDYALAYA — "IVORY & AMBER" Design System
   ------------------------------------------------------------------
   A ground-up layout + identity built on two colours only:
   Grey (ivory → stone → graphite) + Yellow (cream → amber gold).
   NEW SKELETON: fixed graphite SIDEBAR navigation on desktop (the
   old top navbar is gone), slim cream news ticker across the top of
   the content pane, floating rounded footer card, arch-topped
   photography, centre-line timeline, bento feature grid, masonry
   gallery and editorial fact-sheet tables.
   Typeface: Inter (self-hosted variable). Icons: inline SVG (icons.js).
   ================================================================== */

/* ---- 1. Self-hosted Inter (single variable file) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url('../assets/fonts/InterVariable.woff2') format('woff2-variations');
  font-display: swap;
}

/* ---- 2. Tokens ---- */
:root {
  /* Yellow ramp — cream, light, warm, medium, bright, strong,
     golden, deep golden, rich, dark */
  --y-050: #fffdf0;
  --y-100: #fff8d6;
  --y-200: #ffefad;
  --y-300: #ffe27a;
  --y-400: #ffd43b;
  --y-500: #f7c600;
  /* primary accent */
  --y-600: #dfa900;
  --y-700: #b78700;
  --y-800: #8c6500;
  --y-900: #5f4300;

  /* Grey ramp — warm ivory paper → stone → graphite → near black */
  --ivory: #faf9f4;
  --n-000: #ffffff;
  --n-050: #f8f8f6;
  --n-100: #f1f1ee;
  --n-150: #e7e7e3;
  --n-200: #d9d9d4;
  --n-300: #bdbdb7;
  --n-400: #9a9a93;
  --n-500: #787871;
  --n-600: #5a5a54;
  --n-700: #42423d;
  --n-800: #2c2c29;
  --n-850: #212120;
  --n-900: #171716;
  --n-950: #0d0d0c;

  /* Alphas */
  --y-a08: rgba(247, 198, 0, .08);
  --y-a14: rgba(247, 198, 0, .14);
  --y-a25: rgba(247, 198, 0, .25);
  --y-a45: rgba(247, 198, 0, .45);
  --ink-a06: rgba(13, 13, 12, .06);
  --ink-a10: rgba(13, 13, 12, .10);
  --ink-a45: rgba(13, 13, 12, .45);
  --ink-a80: rgba(13, 13, 12, .80);
  --wh-a06: rgba(255, 255, 255, .06);
  --wh-a10: rgba(255, 255, 255, .10);
  --wh-a16: rgba(255, 255, 255, .16);
  --wh-a70: rgba(255, 255, 255, .70);

  /* Hairline — the only border used on light surfaces */
  --line: rgba(13, 13, 12, .08);

  /* Gradients */
  --grad-gold: linear-gradient(120deg, var(--y-500) 0%, var(--y-400) 55%, var(--y-300) 120%);
  --grad-gold-deep: linear-gradient(120deg, var(--y-600) 0%, var(--y-500) 60%, var(--y-400) 130%);
  --grad-slate: linear-gradient(170deg, var(--n-850) 0%, var(--n-950) 100%);
  --grad-dusk: linear-gradient(140deg, var(--n-900) 0%, var(--n-800) 60%, var(--y-900) 165%);
  --grad-halo:
    radial-gradient(46% 52% at 88% 0%, var(--y-a14), transparent 62%),
    radial-gradient(40% 46% at 0% 100%, rgba(255, 212, 59, .07), transparent 60%);
  --grad-hair: linear-gradient(90deg, var(--y-500), transparent);

  /* Surface pattern */
  --pat-dots: radial-gradient(var(--y-a45) 2px, transparent 2.5px);
  --pat-grid: none;

  /* Geometry — generous, soft radii */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --pill: 999px;
  --arch: var(--r-lg);

  /* Shadows — layered, diffuse elevation + warm gold glows */
  --sh-1: 0 1px 2px rgba(13, 13, 12, .04), 0 6px 16px -8px rgba(13, 13, 12, .07);
  --sh-2: 0 2px 6px rgba(13, 13, 12, .04), 0 18px 36px -18px rgba(13, 13, 12, .16);
  --sh-3: 0 4px 12px rgba(13, 13, 12, .05), 0 34px 64px -26px rgba(13, 13, 12, .24);
  --glow: 0 10px 28px -10px rgba(223, 169, 0, .45);
  --glow-lg: 0 18px 44px -12px rgba(223, 169, 0, .5);

  /* Motion — expo-out primary ease */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.83, 0, .17, 1);

  /* Skeleton metrics */
  --topbar-h: 64px;
  --flash-h: 0px;

  /* ---- Legacy aliases ----
     Interior pages carry inline styles that reference older token
     names; every old name resolves into the current palette so no
     markup needs touching. */
  --o-050: var(--y-050);
  --o-100: var(--y-100);
  --o-200: var(--y-200);
  --o-300: var(--y-300);
  --o-400: var(--y-400);
  --o-500: var(--y-500);
  --o-600: var(--y-600);
  --o-700: var(--y-700);
  --o-800: var(--y-800);
  --o-900: var(--y-900);
  --g-000: var(--n-000);
  --g-050: var(--n-050);
  --g-100: var(--n-100);
  --g-200: var(--n-200);
  --g-300: var(--n-300);
  --g-400: var(--n-400);
  --g-500: var(--n-500);
  --g-600: var(--n-600);
  --g-700: var(--n-700);
  --g-800: var(--n-800);
  --g-900: var(--n-900);
  --g-950: var(--n-950);
  --o-a10: var(--y-a08);
  --o-a16: var(--y-a14);
  --o-a24: var(--y-a25);
  --o-a40: var(--y-a45);
  --grad-brand: var(--grad-gold-deep);
  --grad-ember: var(--grad-gold);
  --grad-ink: var(--grad-slate);
  --grad-mesh: var(--grad-halo);
  --hard-gold: var(--sh-3);
  --hard-gold-sm: var(--sh-2);
  --hard-ink: var(--sh-2);
  --color-primary: var(--y-700);
  --color-primary-dark: var(--y-800);
  --color-elephant-grey: var(--n-700);
  --color-elephant-light: var(--n-500);
  --color-light-bg: var(--n-050);
  --color-white: var(--n-000);
  --color-text: var(--n-600);
  --color-text-muted: var(--n-400);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --shadow-lg: var(--sh-3);
  --border-radius: var(--r);
  --transition: all .3s var(--ease);
}

/* ---- 3. Reset / base ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* overflow-x:clip on BOTH html and body so an off-canvas fixed element
   (e.g. the mobile nav drawer at translateX(100%)) can never create a
   horizontal scrollbar / sideways scroll on small screens, without breaking
   position: sticky on descendants. overflow-y is set explicitly to
   'visible' on both — per the CSS Overflow spec, if one axis is 'clip'
   and the other is left as the 'visible' default, the browser computes
   the visible axis to 'clip' too, which silently disables ALL vertical
   scrolling on the page. Declaring overflow-y explicitly avoids that. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  overflow-y: visible;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--n-600);
  background: var(--ivory);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  /* Fixed top bar overlays the page, so push it down. */
  padding-top: var(--topbar-h);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 750;
  color: var(--n-900);
  line-height: 1.14;
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}

a {
  color: var(--y-700);
  text-decoration: none;
  transition: color .25s var(--ease);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

b,
strong {
  color: var(--n-800);
  font-weight: 700;
}

sup {
  font-size: .62em;
}

::selection {
  background: var(--y-400);
  color: var(--n-950);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--n-100);
}

::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: 8px;
  border: 2px solid var(--n-100);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--y-600);
}

:focus-visible {
  outline: 2px solid var(--y-600);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Icon placeholder reserves the icon's box BEFORE icons.js injects the SVG,
   so injection causes no layout shift / text reflow. inline-flex + centring
   (rather than inline-block + a vertical-align nudge) means the glyph is
   always dead-centre in its box regardless of context — a button, a
   paragraph, a flex row — instead of drifting a few px off-centre the way
   a baseline-relative inline SVG does inside an inline-block wrapper. */
[data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.ic {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 1vw, 1rem);
}

.container-wide {
  width: 100%;
  /* max-width: 1280px; */
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 1vw, 1rem);
  padding-left: 20px;
}

/* Spacing/alignment utilities referenced by interior markup */
.text-center {
  text-align: center;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2.5rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

/* ---- 4. Micro-label (kicker) — naked caps with a gold rule ---- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--y-800);
  margin-bottom: 1.1rem;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold-deep);
  flex-shrink: 0;
}

.kicker--light {
  color: var(--y-300);
}

.eyebrow-accent {
  background: linear-gradient(100deg, var(--y-700), var(--y-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==================================================================
   6. SCROLL PROGRESS
   ================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 1200;
  background: var(--grad-gold-deep);
  border-radius: 0 3px 3px 0;
}

/* ==================================================================
   7. NAVIGATION SHELL
   Graphite glass top bar + cream ticker beneath it; the menu
   collapses into a slide-in drawer on tablet/mobile.
   ================================================================== */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

.topbar {
  position: relative;
  z-index: 2;
  /* above flashnews so the open drawer covers it */
  height: var(--topbar-h);
  background: rgba(13, 13, 12, .92);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.header-container.scrolled .topbar {
  background: rgba(13, 13, 12, .98);
  box-shadow: 0 18px 40px -22px rgba(13, 13, 12, .7);
}

.topbar .container-wide {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 0;
}

/* Logo sits on a soft white pill so the crest keeps full legibility
   against the graphite shell. */
.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
  background: transparent;
  padding-left: 18px;
}

nav {
  flex: 1;
  /* nav takes ALL the space after the logo... */
  min-width: 0;
  padding-left: clamp(1rem, 3vw, 3.5rem);
  /* clear gap between logo and nav */
  padding-right: 8px;
}

.logo img {
  height: 40px;
  width: auto;
}

/* Name written out as real text beside the emblem (logo1.PNG has no
   baked-in wordmark, unlike the old logo.png). Sits directly on the
   dark topbar with no background plate — both lines in gold. */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

.logo-text__name {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--y-400);
}

.logo-text__tag {
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--y-600);
}

.logo-text__quote {
  font-family: 'Brush Script MT', 'Dancing Script', 'Great Vibes', cursive;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: normal;
  letter-spacing: normal;
  margin-left: 10px;
}

@media (max-width: 480px) {
  .logo-text__tag {
    display: none;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  /* consistent gap between every item (no auto space-between distribution).
     Fluid so it stays snug at the 1024px cut-off and opens up a touch on wider
     screens — all 11 items still fit at every width. */
  gap: clamp(.25rem, -.55rem + 1vw, .6rem);
}

.nav-item a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  /* Fluid nav sizing — font scales automatically with the viewport width so all
     11 items (Home … Contact) fit from the 1024px desktop cut-off up to full
     width. Modest, readable size (not oversized); the horizontal spacing between
     items is handled by justify-content:space-between on .nav-menu above. */
  padding: .45rem clamp(.12rem, .3vw, .45rem);
  font-size: clamp(.68rem, .3rem + .48vw, .82rem);
  font-weight: 550;
  color: var(--n-300);
  border-radius: 8px;
  /* soft rounded rectangle, not a full pill */
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}

/* status dot — hidden on the horizontal bar, shown in the drawer */
.nav-item a::before {
  content: "";
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-700);
  flex-shrink: 0;
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}

.nav-item a:hover {
  color: #fff;
  background: var(--wh-a10);
}

/* ---- Sakura Science navbar badge (fits in topbar) ---- */
.nav-sakura-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.25rem;
  flex-shrink: 0;
}

.nav-sakura-badge a {
  display: block;
  text-decoration: none;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border: 1.5px solid var(--wh-a10);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.nav-sakura-badge a:hover {
  transform: translateY(-2px);
  border-color: var(--y-400);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.nav-sakura-badge svg {
  height: 35px;
  width: auto;
  display: block;
}

@media (max-width: 820px) {
  .nav-sakura-badge {
    margin-left: auto;
    margin-right: 0.5rem;
  }

  .nav-sakura-badge svg {
    height: 30px;
  }
}

@media (max-width: 480px) {
  .nav-sakura-badge {
    display: none;
  }
}

/* ---- Premium Nav Badge Hover Popup Cards ---- */
.nav-badge-wrapper {
  position: relative;
  display: inline-block;
}

.nav-badge-popup {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transform-origin: top right;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  z-index: 1010;
  pointer-events: none;
}

.nav-badge-wrapper:hover .nav-badge-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.popup-glass-card {
  background: rgba(13, 17, 30, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(229, 172, 56, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  text-align: left;
  position: relative;
}

.nav-badge-preview-container {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  background: #090e1a;
}

.nav-badge-preview-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.popup-info h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2px;
}

.popup-info p {
  margin: 0 0 0.85rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--n-300);
  font-family: 'Inter', sans-serif;
}

.popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--y-400);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.2s, transform 0.2s;
  font-family: 'Inter', sans-serif;
}

.nav-badge-wrapper:hover .popup-btn {
  color: var(--y-300);
}

.popup-btn span[data-ic] {
  font-size: 0.85rem;
  transition: transform 0.25s var(--ease);
}

.nav-badge-wrapper:hover .popup-btn span[data-ic] {
  transform: translateX(3px);
}

.nav-badge-wrapper:hover a {
  transform: translateY(-2px);
  border-color: var(--y-400);
  box-shadow: 0 6px 14px rgba(229, 172, 56, 0.35);
}

.nav-item a:hover::before {
  background: var(--n-400);
}

/* Active item — gold text with a full-width gold underline only.
   No background fill, no border ring. */
.nav-item a.active {
  color: var(--y-400);
  background: transparent;
}

/* full-width gold underline under the active label */
.nav-item a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--y-500);
}

.nav-item a.active::before {
  background: var(--y-500);
  box-shadow: 0 0 10px var(--y-a45);
}

/* ===== Dropdown navigation (Academics → Academics / Beyond Academics) =====
   Desktop: the parent <li> is the hover target; the sub-menu drops down as a
   floating glass card. Clicking the parent link itself still navigates to the
   Academics page (the whole <a> stays a real link). Mobile behaviour is handled
   inside the drawer block further down. */
.nav-item--has-dropdown {
  position: relative;
}

/* little caret next to the parent label */
.nav-caret {
  display: inline-flex;
  align-items: center;
  width: .7em;
  height: .7em;
  margin-left: .1rem;
  transition: transform .3s var(--ease);
}

.nav-caret svg,
.nav-caret .ic {
  width: 100%;
  height: 100%;
}

.nav-item--has-dropdown:hover .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: rgba(13, 13, 12, .98);
  border: 1px solid var(--wh-a10);
  border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(13, 13, 12, .8);
  /* hidden until hover/focus */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 20;
}

/* small hover bridge so the pointer can travel from the tab to the card
   without the menu closing in the gap */
.nav-item--has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .8rem;
  font-size: .82rem;
  font-weight: 550;
  color: var(--n-200);
  border-radius: 10px;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.nav-dropdown a:hover {
  color: var(--y-400);
  background: var(--wh-a10);
}

.nav-dropdown a.active {
  color: var(--y-400);
  background: var(--wh-a06);
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 1002;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 0;
  background: var(--wh-a10);
  cursor: pointer;
  transition: background .3s var(--ease);
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: all .4s var(--ease);
}

.nav-toggle span:nth-child(1) {
  top: 16px;
}

.nav-toggle span:nth-child(2) {
  top: 22px;
}

.nav-toggle span:nth-child(3) {
  top: 28px;
}

/* When the drawer is open the toggle becomes the close (X) button:
   gold pill, ink bars. */
body.nav-open .nav-toggle {
  background: var(--y-500);
}

body.nav-open .nav-toggle span {
  background: var(--n-950);
}

body.nav-open .nav-toggle span:nth-child(1) {
  top: 22px;
  transform: translateX(-50%) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  top: 22px;
  transform: translateX(-50%) rotate(-45deg);
}

/* flashnews — slim cream ticker */
.flashnews {
  position: relative;
  z-index: 1;
  height: var(--flash-h);
  background: var(--y-050);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.flashnews .container-wide,
.flashnews .container {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.flashnews-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--n-950);
  color: var(--y-400);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .34rem .85rem;
  border-radius: var(--pill);
}

.flashnews-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.flashnews-content {
  display: inline-block;
  white-space: nowrap;
  color: var(--n-800) !important;
  font-size: .78rem;
  font-weight: 600;
  animation: marquee 22s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

.flashnews-content:hover {
  animation-play-state: paused;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flashnews-content .ic {
  color: var(--y-700);
}

@keyframes marquee {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ----- Drawer navigation (≤1280px — the ten-item menu needs a wide
   desktop to sit comfortably in one row) ----- */
/* Full horizontal bar shows from 1024px up. The nav font/padding scale fluidly
   (see .nav-item a clamp() above), so these desktop tiers only reclaim room from
   the LOGO block as the viewport narrows — dropping the script quote, then the
   affiliation line, then shrinking the crest — so all 11 items always fit. */
@media (min-width:1024px) and (max-width:1440px) {
  .topbar .container-wide {
    gap: clamp(.5rem, 1vw, 1.5rem);
  }

  .logo-text__quote {
    display: none;
  }

  /* script quote costs the most width */
}

@media (min-width:1024px) and (max-width:1200px) {
  .logo {
    gap: .45rem;
    padding-left: 12px;
  }

  .logo img {
    height: 32px;
  }

  .logo-text__name {
    font-size: .8rem;
  }
}

@media (min-width:1024px) and (max-width:1080px) {
  .logo-text__tag {
    display: none;
  }

  /* drop affiliation line when tightest */
  .logo-text__name {
    font-size: .72rem;
  }

  .logo img {
    height: 26px;
  }

  .logo {
    gap: .35rem;
    padding-left: 8px;
  }
}

@media (max-width:1023px) {
  .nav-toggle {
    display: block;
  }

  /* the status dots return inside the drawer */
  .nav-item a::before {
    display: inline-block;
  }

  .nav-menu {
    /* Sit above the header contents (z:1000) so the drawer fully covers the
       flashnews bar — but below the toggle (z:1002) so the close X stays on
       top and clickable. Covers the full viewport height from the very top. */
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1001;
    width: min(340px, 86vw);
    height: 100%;
    height: 100dvh;
    background: rgba(13, 13, 12, .98);
    border-radius: 24px 0 0 24px;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    padding: calc(var(--topbar-h) + 1.5rem) 1.5rem 10rem;
    transform: translateX(100%);
    transition: transform .55s var(--ease-io);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.nav-open .nav-menu {
    transform: translateX(0);
  }

  .nav-item {
    overflow: hidden;
    flex-shrink: 0;
  }

  .nav-item a {
    color: var(--n-200);
    padding: .9rem 1rem;
    border-radius: 14px;
    font-size: 1rem;
    transform: translateX(40px);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .5s var(--ease), color .25s var(--ease), background .25s var(--ease);
  }

  body.nav-open .nav-item a {
    transform: none;
    opacity: 1;
  }

  /* ---- dropdown inside the mobile drawer ----
     No hover on touch, so the sub-menu is always visible, indented under
     its parent. The caret is hidden (nothing to toggle). */
  .nav-item--has-dropdown {
    overflow: visible;
  }

  .nav-item--has-dropdown>a .nav-caret {
    display: none;
  }

  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: .15rem 0 .3rem .75rem;
    padding: 0 0 0 .6rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-left: 2px solid var(--wh-a10);
    border-radius: 0;
    box-shadow: none;
    gap: 0;
  }

  .nav-dropdown a {
    color: var(--n-300);
    padding: .7rem .8rem;
    font-size: .95rem;
    border-radius: 10px;
    transform: none;
    opacity: 1;
  }

  body.nav-open .nav-item:nth-child(1) a {
    transition-delay: .08s;
  }

  body.nav-open .nav-item:nth-child(2) a {
    transition-delay: .12s;
  }

  body.nav-open .nav-item:nth-child(3) a {
    transition-delay: .16s;
  }

  body.nav-open .nav-item:nth-child(4) a {
    transition-delay: .2s;
  }

  body.nav-open .nav-item:nth-child(5) a {
    transition-delay: .24s;
  }

  body.nav-open .nav-item:nth-child(6) a {
    transition-delay: .28s;
  }

  body.nav-open .nav-item:nth-child(7) a {
    transition-delay: .32s;
  }

  body.nav-open .nav-item:nth-child(8) a {
    transition-delay: .36s;
  }

  body.nav-open .nav-item:nth-child(9) a {
    transition-delay: .4s;
  }

  body.nav-open .nav-item:nth-child(10) a {
    transition-delay: .44s;
  }

  /* Backdrop for the mobile drawer. IMPORTANT: while closed it must be fully
     inert — NO background tint and NO backdrop-filter. Previously those were on
     the base (opacity:0) rule, and backdrop-filter isn't reliably gated by the
     element's own opacity on some mobile browsers, so a faint dark blur layer
     showed over the whole page even with the drawer closed. Apply the tint +
     blur ONLY when .open. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
  }

  .nav-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--ink-a45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
}

/* ==================================================================
   8. BUTTONS — graphite + ivory pills with a gold arrow language
   ================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: var(--pill);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 650;
  font-size: .92rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}

.btn .ic {
  transition: transform .35s var(--ease);
}

.btn:hover .ic {
  transform: translateX(4px);
}

.btn:active {
  transform: translateY(0) scale(.98) !important;
}

.btn-primary {
  background: var(--n-950);
  color: #fff;
}

.btn-primary [data-ic],
.btn-primary .ic {
  color: var(--y-400);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -14px rgba(13, 13, 12, .5), var(--glow);
  color: #fff;
}

.btn-ghost {
  background: rgba(255, 255, 255, .85);
  color: var(--n-900);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  color: var(--n-950);
  border-color: var(--y-500);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.btn-line {
  background: transparent;
  color: var(--n-800);
  border: 1.5px solid var(--n-300);
}

.btn-line:hover {
  color: var(--n-950);
  background: var(--y-400);
  border-color: var(--y-400);
  transform: translateY(-3px);
  box-shadow: var(--glow);
}

/* ==================================================================
   9. INTERIOR PAGES — new compositions for the shared vocabulary
   (Home page styling lives inline in index.html and is self-contained.)
   ================================================================== */

/* Page banner: oversized editorial title on ivory, ending in a gold
   full-stop, with a big open gold ring drifting behind — no photo
   band, no boxed header. */
.page-header {
  position: relative;
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(2.5rem, 5vh, 4rem);
  text-align: left;
  color: var(--n-900);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.page-header__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 90% at 96% 10%, var(--y-a14), transparent 65%),
    radial-gradient(40% 70% at 5% 95%, rgba(223, 169, 0, 0.05), transparent 60%);
}

/* Extend designs: add a large dashed ring on the bottom left */
.page-header__mesh::before {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1.5px dashed var(--y-a45);
  z-index: -1;
  pointer-events: none;
}

/* Extend designs: add a smaller dot cluster block on the left */
.page-header__mesh::after {
  content: "";
  position: absolute;
  top: 30px;
  left: max(5%, 30px);
  width: 60px;
  height: 60px;
  background: var(--pat-dots);
  background-size: 14px 14px;
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}

/* open gold ring + dot cluster on right (original extended) */
.page-header::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid var(--y-a45);
  /* Added a fainter secondary ring shadow to extend the design */
  box-shadow: -20px 20px 0 10px rgba(223, 169, 0, 0.04);
  z-index: -1;
  pointer-events: none;
}

.page-header::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 240px;
  width: 90px;
  height: 90px;
  z-index: -1;
  pointer-events: none;
  background: var(--pat-dots);
  background-size: 18px 18px;
  opacity: .8;
}

.page-header h1 {
  color: var(--n-900);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0;
}

/* ---- DYNAMIC PAGE HEADER SHAPES ---- */
.page-header {
  --svg-airplane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.8)'%3E%3Cpath d='M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z'/%3E%3C/svg%3E");
  --svg-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.3)'%3E%3Cpath d='M19.35,10.04C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.04C2.34,8.36 0,10.91 0,14C0,17.31 2.69,20 6,20H19C21.76,20 24,17.76 24,15C24,12.36 21.95,10.22 19.35,10.04Z'/%3E%3C/svg%3E");
  --svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.5)'%3E%3Cpath d='M12,2C8.13,2 5,5.13 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9C19,5.13 15.87,2 12,2M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5Z'/%3E%3C/svg%3E");
  --svg-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.4)'%3E%3Cpath d='M12 0C12 6.627 17.373 12 24 12C17.373 12 12 17.373 12 24C12 17.373 6.627 12 0 12C6.627 12 12 6.627 12 0Z'/%3E%3C/svg%3E");
  --svg-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.7)' stroke-width='1.5'%3E%3Cpath d='M4,19.5A2.5,2.5 0 0,1 6.5,17H20V3H6.5A2.5,2.5 0 0,0 4,5.5V19.5M4,19.5A2.5,2.5 0 0,0 6.5,22H20'/%3E%3C/svg%3E");
  --svg-gradcap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z'/%3E%3C/svg%3E");
  --svg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E");
  --svg-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M20.2 2H19.5H18C17.1 2 16 3 16 4V5H8V4C8 3 6.9 2 6 2H4.5H3.8C2.8 2 2 2.8 2 3.8V5.5C2 7.7 3.6 9.5 5.7 9.9C6.6 11.4 8.2 12.5 10 12.9V15H8C6.9 15 6 15.9 6 17V18H18V17C18 15.9 17.1 15 16 15H14V12.9C15.8 12.5 17.4 11.4 18.3 9.9C20.4 9.5 22 7.7 22 5.5V3.8C22 2.8 21.2 2 20.2 2M5 8.1C4 7.6 3.5 6.6 3.5 5.5V3.5H5C5.8 3.5 6.5 4.2 6.5 5V7.3C5.9 7.4 5.4 7.7 5 8.1M19 8.1C18.6 7.7 18.1 7.4 17.5 7.3V5C17.5 4.2 18.2 3.5 19 3.5H20.5V5.5C20.5 6.6 20 7.6 19 8.1M7.5 20H16.5V22H7.5V20Z'/%3E%3C/svg%3E");
  --svg-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M7,14C5.9,14 5,13.1 5,12C5,10.9 5.9,10 7,10C8.1,10 9,10.9 9,12C9,13.1 8.1,14 7,14M12.6,10C11.8,7.7 9.6,6 7,6C3.1,6 0,9.1 0,13C0,16.9 3.1,20 7,20C9.6,20 11.8,18.3 12.6,16H18V20H22V16H24V10H12.6Z'/%3E%3C/svg%3E");
  --svg-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M12,3V12.26C11.5,12.09 11,12 10.5,12C8,12 6,14 6,16.5C6,19 8,21 10.5,21C13,21 15,19 15,16.5V6H19V3H12Z'/%3E%3C/svg%3E");
  --svg-env: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/%3E%3C/svg%3E");
  --svg-balloon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M14,19H10V18.5C10,18.5 10,18.5 10,18V18C10,18 10,18 10,18V17H14V18C14,18 14,18 14,18V18.5C14,18.5 14,18.5 14,19M12,2C8.69,2 6,4.69 6,8C6,9.65 6.67,11.15 7.76,12.24C8.85,13.33 10.35,14 12,14C13.65,14 15.15,13.33 16.24,12.24C17.33,11.15 18,9.65 18,8C18,4.69 15.31,2 12,2Z'/%3E%3C/svg%3E");
  --svg-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.6)' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  --svg-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.7)' stroke-width='1.5'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  --svg-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 7.05,17.44 13.5,12C16.19,9.73 17,8 17,8Z'/%3E%3C/svg%3E");
  --svg-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.5)'%3E%3Cpath d='M12,21.35L10.55,20.03C5.4,15.36 2,12.28 2,8.5C2,5.42 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.09C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.42 22,8.5C22,12.28 18.6,15.36 13.45,20.04L12,21.35Z'/%3E%3C/svg%3E");

  --svg-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.65)' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88'/%3E%3C/svg%3E");

  /* Generic extras */
  --svg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.3)'%3E%3Cpath d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/%3E%3C/svg%3E");
  --svg-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.2)'%3E%3Cpath d='M12,2L22,12L12,22L2,12L12,2Z'/%3E%3C/svg%3E");
  --svg-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.4)' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");

  /* --- Themed shapes (title-matching) --- */
  --svg-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.7)'%3E%3Cpath d='M20,2H4V4L9.81,8.36C6.14,9.57 4.14,13.53 5.35,17.2C6.56,20.87 10.5,22.87 14.19,21.66C17.86,20.45 19.86,16.5 18.65,12.82C17.95,10.71 16.3,9.05 14.19,8.36L20,4V2M14.94,19.5L12,17.78L9.06,19.5L9.84,16.17L7.25,13.93L10.66,13.64L12,10.5L13.34,13.64L16.75,13.93L14.16,16.17L14.94,19.5Z'/%3E%3C/svg%3E");
  --svg-ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M12,2A6,6 0 0,1 18,8C18,10.22 16.79,12.16 15,13.2V22L12,20L9,22V13.2C7.21,12.16 6,10.22 6,8A6,6 0 0,1 12,2M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z'/%3E%3C/svg%3E");
  --svg-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E");
  --svg-atom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.6)' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='2' fill='rgba(223,169,0,0.6)' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4.5' transform='rotate(120 12 12)'/%3E%3C/svg%3E");
  --svg-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M12,3V13.55C11.41,13.21 10.73,13 10,13A3,3 0 0,0 7,16A3,3 0 0,0 10,19A3,3 0 0,0 13,16V7H17V3H12Z'/%3E%3C/svg%3E");
  --svg-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z'/%3E%3C/svg%3E");
  --svg-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.6)' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18M3 12h18M5 6c3 2 11 2 14 0M5 18c3-2 11-2 14 0'/%3E%3C/svg%3E");
  --svg-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M22,10V6A2,2 0 0,0 20,4H4A2,2 0 0,0 2,6V10A2,2 0 0,1 2,14V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V14A2,2 0 0,1 22,10M15,17H13V15H15V17M15,13H13V11H15V13M15,9H13V7H15V9Z'/%3E%3C/svg%3E");
  --svg-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.5)'%3E%3Cpath d='M12,3L2,12H5V20H19V12H22L12,3M12,8.5A2.5,2.5 0 0,1 14.5,11A2.5,2.5 0 0,1 12,13.5A2.5,2.5 0 0,1 9.5,11A2.5,2.5 0 0,1 12,8.5Z'/%3E%3C/svg%3E");
  --svg-bus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M18,11H6V6H18M16.5,17A1.5,1.5 0 0,1 15,15.5A1.5,1.5 0 0,1 16.5,14A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 16.5,17M7.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,14A1.5,1.5 0 0,1 9,15.5A1.5,1.5 0 0,1 7.5,17M4,16C4,16.88 4.39,17.67 5,18.22V20A1,1 0 0,0 6,21H7A1,1 0 0,0 8,20V19H16V20A1,1 0 0,0 17,21H18A1,1 0 0,0 19,20V18.22C19.61,17.67 20,16.88 20,16V6C20,2.5 16.42,2 12,2C7.58,2 4,2.5 4,6V16Z'/%3E%3C/svg%3E");
  --svg-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6H8A1,1 0 0,1 7,5A1,1 0 0,1 8,4H16A1,1 0 0,1 17,5A1,1 0 0,1 16,6H15V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6M5,19A1,1 0 0,0 6,20H18A1,1 0 0,0 19,19C19,18.79 18.93,18.59 18.82,18.43L16.53,14.47L14,17L8.93,11.93L5.18,18.43C5.07,18.59 5,18.79 5,19Z'/%3E%3C/svg%3E");
  --svg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.5)'%3E%3Cpath d='M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5A2,2 0 0,0 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z'/%3E%3C/svg%3E");
  --svg-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(223,169,0,0.6)' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18'/%3E%3C/svg%3E");
  --svg-recycle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M21.82,15.42L19.32,19.75C18.83,20.61 17.92,21.06 17,21H15V23L12.5,18.5L15,14V16H17.82L15.6,12.15L19.93,9.65L21.73,12.77C22.25,13.54 22.32,14.57 21.82,15.42M9.21,3.06H14.21C15.19,3.06 16.04,3.63 16.45,4.45L17.45,6.19L19.18,5.19L16.54,9.6L11.39,9.69L13.12,8.69L11.71,6.24L9.5,10.09L5.16,7.59L6.96,4.47C7.37,3.64 8.22,3.06 9.21,3.06M5.05,19.76L2.55,15.43C2.06,14.58 2.13,13.56 2.64,12.79L3.64,11.05L1.91,10.05L7.05,10.14L9.69,14.55L7.96,13.55L6.55,16H11V21H7.4C6.47,21.07 5.55,20.61 5.05,19.76Z'/%3E%3C/svg%3E");
  --svg-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z'/%3E%3C/svg%3E");
  --svg-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.5)'%3E%3Cpath d='M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z'/%3E%3C/svg%3E");
  --svg-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z'/%3E%3C/svg%3E");
  --svg-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.6)'%3E%3Cpath d='M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z'/%3E%3C/svg%3E");
  --svg-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M12,3C6.5,3 2,6.58 2,11C2,13.13 3.03,15.06 4.71,16.5C4.5,17.83 3.55,19 3.55,19C5.34,19 6.74,18.29 7.5,17.79C8.9,18.24 10.41,18.5 12,18.5C17.5,18.5 22,14.92 22,11C22,7.08 17.5,3 12,3Z'/%3E%3C/svg%3E");
  --svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(223,169,0,0.55)'%3E%3Cpath d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E");
}

/* Layer that holds the 4 shapes — sits ABOVE the header background/mesh
   but BELOW the title, so the shapes are always visible around the title. */
.header-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* keep the title (and any header content) above the shape layer */
.page-header>.container {
  position: relative;
  z-index: 2;
}

/* Base styles for the 4 injected shape DOM nodes */
.header-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Default placements/animations for the 4 shapes */
.shape-1 {
  top: 30%;
  left: 10%;
  width: 40px;
  height: 40px;
  animation: floatShapes 18s ease-in-out infinite alternate;
}

.shape-2 {
  top: 70%;
  right: 15%;
  width: 28px;
  height: 28px;
  animation: floatUp 25s linear infinite;
}

.shape-3 {
  top: 15%;
  right: 40%;
  width: 20px;
  height: 20px;
  animation: pulseRotate 12s ease-in-out infinite alternate;
}

.shape-4 {
  top: 80%;
  left: 25%;
  width: 32px;
  height: 32px;
  animation: driftRight 20s ease-in-out infinite alternate;
}

/* Generic Animations */
/* Airplane: flies bottom-LEFT up to top-RIGHT in one gentle diagonal curve.
   It starts low on the left, climbs as it moves right (curving), and ends high
   on the right. Nose banks up (rotate < 90) while climbing. vw = full width. */
@keyframes flyPlaneSlow {
  0% {
    transform: translate(-6vw, 60px) rotate(72deg);
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  50% {
    /* x exactly halfway (-6 → 49 → 104vw) so horizontal speed is CONSTANT
       across both halves — no pause/slow-down in the middle. */
    transform: translate(49vw, -5px) rotate(66deg);
  }

  94% {
    opacity: 1;
  }

  100% {
    transform: translate(104vw, -70px) rotate(62deg);
    opacity: 0;
  }
}

@keyframes floatShapes {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-30px) rotate(15deg) scale(1.1);
  }
}

@keyframes pulseRotate {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: rotate(90deg) scale(1.2);
    opacity: 1;
  }
}

@keyframes floatBook {
  0% {
    transform: translateY(0px) rotate(-10deg);
  }

  100% {
    transform: translateY(-40px) rotate(5deg);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(40px) rotate(-5deg) scale(0.9);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100px) rotate(25deg) scale(1.1);
    opacity: 0;
  }
}

@keyframes spinFloat {
  0% {
    transform: translateY(20px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(180deg);
  }

  100% {
    transform: translateY(20px) rotate(360deg);
  }
}

@keyframes driftRight {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    transform: translateX(50px) rotate(15deg);
  }
}

@keyframes bounceNote {
  0% {
    transform: translateY(0px) rotate(-15deg);
  }

  33% {
    transform: translateY(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-10px) rotate(-10deg);
  }

  100% {
    transform: translateY(10px) rotate(15deg);
  }
}

@keyframes flashScale {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes fallLeaf {
  0% {
    transform: translateY(-40px) rotate(0deg);
    opacity: 0;
  }

  20% {
    transform: translateY(-10px) rotate(45deg);
    opacity: 1;
  }

  50% {
    transform: translateY(30px) rotate(-20deg);
  }

  80% {
    transform: translateY(60px) rotate(60deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100px) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes heartPulse {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.1);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* --- Page Mappings (4 shapes each) --- */
/* plane starts lower-left and flies up to the top-right (diagonal curve). */
.header-internationalism .header-shapes {
  overflow: visible;
}

.header-internationalism .shape-1 {
  background-image: var(--svg-airplane);
  animation: flyPlaneSlow 22s linear infinite;
  top: 52%;
  left: 0;
  width: 46px;
  height: 46px;
}

.header-internationalism .shape-2 {
  background-image: var(--svg-cloud);
  width: 45px;
  height: 45px;
}

.header-internationalism .shape-3 {
  background-image: var(--svg-pin);
  width: 25px;
  height: 25px;
}

/* globe completes the travel/world theme */
.header-internationalism .shape-4 {
  background-image: var(--svg-globe);
}

/* About Us — school identity: book, graduation cap, building, star */
.header-about-us .shape-1 {
  background-image: var(--svg-book);
  animation: floatBook 8s ease-in-out infinite alternate;
}

.header-about-us .shape-2 {
  background-image: var(--svg-gradcap);
}

.header-about-us .shape-3 {
  background-image: var(--svg-building);
}

.header-about-us .shape-4 {
  background-image: var(--svg-star);
}

.header-academics .shape-1 {
  background-image: var(--svg-gradcap);
  animation: floatUp 15s linear infinite;
  width: 50px;
  height: 50px;
  left: 15%;
}

/* Academics — learning: graduation cap, book, pencil, atom */
.header-academics .shape-2 {
  background-image: var(--svg-book);
}

.header-academics .shape-3 {
  background-image: var(--svg-pencil);
}

.header-academics .shape-4 {
  background-image: var(--svg-atom);
}

/* Achievements — clustered on the RIGHT, clear of the title */
.header-achievements .shape-1 {
  background-image: var(--svg-trophy);
  animation: spinFloat 20s linear infinite;
  width: 58px;
  height: 58px;
  left: auto;
  right: 8%;
  top: 30%;
}

.header-achievements .shape-2 {
  background-image: var(--svg-medal);
  width: 34px;
  height: 34px;
  left: auto;
  right: 22%;
  top: 20%;
}

.header-achievements .shape-3 {
  background-image: var(--svg-star);
  left: auto;
  right: 30%;
  top: 65%;
}

.header-achievements .shape-4 {
  background-image: var(--svg-ribbon);
  left: auto;
  right: 4%;
  top: 72%;
}

.header-admissions .shape-1 {
  background-image: var(--svg-key);
  animation: driftRight 15s ease-in-out infinite alternate;
  left: 15%;
  top: 40%;
  width: 45px;
  height: 45px;
}

/* Admissions — enrol: key, envelope, document/note, checkmark */
.header-admissions .shape-2 {
  background-image: var(--svg-env);
}

.header-admissions .shape-3 {
  background-image: var(--svg-note);
}

.header-admissions .shape-4 {
  background-image: var(--svg-check);
}

/* Beyond Academics — arts, sports & activities: music, palette, ball, ticket */
.header-beyond-academics .shape-1 {
  background-image: var(--svg-music);
  animation: bounceNote 12s ease-in-out infinite alternate;
  left: 10%;
  top: 50%;
  width: 42px;
  height: 42px;
}

.header-beyond-academics .shape-2 {
  background-image: var(--svg-palette);
}

.header-beyond-academics .shape-3 {
  background-image: var(--svg-ball);
}

.header-beyond-academics .shape-4 {
  background-image: var(--svg-ticket);
}

/* Contact — reach us: envelope, map pin, phone, chat bubble */
.header-contact .shape-1 {
  background-image: var(--svg-env);
  animation: floatBook 10s ease-in-out infinite alternate;
  width: 45px;
  height: 45px;
}

.header-contact .shape-2 {
  background-image: var(--svg-pin);
}

.header-contact .shape-3 {
  background-image: var(--svg-phone);
}

.header-contact .shape-4 {
  background-image: var(--svg-chat);
}

/* Events — playful spread on the RIGHT half (balloon high, notes drifting) */
.header-events .shape-1 {
  background-image: var(--svg-balloon);
  animation: floatUp 12s linear infinite;
  width: 56px;
  height: 56px;
  left: auto;
  right: 12%;
  top: 18%;
}

.header-events .shape-2 {
  background-image: var(--svg-music);
  left: auto;
  right: 30%;
  top: 55%;
}

.header-events .shape-3 {
  background-image: var(--svg-ticket);
  left: auto;
  right: 5%;
  top: 60%;
}

.header-events .shape-4 {
  background-image: var(--svg-star);
  left: auto;
  right: 24%;
  top: 15%;
}

.header-facilities .shape-1 {
  background-image: var(--svg-gear);
  animation: spinFloat 30s linear infinite;
  width: 60px;
  height: 60px;
}

/* Facilities — campus infrastructure: gear, building, bus, flask */
.header-facilities .shape-2 {
  background-image: var(--svg-building);
}

.header-facilities .shape-3 {
  background-image: var(--svg-bus);
}

.header-facilities .shape-4 {
  background-image: var(--svg-flask);
}

.header-bus-route .shape-1,
.header-bus-route-details .shape-1,
.header-transport .shape-1,
.header-transport-details .shape-1 {
  background-image: var(--svg-bus);
  animation: driftRight 20s ease-in-out infinite alternate;
  width: 58px;
  height: 58px;
  top: 30%;
  left: 10%;
}

.header-bus-route .shape-2,
.header-bus-route-details .shape-2,
.header-transport .shape-2,
.header-transport-details .shape-2 {
  background-image: var(--svg-pin);
  width: 32px;
  height: 32px;
  top: 20%;
  right: 20%;
}

.header-bus-route .shape-3,
.header-bus-route-details .shape-3,
.header-transport .shape-3,
.header-transport-details .shape-3 {
  background-image: var(--svg-compass);
  animation: spinFloat 16s linear infinite !important;
  width: 48px;
  height: 48px;
  top: 60%;
  right: 15%;
}

.header-bus-route .shape-4,
.header-bus-route-details .shape-4,
.header-transport .shape-4,
.header-transport-details .shape-4 {
  background-image: var(--svg-sparkle);
  width: 25px;
  height: 25px;
  top: 70%;
  left: 30%;
}


/* Gallery — camera lower-right, geometric scatter across the RIGHT */
.header-gallery .shape-1 {
  background-image: var(--svg-camera);
  animation: flashScale 6s ease-in-out infinite alternate;
  width: 48px;
  height: 48px;
  left: auto;
  right: 10%;
  top: 58%;
}

.header-gallery .shape-2 {
  background-image: var(--svg-image);
  left: auto;
  right: 6%;
  top: 22%;
}

.header-gallery .shape-3 {
  background-image: var(--svg-star);
  left: auto;
  right: 26%;
  top: 30%;
}

.header-gallery .shape-4 {
  background-image: var(--svg-heart);
  left: auto;
  right: 34%;
  top: 70%;
}

.header-green-initiatives .shape-1 {
  background-image: var(--svg-leaf);
  animation: fallLeaf 15s linear infinite;
  width: 45px;
  height: 45px;
  left: 10%;
}

/* Green Initiatives — eco: leaf, recycle, sun, water droplet */
.header-green-initiatives .shape-2 {
  background-image: var(--svg-recycle);
}

.header-green-initiatives .shape-3 {
  background-image: var(--svg-sun);
}

.header-green-initiatives .shape-4 {
  background-image: var(--svg-droplet);
}

/* Staff Welfare — heart top-right, soft accents down the RIGHT edge */
.header-staff-welfare .shape-1 {
  background-image: var(--svg-heart);
  animation: heartPulse 3s ease-in-out infinite;
  width: 52px;
  height: 52px;
  left: auto;
  right: 14%;
  top: 24%;
}

.header-staff-welfare .shape-2 {
  background-image: var(--svg-users);
  left: auto;
  right: 6%;
  top: 55%;
}

.header-staff-welfare .shape-3 {
  background-image: var(--svg-star);
  left: auto;
  right: 32%;
  top: 62%;
}

.header-staff-welfare .shape-4 {
  background-image: var(--svg-ribbon);
  left: auto;
  right: 28%;
  top: 20%;
}

/* the gold full-stop */
.page-header h1::after {
  content: "";
  display: inline-block;
  width: .22em;
  height: .22em;
  margin-left: .12em;
  border-radius: 50%;
  background: var(--grad-gold-deep);
}

.section {
  padding: clamp(3rem, 7vh, 5.5rem) 0;
}

/* Alternate sections become inset rounded WHITE bands — the page reads
   as floating sheets over the ivory canvas rather than flat stripes. */
.section-alt {
  background: var(--n-000);
  border-radius: var(--r-xl);
  margin: 0 clamp(.6rem, 1.6vw, 1.6rem);
  box-shadow: var(--sh-1);
}

.content-row {
  display: grid;
  grid-template-columns: 1.05fr .92fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.content-row.reverse .content-text {
  order: 2;
}

.content-row.reverse .content-img {
  order: 1;
}

/* Responsive card grid utility (e.g. the 3 Co-scholastic cards). Cards are
   top-aligned and collapse 3 -> 2 -> 1 columns as the screen narrows. */
.content-row.cards-grid {
  align-items: stretch;
  gap: 2rem;
}

.cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width:900px) {
  .content-row.cards-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:600px) {

  .content-row.cards-grid,
  .content-row.cards-grid--3,
  .content-row.cards-grid--2 {
    grid-template-columns: 1fr;
  }
}

.content-text h2 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 780;
  letter-spacing: -.035em;
  color: var(--n-900);
  position: relative;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
}

/* no underline bars anywhere — hierarchy comes from scale + space */
.content-text h2::after {
  display: none;
}

/* Centred content blocks (e.g. NCERT): the h2 is a flex container, so
   text-align:center alone won't centre its text — centre the flex content. */
.content-text[style*="text-align: center"] h2,
.content-text[style*="text-align:center"] h2 {
  justify-content: center;
}

.content-text p {
  font-size: 1rem;
  color: var(--n-500);
  margin-bottom: .9rem;
}

.content-text h4 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.content-text h4 [data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-gold);
  color: var(--n-900);
  box-shadow: var(--glow);
  flex-shrink: 0;
}

.content-text h4 [data-ic] .ic {
  width: 16px;
  height: 16px;
}

/* image treatments — soft rounded photo cards with a dotted gold
   texture tucked behind one corner. */
.content-img {
  position: relative;
  align-self: center;
  line-height: 0;
  width: 100%;
}

/* dotted gold texture behind the arch */
.content-img::before {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -22px;
  width: 45%;
  height: 42%;
  z-index: 0;
  background: var(--pat-dots);
  background-size: 16px 16px;
  border-radius: 8px;
  pointer-events: none;
}

/* small open ring at the arch shoulder */
.content-img::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 12%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--y-a45);
  z-index: 0;
  pointer-events: none;
}

.img-glass {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.img-glass:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
}

/* image stacks (multiple-images) stay rectangular cards */
.multiple-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  line-height: 0;
  max-width: none;
}

.multiple-images::before,
.multiple-images::after {
  display: none;
}

.multiple-images .img-glass {
  aspect-ratio: auto;
  border-radius: var(--r-lg);
}

/* card blocks (vision/mission/values, 3-up feature cards) — soft white
   sheets; images inside cards stay rectangular */
.content-text[style*="background: white"],
.content-text[style*="background:white"] {
  background: var(--n-000) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-1) !important;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.content-text[style*="background: white"]:hover,
.content-text[style*="background:white"]:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-3) !important;
}

.content-text[style*="background: white"] .img-glass,
.content-text[style*="background:white"] .img-glass {
  aspect-ratio: auto;
  border-radius: var(--r);
  box-shadow: none;
}

.content-text .ic {
  color: var(--y-600);
}

/* Section-heading icon badge: a gold COIN. The inner SVG is pinned to
   20px so it never scales with the h2 font-size. */
.content-text h2 [data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: var(--glow);
  vertical-align: middle;
  margin-right: 16px;
}

.content-text h2 [data-ic] .ic {
  width: 20px;
  height: 20px;
  margin: 0;
  color: var(--n-900);
}

/* check lists — small gold coin ticks */
.content-text ul li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .98rem;
  color: var(--n-500);
  margin-bottom: .7rem !important;
}

.content-text ul li [data-ic],
.content-text ul li i {
  color: var(--n-950);
  flex-shrink: 0;
  margin-top: .2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--y-400);
}

.content-text ul li [data-ic] .ic {
  width: 12px;
  height: 12px;
  background: none;
  border-radius: 0;
  color: var(--n-950);
}

/* data-friendly plain lists (senior secondary etc.) */
.content-text ul[style*="padding-left"] li {
  display: list-item;
}

/* skills / feature grid — BENTO: mixed tile sizes, one graphite tile
   and one wide gold tile give the grid a designed rhythm */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  text-align: center;
}

.circle {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 2rem 1.4rem;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.circle:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}


.circle [data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: var(--glow);
  color: var(--n-900);
}

.circle [data-ic] .ic {
  width: 24px;
  height: 24px;
}

.circle p {
  margin: 0;
  font-weight: 600;
  color: var(--n-700);
}

@media (max-width:900px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .circle {
    grid-column: span 1;
  }
}

@media (max-width:480px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}

/* stat pill — white porcelain pills with gradient gold figures */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.1rem 0 1.3rem;
}

.stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .8rem 1.35rem;
  background: var(--n-000);
  border-radius: var(--pill);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.stat-pill:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

.stat-pill__num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(110deg, var(--y-700), var(--y-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-pill__label {
  font-size: .7rem;
  font-weight: 650;
  color: var(--n-500);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* highlight box — award callout as a cream ribbon with a coin icon */
.highlight-box {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .8rem 1.1rem;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: .92rem;
  background: var(--y-100);
  color: var(--y-900);
}

.highlight-box [data-ic] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--n-000);
  color: var(--y-700);
  box-shadow: var(--sh-1);
}

/* project meta-card — the "TITLE / STUDENTS / GUIDE TEACHER" facts as
   an editorial FACT SHEET: strong top rule, hairline rows, no box. */
.project-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 1.4rem;
  padding: 0;
  background: transparent;
  border-top: 3px solid var(--n-900);
}

.project-meta__row {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-size: .92rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}

.project-meta__row[data-role="title"] {
  font-size: 1.05rem;
}

.project-meta__label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--y-800);
  min-width: 128px;
}

.project-meta__label [data-ic] {
  flex-shrink: 0;
}

.project-meta__label [data-ic] .ic {
  width: 13px;
  height: 13px;
}

.project-meta__value {
  color: var(--n-800);
  font-weight: 650;
}

.project-meta__row[data-role="title"] .project-meta__value {
  color: var(--n-900);
  font-weight: 750;
  letter-spacing: -.01em;
}

@media (max-width:560px) {
  .project-meta__row {
    flex-direction: column;
    gap: .15rem;
  }

  .project-meta__label {
    min-width: 0;
  }
}

/* Abstract intro — quiet caps with a gold lead line. */
.abstract-lead {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--n-400);
}

.abstract-lead::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold-deep);
}

/* Academic journey — CENTRE-LINE timeline: cards alternate left and
   right of a central gold rail (single left rail on small screens). */
.journey {
  position: relative;
  max-width: 1020px;
  margin: 0 auto;
}

.journey::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--y-400), var(--n-200) 88%, transparent);
}

.journey-step {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding: 0 0 2.75rem;
}

.journey-step:last-child {
  padding-bottom: 0;
}

.journey-step__badge {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-gold);
  color: var(--n-900);
  box-shadow: var(--glow);
  font-weight: 750;
  font-size: .64rem;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.15;
}

.journey-step__badge [data-ic] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.journey-step__badge span {
  display: block;
}

.journey-step__badge .ic {
  width: 24px;
  height: 24px;
  margin: 0;
}

.journey-step__body {
  flex: 1;
  min-width: 0;
  padding: 1.6rem 1.8rem;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.journey-step__body:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

/* zig-zag layout on wide screens */
@media (min-width:901px) {
  .journey::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .journey-step {
    display: grid;
    grid-template-columns: 1fr 76px 1fr;
    column-gap: 1.4rem;
    align-items: start;
  }

  .journey-step__badge {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .journey-step__body {
    grid-column: 3;
    grid-row: 1;
  }

  .journey-step:nth-child(even) .journey-step__body {
    grid-column: 1;
  }
}

@media (max-width:720px) {
  .journey::before {
    left: 21px;
  }

  .journey-step {
    gap: 1.1rem;
  }

  .journey-step__badge {
    width: 44px;
    height: 44px;
  }

  .journey-step__badge [data-ic],
  .journey-step__badge .ic {
    width: 19px;
    height: 19px;
  }
}

.journey-step__stage {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .75rem;
  border-radius: var(--pill);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--y-800);
  background: var(--y-100);
}

.journey-step__body h2,
.journey-step__body h3 {
  margin-top: 0;
}

.journey-step__body h2 {
  font-size: 1.3rem;
}

.journey-step__body ul {
  padding-left: 20px;
  margin-bottom: 0;
}

/* Feature spotlight — Beyond Academics identity tag: naked editorial
   index (big gold coin number + tracked caps, no pill box) */
.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.1rem;
}

.feature-tag__num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-gold);
  color: var(--n-900);
  font-weight: 800;
  font-size: .88rem;
  box-shadow: var(--glow);
}

.feature-tag__label {
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--n-400);
}

/* data table — editorial table: no dark header block, just a strong
   ink top rule, tracked caps and hairline rows */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: transparent;
}

@media (max-width: 768px) {
  .data-table {
    min-width: 650px;
  }
}

.data-table thead th {
  background: transparent;
  color: var(--n-900);
  text-align: left;
  padding: .9rem 1rem;
  font-weight: 750;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 3px solid var(--n-900);
  border-bottom: 1px solid var(--line);
}

.data-table tbody td {
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--n-600);
}

.data-table tbody tr {
  transition: background .25s var(--ease);
}

.data-table tbody tr:hover {
  background: var(--y-050);
}

.data-table img {
  border-radius: 14px;
}

/* ==================================================================
   12. FOOTER — full-width deep graphite with a warm gold bloom
   ================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  color: var(--n-300);
  /* extra 60px of space below the bottom row (icons/copyright): 1.5rem + 60px */
  padding: 4.5rem 0 calc(1.5rem + 60px);
  background-color: var(--n-950);
  background-image:
    radial-gradient(48% 64% at 92% 0%, var(--y-a08), transparent 62%),
    linear-gradient(0deg, var(--n-950), var(--n-950));
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--y-500), var(--y-a25) 55%, transparent);
}

.footer::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--y-a14), transparent 70%);
  pointer-events: none;
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  margin-bottom: 2.25rem;
}

.footer-section h3 {
  color: var(--n-000);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}

.footer-section h3::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold-deep);
}

.footer-section h3::after {
  display: none;
}

.footer-section p {
  color: var(--n-300);
  margin-bottom: .8rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.footer-section p a {
  color: var(--n-300);
}

.footer-section p a:hover {
  color: var(--y-400);
}

.footer-section .ic {
  color: var(--y-500);
  flex-shrink: 0;
}

.quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.5rem;
  font-size: .88rem;
}

.quicklinks li a {
  color: var(--n-300);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .25s var(--ease), transform .25s var(--ease);
}

/* Chevron: fixed 16px, vertically centred with the link text */
.quicklinks li a>[data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0;
  color: var(--y-500);
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}

.quicklinks li a>[data-ic] .ic {
  width: 16px;
  height: 16px;
}

.quicklinks li a:hover {
  color: var(--y-400);
  transform: translateX(5px);
}

.quicklinks li a:hover>[data-ic] {
  transform: translateX(2px);
}

.footer-bottom {
  position: relative;
  text-align: center;
  padding-top: 1.4rem;
  border-top: 1px solid var(--wh-a06);
  color: var(--n-400);
  font-size: .78rem;
  letter-spacing: .02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
}

.social-links {
  display: flex;
  gap: .6rem;
}

/* Each network's icon carries its own real brand colour at rest (via
   currentColor on the <a>) — Facebook blue, YouTube red, X's ink black/
   white, Instagram's gradient (baked into its SVG, unaffected by
   currentColor). The circle itself stays neutral on a glass background
   so four different brand colours sit calmly side by side; hover lifts
   the icon and brightens its own plate instead of forcing every icon to
   the same gold on rollover. */
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wh-a06);
  font-size: 1.35rem;
  transition: all .35s var(--ease);
}

.social-links a[aria-label="Facebook"] {
  color: #1877F2;
}

.social-links a[aria-label="Youtube"] {
  color: #FF0000;
}

.social-links a[aria-label="Instagram"] {
  color: var(--n-300);
}

.social-links a[aria-label="X (Twitter)"] {
  color: var(--n-100);
}

.social-links a:hover {
  background: var(--wh-a16);
  border-color: var(--wh-a16);
  transform: translateY(-4px);
  box-shadow: var(--sh-1);
}

.social-links a[aria-label="Facebook"]:hover {
  box-shadow: 0 10px 22px -8px rgba(24, 119, 242, .55);
}

.social-links a[aria-label="Youtube"]:hover {
  box-shadow: 0 10px 22px -8px rgba(255, 0, 0, .5);
}

.social-links a[aria-label="X (Twitter)"]:hover {
  color: #fff;
}

/* ==================================================================
   13. GALLERY — category FILTER BAR + MASONRY columns + LIGHTBOX
   ================================================================== */

/* ---- Filter bar (category chips) ---- */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto 2rem;
}

.gallery-chip {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--n-600);
  background: var(--n-000);
  border: 1px solid var(--n-200);
  border-radius: var(--pill);
  padding: .55rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.gallery-chip:hover {
  color: var(--n-900);
  border-color: var(--y-500);
}

.gallery-chip__count {
  font-size: .72rem;
  font-weight: 700;
  padding: .05rem .45rem;
  border-radius: var(--pill);
  background: var(--n-100);
  color: var(--n-500);
  transition: background .25s var(--ease), color .25s var(--ease);
}

.gallery-chip.active {
  color: var(--n-950);
  background: var(--grad-gold-deep);
  border-color: transparent;
  box-shadow: var(--glow);
}

.gallery-chip.active .gallery-chip__count {
  background: rgba(13, 13, 12, .18);
  color: var(--n-950);
}

/* CSS GRID (not multi-column): fills row-by-row so rows always align —
   no ragged empty gaps like the old `columns` masonry left, especially
   after category filtering. Uniform 4:3 tiles keep it tidy. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

/* hidden by filter */
.gallery-item[hidden] {
  display: none;
}

/* filtered-in entrance */
.gallery-item.gallery-item--in {
  animation: gallery-pop .45s var(--ease) both;
}

@keyframes gallery-pop {
  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* empty state (no photos in a category) */
.gallery-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  color: var(--n-400);
  font-weight: 550;
}

.gallery-empty[hidden] {
  display: none;
}

/* "View More" pagination button */
.gallery-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.gallery-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.8rem;
  border-radius: var(--pill);
  border: 1px solid var(--y-500);
  background: var(--grad-gold-deep);
  color: var(--n-950);
  font-family: inherit;
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.gallery-more:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-lg);
}

.gallery-more [data-ic],
.gallery-more .ic {
  width: 16px;
  height: 16px;
}

.gallery-more[hidden] {
  display: none;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  cursor: pointer;
  background: var(--n-000);
  box-shadow: var(--sh-1);
  aspect-ratio: 4 / 3;
  /* uniform tiles → rows align, no gaps */
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  z-index: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill the tile, no letterboxing */
  display: block;
  transition: transform .7s var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item .zoom-hint {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem;
  background: linear-gradient(to bottom, rgba(13, 13, 12, 0.3) 0%, rgba(13, 13, 12, 0.75) 100%);
  color: #fff;
  transition: opacity .45s var(--ease);
}

.gallery-item:hover .zoom-hint {
  opacity: 1;
}

.gallery-item .gallery-badge {
  background: var(--y-400);
  color: var(--n-950);
  padding: 0.32rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  border-radius: var(--pill);
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px);
  transition: transform 0.45s var(--ease);
}

.gallery-item .gallery-title {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transform: translateY(8px);
  transition: transform 0.45s var(--ease);
  text-align: left;
}

.gallery-item:hover .gallery-badge,
.gallery-item:hover .gallery-title {
  transform: translateY(0);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 12, .94);
  backdrop-filter: blur(12px);
  padding: 2rem;
}

.lightbox.open {
  display: flex;
  animation: lb .35s var(--ease);
}

@keyframes lb {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* figure wraps the image + share bar so they animate/center as one unit */
.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 92vw;
}

.lightbox img {
  max-width: 90vw;
  max-height: 78vh;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: lbimg .5s var(--ease);
}

/* ---- Caption bar under the photo ---- */
.lb-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .8rem 1.4rem;
  border-radius: var(--r);
  background: var(--wh-a10);
  border: 1px solid var(--wh-a16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: lbimg .5s var(--ease) .1s both;
  text-align: center;
  max-width: 600px;
  width: 90%;
}

.lb-caption__badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--y-400);
  letter-spacing: .06em;
}

.lb-caption__title {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.45;
}

@keyframes lbimg {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.lightbox .lb-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--wh-a16);
  background: var(--wh-a06);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  backdrop-filter: blur(10px);
  transition: all .3s var(--ease);
}

.lightbox .lb-btn:hover {
  background: var(--grad-gold-deep);
  color: var(--n-950);
  border-color: transparent;
  box-shadow: var(--glow);
}

.lb-close {
  top: 24px;
  right: 24px;
}

.lb-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* ==================================================================
   14. SCROLL REVEAL / ANIMATION UTILITIES
   Calm, modern motion: long expo-out settles, soft rises and fades.
   ================================================================== */
[data-anim] {
  opacity: 0;
  /* will-change only WHILE hidden (about to animate); dropped once
     revealed so we don't keep hundreds of permanent GPU layers. */
  will-change: transform, opacity;
  /* .6s (was 1s) — snappier reveal so content doesn't feel slow to appear */
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}

[data-anim].in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

[data-anim="up"] {
  transform: translateY(34px);
}

[data-anim="down"] {
  transform: translateY(-34px);
}

[data-anim="left"] {
  transform: translateX(-44px);
}

[data-anim="right"] {
  transform: translateX(44px);
}

[data-anim="zoom"] {
  transform: scale(.94) translateY(14px);
}

[data-anim="zoom-out"] {
  transform: scale(1.06);
}

[data-anim="rotate"] {
  transform: rotate(-2deg) translateY(20px);
}

[data-anim="blur"] {
  filter: blur(12px);
}

[data-anim="clip"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-io), opacity .3s var(--ease);
}

[data-anim="clip"].in {
  clip-path: inset(0 0 0 0);
}

[data-delay="1"] {
  transition-delay: .1s;
}

[data-delay="2"] {
  transition-delay: .2s;
}

[data-delay="3"] {
  transition-delay: .3s;
}

[data-delay="4"] {
  transition-delay: .4s;
}

[data-delay="5"] {
  transition-delay: .5s;
}

[data-delay="6"] {
  transition-delay: .6s;
}

/* stagger container */
[data-stagger]>* {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

[data-stagger].in>* {
  opacity: 1;
  transform: none;
}

/* pop-cascade variant — items scale up with a soft overshoot (used for
   gallery grids so photos "pop" in rather than merely rising). */
[data-stagger-pop]>* {
  transform: scale(.86);
  transition: opacity .7s var(--ease), transform .75s cubic-bezier(.2, 1.4, .3, 1);
}

[data-stagger-pop].in>* {
  transform: none;
}

[data-stagger].in>*:nth-child(1) {
  transition-delay: .04s;
}

[data-stagger].in>*:nth-child(2) {
  transition-delay: .12s;
}

[data-stagger].in>*:nth-child(3) {
  transition-delay: .2s;
}

[data-stagger].in>*:nth-child(4) {
  transition-delay: .28s;
}

[data-stagger].in>*:nth-child(5) {
  transition-delay: .36s;
}

[data-stagger].in>*:nth-child(6) {
  transition-delay: .44s;
}

/* split-text (words) — padding gives descenders room so overflow:hidden doesn't clip glyphs */
.split-text .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .12em .02em;
  margin: -.12em -.02em;
}

.split-text .word>span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .9s var(--ease);
}

.split-text.in .word>span {
  transform: none;
}

.split-text.in .word:nth-child(1)>span {
  transition-delay: .02s;
}

.split-text.in .word:nth-child(2)>span {
  transition-delay: .08s;
}

.split-text.in .word:nth-child(3)>span {
  transition-delay: .14s;
}

.split-text.in .word:nth-child(4)>span {
  transition-delay: .2s;
}

.split-text.in .word:nth-child(5)>span {
  transition-delay: .26s;
}

.split-text.in .word:nth-child(6)>span {
  transition-delay: .32s;
}

.split-text.in .word:nth-child(7)>span {
  transition-delay: .38s;
}

.split-text.in .word:nth-child(8)>span {
  transition-delay: .44s;
}

.split-text.in .word:nth-child(n+9)>span {
  transition-delay: .5s;
}

/* ==================================================================
   14b. EXTRA ANIMATION VARIETIES
   A richer palette of scroll-reveal effects used across the interior
   pages so each section feels distinct. main.js auto-assigns these
   (cycling per section) to elements that don't already carry a
   [data-anim], and pages can also use them by hand. All settle to
   the shared [data-anim].in end-state (opacity:1; transform:none).
   ================================================================== */

/* 3D flip up from the bottom edge */
[data-anim="flip"] {
  transform: perspective(1200px) rotateX(-32deg);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}

/* 3D flip in from the left edge (like a door swinging open) */
[data-anim="flip-y"] {
  transform: perspective(1200px) rotateY(24deg);
  transform-origin: 0% 50%;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}

/* soft skew slide from the left */
[data-anim="skew"] {
  transform: translateX(-40px) skewX(6deg);
}

/* pop / overshoot (bouncy settle) */
[data-anim="pop"] {
  transform: scale(.8);
  transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2, 1.4, .3, 1);
}

/* swing in with a slight rotation from the top */
[data-anim="swing"] {
  transform: rotate(4deg) translateY(-30px);
  transform-origin: top center;
}

/* rise combined with a blur clearing (dreamy) */
[data-anim="rise-blur"] {
  transform: translateY(40px);
  filter: blur(10px);
}

/* unfold vertically (scaleY grow from the top) */
[data-anim="unfold"] {
  transform: scaleY(.55);
  transform-origin: top center;
  transition: opacity .8s var(--ease), transform 1s var(--ease-io);
}

/* deep zoom + up, cinematic */
[data-anim="zoom-up"] {
  transform: scale(.85) translateY(40px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}

/* clip reveal from the bottom (wipes upward) */
[data-anim="clip-up"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(20px);
  transition: clip-path 1.1s var(--ease-io), transform 1.1s var(--ease-io), opacity .3s var(--ease);
}

[data-anim="clip-up"].in {
  clip-path: inset(0 0 0 0);
}

/* Extra stagger depth: children 7–12 keep cascading (base file only
   defines up to 6). Keeps large grids animating item-by-item. */
[data-stagger].in>*:nth-child(7) {
  transition-delay: .52s;
}

[data-stagger].in>*:nth-child(8) {
  transition-delay: .6s;
}

[data-stagger].in>*:nth-child(9) {
  transition-delay: .68s;
}

[data-stagger].in>*:nth-child(10) {
  transition-delay: .76s;
}

[data-stagger].in>*:nth-child(11) {
  transition-delay: .84s;
}

[data-stagger].in>*:nth-child(n+12) {
  transition-delay: .9s;
}

/* ---- Page-header entrance (runs once on load, no scroll needed) ----
   The interior page title rises + the decorative ring/dots fade in,
   giving every page a polished first impression. */
@keyframes ssv-ph-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ssv-ph-ring {
  from {
    opacity: 0;
    transform: scale(.6) rotate(-30deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ssv-ph-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: .8;
  }
}

/* Header entrance — kept snappy so interior pages don't FEEL slow to render.
   (These are pure-CSS, so they run on load without waiting for JS; long
   durations/delays here were the main reason interior headers felt sluggish.) */
.page-header h1 {
  animation: ssv-ph-rise .45s var(--ease) both;
}

.page-header::before {
  animation: ssv-ph-ring .6s var(--ease) both .05s;
}

.page-header::after {
  animation: ssv-ph-fade .5s var(--ease) both .1s;
}

.page-header__mesh {
  animation: ssv-ph-fade .6s var(--ease) both;
}

/* ---- Gentle whole-page fade-in on load (feels like a page transition) ----
   Applied via body.ssv-loaded (set by main.js). If JS never runs the
   body simply stays fully visible (no dependency on the class for the
   base state). */
@keyframes ssv-page-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Gentle page fade-in — applied to the body's content children only, NOT the
   .header-container (topbar). The topbar must render instantly with no fade/
   animation, so it is explicitly excluded from the sweep. */
body.ssv-fade> :not(.header-container) {
  animation: ssv-page-in .5s var(--ease) both;
}

/* Topbar: no entrance animation ever — appears immediately. */
body.ssv-fade>.header-container,
.header-container {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {

  .page-header h1,
  .page-header::before,
  .page-header::after,
  .page-header__mesh,
  body.ssv-fade> :not(.header-container) {
    animation: none !important;
  }

  .page-header::after,
  .page-header__mesh {
    opacity: .8;
  }
}

/* ==================================================================
   SSV FORM COMPONENT (shared: Admissions, Staff Welfare "Join As")
   A themed, fully responsive form card. Two-column field grid that
   collapses to one column on small screens.
   ================================================================== */
.ssv-form-card {
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 820px;
  margin: 0 auto;
}

.ssv-form-card__head {
  margin-bottom: 1.3rem;
}

.ssv-form-card__head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 .35rem;
}

.ssv-form-card__head p {
  color: var(--n-500);
  margin: 0;
  font-size: .9rem;
}

.ssv-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem 1.1rem;
}

/* a field that should span the full width of the grid */
.ssv-field--full {
  grid-column: 1 / -1;
}

/* section sub-heading inside the form (e.g. Father's / Mother's details) */
.ssv-form__legend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--y-800);
  margin: .5rem 0 -.15rem;
}

.ssv-form__legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ssv-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.ssv-field>label {
  font-size: .78rem;
  font-weight: 650;
  color: var(--n-700);
  letter-spacing: .005em;
}

.ssv-field .req {
  color: #d92d20;
  margin-left: .15rem;
}

.ssv-input,
.ssv-select,
.ssv-textarea {
  width: 100%;
  font-family: inherit;
  font-size: .88rem;
  color: var(--n-900);
  background: var(--n-050);
  border: 1px solid var(--n-200);
  border-radius: 10px;
  padding: .55rem .75rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.ssv-textarea {
  min-height: 74px;
  resize: vertical;
  line-height: 1.5;
}

.ssv-input::placeholder,
.ssv-textarea::placeholder {
  color: var(--n-400);
}

.ssv-input:focus,
.ssv-select:focus,
.ssv-textarea:focus {
  outline: none;
  border-color: var(--y-500);
  background: var(--n-000);
  box-shadow: 0 0 0 4px var(--y-a14);
}

/* custom select caret */
.ssv-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787871' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.3rem;
  cursor: pointer;
}

/* radio group */
.ssv-radios {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ssv-radio {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  font-size: .86rem;
  color: var(--n-700);
}

.ssv-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--y-600);
  flex-shrink: 0;
  cursor: pointer;
}

.ssv-form__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}

.ssv-form__note {
  font-size: .76rem;
  color: var(--n-400);
}

/* success message shown after submit */
.ssv-form__success {
  grid-column: 1 / -1;
  display: none;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: rgba(18, 160, 90, .1);
  border: 1px solid rgba(18, 160, 90, .3);
  color: #0f7a45;
  font-weight: 600;
  font-size: .88rem;
}

.ssv-form__success.show {
  display: flex;
}

.ssv-form__success .ic-ok {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #12a05a;
  color: #fff;
}

@media (max-width: 640px) {
  .ssv-form {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   SSV MANAGEMENT (About Us — leadership cards)
   ================================================================== */
/* Base card shell (shared by featured + grid cards) */
.mgmt-card {
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.mgmt-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: var(--y-a45);
}

/* ---- Round profile photo ---- */
.mgmt-avatar {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--n-100);
  border: 3px solid var(--n-000);
  box-shadow: 0 0 0 2px var(--y-a45), var(--sh-1);
  line-height: 0;
}

.mgmt-avatar img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.mgmt-card:hover .mgmt-avatar img {
  transform: scale(1.06);
}

.mgmt-avatar--lg {
  width: 140px;
  height: 140px;
}

/* ---- Role badge (gold pill) ---- */
.mgmt-card__role {
  display: inline-block;
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-950);
  background: var(--y-a14);
  color: var(--y-800);
  padding: .28rem .7rem;
  border-radius: var(--pill);
}

/* ---- FEATURED (founder) — full width, round photo centred on top ---- */
.mgmt-card--featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 1.5rem;
  background:
    radial-gradient(60% 120% at 50% 0%, var(--y-a08), transparent 60%),
    var(--n-000);
}

.mgmt-card--featured .mgmt-card__body {
  align-items: center;
  max-width: 640px;
}

.mgmt-card--featured .mgmt-card__role {
  align-self: center;
}

.mgmt-card--featured .mgmt-card__name {
  font-size: 1.4rem;
}

.mgmt-card--featured .mgmt-card__quote {
  font-size: 1.02rem;
}

/* ---- GRID of smaller cards — 2 per row, photo left + text right ---- */
.mgmt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.mgmt-grid .mgmt-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 1.6rem;
}

/* ---- shared body / text ---- */
.mgmt-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}

.mgmt-card__name {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--n-900);
  margin: 0;
  line-height: 1.25;
}

.mgmt-card__quote {
  position: relative;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--n-600);
  font-style: italic;
}

.mgmt-card__qmark {
  color: var(--y-500);
  font-size: 1rem;
  margin-right: .35rem;
  vertical-align: -.05em;
}

.mgmt-card__quals {
  font-size: .74rem;
  color: var(--n-400);
  line-height: 1.5;
  letter-spacing: .01em;
  padding-top: .35rem;
  border-top: 1px solid var(--line);
  margin-top: .25rem;
}

/* ---- responsive ---- */
@media (max-width: 700px) {
  .mgmt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {

  /* stack the small cards' photo above the text on very narrow screens */
  .mgmt-grid .mgmt-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mgmt-grid .mgmt-card__body {
    align-items: center;
  }

  .mgmt-grid .mgmt-card__role {
    align-self: center;
  }
}

/* ==================================================================
   EVENTS PAGE — premium Upcoming (sticky date-rail + scroll-sync
   content) & Completed (grid). Tabs switch between the two views.
   ================================================================== */

/* ---- Tabs ---- */
.ev-tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .35rem;
  border-radius: var(--pill);
  background: var(--n-100);
  border: 1px solid var(--line);
  margin: 0 auto 2.5rem;
}

.ev-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--n-600);
  background: transparent;
  padding: .7rem 1.5rem;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.ev-tab .ic {
  font-size: 1rem;
}

.ev-tab:hover {
  color: var(--n-900);
}

.ev-tab.active {
  color: var(--n-950);
  background: var(--n-000);
  box-shadow: var(--sh-1);
}

.ev-tab__count {
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: var(--pill);
  background: var(--y-a14);
  color: var(--y-800);
}

/* ---- Panels ---- */
.ev-panel {
  display: none;
}

.ev-panel.active {
  display: block;
  animation: ev-fade .5s var(--ease) both;
}

@keyframes ev-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Upcoming: SCROLLSPY list ----
   All events are shown, stacked down the right column. The compact date
   list on the left is sticky; as each event scrolls into view its date
   highlights (active = big, others small). Clicking a date scrolls to it. */
.ev-track {
  position: relative;
}

.ev-stage {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 1rem;
}

/* ---- left: STICKY compact date indicator (scrollspy) ----
   Sticks in place while the events scroll on the right. The date whose
   event is in view is enlarged (active = big); the rest stay small. */
.ev-dates {
  position: sticky;
  top: calc(var(--topbar-h) + var(--flash-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding-left: .9rem;
}

/* faint vertical track line */
.ev-dates::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.ev-dot {
  position: relative;
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border-radius: 10px;
  background: transparent;
  color: var(--n-500);
  /* inactive = SMALL */
  transform: scale(.9);
  transform-origin: left center;
  opacity: .6;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

/* marker dot on the track line */
.ev-dot::before {
  content: "";
  position: absolute;
  left: -.9rem;
  top: 50%;
  margin-top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--n-300);
  box-shadow: 0 0 0 3px var(--ivory);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}

.ev-dot:hover {
  opacity: .85;
}

.ev-dot__chip {
  flex-shrink: 0;
  min-width: 34px;
  text-align: left;
  line-height: 1;
}

.ev-dot__day {
  font-size: .95rem;
  font-weight: 800;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.ev-dot__mon {
  font-size: .82rem;
  font-weight: 600;
  color: inherit;
  margin-left: 2px;
}

.ev-dot__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ev-dot__title {
  font-size: .84rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.ev-dot__yr {
  display: none;
}

/* ACTIVE date — BIG + full colour + lit marker */
.ev-dot.active {
  transform: scale(1.14);
  opacity: 1;
  color: var(--n-900);
}

.ev-dot.active::before {
  background: var(--y-500);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--ivory), 0 0 10px var(--y-a45);
}

.ev-dot.active .ev-dot__day {
  color: var(--y-700);
}

.ev-dot.active .ev-dot__title {
  font-weight: 750;
}

/* ---- right: ALL events stacked; scroll through them ---- */
.ev-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3.5vh, 2rem);
}

/* SPLIT card: IMAGE on the LEFT (clean, full — nothing overlaid), TEXT on
   the RIGHT. No transitions — appears instantly, simple. */
.ev-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(300px, 42vh, 400px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--n-000);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  scroll-margin-top: calc(var(--topbar-h) + var(--flash-h) + 1.5rem);
}

/* active card gets a subtle emphasis (no motion, just elevation) */
.ev-slide.active {
  box-shadow: var(--sh-3);
  border-color: var(--y-a45);
}

/* LEFT: full image, nothing on it */
.ev-slide__media {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.ev-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT: text content, vertically centred */
.ev-slide__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ev-slide__tag {
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y-800);
  background: var(--y-a14);
  padding: .28rem .7rem;
  border-radius: var(--pill);
}

.ev-slide__title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 820;
  letter-spacing: -.03em;
  margin: .1rem 0 .3rem;
  color: var(--n-900);
  line-height: 1.1;
}

.ev-slide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin: .1rem 0 .5rem;
  font-size: .85rem;
  color: var(--n-500);
  font-weight: 600;
}

.ev-slide__meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ev-slide__meta .ic {
  color: var(--y-600);
}

.ev-slide__desc {
  color: var(--n-600);
  margin: 0;
  line-height: 1.7;
}

/* ---- Completed: toolbar + year dropdown ---- */
.ev-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.ev-toolbar__title {
  font-size: 1rem;
  font-weight: 650;
  color: var(--n-500);
  margin: 0;
}

.ev-year {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: var(--n-900);
  background: var(--n-000);
  border: 1px solid var(--n-200);
  border-radius: var(--pill);
  padding: .6rem 2.4rem .6rem 1.1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b78700' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.ev-year:focus {
  outline: none;
  border-color: var(--y-500);
  box-shadow: 0 0 0 4px var(--y-a14);
}

/* ===== Custom themed dropdown (replaces the native <select> option list,
   whose highlight colour is OS-controlled and can't be themed). The real
   <select> is kept but visually hidden; a button + list mirror it. ===== */
.ssv-dd {
  position: relative;
  display: inline-block;
}

/* hide the native control once JS has enhanced it (keeps it in the DOM
   for the filter JS + accessibility fallback if JS never runs). */
.ssv-dd.is-enhanced .ssv-dd__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  pointer-events: none;
}

/* the visible trigger button — matches the old .ev-year pill exactly */
.ssv-dd__btn {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: var(--n-900);
  background: var(--n-000);
  border: 1px solid var(--n-200);
  border-radius: var(--pill);
  padding: .6rem 2.4rem .6rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.ssv-dd__btn:focus-visible {
  outline: none;
  border-color: var(--y-500);
  box-shadow: 0 0 0 4px var(--y-a14);
}

/* gold caret, rotates when open */
.ssv-dd__caret {
  position: absolute;
  right: 1rem;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--y-600);
  transition: transform .25s var(--ease);
}

.ssv-dd.is-open .ssv-dd__caret {
  transform: rotate(180deg);
}

.ssv-dd.is-open .ssv-dd__btn {
  border-color: var(--y-500);
  box-shadow: 0 0 0 4px var(--y-a14);
}

/* the themed option list */
.ssv-dd__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--n-000);
  border: 1px solid var(--n-200);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(13, 13, 12, .35);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.ssv-dd.is-open .ssv-dd__list {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.ssv-dd__opt {
  font-size: .9rem;
  font-weight: 600;
  color: var(--n-800);
  padding: .55rem .9rem;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background .18s var(--ease), color .18s var(--ease);
}

/* gold hover/keyboard highlight — the theme colour, not the OS blue */
.ssv-dd__opt:hover,
.ssv-dd__opt.is-active {
  background: var(--y-a14);
  color: var(--n-900);
}

/* selected item — gold text + a check */
.ssv-dd__opt[aria-selected="true"] {
  color: var(--y-600);
  font-weight: 700;
}

.ssv-dd__opt[aria-selected="true"]::after {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b78700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ssv-dd__opt:not([aria-selected="true"])::after {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---- Completed events grid ---- */
.ev-completed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ev-done {
  position: relative;
  background: var(--n-000);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.ev-done:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: var(--y-a45);
}

.ev-done__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  line-height: 0;
}

.ev-done__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.ev-done:hover .ev-done__media img {
  transform: scale(1.05);
}

.ev-done__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  padding: clamp(1.2rem, 3vw, 1.6rem);
}

.ev-done__tag {
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y-800);
  background: var(--y-a14);
  padding: .28rem .7rem;
  border-radius: var(--pill);
}

.ev-done__title {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 820;
  letter-spacing: -.03em;
  margin: .1rem 0 .2rem;
  color: var(--n-900);
  line-height: 1.2;
}

.ev-done__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 0 0 .3rem;
  font-size: .8rem;
  color: var(--n-500);
  font-weight: 600;
}

.ev-done__meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ev-done__meta .ic {
  color: var(--y-600);
}

.ev-done__desc {
  color: var(--n-600);
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
}

/* ---- Empty state (when a year has no events) ---- */
.ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  color: var(--n-400);
}

.ev-empty[hidden] {
  display: none;
}

.ev-empty .ic {
  font-size: 2.2rem;
  color: var(--y-500);
  opacity: .8;
}

.ev-empty p {
  margin: 0;
  font-size: 1rem;
  font-weight: 550;
}

/* ---- Responsive ---- */
/* Tablet/phone: stack to one column — dates as a horizontal chip strip on
   top, the click-driven image panel below. Still no scroll to change; tap
   a date to swap the content. */
@media (max-width: 860px) {
  .ev-stage {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* dates: a horizontal chip strip pinned under the header (scrollspy still
     highlights the in-view event); no track line, uniform size */
  .ev-dates {
    position: sticky;
    top: calc(var(--topbar-h) + var(--flash-h));
    z-index: 5;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: .5rem;
    padding: .5rem 0;
    background: var(--ivory);
    scrollbar-width: none;
  }

  .ev-dates::before {
    display: none;
  }

  .ev-dates::-webkit-scrollbar {
    display: none;
  }

  .ev-dot {
    flex-shrink: 0;
    gap: .5rem;
    transform: none;
    opacity: .7;
    border: 1px solid var(--line);
    background: var(--n-000);
  }

  .ev-dot::before {
    display: none;
  }

  .ev-dot.active {
    transform: none;
    opacity: 1;
    border-color: var(--y-500);
  }

  .ev-dot__label {
    display: none;
  }

  /* slides flow naturally (no fixed stack height) */
  .ev-stack {
    gap: 1.25rem;
  }

  /* split card stacks: image on top, text below */
  .ev-slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ev-slide__media {
    aspect-ratio: 16 / 9;
  }

  .ev-completed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ev-slide__title {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
  }
}

@media (max-width: 560px) {
  .ev-completed-grid {
    grid-template-columns: 1fr;
  }
}

/* Back-to-top button — sits at the far bottom-right, to the RIGHT of the
   Admission pill so the two form a single horizontal line. Slightly smaller
   than the pill's height so it reads as the secondary control. */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1100;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--grad-gold-deep);
  color: var(--n-950);
  box-shadow: var(--glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(24px);
  pointer-events: none;
  transition: all .5s var(--ease);
}

/* ===== Floating Admission button (bottom-right) =====
   Simple, fully STATIC gold pill — no transition, no hover/active effect,
   no magnetic movement, no entrance animation. Matches the plain style of
   the back-to-top button and sits on the same line, to its left. */
.fab-admissions {
  position: fixed;
  right: 74px;
  /* leaves room for the 42px to-top + gap */
  bottom: 22px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border-radius: var(--pill);
  background: var(--grad-gold-deep);
  color: var(--n-950);
  font-weight: 750;
  font-size: .88rem;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: var(--glow);
}

.fab-admissions .ic,
.fab-admissions [data-ic] {
  font-size: 1rem;
}

.fab-admissions__label {
  white-space: nowrap;
}

/* On small phones, shrink the pill to an icon-only circle so the two
   controls still fit on one line without crowding the screen. */
@media (max-width: 560px) {
  .to-top {
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
  }

  .fab-admissions {
    right: 62px;
    bottom: 14px;
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  .fab-admissions__label {
    display: none;
  }
}

.to-top.show {
  opacity: 1 !important;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-lg);
}

/* ==================================================================
   15. REDUCED MOTION
   ================================================================== */
@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-anim],
  [data-stagger]>*,
  .split-text .word>span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ==================================================================
   16. RESPONSIVE
   ================================================================== */
@media (max-width:1024px) {
  .content-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .content-row.reverse .content-text {
    order: 1;
  }

  .content-row.reverse .content-img {
    order: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width:768px) {
  :root {
    --topbar-h: 56px;
    --flash-h: 38px;
  }

  .section {
    padding: 3rem 0;
  }

  .section-alt {
    margin: 0 .6rem;
    border-radius: var(--r-lg);
  }

  .page-header {
    padding: 2.75rem 0 2.25rem;
  }

  .page-header::after {
    display: none;
  }

  .footer {
    padding: 3rem 0 1.4rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Slightly tighter page gutters on tablets/phones. */
  .container,
  .container-wide {
    padding: 0 1.15rem;
  }
}

@media (max-width:480px) {
  .flashnews-label {
    font-size: .52rem;
    padding: .28rem .6rem;
  }

  /* Buttons: allow wrapping and comfortable tap targets. */
  .btn {
    padding: .85rem 1.4rem;
    font-size: .88rem;
  }

  .quicklinks {
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
  }

  .content-img::before,
  .content-img::after {
    display: none;
  }
}

/* Small phones */
@media (max-width:400px) {

  .container,
  .container-wide {
    padding: 0 1rem;
  }

  .logo img {
    height: 28px;
  }

  .logo {
    padding: 5px 9px;
  }

  .quicklinks {
    grid-template-columns: 1fr;
  }

  .footer-section p {
    font-size: .85rem;
  }

  .social-links a {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }
}

/* Guard rail for the narrowest supported width (~300–340px). */
@media (max-width:340px) {
  body {
    font-size: 15px;
  }

  .container,
  .container-wide {
    padding: 0 .8rem;
  }

  .btn {
    padding: .8rem 1.1rem;
    font-size: .85rem;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .flashnews-label {
    font-size: .48rem;
  }

  /* Long words / URLs (e.g. the footer email + website) must wrap, not
     overflow, on very narrow screens. */
  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .footer-section p a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}



.flashnews-label {
  font-size: .48rem;
}

/* Long words / URLs (e.g. the footer email + website) must wrap, not
     overflow, on very narrow screens. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.footer-section p a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 18. Dynamic Achievements Carousel ---- */
.ach-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--n-100);
}

.ach-carousel__track-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.ach-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.ach-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ach-carousel__slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

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

.ach-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(13, 13, 12, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ach-carousel__btn:hover {
  background: rgba(13, 13, 12, 0.85);
  transform: translateY(-50%) scale(1.05);
}

.ach-carousel__btn--prev {
  left: 14px;
}

.ach-carousel__btn--next {
  right: 14px;
}

.ach-carousel__btn svg {
  width: 14px;
  height: 14px;
}

.ach-carousel__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
  background: rgba(13, 13, 12, 0.3);
  padding: 6px 12px;
  border-radius: var(--pill);
  backdrop-filter: blur(4px);
}

.ach-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.ach-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.ach-carousel__dot.active {
  background: var(--y-400);
  transform: scale(1.25);
}