/* ==========================================================================
   Brand tokens — edit these to restyle the entire site
   ========================================================================== */

:root {
  /* ---- Primary brand colors (Brand Guidelines v1.0, April 2026) ---- */
  --color-navy:       #003057;   /* Georgia Tech Navy */
  --color-gold:       #B3A369;   /* Georgia Tech Tech Gold */

  /* ---- Secondary palette ---- */
  --color-blush:      #F26A4B;   /* Royal Blush */
  --color-teal:       #2EC4B6;   /* Electric Teal */
  --color-sky:        #5DA9E9;   /* Sky Blue */
  --color-lime:       #A1C349;   /* Fresh Lime */

  /* ---- "Ink" variants of the secondary palette ----
     The published secondary colors are too light to use as text on white or on
     tinted backgrounds. These are darkened to clear WCAG AA (4.5:1) while
     keeping each hue recognizable. Use the bright originals for fills and
     shapes; use these for text. */
  --ink-blush: #c4442a;
  --ink-teal:  #0f6f66;
  --ink-sky:   #1c5f96;
  --ink-lime:  #55631f;

  /* ---- Semantic roles ---- */
  --color-brand:        var(--color-navy);
  --color-brand-dark:   #00223e;   /* darkened navy, hover states */
  --color-brand-light:  #e6ecf1;   /* navy tinted 8%, section backgrounds */
  --color-accent:       var(--color-gold);
  --color-accent-dark:  #9c8d55;   /* darkened gold, hover states */

  /* ACCESSIBILITY NOTE: Tech Gold on white is only 2.5:1 contrast, which fails
     WCAG AA for text. Gold is used here for fills, borders, and accents — never
     for text on a white background. Gold against navy is 5.4:1 and passes. */

  --color-text:         #1a1f26;
  --color-text-muted:   #5a6672;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f5f7f9;
  --color-border:       #dbe1e7;

  /* ---- Typography ----
     Brand fonts are Gilroy (headings) and Proxima Nova (body). Both are
     commercially licensed and cannot be served on a public website without a
     paid webfont license. These are the closest free Google Fonts substitutes:
       Figtree      ≈ Gilroy       (geometric, double-storey 'a')
       Source Sans 3 ≈ Proxima Nova (humanist, highly readable at small sizes)
     If a Gilroy/Proxima webfont license is obtained, swap the names here and
     the whole site updates. */
  --font-heading: "Figtree", "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Source Sans 3", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3:  clamp(2.05rem, 1.6rem + 2.1vw, 3.4rem);
  --step-4:  clamp(2.75rem, 1.9rem + 4vw, 5.25rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(28, 35, 33, 0.08), 0 4px 16px rgba(28, 35, 33, 0.06);
  --max-width: 1140px;
  --measure: 68ch;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, picture, svg { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); text-wrap: pretty; }

a { color: var(--color-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-brand-dark); }

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

/* Screen-reader-only utility */
.visually-hidden {
  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;
  top: -100%;
  left: var(--space-sm);
  background: var(--color-brand);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   Layout
   ========================================================================== */

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

/* Full-bleed variant. Used by the header so the logo sits near the window edge
   rather than indented to the content column, which on a wide monitor pushes it
   ~165px inward and leaves it stranded. */
.wrap--wide {
  max-width: none;
  /* The 1.5vw middle value is deliberately small: at 3vw the padding overtook
     the old 1rem on laptop widths and nudged the logo right instead of left. */
  padding-inline: clamp(1rem, 1.5vw, 2.5rem);
}

main { flex: 1; }

.section { padding-block: var(--space-lg); }
.section--tight { padding-block: var(--space-md); }
.section--alt { background: var(--color-bg-alt); }
.section--brand { background: var(--color-brand-light); }
/* Explicit white — needed when a curved section has to paint over the section
   above it (a transparent background would let the navy hero show through). */
.section--white { background: var(--color-bg); }

/* Navy band with gold rules top and bottom. Used to break up a long page of
   white sections. */
.section--navy {
  background: var(--color-navy);
  border-top: 5px solid var(--color-gold);
  border-bottom: 5px solid var(--color-gold);
}
.section--navy h2,
.section--navy h3 { color: #fff; }
.section--navy p { color: #d9e0e7; }
.section--navy a:not(.btn) { color: var(--color-gold); }

.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-md); }

.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.section-head {
  margin-bottom: var(--space-md);
  max-width: var(--measure);
}
.section-head p { color: var(--color-text-muted); margin-top: var(--space-xs); }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Keeps the logo from being squeezed by a long nav on mid-size screens. */
  flex: 0 0 auto;
}
/* Sized by height so the wordmark's aspect ratio is never distorted. */
.logo img {
  height: 46px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 860px) {
  .logo img { height: 38px; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
}

/* Header nav and its Donate button use the heading font, matching the hero's
   second line. Weights are limited to 500 and 700 because those are the Figtree
   cuts actually loaded — asking for 600 would make the browser fake it. */
.nav a {
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-header .btn {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Tighter than the page-body buttons. The default padding made a ~45px
     button inside a 72px header, which crowded the nav links next to it. */
  padding: 0.5rem 1.15rem;
  line-height: 1.25;
}

/* In the mobile dropdown the button is a primary tap target, so it goes back to
   full size — 44px minimum, per touch-target guidance. */
@media (max-width: 860px) {
  .site-header .btn {
    padding: 0.75rem 1.4rem;
    line-height: 1.4;
  }
}
.nav a:hover { color: var(--color-brand); }
.nav a[aria-current="page"] {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: var(--space-sm);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--color-border); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { display: block; padding: 0.8rem 0; }
  .nav .btn { margin-top: var(--space-xs); text-align: center; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}

.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); color: #fff; }

/* Gold fill takes NAVY text, not white — gold/white is only 1.9:1 and unreadable.
   Gold against navy is 5.4:1 and passes WCAG AA. */
.btn--accent { background: var(--color-accent); color: var(--color-navy); }
.btn--accent:hover { background: var(--color-accent-dark); color: var(--color-navy); }

.btn--outline {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: transparent;
}
.btn--outline:hover { background: var(--color-brand); color: #fff; }

/* Outline button for use on dark backgrounds (the navy hero). */
.btn--outline-light {
  border-color: #fff;
  color: #fff;
  background: transparent;
}
.btn--outline-light:hover { background: #fff; color: var(--color-navy); }

.btn--lg { padding: 0.9rem 2rem; font-size: var(--step-0); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--color-brand-light);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.hero__inner { max-width: 46rem; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-brand);
  margin-bottom: var(--space-xs);
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Interior page banner — navy field, gold rule, and the flame mark set large and
   faint behind the type. The mark is decorative and sits under a z-index so it
   can never interfere with the heading. */
.page-header {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  padding-block: var(--space-lg);
  border-bottom: 6px solid var(--color-gold);
}
.page-header > .wrap { position: relative; z-index: 1; }
.page-header h1 { color: #fff; }
.page-header p {
  color: #d9e0e7;
  margin-top: var(--space-xs);
  /* Wide enough that the About subtitle sits on one line; longer subtitles on
     other pages still wrap rather than running the full container width. */
  max-width: 64ch;
  text-wrap: pretty;
}

/* Short gold rule above the title. */
.page-header h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-gold);
  margin-bottom: var(--space-sm);
}

/* Oversized flame mark, bled off the right edge. */
.page-header::after {
  content: "";
  position: absolute;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  background: url("../images/favicon.png") no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 720px) {
  .page-header { padding-block: var(--space-md); }
  /* On a narrow screen the mark would sit directly behind the text. */
  .page-header::after { display: none; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--color-text-muted); font-size: var(--step--1); flex: 1; }

.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card--link:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  color: inherit;
}

/* Stat blocks */
.stats { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { text-align: left; }
.stat__number {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1;
}
.stat__label { color: var(--color-text-muted); font-size: var(--step--1); margin-top: var(--space-xs); }

/* ==========================================================================
   Events
   ========================================================================== */

.event-list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; }

.event {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.event__date {
  background: var(--color-brand-light);
  border-radius: var(--radius);
  padding: var(--space-xs);
  text-align: center;
}
.event__month {
  text-transform: uppercase;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-brand);
}
.event__day {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand-dark);
}
.event__meta {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.event__body { font-size: var(--step--1); color: var(--color-text-muted); margin-top: var(--space-xs); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; gap: var(--space-sm); }
  .event__date { display: inline-flex; gap: 0.5rem; align-items: baseline; width: auto; justify-self: start; padding: 0.3rem 0.7rem; }
}

/* ---- View switcher (list / calendar) ------------------------------------ */

.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
}
.view-switch__btn {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  white-space: nowrap;
}
.view-switch__btn:hover { color: var(--color-navy); }
.view-switch__btn[aria-pressed="true"] {
  background: var(--color-navy);
  color: #fff;
}

