/* ==========================================================================
   00. INDUSTRY  (self-hosted)
   --------------------------------------------------------------------------
   NOTE: these are Fort Foundry "Industry Test" trial files. They carry only a
   66-glyph subset (A-Z a-z 0-9 , - . and space) and no apostrophes, ampersands,
   question marks, colons, parentheses or slashes. Industry is therefore used
   for DISPLAY TYPE ONLY (headings, nav, labels, buttons) where copy is set in
   caps; body text stays on Inter. Replace these with licensed web fonts before
   the site goes live publicly.
   ========================================================================== */
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Book.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Demi.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Black.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Industry';src:url('../assets/fonts/Industry-Ultra.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;}

/* --------------------------------------------------------------------------
   DISPLAY FILL — the punctuation Industry has no glyph for
   --------------------------------------------------------------------------
   Ampersands, question marks, apostrophes, dashes and middots fall outside
   Industry's 66-glyph subset, so without this they landed on whatever the
   system picked — a different face on every machine. This is Playfair Display
   700 (SIL Open Font License), subset to exactly those characters and scoped
   by unicode-range so it can never touch a letter or a digit. The serif is
   deliberate: it gives the headline ampersand some warmth against all that
   condensed sans. The range below is generated from the same glyph set as the
   file, so the two cannot drift apart.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Display Fill';
  src:url('../assets/fonts/DisplayFill-Serif.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
  size-adjust:96%;                   /* settles the serif against Industry's cap height */
  unicode-range:U+0021-002B, U+002F, U+003A-0040, U+005B-0060, U+007B-007E,
                U+00A0-00B4, U+00B6-00BF, U+2013-2014, U+2018-201A, U+201C-201E,
                U+2022, U+2026, U+2039-203A, U+2122;
}

/* ==========================================================================
   INTERNATIONAL INSTITUTION OF SOUND — Johnson C. Smith University Bands
   styles.css
   --------------------------------------------------------------------------
   Contents
     01. Tokens (colours, type, spacing)
     02. Reset & base
     03. Typography primitives
     04. Buttons
     05. Reveal / scroll animation primitives
     06. Chrome: loader, brand, sidebar nav, donate pill
     07. Hero
     08. Stats & marquee
     09. About & mission
     10. Legacy timeline
     11. Auditions
     12. Ways to belong
     13. Staff & leadership
     14. Media (video + gallery)
     15. Events
     16. Support
     17. Sponsor tiers
     18. Shop
     19. Contact
     20. Footer
     21. Lightbox
     22. Responsive
     23. Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* Core palette — deep blue, white, black, JCSU gold */
  /* Official JCSU brand palette — navy PMS 2767 C, gold PMS 116 C */
  --gold:        #FFC72C;   /* original JCSU gold */
  --gold-hi:     #FFE38A;
  --gold-deep:   #D99B00;
  --ink-blue:    #0A1A5C;
  --blue:        #0A1A5C;   /* deep blue, matches the logo shield */
  --blue-mid:    #17318F;
  --blue-bright: var(--gold);  /* the old light blue is not a brand colour */
  --ink:         #05070D;   /* near black */
  --ink-2:       #0B0E17;
  --ink-3:       #12172A;
  --white:       #FFFFFF;
  --paper:       #F4F5F8;   /* light section background */
  --paper-2:     #E7E9F0;

  --text-light:  rgba(255,255,255,.72);
  --text-dark:   #3A3F52;
  --hairline:    rgba(255,255,255,.14);
  --hairline-d:  rgba(27,42,143,.14);

  /* Signature gradients */
  --royal:       #17318F;
  --royal-lo:    #0A1A5C;

  --grad-gold:  linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  --grad-blue:  linear-gradient(135deg, #2A55D6 0%, #17318F 50%, #0A1A5C 100%);
  --grad-royal: linear-gradient(140deg, #16307F 0%, #0A1A5C 55%, #05070D 100%);
  --grad-rg:    linear-gradient(135deg, #2A55D6 0%, #17318F 45%, var(--gold-deep) 88%, var(--gold) 100%);
  --grad-scrim: linear-gradient(180deg, rgba(5,7,13,.30) 0%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.94) 100%);

  /* Type */
  /* 'Display Fill' sits second so Industry always wins on letters and digits,
     and only the punctuation it lacks reaches the serif. */
  --f-display: 'Industry', 'Display Fill', 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-cond:    'Industry', 'Display Fill', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-script:  'Playfair Display', Georgia, serif;

  /* Layout */
  --rail:  0px;    /* legacy token: nav is a horizontal header now */
  --hdr:   78px;   /* header height */
  --wrap:  1220px;
  --pad:   clamp(20px, 5vw, 64px);

  --ease:  cubic-bezier(.16,.84,.44,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the fixed brand mark */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

::selection { background: var(--gold); color: var(--ink); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Every top-level section clears the right-hand rail */
main > section {
  position: relative;
  padding-right: var(--rail);
  overflow: clip;
}

/* Light sections */
.section--light {
  background: var(--paper);
  color: var(--text-dark);
}
.section--light h2, .section--light h3, .section--light h4 { color: var(--blue); }


/* ==========================================================================
   03. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

/* Big condensed display heading, tight and loud */
.h-display {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  color: var(--white);
}
.h-display--xl { font-size: clamp(3rem, 8vw, 7rem); }

/* Elegant script accent — the "of the South" equivalent */
.script {
  font-family: var(--f-script);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.01em;
}
.script--gold { color: var(--gold); }
.script--blue { color: var(--blue-bright); }

/* Small uppercase label with a leading rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-cond);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 46px; height: 2px;
  background: var(--gold);
  flex: none;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--dark { color: var(--blue); }
.eyebrow--dark::before { background: var(--blue-bright); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--text-light);
  max-width: 62ch;
}
.section--light .lede { color: var(--text-dark); }
.lede--center { margin-inline: auto; text-align: center; }

.section--light p { color: var(--text-dark); }

/* Gold-filled gradient text */
.grad-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Decorative rotated text along a section edge */
.vtext {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--f-cond);
  font-size: clamp(1.4rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.06);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  white-space: nowrap;
}
.section--light .vtext { color: rgba(27,42,143,.06); }

/* Arrow text link */
.link-arrow {
  font-family: var(--f-cond);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-bright);
  white-space: nowrap;
  transition: gap .3s var(--ease);
}
.link-arrow:hover { color: var(--blue); }
.link-arrow--light { color: var(--gold); }
.link-arrow--light:hover { color: var(--gold-hi); }


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 2.1em;
  font-family: var(--f-cond);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* Sheen that sweeps across on hover */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
  z-index: -1;
}
.btn:hover::after { transform: translateX(120%); }

.btn--gold {
  background: var(--grad-gold);
  color: var(--ink);
  box-shadow: 0 8px 26px rgba(255,199,44,.28);
}
.btn--gold:hover { box-shadow: 0 14px 38px rgba(255,199,44,.42); }

.btn--blue {
  background: var(--grad-blue);
  color: var(--white);
  box-shadow: 0 8px 26px rgba(43,63,190,.36);
}
.btn--blue:hover { box-shadow: 0 14px 38px rgba(252,203,6,.5); }

.btn--ghost {
  background: rgba(255,255,255,.05);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--outline {
  border: 1.5px solid var(--blue);
  color: var(--blue);
}
.btn--outline:hover { background: var(--blue); color: var(--white); }

.btn--lg    { padding: 1.2em 2.5em; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }


/* ==========================================================================
   05. REVEAL / SCROLL ANIMATION PRIMITIVES
   ========================================================================== */
/* Hidden only when JS is present to reveal it again (the `js` class is set by
   an inline script in <head>). Without JS everything renders normally. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 3D tilt container — JS writes --rx / --ry / --mx / --my */
.tilt, [data-tilt] {
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform .1s linear; }

/* Glare that tracks the cursor across tilted cards */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.24), transparent 62%);
  z-index: 3;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }


/* ==========================================================================
   06. CHROME — loader, brand, sidebar, donate pill
   ========================================================================== */

/* --- Loader --- */
.loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center; place-content: center; gap: 30px;
  text-align: center;
  background: var(--ink);
  transition: opacity .7s var(--ease), visibility .7s;
  /* CSS clears the loader on its own, so a stalled script or throttled timer
     can never leave the page stuck behind a blank overlay. JS removes it
     sooner once the page has actually finished loading. */
  animation: loaderOut .6s var(--ease) 1.6s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; }
@keyframes loaderOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.loader__logo {
  width: clamp(84px, 15vw, 132px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.6));
  animation: loaderPulse 1.8s var(--ease) infinite;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1);    opacity: 1; }
  50%     { transform: scale(1.04); opacity: .88; }
}
.loader__bar {
  width: min(240px, 60vw); height: 2px;
  margin-inline: auto;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.loader__bar span {
  display: block; height: 100%; width: 40%;
  background: var(--gold);
  animation: loadSlide 1.1s var(--ease) infinite;
}
@keyframes loadSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* --- Scroll progress --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  height: 3px; width: 0%;
  background: var(--grad-gold);
  transition: width .1s linear;
}

/* --- Brand / logo --- */
.brand {
  position: fixed;
  top: 22px; left: var(--pad);
  z-index: 70;
  display: flex; align-items: center; gap: 14px;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.brand:hover { transform: scale(1.04); }
.brand__logo {
  width: 68px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6));
}
.brand__text {
  display: flex; flex-direction: column; line-height: 1.15;
}
.brand__text strong {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: .16em;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.brand__text em {
  font-family: var(--f-cond);
  font-style: normal;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
/* On light sections the brand text flips to dark for contrast */
.brand.on-light .brand__text strong { color: var(--blue); text-shadow: none; }
.brand.on-light .brand__text em     { color: var(--blue-bright); text-shadow: none; }

/* --- Sidebar navigation (right rail) --- */
.sidenav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 65;
  width: var(--rail);
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,13,.5);
  backdrop-filter: blur(14px);
  border-left: 1px solid var(--hairline);
}
.sidenav__list {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.4vh, 30px);
}
.sidenav__link {
  position: relative;
  writing-mode: vertical-rl;
  font-family: var(--f-cond);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  padding: 4px 0;
  transition: color .3s var(--ease);
}
.sidenav__link::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 2px; height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height .35s var(--ease);
}
.sidenav__link:hover { color: var(--white); }
.sidenav__link.is-active { color: var(--gold); }
.sidenav__link.is-active::after { height: 100%; }

