/* Sandip Alumni Relations — section styles.
   ---------------------------------------------------------------------------
   Mobile-first, no framework, no build step. Sits below the University's own
   stylesheet, so everything is scoped to .alumni or to the alumni-* / band /
   card / section classes.

   Colours and typefaces are taken from the University's live site
   (https://www.sandipuniversity.edu.in/) — see docs/DESIGN-SYSTEM.md for the
   ramp, the measured contrast ratios and the rules that keep it accessible.

   Layers, in order:
     1  fonts        6  bands and sections
     2  tokens       7  components
     3  reset        8  page-specific blocks
     4  typography   9  footer
     5  layout      10  utilities, motion, print
   --------------------------------------------------------------------------- */


/* ===========================================================================
   1. FONTS — self-hosted, see assets/fonts/README.txt
   Both families are variable fonts, so one file per subset covers every weight.
   =========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* The University's menu face. Circular Std is a licensed font the University
   already serves from /fonts/ on this origin; the alumni section lives on the
   same origin, so the files are referenced in place rather than copied — no
   redistribution, and 'self' in the CSP already covers them. Off that origin
   (local development) the request 404s harmlessly and the stack falls through
   to Open Sans, which the rest of the site uses anyway. */
@font-face {
  font-family: "CircularStd";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/CircularStd-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "CircularStdBook";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/CircularStd-Book.woff2") format("woff2");
}


/* ===========================================================================
   2. TOKENS
   Contrast ratios in the comments are measured against the surface named.
   Do not use --su-red for body copy or button labels (4.42:1 — large text
   only); do not use --su-gold as text on a light surface (1.5:1).
   =========================================================================== */

