/* ============================================================
   COLUMN BALANCE — CSS-only polish layer
   Forces multi-column grids site-wide to render with:
   • Equal column heights (cards align top + bottom)
   • Headings reserved space (1- vs 2-line headings don't break alignment)
   • Body text pushed to fill (so card bottoms line up)
   No copy changes. Pure presentation.
   ------------------------------------------------------------
   Loaded AFTER styles.min.css so these rules win on specificity
   ties via document order.
   ============================================================ */

/* ---------- 1. EQUAL-HEIGHT MULTI-COLUMN GRIDS ---------- */
/* Any grid that lays out children in columns should stretch them. */
.club-grid,
.feature-grid,
.feature-grid--cols-3,
.program-grid,
.ns-grid,
.stat-grid,
.recognition-archive-grid,
.recognition-stars-grid,
.vacancy-grid,
.faculty-grid,
.faculty-grid-flat,
.annual-awards-grid,
.assessment-grid,
.coming-soon-grid,
.discounts-grid,
.docs-grid,
.entry-grid,
.fees-block__grid,
.magazine-archive-grid,
.pathway__grid,
.cal-grid,
.alumni-profiles,
.alumni-stats,
.alumni-destinations,
.competition-stats,
.vom-timeline__grid,
.numbered-list--cols-3,
.numbered-list--cols-4,
.oh-grid--2,
.additional-grid,
.announcement-grid {
  align-items: stretch;
}

/* ---------- 2. CARDS BECOME FLEX COLUMNS ---------- */
/* So we can push content (CTA / footer text) to the bottom. */
.club-card,
.feature-card,
.feature-grid > * > article,
.program-card,
.ns-card,
.stat,
.recognition-archive-card,
.recognition-star-card,
.vacancy-card,
.faculty-card,
.fac-card,
.annual-award-card,
.assessment-card,
.alumni-card,
.alumni-card-flat,
.competition-entry,
.discount-card,
.doc-card,
.fees-block,
.magazine-card,
.pathway-card,
.vom-card,
.announcement-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bodies expand to fill the card so CTAs and bottom rows align. */
.club-card__body,
.feature-card__body,
.program-card__body,
.ns-card__body,
.recognition-archive-card__body,
.recognition-star-card__body,
.vacancy-card__body,
.faculty-card__body,
.fac-card__body,
.annual-award-card__body,
.assessment-card__body,
.alumni-card__body,
.competition-entry__body,
.discount-card__body,
.doc-card__body,
.magazine-card__body,
.pathway-card__body,
.vom-card__body,
.announcement-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ---------- 3. HEADINGS RESERVE EQUAL SPACE ---------- */
/* Use min-height so a 1-line title doesn't drop the body up vs a 2-line
   sibling. Values are sized to comfortably hold 2 lines at each level
   of the type scale. */

/* Card titles — Fraunces serif, larger */
.club-card__title,
.program-card__title,
.ns-card__title,
.faculty-card__title,
.fac-card__title,
.annual-award-card__title,
.vom-card__title,
.pathway-card__title,
.discount-card__title,
.doc-card__title,
.magazine-card__title,
.announcement-card__title {
  min-height: calc(1.25em * 2 + 0.1em);
  display: flex;
  align-items: flex-start;
}
/* .feature-card__title is excluded from the flex treatment above
   because flex on a text container with inline <em> children
   collapses the whitespace between siblings (the trailing space
   before "<em>" disappears, producing "complete<em>hot meal.</em>"
   that visually reads as "completehot meal."). Block layout
   preserves the inline space; the min-height still reserves
   2-line vertical space so adjacent cards align. */
.feature-card__title {
  min-height: calc(1.25em * 2 + 0.1em);
  display: block;
}

/* Eyebrows / labels — Inter UI, smaller */
.club-card__eyebrow,
.feature-card__eyebrow,
.program-card__eyebrow,
.ns-card__eyebrow,
.vacancy-card__eyebrow,
.discount-card__eyebrow,
.doc-card__eyebrow,
.pathway-card__eyebrow {
  min-height: 1.4em;
}

/* Roles / subtitles below names (people cards) */
.faculty-card__role,
.fac-card__role,
.recognition-star-card__role,
.alumni-card__role,
.alumni-card__university {
  min-height: 1.4em;
}

/* People cards: names also reserve room for 2-line wraps on long names */
.faculty-card__name,
.fac-card__name,
.recognition-star-card__name,
.recognition-archive-card__name,
.alumni-card__name {
  min-height: calc(1.2em * 2 + 0.1em);
  display: flex;
  align-items: flex-start;
}

/* Body paragraphs occupy the rest of the card */
.club-card__body p,
.feature-card__body p,
.program-card__body p,
.ns-card__body p,
.vacancy-card__body p,
.pathway-card__body p,
.discount-card__body p,
.doc-card__body p,
.annual-award-card__body p,
.assessment-card__body p,
.announcement-card__body p {
  flex: 1 1 auto;
}

/* CTAs and bottom rows get pushed to card bottom */
.club-card__cta,
.feature-card__cta,
.program-card__cta,
.ns-card__cta,
.vacancy-card__cta,
.pathway-card__cta,
.discount-card__cta,
.doc-card__cta,
.magazine-card__cta,
.faculty-card__cta,
.fac-card__cta {
  margin-top: auto;
}

/* ---------- 4. STAT TILES (numbers + label) ---------- */
/* Make the big number and label align across columns regardless of
   label word-count. */
.stat,
.stat-card,
.alumni-stat,
.competition-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.stat__num,
.stat-card__num,
.alumni-stat__num,
.competition-stat__num {
  flex: 0 0 auto;
}

.stat__label,
.stat-card__label,
.alumni-stat__label,
.competition-stat__label {
  min-height: calc(1.35em * 2);
  display: flex;
  align-items: flex-start;
}

/* ---------- 5. VALUE TILES (about page core values) ---------- */
/* About → Core Values: 4-column grid where headings vary 1-3 words.
   Match heading min-height so card bodies start on the same line. */
[class*="value-"],
.value-card,
.values-card,
.value-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.value-card__title,
.values-card__title,
.value-tile__title,
.value__title {
  min-height: 1.3em;
}

.value-card__body,
.values-card__body,
.value-tile__body,
.value__body {
  flex: 1 1 auto;
}

/* ---------- 6. INSIDE-CST TILES (image + caption) ---------- */
/* Captions in tiled cards: equal-line eyebrows + headings */
.inside-cst__caption {
  display: flex;
  flex-direction: column;
}
.inside-cst__tag {
  min-height: 1.4em;
}

/* ---------- 7. BAND CARDS (lower/upper primary/middle/high) ---------- */
/* When laid out 2- or 4-column, equalise the title + grade rows. */
.band__num   { min-height: 1.2em; }
.band__grade { min-height: 1.4em; }
.band__title { min-height: calc(1.2em * 2); }

/* ---------- 8. FUTURE-READY / ACADEMIC CATEGORY CARDS ---------- */
/* On Academics page: 4-column "How the Program is Built" + Future-Ready
   pillars. Title-line varies; equalise. */
[class*="cat-"] > h3,
[class*="cat-"] > h4,
[class*="fr-"]  > h3,
[class*="fr-"]  > h4,
.cat-card__title,
.fr-card__title,
.pillar-card__title {
  min-height: calc(1.25em * 2);
  display: flex;
  align-items: flex-start;
}

.cat-card,
.fr-card,
.pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cat-card__body,
.fr-card__body,
.pillar-card__body {
  flex: 1 1 auto;
}

/* ---------- 9. NUMBERED LISTS (3 or 4 columns) ---------- */
.numbered-list--cols-3 > li,
.numbered-list--cols-4 > li,
.numbered-list > li {
  display: flex;
  flex-direction: column;
}

.numbered-list__title,
.numbered-list > li > h3,
.numbered-list > li > h4 {
  min-height: calc(1.25em * 2);
}

.numbered-list__body,
.numbered-list > li > p {
  flex: 1 1 auto;
}

/* ---------- 10. FOOTER COLUMNS ---------- */
/* Footer 4-column nav: each column heading should align across, and
   the column itself stretch to the same height. */
.site-footer__grid {
  align-items: stretch;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
}
.site-footer__col-title {
  min-height: 1.4em;
}

/* ---------- 11. SAFETY NET: any grid with .equalize-cols ---------- */
/* Optional opt-in class for any future grid not covered above. */
.equalize-cols {
  align-items: stretch;
}
.equalize-cols > * {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.equalize-cols > * > h2,
.equalize-cols > * > h3,
.equalize-cols > * > h4 {
  min-height: calc(1.25em * 2);
}

/* ---------- 12. MOBILE ESCAPE HATCH ---------- */
/* When columns collapse to 1 on mobile, drop all the min-heights
   to avoid weird gaps in single-column flow. */
@media (max-width: 640px) {
  [class*="-card__title"],
  [class*="-card__name"],
  [class*="-card__role"],
  [class*="-card__eyebrow"],
  .band__num,
  .band__grade,
  .band__title,
  .stat__label,
  .stat-card__label,
  .alumni-stat__label,
  .competition-stat__label,
  .numbered-list__title,
  .numbered-list > li > h3,
  .numbered-list > li > h4,
  .site-footer__col-title,
  .value-card__title,
  .values-card__title,
  .value__title,
  .cat-card__title,
  .fr-card__title,
  .pillar-card__title,
  .inside-cst__tag {
    min-height: 0;
  }
}


/* ============================================================
   LAYOUT POLISH
   Specific alignment / spacing fixes applied site-wide.
   ============================================================ */

/* ---------- band-nav (the "In This Section" submenu) ---------- */
/* Center the whole submenu strip rather than left-aligning the label
   and stretching the list across the full width. Achieved by:
   1) auto-sizing both columns
   2) centring the grid via justify-content
   3) ensuring the list itself centers when there's room */
.band-nav__inner {
  grid-template-columns: auto auto !important;
  justify-content: center;
}
.band-nav__list {
  justify-content: center;
}

/* ------------------------------------------------------------------
   MOBILE / NARROW SCREENS — shrink to fit, never clip, never wrap.
   The strip drops to a single centred column (label over links).
   The links row must:
     - stay on ONE line (no wrapping into a second stripe),
     - SHRINK its padding + type so the items fit the screen width,
     - only fall back to horizontal scrolling on very narrow screens,
       and when it does, start at the left edge (flex-start) so the
       first and last items are always reachable - NOT centred, which
       clips both ends and is the bug this replaces.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .band-nav__inner {
    grid-template-columns: 1fr !important;
    justify-content: stretch;
  }
  .band-nav__label {
    text-align: center;
  }
  /* Let the items shrink to share the available width evenly, on one
     line. flex-start (not center) guarantees no left-edge clipping if
     content ever exceeds the width and scrolling kicks in. */
  .band-nav__list {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
  }
  /* The base stylesheet paints a 40px fade on the right edge as a
     "more to scroll" hint. Now that the strip shrinks to fit on one
     line, that cue is misleading (it veils the last item on pages that
     fit completely). Remove it; on the rare page long enough to scroll,
     the row scrolls cleanly from the left with both ends reachable. */
  .band-nav::after {
    display: none !important;
  }
  .band-nav__link {
    flex: 1 1 auto;          /* size to content, sharing leftover space ... */
    min-width: 0;            /* ... and allow shrinking so the row fits the screen */
    align-items: center;
    text-align: center;
    padding-left: clamp(6px, 2.4vw, 22px);
    padding-right: clamp(6px, 2.4vw, 22px);
  }
  .band-nav__link-title {
    font-size: clamp(11px, 3vw, 15px);  /* auto-adjust to screen size */
    white-space: nowrap;
    line-height: 1.2;
  }
}