/* --- Hamburger (mobile only) --- */
.nav-toggle {
  position: fixed;
  top: 26px; right: 20px;
  z-index: 90;
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(5,7,13,.72);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  padding: 13px 12px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Donate pill --- */
.donate-pill {
  position: fixed;
  right: calc(var(--rail) + 18px);
  bottom: 32px;
  z-index: 66;
  padding: .85em 1.5em;
  background: var(--grad-blue);
  color: var(--white);
  font-family: var(--f-cond);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(43,63,190,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.donate-pill:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 40px rgba(252,203,6,.6);
}


/* ==========================================================================
   07. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(120px, 14vh, 160px) clamp(96px, 12vh, 130px);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: -8% 0 -8% 0;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: center 38%;
  z-index: -2;
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    var(--grad-scrim),
    radial-gradient(120% 90% at 12% 40%, rgba(27,42,143,.62), transparent 60%);
}
.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.hero__title {
  margin: 0 0 1.2rem;
  display: flex; flex-direction: column;
  line-height: .9;
}
.hero__title .script {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--white);
  margin-bottom: -.05em;
  margin-left: .08em;
  opacity: .95;
}
.hero__title .script--gold {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  margin-top: .04em;
  margin-bottom: 0;
  opacity: 1;
  text-shadow: 0 6px 40px rgba(255,199,44,.35);
}
.hero__title .display {
  font-family: var(--f-display);
  /* Sized so the headline, tagline and both CTAs clear a 900px-tall viewport */
  font-size: clamp(2.7rem, 7.6vw, 6.4rem);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 10px 60px rgba(0,0,0,.55);
}
.hero__tag {
  font-family: var(--f-cond);
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  max-width: 46ch;              /* wide enough to keep the motto on one line */
  margin: 0 0 2rem;
}
.hero__tag strong { color: var(--gold); font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__vtext {
  left: auto; right: calc(var(--rail) + 26px);
  top: auto; bottom: 34px;
  transform: none;
  color: rgba(255,255,255,.3);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
}
/* Hide the decorative rail text when the viewport is too short for it */
@media (max-height: 700px) {
  .hero__vtext { display: none; }
}

.hero__scroll {
  position: absolute;
  left: var(--pad); bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-cond);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero__scroll-line {
  width: 58px; height: 1px;
  background: rgba(255,255,255,.35);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  60%,100% { transform: translateX(100%); }
}


/* ==========================================================================
   08. STATS & MARQUEE
   ========================================================================== */
.stats {
  background: var(--grad-royal);
  padding-block: clamp(70px, 9vw, 120px) 0;
  border-top: 1px solid var(--hairline);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-bottom: clamp(56px, 8vw, 92px);
}
.stat {
  background: rgba(5,7,13,.5);
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .4s var(--ease);
}
.stat:hover { background: rgba(252,203,6,.14); }
/* Icons are drawn, not glyphs — emoji rendered differently on every platform
   and ignored the gold. These inherit currentColor, so they stay on brand. */
.stat__icon { color: var(--gold); font-size: 1.15rem; line-height: 1; display: block; }
.stat__svg {
  width: clamp(22px, 2.2vw, 27px);
  height: auto;
  display: block;
  color: var(--gold);
  filter: drop-shadow(0 2px 8px rgba(255,199,44,.28));
}
.stat:hover .stat__svg { color: var(--gold-hi); }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: .01em;
}
.stat__num--sm { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--gold); }
.stat__label {
  font-family: var(--f-cond);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Infinite scrolling marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: rgba(5,7,13,.42);
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 30px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--f-cond);
  font-size: clamp(.92rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.marquee__track i { color: var(--gold); font-size: .55rem; font-style: normal; }
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}


/* ==========================================================================
   09. ABOUT & MISSION
   ========================================================================== */
.about { padding-block: clamp(80px, 11vw, 150px) 0; }
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.about__copy p { margin: 0 0 1.15rem; }

.values {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2rem 0 2.4rem;
}
.values li {
  font-family: var(--f-cond);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--hairline-d);
  border-radius: 999px;
  padding: .45em 1.05em;
  background: rgba(255,255,255,.6);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.values li:hover {
  background: var(--grad-blue);
  border-color: transparent;
  color: var(--white);
}

.about__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.about__media figure {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(27,42,143,.24);
}
.about__media figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(27,42,143,.42));
  pointer-events: none;
}
.about__media img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.about__media figure:hover img { transform: scale(1.06); }
.tilt--offset { margin-top: clamp(28px, 6vw, 64px); }

/* Mission strip */
.mission {
  margin-top: clamp(64px, 9vw, 110px);
  background: var(--grad-royal);
  padding-block: clamp(52px, 7vw, 88px);
}
.mission__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.mission__card {
  border-top: 2px solid var(--gold);
  padding-top: 22px;
}
.mission__card h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white) !important;
  margin: 0 0 .6rem;
}
.mission__card p { color: var(--text-light) !important; margin: 0; font-size: .96rem; }


/* ==========================================================================
   10. LEGACY TIMELINE
   ========================================================================== */
.legacy {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%);
  padding-block: clamp(80px, 11vw, 150px);
}

.timeline {
  margin-top: clamp(32px, 5vw, 56px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,.08);
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.timeline.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.timeline::-webkit-scrollbar { height: 4px; }
.timeline::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
.timeline::-webkit-scrollbar-thumb { background: var(--gold); }

.timeline__track {
  display: flex;
  gap: 24px;
  padding: 6px calc((100vw - min(100vw, var(--wrap)))/2 + var(--pad)) 30px;
  padding-right: calc(var(--pad) + var(--rail));
  width: max-content;
  /* Continuous gold line running behind the cards */
  background-image: linear-gradient(90deg, var(--gold), rgba(255,199,44,.08));
  background-size: 100% 2px;
  background-position: 0 168px;
  background-repeat: no-repeat;
}

.tl-card {
  flex: 0 0 clamp(258px, 27vw, 330px);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.tl-card:hover {
  border-color: rgba(255,199,44,.55);
  background: rgba(255,255,255,.06);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
}
.tl-card__img { position: relative; overflow: hidden; }
.tl-card__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,7,13,.75));
}
.tl-card__img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.tl-card:hover .tl-card__img img { transform: scale(1.07); }

.tl-card__body { padding: 22px 22px 26px; position: relative; }
/* Node dot on the timeline rule */
.tl-card__body::before {
  content: "";
  position: absolute; top: -6px; left: 22px;
  width: 11px; height: 11px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,199,44,.2);
}
.tl-card__year {
  display: block;
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
  margin: 10px 0 8px;
}
.tl-card__label {
  font-family: var(--f-cond);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .6rem;
}
.tl-card__text { font-size: .9rem; color: var(--text-light); margin: 0; }

.timeline__hint {
  margin-top: 18px;
  font-family: var(--f-cond);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}


/* ==========================================================================
   11. AUDITIONS
   ========================================================================== */
.auditions { padding-block: clamp(80px, 11vw, 150px); }
.auditions__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.deadline {
  display: inline-flex; align-items: baseline; gap: 12px;
  margin: 1.6rem 0 2rem;
  padding: .7em 1.3em;
  border-left: 3px solid var(--blue-bright);
  background: rgba(252,203,6,.07);
}
.deadline span {
  font-family: var(--f-cond);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-dark);
}
.deadline strong {
  font-family: var(--f-display);
  font-size: 1.35rem; font-weight: 400;
  letter-spacing: .03em;
  color: var(--blue);
}

.req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(38px, 5vw, 58px);
}
.req__col h4 {
  font-family: var(--f-cond);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue) !important;
  padding-bottom: .7rem;
  margin: 0 0 .9rem;
  border-bottom: 2px solid var(--gold);
}
.req__col li {
  position: relative;
  padding-left: 18px;
  font-size: .9rem;
  color: var(--text-dark);
  margin-bottom: .5rem;
}
.req__col li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--blue-bright);
  border-radius: 50%;
}

.auditions__media { display: grid; gap: 20px; }
.auditions__media figure {
  position: relative; border-radius: 4px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(27,42,143,.24);
}
.auditions__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.auditions__media figure:hover img { transform: scale(1.05); }


/* ==========================================================================
   12. WAYS TO BELONG
   ========================================================================== */
.belong {
  background: var(--grad-royal);
  padding-block: clamp(80px, 11vw, 150px);
}
.belong__vtext { right: calc(var(--rail) + 16px); left: auto; }

.belong__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(32px, 5vw, 52px);
}
.bcard {
  position: relative;
  min-height: 400px;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  display: flex; align-items: flex-end;
  border: 1px solid var(--hairline);
}
.bcard--wide { grid-column: span 2; }
.bcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.bcard::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,13,.05) 0%, rgba(5,7,13,.62) 52%, rgba(5,7,13,.95) 100%);
  transition: background .5s var(--ease);
}
.bcard:hover img { transform: scale(1.08); }
.bcard:hover::after {
  background: linear-gradient(180deg, rgba(27,42,143,.18) 0%, rgba(27,42,143,.66) 50%, rgba(5,7,13,.96) 100%);
}
.bcard__body { padding: clamp(22px, 2.6vw, 32px); width: 100%; }
.bcard__body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .5rem;
}
.bcard__body p {
  font-size: .9rem;
  color: var(--text-light);
  margin: 0 0 1.1rem;
  max-width: 44ch;
}
.bcard__link {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-cond);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: .6em 1.15em;
  border: 1px solid rgba(255,199,44,.42);
  border-radius: 2px;
  transition: background .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
}
.bcard:hover .bcard__link {
  background: var(--grad-gold);
  color: var(--ink);
  gap: 1em;
  border-color: transparent;
}


/* ==========================================================================
   13. STAFF & LEADERSHIP
   ========================================================================== */
.staff { padding-block: clamp(80px, 11vw, 150px); }

.staff__lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: clamp(28px, 4vw, 44px) 0 clamp(44px, 6vw, 68px);
}
.lead-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--grad-royal);
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(27,42,143,.26);
  border-top: 3px solid var(--gold);
}
.lead-card__role {
  font-family: var(--f-cond);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.lead-card__name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white) !important;
}
.lead-card__note {
  font-size: .84rem;
  color: var(--text-light);
  font-style: italic;
}

.staff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(26px, 4vw, 52px);
}
.staff__col h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--gold);
}
.rows div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: .62rem 0;
  border-bottom: 1px solid var(--hairline-d);
  transition: padding-left .3s var(--ease), border-color .3s var(--ease);
}
.rows div:hover { padding-left: 8px; border-color: var(--blue-bright); }
.rows dt {
  font-family: var(--f-cond);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: .78;
}
.rows dd {
  font-size: .88rem;
  font-weight: 500;
  color: var(--blue);
  text-align: right;
  white-space: nowrap;
}
.staff__img {
  margin-top: 26px;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(27,42,143,.22);
}
.staff__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }


/* ==========================================================================
   14. MEDIA
   ========================================================================== */
.media {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 50%, var(--ink) 100%);
  padding-block: clamp(80px, 11vw, 150px);
}
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: clamp(28px, 4vw, 48px);
}
.vcard {
  position: relative;
  display: block; width: 100%; padding: 0;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--hairline);
  text-align: left;
}
.vcard img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .5s var(--ease);
  filter: saturate(.86) brightness(.78);
}
.vcard:hover img { transform: scale(1.07); filter: saturate(1) brightness(.92); }
.vcard__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: grid; place-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-blue);
  color: var(--white);
  font-size: 1.05rem;
  padding-left: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.vcard:hover .vcard__play { transform: translate(-50%,-50%) scale(1.14); background: var(--grad-gold); color: var(--ink); }