:root {
  /* Brand red */
  --su-red:          #ea1f28;   /* display headings, rules, accents           */
  /* The University's bars are #ea1f28 with white 12px text: 4.42:1, just under
     AA. This is the nearest red that clears it — 4.65:1 — and it is not
     distinguishable from the original at a glance. Used wherever small white
     text sits on a red fill: the utility bar, the menu hover, the sheet head. */
  --su-red-bar:      #e51b24;
  --su-red-strong:   #c4161f;   /* buttons and red surfaces — 6.07:1 w/ white */
  --su-red-hover:    #a5121a;   /* button hover            — 7.76:1 w/ white  */
  --su-red-tint:     #fdecec;   /* soft wash: tags, pending states            */
  --su-red-line:     #f5c9cb;

  /* Blues */
  --su-navy-deep:    #031d44;   /* dark bands, footer   — white on it 16.6:1  */
  --su-navy:         #0f385f;   /* links, focus ring    — 11.99:1 on white    */
  --su-blue:         #004085;   /* matches the live site's a.btn              */
  --su-navy-tint:    #eef2f7;

  /* The University's yellow: footer rules, the search pill, award marks.
     Decorative on light surfaces — never text there. */
  --su-gold:         #ffca06;   /* 12.7:1 on --su-navy-deep, 8.3:1 on #333    */
  --su-yellow:       #f2c006;   /* the search pill                            */
  --su-gold-tint:    #fff6d6;
  --su-gold-ink:     #6b4708;   /* the readable gold, for text on light       */

  /* Neutrals */
  --su-ink:          #161616;   /* headings                                   */
  --su-body:         #505050;   /* body copy            — 8.19:1 on white     */
  /* Meta text has to clear 4.5:1 on --su-surface-alt too, not just on white,
     because the filter bar and the page head both sit on it. #6b7280 managed
     only 4.35:1 there. */
  --su-muted:        #626977;   /* 5.53:1 on white, 4.98:1 on --su-surface-alt */
  --su-line:         #e8e8e8;
  --su-line-strong:  #d8d7d7;
  --su-surface:      #ffffff;
  --su-surface-alt:  #f3f3f3;
  --su-surface-dark: #333333;

  /* Surface-aware slots. Bands override these rather than restating colours. */
  --su-focus:        var(--su-navy);
  --su-on-surface:   var(--su-body);
  --su-heading:      var(--su-ink);
  --su-link:         var(--su-navy);
  --su-link-hover:   var(--su-red-strong);
  --su-rule:         var(--su-line);
  --su-title-rule:   var(--su-red);   /* the short rule under headings          */

  /* Space — 4px base */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-7: 2rem;    --space-8: 2.5rem;
  --space-9: 3rem;    --space-10: 4rem;   --space-11: 5rem;   --space-12: 6rem;
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* The University lays out full-width with a 60px gutter at desktop; this
     reaches 60px at 1440 and eases down to 16px on a phone. */
  --gutter:    clamp(1rem, .25rem + 3.9vw, 3.75rem);

  /* Type */
  --font-body: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Raleway", "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The menu faces; see the @font-face note above. */
  --font-nav:      "CircularStd", "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-nav-book: "CircularStdBook", "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-eyebrow: .75rem;
  --fs-small:   .8125rem;
  --fs-meta:    .875rem;
  --fs-body:    clamp(1rem, .98rem + .1vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  --fs-h3:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-display: clamp(2.25rem, 1.7rem + 3vw, 3.75rem);

  /* Shape and depth — squarer than before, to sit with the University's
     Bootstrap-derived 4px buttons rather than against them. */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(3, 29, 68, .06), 0 1px 3px rgba(3, 29, 68, .08);
  --shadow-2: 0 4px 12px rgba(3, 29, 68, .08), 0 2px 4px rgba(3, 29, 68, .06);
  --shadow-3: 0 12px 32px rgba(3, 29, 68, .14);

  --ease: .18s cubic-bezier(.22, .61, .36, 1);
  --wrap: 1440px;         /* full-width like the University, capped for 4K */
  --header-h: 104px;      /* red bar 44 + white bar 60, as on the main site */
  --wrap-narrow: 44rem;   /* ~68ch at the body size — the reading measure */
  --tap: 2.75rem;         /* 44px minimum touch target */
}


/* ===========================================================================
   3. RESET
   =========================================================================== */

.alumni {
  margin: 0;
  color: var(--su-body);
  background: var(--su-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.alumni *,
.alumni *::before,
.alumni *::after { box-sizing: border-box; }
.alumni img,
.alumni svg { max-width: 100%; height: auto; }
.alumni :focus-visible {
  outline: 3px solid var(--su-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
/* The mobile menu sheet is open: the page behind it stays put. */
.alumni.nav-open { overflow: hidden; }
@media (min-width: 75em) { .alumni.nav-open { overflow: auto; } }


/* ===========================================================================
   4. TYPOGRAPHY
   =========================================================================== */

/* Base element styling is wrapped in :where() so it carries no specificity of
   its own. Without it `.alumni p` (0,1,1) silently beats every single-class
   component rule like `.filters__field` or `.card__name` (0,1,0), and their
   margins never apply. Components below simply win by source order. */
.alumni :where(h1, h2, h3, h4) {
  font-family: var(--font-head);
  color: var(--su-heading);
  line-height: 1.18;
  letter-spacing: -.011em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.alumni :where(h1) { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; }
.alumni :where(h2) { font-size: var(--fs-h2); font-weight: 700; }
.alumni :where(h3) { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.005em; }
.alumni :where(h4) { font-size: 1rem;         font-weight: 700; }
.alumni :where(p)  { margin: 0 0 1em; }
.alumni :where(p:last-child) { margin-bottom: 0; }

.alumni :where(a) { color: var(--su-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.alumni :where(a:hover) { color: var(--su-link-hover); text-decoration-thickness: 2px; }

.alumni strong, .alumni b { font-weight: 700; color: var(--su-ink); }
.alumni address { font-style: normal; }
.alumni time { font-variant-numeric: tabular-nums; }

/* The small uppercase label that opens a section, a card or the hero. */
.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--su-red-strong);
  margin: 0 0 var(--space-3);
}
.eyebrow--muted { color: var(--su-muted); }

/* Long-form copy. Restores heading rhythm inside a run of prose. */
.prose > * + h2 { margin-top: 1.9em; }
.prose > * + h3 { margin-top: 1.5em; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li + li { margin-top: .35em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--su-navy-deep); color: #fff;
  padding: var(--space-3) var(--space-5);
  font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }


/* ===========================================================================
   5. LAYOUT PRIMITIVES
   =========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.wrap--wide   { max-width: 1400px; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * .6) 0; }

/* The University's heading signature: the title, then a short red rule
   (its `hr.title-hr`, 90px). Applied to every section and page title here, so
   the alumni pages carry the same mark as the rest of the site. */
.title-rule::after,
.section-head__text h2::after,
.page-head h1::after,
.hero__title::after,
.cta-block h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin-top: var(--space-4);
  background: var(--su-title-rule);
}
.cta-block h2::after { margin-left: auto; margin-right: auto; }
.band--red  { --su-title-rule: #fff; }
.band--navy { --su-title-rule: var(--su-gold); }
.band--dark { --su-title-rule: var(--su-gold); }

/* Section header: eyebrow + title on the left, "see all" link on the right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-7);
}
.section-head__text { min-width: 0; }
.section-head__text > :last-child { margin-bottom: 0; }
.section-head__more {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-meta);
  white-space: nowrap;
}
.section-head__more a {
  display: inline-flex; align-items: center; gap: .4em;
  text-decoration: none;
  padding: var(--space-2) 0;
}
.section-head__more a:hover { text-decoration: underline; }
.section-head__more a::after {
  content: "\2192";
  transition: transform var(--ease);
}
.section-head__more a:hover::after { transform: translateX(3px); }

.section__intro, .section__note {
  color: var(--su-muted);
  max-width: 62ch;
}
.section__intro { margin-bottom: var(--space-7); margin-top: calc(var(--space-4) * -1); }
.section__note { font-size: var(--fs-meta); margin-top: var(--space-6); }

/* A section that opens with an eyebrow + h2 straight into content, rather than
   through .section-head, still needs the list below it to breathe. */
.section > .wrap > .card-grid,
.section > .wrap > .chapter-list,
.section > .wrap > .event-list,
.section > .wrap > .tile-grid,
.section > .wrap > .news-list,
.section > .wrap > .gallery,
.section > .wrap > .tri-grid { margin-top: var(--space-6); }
.section-head + .card-grid,
.section-head + .chapter-list,
.section-head + .event-list,
.section-head + .tile-grid,
.section-head + .news-list,
.section-head + .gallery,
.section-head + .tri-grid { margin-top: 0; }

/* Vertical rhythm helper for stacked blocks. */
.stack > * + * { margin-top: var(--space-5); }
.cluster {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-3);
}


/* ===========================================================================
   6. BANDS — the one section-surface primitive.
   Each variant re-points the surface-aware tokens instead of restating colours,
   so components inside a band inherit the right link, heading and focus colour.
   =========================================================================== */

.band { background: var(--su-surface); }

.band--alt {
  background: var(--su-surface-alt);
  --su-rule: var(--su-line-strong);
}

.band--red,
.band--navy,
.band--dark {
  --su-on-surface: rgba(255, 255, 255, .92);
  --su-heading: #fff;
  --su-link: #fff;
  --su-link-hover: #fff;
  --su-focus: #fff;
  --su-rule: rgba(255, 255, 255, .28);
  color: var(--su-on-surface);
}
.band--red  { background: var(--su-red-strong); }
.band--navy { background: var(--su-navy-deep); }
.band--dark { background: var(--su-surface-dark); }

/* .8 composites to 4.25:1 over the red band — under AA for 12px text. .92
   gives 5.30:1. */
.band--red .eyebrow,
.band--navy .eyebrow,
.band--dark .eyebrow { color: rgba(255, 255, 255, .92); }
.band--navy .eyebrow { color: var(--su-gold); }

/* Hairline separators between two same-coloured bands. */
.band--edge-top    { border-top: 1px solid var(--su-line); }
.band--edge-bottom { border-bottom: 1px solid var(--su-line); }

/* A CTA band that has to sit next to another CTA band without shouting. */
.band--quiet {
  background: var(--su-navy-tint);
  border-top: 3px solid var(--su-red);
  --su-rule: #dbe3ee;
}


/* ===========================================================================
   7. COMPONENTS
   =========================================================================== */

/* --- 7.1 Header — the University's three-tier chrome ---------------------- */
/* Measured off sandipuniversity.edu.in: a 44px red utility bar (uppercase
   Circular Std Book links, social icons in white discs, a yellow Search pill),
   a 60px white bar (logo left, uppercase Circular Std menu that fills red on
   hover and drops a white shadowed panel), then a 38px dark ticker. The whole
   header is sticky, exactly as theirs is. */

.su-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--su-surface);
  transition: box-shadow var(--ease);
}
.su-header.is-stuck { box-shadow: 0 2px 10px rgba(0, 0, 0, .14); }

/* Tier 1: utility bar */
.su-topbar { background: var(--su-red-bar); color: #fff; }
.su-topbar__inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-4);
  min-height: 44px;
}
.su-topbar__links { display: none; list-style: none; margin: 0; padding: 0; }
.su-topbar__links a {
  display: inline-block;
  padding: 9px 8.5px;
  font-family: var(--font-nav-book);
  font-size: 12px;
  line-height: 26px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.su-topbar__links a:hover { text-decoration: underline; color: #fff; }
.su-topbar__links li:last-child { padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, .3); }
.su-topbar__social { display: flex; align-items: center; gap: var(--space-3); }
.su-topbar__label {
  display: none;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 12px;
}

/* Social discs: white, with each network's own colour for the glyph, as on the
   University bar. 24px meets the WCAG 2.2 target-size minimum (theirs are 21). */
.su-social { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.su-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  color: #111;
  text-decoration: none;
  transition: transform var(--ease);
}
.su-social a:hover { transform: translateY(-1px); }
.su-social svg { width: 13px; height: 13px; display: block; }
.su-social__link--facebook  { color: #0999ff; }
.su-social__link--x         { color: #000; }
.su-social__link--linkedin  { color: #4960a1; }
.su-social__link--instagram { color: #d30f7b; }
.su-social__link--youtube   { color: var(--su-red); }

/* The yellow Search pill. The University sets white text on it (1.5:1); this
   uses ink so it can actually be read. */
.su-search {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 34px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--su-yellow);
  color: #111;
  font-family: var(--font-nav-book);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.su-search:hover { background: #ffd53d; color: #111; }
.su-search svg { width: 14px; height: 14px; }
.su-search span { display: none; }

/* Tier 2: logo + menu */
.su-mainbar { border-bottom: 1px solid var(--su-line); }
.su-mainbar__inner {
  display: flex; align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: 4px 0;
}
.su-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.su-brand__logo { display: block; line-height: 0; padding: 2px 0; }
.su-brand__logo img { display: block; width: auto; height: 26px; }
.su-brand__section {
  display: block;
  padding: 5px 0 5px var(--space-3);
  border-left: 1px solid var(--su-line-strong);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-ink);
  text-decoration: none;
  white-space: nowrap;
}
.su-brand__section span { color: var(--su-red-strong); }   /* 11px: needs the AA red */
.su-brand__section:hover { color: var(--su-red-strong); }

/* The University's three-bar toggle. */
.su-menu-toggle {
  margin-left: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: var(--tap); height: var(--tap);
  padding: 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--su-ink);
}
.su-menu-toggle i {
  display: block; width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--ease), opacity var(--ease);
}
.su-menu-toggle:hover { color: var(--su-red-strong); }
.su-menu-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.su-menu-toggle[aria-expanded="true"] i:nth-child(3) { opacity: 0; }
.su-menu-toggle[aria-expanded="true"] i:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* The menu: a sheet from the right on small screens, a row on large ones. */
.alumni-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(22rem, 88vw);
  padding: 0 var(--space-5) var(--space-8);
  background: var(--su-surface);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
  overflow-y: auto;
  z-index: 60;
  transform: translateX(100%);
  visibility: hidden;
  /* Visibility flips at once on open (so focus can move into the sheet) and
     only after the slide on close. */
  transition: transform .25s ease, visibility 0s .25s;
}
.alumni-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.su-nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(3, 29, 68, .45);
  z-index: 55;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility 0s .25s;
}
.su-nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }

.alumni-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px;
  margin: 0 calc(var(--space-5) * -1) var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-5);
  background: var(--su-red-bar);
  color: #fff;
}
.alumni-nav__title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.alumni-nav__close {
  width: var(--tap); height: var(--tap);
  background: none; border: 0; cursor: pointer;
  color: #fff; font-size: 1.75rem; line-height: 1;
}
.alumni-nav__close:hover { color: var(--su-gold); }