/* ---- Calendar ----------------------------------------------------------- */

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.cal__title { font-size: var(--step-2); margin: 0; }
.cal__nav { display: flex; gap: 0.35rem; }

.cal__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-navy);
}
.cal__btn:hover { border-color: var(--color-navy); background: var(--color-brand-light); }
.cal__btn--text { font-size: var(--step--1); }

.cal__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cal__table th {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding-bottom: 0.5rem;
  text-align: center;
}
.cal__table th abbr { text-decoration: none; }

.cal__cell {
  border: 1px solid var(--color-border);
  vertical-align: top;
  height: 104px;
  padding: 0;
  position: relative;
}
.cal__cell.is-empty { background: var(--color-bg-alt); border-color: transparent; }
.cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--color-gold); }
.cal__cell.is-selected { background: var(--color-brand-light); }

/* Day number on the left, any event icons tucked to the right. */
.cal__dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem 0.15rem;
}
.cal__icon {
  font-size: 0.72rem;
  line-height: 1;
  /* Emoji render taller than their box; nudge them onto the number's baseline. */
  position: relative;
  top: -1px;
  white-space: nowrap;
}

.cal__daynum {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--color-navy);
  padding: 0;
}

/* Same treatment in the list view and the day-detail panel. */
.event__icon { font-size: 0.85em; margin-left: 0.15em; }
.cal__daynum--plain { color: var(--color-text-muted); font-weight: 500; padding: 0.35rem 0.5rem 0.15rem; }