/* Very narrow phones: shrink type a touch more so even the longest
   strips (e.g. six items) stay on one line and fit the width without
   needing a scroll. If a label is genuinely too long to fit, the row
   scrolls cleanly from the left edge - both ends remain reachable,
   never clipped on the left like the old centred layout. */
@media (max-width: 480px) {
  .band-nav__link {
    padding-left: clamp(4px, 1.4vw, 12px);
    padding-right: clamp(4px, 1.4vw, 12px);
  }
  .band-nav__link-title {
    font-size: clamp(10px, 2.5vw, 13px);
  }
}


/* ---------- Hero divider line (page-hero stats) ----------
   The 1px border-left between the hero title block and the stats
   block reads like a "crack" because it goes edge-to-edge with hard
   stops. Replace it with a gradient line that fades into the top
   and bottom, keeping the visual separation while removing the
   crack appearance. */
.page-hero__stats {
  border-left: none !important;
  /* The background creates a single vertical line at left edge that
     fades in at top and out at bottom. */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 248, 230, 0)   0%,
    rgba(255, 248, 230, 0.30) 22%,
    rgba(255, 248, 230, 0.30) 78%,
    rgba(255, 248, 230, 0)   100%
  );
  background-size: 1px 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

/* On tablet the divider becomes a top border (between stacked rows)
   — apply the same fade treatment horizontally. */
@media (max-width: 1100px) {
  .page-hero__stats {
    border-top: none !important;
    background-image: linear-gradient(
      to right,
      rgba(255, 248, 230, 0)   0%,
      rgba(255, 248, 230, 0.30) 22%,
      rgba(255, 248, 230, 0.30) 78%,
      rgba(255, 248, 230, 0)   100%
    );
    background-size: 100% 1px;
    background-position: center top;
  }
}


/* ---------- Unified spotlight closing statement ----------
   The academics page closing quote sets the reference: centred,
   italic serif, with horizontal lines top and bottom. This block
   standardises every other spotlight__close to match. Also widens
   the container slightly so long lines (like the academics quote)
   don't break "teachers." onto its own line. */
.spotlight__close,
.love-learning__close {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: clamp(36px, 4vw, 64px) clamp(20px, 3vw, 60px);
  border-top: 1px solid rgba(255, 248, 230, 0.22);
  border-bottom: 1px solid rgba(255, 248, 230, 0.22);
}

/* Closing TEXT: italic serif, cream, with red em — matches the
   academics page treatment exactly. Upper-bound is tightened so the
   longest reference quote ("The purpose of education...") fits on
   one visual line within the 1080px container. */
.spotlight__close-text,
.love-learning__close-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.5;
  color: var(--cst-cream);
  opacity: 0.92;
  margin: 0;
  text-align: center;
}
.spotlight__close-text em,
.love-learning__close-text em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cst-red);
  opacity: 1;
  font-weight: 400;
}

/* The home-page closing block is button-only (no text) — keep the
   borders OFF so the button sits cleanly in its space. */
.spotlight__close:has(> .spotlight__close-actions:only-child) {
  border-top: none;
  border-bottom: none;
  padding: clamp(20px, 3vw, 40px) 0 0 0;
}


/* ---------- Floating side-nav (legacy) ----------
   The vertical floating side-nav that appears on scroll on the
   academics and admissions pages is redundant now that every page
   has the horizontal "In This Section" submenu (band-nav) at the
   top. Hide it everywhere — the markup stays for legacy reasons
   but is never rendered. */
.side-nav,
nav.side-nav {
  display: none !important;
}


/* ---------- Admissions slim CTA sections ----------
   These four sections (Documents, NS Pathway, Calendar, FAQ) only
   contain a header + button — they're entry points into drawers.
   Without a min-height they render much shorter than the
   surrounding content-rich sections, which breaks the page rhythm.
   Pad them to viewport height so the page reads consistently. */
#documents,
#ns-pathway,
#calendar.section--cream,
#calendar.section--ink,
#faq.section--ink,
#faq.section--cream {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Slim-CTA sections only have a single intro block; nudge it tighter
   to feel intentional rather than floating in a void. */
#documents .section-intro,
#ns-pathway .section-intro,
#calendar.section--cream .section-intro,
#calendar.section--ink .section-intro,
#faq.section--ink .section-intro,
#faq.section--cream .section-intro {
  margin-top: 0;
  margin-bottom: 0;
}

/* On short viewports (laptops), don't go full-screen — keeps the
   page from feeling padded with empty space. */
@media (max-height: 720px) {
  #documents,
  #ns-pathway,
  #calendar.section--cream,
  #calendar.section--ink,
  #faq.section--ink,
  #faq.section--cream {
    min-height: 0;
    padding-top: clamp(80px, 9vh, 120px);
    padding-bottom: clamp(80px, 9vh, 120px);
  }
}


/* ---------- Contact-page map link overlap ----------
   .feature-trio__item uses a 2-row subgrid (title + body). When an
   item has a THIRD child (like the .map-link on the contact page's
   Campus Address card), that third child gets placed into the body
   row, overlapping the paragraph text. Give such items a third
   auto-row at the bottom for the link/CTA, and provide the missing
   .map-link visual styling so the link reads as a button. */

/* Items that have a map-link as a third child get an extra row */
.feature-trio__item:has(> .map-link) {
  grid-template-rows: subgrid;
  grid-row: span 3;
}
/* And the parent trio adds a third row to host them. The body row
   uses auto (not 1fr) so the body doesn't stretch — that would push
   the map-link far below the address text. The trio itself still
   reserves enough space because subgrid items share row heights. */
.feature-trio:has(.feature-trio__item > .map-link) {
  grid-template-rows: auto auto auto;
}

/* Map-link styling (was only defined inside .assessment-card). Mirror
   the assessment-card treatment so the link looks like an outline pill
   in the trio context too. */
.feature-trio__item > .map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--cst-red);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cst-red);
  text-decoration: none;
  background: transparent;
  align-self: flex-start;
  width: fit-content;
  transition: background var(--t-fast, 160ms) ease,
              border-color var(--t-fast, 160ms) ease,
              color var(--t-fast, 160ms) ease,
              transform var(--t-fast, 160ms) ease;
}
.feature-trio__item > .map-link:hover {
  background: var(--cst-red);
  color: var(--cst-cream);
  transform: translateY(-1px);
  text-decoration: none;
}
.feature-trio__item > .map-link .map-link__icon {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0;
}


/* ---------- Spotlight (blue) sections fit one screen ----------
   The dark-navy editorial spotlight sections currently overflow one
   viewport on typical desktop screens (~900px viewports vs ~1100px
   spotlight content). Tighten padding and gaps so the section fits
   within 100vh while still feeling generous.

   Strategy:
   • Set min-height: 100vh so the section ALWAYS occupies a full
     screen visually.
   • Reduce vertical padding and head-to-banner gaps slightly.
   • On very tall screens (>900px) the natural padding takes over.
   • On short screens (<700px), allow it to overflow naturally — we
     don't want content cut off. */

.spotlight {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Tighter top/bottom padding — was clamp(96, 10vw, 160). */
  padding-top:    clamp(64px, 7vw, 110px);
  padding-bottom: clamp(64px, 7vw, 110px);
}
.spotlight__inner {
  width: 100%;
}

/* Shrink the gap between the head and the rest a touch */
.spotlight__head {
  margin-bottom: clamp(36px, 3.5vw, 60px);
}

/* And the close block padding (we added borders earlier) */
.spotlight__close,
.love-learning__close {
  padding-top:    clamp(24px, 2.6vw, 40px);
  padding-bottom: clamp(24px, 2.6vw, 40px);
}

/* On short viewports, let it flow naturally — never cut content */
@media (max-height: 720px) {
  .spotlight {
    min-height: 0;
    padding-top:    clamp(56px, 6vw, 80px);
    padding-bottom: clamp(56px, 6vw, 80px);
  }
}


/* ============================================================
   DRAWER -> MODAL  (map and language)
   These two drawers are now presented as centred modal dialogs
   rather than right-slide drawers. They use the same JS triggers
   (data-trigger=lang-drawer / map-drawer) and the same .is-open
   class — only the visual presentation changes via these
   overrides. Other drawers (faculty, FAQ, enquiry, apply, etc.)
   keep the drawer behaviour. */

#lang-drawer,
#map-drawer {
  /* Centre on the viewport instead of pinning to the right edge */
  top: 50%;
  right: auto;
  left: 50%;
  height: auto;
  max-height: min(86vh, 760px);
  width: min(560px, calc(100vw - 32px));

  /* Modal feel: rounded corners, soft shadow, no edge-to-edge */
  border-radius: 6px;
  box-shadow: 0 32px 80px rgba(11, 22, 56, 0.32),
              0 6px 20px  rgba(11, 22, 56, 0.16);

  /* Replace the slide-in transform with a fade + scale */
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  /* CRITICAL: without this, the invisible (opacity 0) modal still
     intercepts clicks on whatever is "underneath" it on the page
     (footer links etc.). Only when .is-open should it catch clicks. */
  pointer-events: none;
  transition: transform 240ms var(--ease, cubic-bezier(0.32, 0.72, 0.24, 1.0)),
              opacity   200ms var(--ease, cubic-bezier(0.32, 0.72, 0.24, 1.0));

  /* Ensure long content scrolls inside the modal instead of off-screen */
  overflow: hidden;
}