.alumni-nav__list { list-style: none; margin: 0; padding: 0; }
.alumni-nav__item {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--su-line);
}
.alumni-nav__item > a {
  flex: 1;
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: var(--space-3) 0;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--su-ink);
  text-decoration: none;
}
.alumni-nav__item > a:hover { color: var(--su-red-strong); }
/* Current page is marked by weight and a red rule, not by colour alone. */
.alumni-nav__item > a[aria-current="page"] {
  color: var(--su-red-strong);
  box-shadow: inset 3px 0 0 var(--su-red);
  padding-left: var(--space-3);
}
.alumni-nav__expand {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--su-ink);
}
.alumni-nav__expand svg { width: 12px; height: 12px; transition: transform var(--ease); }
.alumni-nav__expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.alumni-nav__sub {
  flex-basis: 100%;
  display: none;
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0 0 0 var(--space-4);
}
.alumni-nav__sub.is-open { display: block; }
.alumni-nav__sub a {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) 0;
  font-size: 14px;
  color: #111;
  text-decoration: none;
}
.alumni-nav__sub a:hover { color: var(--su-red-strong); }
.alumni-nav__sub a[aria-current="page"] { color: var(--su-red-strong); font-weight: 600; }
.alumni-nav__cta { margin: var(--space-6) 0 0; }

