/* =========================================================================
   OUIHC Alumni — design system
   Aesthetic register: Vincent's Club / Hawks' Club / archival sports heritage.
   Palette: Oxford navy ink, archival cream, hairline gold, claret accent.
   Typography: Source Serif 4 display + EB Garamond body + Inter for UI/labels.
   No drop shadows on UI. No rounded buttons. No gradients except hero overlay.
   Generous whitespace, strict rhythm, photo-led.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Ink & paper */
  --ink:        #0c1d3a;          /* Oxford navy — used everywhere as the dark colour */
  --ink-2:      #1a2a4a;          /* slightly lifted navy for muted-but-still-dark UI */
  --ink-soft:   rgba(12, 29, 58, 0.72);
  --paper:      #fbfaf4;          /* warm archival cream, primary background */
  --paper-2:    #f4f1e6;          /* deeper cream for contrast bands */
  --paper-3:    #ebe6d4;          /* card sand, dividers in cream sections */

  /* Accents — used sparingly */
  --gold:       #b89554;          /* hairline ornament, meta */
  --gold-deep:  #8c6f3c;          /* stronger gold for hover */
  --claret:     #8a1c2b;          /* CTA / live indicator only */
  --varsity:    #c0c0c0;          /* silver tier accent */
  --bronze:     #a06d3b;          /* bronze tier accent */
  --legacy:     #d4af37;          /* gold tier accent */

  /* Lines */
  --rule:       rgba(12, 29, 58, 0.16);
  --rule-soft:  rgba(12, 29, 58, 0.08);
  --rule-cream: rgba(251, 250, 244, 0.22);

  /* Type */
  --serif-display: 'Source Serif 4', 'Source Serif Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --serif-body:    'EB Garamond', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --blackletter:   'UnifrakturCook', 'UnifrakturMaguntia', 'Cloister Black', 'Old English Text MT', serif;

  /* Sizing */
  --container:    1240px;
  --container-narrow: 880px;
  --gutter:       2rem;
  --gutter-lg:    3rem;
  --rule-h:       1px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--gold-deep); }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
}

.display-1 {
  font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.display-2 {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--gold);
}

.lede {
  font-family: var(--serif-body);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 400;
  max-width: 60ch;
}