#lang-drawer.is-open,
#map-drawer.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Language modal: widen for more breathing room and refined design */
#lang-drawer {
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
}

/* Map modal: wider so the embedded map has room to breathe */
#map-drawer {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
}

/* The map modal's body needs to remain scrollable if content overflows */
#map-drawer .drawer__body {
  max-height: inherit;
  overflow-y: auto;
}

/* Language modal: scrollable body if all 3 language options don't fit */
#lang-drawer .lang-drawer__body {
  overflow-y: auto;
  max-height: 100%;
}

/* Mobile: full-width with small inset, centred near the top so it
   doesn't get crowded by mobile browser chrome */
@media (max-width: 600px) {
  #lang-drawer,
  #map-drawer {
    width: calc(100vw - 24px);
    max-height: 86vh;
  }
}

/* Make sure the close button stays visible above scrolling content */
#lang-drawer .drawer__close,
#map-drawer .drawer__close {
  z-index: 20;
}


/* Ensure the language modal's body fills the available height so
   overflow-y: auto actually triggers when content exceeds height */
#lang-drawer {
  display: flex;
  flex-direction: column;
}
#lang-drawer .lang-drawer__head {
  flex: 0 0 auto;
}
#lang-drawer .lang-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
}


/* ---------- Footer heading tags ----------
   The footer columns use <h3> tags but the original CSS only styles
   <h4>. Apply the same compact mono treatment to h3 inside the
   footer columns so the headings look consistent. */
.site-footer .site-footer__grid h3,
.site-footer .site-footer__grid h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cst-navy);
  font-weight: 700;
  margin: 0 0 24px 0;
}


/* ============================================================
   LANGUAGE MODAL — REFINED DESIGN
   The original was dense: name + native + badge + body + 3-line
   contact list + button, all stacked tightly. The refined treatment
   gives generous whitespace, downplays the "Live" language (it's
   what the user is reading already) and emphasizes the action on
   the languages they CAN switch to.
   ============================================================ */

/* Head: more generous padding + tighter typography */
#lang-drawer .lang-drawer__head {
  padding: 36px clamp(28px, 3vw, 44px) 24px;
  border-bottom: 1px solid var(--cst-line-light);
  background: linear-gradient(180deg, rgba(245, 240, 230, 0.55) 0%, transparent 100%);
}
#lang-drawer .lang-drawer__chapter {
  font-size: 10px;
  letter-spacing: 0.28em;
  margin-bottom: 14px;
}
#lang-drawer .lang-drawer__title {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
}

/* Body: more padding, generous gap between options */
#lang-drawer .lang-drawer__body {
  padding: 28px clamp(28px, 3vw, 44px) 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each option: a soft card with hover state, no hard dividers
   (the gap + subtle background separates them). */
#lang-drawer .lang-option {
  margin: 0;
  padding: 22px 22px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px;
  transition: background 200ms ease, border-color 200ms ease;
}
#lang-drawer .lang-option:not(.lang-option--current):hover {
  background: rgba(11, 22, 56, 0.03);
  border-color: var(--cst-line-light);
}
#lang-drawer .lang-option:last-child {
  padding-bottom: 22px;
  margin-bottom: 0;
}

/* The CURRENT language gets a quiet, low-key treatment — it's not
   a clickable option, just a status indicator. Tinted background,
   no hover, no action affordance. */
#lang-drawer .lang-option--current {
  background: rgba(192, 30, 45, 0.04);
  border: 1px solid rgba(192, 30, 45, 0.12);
}

/* Header row: name on the left, badge on the right — restyled. */
#lang-drawer .lang-option__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#lang-drawer .lang-option__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.01em;
}
#lang-drawer .lang-option__name-native {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--cst-graphite-2);
  font-weight: 400;
  margin-left: 10px;
  font-size: 17px;
  opacity: 0.85;
}

/* Refined badges */
#lang-drawer .lang-option__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
#lang-drawer .lang-option__badge--live {
  background: rgba(192, 30, 45, 0.1);
  color: var(--cst-red);
}
#lang-drawer .lang-option__badge--soon {
  background: rgba(11, 22, 56, 0.05);
  color: var(--cst-graphite-2);
  border: 1px solid rgba(11, 22, 56, 0.08);
}

/* Body text: smaller, more relaxed line-height, slightly softer color */
#lang-drawer .lang-option__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cst-graphite-2);
  margin: 0 0 14px 0;
}

/* Contact details: compact inline-style block with subtle separator
   between items. Less prominent than the old 3-line list. */
#lang-drawer .lang-option__contact {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--cst-graphite-2);
  margin: 0 0 14px 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(11, 22, 56, 0.10);
}
#lang-drawer .lang-option__contact a {
  color: var(--cst-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 30, 45, 0.4);
  transition: border-color 160ms ease;
}
#lang-drawer .lang-option__contact a:hover {
  border-bottom-color: var(--cst-red);
  text-decoration: none;
}

/* Action button: refined pill, sits at the bottom of each option */
#lang-drawer .lang-option__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cst-red);
  text-decoration: none;
  border: 1px solid var(--cst-red);
  padding: 11px 20px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
#lang-drawer .lang-option__action:hover {
  background: var(--cst-red);
  color: var(--cst-cream);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Quiet "you are here" marker for the current language */
#lang-drawer .lang-option__current-marker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cst-red);
  margin-top: 4px;
  font-weight: 600;
  opacity: 0.85;
}

/* Mobile: tighter padding so it doesn't feel too padded on small screens */
@media (max-width: 600px) {
  #lang-drawer .lang-drawer__head {
    padding: 28px 22px 18px;
  }
  #lang-drawer .lang-drawer__body {
    padding: 20px 18px 24px;
  }
  #lang-drawer .lang-option {
    padding: 18px 16px;
  }
  #lang-drawer .lang-option__name {
    font-size: 19px;
  }
  #lang-drawer .lang-option__name-native {
    font-size: 15px;
    margin-left: 6px;
  }
}


/* ============================================================
   ACCESSIBILITY UTILITY
   .sr-only — visually hide content but keep it for screen readers.
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ---------- Footer button-as-link (lang trigger) ----------
   The lang-drawer trigger in the footer is semantically a button
   but should look identical to the surrounding <a> links. */
.site-footer__textlink {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--cst-graphite-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
  font-weight: 400;
  letter-spacing: inherit;
}
.site-footer__textlink:hover { color: var(--cst-red); }


/* ---------- Reveal stagger via :nth-child ----------
   Replaces ad-hoc inline transition-delay styles on .reveal elements
   inside common grids. The inline styles still work where present;
   these rules give consistent default staggering everywhere else. */
.stat-grid .stat.reveal:nth-child(2)        { transition-delay: 0.10s; }
.stat-grid .stat.reveal:nth-child(3)        { transition-delay: 0.20s; }
.stat-grid .stat.reveal:nth-child(4)        { transition-delay: 0.30s; }

.program-grid .card-img.reveal:nth-child(2) { transition-delay: 0.10s; }
.program-grid .card-img.reveal:nth-child(3) { transition-delay: 0.20s; }
.program-grid .card-img.reveal:nth-child(4) { transition-delay: 0.30s; }

.inside-cst__grid .inside-cst__card.reveal:nth-child(2) { transition-delay: 0.10s; }
.inside-cst__grid .inside-cst__card.reveal:nth-child(3) { transition-delay: 0.20s; }
.inside-cst__grid .inside-cst__card.reveal:nth-child(4) { transition-delay: 0.30s; }
.inside-cst__grid .inside-cst__card.reveal:nth-child(5) { transition-delay: 0.40s; }


/* ---------- Leadership grid (about page) ----------
   Three leadership tiles in a constrained 3-column grid. Replaces
   inline grid-template-columns + max-width styles. */