/* The header CTA in the shape of the University's "Admission Helpline" pill. */
.su-pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  padding: 5px 18px 5px 5px;
  border-radius: var(--radius-pill);
  background: var(--su-navy-deep);
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
  transition: background-color var(--ease);
}
.su-pill:hover { background: var(--su-red-strong); color: #fff; }
.su-pill__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--su-red);
  color: #fff;
  transition: background-color var(--ease), color var(--ease);
}
.su-pill:hover .su-pill__icon { background: #fff; color: var(--su-red-strong); }
.su-pill__icon svg { width: 16px; height: 16px; }
.su-pill__text { display: flex; flex-direction: column; gap: 2px; }
.su-pill__eyebrow {
  font-family: var(--font-nav-book);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.su-pill__label { font-family: var(--font-nav); font-weight: 700; font-size: 13px; }
/* Form URL not configured yet — say so where there's room (the sheet), not in
   the desktop row, where every other CTA on the page already carries it. */
.su-pill.is-unset .su-pill__label::after {
  content: " (link pending)";
  font-family: var(--font-nav-book); font-weight: 400; font-size: 11px; opacity: .85;
}

@media (min-width: 62em) {
  .su-search span { display: inline; }
  .su-brand__logo img { height: 27px; }
}

@media (min-width: 75em) {
  .su-menu-toggle, .alumni-nav__head, .su-nav-backdrop { display: none; }
  /* Between 1200 and 1280 the row is tight: the lockup text and the pill's
     eyebrow step aside until 80em, where there is room for both. */
  .su-brand__section, .su-pill__eyebrow { display: none; }
  .alumni-nav {
    position: static;
    width: auto;
    padding: 0;
    margin-left: auto;
    display: flex; align-items: center; gap: var(--space-4);
    background: none; box-shadow: none;
    overflow: visible;
    transform: none; visibility: visible;
    transition: none;
  }
  .alumni-nav__list { display: flex; }
  .alumni-nav__item { flex-wrap: nowrap; border: 0; }
  .alumni-nav__item > a {
    flex: none;
    min-height: 64px;
    padding: 20px 10px;
    font-size: 12px;
  }
  .alumni-nav__item.has-children > a { padding-right: 4px; }
  .alumni-nav__item > a[aria-current="page"] {
    padding-left: 10px;
    box-shadow: inset 0 -3px 0 var(--su-red);
  }
  /* The whole item fills red on hover and focus — link and chevron together. */
  .alumni-nav__item:hover,
  .alumni-nav__item:focus-within { background: var(--su-red-bar); }
  .alumni-nav__item:hover > a,
  .alumni-nav__item:focus-within > a,
  .alumni-nav__item:hover .alumni-nav__expand,
  .alumni-nav__item:focus-within .alumni-nav__expand { color: #fff; }
  .alumni-nav__item:hover > a[aria-current="page"],
  .alumni-nav__item:focus-within > a[aria-current="page"] { box-shadow: inset 0 -3px 0 #fff; }
  .alumni-nav__expand {
    width: auto; height: auto;
    min-width: 1.5rem; min-height: 1.5rem;
    align-self: stretch;
    padding: 0 8px 0 2px;
  }
  /* The white notch that joins the red item to its white panel. */
  .alumni-nav__item.has-children::after {
    content: "";
    position: absolute; bottom: 0; left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: #fff;
    opacity: 0; visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
    z-index: 21;
  }
  .alumni-nav__item.has-children:hover::after,
  .alumni-nav__item.has-children:focus-within::after { opacity: 1; visibility: visible; }

  .alumni-nav__sub {
    position: absolute; top: 100%; left: 0;
    flex-basis: auto;
    display: block;
    min-width: 16rem;
    margin: 0;
    padding: 20px;
    background: var(--su-surface);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    opacity: 0; visibility: hidden;
    transform: rotateX(90deg);
    transform-origin: center top;
    transition: opacity .2s, transform .25s, visibility .25s;
    z-index: 20;
  }
  .alumni-nav__item:last-child .alumni-nav__sub { left: auto; right: 0; }
  .alumni-nav__item.has-children:hover > .alumni-nav__sub,
  .alumni-nav__item.has-children:focus-within > .alumni-nav__sub,
  .alumni-nav__sub.is-open { opacity: 1; visibility: visible; transform: none; }
  .alumni-nav__sub li { margin-bottom: 3px; }
  .alumni-nav__sub li:last-child { margin-bottom: 0; }
  /* Their panel links: plain text with a red rule that draws in from the left. */
  .alumni-nav__sub a {
    display: inline-block;
    position: relative;
    min-height: 0;
    padding: 4px 0;
    line-height: 26px;
    white-space: nowrap;
  }
  .alumni-nav__sub a::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--su-red);
    transform: scaleX(0);
    transform-origin: right bottom;
    transition: transform .35s;
  }
  .alumni-nav__sub a:hover,
  .alumni-nav__sub a[aria-current="page"] { color: #111; }
  .alumni-nav__sub a:hover::after,
  .alumni-nav__sub a:focus-visible::after,
  .alumni-nav__sub a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left bottom; }
  .alumni-nav__cta { margin: 0; }
  .su-pill.is-unset .su-pill__label::after { display: none; }
}
@media (min-width: 80em) {
  /* Seven utility links need about 820px at 11px; with the social row and the
     Search pill that is 1080px, which fits from 1280 up. Below that the bar
     shows social and search only, as the University's own does on tablets. */
  .su-topbar__inner { justify-content: space-between; }
  .su-topbar__links { display: inline-flex; }
  .su-topbar__links a { font-size: 11px; padding: 9px 7px; }
  .su-brand__section, .su-pill__eyebrow { display: block; }
  .alumni-nav__item > a { font-size: 13px; padding-inline: 10px; }
  .alumni-nav__item.has-children > a { padding-right: 2px; }
  .alumni-nav__item > a[aria-current="page"] { padding-left: 10px; }
}
@media (min-width: 90em) {
  .su-topbar__label { display: inline; }
  .su-topbar__links a { font-size: 12px; padding: 9px 8.5px; }
}

/* Tier 3: the announcement ticker. Dark grey, white 14px/500, as theirs. */
.su-ticker {
  position: relative;
  overflow: hidden;
  padding: 3px 0;
  background: var(--su-surface-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
}
.su-ticker__track {
  display: flex;
  width: max-content;
  animation: su-ticker var(--su-ticker-duration, 40s) linear infinite;
}
.su-ticker:hover .su-ticker__track,
.su-ticker:focus-within .su-ticker__track { animation-play-state: paused; }
.su-ticker__set { display: flex; flex-shrink: 0; }
.su-ticker__item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-right: 2.5rem;
  white-space: nowrap;
}
.su-ticker__item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--su-gold); }
.su-ticker a { color: #fff; text-decoration: none; }
.su-ticker a:hover { color: #fff; text-decoration: underline; }
@keyframes su-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .su-ticker__track { animation: none; width: auto; }
  .su-ticker__set { flex-wrap: wrap; }
  .su-ticker__set[aria-hidden] { display: none; }
  .su-ticker__item { white-space: normal; padding: 2px 1.5rem 2px 0; }
}


/* --- 7.3 Buttons ---------------------------------------------------------- */

/* The University's buttons are Bootstrap-shaped: 4px corners, Open Sans. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease),
              color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-meta);
}
.btn--block { width: 100%; }

.btn--primary {
  background: var(--su-red-strong); border-color: var(--su-red-strong); color: #fff;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover { background: var(--su-red-hover); border-color: var(--su-red-hover); color: #fff; box-shadow: var(--shadow-2); }

.btn--secondary {
  background: var(--su-navy-deep); border-color: var(--su-navy-deep); color: #fff;
}
.btn--secondary:hover { background: var(--su-navy); border-color: var(--su-navy); color: #fff; }

.btn--ghost { background: transparent; border-color: currentColor; color: var(--su-link); }
.btn--ghost:hover { background: var(--su-red-tint); border-color: var(--su-red-strong); color: var(--su-red-strong); }

/* Inside a coloured band the ghost button inverts to stay legible. */
.band--red .btn--ghost,
.band--navy .btn--ghost,
.band--dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.band--red .btn--ghost:hover,
.band--navy .btn--ghost:hover,
.band--dark .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
/* A red primary on a red band would disappear — flip it to white. */
.band--red .btn--primary { background: #fff; border-color: #fff; color: var(--su-red-hover); }
.band--red .btn--primary:hover { background: var(--su-red-tint); border-color: var(--su-red-tint); color: var(--su-red-hover); }
.band--navy .btn--secondary { background: #fff; border-color: #fff; color: var(--su-navy-deep); }
.band--navy .btn--secondary:hover { background: var(--su-navy-tint); border-color: var(--su-navy-tint); color: var(--su-navy-deep); }

/* Google Form URL not configured yet. */
.btn--unset { opacity: .72; }
.btn--unset::after {
  content: " (link pending)";
  font-weight: 400; font-size: .8em; opacity: .85;
}
.btn__ext { font-size: .85em; opacity: .8; }

.link-button {
  background: none; border: 0; padding: 0;
  color: var(--su-link); text-decoration: underline; text-underline-offset: .18em;
  cursor: pointer; font: inherit;
}
.link-button:hover { color: var(--su-link-hover); }


/* --- 7.4 Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--su-surface);
  border-bottom: 1px solid var(--su-line);
  overflow: hidden;
}
/* A soft brand wash behind the hero, kept well under the text contrast floor. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60rem 32rem at 88% -10%, var(--su-red-tint) 0%, transparent 62%),
    radial-gradient(48rem 30rem at -6% 8%, var(--su-navy-tint) 0%, transparent 60%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--su-red-strong);
  margin: 0 0 var(--space-5);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.05;
  margin-bottom: var(--space-5);
  color: var(--su-ink);
}
.hero__title::after { margin-top: var(--space-5); }
.hero__title em { font-style: normal; color: var(--su-red-strong); }
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--su-body);
  max-width: 46ch;
  margin-bottom: var(--space-7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.hero__media {
  position: relative;
  min-height: clamp(15rem, 30vw, 24rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 62em) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-10); }
}


/* --- 7.5 Stats band ------------------------------------------------------- */

.stats { background: var(--su-red-strong); color: #fff; padding: var(--space-8) 0; }
.stats__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
.stats__item { text-align: center; }
/* The University's own strip: Open Sans 700 numerals, 500 labels, on red. */
.stats__value {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.stats__label {
  display: block;
  margin-top: var(--space-2);
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: capitalize;
  color: rgba(255, 255, 255, .95);
}
.stats__source {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  /* .72 composites to only 3.67:1 over the red band; .86 gives 4.68:1. */
  color: rgba(255, 255, 255, .86);
}
@media (min-width: 48em) {
  .stats__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .stats__item + .stats__item { border-left: 1px solid rgba(255, 255, 255, .25); }
}


/* --- 7.6 Cards ------------------------------------------------------------ */

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 36em) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80em) { .card-grid--compact { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.card[hidden] { display: none; }
/* The red edge only appears on cards that are actually interactive. */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--su-red);
  opacity: 0;
  transition: opacity var(--ease);
}
.card--link:hover,
.card--link:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--su-line-strong); }
.card--link:hover::before,
.card--link:focus-within::before { opacity: 1; }

.card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--su-surface-alt); }
.card__photo--wide { aspect-ratio: 16 / 9; }