.vcard__cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  font-family: var(--f-cond);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.gallery__eyebrow { margin-top: clamp(56px, 8vw, 90px); }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.gcard {
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--hairline);
}
.gcard img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .5s var(--ease);
  filter: grayscale(.28) brightness(.86);
}
.gcard:hover img { transform: scale(1.09); filter: grayscale(0) brightness(1); }
.gcard::after {
  content: "\002B";
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  display: grid; place-content: center;
  background: rgba(5,7,13,.65);
  color: var(--gold);
  border-radius: 50%;
  font-size: 1rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gcard:hover::after { opacity: 1; transform: scale(1); }


/* ==========================================================================
   15. EVENTS
   ========================================================================== */
.events { padding-block: clamp(80px, 11vw, 150px); }
.events__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.events__head .h-display { margin-bottom: 0; }

.events__list { display: grid; gap: 12px; }
.event {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  background: var(--white);
  border: 1px solid var(--hairline-d);
  border-radius: 4px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.event:hover {
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(27,42,143,.18);
}
.event__date {
  flex: none;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--grad-blue);
  color: var(--white);
  border-radius: 4px;
  line-height: 1;
}
.event__date b {
  font-family: var(--f-cond);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .85;
}
.event__date i {
  font-family: var(--f-display);
  font-style: normal;
  font-size: 1.6rem;
  margin-top: 2px;
}
.event__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.event__title {
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.event__meta { font-size: .84rem; color: var(--text-dark); opacity: .75; }
.event__go {
  flex: none;
  color: var(--blue-bright);
  font-size: 1.2rem;
  transition: transform .4s var(--ease);
}
.event:hover .event__go { transform: translateX(6px); }


/* ==========================================================================
   16. SUPPORT
   ========================================================================== */
.support {
  position: relative;
  padding-block: clamp(90px, 13vw, 170px);
  isolation: isolate;
  text-align: center;
}
.support__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}
.support__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,7,13,.86), rgba(27,42,143,.9)),
    radial-gradient(80% 60% at 50% 50%, rgba(252,203,6,.35), transparent 70%);
}
.support__inner { max-width: 900px; margin-inline: auto; }
.support .lede { margin-inline: auto; margin-bottom: 2.4rem; }
.support__cta {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}


/* ==========================================================================
   17. SPONSOR TIERS
   ========================================================================== */
.sponsor { padding-block: clamp(80px, 11vw, 150px); text-align: center; }
.sponsor .eyebrow { justify-content: center; }
.sponsor .h-display { text-align: center; }

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 20px;
  margin-top: clamp(38px, 5vw, 62px);
  text-align: left;
}
.tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--hairline-d);
  border-radius: 4px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tier:hover { box-shadow: 0 24px 56px rgba(27,42,143,.18); }
.tier--feature {
  background: var(--grad-royal);
  border-color: transparent;
  box-shadow: 0 26px 64px rgba(27,42,143,.34);
}
.tier--feature .tier__name  { color: var(--gold); }
.tier--feature .tier__price { color: var(--white); }
.tier--feature li           { color: var(--text-light); }
.tier--feature li::before   { background: var(--gold); }

.tier__flag {
  position: absolute; top: -11px; left: clamp(26px, 3vw, 36px);
  padding: .35em 1em;
  background: var(--grad-gold);
  color: var(--ink);
  font-family: var(--f-cond);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  border-radius: 999px;
}
.tier__name {
  font-family: var(--f-cond);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: .4rem;
}
.tier__price {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--blue);
  margin-bottom: 1.2rem;
}
.tier ul { flex: 1; margin-bottom: 1.6rem; }
.tier li {
  position: relative;
  padding-left: 20px;
  font-size: .88rem;
  color: var(--text-dark);
  margin-bottom: .55rem;
}
.tier li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px;
  background: var(--blue-bright);
  border-radius: 50%;
}
.tier .btn { justify-content: center; width: 100%; }


/* ==========================================================================
   18. SHOP
   ========================================================================== */
.shop {
  background: var(--grad-royal);
  padding-block: clamp(80px, 11vw, 150px);
}
.shop .h-display { color: var(--white); }
.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.scard {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.scard:hover { border-color: rgba(255,199,44,.5); background: rgba(255,255,255,.06); }
.scard__img { overflow: hidden; }
.scard__img img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.scard:hover .scard__img img { transform: scale(1.08); }
.scard__body {
  padding: 18px 20px 22px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.scard__body h3 {
  font-family: var(--f-cond);
  font-size: 1rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.scard__price {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--gold);
}


/* ==========================================================================
   19. CONTACT
   ========================================================================== */
.contact { padding-block: clamp(80px, 11vw, 150px); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.contact__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  margin: 2.2rem 0;
}
.contact__info dt {
  font-family: var(--f-cond);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: .4rem;
}
.contact__info dd { font-size: .93rem; color: var(--text-dark); line-height: 1.65; }
.contact__info a { border-bottom: 1px solid var(--hairline-d); transition: border-color .3s; }
.contact__info a:hover { border-color: var(--blue-bright); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  font-family: var(--f-cond);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--hairline-d);
  border-radius: 999px;
  padding: .55em 1.2em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.socials a:hover { background: var(--grad-blue); color: var(--white); border-color: transparent; }

/* Form */
.cform {
  background: var(--white);
  border: 1px solid var(--hairline-d);
  border-radius: 4px;
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 24px 60px rgba(27,42,143,.12);
}
.cform h3 {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.cform label {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--f-cond);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}
.cform input, .cform select, .cform textarea {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .95em 1.05em;
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  background: var(--paper);
  border: 1px solid var(--hairline-d);
  border-radius: 3px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(252,203,6,.14);
}
.cform textarea { resize: vertical; min-height: 120px; }
.cform input.is-error, .cform textarea.is-error { border-color: #C0392B; background: #FDF3F2; }
.cform__note {
  margin: 1rem 0 0;
  font-size: .86rem;
  min-height: 1.4em;
  color: var(--text-dark);
}
.cform__note.is-ok  { color: #1B7A3D; font-weight: 500; }
.cform__note.is-err { color: #C0392B; font-weight: 500; }


/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
  padding: clamp(56px, 8vw, 90px) 0 0;
  padding-right: var(--rail);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(44px, 6vw, 68px);
}
.footer__logo { width: 92px; margin-bottom: 18px; }
.footer__name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .8rem;
}
.footer__name .script { font-size: 1.35rem; text-transform: none; }
.footer__blurb {
  font-size: .88rem;
  color: var(--text-light);
  max-width: 34ch;
  margin: 0;
}
.footer__col h4 {
  font-family: var(--f-cond);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.footer__col a {
  display: block;
  font-size: .9rem;
  color: var(--text-light);
  padding: .32rem 0;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer__col a:hover { color: var(--gold); transform: translateX(4px); }

.footer__bar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid var(--hairline);
}
.footer__bar p {
  margin: 0;
  font-family: var(--f-cond);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}


/* ==========================================================================
   21. LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(5,7,13,.94);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  max-width: min(1100px, 100%);
  max-height: 86vh;
  transform: scale(.94);
  transition: transform .4s var(--ease-out);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage img {
  max-height: 86vh;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lightbox__stage iframe {
  width: min(1100px, 88vw);
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  border-radius: 4px;
}
.lightbox__msg {
  max-width: 420px;
  text-align: center;
  padding: 34px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
}
.lightbox__msg strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .7rem;
}
.lightbox__msg p { margin: 0; font-size: .9rem; color: var(--text-light); }
.lightbox__msg code {
  display: inline-block;
  margin-top: .8rem;
  padding: .35em .7em;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  font-size: .82rem;
  color: var(--gold-hi);
}
.lightbox__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.05);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover { background: var(--grad-gold); color: var(--ink); transform: rotate(90deg); }


/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

/* Wide-ish tablets / small laptops */
@media (max-width: 1080px) {
  .bcard--wide { grid-column: span 1; }
  .about__grid,
  .auditions__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Phones & small tablets — sidebar becomes an overlay menu */
@media (max-width: 860px) {
  :root { --rail: 0px; }

  main > section, .footer { padding-right: 0; }

  .nav-toggle { display: block; }

  .sidenav {
    width: 100%;
    background: rgba(5,7,13,.97);
    backdrop-filter: blur(20px);
    border-left: 0;
    transform: translateX(100%);
    transition: transform .5s var(--ease-out);
    padding: 90px var(--pad) 40px;
    align-items: center;
    overflow-y: auto;
  }
  .sidenav.is-open { transform: translateX(0); }

  .sidenav__list {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 420px;
  }
  .sidenav__list li { width: 100%; }
  .sidenav__link {
    writing-mode: horizontal-tb;
    display: block;
    width: 100%;
    font-size: 1.35rem;
    letter-spacing: .2em;
    padding: .62em 0;
    border-bottom: 1px solid var(--hairline);
    color: rgba(255,255,255,.78);
  }
  .sidenav__link::after {
    right: auto; left: 0; bottom: -1px; top: auto;
    width: 0; height: 2px;
    transform: none;
    transition: width .35s var(--ease);
  }
  .sidenav__link.is-active::after { height: 2px; width: 46px; }

  .donate-pill {
    right: auto; left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    padding: .8em 1.7em;
  }
  .donate-pill:hover { transform: translateX(-50%) translateY(-3px); }

  .brand__logo { width: 46px; }
  .brand__text strong { font-size: .86rem; }
  .brand__text em { font-size: .55rem; }

  .hero { min-height: 92svh; padding-block: 120px 96px; }
  .hero__vtext { display: none; }
  .vtext { font-size: 1.15rem; left: 8px; }

  .timeline__track {
    padding-left: var(--pad);
    padding-right: var(--pad);
    background-position: 0 148px;
  }
  .tl-card { flex-basis: min(74vw, 300px); }

  .events__head { align-items: flex-start; }
  .event { flex-wrap: wrap; }
  .event__date { width: 54px; height: 54px; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

/* Small phones */
@media (max-width: 520px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .videos  { grid-template-columns: 1fr 1fr; }
  .btn { padding: 1em 1.6em; font-size: .82rem; letter-spacing: .16em; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .contact__info { grid-template-columns: 1fr; }
  .rows div { flex-direction: column; gap: 2px; }
  .rows dd { text-align: left; white-space: normal; }
}

/* Fine-pointer only: tilt is a mouse affordance */
@media (hover: none) {
  .tilt-glare { display: none; }
}


/* ==========================================================================
   23. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .hero__media, .support__bg { transform: none !important; }
  /* Keep the loader's dismissal — it must still clear itself */
  .loader { animation: loaderOut .001ms linear .001ms forwards !important; }
}

@media print {
  .sidenav, .nav-toggle, .donate-pill, .loader,
  .scroll-progress, .lightbox, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  main > section { padding-right: 0; }
  .js .reveal, .js .reveal.is-in { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   24. MULTI-PAGE COMPONENTS
   --------------------------------------------------------------------------
   Added when the site moved from one long page to eight linked pages.
     24a. Compact page hero (every page except home)
     24b. Creed / motto blocks
     24c. Video facades + embeds
     24d. Director lineage table
     24e. Game-day performance schedule
     24f. Split feature rows
     24g. Explore cards (home)
     24h. Prev/next page footer nav
   ========================================================================== */

/* --- 24a. Page hero ---------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: clamp(340px, 52vh, 520px);
  display: flex; align-items: flex-end;
  padding: 150px 0 clamp(40px, 6vw, 68px);
  isolation: isolate;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,7,13,.62) 0%, rgba(5,7,13,.55) 40%, rgba(5,7,13,.95) 100%),
    radial-gradient(90% 80% at 15% 50%, rgba(27,42,143,.6), transparent 65%);
}
.page-hero .h-display { margin-bottom: .35em; }
.page-hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text-light);
  max-width: 60ch;
  margin: 0;
}

/* Breadcrumb */
.crumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-cond);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1.1rem;
}
.crumb a { color: var(--gold); }
.crumb a:hover { color: var(--gold-hi); }
.crumb span { opacity: .5; }

/* --- 24b. Creed / motto ------------------------------------------------ */
.creed {
  position: relative;
  padding-block: clamp(80px, 11vw, 140px);
  isolation: isolate;
  text-align: center;
  overflow: hidden;
}
.creed__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
  filter: grayscale(.5);
}
.creed::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,13,.93), rgba(27,42,143,.93));
}
.creed__quote {
  max-width: 62ch;
  margin: 0 auto 2rem;
  font-family: var(--f-script);
  font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  line-height: 1.55;
  color: var(--white);
}
.creed__quote::before,
.creed__quote::after { content: '\201C'; color: var(--gold); }
.creed__quote::after { content: '\201D'; }

/* The motto — set as three hard-hitting words */
.motto {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vw, 40px);
  margin: 0;
}
.motto li {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative;
}
.motto li + li::before {
  content: "";
  position: absolute;
  left: clamp(-22px, -1.5vw, -8px); top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: .55;
}
.creed__attrib {
  margin-top: 2rem;
  font-family: var(--f-cond);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* Chant / song blocks */
.chant {
  border-left: 3px solid var(--gold);
  padding: 1rem 0 1rem 1.6rem;
  margin: 0 0 1.8rem;
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.75;
  color: var(--white);
}
.section--light .chant { color: var(--blue); border-left-color: var(--blue-bright); }
.chant strong { color: var(--gold); font-weight: 700; text-transform: uppercase; }
.section--light .chant strong { color: var(--blue-bright); }

/* --- 24c. Video facades ------------------------------------------------ */
.videos--page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
}
.videos--page .vcard { border-radius: 4px; }
.videos--page .vcard img { aspect-ratio: 16/9; }
.videos--page .vcard__cap {
  position: static;
  display: block;
  padding: 14px 16px 6px;
  text-shadow: none;
  color: var(--white);
  font-size: .84rem;
  line-height: 1.4;
  letter-spacing: .12em;
}
.vcard__meta {
  display: block;
  padding: 0 16px 16px;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-light);
}
.videos--page .vcard__play { top: 28%; }

/* Featured player on the home page */
.feature-video {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 16/9;
  background: #000;
}
.feature-video iframe,
.feature-video img { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.feature-video .vcard__play {
  width: 76px; height: 76px;
  font-size: 1.4rem;
}

/* --- 24d. Director lineage --------------------------------------------- */
.lineage {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 2px solid var(--gold);
}
.lineage__row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: .78rem 0;
  border-bottom: 1px solid var(--hairline-d);
  transition: padding-left .3s var(--ease), background .3s var(--ease);
}
.lineage__row:hover { padding-left: 10px; background: rgba(252,203,6,.05); }
.lineage__row--now {
  background: rgba(255,199,44,.13);
  padding-left: 10px;
  border-bottom-color: var(--gold);
}
.lineage__years {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--blue-bright);
  letter-spacing: .03em;
}
.lineage__row--now .lineage__years { color: var(--gold-deep); }
.lineage__name {
  font-family: var(--f-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.lineage__note {
  font-size: .82rem;
  font-style: italic;
  color: var(--text-dark);
  opacity: .8;
  text-align: right;
}

/* --- 24e. Game-day schedule -------------------------------------------- */
.gameday { display: grid; gap: 12px; margin-top: clamp(26px, 4vw, 44px); }
.gd {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: clamp(14px, 2.2vw, 26px);
  align-items: center;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: 4px;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.gd:hover { background: rgba(255,255,255,.06); border-color: rgba(255,199,44,.4); border-left-color: var(--gold); }
.gd--home { border-left-color: var(--gold); }
.gd--marquee { background: rgba(252,203,6,.12); border-left-color: var(--blue-bright); }
.gd__date {
  display: grid; place-items: center;
  padding: 10px 0;
  background: var(--grad-blue);
  border-radius: 4px;
  line-height: 1;
}
.gd--home .gd__date { background: var(--grad-gold); color: var(--ink); }
.gd__date b {
  font-family: var(--f-cond);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .9;
}
.gd__date i { font-family: var(--f-display); font-style: normal; font-size: 1.5rem; margin-top: 3px; }
.gd__body { min-width: 0; }
.gd__title {
  display: block;
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
}
.gd__meta { display: block; font-size: .84rem; color: var(--text-light); margin-top: 3px; }
.gd__tag {
  flex: none;
  font-family: var(--f-cond);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .42em 1em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--hairline);
  color: var(--text-light);
}
.gd__tag--home { background: var(--grad-gold); color: var(--ink); border-color: transparent; }
.gd__tag--away { color: var(--text-light); }
.gd__tag--special { background: var(--grad-blue); color: var(--white); border-color: transparent; }

/* --- 24f. Split feature row -------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5.5vw, 76px);
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.split__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.split__media:hover img { transform: scale(1.05); }
.split__media--wide img { aspect-ratio: 3/2; }

/* --- 24g. Explore cards (home) ----------------------------------------- */
.explore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(30px, 4vw, 50px);
}
.xcard {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 360px;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hairline);
}
.xcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.xcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,13,.1), rgba(5,7,13,.6) 55%, rgba(5,7,13,.95));
  transition: background .5s var(--ease);
}
.xcard:hover img { transform: scale(1.07); }
.xcard:hover::after { background: linear-gradient(180deg, rgba(27,42,143,.25), rgba(27,42,143,.68) 50%, rgba(5,7,13,.96)); }
.xcard__body { padding: clamp(22px, 2.6vw, 30px); width: 100%; }
.xcard__num {
  display: block;
  font-family: var(--f-cond);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: .6rem;
}
.xcard__body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .5rem;
}
.xcard__body p { font-size: .9rem; color: var(--text-light); margin: 0 0 1rem; max-width: 40ch; }
.xcard__go {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-cond);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  transition: gap .35s var(--ease);
}
.xcard:hover .xcard__go { gap: 1.1em; }