.faculty-grid-flat--leadership {
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .faculty-grid-flat--leadership {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}


/* ---------- About-page reveal stagger ----------
   Replaces ad-hoc inline transition-delay on these grids. */
.feature-grid .feature-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.feature-grid .feature-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.feature-grid .feature-card.reveal:nth-child(4) { transition-delay: 0.24s; }

.faculty-grid-flat .faculty-tile.reveal:nth-child(2) { transition-delay: 0.08s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(3) { transition-delay: 0.16s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(4) { transition-delay: 0.24s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(5) { transition-delay: 0.32s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(6) { transition-delay: 0.40s; }

.accreditation-row .accreditation-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.accreditation-row .accreditation-card.reveal:nth-child(3) { transition-delay: 0.16s; }

.partner-wall .partner-logo.reveal:nth-child(2) { transition-delay: 0.04s; }
.partner-wall .partner-logo.reveal:nth-child(3) { transition-delay: 0.08s; }
.partner-wall .partner-logo.reveal:nth-child(4) { transition-delay: 0.12s; }
.partner-wall .partner-logo.reveal:nth-child(5) { transition-delay: 0.16s; }
.partner-wall .partner-logo.reveal:nth-child(6) { transition-delay: 0.20s; }
.partner-wall .partner-logo.reveal:nth-child(7) { transition-delay: 0.24s; }
.partner-wall .partner-logo.reveal:nth-child(8) { transition-delay: 0.28s; }


/* ---------- Partner-logo fallback treatment ----------
   When a partner logo image is missing, the fallback span shows the
   partner name in the mark slot — duplicating the meta caption
   below. Give it a softer, less-emphatic treatment so it reads as
   a placeholder mark rather than competing copy. */
.partner-logo__fallback {
  opacity: 0.45;
  font-style: italic;
  font-weight: 400;
}


/* ---------- Senior-feature second subjects title ----------
   The second subjects subtitle ("Future-Ready Senior Courses")
   sits below the NS credit course list and needs a gap from the
   list above. Replaces an inline style="margin-top:28px;". */
.senior-feature__subjects-title--second {
  margin-top: 28px;
}


/* ---------- Admissions reveal stagger ---------- */
.process-list .process-step.reveal:nth-child(2) { transition-delay: 0.08s; }
.process-list .process-step.reveal:nth-child(3) { transition-delay: 0.16s; }
.process-list .process-step.reveal:nth-child(4) { transition-delay: 0.24s; }
.process-list .process-step.reveal:nth-child(5) { transition-delay: 0.32s; }

/* Entry-points feature-grid already covered by .feature-grid rules added earlier */


/* ---------- Centred section-intro for slim CTA sections ----------
   Replaces repeated inline style="text-align:center;max-width:900px;
   margin-left:auto;margin-right:auto;" patterns on admissions slim
   sections (Documents, NS Pathway, Calendar, FAQ). */
.section-intro--centered {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.section-intro--centered--narrow {
  max-width: 720px;
}
.section-intro--centered .chapter-mark {
  justify-content: center;
}
.section-intro--centered .section-header__sub {
  margin-top: 18px;
}

/* ---------- Process list action row ----------
   The button row below .process-list — replaces inline
   style="margin-top:56px". */
.process-list__actions {
  margin-top: 56px;
}

/* ---------- Open House CTA row ----------
   The button row inside #open-house — replaces inline
   style="margin-top:48px;justify-content:center;" */
.open-house-card__actions {
  margin-top: 48px;
  justify-content: center;
}

/* ---------- Bank transfer details list ----------
   The mono-style details inside the bank transfer card —
   replaces inline style="font-family:var(--font-mono);font-size:13px;" */
.apply-drawer__card-list--mono {
  font-family: var(--font-mono);
  font-size: 13px;
}


/* ---------- Honeypot field ----------
   Hidden from sighted users and assistive tech but present in DOM
   so bots will fill it. JS aborts submission when filled. */
.apply-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ---------- Faculty/TA/Admin grid reveal stagger ----------
   Large grids (27 faculty, 21 admin, 10 TA) — the previous inline
   transition-delays staggered in increments of 0.04-0.05s with
   floating-point rounding glitches. These nth-child rules give
   clean, consistent values up to 28. Beyond 28, items reveal with
   the last-defined delay; acceptable since they would be off-screen
   when initially loaded. */
.faculty-grid-flat .faculty-tile.reveal:nth-child(2)  { transition-delay: 0.05s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(3)  { transition-delay: 0.10s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(4)  { transition-delay: 0.15s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(5)  { transition-delay: 0.20s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(6)  { transition-delay: 0.25s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(7)  { transition-delay: 0.30s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(8)  { transition-delay: 0.35s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(9)  { transition-delay: 0.40s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(10) { transition-delay: 0.45s; }
.faculty-grid-flat .faculty-tile.reveal:nth-child(n+11) { transition-delay: 0.50s; }


/* ---------- Alumni profiles "coming soon" placeholder ----------
   When real profile data isn't available yet, this block sits in
   place of the profile cards. The real cards live inside a
   <template id="alumni-profiles-template"> below, ready to be
   uncommented when students confirm. */
.alumni-profiles--coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 48px 24px;
  text-align: center;
}
.alumni-profiles__placeholder {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cst-cream);
  max-width: 680px;
  margin: 0;
  font-style: italic;
  opacity: 0.85;
}


/* ---------- Recognition archive grid + stars grid reveal stagger ----------
   The recognition page has two grids: the EOTM archive (11 cards) and
   the CST Stars grid (4 cards). Inline transition-delays were used
   originally; these nth-child rules give the same staggered effect
   without per-element inline styles. */
.recognition-archive-grid > .reveal:nth-child(2)  { transition-delay: 0.05s; }
.recognition-archive-grid > .reveal:nth-child(3)  { transition-delay: 0.10s; }
.recognition-archive-grid > .reveal:nth-child(4)  { transition-delay: 0.00s; }
.recognition-archive-grid > .reveal:nth-child(5)  { transition-delay: 0.05s; }
.recognition-archive-grid > .reveal:nth-child(6)  { transition-delay: 0.10s; }
.recognition-archive-grid > .reveal:nth-child(7)  { transition-delay: 0.00s; }
.recognition-archive-grid > .reveal:nth-child(8)  { transition-delay: 0.05s; }
.recognition-archive-grid > .reveal:nth-child(9)  { transition-delay: 0.10s; }
.recognition-archive-grid > .reveal:nth-child(10) { transition-delay: 0.00s; }
.recognition-archive-grid > .reveal:nth-child(11) { transition-delay: 0.05s; }
.recognition-stars-grid > .reveal:nth-child(2)    { transition-delay: 0.08s; }
.recognition-stars-grid > .reveal:nth-child(3)    { transition-delay: 0.16s; }
.recognition-stars-grid > .reveal:nth-child(4)    { transition-delay: 0.24s; }


/* ---------- Annual Awards grid (Aspire-Strive-Achieve) reveal stagger ----------
   Three cards. Inline transition-delays previously gave 0/0.08/0.16s stagger. */
.annual-awards-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.annual-awards-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }


/* ---------- Announcement grid (news featured row) reveal stagger ----------
   3 featured news cards. Inline transition-delays previously gave 0/0.06/0.12s. */
.announcement-grid--featured > .reveal:nth-child(2) { transition-delay: 0.06s; }
.announcement-grid--featured > .reveal:nth-child(3) { transition-delay: 0.12s; }


/* ---------- Careers page: vacancy grid + process list reveal stagger ----------
   Vacancy cards (3): 0/0.06/0.12s. Process steps (4): 0/0.08/0.16/0.24s. */
.vacancy-grid > .reveal:nth-child(2) { transition-delay: 0.06s; }
.vacancy-grid > .reveal:nth-child(3) { transition-delay: 0.12s; }
.process-list .process-step:nth-child(2) { transition-delay: 0.08s; }
.process-list .process-step:nth-child(3) { transition-delay: 0.16s; }
.process-list .process-step:nth-child(4) { transition-delay: 0.24s; }


/* ---------- Careers page: CTA alt-line styling (was inline) ---------- */
.cta-section__alt--email {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cst-graphite-2);
}
.cta-section__alt--email a {
  color: var(--cst-navy);
  text-decoration: underline;
}


/* ---------- Honeypot field (anti-bot, visually hidden but in DOM) ----------
   Used in oh-form (contact, open-house) and apply forms. */
.oh-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ---------- Narrow form container (contact page) ---------- */
.container.container--narrow-form { max-width: 760px; }


/* ---------- Narrow page-hero lede (Strive, Aspire) ---------- */
.page-hero__lede--narrow { max-width: 720px; }


/* ---------- Magazine archive grid reveal stagger (Strive, Aspire) ----------
   Cards step at 0.04s. Year sections separate, so each year resets at 0. */
.magazine-archive-grid > .reveal:nth-child(2) { transition-delay: 0.04s; }
.magazine-archive-grid > .reveal:nth-child(3) { transition-delay: 0.08s; }
.magazine-archive-grid > .reveal:nth-child(4) { transition-delay: 0.12s; }
.magazine-archive-grid > .reveal:nth-child(5) { transition-delay: 0.16s; }
.magazine-archive-grid > .reveal:nth-child(6) { transition-delay: 0.20s; }
.magazine-archive-grid > .reveal:nth-child(7) { transition-delay: 0.24s; }
.magazine-archive-grid > .reveal:nth-child(8) { transition-delay: 0.28s; }
.magazine-archive-grid > .reveal:nth-child(9) { transition-delay: 0.32s; }
.magazine-archive-grid > .reveal:nth-child(10) { transition-delay: 0.36s; }
.magazine-archive-grid > .reveal:nth-child(11) { transition-delay: 0.40s; }
.magazine-archive-grid > .reveal:nth-child(12) { transition-delay: 0.44s; }


/* =============================================================
   PARENT PORTAL PAGE — mobile-app announcement,
   store buttons, tab grid, screenshot row.
   ============================================================= */

/* ---------- Mobile-only announcement card ---------- */
.portal-announce {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--cst-paper, #ffffff);
  border: 1px solid rgba(10, 35, 66, 0.08);
  border-radius: 16px;
  padding: clamp(36px, 6vh, 56px) clamp(28px, 5vw, 56px);
  box-shadow: 0 4px 24px rgba(10, 35, 66, 0.04);
}
.portal-announce__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 72px;
  color: var(--cst-red);
  margin-bottom: 20px;
}
.portal-announce__icon svg { width: 100%; height: 100%; display: block; }
.portal-announce__chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cst-red);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.portal-announce__chapter::before,
.portal-announce__chapter::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--cst-red);
}
.portal-announce__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.portal-announce__title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.portal-announce__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cst-graphite-2);
  max-width: 580px;
  margin: 0 auto;
}

/* ---------- Store buttons ---------- */
.store-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 44px auto 0;
}
.store-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--cst-navy, #0B1638);
  color: #ffffff;
  padding: 16px 28px 16px 22px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  min-width: 220px;
  /* Coming-soon state — feels approachable but not clickable */
  opacity: 0.85;
  cursor: not-allowed;
}
.store-button:hover { opacity: 0.95; transform: translateY(-1px); }
.store-button__badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--cst-red, #C73E3A);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.store-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.store-button__icon svg { width: 100%; height: 100%; display: block; }
.store-button--apple .store-button__icon { color: #ffffff; }
.store-button__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.store-button__line1 {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: 3px;
}
.store-button__line2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.store-buttons__note {
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--cst-graphite-2);
  margin: 28px auto 0;
  max-width: 540px;
  line-height: 1.55;
}

/* ---------- Five tabs grid ---------- */
.portal-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.portal-tab {
  background: var(--cst-paper, #ffffff);
  border: 1px solid rgba(10, 35, 66, 0.08);
  border-radius: 12px;
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portal-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 35, 66, 0.06);
}
.portal-tab__icon {
  width: 36px;
  height: 36px;
  color: var(--cst-red);
  margin-bottom: 16px;
}
.portal-tab__icon svg { width: 100%; height: 100%; display: block; }
.portal-tab__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.portal-tab__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cst-graphite-2);
  margin: 0;
}