.dateline {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

p { margin: 0 0 1em; max-width: 68ch; }

/* Drop cap utility for editorial pages */
.dropcap::first-letter {
  font-family: var(--serif-display);
  float: left;
  font-size: 4.6rem;
  line-height: 0.9;
  padding: 0.4rem 0.6rem 0 0;
  font-weight: 400;
  color: var(--ink);
}

/* Blackletter accent — used for monogram moments only */
.blackletter {
  font-family: var(--blackletter);
  font-weight: 400;
  font-style: normal;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section--cream { background: var(--paper-2); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--paper); }
.section--ink .eyebrow { color: var(--gold); }
.section--ink a { color: var(--paper); border-bottom-color: rgba(251,250,244,0.4); }

/* Pull quote / archival flourish */
.flourish {
  display: flex; align-items: center; gap: 1rem;
  margin: 2rem auto;
  max-width: 12rem;
  color: var(--gold);
}
.flourish::before, .flourish::after {
  content: ''; flex: 1; height: 1px; background: currentColor;
}
.flourish__mark {
  font-family: var(--serif-display);
  font-size: 0.95rem; letter-spacing: 0.3em;
}

/* ---------- Crest sizing ---------- */
.crest { display: block; }
.crest--sm { width: 44px; height: auto; }     /* header/inline */
.crest--cream { /* nothing — colour baked into PNG */ }
.crest--navy  { /* nothing */ }
.crest--lg { width: clamp(120px, 14vw, 200px); height: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn--primary:hover {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--cream {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.btn--cream:hover {
  background: transparent; color: var(--paper); border-color: var(--paper);
}
.btn--ghost {
  border-color: rgba(12,29,58,0.32);
  color: var(--ink);
}
.section--ink .btn--ghost { border-color: rgba(251,250,244,0.32); color: var(--paper); }
.section--ink .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn .arrow {
  width: 1em; height: 1em; flex-shrink: 0;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(251,250,244,0.08);
  position: sticky; top: 0; z-index: 50;
  padding: 0.85rem 0;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.site-header__brand {
  display: flex; align-items: center; gap: 0.85rem;
  color: var(--paper);
  text-decoration: none;
}
.site-header__brand:hover { color: var(--paper); }
.site-header__brand .crest { width: 38px; }
.site-header__wordmark {
  display: flex; flex-direction: column; line-height: 1.1;
}
.site-header__wordmark-line1 {
  font-family: var(--serif-display);
  font-size: 1rem; letter-spacing: 0.02em;
}
.site-header__wordmark-line2 {
  font-family: var(--sans);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.18rem;
}

.site-nav {
  display: flex; align-items: center; gap: 2.2rem;
}
.site-nav a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}
.site-nav__login {
  border: 1px solid rgba(251,250,244,0.4);
  padding: 0.55rem 1rem !important;
}
.site-nav__login:hover { background: var(--paper); color: var(--ink) !important; border-color: var(--paper); }

.menu-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent; border: 0; padding: 0;
  position: relative; cursor: pointer;
}
.menu-toggle span {
  display: block; position: absolute; left: 6px; right: 6px; height: 1px;
  background: var(--paper); transition: transform 0.2s ease, top 0.2s ease;
}
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { top: 24px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid rgba(251,250,244,0.08);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .site-nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .site-nav a { padding: 1rem 2rem; border-bottom: 1px solid rgba(251,250,244,0.06); }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-nav__login { margin: 0.6rem 2rem; }
  .site-header__wordmark-line2 { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 76vh, 800px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.15) brightness(0.78);
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,29,58,0.32) 0%, rgba(12,29,58,0.12) 35%, rgba(12,29,58,0.92) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero__inner .eyebrow { color: var(--gold); }
.hero__inner .eyebrow::before { background: var(--gold); }
.hero__title {
  color: var(--paper);
  max-width: 18ch;
  margin-bottom: 1.4rem;
}
.hero__lede {
  color: rgba(251,250,244,0.86);
  font-family: var(--serif-body);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  font-style: italic;
  max-width: 56ch;
  margin: 0 0 2rem;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__caption {
  position: absolute; right: var(--gutter); bottom: 1rem;
  font-family: var(--sans);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251,250,244,0.55);
  z-index: 2;
}
@media (max-width: 700px) {
  .hero__caption { position: static; padding: 0.6rem var(--gutter) 1rem; }
}

/* Smaller hero variant */
.hero--page {
  min-height: clamp(440px, 56vh, 600px);
}

/* ---------- Stat strip ---------- */
.stat-strip {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 2.5rem 0;
}
.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat {
  text-align: left;
  border-left: 1px solid var(--rule);
  padding-left: 1.4rem;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num {
  font-family: var(--serif-display);
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}
/* Link variant: same look as a div.stat, but tappable + subtle affordance */
a.stat--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, opacity 160ms ease;
}
a.stat--link:hover .stat__num,
a.stat--link:focus-visible .stat__num {
  color: var(--accent, #862633);
}
a.stat--link:hover,
a.stat--link:focus-visible { outline: none; }
a.stat--link:focus-visible .stat__label { color: var(--accent, #862633); }
@media (max-width: 760px) {
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------- Editorial grid ---------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.editorial--reverse > :first-child { order: 2; }
.editorial__media img { width: 100%; }
.editorial__media figcaption {
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}
@media (max-width: 800px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial--reverse > :first-child { order: unset; }
}

/* ---------- Three-up cards ---------- */
.threeup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
@media (max-width: 880px) { .threeup { grid-template-columns: 1fr; gap: 1.6rem; } }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.8rem;
  display: flex; flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover { border-color: var(--ink); }
.card__eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.6rem;
}
.card__title {
  font-family: var(--serif-display);
  font-size: 1.4rem; line-height: 1.2;
  margin: 0 0 0.6rem;
}
.card__body {
  font-size: 0.98rem; color: var(--ink-soft); margin: 0 0 1.2rem;
}
.card__cta {
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: auto;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  align-self: flex-start;
}

/* Photo card variant — image top */
.card--photo { padding: 0; border: 0; background: transparent; }
.card--photo .card__media {
  aspect-ratio: 4/3; overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 1.2rem;
}
.card--photo .card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.card--photo:hover .card__media img { transform: scale(1.04); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 4.5rem 0 2.5rem;
  margin-top: 6rem;
}
.footer-top {
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-cream);
  margin-bottom: 2.5rem;
}
.footer-brand .crest { width: 88px; margin: 0 auto 1rem; }
.footer-brand__line1 {
  font-family: var(--serif-display);
  font-size: 1.15rem; margin: 0;
}
.footer-brand__line2 {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin: 0.3rem 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.footer-grid p, .footer-grid li {
  font-size: 0.92rem;
  color: rgba(251,250,244,0.78);
  line-height: 1.6;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 0.18rem 0; }
.footer-grid a { color: rgba(251,250,244,0.85); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-grid a:hover { color: var(--paper); border-bottom-color: var(--gold); }
.footer-bottom {
  border-top: 1px solid var(--rule-cream);
  margin-top: 3rem; padding-top: 1.4rem;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(251,250,244,0.55);
}
.footer-bottom a { color: rgba(251,250,244,0.7); }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.6rem; text-align: center; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Honour Roll ---------- */
.honour-roll { padding: 0; }
.honour-roll__tier {
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}
.honour-roll__tier:last-child { border-bottom: 0; }
.honour-roll__head {
  text-align: center;
  margin-bottom: 2.4rem;
}
.honour-roll__head .badge {
  margin: 0 auto 1.2rem;
}
.honour-roll__heading {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin: 0 0 0.4rem;
}
.honour-roll__sub {
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.honour-roll__names {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 2.5rem;
  list-style: none; padding: 0; margin: 0;
  max-width: 920px; margin: 0 auto;
}
.honour-roll__names li {
  font-family: var(--serif-display);
  font-size: 1.05rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  letter-spacing: 0.005em;
}
@media (max-width: 760px) {
  .honour-roll__names { grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.6rem; }
}
@media (max-width: 480px) {
  .honour-roll__names { grid-template-columns: 1fr; }
}

/* Honour Roll: skeleton, empty, error, anon, pledge tag */
.honour-roll__skeleton {
  height: 1.4rem;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: hr-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes hr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.honour-roll__empty,
.honour-roll__anon,
.honour-roll__error {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 0.8rem;
}
.honour-roll__error { color: var(--err, #a13544); }
.honour-roll__pledge-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #01696F);
  background: rgba(1, 105, 111, 0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
}
.honour-roll__donor-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(1, 105, 111, 0.25);
  transition: color 120ms ease, border-color 120ms ease;
}
.honour-roll__donor-link:hover,
.honour-roll__donor-link:focus {
  color: var(--accent, #01696F);
  border-bottom-color: var(--accent, #01696F);
}

/* ---------- Donor & Officer badges ---------- */
.badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  border: 1px solid;
  transition: transform 0.18s ease;
}
.badge--lg { width: 56px; height: 56px; font-size: 0.78rem; }
.badge__letter {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
}

/* Tier colours — solid fills, ringed where appropriate */
.badge--teammate {
  background: var(--bronze); color: var(--paper); border-color: var(--bronze);
}
.badge--varsity  {
  background: var(--varsity); color: var(--ink); border-color: #9a9a9a;
}
.badge--legacy   {
  background: var(--legacy);  color: var(--ink); border-color: #b8941f;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 3px var(--legacy),
    inset 0 0 0 1px rgba(255,255,255,0.45);
}
.badge--officer {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* [data-tier] containers — layout helper only. No tooltip / help cursor:
   the visible badge and heading already communicate the tier. */
[data-tier] {
  position: relative;
}

/* ---------- Forms ---------- */
.field {
  display: flex; flex-direction: column;
  margin-bottom: 1.2rem;
}
.field label {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
  font-family: var(--serif-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.18s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--ink);
}
.checkbox-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.checkbox-row input[type="checkbox"] { margin-top: 0.32rem; flex-shrink: 0; }

/* ---------- Directory ---------- */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.directory-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.4rem;
  display: flex; gap: 1rem;
  align-items: center;
  transition: border-color 0.18s ease;
  cursor: pointer;
}
.directory-card:hover { border-color: var(--ink); }
.directory-card__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-3);
  flex-shrink: 0;
}
.directory-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.directory-card__name {
  font-family: var(--serif-display);
  font-size: 1.05rem; line-height: 1.2;
  margin: 0;
}
.directory-card__meta {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}
.directory-card__badges {
  display: flex; gap: 0.4rem; margin-top: 0.5rem;
}
.directory-card__badges .badge { width: 22px; height: 22px; font-size: 0.55rem; }
.directory-card__badges .badge--legacy { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--legacy); }

/* Directory filters */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  padding: 1.5rem 0; margin-bottom: 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.filter-pill {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
}
.filter-pill[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ---------- Map ---------- */
#alumni-map {
  width: 100%; height: 70vh; min-height: 520px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.map-legend {
  display: flex; gap: 1.5rem; padding: 1rem 0;
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.map-legend__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.map-legend__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(12,29,58,0.66);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
  padding: 2rem;
}
.modal[open], .modal[data-open="true"] { display: flex; }
.modal__panel {
  background: var(--paper);
  max-width: 520px; width: 100%;
  padding: 2.5rem;
  position: relative;
  border: 1px solid var(--rule);
}
.modal__close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: 0;
  width: 32px; height: 32px;
  font-size: 1.4rem; line-height: 1;
}

/* ---------- Page intro ---------- */
.page-intro {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.page-intro__title {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
}
.page-intro__lede {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Timeline (heritage) ---------- */
.timeline {
  display: grid;
  gap: 0;
  position: relative;
}
.timeline__entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2.5rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--rule);
}
.timeline__entry:last-child { border-bottom: 1px solid var(--rule); }
.timeline__year {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 300;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
  line-height: 1;
  padding-top: 0.3rem;
}
.timeline__entry h3 { margin-top: 0; }
.timeline__entry p { color: var(--ink-soft); }
.timeline__entry .editorial__media { margin-top: 1.5rem; }
@media (max-width: 700px) {
  .timeline__entry { grid-template-columns: 1fr; gap: 0.8rem; }
}

/* ---------- Archive grid ---------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.archive-tile {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-3);
  cursor: pointer;
}
.archive-tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: none;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.archive-tile:hover img { transform: scale(1.04); }
.archive-tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem;
  background: linear-gradient(180deg, transparent, rgba(12,29,58,0.85));
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 700px) { .archive-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; } }
@media (max-width: 480px) { .archive-grid { grid-template-columns: 1fr; } }

/* ---------- Events ---------- */
.event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 2rem; align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.event-row:last-child { border-bottom: 1px solid var(--rule); }
.event-row__date {
  text-align: center;
  border-right: 1px solid var(--rule);
  padding-right: 2rem;
}
.event-row__day {
  font-family: var(--serif-display);
  font-size: 2.4rem; font-weight: 300; line-height: 1;
}
.event-row__month {
  font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-top: 0.4rem; color: var(--ink-soft);
}
.event-row h3 { margin: 0 0 0.3rem; }
.event-row__meta {
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .event-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .event-row__date { display: flex; align-items: baseline; gap: 0.6rem; border-right: 0; padding-right: 0; text-align: left; }
}

/* ---------- Quote / pull ---------- */
.pullquote {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.3;
  font-style: italic;
  max-width: 30ch;
  margin: 3rem auto;
  text-align: center;
  color: var(--ink);
  position: relative;
}
.pullquote::before {
  content: '\201C';
  display: block;
  font-size: 5rem;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 1rem;
}
.pullquote cite {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
  margin-top: 1.2rem;
}

/* Pullquote with portrait — used on Endowment for Hillary Scanlon */
.pullquote-figure {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 3rem auto;
  max-width: 880px;
}
.pullquote-figure__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  filter: saturate(0.95);
}
.pullquote-figure .pullquote {
  margin: 0;
  text-align: left;
  max-width: none;
}
.pullquote-figure .pullquote::before {
  margin-left: 0;
}
@media (max-width: 720px) {
  .pullquote-figure { grid-template-columns: 1fr; gap: 1.5rem; }
  .pullquote-figure__photo { max-width: 260px; margin: 0 auto; }
  .pullquote-figure .pullquote { text-align: center; }
}

/* ---------- Two-column donations ---------- */
.donation-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
}
.donation-split__half {
  padding: clamp(2rem, 4vw, 3.5rem);
}
.donation-split__half + .donation-split__half {
  border-left: 1px solid var(--rule);
}
.donation-split__half--ink {
  background: var(--ink); color: var(--paper);
}
.donation-split__half--ink h3 { color: var(--paper); }
.donation-split__half--ink .eyebrow { color: var(--gold); }
.donation-split__half h3 {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin: 0 0 1rem;
}
@media (max-width: 800px) {
  .donation-split { grid-template-columns: 1fr; }
  .donation-split__half + .donation-split__half { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- Login ---------- */
.login-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
}
.login-page__visual {
  background-size: cover; background-position: center;
  position: relative;
}
.login-page__visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,29,58,0.3), rgba(12,29,58,0.6));
}
.login-page__form {
  padding: clamp(3rem, 6vw, 5rem);
  max-width: 520px;
}
@media (max-width: 800px) { .login-page { grid-template-columns: 1fr; } .login-page__visual { display: none; } }

/* ---------- Misc utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.full-bleed { width: 100%; }

/* Subtle entrance animation for sections in viewport */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal[data-shown] { opacity: 1; transform: none; }
}

/* ---------- Dark-section overrides (fix for text visibility) ---------- */
.section--ink p,
.section--ink .lede {
  color: rgba(251, 250, 244, 0.86);
}
.section--ink .lede {
  color: rgba(251, 250, 244, 0.9);
  font-style: italic;
}
.section--ink .dateline,
.section--ink .muted {
  color: rgba(251, 250, 244, 0.6);
}
.section--ink figcaption,
.section--ink .editorial__media figcaption {
  color: rgba(251, 250, 244, 0.65);
}
.section--ink .display-2 {
  color: var(--paper);
}
.section--ink .dropcap::first-letter {
  color: var(--paper);
}

/* Threeup with 4 children -> 4 columns at desktop, fall back to 2x2 then 1x4 */
.threeup {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Hero CTA contrast — ensure both buttons are clearly readable on dark hero */
.hero__cta .btn--ghost {
  border-color: rgba(251,250,244,0.5);
  color: var(--paper);
}
.hero__cta .btn--ghost:hover {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}

/* Default .btn on dark sections gets cream-ghost treatment */
.section--ink .btn:not(.btn--primary):not(.btn--cream):not(.btn--ghost) {
  color: var(--paper); border-color: rgba(251,250,244,0.4);
}

/* Ensure btn--cream text/border are intentional even when nested */
.btn--cream { color: var(--ink) !important; }
.btn--cream:hover { color: var(--paper) !important; background: transparent; border-color: var(--paper); }

/* Hero caption shouldn't sit over the CTAs on tall hero — push it lower */
.hero__caption { bottom: 0.6rem; }

/* Honour roll heading should be readable */
.honour-roll__heading { color: var(--ink); }
.honour-roll__sub { color: var(--ink-soft); }

/* Section--ink editorial body lede italic */
.section--ink .editorial__body p { color: rgba(251,250,244,0.86); }
.section--ink .editorial__body .lede { color: rgba(251,250,244,0.92); }

/* page-intro on light is fine; ensure the lede on cream isn't too pale */
.section .lede { color: var(--ink); }
.section--ink .lede { color: rgba(251,250,244,0.92); }

/* General paragraph color */
main p { color: var(--ink); }
.section--ink p,
.section--ink .lede + p,
.section--ink .editorial__body p { color: rgba(251,250,244,0.86); }

/* Pullquote on light bg already uses var(--ink) */

/* ---------- Donate operations: dark column readability ---------- */
.donation-split__half--ink,
.donation-split__half--ink p,
.donation-split__half--ink li {
  color: rgba(251, 250, 244, 0.86);
}
main .donation-split__half--ink p,
main .donation-split__half--ink li {
  color: rgba(251, 250, 244, 0.86);
}
.donation-split__half--ink h1,
.donation-split__half--ink h2,
.donation-split__half--ink h3,
.donation-split__half--ink h4 {
  color: var(--paper);
}
.donation-split__half--ink .muted,
.donation-split__half--ink small {
  color: rgba(251, 250, 244, 0.6);
}
.donation-split__half--ink .lede {
  color: rgba(251, 250, 244, 0.92);
}
.donation-split__half--ink a {
  color: var(--paper);
  border-bottom-color: rgba(251, 250, 244, 0.4);
}
.donation-split__half--ink .btn--cream {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}

/* ---------- Hero overlay: stronger darkening for legibility ---------- */
.hero--page .hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(12, 29, 58, 0.78) 0%,
      rgba(12, 29, 58, 0.45) 35%,
      rgba(12, 29, 58, 0.55) 70%,
      rgba(12, 29, 58, 0.92) 100%);
}

/* ---------- Notable alumni list ---------- */
.alumni-era {
  margin: 4rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(12, 29, 58, 0.18);
}
.alumni-era:first-of-type { margin-top: 0; }
.alumni-era .display-2 { margin-top: 0.4rem; }

.alumni-row {
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid rgba(12, 29, 58, 0.1);
}
.alumni-row:last-child { border-bottom: 0; }
.alumni-row h3 {
  font-family: var(--serif-display, var(--serif));
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}
.alumni-row__meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.alumni-row p:not(.alumni-row__meta) {
  margin: 0;
  max-width: 65ch;
  line-height: 1.65;
}

/* ---------- Video embeds (Pathé clips) ---------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(12, 29, 58, 0.04);
  border: 1px solid rgba(12, 29, 58, 0.12);
  margin: 1.25rem 0;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-embed__caption {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

/* ---------- Endowment tier cards ---------- */
.tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}
@media (max-width: 880px) {
  .tier-row { grid-template-columns: 1fr; gap: 1rem; }
}
.tier-period {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 0.25rem;
}

/* ---------- Link cards (campaign.ox links) ---------- */
.link-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}
@media (max-width: 720px) { .link-list { grid-template-columns: 1fr; } }
.link-card {
  display: block;
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid rgba(12, 29, 58, 0.14);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.link-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold, #b89248);
  box-shadow: 0 6px 24px rgba(12, 29, 58, 0.08);
}
.link-card__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.4rem;
}
.link-card__title {
  font-family: var(--serif-display, var(--serif));
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}
.link-card__sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ---------- Login shell ---------- */
.login-shell {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 4rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.login-shell__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 29, 58, 0.85), rgba(12, 29, 58, 0.95));
}
.login-shell__form {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: rgba(251, 250, 244, 0.04);
  border: 1px solid rgba(251, 250, 244, 0.18);
  padding: 2.5rem 2rem;
  text-align: center;
}
.login-shell__form .field {
  text-align: left;
  margin: 1.25rem 0;
}
.login-shell__form input[type="email"],
.login-shell__form input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1px solid rgba(251, 250, 244, 0.3);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.login-shell__form input::placeholder { color: rgba(251,250,244,0.5); }