/* --- 24h. Prev/next page nav ------------------------------------------- */
.pagenav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
.pagenav a {
  background: var(--ink);
  padding: clamp(26px, 3.4vw, 42px) clamp(20px, 3vw, 40px);
  transition: background .4s var(--ease);
}
.pagenav a:hover { background: var(--ink-3); }
.pagenav a:last-child { text-align: right; }
.pagenav span {
  display: block;
  font-family: var(--f-cond);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.pagenav strong {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
}

/* --- Responsive for the above ------------------------------------------ */
@media (max-width: 1080px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}
@media (max-width: 860px) {
  .page-hero { padding-top: 120px; min-height: 300px; }
  .lineage__row { grid-template-columns: 110px 1fr; }
  .lineage__note { grid-column: 1 / -1; text-align: left; }
  .gd { grid-template-columns: 62px 1fr; }
  .gd__tag { grid-column: 2; justify-self: start; margin-top: 6px; }
  .pagenav { grid-template-columns: 1fr; }
  .pagenav a:last-child { text-align: left; }
}


/* ==========================================================================
   25. TALL VERTICAL BANNERS
   --------------------------------------------------------------------------
   A row of full-height portrait panels, each carrying one word from the Band
   Creed. Vertical type sits in the closed state; hovering (or focusing) a
   panel expands it and brings the copy forward. On touch/narrow screens the
   row becomes a horizontal swipe of fixed-width banners.
   ========================================================================== */
.banners {
  display: flex;
  gap: 10px;
  height: clamp(440px, 70vh, 620px);
  margin-top: clamp(30px, 4vw, 52px);
}

.banner {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hairline);
  cursor: pointer;
  min-width: 74px;                 /* enough room for the vertical word */
  transition: flex-grow .7s var(--ease-out), border-color .5s var(--ease);
}
/* An open panel is at least this wide — keeps it a rectangle, not a sliver */
.banner:hover, .banner:focus-within { min-width: min(380px, 46vw); }
/* The focused panel takes roughly three shares of the row */
.banners:hover .banner { flex-grow: .82; }
.banner:hover,
.banner:focus-within { flex-grow: 3.2; border-color: rgba(255,199,44,.55); }

.banner img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
  filter: grayscale(.62) brightness(.62);
}
.banner:hover img,
.banner:focus-within img { filter: grayscale(0) brightness(.86); transform: scale(1.05); }

.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,13,.28) 0%, rgba(5,7,13,.5) 55%, rgba(27,42,143,.9) 100%);
  transition: background .6s var(--ease);
}
.banner:hover::after,
.banner:focus-within::after {
  background: linear-gradient(180deg, rgba(5,7,13,.15) 0%, rgba(27,42,143,.42) 50%, rgba(5,7,13,.94) 100%);
}

/* Closed state: the word runs up the panel */
.banner__word {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
  transition: opacity .35s var(--ease);
}
.banner:hover .banner__word,
.banner:focus-within .banner__word { opacity: 0; }

/* Open state: horizontal copy fades in */
.banner__open {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.4vw, 32px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease) .12s, transform .5s var(--ease-out) .12s;
}
.banner:hover .banner__open,
.banner:focus-within .banner__open { opacity: 1; transform: translateY(0); }

.banner__num {
  display: block;
  font-family: var(--f-cond);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: .6rem;
}
.banner__open h3 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 .55rem;
  white-space: normal;      /* wrap rather than clip */
  overflow-wrap: break-word;
}
.banner__open p {
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin: 0;
  max-width: 34ch;
}

/* Touch and narrow screens: swipeable row, everything already open */
@media (hover: none), (max-width: 860px) {
  .banners {
    height: clamp(380px, 62vh, 520px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .banners .banner,
  .banners:hover .banner {
    flex: 0 0 clamp(210px, 62vw, 280px);
    scroll-snap-align: start;
  }
  .banner img { filter: grayscale(0) brightness(.72); }
  .banner__word { display: none; }
  .banner__open { opacity: 1; transform: none; }
  .banner__open h3 { white-space: normal; }
}


/* ==========================================================================
   26. HORIZONTAL HEADER  (replaces the old right-hand rail)
   --------------------------------------------------------------------------
   Fixed bar across the top. It slides away when you scroll down, returns when
   you scroll up, and reappears whenever the cursor comes near the top edge.
   ========================================================================== */

/* Neutralise the old rail so nothing reserves space for it */
.sidenav, .donate-pill { display: none !important; }
main > section, .footer { padding-right: 0 !important; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  height: var(--hdr);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(5,7,13,.92), rgba(5,7,13,.62) 70%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: transform .45s var(--ease-out), background .4s var(--ease),
              border-color .4s var(--ease), height .35s var(--ease);
  will-change: transform;
}
/* Solid once you have scrolled past the hero */
.site-header.is-stuck {
  background: rgba(5,7,13,.96);
  border-bottom-color: var(--hairline);
  height: 66px;
}
/* Slid out of the way while scrolling down */
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}

/* Brand sits inside the bar now */
.site-header .brand {
  position: static;
  top: auto; left: auto;
  flex: none;
  gap: 11px;
}
.site-header .brand__logo { width: 46px; }
.site-header.is-stuck .brand__logo { width: 40px; }
.site-header .brand__text strong { font-size: .92rem; letter-spacing: .14em; }
.site-header .brand__text em { font-size: .56rem; }

/* Links */
.mainnav { margin-left: auto; }
.mainnav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.mainnav__link {
  position: relative;
  font-family: var(--f-cond);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
  padding: 6px 0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.mainnav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--grad-gold);
  transition: width .35s var(--ease);
}
.mainnav__link:hover { color: var(--white); }
.mainnav__link:hover::after { width: 100%; }
.mainnav__link.is-active { color: var(--gold); }
.mainnav__link.is-active::after { width: 100%; }