.cal__day {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  padding: 0 0 0.35rem;
}
.cal__day:hover { background: var(--color-brand-light); }

.cal__chips { display: block; padding: 0 0.35rem; }
.cal__chip {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 600;
  background: var(--color-navy);
  color: #fff;
  border-radius: 4px;
  padding: 2px 5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal__more {
  display: block;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  padding-left: 5px;
}

/* Dots replace chips on narrow screens, where a title never fits legibly. */
.cal__dots { display: none; gap: 3px; padding: 0 0.5rem; }
.cal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-navy); }

@media (max-width: 720px) {
  .cal__cell { height: 62px; }
  .cal__chips, .cal__more { display: none; }
  .cal__dots { display: flex; }
  .cal__daynum { font-size: var(--step--1); padding: 0.3rem 0.4rem 0.2rem; }
  .cal__table th { font-size: 0.68rem; }
}

.cal__hint {
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}

.cal__detail {
  margin-top: var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-gold);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
}
.cal__detail-date {
  font-size: var(--step-0);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.cal__event + .cal__event {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.cal__event h5 { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-navy); }

.empty-state {
  padding: var(--space-lg);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
}
.empty-state p { max-width: none; }

/* ==========================================================================
   Links page
   ========================================================================== */

.link-group + .link-group { margin-top: var(--space-md); }
.link-group h3 { margin-bottom: var(--space-sm); }

.link-list { display: grid; gap: var(--space-xs); list-style: none; }

.link-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.link-item:hover { border-color: var(--color-brand); background: var(--color-brand-light); color: inherit; }
.link-item__title { font-weight: 600; }
.link-item__desc { color: var(--color-text-muted); font-size: var(--step--1); }

/* ==========================================================================
   Donate
   ========================================================================== */

.donate-panel {
  background: var(--color-bg);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow);
}


/* ==========================================================================
   Store
   ========================================================================== */

.notice {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p { max-width: none; }

.product-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.product { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); display: flex; flex-direction: column; }
.product__image { aspect-ratio: 4 / 3; background: var(--color-brand-light); display: grid; place-items: center; color: var(--color-brand); font-size: var(--step--1); }
.product__image img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.product__price { font-family: var(--font-heading); font-size: var(--step-1); font-weight: 700; color: var(--color-brand); }
.product__desc { font-size: var(--step--1); color: var(--color-text-muted); flex: 1; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-brand);
  color: #fff;
  padding-block: var(--space-lg) var(--space-md);
  margin-top: var(--space-xl);
}
.site-footer a { color: #fff; }
.site-footer h4 { color: #fff; font-size: var(--step-0); margin-bottom: var(--space-xs); }

.footer-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.footer-grid ul { list-style: none; display: grid; gap: 0.35rem; }
.footer-grid a { font-size: var(--step--1); text-decoration: none; opacity: 0.9; }
.footer-grid a:hover { opacity: 1; text-decoration: underline; }
.site-footer p { font-size: var(--step--1); opacity: 0.9; }

.footer-bottom {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  font-size: var(--step--1);
  opacity: 0.85;
}

/* ==========================================================================
   Tri-brand lockup (CMN mandated)
   ========================================================================== */

.tri-brand {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tri-brand__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}
.tri-brand__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step--1);
}
.tri-brand__marks span[aria-hidden] { opacity: 0.4; font-weight: 400; }