/* ---------- Screenshot row (3 phone frames) ---------- */
.portal-screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 48px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.portal-screen {
  margin: 0;
  text-align: center;
}
/* Phone-frame wrapper: stays visible whether or not the screenshot has
   been supplied. When the <img> loads it sits flush inside the frame's
   rounded corners; when it 404s the frame becomes a visible placeholder
   carrying the CST monogram pattern and an italic caption (via the
   .img-missing[data-placeholder-label] system used elsewhere on the
   site). Aspect ratio matches a tall portrait phone (9:19.5). */
.portal-screen__frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto 18px;
  border-radius: 24px;
  border: 1px solid rgba(10, 35, 66, 0.1);
  box-shadow: 0 12px 36px rgba(10, 35, 66, 0.08);
  overflow: hidden;
  background: var(--cst-cream);
}
.portal-screen__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
/* When onerror has hidden the broken <img>, paint the frame as a phone-
   shaped placeholder using the existing site-wide .img-missing visual
   language (subtle gradient + CST monogram). The `is-empty` class is
   added by onerror; we also style with .img-missing for consistency. */
.portal-screen__frame.is-empty {
  background:
    radial-gradient(ellipse at top left, rgba(10, 35, 66, 0.04) 0%, transparent 60%),
    linear-gradient(135deg, #ECE4D3 0%, #DCD2BC 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 35, 66, 0.12),
              0 12px 36px rgba(10, 35, 66, 0.08);
}
.portal-screen__frame.is-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><text x='100' y='102' text-anchor='middle' font-family='Playfair Display, Georgia, serif' font-style='italic' font-weight='500' font-size='52' fill='rgba(10,35,66,0.32)' letter-spacing='1'>CST</text><text x='100' y='128' text-anchor='middle' font-family='Inter, sans-serif' font-size='8' fill='rgba(10,35,66,0.45)' letter-spacing='4' font-weight='600'>CANADIAN SCHOOL</text><text x='100' y='142' text-anchor='middle' font-family='Inter, sans-serif' font-size='8' fill='rgba(10,35,66,0.45)' letter-spacing='4' font-weight='600'>OF TASHKENT</text></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(72%, 220px) auto;
  pointer-events: none;
  z-index: 0;
}
.portal-screen__frame.is-empty[data-placeholder-label]::after {
  content: "Screenshot: " attr(data-placeholder-label);
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-family: var(--font-italic, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(10, 35, 66, 0.55);
  text-align: center;
  max-width: 80%;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}
.portal-screen__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cst-graphite-2);
}

/* ---------- CTA alt-line note ---------- */
.cta-section__alt-line {
  margin-top: 20px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--cst-graphite-2);
  line-height: 1.55;
}

/* ---------- Stack store buttons on narrow screens ---------- */
@media (max-width: 540px) {
  .store-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .store-button { min-width: 240px; width: 100%; max-width: 280px; }
}


/* =============================================================
   STAFF LOGIN PAGE — two-column hero (form left, brand panel right).
   Stacks to single column under 900px.
   ============================================================= */

.staff-login {
  background: var(--cst-cream, #F7F3EC);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: stretch;
}
.staff-login__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  align-items: stretch;
}

/* ---------- Brand panel (right column) ---------- */
.staff-login__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  padding: clamp(48px, 8vh, 96px) clamp(40px, 6vw, 80px);
  color: #ffffff;
  order: 2; /* right side on desktop */
}
.staff-login__brand-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cst-navy, #0B1638);
}
.staff-login__brand-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.staff-login__brand-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 22, 56, 0.85) 0%,
    rgba(11, 22, 56, 0.5) 50%,
    rgba(199, 62, 58, 0.4) 100%
  );
  z-index: 1;
}
.staff-login__brand-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
}
.staff-login__brand-mark {
  margin-bottom: 36px;
}
.staff-login__brand-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1); /* logo white */
  opacity: 0.95;
}
.staff-login__brand-chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.staff-login__brand-chapter::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.staff-login__brand-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.staff-login__brand-title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.staff-login__brand-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ---------- Form panel (left column) ---------- */
.staff-login__form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 8vh, 96px) clamp(28px, 5vw, 72px);
  background: var(--cst-cream, #F7F3EC);
  order: 1; /* left side on desktop */
}

/* Pre-launch banner */
.staff-login__notice {
  display: flex;
  gap: 14px;
  background: rgba(199, 62, 58, 0.07);
  border-left: 3px solid var(--cst-red, #C73E3A);
  padding: 16px 18px;
  border-radius: 6px;
  margin-bottom: 32px;
}
.staff-login__notice-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--cst-red);
  margin-top: 1px;
}
.staff-login__notice-icon svg { width: 100%; height: 100%; display: block; }
.staff-login__notice-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cst-graphite-1, #2A323F);
}
.staff-login__notice-text strong {
  color: var(--cst-red, #C73E3A);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* Form head */
.staff-login__form-head { margin-bottom: 32px; }
.staff-login__chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cst-red);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.staff-login__chapter::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--cst-red);
}
.staff-login__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.staff-login__title em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.staff-login__sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cst-graphite-2, #6B7280);
  margin: 0;
}

/* Form fields */
.staff-login__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 440px;
}
.staff-login__field { display: flex; flex-direction: column; gap: 8px; }
.staff-login__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.staff-login__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cst-graphite-1, #2A323F);
  font-weight: 500;
}
.staff-login__forgot {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cst-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.staff-login__forgot:hover { color: var(--cst-navy); }
.staff-login__input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(10, 35, 66, 0.18);
  border-radius: 6px;
  color: var(--cst-navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.staff-login__input:focus {
  outline: none;
  border-color: var(--cst-red);
  box-shadow: 0 0 0 3px rgba(199, 62, 58, 0.12);
}
.staff-login__input:disabled {
  background: rgba(10, 35, 66, 0.04);
  color: rgba(10, 35, 66, 0.5);
  cursor: not-allowed;
}
.staff-login__input::placeholder { color: rgba(10, 35, 66, 0.35); }

/* Password field with show/hide toggle */
.staff-login__password-wrap { position: relative; }
.staff-login__password-wrap .staff-login__input { padding-right: 44px; width: 100%; }
.staff-login__password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--cst-graphite-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.staff-login__password-toggle svg { width: 18px; height: 18px; }
.staff-login__password-toggle:disabled { cursor: not-allowed; opacity: 0.4; }

/* Remember me */
.staff-login__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cst-graphite-1);
  cursor: pointer;
}
.staff-login__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cst-red);
  cursor: pointer;
}
.staff-login__remember input[type="checkbox"]:disabled { cursor: not-allowed; }

/* Error region */
.staff-login__error {
  min-height: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--cst-red);
  line-height: 1.45;
}
.staff-login__error:not(:empty) {
  background: rgba(199, 62, 58, 0.08);
  padding: 10px 12px;
  border-radius: 4px;
}

/* Submit */
.staff-login__submit {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
}
.staff-login__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.staff-login__submit-icon {
  width: 18px;
  height: 18px;
  display: flex;
}
.staff-login__submit-icon svg { width: 100%; height: 100%; }
.staff-login__submit-label { font-weight: 600; letter-spacing: 0.01em; }

.staff-login__fineprint {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 12px;
  line-height: 1.55;
  color: var(--cst-graphite-2);
  margin: 12px 0 0;
}
.staff-login__fineprint a {
  color: var(--cst-navy);
  text-decoration: underline;
}

/* ---------- System notes (browser support, etc) ---------- */
.staff-login__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.staff-login__note {
  padding: 0 4px;
}
.staff-login__note-icon {
  width: 28px;
  height: 28px;
  color: var(--cst-red);
  margin-bottom: 14px;
}
.staff-login__note-icon svg { width: 100%; height: 100%; display: block; }
.staff-login__note-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--cst-navy);
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.staff-login__note-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cst-graphite-2);
  margin: 0;
}

/* ---------- Stack columns on narrow screens ---------- */
@media (max-width: 900px) {
  .staff-login__inner {
    grid-template-columns: 1fr;
  }
  .staff-login__brand {
    order: 1;
    min-height: 320px;
    padding: 56px 32px 48px;
    align-items: center;
    text-align: left;
  }
  .staff-login__brand-content { max-width: 560px; }
  .staff-login__form-wrap {
    order: 2;
    padding: 56px 28px 80px;
  }
  .staff-login__form { max-width: 520px; margin: 0 auto; }
  .staff-login__notice { margin-left: auto; margin-right: auto; max-width: 520px; }
  .staff-login__form-head { max-width: 520px; margin-left: auto; margin-right: auto; }
}


/* =============================================================
   DINING PAGE — modifier styles introduced on this page.
   These extend existing base classes that work on student-life
   and other pages. The base classes (numbered-list, section,
   feature-row, chapter-mark, title, quote-takeover) come from
   styles.min.css; the modifiers below are additive.
   ============================================================= */

/* ---------- Numbered list: 2 columns variant ----------
   The base numbered-list class flows in a single column;
   --cols-2 stacks pairs side by side on wide screens. */