/* ---------- Footnote row ---------- */
.footnote-row {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 1rem 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid rgba(12, 29, 58, 0.08);
}

/* ---------- Fund diagram block ---------- */
.fund-diagram {
  margin-top: 4rem;
  text-align: center;
}
.fund-diagram figure {
  margin: 0 auto;
  max-width: 880px;
  background: rgba(251, 250, 244, 0.04);
  border: 1px solid rgba(251, 250, 244, 0.08);
  padding: 2rem;
  border-radius: 6px;
}
.fund-diagram img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.fund-diagram figcaption {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section:not(.section--ink) .fund-diagram figure {
  background: rgba(12, 29, 58, 0.03);
  border-color: rgba(12, 29, 58, 0.08);
}
.section:not(.section--ink) .fund-diagram figcaption {
  color: var(--ink-soft);
}

/* ---------- Crest fallback for missing photo ---------- */
.crest-fallback {
  position: relative;
  background: var(--ink, #0c1d3a);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.crest-fallback__crest {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.18;
}
.crest-fallback__crest img {
  width: 70%;
  height: auto;
}
.crest-fallback__initial {
  position: relative;
  z-index: 1;
  font-family: var(--display, 'EB Garamond', serif);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 500;
  color: var(--paper, #fbfaf4);
  line-height: 1;
}

/* ---------- Full-width editorial media inside narrow container ---------- */
.editorial__media--full {
  margin: 3rem 0;
  width: 100%;
}
.editorial__media--full img,
.editorial__media--full iframe {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.editorial__media--full iframe.video-embed {
  aspect-ratio: 16 / 9;
  height: auto;
}
.editorial__media--full figcaption {
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.section--ink .editorial__media--full figcaption,
.section--cream .editorial__media--full figcaption { color: var(--ink-soft); }

/* ---------- Alumni row portrait (Notable Alumni page) ---------- */
.alumni-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.alumni-row__portrait {
  width: 96px;
  aspect-ratio: 4 / 5;
  background: var(--ink, #0c1d3a);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.alumni-row__portrait--photo .alumni-row__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
.alumni-row__portrait--fallback .alumni-row__crest {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78%;
  height: auto;
  opacity: 0.22;
  filter: brightness(2.2);
}
.alumni-row__portrait--photo .alumni-row__initial,
.alumni-row__portrait--photo .alumni-row__crest { display: none !important; }
.alumni-row__portrait--fallback .alumni-row__initial {
  position: relative;
  z-index: 1;
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-size: 3rem;
  font-weight: 500;
  color: var(--paper, #fbfaf4);
  line-height: 1;
}
@media (max-width: 600px) {
  .alumni-row {
    grid-template-columns: 64px 1fr;
    gap: 1rem;
  }
  .alumni-row__portrait { width: 64px; }
  .alumni-row__portrait--fallback .alumni-row__initial { font-size: 2rem; }
}

/* ---------- Tier card recurring sub-line ---------- */
.tier-recurring {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: -0.4rem 0 1rem;
}

/* ---------- Impact photos grid (Endowment) ---------- */
.impact-photos {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.impact-photos figure {
  margin: 0;
  background: rgba(12,29,58,0.04);
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
}
.impact-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.impact-photos figcaption {
  padding: 0.85rem 1rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ---------- Behind-the-fund diagram ---------- */
.fund-diagram-figure {
  margin: 0;
  background: var(--paper-warm, #f5efe2);
  border: 1px solid rgba(12,29,58,0.08);
  padding: 2rem;
  border-radius: 4px;
  text-align: center;
}
.fund-diagram-figure img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.fund-diagram-figure figcaption {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ---------- Endowment v4 ---------- */

/* Campbell hero — letter as backdrop */
.hero--campbell { min-height: 540px; background: var(--ink, #0c1d3a); }
.hero__media--campbell {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
}
.hero__campbell-letter {
  height: 110%;
  width: auto;
  object-fit: contain;
  opacity: 0.36;
  filter: sepia(0.18) contrast(0.95);
  transform: translateX(8%) rotate(-2deg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.hero__overlay--strong {
  background: linear-gradient(90deg, rgba(12,29,58,0.95) 0%, rgba(12,29,58,0.78) 50%, rgba(12,29,58,0.55) 100%);
}
.hero__inner--campbell { max-width: 760px; }
.hero__quote {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.4;
  color: var(--paper, #fbfaf4);
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--gold, #b89853);
  max-width: 60ch;
}
.hero__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(251,250,244,0.78);
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .hero__campbell-letter { opacity: 0.18; transform: translateX(20%) rotate(-2deg); }
}

/* Impact cards (replaces .threeup for endowment) */
.impact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.impact-card {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.08);
  display: flex;
  flex-direction: column;
}
.impact-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(12,29,58,0.05);
}
.impact-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.impact-card__body { padding: 1.5rem 1.5rem 1.75rem; }
.impact-card__eyebrow {
  display: block;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #b89853);
  margin-bottom: 0.5rem;
}
.impact-card__title {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.impact-card p { margin: 0; line-height: 1.55; }

/* Standalone pullquote */
.pullquote--standalone {
  border-left: 4px solid var(--gold, #b89853);
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 0 auto;
  max-width: 64ch;
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink, #0c1d3a);
}
.pullquote--standalone cite {
  display: block;
  font-family: var(--sans, Inter, sans-serif);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(12,29,58,0.65);
  margin-top: 1rem;
}

/* Chart wrap */
.chart-wrap {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.08);
  padding: 1.5rem;
  height: 380px;
}

/* Sticky pledge card */
.sticky-pledge {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  max-width: 360px;
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  border: 1px solid var(--gold, #b89853);
  box-shadow: 0 12px 36px rgba(0,0,0,0.28);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.sticky-pledge.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-pledge__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem 0.85rem 1.1rem;
}
.sticky-pledge__text { font-family: var(--sans, Inter, sans-serif); font-size: 0.9rem; line-height: 1.3; }
.sticky-pledge__text strong {
  display: block;
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 0.1rem;
}
.sticky-pledge__text span { color: rgba(251,250,244,0.7); font-size: 0.78rem; letter-spacing: 0.02em; }
.sticky-pledge__close {
  background: transparent;
  border: 0;
  color: rgba(251,250,244,0.65);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.35rem;
}
.sticky-pledge__close:hover { color: var(--paper); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.82rem; }
@media (max-width: 600px) {
  .sticky-pledge { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
  .sticky-pledge__inner { grid-template-columns: 1fr auto; }
  .sticky-pledge__close { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

/* ---------- Events: past + star feedback ---------- */
.event-row--past { opacity: 0.92; }
.event-row__date--past { color: rgba(12,29,58,0.55); }
.event-row__feedback {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}
.event-row__feedback-label {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(12,29,58,0.7);
  margin: 0;
}
.event-row__feedback-link {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.82rem;
  color: var(--ink, #0c1d3a);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.event-row__feedback-link:hover { color: var(--gold, #b89853); }
.star-rating {
  display: inline-flex;
  gap: 0.15rem;
}
.star-rating button {
  background: transparent;
  border: 0;
  padding: 0.1rem 0.15rem;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(12,29,58,0.22);
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}
.star-rating button:hover,
.star-rating button:focus { outline: none; transform: scale(1.08); }
.star-rating button.is-filled { color: var(--gold, #b89853); }

/* ---------- Endowment v4.1 — hero legibility, Hillary portrait, historic donors ---------- */

/* Reduce letter brightness behind the quote so the quote reads cleanly. */
.hero--campbell .hero__campbell-letter {
  opacity: 0.22;
  filter: sepia(0.22) contrast(0.9) brightness(0.85);
}
/* Stronger left-side darken so the quote sits on a near-solid ink panel. */
.hero--campbell .hero__overlay--strong {
  background:
    linear-gradient(90deg, rgba(12,29,58,0.97) 0%, rgba(12,29,58,0.92) 38%, rgba(12,29,58,0.72) 65%, rgba(12,29,58,0.5) 100%),
    radial-gradient(ellipse at 20% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}

/* Display-style quote in the hero — large, serif, with an oversized opening mark. */
.hero__quote--display {
  position: relative;
  margin: 1.25rem 0 0;
  padding-left: 0;
  border-left: none;
  max-width: 64ch;
}
.hero__quote--display .hero__quote-line {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.32;
  color: var(--paper, #fbfaf4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  margin: 0;
}
.hero__quote-mark {
  display: block;
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.75;
  color: var(--gold, #b89853);
  margin-bottom: 0.25rem;
}
.hero__quote--display cite {
  display: block;
  font-style: normal;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(251,250,244,0.85);
  margin-top: 1.25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Hillary pullquote with portrait — single retained photo on the page. */
.pullquote-with-portrait {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 56rem;
  margin: 0 auto;
}
.pullquote-with-portrait__media {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper, #fbfaf4);
}
.pullquote-with-portrait__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 720px) {
  .pullquote-with-portrait { grid-template-columns: 1fr; gap: 1.5rem; }
  .pullquote-with-portrait__media { aspect-ratio: 4 / 3; max-width: 320px; margin: 0 auto; }
}

/* Historic donors — pre-endowment list, single column on mobile, two on desktop. */
.historic-donors {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.08);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  box-shadow: 0 6px 24px rgba(12,29,58,0.04);
}
.historic-donors__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-bottom: 1px solid rgba(12,29,58,0.1);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
.historic-donors__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.historic-donors__heading {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.25rem;
  color: var(--ink, #0c1d3a);
  line-height: 1.25;
}
.historic-donors__sub {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.85rem;
  color: rgba(12,29,58,0.65);
  margin-top: 0.25rem;
}
.historic-donors__names {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}
.historic-donors__names li {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1rem;
  color: var(--ink, #0c1d3a);
  padding: 0.4rem 0;
  border-bottom: 1px dotted rgba(12,29,58,0.12);
  break-inside: avoid;
}
.historic-donors__source {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(12,29,58,0.1);
  font-size: 0.85rem;
  color: rgba(12,29,58,0.65);
}
.historic-donors__source a { color: rgba(12,29,58,0.8); }
@media (max-width: 640px) {
  .historic-donors { padding: 1.5rem 1.25rem; }
  .historic-donors__names { columns: 1; }
  .historic-donors__head { flex-wrap: wrap; gap: 0.75rem; }
  .historic-donors__year { width: 52px; height: 52px; font-size: 0.95rem; }
}

/* ---------- Endowment v4.2 — quote-as-h1, donor list polish, donation calculator ---------- */

/* Campbell quote uses the same H1 styling as the Notable Alumni hero — */
/* same family/colour/size as 'An unrivalled alumni pedigree'.            */
.hero__title--quote {
  font-style: italic;
  text-wrap: balance;
}
.hero__lede--cite {
  font-family: var(--sans, Inter, sans-serif);
  font-style: normal;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(251,250,244,0.85);
  margin-top: 1.25rem;
}

/* Donor list — no bullets, 2 columns desktop / 3 columns wide-desktop, no dotted dividers */
.historic-donors__names {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
  column-rule: 1px solid rgba(12,29,58,0.08);
}
.historic-donors__names span,
.historic-donors__names li {
  display: block;
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1rem;
  color: var(--ink, #0c1d3a);
  padding: 0.4rem 0;
  border-bottom: none;
  break-inside: avoid;
}
@media (min-width: 960px) {
  .historic-donors__names { columns: 3; }
}
@media (max-width: 600px) {
  .historic-donors__names { columns: 1; column-rule: none; }
}

/* Donation calculator UI */
.donation-input {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.1);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 6px 24px rgba(12,29,58,0.04);
}
.donation-input__label {
  display: block;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.6);
  margin-bottom: 0.6rem;
}
.donation-input__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.donation-input__symbol {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.75rem;
  color: var(--ink, #0c1d3a);
  line-height: 1;
}
.donation-input input[type="number"] {
  flex: 0 1 200px;
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink, #0c1d3a);
  padding: 0.25rem 0.25rem;
  outline: none;
  -moz-appearance: textfield;
}
.donation-input input[type="number"]::-webkit-outer-spin-button,
.donation-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donation-input input[type="number"]:focus {
  border-bottom-color: var(--gold, #b89853);
}
.donation-input__quick {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.donation-input__quick button {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.85rem;
  background: transparent;
  color: var(--ink, #0c1d3a);
  border: 1px solid rgba(12,29,58,0.25);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.donation-input__quick button:hover,
.donation-input__quick button:focus-visible {
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  border-color: var(--ink, #0c1d3a);
}
.donation-input__help {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.85rem;
  color: rgba(12,29,58,0.6);
  margin: 1rem 0 0;
}

/* Summary tiles */
.donation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.donation-summary__cell {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.08);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.donation-summary__label {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.6);
}
.donation-summary__value {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
}

/* ---------- Endowment v4.3.1 — wider hero (real), Hillary side-by-side, charts side-by-side ---------- */

/* Wider Campbell hero — break the global 18ch cap on .hero__title so the quote actually spreads. */
/* Use !important to defeat the .hero__title max-width: 18ch base rule. */
.hero--campbell .hero__title--quote {
  max-width: none !important;
  width: 100%;
  font-size: clamp(1.45rem, 2.6vw, 2.4rem) !important;
  line-height: 1.25 !important;
  font-style: italic;
  text-wrap: pretty;
  margin-bottom: 1rem;
}
.hero--campbell .hero__inner--wide,
.hero--campbell.hero--page .hero__inner--wide {
  max-width: min(1180px, calc(100% - 4rem)) !important;
}

/* Reduce hero height — was 720px+, bring in line with other pages (≈480–560px) */
.hero--campbell.hero--page {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  min-height: 0;
}
.hero--campbell.hero--page .hero__inner--wide {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Letter background — push it further right, lighten so quote reads but letter still visible. */
.hero--campbell .hero__media--campbell {
  opacity: 0.42;
}
.hero--campbell .hero__campbell-letter {
  /* Position letter on the right half, behind the quote without overpowering it. */
  object-position: right top;
}
/* Calmer overlay — strong on left for quote contrast, fade across to let letterhead read on the right. */
.hero__overlay--wide {
  background: linear-gradient(
    90deg,
    rgba(12,29,58,0.96) 0%,
    rgba(12,29,58,0.88) 38%,
    rgba(12,29,58,0.55) 70%,
    rgba(12,29,58,0.30) 100%
  ) !important;
}

/* Compact Hillary — portrait sits beside the quote at most viewport widths */
.pullquote-with-portrait--compact {
  display: grid;
  grid-template-columns: 200px 1fr !important;
  gap: 1.75rem;
  align-items: center;
  max-width: 52rem;
  margin: 0 auto;
}
.pullquote-with-portrait--compact .pullquote-with-portrait__media {
  aspect-ratio: 4 / 5;
  max-width: 200px;
}
@media (max-width: 520px) {
  .pullquote-with-portrait--compact { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .pullquote-with-portrait--compact .pullquote-with-portrait__media { max-width: 200px; margin: 0 auto; aspect-ratio: 4 / 5; }
}
.pullquote--inline {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.5;
}

/* Chart pair — stay side-by-side at narrower widths, only stack on small tablets/phones */
.chart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-top: 2rem;
}
.chart-pair__panel {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.08);
  border-radius: 6px;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 6px 24px rgba(12,29,58,0.04);
  display: flex;
  flex-direction: column;
  min-width: 0;  /* let canvas shrink within grid track */
}
.chart-pair__panel .chart-wrap { min-width: 0; }
.chart-pair__panel canvas { max-width: 100%; height: auto !important; }
.chart-pair__caption {
  margin-bottom: 0.85rem;
}
.chart-pair__title {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
  margin: 0 0 0.3rem;
  line-height: 1.2;
}
.chart-pair__sub {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.84rem;
  color: rgba(12,29,58,0.65);
  margin: 0;
  line-height: 1.45;
}
.chart-pair__foot {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  color: rgba(12,29,58,0.55);
  margin: 0.85rem 0 0;
  text-align: center;
}
@media (max-width: 720px) {
  .chart-pair { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Inline summary tiles inside the gift-chart panel */
.donation-summary--inline {
  margin-top: 1rem;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.donation-summary--inline .donation-summary__cell {
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(12,29,58,0.08);
  background: rgba(12,29,58,0.02);
}
.donation-summary--inline .donation-summary__label { font-size: 0.62rem; }
.donation-summary--inline .donation-summary__value { font-size: 1rem; }

/* ---------- Homepage hero — right-align text so Denis Smith (left of frame) is visible ---------- */
.hero__inner--right {
  text-align: right;
  margin-left: auto;
  max-width: 720px;
  margin-right: 0;
  padding-right: clamp(1.5rem, 4vw, 4rem);
}
.hero__inner--right .eyebrow,
.hero__inner--right .hero__title,
.hero__inner--right .hero__lede {
  margin-left: auto;
  text-align: right;
}
.hero__inner--right .hero__title {
  max-width: none;  /* defeat 18ch cap so the heading sits flush right and wraps naturally */
}
.hero__inner--right .hero__cta {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.hero__inner--right .eyebrow::before {
  /* Move the eyebrow tick line to sit on the right-hand side of the eyebrow text */
  display: none;
}
.hero__inner--right .eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold, #b89853);
  vertical-align: middle;
  margin-left: 12px;
}
/* Tilt overlay so it darkens the RIGHT side (where the text now sits), letting Denis Smith on the left read clearly */
/* Scoped to the homepage hero only — do NOT affect .hero--page subclasses (endowment, heritage, etc.) */
@media (min-width: 720px) {
  .hero:not(.hero--page) .hero__overlay {
    background: linear-gradient(
      270deg,
      rgba(12,29,58,0.82) 0%,
      rgba(12,29,58,0.55) 38%,
      rgba(12,29,58,0.30) 70%,
      rgba(12,29,58,0.20) 100%
    );
  }
}

/* ---------- Endowment v4.6 — show the TOP of the NHL letter (letterhead band) ---------- */
/* The image is a portrait-oriented letter; we anchor it to the top so the NHL President's     */
/* Office letterhead is what reads across the banner. Quote sits over a left-weighted overlay. */
.hero--campbell .hero__media--campbell {
  opacity: 1 !important;
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0c1d3a; /* ink fallback under the parchment */
}
.hero--campbell .hero__campbell-letter {
  opacity: 0.62 !important;
  filter: sepia(0.32) contrast(0.95) brightness(1.08);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: center top;
}
.hero--campbell .hero__overlay--wide,
.hero--campbell .hero__overlay--strong {
  background: linear-gradient(
    90deg,
    rgba(12,29,58,0.94) 0%,
    rgba(12,29,58,0.82) 30%,
    rgba(12,29,58,0.55) 55%,
    rgba(12,29,58,0.32) 80%,
    rgba(12,29,58,0.18) 100%
  ) !important;
}
@media (max-width: 900px) {
  .hero--campbell .hero__campbell-letter { opacity: 0.32 !important; }
  .hero--campbell .hero__overlay--wide,
  .hero--campbell .hero__overlay--strong {
    background: linear-gradient(
      90deg,
      rgba(12,29,58,0.95) 0%,
      rgba(12,29,58,0.85) 60%,
      rgba(12,29,58,0.65) 100%
    ) !important;
  }
}
@media (max-width: 720px) {
  .hero__inner--right { text-align: left; }
  .hero__inner--right .eyebrow,
  .hero__inner--right .hero__title,
  .hero__inner--right .hero__lede { text-align: left; }
  .hero__inner--right .hero__cta { justify-content: flex-start; }
  .hero__inner--right .eyebrow::after { display: none; }
}

/* ---------- Notable Alumni v4.4 — real portrait photos from official archive ---------- */
.alumni-row__portrait { position: relative; overflow: hidden; }
.alumni-row__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;  /* favour the face for headshots */
  display: block;
  filter: grayscale(0.06) contrast(1.02);
}
.alumni-row__portrait { border: 1px solid rgba(12,29,58,0.12); }
/* Wider portrait at desktop — these bios are now substantial and warrant a stronger image */
@media (min-width: 720px) {
  .alumni-row { grid-template-columns: 132px 1fr; gap: 1.75rem; }
  .alumni-row__portrait { width: 132px; }
  .alumni-row__portrait--fallback .alumni-row__initial { font-size: 3.6rem; }
}
.alumni-row p:not(.alumni-row__meta) {
  max-width: 70ch;
}
.alumni-row p:not(.alumni-row__meta) + p:not(.alumni-row__meta) {
  margin-top: 0.85rem;  /* rhythm between paragraphs in long bios */
}

/* Notable Alumni v4.4: wrap text content so multi-paragraph bios stay in their grid cell */
.alumni-row__body { min-width: 0; }
.alumni-row__body h3 {
  font-family: var(--serif-display, var(--serif));
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
  line-height: 1.25;
}
.alumni-row__body .alumni-row__meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.alumni-row__body p:not(.alumni-row__meta) {
  margin: 0;
  max-width: 70ch;
  line-height: 1.65;
}
.alumni-row__body p:not(.alumni-row__meta) + p:not(.alumni-row__meta) {
  margin-top: 0.85rem;
}

/* ============================================================ */
/*  ENDOWMENT v4.6 — gift tabs, tier-grouped suggestions,       */
/*  aligned summary tiles, honour-roll logo heading, legacy    */
/*  pledges, donate popup polish                                */
/* ============================================================ */

/* ---- Gift mode tabs (Single / Recurring) ---- */
.gift-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(12,29,58,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  padding: 4px;
  margin: 0 auto 1.5rem;
  display: flex;
  width: fit-content;
}
.gift-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.6rem 1.4rem;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(12,29,58,0.65);
  cursor: pointer;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease;
}
.gift-tab:hover { color: var(--ink, #0c1d3a); }
.gift-tab.is-active {
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
}
.gift-tab:focus-visible {
  outline: 2px solid var(--gold, #b89853);
  outline-offset: 2px;
}

/* ---- Gift mode panels ---- */
.gift-mode { display: none; }
.gift-mode.is-active { display: block; }
.gift-mode[hidden] { display: none !important; }

.donation-input__row--recurring {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.donation-input__freq {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper, #fbfaf4) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%230c1d3a' fill='none' stroke-width='1.4'/></svg>") no-repeat right 0.85rem center;
  border: 1px solid rgba(12,29,58,0.22);
  border-radius: 6px;
  padding: 0 2.2rem 0 0.85rem;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.95rem;
  color: var(--ink, #0c1d3a);
  cursor: pointer;
  min-width: 7.5rem;
}
.donation-input__freq:focus-visible {
  outline: 2px solid var(--gold, #b89853);
  outline-offset: 2px;
}

/* ---- Tier-grouped suggestion buttons ---- */
.donation-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.donation-tiers__group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.donation-tiers__label {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.7);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.donation-tiers__label .muted {
  color: rgba(12,29,58,0.45);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.74rem;
}
.donation-tiers__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.donation-tiers__buttons button {
  appearance: none;
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.2);
  border-radius: 6px;
  padding: 0.55rem 0.95rem;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.donation-tiers__buttons button:hover {
  background: rgba(184,152,83,0.08);
  border-color: var(--gold, #b89853);
}
.donation-tiers__buttons button:active { transform: translateY(1px); }
.donation-tiers__group[data-tier="teammate"] .donation-tiers__buttons button:hover  { border-color: rgba(12,29,58,0.55); }
.donation-tiers__group[data-tier="varsity"]  .donation-tiers__buttons button:hover  { border-color: var(--gold, #b89853); }
.donation-tiers__group[data-tier="legacy"]   .donation-tiers__buttons button:hover  { border-color: var(--gold, #b89853); background: rgba(184,152,83,0.12); }

@media (max-width: 800px) {
  .donation-tiers { grid-template-columns: 1fr; gap: 1rem; }
}

/* Inline tier badge inside the tier label */
.badge--inline {
  width: 1.4rem; height: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 600;
  border-radius: 50%;
}

/* ---- Year-aligned summary tiles under the gift chart ---- */
.donation-summary--aligned {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(12,29,58,0.12);
}
.donation-summary__heading {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.65);
  margin: 0 0 0.85rem;
}
.donation-summary__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.donation-summary__cells .donation-summary__cell {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.12);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.donation-summary__cell--accent {
  background: rgba(184,152,83,0.10);
  border-color: rgba(184,152,83,0.4);
}
.donation-summary__cell .donation-summary__label {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.55);
}
.donation-summary__cell .donation-summary__value {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
  line-height: 1.1;
}
@media (max-width: 480px) {
  .donation-summary__cells { grid-template-columns: 1fr; }
}
.donation-summary__note {
  display: block;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(12,29,58,0.55);
  margin-top: 0.2rem;
  font-style: italic;
}
.donation-summary__explainer {
  margin: 0.9rem 0 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(12,29,58,0.7);
  padding: 0.7rem 0.85rem;
  background: rgba(12,29,58,0.03);
  border-left: 2px solid rgba(184,152,83,0.6);
  border-radius: 0 4px 4px 0;
}
.donation-summary__explainer em { font-style: italic; }

/* ---- Three-up link cards (Donate / Legacy / Operations) ---- */
.link-list--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .link-list--three { grid-template-columns: 1fr; }
}

/* ---- Prospectus quote block (Legacy Pledges section) ---- */
.prospectus-quote {
  max-width: 64ch;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  background: rgba(12,29,58,0.04);
  border-left: 3px solid var(--gold, #b89853);
}
.prospectus-quote p { margin: 0 0 0.9rem; line-height: 1.65; }
.prospectus-quote p:last-child { margin-bottom: 0; }
.prospectus-quote__pull {
  margin: 1.25rem 0 1.1rem;
  padding: 0;
  border: 0;
  font-family: var(--serif, 'Source Serif 4');
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink, #0c1d3a);
  text-align: center;
}
.prospectus-quote__note {
  font-size: 0.95rem;
  color: rgba(12,29,58,0.78);
}
.prospectus-quote__source {
  font-family: var(--sans, Inter);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(12,29,58,0.55);
  margin-top: 1.2rem !important;
}
.prospectus-quote__source a { color: inherit; text-decoration: underline; }

.legacy-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .legacy-grid--three { grid-template-columns: 1fr; }
}

/* ---- Honour roll heading with 1885 Society logo ---- */
.honour-roll-heading {
  text-align: center;
  margin-bottom: 3rem;
}
.honour-roll-heading__logo {
  display: block;
  margin: 0.5rem auto 0;  /* tightened: heading sits directly under the mark */
  width: 160px;     /* enlarged: bigger 1885 mark */
  height: auto;
  background: transparent;
  /* No circular crop — the artwork is shown as designed */
}
.honour-roll-heading h2 {
  margin-top: -0.6rem;  /* pull heading up under the logo, defeating the line-height padding above the glyphs */
}
.honour-roll-heading__logo--lg {
  width: 280px;     /* primary, hero-scale presentation */
}
.honour-roll-heading .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 0.4rem;
}
.honour-roll-heading .eyebrow::before {
  /* Suppress the leading rule — keeps the line visually centred. */
  display: none;
}
@media (max-width: 600px) {
  .honour-roll-heading__logo { width: 124px; }
  .honour-roll-heading__logo--lg { width: 200px; }
}

/* ---- Legacy Pledges section ---- */
.legacy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.legacy-card {
  background: var(--paper, #fbfaf4);
  border: 1px solid rgba(12,29,58,0.12);
  border-radius: 4px;
  padding: 1.75rem 1.85rem;
}
.legacy-card__title {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink, #0c1d3a);
  margin: 0 0 0.85rem;
  line-height: 1.2;
}
.legacy-card p {
  margin: 0;
  line-height: 1.65;
}
.legacy-card p + p { margin-top: 0.85rem; }
.legacy-card--cta {
  background: var(--ink, #0c1d3a);
  border-color: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  grid-column: 1 / -1;
}
.legacy-card--cta .legacy-card__title { color: var(--paper, #fbfaf4); }
.legacy-card--cta p { color: rgba(251,250,244,0.85); }
.legacy-card__actions { margin-top: 1.25rem !important; }

/* Cream/gold button styling on the dark navy CTA card */
.legacy-card--cta .btn,
.legacy-card--cta .btn--primary {
  background: var(--paper, #fbfaf4);
  color: var(--ink, #0c1d3a);
  border: 1px solid var(--paper, #fbfaf4);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.45rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.legacy-card--cta .btn:hover,
.legacy-card--cta .btn--primary:hover {
  background: var(--gold, #b89853);
  border-color: var(--gold, #b89853);
  color: var(--ink, #0c1d3a);
}

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

/* ---- Donate popup polish (3s appear) ---- */
.sticky-pledge--popup .sticky-pledge__text strong {
  font-family: var(--serif-display, 'EB Garamond', serif);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.sticky-pledge--popup .sticky-pledge__text span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(251,250,244,0.78);
}

/* ---------- v4.7 Notable Alumni: jump-to-section chips & face-safe portraits ---------- */
.era-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(12,29,58,0.10);
}
.era-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(12,29,58,0.18);
  border-radius: 999px;
  background: var(--paper, #fbfaf4);
  color: var(--ink, #0c1d3a);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height: 1.1;
}
.era-chip:hover {
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  border-color: var(--ink, #0c1d3a);
}
.era-chip__year {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.7;
}
.era-chip__label {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-size: 0.95rem;
  font-weight: 500;
}
.era-chip:hover .era-chip__year { opacity: 0.85; }
@media (max-width: 600px) {
  .era-chips { gap: 0.4rem; }
  .era-chip { padding: 0.45rem 0.7rem; }
  .era-chip__year { font-size: 0.62rem; }
  .era-chip__label { font-size: 0.85rem; }
}

/* Anchored era headings should clear any sticky header when jumped to */
.alumni-era[id] { scroll-margin-top: 88px; }

/* Default portrait crop: favour the upper third of the image so faces aren't cut off.
   22% matches the Gary Lawrence framing the design takes its cue from — head fully visible, shoulders showing. */
.alumni-row__portrait--photo img {
  object-position: center 22%;
}
/* Per-portrait overrides where the face sits unusually high or low */
.alumni-row__portrait--photo img[src$="portrait-carney-pm.jpg"]   { object-position: center 22%; }
.alumni-row__portrait--photo img[src$="portrait-diana-carney.jpg"] { object-position: 30% 22%; }
.alumni-row__portrait--photo img[src$="portrait-lawrence.jpg"]    { object-position: center 22%; }
.alumni-row__portrait--photo img[src$="portrait-johnston.jpg"]    { object-position: center 18%; }
.alumni-row__portrait--photo img[src$="portrait-edward-vii.jpg"]  { object-position: center 25%; }
.alumni-row__portrait--photo img[src$="portrait-macbain.jpg"]     { object-position: center 22%; }
.alumni-row__portrait--photo img[src$="portrait-shona-brown.jpg"] { object-position: center 24%; }
.alumni-row__portrait--photo img[src$="portrait-pichette.jpg"]    { object-position: center 26%; }
.alumni-row__portrait--photo img[src$="portrait-lametti.jpg"]     { object-position: center 22%; }
.alumni-row__portrait--photo img[src$="portrait-spence.jpg"]      { object-position: center 22%; }
.alumni-row__portrait--photo img[src$="portrait-dawkins.jpg"]     { object-position: center 24%; }
.alumni-row__portrait--photo img[src$="portrait-davison.jpg"]     { object-position: center 28%; }

/* ---------- v4.7 Varsity Scores page ---------- */
.vs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(12,29,58,0.10);
}
.vs-filter {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(12,29,58,0.18);
  border-radius: 999px;
  background: var(--paper, #fbfaf4);
  color: var(--ink, #0c1d3a);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vs-filter:hover { border-color: var(--ink, #0c1d3a); }
.vs-filter.is-active {
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  border-color: var(--ink, #0c1d3a);
}
.vs-summary {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  min-height: 1.4em;
}

.vs-table-wrap {
  overflow: auto;
  max-height: 78vh;
  border: 1px solid rgba(12,29,58,0.10);
  border-radius: 4px;
  background: var(--paper, #fbfaf4);
  /* Right-edge fade to hint horizontal scroll */
  background-image:
    linear-gradient(to right, var(--paper, #fbfaf4), var(--paper, #fbfaf4)),
    linear-gradient(to right, var(--paper, #fbfaf4), var(--paper, #fbfaf4)),
    linear-gradient(to right, rgba(12,29,58,0.08), rgba(12,29,58,0)),
    linear-gradient(to left,  rgba(12,29,58,0.08), rgba(12,29,58,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 18px 100%, 18px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.88rem;
  min-width: 880px;
}
.vs-table thead th {
  position: sticky;
  top: 0;
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.7rem 0.8rem;
  white-space: nowrap;
  border-right: 1px solid rgba(251,250,244,0.08);
  z-index: 1;
}
.vs-table thead th:last-child { border-right: 0; }
.vs-table tbody tr {
  border-top: 1px solid rgba(12,29,58,0.07);
  transition: background 0.12s ease;
}
.vs-table tbody tr:hover { background: rgba(12,29,58,0.03); }
.vs-table tbody tr:nth-child(even) { background: rgba(12,29,58,0.015); }
.vs-table tbody tr:nth-child(even):hover { background: rgba(12,29,58,0.05); }

.vs-table th.vs-year,
.vs-table .vs-year-col {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink, #0c1d3a);
}
/* Year column — sticky on the left edge with FULLY OPAQUE backgrounds so
   table cells scrolling underneath don’t bleed through during vertical scroll. */
.vs-table thead th.vs-year-col {
  position: sticky;
  left: 0;
  z-index: 3; /* above sticky body cells AND other thead cells */
  background: var(--ink, #0c1d3a); /* matches thead row */
  color: var(--paper, #fbfaf4);
  box-shadow: 1px 0 0 rgba(251,250,244,0.08);
}
.vs-table tbody th.vs-year {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Solid paper background — no alpha so body content can’t show through. */
  background: var(--paper, #fbfaf4);
  box-shadow: 1px 0 0 rgba(12,29,58,0.07);
  padding: 0.7rem 0.95rem;
  text-align: left;
  white-space: nowrap;
}
/* Even-row striping — needs to be solid too, otherwise the alternating tint
   shows through the sticky Year cell from the cell underneath. */
.vs-table tbody tr:nth-child(even) th.vs-year { background: #f4eedf; }
.vs-table tbody tr:hover th.vs-year { background: #f0e8d3; }
.vs-table tbody td {
  padding: 0.6rem 0.8rem;
  vertical-align: middle;
  white-space: nowrap;
  border-right: 1px solid rgba(12,29,58,0.04);
}
.vs-table tbody td:last-child { border-right: 0; }

.vs-cell--empty { color: rgba(12,29,58,0.25); }
.vs-cell--na    { color: rgba(12,29,58,0.30); text-align: center; }
.vs-dash { font-family: var(--serif); }

/* Win/loss/draw colour cues — subtle, not loud */
.vs-win  { color: #0c1d3a; font-weight: 500; box-shadow: inset 3px 0 0 #0a6d5e; }
.vs-loss { color: rgba(12,29,58,0.70); box-shadow: inset 3px 0 0 #b03a2e; }
.vs-draw { color: rgba(12,29,58,0.80); box-shadow: inset 3px 0 0 #b08c2e; }

/* Filtered state — HIDE non-matching team columns entirely so the table
   shrinks to Year + the selected team. No more horizontal scrolling needed. */
.vs-table--filtered { min-width: 0 !important; width: 100%; table-layout: auto; }
.vs-table--filtered[data-active-team="mens"]      td:not([data-team="mens"]),
.vs-table--filtered[data-active-team="womens"]    td:not([data-team="womens"]),
.vs-table--filtered[data-active-team="vikings_a"] td:not([data-team="vikings_a"]),
.vs-table--filtered[data-active-team="vikings_b"] td:not([data-team="vikings_b"]),
.vs-table--filtered[data-active-team="vikings_c"] td:not([data-team="vikings_c"]),
.vs-table--filtered[data-active-team="alumni1"]   td:not([data-team="alumni1"]),
.vs-table--filtered[data-active-team="alumni2"]   td:not([data-team="alumni2"]),
.vs-table--filtered[data-active-team="toronto"]   td:not([data-team="toronto"]),
.vs-table--filtered[data-active-team="ottawa"]    td:not([data-team="ottawa"]),
.vs-table--filtered[data-active-team="mens"]      thead th[data-team]:not([data-team="mens"]),
.vs-table--filtered[data-active-team="womens"]    thead th[data-team]:not([data-team="womens"]),
.vs-table--filtered[data-active-team="vikings_a"] thead th[data-team]:not([data-team="vikings_a"]),
.vs-table--filtered[data-active-team="vikings_b"] thead th[data-team]:not([data-team="vikings_b"]),
.vs-table--filtered[data-active-team="vikings_c"] thead th[data-team]:not([data-team="vikings_c"]),
.vs-table--filtered[data-active-team="alumni1"]   thead th[data-team]:not([data-team="alumni1"]),
.vs-table--filtered[data-active-team="alumni2"]   thead th[data-team]:not([data-team="alumni2"]),
.vs-table--filtered[data-active-team="toronto"]   thead th[data-team]:not([data-team="toronto"]),
.vs-table--filtered[data-active-team="ottawa"]    thead th[data-team]:not([data-team="ottawa"]) {
  display: none;
}
/* Hide the proxy top scrollbar when filtered — nothing to scroll. */
.vs-table--filtered ~ * .vs-scroll-top,
.vs-scroll-top--hidden { display: none; }

@media (max-width: 720px) {
  .vs-table { font-size: 0.82rem; }
  .vs-table thead th, .vs-table tbody td { padding: 0.5rem 0.65rem; }
  .vs-filters { gap: 0.35rem; }
  .vs-filter { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
}

/* ---------- v4.7 Archive preview (guests) & Members Hub ---------- */
.archive-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1000px) { .archive-preview-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .archive-preview-grid { grid-template-columns: 1fr 1fr; } }
.archive-preview-tile {
  display: block;
  text-decoration: none;
  color: var(--ink, #0c1d3a);
  border: 1px solid rgba(12,29,58,0.10);
  background: var(--paper, #fbfaf4);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.archive-preview-tile:hover { border-color: var(--ink, #0c1d3a); transform: translateY(-2px); }
.archive-preview-tile__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: rgba(12,29,58,0.08);
}
.archive-preview-tile__caption {
  padding: 0.85rem 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.archive-preview-tile__caption .eyebrow { font-size: 0.65rem; }
.archive-preview-tile__caption strong {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: 1.05rem;
}

/* Members Hub */
.members-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid rgba(12,29,58,0.15);
  margin: 0 0 2rem;
}
.members-tab {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft, rgba(12,29,58,0.65));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.members-tab:hover { color: var(--ink, #0c1d3a); }
.members-tab.is-active {
  color: var(--ink, #0c1d3a);
  border-bottom-color: var(--ink, #0c1d3a);
  font-weight: 500;
}
.members-panel { display: none; }
.members-panel.is-active { display: block; }

.members-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 800px) { .members-teaser { grid-template-columns: 1fr; } }
.members-teaser__card {
  border: 1px solid rgba(12,29,58,0.12);
  padding: 1.25rem 1.4rem;
  background: var(--paper, #fbfaf4);
}
.members-teaser__card .eyebrow { font-size: 0.65rem; }
.members-teaser__card h3 {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0.4rem 0 0.5rem;
}
.members-teaser__card p {
  font-size: 0.92rem;
  color: var(--ink-soft, rgba(12,29,58,0.7));
  margin: 0;
}

.members-cta {
  background: var(--ink, #0c1d3a);
  color: var(--paper, #fbfaf4);
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: 4px;
}
.members-cta .eyebrow { color: rgba(251,250,244,0.7); }
.members-cta h3 {
  color: var(--paper, #fbfaf4);
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0.5rem 0 0.75rem;
}
.members-cta p {
  color: rgba(251,250,244,0.85);
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}

.members-welcome {
  padding: 2rem;
  background: var(--paper-2, #f4ecd9);
  border-left: 3px solid var(--gold, #b89853);
  margin: 0 0 2rem;
}
.members-welcome h2 {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 0.5rem;
}
.members-welcome p { margin: 0; }

.members-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(12,29,58,0.12);
  background: var(--paper, #fbfaf4);
  text-decoration: none;
  color: var(--ink, #0c1d3a);
  margin-bottom: 0.75rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.members-link-card:hover { border-color: var(--ink, #0c1d3a); background: rgba(12,29,58,0.02); }
.members-link-card__body strong {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-weight: 500;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.2rem;
}
.members-link-card__body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft, rgba(12,29,58,0.7));
}
.members-link-card__arrow {
  font-family: var(--serif);
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ---------- v4.7 Endowment 3-up CTA grid (Donate / Schedule / Operations) ---------- */
.endowment-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 920px) {
  .endowment-cta-grid { grid-template-columns: 1fr; max-width: 520px; }
}
.endowment-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.4rem 1.4rem;
  background: rgba(251,250,244,0.04);
  border: 1px solid rgba(251,250,244,0.18);
  border-radius: 4px;
  color: var(--paper, #fbfaf4);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  min-height: 220px;
}
.endowment-cta:hover,
.endowment-cta:focus-visible {
  background: rgba(251,250,244,0.09);
  border-color: rgba(251,250,244,0.45);
  transform: translateY(-2px);
  outline: none;
}
.endowment-cta__eyebrow {
  font-family: var(--sans, system-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251,250,244,0.65);
}
.endowment-cta__title {
  font-family: var(--serif-display, var(--serif), 'EB Garamond', serif);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--paper, #fbfaf4);
}
.endowment-cta__body {
  font-family: var(--sans, system-ui);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(251,250,244,0.78);
  flex-grow: 1;
}
.endowment-cta__arrow {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: rgba(251,250,244,0.85);
  align-self: flex-end;
  margin-top: 0.5rem;
  transition: transform 0.18s ease;
}
.endowment-cta:hover .endowment-cta__arrow,
.endowment-cta:focus-visible .endowment-cta__arrow {
  transform: translateX(4px);
}

/* ===== v4.8 Varsity top scrollbar (synced with table) ===== */
.vs-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 4px;
  border: 1px solid rgba(12,29,58,0.10);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--paper, #fbfaf4);
}
.vs-scroll-top__inner { height: 1px; }

/* ===== v4.8 Members hero login button (top-right of hero) ===== */
.members-hero-login {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 4;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper, #fbfaf4);
  background: rgba(12,29,58,0.55);
  border: 1px solid rgba(251,250,244,0.45);
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.members-hero-login:hover {
  background: rgba(12,29,58,0.85);
  border-color: rgba(251,250,244,0.85);
  color: var(--paper, #fbfaf4);
}
.members-hero-login span { margin-left: 0.4rem; }
@media (max-width: 640px) {
  .members-hero-login { top: 1rem; right: 1rem; padding: 0.5rem 0.85rem; font-size: 0.7rem; }
}

/* v4.8 — make the top scrollbar visibly persistent (Webkit + Firefox) */
.vs-scroll-top {
  scrollbar-width: thin;
  scrollbar-color: rgba(12,29,58,0.40) rgba(12,29,58,0.06);
}
.vs-scroll-top::-webkit-scrollbar { height: 12px; -webkit-appearance: none; }
.vs-scroll-top::-webkit-scrollbar-track {
  background: rgba(12,29,58,0.06);
  border-radius: 4px;
}
.vs-scroll-top::-webkit-scrollbar-thumb {
  background: rgba(12,29,58,0.45);
  border-radius: 4px;
  border: 2px solid var(--paper, #fbfaf4);
}
.vs-scroll-top::-webkit-scrollbar-thumb:hover {
  background: rgba(12,29,58,0.65);
}

/* ===== v4.8 Round 3 — Floating side jump-nav (endowment + archive) ===== */
/* v4.8 Round 4 hotfix 2: transparent + minimal — borderless, no shadow, ghost text. */
.side-nav {
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(184,149,84,0.35);
  border-radius: 0;
  box-shadow: none;
  max-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-12px, -50%);
  transition: opacity 260ms ease, transform 260ms ease;
}
.side-nav.is-visible {
  opacity: 0.55;
  pointer-events: auto;
  transform: translate(0, -50%);
}
.side-nav.is-visible:hover,
.side-nav.is-visible:focus-within {
  opacity: 1;
}
.side-nav a {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #4a5568);
  text-decoration: none;
  line-height: 1.3;
  padding: 0.14rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.55rem;
  margin-left: -0.55rem;
  transition: color 200ms, border-color 200ms;
}
.side-nav a:hover {
  color: var(--ink, #0c1d3a);
  border-left-color: var(--gold, #b89853);
}
.side-nav a.is-current {
  color: var(--ink, #0c1d3a);
  border-left-color: var(--gold, #b89853);
}
@media (max-width: 1100px) {
  .side-nav { display: none; }
}

/* ===== v4.8 Round 4 — Member-only sub-nav strip below the main header ===== */
/* hotfix 6: gold rule and content span only the Heritage→Members nav range,
   measured at runtime from the actual <nav> link bounding rects. */
.members-subnav {
  background: var(--ink, #0c1d3a);
  color: var(--gold, #b89853);
  border-bottom: 1px solid rgba(184,149,84,0.30);
  position: relative;
}
.members-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.6rem 1.1rem;
  padding: 0.55rem 0;
  /* JS sets --subnav-left and --subnav-right at runtime to align with main nav */
  margin-left: var(--subnav-left, 1rem);
  margin-right: var(--subnav-right, 1rem);
  border-top: 1px solid var(--gold, #b89853);
  /* compensate the new top border so vertical position matches previous design */
  padding-top: calc(0.55rem - 1px);
}
@media (max-width: 880px) {
  /* Once the main nav collapses behind the menu toggle there is nothing to align to. */
  .members-subnav__inner {
    margin-left: 1rem;
    margin-right: 1rem;
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .members-subnav__inner { margin-left: 0.75rem; margin-right: 0.75rem; }
}
.members-subnav__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #b89853);
  white-space: nowrap;
  padding-right: 1.1rem;
  border-right: 1px solid rgba(184,149,84,0.45);
}
.members-subnav__links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.members-subnav__links a {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold, #b89853);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.members-subnav__links a:hover,
.members-subnav__links a[aria-current="page"] {
  color: var(--cream, #f4eedf);
  border-bottom-color: var(--gold, #b89853);
}
@media (max-width: 600px) {
  .members-subnav__inner { padding: 0.5rem 0.75rem; gap: 0.5rem 0.9rem; }
  .members-subnav__label { padding-right: 0.9rem; }
  .members-subnav__links { gap: 1rem; }
  .members-subnav__links a { font-size: 0.7rem; }
}

/* v4.8 hotfix 2: caption note under home pullquote */
.pullquote__note {
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft, #4a5568);
  font-style: italic;
  text-align: center;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.pullquote__note a { color: inherit; border-bottom: 1px solid rgba(184,149,84,0.55); text-decoration: none; }
.pullquote__note a:hover { color: var(--ink, #0c1d3a); border-bottom-color: var(--gold, #b89853); }