.card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__body > * { margin: 0; }
.card__tag {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--su-red-strong);
  margin-bottom: var(--space-2);
}
.card__tag--gold { color: var(--su-gold-ink); }
.card__name { margin-bottom: var(--space-1); }
.card__name a { color: inherit; text-decoration: none; }
.card__name a:hover { color: var(--su-red-strong); }
/* One tap target per card: the title link covers the whole card. */
.card--link .card__name a::after { content: ""; position: absolute; inset: 0; }
.card__role { font-weight: 600; color: var(--su-ink); margin-bottom: var(--space-1); }
.card__meta { font-size: var(--fs-meta); color: var(--su-muted); }
.card__hook { margin-top: var(--space-3); }
.card__more { margin-top: var(--space-4); font-size: var(--fs-meta); }
/* Anything genuinely clickable inside a whole-card link must sit above it. */
.card__more .btn, .card__more a { position: relative; z-index: 1; }
/* Visual "read more" cue on whole-card links — not a second focusable target. */
.card__cue {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-meta);
  color: var(--su-link);
  display: inline-flex; align-items: center; gap: .4em;
}
.card__cue::after { content: "\2192"; transition: transform var(--ease); }
.card--link:hover .card__cue { color: var(--su-red-strong); }
.card--link:hover .card__cue::after { transform: translateX(3px); }

/* Cards with no image get a coloured spine so grids stay rhythmic. */
.card--institution, .card--benefit, .card--way { border-top: 3px solid var(--su-red); }
.card--way .card__more { margin-top: auto; padding-top: var(--space-4); }


/* --- 7.7 Media fallback (photo pending) ----------------------------------- */

.media-fallback {
  display: grid;
  place-items: center;
  position: relative;
  background:
    linear-gradient(140deg, var(--su-navy-tint) 0%, var(--su-red-tint) 100%);
  color: var(--su-navy);
  overflow: hidden;
}
.media-fallback::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--su-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--su-line) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  opacity: .5;
}
.media-fallback__mark {
  position: relative;
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: var(--su-surface);
  border: 2px solid var(--su-red);
  box-shadow: var(--shadow-1);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--su-red-strong);
}
.media-fallback__note {
  position: relative;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--su-muted);
}
/* Match whatever aspect the real image would have had. */
.card__photo.media-fallback { aspect-ratio: 1 / 1; }
.card__photo--wide.media-fallback { aspect-ratio: 16 / 9; }
.gallery__photo.media-fallback { aspect-ratio: 4 / 3; }
.story__photo.media-fallback { aspect-ratio: 21 / 9; max-height: 26rem; }
.hero__placeholder {
  display: grid; place-items: center;
  min-height: clamp(15rem, 30vw, 24rem);
  border-radius: var(--radius-lg);
}
.hero__placeholder .media-fallback__mark { width: 6rem; height: 6rem; font-size: 2rem; }