/* Header call-to-action */
.header-cta {
  flex: none;
  padding: .72em 1.35em;
  font-family: var(--f-cond);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--grad-gold);
  color: var(--ink);
  border-radius: 2px;
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,199,44,.4); }

/* Invisible strip that pulls the header back when the cursor nears the top */
.header-hotzone {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 14px;
  z-index: 79;
}

/* Pages start below the bar */
.page-hero { padding-top: calc(var(--hdr) + clamp(48px, 7vw, 92px)); }
html { scroll-padding-top: calc(var(--hdr) + 16px); }

/* ---- Mobile: hamburger + full-screen sheet ----
   The sheet is `position: fixed` and must resolve against the VIEWPORT, not the
   header. Any of transform / backdrop-filter / will-change on an ancestor makes
   that ancestor a containing block for fixed children — which would collapse the
   sheet to the height of the bar. So at these widths the header drops all three
   and hides itself with `top` instead of `transform`. */
@media (max-width: 940px) {
  .site-header {
    height: 64px;
    transform: none;
    will-change: auto;
    backdrop-filter: none;
    background: rgba(5,7,13,.94);
    top: 0;
    transition: top .45s var(--ease-out), height .35s var(--ease), background .4s var(--ease);
  }
  .site-header.is-stuck { height: 58px; }
  .site-header.is-hidden { transform: none; top: -72px; }

  .nav-toggle {
    display: block;
    position: static;
    margin-left: auto;
    width: 42px; height: 42px;
    padding: 12px 10px;
    background: transparent;
    border: 0;
    flex: none;
  }
  .header-cta { display: none; }

  .mainnav {
    position: fixed;
    inset: 0;
    margin-left: 0;
    background: rgba(5,7,13,.98);
    backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    transform: translateX(100%);
    transition: transform .45s var(--ease-out);
    z-index: 85;
  }
  .mainnav.is-open { transform: translateX(0); }
  .mainnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(420px, 82vw);
  }
  .mainnav__link {
    font-size: 1.32rem;
    letter-spacing: .2em;
    padding: .78em 0;
    border-bottom: 1px solid var(--hairline);
    color: rgba(255,255,255,.82);
  }
  .mainnav__link::after { bottom: -1px; }

  /* Keep the close button above the open sheet */
  .nav-toggle { z-index: 90; position: relative; }
  .site-header .brand__text { display: none; }
}

@media (max-width: 400px) {
  .site-header .brand__logo { width: 38px; }
}


/* ==========================================================================
   27. SOCIAL LINKS
   ========================================================================== */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row a {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .6em 1.15em;
  font-family: var(--f-cond);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-light);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.social-row a:hover {
  background: var(--grad-gold);
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-2px);
}
.section--light .social-row a { border-color: var(--hairline-d); color: var(--blue); }
.footer .social-row { margin-top: 1.2rem; }


/* ==========================================================================
   28. PHOTO CREDITS
   --------------------------------------------------------------------------
   Every photograph carries its attribution. The credit sits bottom-right of
   whatever box holds the image, stays legible over any picture, and never
   blocks a click. `.credit-host` marks the positioned container.
   ========================================================================== */
.credit-host { position: relative; }

.credit {
  position: absolute;
  right: 8px; bottom: 7px;
  z-index: 4;
  max-width: calc(100% - 16px);
  padding: .28em .6em;
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,.9);
  background: rgba(5,7,13,.55);
  backdrop-filter: blur(4px);
  border-radius: 2px;
  pointer-events: none;
  opacity: .8;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.credit-host:hover .credit { opacity: 1; background: rgba(5,7,13,.8); }
.credit::before { content: "\00A9\00A0"; opacity: .7; }

/* Full-bleed heroes: keep the chip on the right so it clears the scroll cue */
.credit--hero {
  right: var(--pad);
  left: auto;
  bottom: 16px;
  font-size: .66rem;
  background: rgba(5,7,13,.45);
}

/* On light sections the chip flips to dark-on-light */
.section--light .credit {
  color: rgba(27,42,143,.85);
  background: rgba(255,255,255,.78);
}
.section--light .credit-host:hover .credit { background: rgba(255,255,255,.95); }

/* Keep credits clear of the gallery's hover "+" badge */
.gcard .credit { right: 8px; bottom: 8px; }
.gcard:hover .credit { opacity: 1; }

@media (max-width: 520px) {
  .credit { font-size: .56rem; padding: .24em .5em; }
}

/* Containers that hold a credited photo must establish a positioning context.
   Most already do; these are the stragglers. */
.staff__img,
.scard__img,
.about__media figure,
.auditions__media figure,
.tl-card__img,
.split__media,
.feature-video { position: relative; }

/* Credit line under the enlarged photo in the lightbox */
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox__credit {
  font-family: var(--f-body);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}


/* ==========================================================================
   29. BRAND COLOUR CORRECTIONS
   --------------------------------------------------------------------------
   --blue-bright now resolves to official gold. Pure gold on a light panel is
   far too low-contrast for text, so anywhere that token was carrying small
   copy on --paper we swap to official navy. Decorative
   uses — rules, bullets, borders — keep the full-strength gold.
   ========================================================================== */
.section--light .link-arrow,
.section--light .contact__info dt,
.section--light .tier__name,
.section--light .req__col h4,
.section--light .lineage__years,
.section--light .event__title { color: var(--blue); }

.section--light .rows dd,
.section--light .contact__info dd,
.section--light .deadline strong { color: var(--blue); }
/* Nothing on the site uses the old muddy gold any more */

/* Decorative accents stay full gold */
.section--light .eyebrow--dark::before,
.section--light .req__col li::before,
.section--light .tier li::before,
.section--light .deadline { border-color: var(--gold); }
.section--light .req__col li::before,
.section--light .tier li::before { background: var(--gold); }

/* The script accent is full JCSU gold everywhere */
.script--blue { color: var(--gold); }
/* Display-size accent on a light panel: full JCSU gold, with a navy shadow so
   it still holds an edge against the pale background. */
.section--light .script--blue {
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(27,42,143,.35), 0 2px 14px rgba(27,42,143,.22);
}


/* ==========================================================================
   30. ROSTERS ON DARK SECTIONS
   The staff / student leadership / band council lists live on a navy panel,
   so their type has to invert. Without this the dt/dd inherit the light-panel
   colours and read navy-on-navy.
   ========================================================================== */
.belong .staff__col h3,
.legacy .staff__col h3   { color: var(--white); border-bottom-color: var(--gold); }

.belong .rows div,
.legacy .rows div        { border-bottom-color: var(--hairline); }
.belong .rows div:hover,
.legacy .rows div:hover  { border-color: var(--gold); background: rgba(252,203,6,.06); }

.belong .rows dt,
.legacy .rows dt         { color: rgba(255,255,255,.72); opacity: 1; }
.belong .rows dd,
.legacy .rows dd         { color: var(--gold); }

.belong .req__col h4,
.legacy .req__col h4     { color: var(--white); }
.belong .req__col li,
.legacy .req__col li     { color: var(--text-light); }
.belong .req__col li::before,
.legacy .req__col li::before { background: var(--gold); }

.belong .lead-card__name { color: var(--white); }
.belong .lead-card__role { color: var(--gold); }


/* ==========================================================================
   31. FOOTER SOCIAL ICONS
   ========================================================================== */
.social-row svg {
  width: 17px; height: 17px;
  fill: currentColor;
  flex: none;
  display: block;
}
.footer .social-row a {
  gap: .5em;
  padding: .55em 1.05em;
}
.social-row a span { line-height: 1; }

/* Icon-only variant for tight rows */
.social-row--icons a { padding: .62em; border-radius: 50%; }
.social-row--icons a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


/* ==========================================================================
   32. HEADER LOCKUP
   The horizontal shield + wordmark replaces the stacked mark in the bar.
   ========================================================================== */
.brand__lockup {
  /* Height-driven so the lockup always sits inside the bar with breathing room */
  height: 40px;
  width: auto;
  max-width: 46vw;
  display: block;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.55));
  transition: width .35s var(--ease);
}
.site-header.is-stuck .brand__lockup { height: 34px; }

@media (max-width: 940px) {
  .brand__lockup { height: 32px; }
  .site-header.is-stuck .brand__lockup { height: 29px; }
}
@media (max-width: 420px) {
  .brand__lockup { height: 27px; }
  .site-header.is-stuck .brand__lockup { height: 25px; }
}

/* The lockup carries its own wordmark, so the old text block is redundant */
.site-header .brand__text { display: none; }

/* Footer keeps the stacked shield */
.footer__logo { width: 92px; }





/* ==========================================================================
   33. PALETTE RESTORE
   Back to the deep-blue-and-gold scheme from the first build. Gold still
   carries the accents (the light blue is not used for text anywhere).
   ========================================================================== */
.creed::after {
  background: linear-gradient(180deg, rgba(5,7,13,.93), rgba(10,26,92,.93));
}
.support__scrim {
  background:
    linear-gradient(180deg, rgba(5,7,13,.86), rgba(10,26,92,.9)),
    radial-gradient(80% 60% at 50% 50%, rgba(42,85,214,.35), transparent 70%);
}
.hero__scrim {
  background:
    var(--grad-scrim),
    radial-gradient(120% 90% at 12% 40%, rgba(10,26,92,.62), transparent 60%);
}
.legacy { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%); }
.media  { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 50%, var(--ink) 100%); }
.stats  { background: var(--grad-royal); }

/* Accents stay gold — the light blue is never used as text */
.section--light .link-arrow,
.section--light .contact__info dt,
.section--light .tier__name,
.section--light .req__col h4,
.section--light .lineage__years,
.section--light .event__title,
.section--light .script--blue { color: var(--blue); }
.section--light .script--blue { text-shadow: none; }
.tl-card__year, .xcard__num, .footer__col h4,
.mainnav__link.is-active { color: var(--gold); }


/* ==========================================================================
   34. HEADER SIZE + MOBILE LAYOUT
   Bigger bar and lockup on desktop. On phones the lockup centres itself and
   the hamburger pins to the right edge, and the open menu scrolls instead of
   clipping its contents.
   ========================================================================== */