.numbered-list--cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 36px;
}
@media (min-width: 720px) {
  .numbered-list--cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- On-dark variants ----------
   When a numbered list, chapter mark, title, or sub appears on
   the section--ink background, the type colour and the rule
   colour need to flip to read against navy. */
.section--ink .chapter-mark.chapter-mark--on-dark,
.chapter-mark--on-dark {
  color: rgba(255, 255, 255, 0.85);
}
.section--ink .chapter-mark--on-dark::before,
.section--ink .chapter-mark--on-dark::after,
.chapter-mark--on-dark::before,
.chapter-mark--on-dark::after {
  background: rgba(255, 255, 255, 0.5);
}
.title--on-dark { color: #ffffff; }
.title--on-dark em {
  /* italic display variant retains its serif treatment */
  color: rgba(255, 255, 255, 0.9);
}
.section-header__sub--on-dark { color: rgba(255, 255, 255, 0.78); }

.numbered-list--on-dark .numbered-list__num { color: var(--cst-red, #C73E3A); }
.numbered-list--on-dark .numbered-list__title { color: #ffffff; }
.numbered-list--on-dark .numbered-list__body { color: rgba(255, 255, 255, 0.78); }

/* ---------- Section footnote ----------
   Smaller note that sits below a section's main content;
   typically a clarifier or qualifying line. */
.section-footnote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cst-graphite-2, #6B7280);
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
}
.section-footnote--on-dark { color: rgba(255, 255, 255, 0.7); }

/* ---------- Quote takeover, ink variant ----------
   The base quote-takeover is cream; --ink sits on a navy section. */
.quote-takeover--ink {
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.quote-takeover__chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cst-red, #C73E3A);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.quote-takeover__chapter::before,
.quote-takeover__chapter::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--cst-red, #C73E3A);
}
.quote-takeover--ink .quote-takeover__text {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #ffffff;
  margin: 0;
}
.quote-takeover--ink .quote-takeover__text a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.quote-takeover--ink .quote-takeover__text a:hover { color: #ffffff; text-decoration-thickness: 2px; }

/* ---------- Feature row: reversed (media right, body left) ----------
   Base feature-row puts media on the left; --reverse flips it. */
.feature-row--reverse .feature-row__media { order: 2; }
.feature-row--reverse .feature-row__body { order: 1; }

/* ---------- Section: compact variant ----------
   Padding values moved to the SECTION PADDING UNIFICATION block at
   the bottom of this file. This stub kept as a placeholder for context.
   See unification block for the active values. */


/* ════════════════════════════════════════════════════════════════
   FOOTER REDESIGN PASS (May 2026)
   Edits per request:
     1. Logo +80% (was clamp 40/3.2vw/56 → now clamp 72/5.8vw/100)
     2. Language item font matches other list items exactly
     3. Brand column (col 1) stretches to match Explore column height
     4. Section headers (Explore/Admissions/Connect) use Inter, smaller
        letter-spacing — more legible than the very tight mono
     5. Globe icon removed from social row (replaced with Flickr below)
   All rules below override the minified styles.min.css because they
   come AFTER it in load order.
   ════════════════════════════════════════════════════════════════ */

/* 1. LOGO +80% — original was clamp(40px, 3.2vw, 56px) at desktop,
   72px in the dedicated rule. We bump to ~130px. */
.site-footer__logo-img {
  height: clamp(72px, 5.8vw, 100px) !important;
}

/* 2. LANGUAGE TOGGLE BUTTON inherits exact text styling.
   Original button uses default <button> styling (slightly larger
   sans-serif). Now matches the surrounding <a> tags. */
.site-footer ul .site-footer__textlink,
.site-footer__textlink {
  font-family: var(--font-body) !important;   /* match other list items */
  font-size: 13.5px !important;                /* match other list items */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--cst-graphite-2) !important;
  background: transparent !important;
  border: none !important;
  padding: 1px 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  display: inline-block !important;
  transition: color var(--t-fast) var(--ease);
}
.site-footer ul .site-footer__textlink:hover,
.site-footer__textlink:hover {
  color: var(--cst-red) !important;
}

/* 3. BRAND COLUMN: logo, contact, social — vertical stack.
   Social icons sit beneath the contact info (after the email
   address). The column stretches to match the tallest sibling
   (typically the Explore column with 7 items), and content is
   distributed so the social row sits at the bottom edge — making
   the brand column and the Explore column start and end at
   exactly the same y-coordinates.
   (Updated May 2026 — r26: contact block removed; brand column
   now centers the 2-item logo+social stack against the row
   height instead of distributing across 3 items.) */
.site-footer__grid {
  align-items: stretch !important;
}
@media (min-width: 721px) {
  /* Desktop: the brand column centers its children (logo + social)
     both vertically and horizontally within the column, so they sit
     balanced in the brand area rather than hugging the left edge.
     On mobile, the MOBILE FOOTER REDESIGN block in site-v2.css
     handles the stacked single-column centering. */
  .site-footer__brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
    gap: 18px !important;
  }
  .site-footer__brand .site-footer__logo {
    order: 1 !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .site-footer__brand .site-footer__social {
    order: 2 !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
  }
}

/* 4. EXPLORE / ADMISSIONS / CONNECT — switch to Inter for legibility.
   Slightly larger; reduce letter-spacing from 0.28-0.32em to 0.06em. */
.site-footer h3,
.site-footer h4 {
  font-family: var(--font-ui) !important;       /* Inter, the clean nav font */
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--cst-navy) !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
}
@media (max-width: 540px) {
  .site-footer h3,
  .site-footer h4 {
    font-size: 11.5px !important;
    margin-bottom: 12px !important;
  }
}

/* 5. Globe icon removal handled in HTML below.
   Flickr icon styling inherits the existing .site-footer__social a rule. */



/* ════════════════════════════════════════════════════════════════
   HERO VERTICAL SOCIAL BAR (May 2026)
   A thin, elegant vertical bar of social-media icons positioned on
   the left edge of every hero section. Designed to feel minimal and
   modern — small icons, generous spacing, subtle hover affordance.
   ════════════════════════════════════════════════════════════════ */

.hero-social-bar {
  position: absolute;
  left: clamp(16px, 1.8vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;                       /* above bg, below content */
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  /* Subtle vertical lines above and below the icons for visual anchoring */
  padding: 16px 0;
}
.hero-social-bar::before,
.hero-social-bar::after {
  content: '';
  width: 1px;
  height: 28px;
  background: rgba(245, 240, 230, 0.35);
}
.hero-social-bar::before { order: -1; }
.hero-social-bar::after  { order: 99; }

.hero-social-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.08);
  color: rgba(245, 240, 230, 0.85);
  border: 1px solid rgba(245, 240, 230, 0.18);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              color      var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform  var(--t-fast) var(--ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-social-bar__link:hover,
.hero-social-bar__link:focus-visible {
  background: var(--cst-red);
  color: var(--cst-cream);
  border-color: var(--cst-red);
  transform: translateY(-2px);
  outline: none;
}
.hero-social-bar__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(192, 30, 45, 0.32);
}
.hero-social-bar__link svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}

/* Hide on tablet/mobile — saves precious hero space where the
   header CTA is already prominent. Users still reach social via
   the footer. */
@media (max-width: 1080px) {
  .hero-social-bar { display: none; }
}

/* If the hero has very narrow horizontal padding, push the bar
   to flush left so it doesn't crowd the content. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .hero-social-bar { left: 12px; }
  .hero-social-bar__link { width: 28px; height: 28px; }
  .hero-social-bar__link svg { width: 12px; height: 12px; }
}

/* TIER 2 — COMPACT  (when sections sit close in a related sequence)
   This rule MUST come after the standard tier so that the higher specificity
   of `.section.section--compact` (2 classes) wins over `.section` (1 class)
   AND also wins over equally-specific `.section.section--cream` at the same
   specificity by appearing LATER in the file.

   Note: we also explicitly target the actual class combos used in the HTML
   (.section.section--cream.section--compact, etc.) to defeat any compound
   selector competing at the same specificity level. */
.section--compact,
.section.section--compact,
.section.section--cream.section--compact,
.section.section--ink.section--compact,
.section.section--ivory.section--compact,
.section.section--navy.section--compact {
  padding-top:    clamp(48px, 5vw, 88px) !important;
  padding-bottom: clamp(48px, 5vw, 88px) !important;
}

/* TIER 3 — FEATURE  (love-learning / quote-takeover only)

   NOTE: .spotlight is NOT in this tier. .spotlight has `min-height: 100vh`
   and is designed as a full-viewport feature moment. Its tighter padding
   (clamp(64px, 7vw, 110px), set elsewhere in this file) pairs with the
   full-screen treatment intentionally. Forcing 144px here would push
   content out of view on shorter screens. */
.love-learning,
.quote-takeover {
  padding-top:    clamp(96px, 8vw, 144px) !important;
  padding-bottom: clamp(96px, 8vw, 144px) !important;
}

/* Kill the legacy "boost" rules — they targeted sibling pairs that
   don't exist anywhere in the current HTML. Setting them back to the
   tier value ensures any future re-use stays consistent. */
.inside-cst + .section--cream {
  padding-top: clamp(80px, 6.3vw, 128px) !important;
}
.stat-block + .inside-cst {
  padding-top: clamp(80px, 6.3vw, 128px) !important;
}

/* ───── PAGE HEROES (separate rhythm, not part of section flow) ─────
   Heroes are full-bleed entry points and have their own padding logic
   that should NOT be touched by the section unification. Leaving them
   alone here for documentation. */

/* ───── PRINT — preserved as-is in styles.min.css ───── */

/* ───── CTA SECTIONS (closing band on most pages) ─────
   .cta-section was using its own --section-pad variable (60px/7vw/140px)
   which gave it a slightly different rhythm to .section (80px/6.3vw/128px).
   17 of these appear across the site, so the mismatch was widely felt.
   Unifying to the standard tier. */
.cta-section {
  padding-top:    clamp(80px, 6.3vw, 128px) !important;
  padding-bottom: clamp(80px, 6.3vw, 128px) !important;
}

/* ───── LETTER & STAT-BLOCK (other rogue rhythms) ─────
   .letter (used for the director's letter on About) was on the
   --section-pad rhythm. .stat-block had a conflicting padding-top of
   200px alongside its own padding of 112px. Both unified to standard. */
.letter {
  padding-top:    clamp(80px, 6.3vw, 128px) !important;
  padding-bottom: clamp(80px, 6.3vw, 128px) !important;
}
.stat-block {
  padding-top:    clamp(80px, 6.3vw, 128px) !important;
  padding-bottom: clamp(80px, 6.3vw, 128px) !important;
}




/* ════════════════════════════════════════════════════════════════
   STAGE-1 EDITS (May 2026)
   Task 1: Full-height section behaviour
   Task 3: Footer logo size — actually bigger this time
   Task 4: Spotlight glyph repositioned to the right edge
   ════════════════════════════════════════════════════════════════ */


/* ── TASK 1 ─────────────────────────────────────────────────────
   .hero, .spotlight, .quote-takeover all used `min-height: 100vh`.
   On mobile, 100vh leaks under the address bar; on desktop, it
   stacks under the fixed 68px header. Switch to 100dvh (dynamic
   viewport, mobile-safe) and subtract the header height so the
   section fits the *visible* viewport from the bottom of the
   header bar — consistent behaviour for all three.

   The 100dvh fallback to 100vh chain handles browsers that don't
   yet support dvh.

   MOBILE EXCEPTION (Nov 2026): On phones, the full-viewport hero
   crops landscape photos to a sliver because the box becomes
   portrait-shaped. The override below in MOBILE HERO IMAGE FIX
   shrinks the hero on ≤720px so the photo is visible.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
  .hero,
  .spotlight,
  .quote-takeover {
    /* Fallback for older browsers */
    min-height: calc(100vh - var(--header-h, 68px)) !important;
    /* Modern: dynamic viewport excluding mobile chrome */
    min-height: calc(100dvh - var(--header-h, 68px)) !important;
  }
}
@media (max-width: 720px) {
  /* Mobile: keep .spotlight and .quote-takeover full-bleed (they
     have no photo-cropping problem), but exempt .hero — handled
     by the MOBILE HERO IMAGE FIX rule lower in site-v2.css. */
  .spotlight,
  .quote-takeover {
    min-height: calc(100vh - var(--header-h, 68px)) !important;
    min-height: calc(100dvh - var(--header-h, 68px)) !important;
  }
}