/* --- 7.9 Alumni Relations team ------------------------------------------- */

.team-page {
  background: var(--su-surface);
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
}
.team-page .wrap { max-width: 96rem; }
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 36em) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.team-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.team-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: #f47737;
}
.team-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: contain;
  object-position: center bottom;
  background: var(--su-surface);
}
.team-card__photo.media-fallback {
  display: grid;
  place-items: center;
  object-fit: initial;
}
.team-card__body {
  position: relative;
  min-height: 10rem;
  padding: var(--space-5);
  border-top: 1px solid #f5c9cb;
}
.team-card__name {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.1rem, 1rem + .2vw, 1.35rem);
  color: var(--su-ink);
}
.team-card__role {
  max-width: 16ch;
  margin: 0;
  color: var(--su-muted);
  font-size: var(--fs-lead);
  line-height: 1.35;
}
.team-card__phone {
  margin: var(--space-3) 0 0;
  color: var(--su-muted);
  font-size: var(--fs-meta);
}
.team-card__phone a { color: inherit; }
.team-card__linkedin {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: #263d7a;
  color: #fff;
}
.team-card__linkedin:hover { background: var(--su-navy); }
.team-card__linkedin svg { width: 1.1rem; height: 1.1rem; }
.team-card--pending { max-width: 22rem; }


/* --- 7.8 Filters ---------------------------------------------------------- */

/* Filtering is entirely client-side, so the controls are dead weight without
   JS. The form stays hidden until alumni.js marks it ready; the full,
   unfiltered list is server-rendered either way, which is the right fallback. */
.filters { display: none; }
.filters.is-ready {
  display: block;
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--su-surface-alt);
  border: 1px solid var(--su-line);
  border-radius: var(--radius);
}
.filters__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  /* Fields stretch to the row height and push their control to the bottom, so
     every control shares a baseline however many lines a label wraps to. */
  align-items: stretch;
}
@media (min-width: 36em) { .filters__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .filters__grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }

.filters__field {
  margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--space-1);
}
.filters__field label {
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--su-body);
}
.filters select,
.filters input[type="search"] {
  /* Every control in the row shares this height, which is what keeps the
     Clear button on the same baseline as the selects. */
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--su-line-strong);
  border-radius: var(--radius-sm);
  background: var(--su-surface);
  color: var(--su-ink);
  font: inherit;
  font-size: var(--fs-meta);
  width: 100%;
}
.filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230f385f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  cursor: pointer;
}
.filters select:hover,
.filters input[type="search"]:hover { border-color: var(--su-navy); }
/* Result count, active-filter chips and "Clear all" sit below the control row so
   nothing in the grid reflows when the count text changes length. */
.filters__status {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--su-line-strong);
  min-height: 2.25rem;
}
.filters__clear { margin-left: auto; }
.filters__clear[hidden] { display: none; }
.filters__count {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--su-ink);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2rem;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  background: var(--su-surface);
  border: 1px solid var(--su-red-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--su-ink);
}
.chip__label { font-weight: 600; }
.chip__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border: 0; border-radius: 50%;
  background: var(--su-red-tint);
  color: var(--su-red-hover);
  font: inherit; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.chip__remove:hover { background: var(--su-red-strong); color: #fff; }

.filters__empty {
  margin: var(--space-8) 0 0;
  padding: var(--space-7);
  text-align: center;
  background: var(--su-surface-alt);
  border: 1px dashed var(--su-line-strong);
  border-radius: var(--radius);
  color: var(--su-muted);
}

/* On small screens the whole control block collapses behind one button so the
   results are not pushed off the bottom of the screen. */
.filters__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--su-surface);
  border: 1px solid var(--su-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-meta);
  color: var(--su-navy-deep);
  cursor: pointer;
}
.filters__toggle svg { width: 12px; height: 12px; transition: transform var(--ease); }
.filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (min-width: 48em) {
  .filters__toggle { display: none; }
  .filters__body { display: block !important; }
}


/* --- 7.9 Chapters --------------------------------------------------------- */

.chapter-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 36em) { .chapter-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .chapter-list { grid-template-columns: repeat(3, 1fr); } }

.chapter {
  position: relative;
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-left: 4px solid var(--su-line-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.chapter[hidden] { display: none; }
.chapter.is-active { border-left-color: var(--su-gold); }
.chapter.is-forming { border-left-color: var(--su-line-strong); }
.chapter__city { margin-bottom: var(--space-1); display: flex; align-items: center; gap: .5rem; }
.chapter__city::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--su-line-strong); flex: none;
}
.chapter.is-active .chapter__city::before { background: var(--su-gold); }
.chapter__meta { font-size: var(--fs-meta); color: var(--su-muted); margin: 0 0 var(--space-3); }
.chapter__status { margin: 0 0 var(--space-3); }
.chapter__note { font-size: var(--fs-meta); color: var(--su-body); margin: 0; }

.pill {
  display: inline-block;
  padding: .15rem var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--su-surface-alt);
  color: var(--su-body);
  border: 1px solid var(--su-line-strong);
}
.chapter.is-active .pill { background: var(--su-gold-tint); color: var(--su-gold-ink); border-color: #f0dcb4; }
/* Recognition: the gold is carried by --su-gold-ink so it stays readable. */
.pill--award { background: var(--su-gold-tint); color: var(--su-gold-ink); border-color: #f0dcb4; }


/* --- 7.10 News list ------------------------------------------------------- */

.news-list { list-style: none; margin: 0; padding: 0; }
.news-item {
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--su-line);
}
.news-item[hidden] { display: none; }
.news-item:first-child { border-top: 0; padding-top: 0; }
.news-item__date {
  font-family: var(--font-head);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--su-red-strong);
  margin: 0;
}
.news-item__title { margin: 0 0 var(--space-2); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }
.news-item__title a { color: inherit; text-decoration: none; }
.news-item__title a:hover { color: var(--su-red-strong); text-decoration: underline; }
.news-item__meta {
  font-size: var(--fs-meta); color: var(--su-muted);
  margin: 0 0 var(--space-2);
}
.news-item__summary { margin: 0; }
@media (min-width: 48em) {
  .news-item { grid-template-columns: 9rem 1fr; }
  .news-item__date { grid-row: span 3; padding-top: .3rem; }
}