/* ==========================================================================
   Funding split (75% / 25%)
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.split__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.split__figure {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}
.split__item h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.split__item p { color: var(--color-text-muted); font-size: var(--step--1); }

.split--compact { margin-block: var(--space-sm); }
.split--compact .split__item { padding: var(--space-sm) var(--space-md); }
.split--compact .split__figure { font-size: var(--step-2); }

/* ==========================================================================
   Misc utilities
   ========================================================================== */

.lead {
  font-size: var(--step-1);
  color: var(--color-text);
}
/* An opening line meant to span the container rather than sit at reading width. */
.lead--wide { max-width: 52rem; }

/* Full-width body text.
   Paragraphs normally cap at 68 characters per line; here they run the width of
   the container instead. Longer lines are harder to track back from, so the
   leading is opened up to compensate — that vertical space is what keeps a long
   measure readable. */
.prose-wide {
  margin-top: var(--space-sm);
}
.prose-wide p {
  max-width: none;
  line-height: 1.85;
}
.prose-wide p + p { margin-top: var(--space-md); }

.input {
  width: 100%;
  padding: 0.7rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: 0.4rem;
}
.input:focus { border-color: var(--color-brand); }

.fine-print {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.notice--todo {
  border-left-color: var(--color-blush);
  background: #fdeeea;
}

.btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* Gold hairline under the sticky header, tying the nav to the brand. */
.site-header { border-bottom: 1px solid var(--color-border); box-shadow: inset 0 -4px 0 -1px var(--color-gold); }

/* ==========================================================================
   WHIMSY LAYER
   Personality lives here: color, shape, and motion. The page structure and
   typography stay disciplined so the site still reads as credible to donors
   and corporate sponsors.
   ========================================================================== */

/* ---- Photo hero --------------------------------------------------------- */
/* A photo behind a navy scrim. The scrim is what keeps white text legible over
   an unpredictable image — without it, contrast depends on whatever happens to
   be in the top-left of the photo that week.
   ------------------------------------------------------------------------
   TO SWAP THE HERO PHOTO: put the file in images/ and change the filename on
   the next line. That's the only edit needed.

   The path is declared here rather than in the HTML on purpose. A relative
   url() inside a CSS custom property resolves against the stylesheet that uses
   it, not the page — so setting it from an inline style attribute silently
   looks for css/images/... and fails. Keeping it here keeps "../" correct. */

/* Three stacked layers: photos at the bottom, navy scrim over them, text on top.
   The scrim is a separate element rather than part of the background so the
   photos can cross-fade underneath it without the overlay flickering.
   Images are listed in tools/build-pages.js (HERO_SLIDES). */
.hero--photo {
  background-color: var(--color-navy);
  border-bottom: 0;
  padding-block: calc(var(--space-xl) + 1rem) calc(var(--space-xl) + 2rem);
  isolation: isolate;
}
/* Hero buttons take the heading font so they match the headline above them.
   Weight 700 because that's a Figtree cut we actually load — 600 would be faked. */
.hero .btn {
  font-family: var(--font-heading);
  font-weight: 700;
}

.hero--photo h1 { color: #fff; }
.hero--photo .hero__eyebrow { color: var(--color-gold); }
.hero--photo .hero__lead { color: #e2e8ee; }

.hero__slides { position: absolute; inset: 0; z-index: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
/* The first slide carries this class in the HTML, so a single visible image is
   guaranteed even if the script never runs. */
.hero__slide.is-active { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 48, 87, 0.94) 0%,
    rgba(0, 48, 87, 0.86) 45%,
    rgba(0, 48, 87, 0.55) 100%
  );
}

/* Narrow screens give the photo less room, so darken evenly instead of fading
   the scrim out to one side. */
@media (max-width: 860px) {
  .hero__scrim { background: rgba(0, 48, 87, 0.90); }
}

/* A cross-fade is motion. Anyone who has asked for less of it gets the first
   image only, held still. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* Two-line stacked headline.
   When both lines are full sentences, the second is stepped down so it reads as
   a follow-through rather than competing with the first for attention. */
.hero__line { display: block; }
.hero__line--sub {
  font-size: 0.52em;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 0.45em;
  color: var(--color-gold);
  max-width: 22ch;
}

/* ---- Pull quote --------------------------------------------------------- */

.pullquote {
  border: 0;
  margin: 0;
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-left: 6px solid var(--color-gold);
  max-width: 46rem;
}
.pullquote p {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-navy);
  max-width: none;
  text-wrap: balance;
}
.pullquote footer {
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.section--brand .pullquote p,
.hero .pullquote p { color: inherit; }


/* ---- Letter (Executive Director) ---------------------------------------- */

.letter {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 780px) {
  .letter { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Just the photo — the name and role appear in the sign-off at the end of the
   letter, so repeating them here was redundant. */
.letter__aside { position: sticky; top: 104px; }
@media (max-width: 780px) { .letter__aside { position: static; } }

/* Full width of the source photo so both shoulders are in frame. 380px wide and
   ~309 tall, which lands the bottom edge level with the end of paragraph two. */
.letter__portrait {
  width: 100%;
  aspect-ratio: 380 / 309;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border-bottom: 5px solid var(--color-gold);
}
.letter__role { font-size: var(--step--1); color: var(--color-text-muted); }

/* Centred within the space left by the photo, so the letter sits balanced
   rather than crowding the left edge of its column. */
.letter__body {
  max-width: 58ch;
  margin-inline: auto;
}
.letter__body > * + * { margin-top: var(--space-sm); }
.letter__body p { max-width: none; }
.letter__salutation {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--color-navy);
}
.letter__signoff { margin-top: var(--space-md); }
.letter__signoff strong { display: block; font-size: var(--step-1); font-family: var(--font-heading); color: var(--color-navy); }

/* ---- Executive board ---------------------------------------------------- */

/* Two per row, not three. The longest strings here — "VICE PRESIDENT OF
   COMMUNITY ENGAGEMENT" and "Class of 2027 | Economics + International Affairs"
   — need roughly 340px of text column, which a third-width card can't give
   without wrapping every one of them. */
.board-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  list-style: none;
}

.board-member {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.board-member__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-brand-light);
  /* Gold ring ties the headshots to the brand without tinting the photo. */
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-gold);
}