:root { --hdr: 92px; }

.site-header { height: var(--hdr); }
.site-header.is-stuck { height: 76px; }

.brand__lockup { height: 54px; }
.site-header.is-stuck .brand__lockup { height: 46px; }

.mainnav__link { font-size: .88rem; }
.header-cta { font-size: .8rem; padding: .8em 1.5em; }

@media (max-width: 1180px) {
  .mainnav__list { gap: clamp(12px, 1.6vw, 22px); }
  .mainnav__link { font-size: .82rem; letter-spacing: .14em; }
}

/* ---- Phones and small tablets ---- */
@media (max-width: 940px) {
  :root { --hdr: 76px; }
  .site-header { height: var(--hdr); }
  .site-header.is-stuck { height: 66px; }

  /* Three-column bar: spacer | centred lockup | hamburger */
  .site-header__inner {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    gap: 0;
  }
  .site-header .brand {
    grid-column: 2;
    justify-self: center;
    margin: 0;
  }
  .brand__lockup { height: 40px; max-width: 60vw; }
  .site-header.is-stuck .brand__lockup { height: 34px; }

  .nav-toggle {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    width: 44px; height: 44px;
    padding: 13px 11px;
  }

  /* Open menu: scrollable, clear of the notch and the bar */
  .mainnav {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--hdr) + env(safe-area-inset-top, 0px) + 18px)
             var(--pad)
             calc(48px + env(safe-area-inset-bottom, 0px));
  }
  .mainnav__list {
    width: min(460px, 88vw);
    margin-inline: auto;
    padding-bottom: 12px;
  }
  .mainnav__link {
    font-size: clamp(1.05rem, 4.4vw, 1.32rem);
    padding: .7em 0;
    letter-spacing: .18em;
  }
}

@media (max-width: 420px) {
  :root { --hdr: 68px; }
  .brand__lockup { height: 34px; }
  .site-header.is-stuck .brand__lockup { height: 30px; }
  .site-header__inner { grid-template-columns: 40px 1fr 40px; padding-inline: 14px; }
  .nav-toggle { width: 40px; height: 40px; padding: 12px 10px; }
}

/* Short screens: never let the menu run past the viewport */
@media (max-width: 940px) and (max-height: 620px) {
  .mainnav__link { font-size: 1rem; padding: .5em 0; }
}


/* ==========================================================================
   35. SECTION ACCORDIONS
   Long reference sections collapse into dropdowns. Built on <details>/<summary>
   so they work with no JavaScript and stay keyboard- and screen-reader-friendly.
   ========================================================================== */
.acc { border-top: 1px solid var(--hairline-d); }
.acc:last-of-type { border-bottom: 1px solid var(--hairline-d); }

.acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(20px, 2.6vw, 30px) 0;
  transition: color .3s var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }

.acc__num {
  font-family: var(--f-cond);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--gold-deep);
  flex: none;
  min-width: 2.4em;
}
.acc__title {
  flex: 1;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--blue);
}
.acc__hint {
  font-family: var(--f-body);
  font-size: .84rem;
  color: var(--text-dark);
  opacity: .7;
  max-width: 34ch;
  display: none;
}
@media (min-width: 900px) { .acc__hint { display: block; } }

/* Plus / minus indicator */
.acc__icon {
  flex: none;
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--hairline-d);
  border-radius: 50%;
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  background: var(--blue);
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.acc__icon::before { width: 13px; height: 2px; }
.acc__icon::after  { width: 2px;  height: 13px; }

.acc > summary:hover .acc__title { color: var(--gold-deep); }
.acc > summary:hover .acc__icon { border-color: var(--gold); background: rgba(255,199,44,.14); }
.acc[open] > summary .acc__icon { background: var(--grad-gold); border-color: transparent; transform: rotate(180deg); }
.acc[open] > summary .acc__icon::after { opacity: 0; }
.acc[open] > summary .acc__icon::before { background: var(--ink); }

.acc__body {
  padding-bottom: clamp(26px, 3.4vw, 44px);
  animation: accOpen .45s var(--ease-out);
}
@keyframes accOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark-section variant */
.belong .acc, .legacy .acc { border-color: var(--hairline); }
.belong .acc__title, .legacy .acc__title { color: var(--white); }
.belong .acc__num, .legacy .acc__num { color: var(--gold); }
.belong .acc__hint, .legacy .acc__hint { color: var(--text-light); }
.belong .acc__icon, .legacy .acc__icon { border-color: var(--hairline); }
.belong .acc__icon::before, .belong .acc__icon::after,
.legacy .acc__icon::before, .legacy .acc__icon::after { background: var(--white); }
.belong .acc[open] > summary .acc__icon::before,
.legacy .acc[open] > summary .acc__icon::before { background: var(--ink); }

@media (prefers-reduced-motion: reduce) { .acc__body { animation: none; } }


/* ==========================================================================
   36. HAMBURGER POSITION FIX
   The base rule positions .nav-toggle with `position: fixed; top: 26px;
   right: 20px`. On mobile it becomes a grid item with `position: relative`
   for stacking — but the inherited top/right then act as *relative offsets*,
   shoving it 26px down and 20px left of its cell. Clearing the insets puts it
   back in the middle of its grid cell.
   ========================================================================== */
@media (max-width: 940px) {
  .nav-toggle {
    position: relative;
    inset: auto;            /* cancels the inherited top/right offsets */
    top: auto; right: auto; bottom: auto; left: auto;
    align-self: center;
    margin: 0;
  }
}

/* ==========================================================================
   37. HERO UNIVERSITY LOCKUP
   The university name reads as its own stacked white line above the band
   name, matching the weight of the motto beneath it.
   ========================================================================== */
.hero__uni {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.6vw, 2.15rem);
  line-height: .98;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 6px 34px rgba(0,0,0,.5);
}
.hero__uni span { display: block; }
.hero__uni span + span { padding-left: .08em; }

@media (max-height: 720px) {
  .hero__uni { font-size: clamp(1rem, 2.2vw, 1.5rem); }
}


/* ==========================================================================
   38. HEADER DRAWER
   Hovering (or focusing) About drops a panel of its sections. On touch and at
   mobile widths the same markup becomes an inline sub-list inside the sheet.
   ========================================================================== */
.mainnav__item--drawer { position: relative; }

.mainnav__item--drawer > .mainnav__link {
  display: inline-flex; align-items: center; gap: 7px;
}
.mainnav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .6;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.mainnav__item--drawer.is-open > .mainnav__link .mainnav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.drawer {
  position: absolute;
  top: calc(100% + 18px);
  /* JS overwrites --shift when centring would push the panel off either edge */
  left: 50%;
  margin-left: var(--shift, 0px);
  width: min(760px, calc(100vw - 2 * var(--pad)));
  transform: translate(-50%, -10px);
  background: rgba(8,11,22,.97);
  backdrop-filter: blur(18px);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease-out), visibility .3s;
  z-index: 82;
}
/* An invisible bridge so the cursor can travel from the link to the panel */
.drawer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -20px; height: 20px;
}
.mainnav__item--drawer.is-open > .drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.drawer__inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 2.6vw, 34px);
  padding: clamp(22px, 2.6vw, 30px);
}
.drawer__eyebrow {
  font-family: var(--f-cond);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .8rem;
}
.drawer__blurb {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0 0 1.2rem;
}
.drawer__all {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-cond);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.drawer__all:hover { color: var(--gold); gap: 13px; }

.drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.dlink {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border-radius: 3px;
  border-left: 2px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.dlink b {
  font-family: var(--f-cond);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  transition: color .3s var(--ease);
}
.dlink i {
  font-style: normal;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--text-light);
  opacity: .8;
}
.dlink:hover { background: rgba(255,199,44,.1); border-left-color: var(--gold); }
.dlink:hover b { color: var(--gold); }

/* Ten ensembles need a wider panel than the eight About links */
.drawer--wide { width: min(940px, calc(100vw - 2 * var(--pad))); }
.drawer--wide .drawer__inner { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }

/* ---- Inside the mobile sheet the drawer is just an indented sub-list ---- */
@media (max-width: 940px) {
  .mainnav__item--drawer { position: static; }
  .mainnav__item--drawer > .mainnav__link { display: flex; justify-content: space-between; width: 100%; }
  .mainnav__caret { border-top-width: 5px; border-left-width: 5px; border-right-width: 5px; }

  .drawer,
  .drawer--wide {
    position: static;
    width: auto;
    margin-left: 0;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease-out);
  }
  .drawer::before { display: none; }
  .mainnav__item--drawer.is-open > .drawer { transform: none; grid-template-rows: 1fr; }

  .drawer__inner,
  .drawer--wide .drawer__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    min-height: 0;
  }
  .drawer__lede { display: none; }
  .drawer__grid { grid-template-columns: 1fr; gap: 0; padding-block: 4px 12px; }
  .dlink {
    padding: .62em 0 .62em 18px;
    border-left: 2px solid rgba(255,199,44,.32);
    border-radius: 0;
    margin-left: 4px;
  }
  .dlink i { display: none; }
  .dlink b { font-size: .92rem; letter-spacing: .16em; }
}


/* ==========================================================================
   39. CALENDAR HOVER — BLUE TO GOLD
   Hovering a date on the home page or the schedule flips the blue tile to
   gold and warms the whole row.
   ========================================================================== */
.event {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.event::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255,199,44,.20) 0%, rgba(255,227,138,.08) 45%, transparent 78%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.event:hover::before,
.event:focus-visible::before { opacity: 1; }