/* --- 7.11 Events ---------------------------------------------------------- */

/* Upcoming events read as a dated agenda rather than another card grid. */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.event {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-left: 4px solid var(--su-red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.event[hidden] { display: none; }
.event__date {
  display: grid; place-content: center; text-align: center;
  padding: var(--space-3);
  background: var(--su-red-tint);
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  color: var(--su-red-hover);
  align-self: start;
}
.event__day   { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.event__month { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .2rem; }
.event__body > * { margin: 0; }
.event__title { margin-bottom: var(--space-2); }
.event__meta { font-size: var(--fs-meta); color: var(--su-muted); margin-bottom: var(--space-3); }
.event__actions { margin-top: var(--space-4); }
@media (min-width: 36em) {
  .event { grid-template-columns: 6rem 1fr; align-items: start; }
}


/* --- 7.12 Page head ------------------------------------------------------- */

.page-head {
  position: relative;
  background: var(--su-surface-alt);
  border-bottom: 1px solid var(--su-line);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) 0 clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.page-head h1 { margin-bottom: var(--space-5); }
.page-head__lead {
  font-size: var(--fs-lead);
  color: var(--su-body);
  max-width: 58ch;
  margin: 0;
}
.page-head__actions { margin: var(--space-6) 0 0; }
.page-head--story { background: var(--su-surface); }
.page-head--story h1 { margin-bottom: var(--space-3); }

.breadcrumb { font-size: var(--fs-meta); margin-bottom: var(--space-4); }
.breadcrumb__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem;
  color: var(--su-muted);
}
.breadcrumb__list li + li::before { content: "/"; margin-right: .3rem; opacity: .55; }
.breadcrumb__list a { color: var(--su-muted); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--su-red-strong); text-decoration: underline; }
.breadcrumb__list [aria-current="page"] { color: var(--su-ink); font-weight: 600; }


/* --- 7.13 Lists, tiles, FAQ, gallery -------------------------------------- */

.tri-grid, .tick-list, .plain-list, .faq-list, .gallery, .tile-grid {
  list-style: none; margin: 0; padding: 0;
}
.tri-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 48em) { .tri-grid { grid-template-columns: repeat(3, 1fr); } }
.tri-grid > li {
  padding: var(--space-6);
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-top: 3px solid var(--su-red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.tri-grid > li > :last-child { margin-bottom: 0; }
.band--alt .tri-grid > li { background: var(--su-surface); }

.tile-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 36em) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  background: var(--su-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--su-ink);
  text-decoration: none;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease), color var(--ease);
}
.tile a::after { content: "\2192"; color: var(--su-red-strong); transition: transform var(--ease); }
.tile a:hover {
  border-color: var(--su-red);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--su-red-strong);
}
.tile a:hover::after { transform: translateX(3px); }
.tile--alt a { background: var(--su-navy-deep); border-color: var(--su-navy-deep); color: #fff; }
.tile--alt a::after { color: var(--su-gold); }
.tile--alt a:hover { background: var(--su-navy); border-color: var(--su-navy); color: #fff; }

.tick-list li { padding-left: 1.75rem; position: relative; margin-bottom: var(--space-3); }
.tick-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: -.05em;
  color: var(--su-red-strong);
  font-weight: 700;
}
.plain-list li { margin-bottom: var(--space-4); }
.plain-list li:last-child { margin-bottom: 0; }

.award-list { margin: 0; }
.award-list dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--su-ink);
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 3px solid var(--su-gold);
}
.award-list dt:first-of-type { margin-top: var(--space-4); }
.award-list dd { margin: var(--space-2) 0 0 var(--space-4); color: var(--su-body); }

.faq-list { border-top: 1px solid var(--su-line); }
.faq { border-bottom: 1px solid var(--su-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0;
  min-height: var(--tap);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--su-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .625rem; height: .625rem;
  border-right: 2px solid var(--su-red-strong);
  border-bottom: 2px solid var(--su-red-strong);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { color: var(--su-red-strong); }
.faq__answer { padding: 0 0 var(--space-5); max-width: 68ch; }
.faq__answer > :last-child { margin-bottom: 0; }

.gallery { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery__photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--su-line);
}
.gallery__caption { font-size: var(--fs-small); color: var(--su-muted); margin: var(--space-2) 0 0; }


/* --- 7.14 Notices --------------------------------------------------------- */

.notice {
  padding: var(--space-5) var(--space-6);
  background: var(--su-red-tint);
  border: 1px solid var(--su-red-line);
  border-left: 4px solid var(--su-red);
  border-radius: var(--radius-sm);
  color: var(--su-body);
}
.notice strong {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--su-red-hover);
  margin-bottom: var(--space-1);
}
.band--red .notice, .band--navy .notice {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  border-left-color: #fff;
  color: #fff;
}
.band--red .notice strong, .band--navy .notice strong { color: #fff; }


/* ===========================================================================
   8. PAGE-SPECIFIC BLOCKS
   =========================================================================== */

/* Homepage — the signed note from Alumni Relations. */
.message-note {
  position: relative;
  padding-left: var(--space-6);
  border-left: 3px solid var(--su-red);
}
.message-note p { font-size: var(--fs-lead); color: var(--su-body); }
.message-note__sign {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--su-ink);
  font-size: var(--fs-body) !important;
}
.message-note__sign span { display: block; font-weight: 400; font-size: var(--fs-meta); color: var(--su-muted); }

/* Global network teaser and contact — asymmetric, top-aligned. */
.global-teaser, .contact-grid { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 48em) {
  .global-teaser { grid-template-columns: 1fr 1fr; align-items: center; }
  .contact-grid  { grid-template-columns: 1.15fr .85fr; }
}
.global-teaser__map { color: var(--su-navy); }
.map-motif { width: 100%; height: auto; }
.map-motif__marker { fill: var(--su-red); }

.contact-card {
  padding: var(--space-6);
  background: var(--su-surface-alt);
  border: 1px solid var(--su-line);
  border-top: 3px solid var(--su-red);
  border-radius: var(--radius);
}
.contact-card > :last-child { margin-bottom: 0; }