/* ── TASK 3 ─────────────────────────────────────────────────────
   Footer logo size — the previous clamp(72px, 5.8vw, 100px) was
   self-defeating: the floor and ceiling were both effectively 72px
   on most viewports, so the +80% boost never rendered. Setting an
   honest, viewport-scaling clamp with a proper minimum and ceiling.

   Target sizes:
     mobile (375px wide):  ~100px
     tablet (768px wide):  ~115px
     laptop (1280px wide): ~125px
     desktop (1920px wide): ~140px
   ───────────────────────────────────────────────────────────── */
.site-footer__logo-img {
  height: clamp(100px, 7.5vw, 140px) !important;
  width: auto !important;
}


/* ── TASK 4 — REVERTED (May 21) ────────────────────────────────
   Originally moved the spotlight glyph from left to right; user
   asked to put it back on the left. Base CSS already has
   `left: 6%`, so no override needed — this block is intentionally
   empty as a reminder of the reverted change.
   ───────────────────────────────────────────────────────────── */



/* ════════════════════════════════════════════════════════════════
   STAGE-2 EDIT — bg-alternation hairline
   
   Some adjacent sections share the same background and can't be flipped
   without breaking design intent (e.g. .spotlight → .quote-takeover are
   both intentionally navy; .section--ink → .cta-section are both platinum).
   
   For these specific structural adjacencies, add a thin red hairline
   between them — a subtle but unmissable visual marker that "a new
   section begins here." Same colour as the chapter-mark accent throughout
   the site, so it reads as branding not noise.
   ════════════════════════════════════════════════════════════════ */

/* Where .section--ink is followed by .cta-section — both platinum bg */
.section.section--ink + .cta-section {
  border-top: 1px solid rgba(200, 16, 46, 0.18);
}

/* Where two intrinsic-navy sections sit adjacent (e.g. admissions: spotlight → quote-takeover) */
.spotlight + .quote-takeover,
.spotlight + .love-learning,
.spotlight + .senior-feature,
.quote-takeover + .spotlight,
.quote-takeover + .love-learning,
.quote-takeover + .senior-feature {
  border-top: 1px solid rgba(245, 240, 230, 0.12);
}

/* Catch-all: where any two .section--cream sit adjacent (shouldn't happen
   after our flips but harmless as a safety net) */
.section.section--cream + .section.section--cream {
  border-top: 1px solid rgba(10, 35, 66, 0.10);
}





/* ════════════════════════════════════════════════════════════════
   STAGE-3b — Ticker speed + logo sizes (May 2026 follow-up)
   ════════════════════════════════════════════════════════════════ */

/* ── Ticker: slow from 50s to 90s (1.8x slower) ─────────────── */
.ticker__track {
  animation: 90s linear infinite ticker-scroll !important;
}

/* ── Ticker: reduce overall height (May 21 follow-up).
   Was: padding 22px 0, font-size 12px. The ticker felt too tall
   relative to the rest of the homepage. Trim padding and shrink
   the type slightly so it reads as a delicate band, not a block. */
.ticker {
  padding: 12px 0 !important;
}
.ticker__item {
  font-size: 11px !important;
  /* Switch from ALL CAPS to sentence case — the ticker carries
     readable content (announcements, updates), not labels. Uppercase
     forces letter-by-letter decoding; mixed case reads at a glance
     as it scrolls past. Also drop tracking from 0.18em to 0.02em. */
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.ticker__dot {
  width: 4px !important;
  height: 4px !important;
}

/* ── Header nav: tightened letter-spacing (May 21 follow-up).
   Was: 0.16em — felt cramped on common laptop widths (1366, 1440)
   where the nav competes with the logo and CTA for horizontal space.
   Reduced to 0.08em for normal desktop; even tighter (0.06em) on the
   narrower 1100-1280px range where space is at its tightest.
   Uppercase is retained — fits the institutional voice of the site. */
.site-nav a {
  letter-spacing: 0.08em !important;
}
@media (min-width: 1100px) and (max-width: 1280px) {
  .site-nav a {
    letter-spacing: 0.06em !important;
  }
}

/* ── Footer logo: HALVED from prior 120-168px → 60-84px (May 2026
   follow-up). The previous size was over-prominent and unbalanced
   the footer. With the smaller logo the negative-margin pull-up
   trick is no longer needed — the visual top of the logo now
   naturally aligns with the Explore column heading. */
.site-footer__logo-img {
  height: clamp(60px, 4.5vw, 84px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.site-footer__logo {
  margin-bottom: 16px !important;
}

/* Mobile override matches the desktop ratio (was 172px → 86px). */
@media (max-width: 540px) {
  .site-footer__logo-img {
    height: 86px !important;
  }
}

/* ── Header logo: original size restored (May 21 follow-up)
   The doubled size felt too heavy. Reverting to the base
   clamp(40px, 3.2vw, 56px) which the original stylesheet uses.
   ───────────────────────────────────────────────────────────── */
.site-logo__img {
  height: clamp(40px, 3.2vw, 56px) !important;
}
@media (max-width: 1080px) {
  .site-logo__img {
    height: 40px !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   STAGE-4 — Card unification: vacancy + announcement (May 2026)
   
   Both card types represent timely items with action (job to apply
   for, news to read). They share a unified design language while
   keeping their structural difference: vacancy = no photo,
   announcement = with photo.
   
   Shared vocabulary:
   - Same red pill badge for the eyebrow tag
   - Same red hairline accent at the top of each card
   - Same monospace uppercase eyebrows (date, posted-on, etc.)
   - Same link-arrow CTA at the bottom (red mono with arrow)
   - Same hover behaviour: -3px lift, deeper shadow, scaled photo
   - Same border, radius, padding, gap rhythm
   ════════════════════════════════════════════════════════════════ */


/* ── Grid wrappers — consistent spacing ───────────────────────── */
.announcement-grid,
.vacancy-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
}


/* ── Shared card foundation ──────────────────────────────────── */
.vacancy-card,
.announcement-card {
  position: relative !important;
  background: var(--cst-cream) !important;
  border: 1px solid rgba(10, 35, 66, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform var(--t-med, 0.36s) var(--ease, ease),
              border-color var(--t-med, 0.36s) var(--ease, ease),
              box-shadow var(--t-med, 0.36s) var(--ease, ease) !important;
}

/* Red hairline accent across the very top — matches the site's
   chapter-mark and section-divider treatment. */
.vacancy-card::before,
.announcement-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0,
    var(--cst-red) 25%,
    var(--cst-red) 75%,
    transparent 100%) !important;
  opacity: 0.4 !important;
  transition: opacity var(--t-med, 0.36s) var(--ease, ease) !important;
  z-index: 3 !important;
}

.vacancy-card:hover,
.announcement-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(10, 35, 66, 0.18) !important;
  box-shadow: 0 12px 32px rgba(11, 22, 56, 0.08) !important;
}

.vacancy-card:hover::before,
.announcement-card:hover::before {
  opacity: 1 !important;
}


/* ── Announcement-card: media region ─────────────────────────── */
.announcement-card__link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  height: 100% !important;
}

.announcement-card__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: var(--cst-platinum) !important;
}

.announcement-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.7s var(--ease, ease) !important;
}

.announcement-card:hover .announcement-card__media img {
  transform: scale(1.04) !important;
}


/* ── Shared badge: red pill, mono uppercase ─────────────────── */
.vacancy-card__badge,
.announcement-card__badge {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  background: var(--cst-red) !important;
  color: var(--cst-cream) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.25) !important;
}

/* Announcement badge sits on the photo (top-left) */
.announcement-card__badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 2 !important;
}


/* ── Card body region ────────────────────────────────────────── */
.vacancy-card,
.announcement-card__body {
  padding: 24px 24px 22px !important;
}

/* Vacancy card has no photo, so its head is the top of the card.
   Pull the badge to the top with a margin-top. */
.vacancy-card {
  padding-top: 26px !important;
}

.vacancy-card__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(10, 35, 66, 0.08) !important;
}

.announcement-card__body {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ── Date / posted eyebrow ──────────────────────────────────── */
.announcement-card__date {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cst-red) !important;
  margin-bottom: 12px !important;
}


/* ── Titles: display serif, navy, italic-em in red ──────────── */
.vacancy-card__title,
.announcement-card__title {
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 1.5vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--cst-navy) !important;
  margin: 0 0 6px !important;
}

.vacancy-card__title em,
.announcement-card__title em {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  color: var(--cst-red) !important;
  font-weight: 400 !important;
}


/* ── Subtitle / context — italic small print ────────────────── */
.vacancy-card__context {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--cst-graphite-2) !important;
  margin: 0 !important;
}


/* ── Body copy: comfortable reading ──────────────────────────── */
.vacancy-card__summary,
.announcement-card__lede {
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--cst-graphite) !important;
  margin: 0 0 18px !important;
  flex-grow: 1 !important;
}


/* ── Vacancy meta: tighter, more refined ─────────────────────── */
.vacancy-card__meta {
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  background: rgba(10, 35, 66, 0.025) !important;
  border-radius: 3px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.vacancy-card__meta-row {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  gap: 10px !important;
  align-items: baseline !important;
  padding: 0 !important;
  border: none !important;
}

.vacancy-card__meta-row dt {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cst-red) !important;
  margin: 0 !important;
}

.vacancy-card__meta-row dd {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--cst-graphite) !important;
  margin: 0 !important;
}


/* ── Unified CTA: red mono link-arrow style ─────────────────── */
.vacancy-card__cta,
.announcement-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cst-red) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  transition: gap var(--t-fast, 0.18s) var(--ease, ease) !important;
}