.event:hover,
.event:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 18px 44px rgba(217,155,0,.22);
}
.event__date {
  background: var(--grad-blue);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.event:hover .event__date,
.event:focus-visible .event__date {
  background: var(--grad-gold);
  color: var(--ink);
  transform: scale(1.05);
}
.event:hover .event__title,
.event:focus-visible .event__title { color: var(--gold-deep); }
.event__go { transition: transform .4s var(--ease), color .4s var(--ease); }
.event:hover .event__go,
.event:focus-visible .event__go { color: var(--gold-deep); }

/* The season opener leads the list */
.event--first { border-left: 3px solid var(--gold); }

/* Same treatment on the full schedule */
.gd { transition: background .4s var(--ease), border-color .4s var(--ease); }
.gd__date { transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.gd:hover .gd__date {
  background: var(--grad-gold);
  color: var(--ink);
  transform: scale(1.05);
}
.gd:hover .gd__title { color: var(--gold); }
.gd:hover .gd__tag--special { background: var(--grad-gold); color: var(--ink); }


/* ==========================================================================
   40. BY THE NUMBERS — SIX TILES
   Six tiles divide evenly at 2, 3 and 6 across, so no orphan sits alone on a
   phone or an iPad.
   ========================================================================== */
.stats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1180px) { .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.stat__num { word-break: keep-all; }
.stat__label { text-wrap: balance; }

@media (max-width: 1180px) {
  .stat { padding: clamp(20px, 3vw, 30px) clamp(14px, 2vw, 22px); }
  .stat__num { font-size: clamp(1.9rem, 5vw, 2.8rem); }
  .stat__num--sm { font-size: clamp(1.5rem, 4vw, 2.1rem); }
  .stat__label { font-size: .7rem; letter-spacing: .16em; }
}
@media (max-width: 420px) {
  .stat { padding: 20px 14px; }
  .stat__label { font-size: .64rem; letter-spacing: .12em; }
}


/* ==========================================================================
   41. SLIDESHOW
   One frame at a time, with arrows, a scrubbing rail, autoplay and a
   thumbnail strip. Scroll-snap does the paging so a swipe works natively.
   ========================================================================== */
.slideshow { margin-top: clamp(24px, 3vw, 40px); }

.slideshow__stage {
  position: relative;
  background: rgba(5,7,13,.6);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.slideshow__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slideshow__track::-webkit-scrollbar { display: none; }
.slideshow__track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
  position: relative;
}
.slide img {
  width: 100%;
  height: clamp(300px, 56vh, 640px);
  object-fit: contain;
  background: #05070D;
  display: block;
}
.slide__cap {
  position: absolute;
  right: 0; bottom: 0;
  padding: 10px 12px;
}
.slide__credit { position: static; opacity: .85; }

.slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(42px, 4vw, 54px);
  height: clamp(42px, 4vw, 54px);
  display: grid; place-items: center;
  background: rgba(5,7,13,.62);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.slideshow__arrow--prev { left: clamp(10px, 1.4vw, 18px); }
.slideshow__arrow--next { right: clamp(10px, 1.4vw, 18px); }
.slideshow__arrow:hover {
  background: var(--grad-gold);
  border-color: transparent;
  color: var(--ink);
  transform: translateY(-50%) scale(1.08);
}
.slideshow__arrow[disabled] { opacity: .28; pointer-events: none; }

.slideshow__expand {
  position: absolute;
  top: clamp(10px, 1.4vw, 18px); right: clamp(10px, 1.4vw, 18px);
  z-index: 3;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(5,7,13,.62);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slideshow__expand:hover { background: var(--grad-gold); color: var(--ink); border-color: transparent; }

.slideshow__bar {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px);
  padding: 14px 2px 0;
}
.slideshow__count {
  font-family: var(--f-cond);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .16em;
  color: var(--text-light);
  margin: 0;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.slideshow__count b { color: var(--gold); font-weight: 700; }
.slideshow__count span { opacity: .4; margin-inline: 2px; }

.slideshow__rail {
  flex: 1;
  height: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.slideshow__rail span {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: var(--grad-gold);
  transition: width .35s var(--ease-out);
}

.slideshow__play {
  flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: .5em 1em;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--text-light);
  font-family: var(--f-cond);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.slideshow__play:hover { color: var(--gold); border-color: var(--gold); }
.slideshow__play-icon {
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.slideshow__play[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(255,199,44,.1); }
.slideshow__play[aria-pressed="true"] .slideshow__play-icon {
  width: 9px; height: 10px;
  border: 0;
  background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) left / 3px 100% no-repeat,
                linear-gradient(#000 0 0) right / 3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) left / 3px 100% no-repeat,
                linear-gradient(#000 0 0) right / 3px 100% no-repeat;
}

.slideshow__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.slideshow__thumbs::-webkit-scrollbar { height: 4px; }
.slideshow__thumbs::-webkit-scrollbar-thumb { background: var(--hairline); }
.slideshow__thumb {
  flex: 0 0 auto;
  width: clamp(56px, 6vw, 78px);
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  opacity: .42;
  transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.slideshow__thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.slideshow__thumb:hover { opacity: .82; transform: translateY(-2px); }
.slideshow__thumb.is-current { opacity: 1; border-color: var(--gold); }

@media (max-width: 620px) {
  .slide img { height: clamp(260px, 48vh, 420px); }
  .slideshow__play-text { display: none; }
  .slideshow__play { padding: .5em .8em; }
}

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

/* ==========================================================================
   42. CONTRAST SWEEP
   --------------------------------------------------------------------------
   Found by walking every text node on all 21 pages, resolving the background
   each one actually sits on, and measuring the WCAG ratio. Three families of
   problem turned up: components built for a light panel that got reused on a
   dark one, decorative type dialled so far back it read as a smudge, and
   full-strength gold carrying small copy on paper.
   ========================================================================== */

/* ---- 1. The lineage table on dark panels -------------------------------
   .lineage was designed for --paper: navy names, dark-grey notes. On the
   director's Appointments list and the Director Lineage page it sits on the
   royal gradient, whose mid-stop IS #0A1A5C — the exact navy of the names.
   Invert the whole component wherever the panel is dark. */
.belong .lineage__name,
.legacy .lineage__name,
.creed  .lineage__name,
.stats  .lineage__name { color: var(--white); }

.belong .lineage__note,
.legacy .lineage__note,
.creed  .lineage__note,
.stats  .lineage__note { color: var(--text-light); opacity: 1; }

.belong .lineage__years,
.legacy .lineage__years,
.creed  .lineage__years,
.stats  .lineage__years { color: var(--gold); }

.belong .lineage__row,
.legacy .lineage__row { border-bottom-color: var(--hairline); }
.belong .lineage__row:hover,
.legacy .lineage__row:hover { background: rgba(255,199,44,.09); }

/* The highlighted "now" row carries a gold wash, so its type goes to ink */
.belong .lineage__row--now,
.legacy .lineage__row--now { background: var(--grad-gold); border-bottom-color: transparent; }
.belong .lineage__row--now .lineage__name,
.legacy .lineage__row--now .lineage__name { color: var(--ink); }
.belong .lineage__row--now .lineage__years,
.legacy .lineage__row--now .lineage__years { color: var(--ink); }
.belong .lineage__row--now .lineage__note,
.legacy .lineage__row--now .lineage__note { color: rgba(5,7,13,.78); }
.belong .lineage__row--now:hover,
.legacy .lineage__row--now:hover { background: var(--grad-gold); }

/* ---- 2. The vertical side banners --------------------------------------
   "2026 – 2027", "Since 1907" and friends were set at 6% opacity, which on a
   navy panel is navy-on-navy and on paper is a ghost. They are meant to read
   as a watermark, not disappear — gold on dark, navy on light, both strong
   enough to be legible without competing with the copy. */
.vtext { color: rgba(255,199,44,.3); }
.section--light .vtext { color: rgba(10,26,92,.24); }
.hero__vtext { color: rgba(255,255,255,.5); }

/* ---- 3. Gold carrying small copy on paper ------------------------------ */
.section--light .chant strong,
.section--light .creed__quote em,
.section--light .creed__quote strong { color: var(--blue); }

.section--light .acc__num { color: var(--blue); }

/* The row arrow is decorative, but gold on white was invisible even so.
   Navy at rest; it warms up with the rest of the row on hover. */
.event__go { color: var(--blue); }
.event:hover .event__go,
.event:focus-visible .event__go { color: var(--gold-deep); }

/* ---- 4. Small print set too faint -------------------------------------- */
.timeline__hint { color: rgba(255,255,255,.58); }
.footer__bar p,
.footer__credit { color: rgba(255,255,255,.55); }

/* ==========================================================================
   43. FOOTER — CENTRED
   --------------------------------------------------------------------------
   One centred column: the header lockup, the blurb, bare social glyphs with
   no pill or label, the campus address and contact line, then a single
   wrapping row of links. Replaces the old four-column grid.
   ========================================================================== */
.footer--center { text-align: center; }

.footer--center .footer__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 26px);
  padding-bottom: clamp(38px, 5vw, 58px);
}

.footer__brand-link { display: block; }
.footer__lockup {
  width: clamp(220px, 26vw, 320px);
  height: auto;
  display: block;
}

.footer--center .footer__blurb {
  max-width: 46ch;
  margin: 0;
  font-size: .9rem;
  color: var(--text-light);
}

/* ---- Bare social glyphs: no pill, no border, no label ---- */
.social-row--bare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 30px);
  list-style: none;
  margin: 0; padding: 0;
}
.social-row--bare a {
  display: block;
  padding: 6px;                 /* touch target only — nothing visible */
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.72);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
/* The pill variant in section 27 paints a gold background on hover. Left in
   place that puts a gold icon on a gold pill — invisible. Bare icons keep no
   background at all; the hover state is the glyph itself going gold. */
.social-row--bare a:hover,
.social-row--bare a:focus-visible {
  background: none;
  background-image: none;
  border-color: transparent;
  color: var(--gold);
  transform: translateY(-3px) scale(1.14);
}
.social-row--bare a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.social-row--bare svg {
  width: 22px; height: 22px;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 0 0 rgba(255,199,44,0));
  transition: filter .3s var(--ease);
}
.social-row--bare a:hover svg { filter: drop-shadow(0 4px 12px rgba(255,199,44,.55)); }

/* ---- Address and contact line ---- */
.footer__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer__addr {
  font-family: var(--f-cond);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.footer__reach {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 12px;
  font-size: .88rem;
}
.footer__reach a {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.footer__reach a:hover { border-bottom-color: var(--gold); }
.footer__reach i { color: rgba(255,255,255,.28); font-size: .48rem; font-style: normal; }

/* ---- One wrapping row of links ---- */
.footer__links {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px clamp(16px, 2.2vw, 26px);
  max-width: 900px;
  padding-top: clamp(8px, 1.4vw, 16px);
  border-top: 1px solid var(--hairline);
  width: 100%;
}
.footer__links a {
  font-family: var(--f-cond);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: .3rem 0;
  transition: color .3s var(--ease);
}
.footer__links a:hover { color: var(--gold); }

.footer--center .footer__bar { justify-content: center; text-align: center; }

@media (max-width: 620px) {
  .footer__addr { font-size: .7rem; letter-spacing: .1em; line-height: 1.7; }
  .footer__links { gap: 8px 16px; }
  .footer__links a { font-size: .74rem; letter-spacing: .12em; }
  .footer--center .footer__bar { flex-direction: column; align-items: center; gap: 6px; }
}

/* Bottom bar: copyright, then photo credit and build credit side by side,
   separated by a hairline diamond. Stacks on narrow screens. */
.footer--center .footer__bar {
  flex-direction: column;
  gap: 10px;
  padding-block: 22px clamp(24px, 3vw, 32px);
}
.footer--center .footer__bar p { font-size: .72rem; letter-spacing: .1em; }

.footer__credit,
.footer__built {
  margin: 0;
  font-family: var(--f-cond);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.footer__built strong { color: var(--gold); font-weight: 700; }

.footer__meta {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 6px 14px;
  margin: 0;
}
/* Divider between the two credits, dropped when they wrap onto separate lines */
@media (min-width: 720px) {
  .footer__credit::after {
    content: "\25C6";
    margin-left: 14px;
    font-size: .46rem;
    vertical-align: middle;
    color: rgba(255,255,255,.24);
  }
}

/* ==========================================================================
   44. VERTICAL WATERMARK — KEEP IT IN THE GUTTER
   --------------------------------------------------------------------------
   .vtext was pinned to `left: 18px` while the content column is centred at
   --wrap (1220px). Below roughly 1420px the two occupy the same space, so the
   watermark ran underneath the copy — invisible at 6% opacity, but obvious now
   that it reads properly. It only appears where the gutter can actually hold
   it, and it sits in that gutter rather than at a fixed offset.
   ========================================================================== */
.vtext { display: none; }

@media (min-width: 1440px) {
  .vtext {
    display: block;
    /* centre it in the space between the viewport edge and the content column */
    left: calc(((100vw - var(--wrap)) / 2 - 3.6rem) / 2);
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  }
}

/* The hero mark hangs off the right rail and never meets the copy column */
.hero__vtext { display: block; left: auto; }
@media (max-width: 1100px) { .hero__vtext { display: none; } }

/* ==========================================================================
   45. TRADITIONS PAGE
   The Creed, Discipline, the Motto and the Band Song are four items of the
   same kind, so they carry the same heading — previously the Creed was the
   section title and the other three were subheads. The left-aligned motto
   picks up the gold rule every other label on the site has.
   ========================================================================== */
.trad__h {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1rem;
}
.trad__h::before {
  content: "";
  width: 46px; height: 2px;
  background: var(--gold);
  flex: none;
}
.trad__h + .chant,
.trad__h + .trad__note { margin-top: 0; }
.chant + .trad__h { margin-top: clamp(2rem, 3.4vw, 2.8rem); }
.motto + .trad__h { margin-top: clamp(2rem, 3.4vw, 2.8rem); }

.trad__note {
  font-family: var(--f-cond);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .7;
  margin: 0 0 .9rem;
}

/* Left-aligned motto, with the same gold rule as the headings above it */
.motto--left {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  padding-left: 60px;                 /* clears the rule */
  position: relative;
  margin-bottom: 0;
}
.motto--left::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 46px; height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
}
.motto--left li { font-size: clamp(1.3rem, 3vw, 2.2rem); }

@media (max-width: 520px) {
  .motto--left { padding-left: 0; flex-wrap: wrap; }
  .motto--left::before { display: none; }
}

/* Dark-panel variant, in case these blocks move onto a navy section */
.belong .trad__h, .legacy .trad__h, .creed .trad__h { color: var(--white); }
.belong .trad__note, .legacy .trad__note { color: var(--text-light); opacity: 1; }

/* ==========================================================================
   46. HERO WATERMARK SIZE + TOUCH-ONLY HINTS
   --------------------------------------------------------------------------
   Two fixes. First: section 44 sized every .vtext up for the gutter, which
   also caught .hero__vtext — a small right-rail caption that then outgrew its
   space and clipped. It gets its own size back, stated after that rule so it
   wins. Second: "swipe on mobile" told desktop visitors how to use a phone.
   The hint now only appears on devices that actually need it.
   ========================================================================== */
.hero__vtext {
  font-size: .72rem;
  letter-spacing: .3em;
  max-height: calc(100% - 180px);
  overflow: visible;
}
@media (min-width: 1440px) {
  .hero__vtext { font-size: .72rem; letter-spacing: .3em; }
}

/* Touch hints stay hidden wherever there is a real pointer */
.timeline__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .timeline__hint--touch { display: block; }
}

/* ==========================================================================
   47. HOMECOMING — COUNTDOWN + HUB
   --------------------------------------------------------------------------
   The countdown reads its target from data-countdown on the wrapper, so the
   date lives in the markup and the same component works on the home page
   strip and on the hub's hero band.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Home-page strip ---- */
.hc-strip {
  position: relative;
  isolation: isolate;
  padding-block: clamp(60px, 8vw, 104px);
  border-block: 1px solid var(--hairline);
  overflow: hidden;
}
.hc-strip__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hc-strip__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,7,13,.94) 0%, rgba(5,7,13,.86) 46%, rgba(10,26,92,.72) 100%),
    radial-gradient(90% 120% at 8% 50%, rgba(10,26,92,.7), transparent 62%);
}
.hc-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.hc-strip__copy .h-display { margin-bottom: 1rem; }
.hc-strip__copy .lede { margin-bottom: 1.6rem; }