/* Story detail page. */
.story__photo {
  width: 100%; max-height: 26rem; object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-7);
}
.story__hook {
  font-family: var(--font-head);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.4;
  color: var(--su-ink);
  padding-left: var(--space-5);
  border-left: 3px solid var(--su-red);
  margin-bottom: var(--space-6);
}
.story__meta, .story__now { color: var(--su-muted); margin: 0 0 var(--space-2); font-size: var(--fs-meta); }
.story__now { color: var(--su-body); font-weight: 600; }
.story__body { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* Institution list on about.php. */
.card--institution .card__name { font-size: var(--fs-h3); }
.card--institution .card__tag { margin-top: var(--space-1); margin-bottom: var(--space-3); }


/* ===========================================================================
   9. FOOTER
   =========================================================================== */

/* The University's footer, measured: #333, Raleway 18px/700 uppercase titles
   each followed by a 90px gold rule, Open Sans 14px links in #e8e8e8 with disc
   bullets, a contact list with icons, and a copyright strip over a faint rule. */
.su-footer {
  background: var(--su-surface-dark);
  color: #f3f8f9;
  font-size: 14px;
  line-height: 26px;
  --su-focus: #fff;
  --su-heading: #fff;
  --su-link: #e8e8e8;
  --su-link-hover: var(--su-gold);
}
.su-footer a { color: #e8e8e8; text-decoration: none; }
.su-footer a:hover { color: var(--su-gold); text-decoration: underline; }
.su-footer__top {
  display: grid;
  gap: var(--space-8) var(--space-6);
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);
}
.su-footer__title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  margin: 5px 0 7px;
}
.su-footer__rule {
  width: 90px; height: 0;
  margin: 0 0 14px;
  border: 0;
  border-top: 2px solid var(--su-gold);
}
.su-footer__links { list-style: disc; margin: 0; padding-left: 1.1rem; }
.su-footer__links li { margin: 0 0 7px; }
.su-footer__links .btn__ext { font-size: .8em; }
.su-footer__contact { list-style: none; margin: 0; padding: 0; }
.su-footer__contact li { display: flex; align-items: flex-start; gap: var(--space-3); padding-bottom: 7px; }
.su-footer__contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; color: var(--su-gold); }
.su-footer__contact address { line-height: 24px; }
.su-footer__more { margin: var(--space-2) 0 0; }
.su-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.su-footer__social-label { font-family: var(--font-nav); font-weight: 700; font-size: 13px; }
.su-social--footer a {
  width: 32px; height: 32px;
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.su-social--footer a:hover { background: #fff; border-color: #fff; color: var(--su-red-strong); }
.su-social--footer svg { width: 15px; height: 15px; }

.su-footer__bottom { border-top: 1px solid rgba(180, 167, 167, .52); }
.su-footer__bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}
.su-footer__bottom p { margin: 0; }
.su-footer__policy { margin-left: auto; }
.su-footer__policy span { margin: 0 .6em; opacity: .6; }
.su-footer__legal { flex-basis: 100%; font-size: 13px; line-height: 22px; color: rgba(255, 255, 255, .72); }

@media (min-width: 48em) {
  .su-footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .su-footer__top { grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-6); }
}

/* Back to top — appears once the visitor is well down the page. */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 35;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: var(--su-red-strong);
  color: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease), background-color var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--su-navy-deep); }
.to-top svg { width: 16px; height: 16px; }


/* ===========================================================================
   FORM POPUP MODAL
   =========================================================================== */

body.modal-open {
  overflow: hidden;
}

.form-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s .25s;
}

.form-modal:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

.form-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 29, 68, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.form-modal__dialog {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: min(56rem, 100%);
  max-height: min(90vh, 850px);
  background: var(--su-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  border-top: 4px solid var(--su-gold);
  overflow: hidden;
  transform: scale(.94) translateY(1rem);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}

.form-modal:not([hidden]) .form-modal__dialog {
  transform: scale(1) translateY(0);
}

.form-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(135deg, var(--su-navy-deep) 0%, #0a2952 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: var(--space-4);
}

.form-modal__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-modal__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--su-gold);
}

.form-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  font-weight: 700;
  color: #fff;
}

.form-modal__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.form-modal__ext-link {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  padding: 6px 12px;
  font-size: .8125rem;
}

.form-modal__ext-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
}

.form-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ease), transform var(--ease);
}

.form-modal__close:hover,
.form-modal__close:focus-visible {
  background: var(--su-red-strong);
  color: #fff;
  transform: scale(1.05);
}

.form-modal__body {
  position: relative;
  flex: 1;
  min-height: min(65vh, 600px);
  background: var(--su-surface-alt);
}

.form-modal__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--su-surface);
  z-index: 5;
  transition: opacity .3s ease;
}

.form-modal__loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.form-modal__spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--su-line-strong);
  border-top-color: var(--su-red-strong);
  border-radius: 50%;
  animation: modalSpinner .8s linear infinite;
}

@keyframes modalSpinner {
  to { transform: rotate(360deg); }
}

.form-modal__loader-text {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--su-body);
}

.form-modal__iframe {
  width: 100%;
  height: 100%;
  min-height: min(65vh, 600px);
  border: 0;
  display: block;
}

@media (max-width: 47.999em) {
  .form-modal {
    padding: var(--space-2);
  }
  .form-modal__dialog {
    max-height: 94vh;
    border-radius: var(--radius);
  }
  .form-modal__head {
    padding: var(--space-3) var(--space-4);
  }
  .form-modal__ext-link {
    display: none;
  }
  .form-modal__body,
  .form-modal__iframe {
    min-height: 70vh;
  }
}


/* ===========================================================================
   10. UTILITIES, MOTION, PRINT
   =========================================================================== */

.text-center { text-align: center; }
.measure { max-width: 68ch; }
.mt-0 { margin-top: 0; }

/* The CTA blocks are centred and capped so they read as a deliberate pause. */
.cta-block { text-align: center; max-width: 42rem; margin: 0 auto; }
.cta-block .cluster { justify-content: center; }
.cta-block > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .alumni *, .alumni *::before, .alumni *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card--link:hover, .tile a:hover { transform: none; }
}

@media print {
  .su-header, .su-ticker, .su-footer__social, .filters,
  .filters__toggle, .skip-link, .to-top, .hero__media { display: none !important; }
  .alumni { color: #000; font-size: 11pt; }
  .band--red, .band--navy, .band--dark, .stats, .su-footer {
    background: #fff !important; color: #000 !important;
  }
  .band--red *, .band--navy *, .stats *, .su-footer * { color: #000 !important; }
  .card, .chapter, .event, .tri-grid > li { box-shadow: none; break-inside: avoid; }
  .section { padding: 1rem 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}