.vacancy-card__cta::after,
.announcement-card__cta::after {
  content: "→" !important;
  display: inline-block !important;
  transition: transform var(--t-fast, 0.18s) var(--ease, ease) !important;
}

.vacancy-card:hover .vacancy-card__cta::after,
.announcement-card:hover .announcement-card__cta::after {
  transform: translateX(4px) !important;
}


/* ── Vacancy footer — wrap the CTA so it sits at bottom ─────── */
.vacancy-card__footer {
  margin-top: auto !important;
  padding-top: 4px !important;
}


/* ── Container context: ink section uses cream cards correctly */
.section--ink .vacancy-card,
.section--ink .announcement-card {
  background: var(--cst-cream) !important;
  border-color: rgba(10, 35, 66, 0.1) !important;
}

.section--ink .vacancy-card:hover,
.section--ink .announcement-card:hover {
  border-color: rgba(10, 35, 66, 0.22) !important;
}


/* ════════════════════════════════════════════════════════════════
   STAGE-5 — Recognition cards into the unified family (May 2026)
   
   Bring .recognition-stars-card and .recognition-archive-card into
   the same visual language as the unified .vacancy-card /
   .announcement-card family. They keep their content structure
   (stars: photo-above-body; archive: full-bleed photo with overlay)
   but share the unified hairline accent, hover, border, and shadow.
   ════════════════════════════════════════════════════════════════ */

/* ── Shared foundation: stars + archive get the same hover/border */
.recognition-stars-card,
.recognition-archive-card {
  position: relative !important;
  background: var(--cst-cream) !important;
  border: 1px solid rgba(10, 35, 66, 0.08) !important;
  border-radius: 4px !important;
  transition: transform var(--t-med, 0.36s) var(--ease, ease),
              border-color var(--t-med, 0.36s) var(--ease, ease),
              box-shadow var(--t-med, 0.36s) var(--ease, ease) !important;
}

/* Red hairline accent at the top — matches vacancy + announcement */
.recognition-stars-card::after,
.recognition-archive-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0,
    var(--cst-red) 25%,
    var(--cst-red) 75%,
    transparent 100%) !important;
  opacity: 0.4 !important;
  transition: opacity var(--t-med, 0.36s) var(--ease, ease) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.recognition-stars-card:hover,
.recognition-archive-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(10, 35, 66, 0.18) !important;
  box-shadow: 0 12px 32px rgba(11, 22, 56, 0.08) !important;
}

.recognition-stars-card:hover::after,
.recognition-archive-card:hover::after {
  opacity: 1 !important;
}

/* ── Stars card: refine the body region typography ──────────── */
.recognition-stars-card__body {
  padding: 22px 24px 22px !important;
}

.recognition-stars-card__name {
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 1.5vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--cst-navy) !important;
  margin: 0 0 6px !important;
}

.recognition-stars-card__role {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--cst-graphite-2) !important;
}

/* Star icon: scale down slightly and use the same red treatment */
.recognition-stars-card__star {
  width: 32px !important;
  height: 32px !important;
  top: 14px !important;
  right: 14px !important;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.25) !important;
  font-size: 14px !important;
}

/* CTA region — match the link-arrow style of the unified cards */
.recognition-stars-card__cta {
  padding-top: 14px !important;
  margin-top: 14px !important;
  border-top: 1px solid rgba(10, 35, 66, 0.08) !important;
}

.recognition-stars-card__open {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cst-red) !important;
  opacity: 1 !important;
  transition: gap var(--t-fast, 0.18s) var(--ease, ease) !important;
}

/* ── Archive card: keep the full-bleed photo with overlay
   structure, but match the unified hover and border treatment */
.recognition-archive-card {
  background: var(--cst-platinum) !important;  /* photo will cover */
}

.recognition-archive-card__name {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 1.4vw, 22px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: var(--cst-cream) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0 0 4px !important;
}

.recognition-archive-card__role {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  font-size: 13.5px !important;
  color: rgba(245, 240, 230, 0.88) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.recognition-archive-card__month {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--cst-cream) !important;
  opacity: 0.85 !important;
  margin-bottom: 8px !important;
}

/* The celebration counter pill — give it the same red shadow
   treatment as the unified badges */
.recognition-stars-card__celebrations,
.recognition-archive-card__celebrations {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}


/* ════════════════════════════════════════════════════════════════
   STAGE-6 — Homepage layout fixes (May 2026)
   
   1. Hero + ticker together fit exactly one viewport.
      Previously .hero was 100vh and the ticker (~38px) sat below it,
      so the next section peeked. Subtract the ticker's height from
      the hero so the two together fill exactly 100vh.
   
   2. "The Program" section drifts right when zoomed out / on
      very wide viewports. Root cause: grid items inside
      .section-intro__grid (1fr 1fr) and .program-grid (1fr×4)
      default to min-width:auto, which can be wider than 1fr if a
      content word is large. Force min-width:0 to keep grid tracks
      strictly equal and centered. Plus a defensive overflow guard
      on the section so it can never visually escape the viewport.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Hero + ticker fit viewport exactly ─────────────────────── */
/* Approximate ticker height: padding 12px*2 + ~13px line + 2px borders ≈ 39px */
:root {
  --ticker-h: 39px;
}

@media (min-width: 721px) {
  .hero {
    min-height: calc(100vh - var(--ticker-h)) !important;
    min-height: calc(100dvh - var(--ticker-h)) !important;
  }
}

/* On very tall narrow screens the ticker can wrap or shrink; keep
   the hero at least readable. */
@media (max-height: 600px) and (min-width: 721px) {
  .hero {
    min-height: calc(100vh - var(--ticker-h)) !important;
  }
}

/* ── 2. Defensive layout for #program section on zoom-out ───── */
#program {
  overflow: hidden;       /* clip any rogue overflow within the section */
}

#program .section-intro__grid,
#program .program-grid {
  min-width: 0;
  /* Reinforce centering — these grids stay centered even if a child
     somehow tries to push past max-width. */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Critical: grid items inside auto-tracks default to min-width:auto,
   which lets long words / large headings break out of the track and
   push siblings off-center. Force min-width:0 so columns honour
   their 1fr share strictly. */
#program .section-intro__grid > *,
#program .program-grid > * {
  min-width: 0;
  min-height: 0;
}

/* Also guard against the title block stretching its grid track. The
   title can reach 68px at large viewports; with the default
   min-width:auto on grid items, this can expand the left track. */
#program .section-intro__grid .title {
  max-width: 100%;
}

/* ============================================================
   CLUBS CAROUSEL (student-life.html)
   Converts the static 3-up club grid into a horizontal scroller
   with overlay prev/next arrows sitting over the first and last
   visible cards. New clubs added to the track simply extend the
   scroll rather than wrapping onto new rows.
   ============================================================ */
.club-carousel {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Turn the grid into a horizontal, snapping flex track. Overrides
   the base .club-grid grid rules when used as the carousel track. */
.club-carousel__track.club-grid {
  display: flex;
  grid-template-columns: none;
  gap: 32px;
  max-width: none;
  margin: 0;
  padding: 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  scroll-behavior: smooth;
}
.club-carousel__track.club-grid::-webkit-scrollbar { display: none; } /* WebKit */
/* Three cards in view on desktop; each card a fixed share of the track. */
.club-carousel__track .club-card {
  flex: 0 0 calc((100% - 64px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 960px) {
  .club-carousel__track.club-grid { gap: 24px; }
  .club-carousel__track .club-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
  .club-carousel__track.club-grid { gap: 20px; }
  .club-carousel__track .club-card { flex-basis: 85%; }
}

/* Overlay navigation arrows — centred on the card row, sitting just
   inside the left edge of the first card and the right edge of the
   last visible card. Mirrors the magazine viewer nav buttons. */
.club-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 240, 230, 0.10);
  border: 1px solid rgba(245, 240, 230, 0.30);
  color: var(--cst-cream);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.club-carousel__nav svg { width: 22px; height: 22px; display: block; }
.club-carousel__nav:hover {
  background: var(--cst-red);
  border-color: var(--cst-red);
  color: var(--cst-cream);
}
.club-carousel__nav:focus-visible {
  outline: 2px solid var(--cst-cream);
  outline-offset: 3px;
}
.club-carousel__nav--prev { left: calc(var(--gutter) - 24px); }
.club-carousel__nav--next { right: calc(var(--gutter) - 24px); }
/* Disabled state (start/end of scroll) — fade out, ignore clicks. */
.club-carousel__nav:disabled {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  .club-carousel__nav { width: 40px; height: 40px; }
  .club-carousel__nav svg { width: 18px; height: 18px; }
  .club-carousel__nav--prev { left: 4px; }
  .club-carousel__nav--next { right: 4px; }
}

/* ============================================================
   DOCUMENT TEMPLATE — "Back to Reference Library" link
   Used on standard handbook/policy pages built from
   pages/document-template.html. Sits above the document chapter
   mark and returns the reader to Publications > Reference Library.
   ============================================================ */
.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cst-graphite-2);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color var(--t-fast) var(--ease);
}
.legal-page__back:hover { color: var(--cst-red); }

/* ============================================================
   MOBILE MENU — fix invisible (navy-on-navy) links
   ------------------------------------------------------------
   On pages with a solid header (site-header--always-solid) or once
   scrolled, the base stylesheet colours the top-nav links navy. On
   desktop that sits on a light header bar and reads fine. But on
   mobile the menu becomes a full-height NAVY slide-in panel, so navy
   links on a navy panel are invisible until a repaint (hence the
   "blank menu, text flashes on hover" behaviour). There is already a
   --scrolled override here; the --always-solid case was missing.
   Force the panel's links to cream (red on hover/active) at the
   mobile breakpoint, whatever the header state.
   ============================================================ */
@media (max-width: 1080px) {
  .site-header .site-nav a,
  .site-header--always-solid .site-nav a,
  .site-header--scrolled .site-nav a {
    color: var(--cst-cream) !important;
    text-shadow: none;
  }
  .site-header .site-nav a:hover,
  .site-header .site-nav a.active,
  .site-header--always-solid .site-nav a:hover,
  .site-header--always-solid .site-nav a.active,
  .site-header--scrolled .site-nav a:hover,
  .site-header--scrolled .site-nav a.active {
    color: var(--cst-red) !important;
  }
}