/* min-width:0 lets a long name wrap instead of pushing the column wider than
   the card. Grid children default to min-width:auto, which would overflow. */
.board-member__body { min-width: 0; }

.board-member__role {
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  /* Tightened from 0.06em — over a 38-character title that tracking alone was
     costing ~20px and forcing a wrap. */
  letter-spacing: 0.04em;
  color: var(--color-navy);
  line-height: 1.25;
}
.board-member__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
  margin-top: 0.1rem;
}
/* "Class of 2027 | Biomedical Engineering" — wraps to a second line on narrow
   cards, which is fine; the separator stays with the text before it. */
.board-member__detail {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-top: 0.25rem;
}
/* The pipe is a divider, not punctuation — lighten it so the words lead. */
.board-member__sep { color: var(--color-border); }

/* Short personal line. Kept visually distinct from the factual detail above it
   so it reads as the person's own voice rather than more directory data. */
.board-member__note {
  font-size: var(--step--1);
  color: var(--color-navy);
  font-style: italic;
  line-height: 1.35;
  margin-top: 0.4rem;
}

/* Smallest text on the card — it's reference detail, not something to read.
   0.78rem still clears the 4.5:1 contrast requirement in both colours below. */
.board-member__email {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
  /* Long addresses would otherwise widen the card past the grid column. */
  overflow-wrap: anywhere;
}
.board-member__email a { color: var(--color-brand); }

.board-member--open { border-style: dashed; background: var(--color-bg-alt); }
.board-member--open .board-member__photo { opacity: 0.45; box-shadow: none; }
.board-member--open .board-member__name {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-text-muted);
}

@media (max-width: 420px) {
  .board-member { grid-template-columns: 64px minmax(0, 1fr); }
  .board-member__photo { width: 64px; height: 64px; }
}

/* ---- Contact matrix ----------------------------------------------------- */
/* A grid of "for X, email Y" cards. Two per row on desktop, one on mobile. */

.contact-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  list-style: none;
  margin-top: var(--space-md);
}

.contact-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-sm) var(--space-md);
}
.contact-card h3 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin-bottom: 0.3rem;
}
.contact-card a {
  font-size: var(--step--1);
  color: var(--color-brand);
  /* Addresses this long would otherwise push the card wider than its column. */
  overflow-wrap: anywhere;
}