@media (max-width: 900px) {
  .hc-strip__inner { grid-template-columns: 1fr; }
}

/* ---- The counter itself ---- */
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}
.countdown__unit {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: clamp(14px, 2vw, 22px) clamp(6px, 1vw, 12px);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
}
.countdown__unit b {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1;
  font-weight: 400;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.countdown__unit span {
  font-family: var(--f-cond);
  font-size: clamp(.58rem, 1vw, .68rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
}
/* Seconds tick in gold so the thing reads as live */
.countdown__unit:last-child b { color: var(--gold); }

.countdown--lg .countdown__grid {
  max-width: 720px;
  margin-inline: auto;
  margin-top: clamp(22px, 3vw, 34px);
}
.countdown--lg .countdown__unit b { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.hc-count__wrap { text-align: center; }
.hc-count__wrap .eyebrow { justify-content: center; }

.countdown__done {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-family: var(--f-cond);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 420px) {
  .countdown__grid { gap: 6px; }
  .countdown__unit { padding: 12px 4px; }
  .countdown__unit span { letter-spacing: .12em; }
}

/* ---- Hub: the Saturday running order ---- */
.hc-day { display: grid; gap: 10px; }
.hc-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: center;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.2vw, 24px);
  background: var(--white);
  border: 1px solid var(--hairline-d);
  border-left: 3px solid var(--hairline-d);
  border-radius: 4px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.hc-row:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(217,155,0,.18); }
.hc-row--band { border-left-color: var(--gold); background: rgba(255,199,44,.07); }

.hc-row__time {
  font-family: var(--f-cond);
  font-size: clamp(.82rem, 1.4vw, .95rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.hc-row__title {
  display: block;
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue);
}
.hc-row__where { display: block; font-size: .84rem; color: var(--text-dark); opacity: .75; margin-top: 2px; }
.hc-row__band {
  display: block;
  margin-top: 5px;
  font-family: var(--f-cond);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.hc-row__tag {
  justify-self: end;
  padding: .38em .85em;
  font-family: var(--f-cond);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--grad-gold);
  color: var(--ink);
  border-radius: 2px;
  white-space: nowrap;
}
.hc-row__tag--uni { background: none; border: 1px solid var(--hairline-d); color: var(--blue); }

.hc-note {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: .84rem;
  color: var(--text-dark);
  opacity: .72;
}

@media (max-width: 720px) {
  .hc-row { grid-template-columns: 1fr auto; }
  .hc-row__time { grid-column: 1; }
  .hc-row__body { grid-column: 1 / -1; }
}

/* A flagged drawer link, for the one that is time-sensitive */
.dlink--flag b::after {
  content: "Oct 17";
  margin-left: 9px;
  padding: .18em .5em;
  font-family: var(--f-cond);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  vertical-align: middle;
  background: var(--grad-gold);
  color: var(--ink);
  border-radius: 2px;
}

/* ==========================================================================
   48. MEDIA TEAM FORM
   The application reuses .cform. These are the two additions it needs: a hero
   button row, and a marker for the fields that are not required.
   ========================================================================== */
.page-hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(20px, 2.6vw, 30px);
}

.cform__opt {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--text-dark);
  opacity: .6;
  margin-left: 6px;
}
.cform select.is-error { border-color: #C0392B; background: #FDF3F2; }

/* The form sits beside the copy on wide screens and stacks below it on narrow */
#media-team .split { align-items: start; gap: clamp(28px, 4vw, 56px); }
#media-team .req { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 30px); }

@media (min-width: 900px) {
  #media-team .req { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   49. CONTRAST FIXES — MISSION CARDS AND SECTION HEADERS
   --------------------------------------------------------------------------
   Both reported by Dr. Brock, and both the same root cause: base rules that
   hard-code a colour with !important for one panel, then get reused on the
   other. .mission__card forced white type, which vanishes on the About page's
   light panel. .req__col h4 forced navy, which vanishes on the Join page's
   navy panel. These state the colour per panel and win on specificity.
   ========================================================================== */

/* Mission, Vision and Philosophy sit on --paper: navy heads, dark body copy */
.section--light .mission__card h3 { color: var(--blue) !important; }
.section--light .mission__card p  { color: var(--text-dark) !important; opacity: 1; }
.section--light .mission__card    { border-top-color: var(--gold); }

/* Same component on a dark panel keeps the light treatment */
.belong .mission__card h3,
.legacy .mission__card h3 { color: var(--white) !important; }
.belong .mission__card p,
.legacy .mission__card p  { color: var(--text-light) !important; }

/* Column headers on navy panels — Eligibility, Course Enrollment, etc. */
.belong .req__col h4,
.legacy .req__col h4,
.creed  .req__col h4,
.support .req__col h4 { color: var(--white) !important; border-bottom-color: var(--gold); }

.belong .req__col li,
.legacy .req__col li,
.creed  .req__col li,
.support .req__col li { color: var(--text-light); }

.belong .req__col li strong,
.legacy .req__col li strong { color: var(--gold); }


/* ==========================================================================
   50 · OFFICIAL UNIVERSITY LOCKUP
   The JCSU institutional lockup sits above the IIOS header on load, then
   retracts on scroll so the sticky header keeps the top edge to itself.
   Sits one layer *below* the header (79 vs 80) so the header wipes cleanly
   over it during the transition.
   ========================================================================== */
:root { --unibar: 46px; }

.uni-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 79;
  height: var(--unibar);
  display: flex; align-items: center;
  background: #05070D;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  transform: translateY(0);
  transition: transform .45s var(--ease-out);
}
.uni-bar__inner {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center;
}
.uni-bar__brand {
  display: inline-flex; align-items: center;
  padding: 4px 0;
  border-radius: 4px;
}
.uni-bar__brand img {
  height: 26px; width: auto; display: block;
  opacity: .92;
  transition: opacity .3s var(--ease);
}
.uni-bar__brand:hover img,
.uni-bar__brand:focus-visible img { opacity: 1; }

/* Header starts under the lockup, then claims the top edge once scrolled */
.site-header { top: var(--unibar); }
.nav-stuck .uni-bar { transform: translateY(-100%); }
.nav-stuck .site-header { top: 0; }

/* Anything clearing the fixed header must clear the lockup too, on load */
.page-hero { padding-top: calc(var(--hdr) + var(--unibar) + clamp(48px, 7vw, 92px)); }

@media (max-width: 940px) {
  :root { --unibar: 40px; }
  .uni-bar__brand img { height: 22px; }
  /* Open mobile sheet has to clear both the bar and the header */
  .mainnav {
    padding-top: calc(var(--hdr) + var(--unibar) + env(safe-area-inset-top, 0px) + 18px);
  }
}
@media (max-width: 560px) {
  :root { --unibar: 36px; }
  .uni-bar__brand img { height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .uni-bar { transition: none; }
}

/* ── Footer: institutional lockup under the IIOS lockup ── */
.footer__uni {
  display: block;
  margin: 4px auto 0;
  padding-top: 18px;
  width: fit-content;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer__uni img {
  height: 30px; width: auto; display: block;
  opacity: .82;
  transition: opacity .3s var(--ease);
}
.footer__uni:hover img,
.footer__uni:focus-visible img { opacity: 1; }

@media (max-width: 700px) {
  .footer__uni img { height: 25px; }
}