/* ---- Family cards ------------------------------------------------------- */

.family-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.family {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.family__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-brand-light);
}
.family__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.family__name { font-family: var(--font-heading); font-size: var(--step-1); font-weight: 700; color: var(--color-navy); }
.family__meta { font-size: var(--step--1); color: var(--color-gold); font-weight: 600; }
.family__meta { color: #8a7c48; }
.family__story { font-size: var(--step--1); color: var(--color-text-muted); flex: 1; }

/* ---- Navy hero ---------------------------------------------------------- */

.hero--navy {
  background: var(--color-navy);
  border-bottom: 0;
  /* extra bottom padding so the curved white section below can overlap
     without crowding the buttons */
  padding-bottom: calc(var(--space-xl) + 1rem);
}
.hero--navy h1 { color: #fff; }
.hero--navy .hero__eyebrow { color: var(--color-gold); }
.hero--navy .hero__lead { color: #d9e0e7; }

/* ---- Floating balloons -------------------------------------------------- */
/* Currently unused — the home hero is solid navy. Kept because the shapes are
   on-brand (they echo the CMN balloon) and may be wanted on another page.
   To use: add a .balloons container with .balloon children inside a .hero. */

.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }

.balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.balloon {
  position: absolute;
  width: var(--size, 90px);
  aspect-ratio: 1 / 1.18;
  background: var(--c, var(--color-sky));
  /* teardrop/balloon silhouette — round on top, tapered at the bottom */
  border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  opacity: var(--o, 0.16);
  animation: balloon-float var(--dur, 11s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.balloon::after {
  content: "";
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 9%;
  background: var(--c, var(--color-sky));
  border-radius: 0 0 3px 3px;
}

@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-22px) rotate(2deg); }
}

/* ---- Curved section edges ----------------------------------------------- */
/* A soft rounded top edge instead of a hard horizontal rule. Cheaper and far
   more robust than SVG wave dividers, and it survives any viewport width. */

.section--curved {
  border-radius: 2.5rem 2.5rem 0 0;
  margin-top: -2.5rem;
  position: relative;
  z-index: 1;
}
.section--curved-both {
  border-radius: 2.5rem;
  margin-inline: var(--space-sm);
}

@media (max-width: 640px) {
  .section--curved { border-radius: 1.5rem 1.5rem 0 0; margin-top: -1.5rem; }
  .section--curved-both { border-radius: 1.5rem; margin-inline: 0.5rem; }
}

/* ---- Accent-colored cards ----------------------------------------------- */
/* Bright palette color as a thick top rule and a matching dot; the darkened
   "ink" version for the heading text so contrast still passes. */

.card--accent {
  border-top: 6px solid var(--accent, var(--color-navy));
  position: relative;
}
.card--accent h3 { color: var(--accent-ink, var(--color-navy)); }
.card--accent h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--color-navy));
  margin-right: 0.5rem;
  vertical-align: 0.1em;
}

.accent--sky   { --accent: var(--color-sky);   --accent-ink: var(--ink-sky); }
.accent--teal  { --accent: var(--color-teal);  --accent-ink: var(--ink-teal); }
.accent--blush { --accent: var(--color-blush); --accent-ink: var(--ink-blush); }
.accent--lime  { --accent: var(--color-lime);  --accent-ink: var(--ink-lime); }
.accent--gold  { --accent: var(--color-gold);  --accent-ink: var(--color-navy); }

/* Slightly livelier hover on linked cards */
.card--link:hover { transform: translateY(-4px) rotate(-0.4deg); }

/* ---- Stats ------------------------------------------------------------- */

.stat__number { transition: color 0.2s ease; }
.stat--sky   .stat__number { color: var(--ink-sky); }
.stat--teal  .stat__number { color: var(--ink-teal); }
.stat--blush .stat__number { color: var(--ink-blush); }
.stat--lime  .stat__number { color: var(--ink-lime); }

/* Reserve the width the final number will occupy so the count-up doesn't
   reflow the layout as digits are added. */
.stat__number[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Motion preferences ------------------------------------------------- */
/* The global reduced-motion rule near the top of this file already kills these
   animations; this makes the balloon case explicit and stops any drift. */

@media (prefers-reduced-motion: reduce) {
  .balloon { animation: none; }
  .card--link:hover { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { color: #000; }
}