/* ============================================================
   Alpha Kappa Psi, Beta Pi Chapter : site styles
   Edit the tokens in :root to change the whole look.
   Every color on the site lives in this block.
   ============================================================ */
:root {
  /* Theme: Midnight Gold, softened: lighter navy, warm off-white and pale gold sections, gold as the lead */
  color-scheme: dark;
  --bg: #1B2B4B;              /* soft navy: navy sections and page base */
  --bg-deep: #16243F;         /* footer */
  --surface: #243759;         /* tinted navy sections, inputs on navy */
  --surface-2: #2E4368;       /* secondary buttons, hover on navy */
  --gold: #EEBC40;            /* lead gold: buttons, accents, Greek letters */
  --gold-light: #F7D681;      /* hover, glow, hero letters */
  --gold-sheen: #FBE3A6;      /* top of the hero letters' still sheen (light gold to --gold) */
  --head-grad-top: #FBF7EE;   /* photo-header headlines: each line runs from this warm white at the top... */
  --head-grad-end: #F5DDA3;   /* ...to this pale gold at the bottom (3.6:1 or better against the photo, checked) */
  --on-gold: #1B2B4B;         /* text on gold, 8.0:1 */
  --text: #F7F3EA;            /* warm white text on navy, 12.7:1 */
  --text-soft: rgba(247, 243, 234, .86);
  --muted: #B4BDD0;           /* secondary text on navy, 7.5:1 */
  --line: #33496F;            /* hairlines on navy */
  --gold-line: rgba(238, 188, 64, .45);
  --gold-tint: rgba(238, 188, 64, .1);
  --ghost-hover: rgba(247, 243, 234, .1);
  --header-bg: rgba(27, 43, 75, .8);
  --hero-rgb: 27, 43, 75;                 /* photo overlays (same soft navy) */
  --gold-rgb: 238, 188, 64;               /* photo overlays: the soft gold tint (same as --gold) */
  --accent-text: var(--gold); /* gold used as text: bright on navy, darker on light sections */
  --well: #243759;            /* navy photo wells (member photos) on any background */
  --well-line: #33496F;
  --on-dark: #F7F3EA;         /* light text and badges that always sit on navy */
  --footer-hairline: rgba(247, 243, 234, .3);    /* top edge of the footer when a navy section sits above it */

  /* Light sections: .section--light (warm off-white) and .section--warm (pale gold tint), navy text, gold accents */
  --light-bg: #FBF8F2;        /* warm off-white; navy text 13.3:1 */
  --warm-bg: #F6EDD8;         /* pale gold tint; navy text 12.1:1 */
  --light-surface: #EFE4CC;   /* inputs, tab track, placeholder box */
  --light-text: #1B2B4B;      /* navy text on light */
  --light-muted: #59637A;     /* secondary text on light, 5.7:1 (5.2:1 on pale gold) */
  --gold-deep: #7C590C;       /* small gold text on light, 6.0:1 (5.5:1 on pale gold) */
  --gold-rule: #C9972B;       /* gold lines on light (decorative) */
  --light-line: #E6DCC6;      /* hairlines on light */
  --light-gold-tint: rgba(201, 151, 43, .1);
  --light-ghost-hover: rgba(27, 43, 75, .06);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.07'/></svg>");

  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --greek: "GFS Didot", "Didot", "Bodoni 72", Georgia, serif;

  --wrap: 1180px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --header-h: 68px;

  /* Motion: short and ease-out only, nothing bouncy */
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --ease-in: cubic-bezier(.55, .085, .68, .53);
  --dur-fast: 120ms;     /* old page fading out */
  --dur-hover: 160ms;    /* hover and state changes */
  --dur-base: 220ms;     /* new page fading in */
  --dur-reveal: 700ms;       /* scroll reveals: movement */
  --dur-reveal-fade: 400ms;  /* scroll reveals: fade, shorter so text is readable before it finishes moving */
  --ease-reveal: cubic-bezier(.42, 0, .58, 1);   /* ease-in-out, so the whole travel is visible (akpsi-phi feel) */
  --reveal-shift: 30px;  /* two-column blocks and timeline entries slide in from the side */
  --reveal-rise: 24px;   /* text, headings, cards, and list items rise in */
  --reveal-stagger: 100ms; /* delay between cards in a row, and between a heading and the text under it */
  --dur-intro: 1200ms;       /* photo header on arrival: photo zoom and overlay settle */
  --dur-intro-fade: 350ms;   /* header text on arrival: fade (short, so it's readable fast) */
  --dur-intro-rise: 600ms;   /* header text on arrival: rise */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--grain), var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section--tight { padding-top: 0; }
.section--mist { background: var(--grain), var(--surface); }
.section--light, .section--warm {
  color-scheme: light;
  --text: var(--light-text);
  --text-soft: var(--light-text);
  --muted: var(--light-muted);
  --line: var(--light-line);
  --surface: var(--light-surface);
  --surface-2: var(--light-line);
  --accent-text: var(--gold-deep);
  --gold-line: var(--gold-rule);
  --gold-tint: var(--light-gold-tint);
  --ghost-hover: var(--light-ghost-hover);
  background-color: var(--light-bg);
  color: var(--text);
}
.section--warm { background-color: var(--warm-bg); }
:is(.section--light, .section--warm) :focus-visible { outline-color: var(--gold-deep); }
.page-head + .section--light.section--tight { padding-top: clamp(40px, 6vw, 64px); }   /* white section needs its own top space under the photo header */
.center { text-align: center; }
.center p { margin-inline: auto; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.06; letter-spacing: -0.024em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 66ch; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--muted); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.4em; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
}
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-light); }
.btn--navy { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn--navy:hover { border-color: var(--gold-line); }
.btn--white { background: var(--text); color: var(--on-gold); }
.btn--white:hover { background: var(--gold-light); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: var(--ghost-hover); }
:is(.section--light, .section--warm) .btn--navy { background: var(--light-text); color: var(--light-bg); border-color: transparent; }
:is(.section--light, .section--warm) .btn--navy:hover { background: var(--well); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.center .btn-row { justify-content: center; }
.textlink { color: var(--accent-text); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gold-line); }
.textlink:hover { color: var(--text); border-color: var(--gold); }

/* Photo header overlay: extra shade that settles to 0 when a page arrives (see Motion) */
@property --intro-dim { syntax: "<number>"; inherits: false; initial-value: 0; }

/* Text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
/* Reserve room for the header that site.js draws, so content doesn't jump down when it appears */
#site-header { min-height: calc(var(--header-h) + 1px); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
/* Over the photo at the top of a page (site.js adds .has-photo-top to <body>, and .is-solid to the header after 24px of scroll):
   the header overlaps the photo and is see-through until you scroll. A fully clear bar fails contrast over the bright sky
   (1.2:1), so it keeps a 68% navy shade through the bar that fades out below it. Checked against the photo at 390 to 1920px
   wide, with the cursor lift at full depth: nav text 4.5:1 or better, gold letters 3:1 or better. */
.has-photo-top { --over: calc(var(--header-h) + 1px); }
.has-photo-top .site-header { margin-bottom: calc(-1 * var(--over)); }
.site-header::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: calc(var(--header-h) + 80px); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--hero-rgb), .68) 0, rgba(var(--hero-rgb), .68) var(--header-h), rgba(var(--hero-rgb), 0) 100%); }
.has-photo-top .site-header:not(.is-solid, .is-open) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-photo-top .site-header:not(.is-solid, .is-open)::before { opacity: 1; }
.has-photo-top .site-header:not(.is-solid, .is-open) .brand__name span { color: var(--text-soft); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
/* Alpha Kappa Psi marks: national trademarks. Shown at their own proportions (width or height auto), never cropped, recolored, or given effects */
.brand__badge { flex: none; width: 36px; height: 36px; }
.brand__letters { font-family: var(--greek); font-size: 1.9rem; line-height: 1; color: var(--gold); }
.brand__name { font-size: .82rem; line-height: 1.2; font-weight: 700; color: var(--text); }
.brand__name span { display: block; font-weight: 500; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--text); }
.nav a:hover { border-color: var(--gold); }
.nav a[aria-current="page"] { border-color: var(--gold); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.socials { display: flex; align-items: center; gap: 4px; }
.socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text); transition: background-color var(--dur-hover), color var(--dur-hover); }
.socials a:hover { background: var(--gold); color: var(--on-gold); }
.socials svg { width: 18px; height: 18px; }
.signin-btn { padding: .55em 1.15em; font-size: .9rem; }

.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; }
.mobile-panel { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.mobile-panel nav { display: grid; padding: 8px 20px; }
.mobile-panel nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.mobile-panel nav a[aria-current="page"] { color: var(--gold); }
.mobile-actions { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 24px; }
.site-header.is-open .mobile-panel { display: block; }

/* Seven nav links (Corporate Sponsorship added 2026-10-19): whenever the full nav shows, the brand's "Alpha Kappa Psi /
   Beta Pi Chapter" text is hidden (the badge and Greek letters stay) and the links sit a little closer, so everything
   fits on one line inside the header's max width */
.site-header .site-header__inner { width: min(1480px, 100% - 48px); }   /* the header runs wider than the page content (2026-10-19) */
@media (min-width: 1241px) { .nav { gap: 22px; } .brand { margin-right: 12px; } .nav { margin-right: auto; } }
@media (min-width: 1241px) and (max-width: 1399px) { .brand__name { display: none; } }
.header-actions .btn { white-space: nowrap; }
@media (max-width: 1240px) {   /* below this, the menu button */
  .nav, .header-actions { display: none; }
  .menu-toggle { display: grid; }
}

/* ---------- Home hero (campus photo; the overlay thins around the cursor) ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: calc(min(88vh, 860px) + var(--over, 0px)); overflow: hidden; background: rgb(var(--hero-rgb)); color: var(--text); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__photo { position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: 50% 45%; filter: saturate(.78); will-change: transform; }
/* Navy, strongest at the bottom and behind the text column (left), lighter over the sky and palms, over a soft gold
   glow in the upper right (the bottom layer, so the navy keeps it muted behind text). Every text line on every photo
   header was checked against the photo at 360 to 1440px wide with the cursor lift at its 10% cap: normal text 4.5:1 or
   better, headlines 3:1 or better. Narrower than 1024px the text runs the full width, so the side lightening is gentler. */
.hero__overlay {
  position: absolute; inset: 0;
  --ov-side: rgba(var(--hero-rgb), .6) 0%, rgba(var(--hero-rgb), .4) 60%, rgba(var(--hero-rgb), .25) 80%, rgba(var(--hero-rgb), 0) 100%;
  --ov-pool: 45% 30% at 22% 30%;   /* soft navy pool behind the ΑΚΨ letters and the top of the headline */
  background:
    linear-gradient(rgba(var(--hero-rgb), var(--intro-dim)), rgba(var(--hero-rgb), var(--intro-dim))),
    radial-gradient(var(--ov-pool), rgba(var(--hero-rgb), .55), rgba(var(--hero-rgb), .385) 60%, rgba(var(--hero-rgb), 0)),
    linear-gradient(0deg, rgba(var(--hero-rgb), .9) 0%, rgba(var(--hero-rgb), .75) 30%, rgba(var(--hero-rgb), .5) 50%, rgba(var(--hero-rgb), .2) 65%, rgba(var(--hero-rgb), 0) 80%),
    linear-gradient(90deg, var(--ov-side)),
    linear-gradient(180deg, rgba(var(--hero-rgb), 0) 25%, rgba(var(--hero-rgb), .1) 37%),
    radial-gradient(60% 90% at 85% 10%, rgba(var(--gold-rgb), .25), rgba(var(--gold-rgb), 0));
}
@media (max-width: 1023px) {
  .hero__overlay { --ov-side: rgba(var(--hero-rgb), .5) 0%, rgba(var(--hero-rgb), .35) 60%, rgba(var(--hero-rgb), .3) 80%, rgba(var(--hero-rgb), .2) 100%; --ov-pool: 80% 30% at 35% 35%; }
}
/* Phones (touch, 767px and below): every navy layer at 85% of the strength above, so more of the photo shows. Safe only
   here: phones have no cursor lift, and at these widths the letters stay 3.6:1 or better and "Beta Pi Chapter" 5:1 or
   better against the photo. On desktop the letters are already at 3:1 with the lift, so it stays as is. */
@media (max-width: 767px) and (pointer: coarse) {
  .hero__overlay {
    --ov-side: rgba(var(--hero-rgb), .425) 0%, rgba(var(--hero-rgb), .298) 60%, rgba(var(--hero-rgb), .255) 80%, rgba(var(--hero-rgb), .17) 100%;
    background:
      linear-gradient(rgba(var(--hero-rgb), var(--intro-dim)), rgba(var(--hero-rgb), var(--intro-dim))),
      radial-gradient(var(--ov-pool), rgba(var(--hero-rgb), .468), rgba(var(--hero-rgb), .327) 60%, rgba(var(--hero-rgb), 0)),
      linear-gradient(0deg, rgba(var(--hero-rgb), .765) 0%, rgba(var(--hero-rgb), .638) 30%, rgba(var(--hero-rgb), .425) 50%, rgba(var(--hero-rgb), .17) 65%, rgba(var(--hero-rgb), 0) 80%),
      linear-gradient(90deg, var(--ov-side)),
      linear-gradient(180deg, rgba(var(--hero-rgb), 0) 25%, rgba(var(--hero-rgb), .085) 37%),
      radial-gradient(60% 90% at 85% 10%, rgba(var(--gold-rgb), .25), rgba(var(--gold-rgb), 0));
  }
}
/* The ΑΚΨ letters, a thin gold line, and "Beta Pi Chapter", centered in the part of the hero below the header (the
   header overlaps the photo by --over). Everything is sized from --hero-size, the letters' size: the letters are 2.38em
   wide, so (screen width - gutters) / 2.8 keeps them inside any phone screen, up to the full 15rem from about 710px.
   The line and the chapter name scale down with them. Motion (entrance, shine, scroll, tilt): see the Motion block. */
.hero__content { --hero-size: min(15rem, calc((100vw - 40px) / 2.8)); position: relative; z-index: 1; padding: calc(var(--over, 0px) + 32px) 0 32px; text-align: center; }
.hero__letters { margin: 0; font-family: var(--greek); font-size: var(--hero-size); line-height: 1; color: var(--gold-light); }
/* A soft navy scrim right behind the letters (not part of the overlay, so the cursor lift never thins it): a wide
   ellipse, full strength over the letters and fading out past them, so the palms still show around and above.
   It keeps the gold letters above 3:1 against the brightest sky behind them at every width. */
.hero__letters { position: relative; --scrim-a: .2; }   /* the lightest strength that clears 3:1 with margin at every width */
.hero__letters::before { content: ""; position: absolute; z-index: -1; inset: -30% -18%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--hero-rgb), var(--scrim-a)) 0%, rgba(var(--hero-rgb), var(--scrim-a)) 55%, rgba(var(--hero-rgb), calc(var(--scrim-a) * .5)) 78%, rgba(var(--hero-rgb), 0) 100%); }
.hero__glyph { display: inline-block; }
/* A still sheen on the letters, light gold at the top to --gold at the bottom (with or without motion) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__glyph { background: linear-gradient(180deg, var(--gold-sheen) 0%, var(--gold-light) 45%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero__rule { display: block; width: calc(var(--hero-size) * .27); height: 1px; margin: calc(var(--hero-size) * .1) auto calc(var(--hero-size) * .09); background: var(--gold); }   /* about 64px at full size */
.hero__chapter { margin: 0; padding-left: .3em; font-size: calc(var(--hero-size) / 8); font-weight: 400; line-height: 1.2; letter-spacing: .3em; color: var(--text); }   /* padding-left balances the trailing letter spacing, so it centers */
.hero__school { max-width: none; margin: .55em 0 -1.75em; padding-left: .3em; font-size: max(13px, calc(var(--hero-size) / 10.5)); font-weight: 400; line-height: 1.2; letter-spacing: .3em; color: var(--text); }   /* a notch under the chapter name, never below 13px; the negative bottom margin (its own height plus the gap above) keeps the centered block, and so the letters, exactly where they were */

/* ---------- About: "Our network" logo marquee (assets/js/network.js) ---------- */
/* One row that loops right to left: two identical sets in the track, moved by exactly one set (-50%), so there's never
   a gap. Logo height follows its shape (--ar, set by network.js), so wide wordmarks and square marks carry about the
   same visual weight: base height x sqrt(3.2 / aspect), kept between 0.7x and 1.25x, times an optional per-logo
   scale (--s, from the list in network.js) for marks whose lettering still reads light, like Harvard Law School. */
.network { --logo-h: 40px; --logo-gap: 64px; padding-block: clamp(48px, 6.7vw, 86px); }   /* a third less than other sections */
.network h2 { margin-bottom: clamp(16px, 2.4vw, 28px); }
.network__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.network__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.network__track.is-paused { animation-play-state: paused; }
.network__group { display: flex; align-items: center; gap: var(--logo-gap); margin: 0; padding: 0 var(--logo-gap) 0 0; list-style: none; }
.network__logo { display: flex; align-items: center; min-height: calc(var(--logo-h) * 1.6); }   /* grows for a scaled logo, so the marquee never clips it */
.network__logo img { width: auto; max-width: none; height: calc(var(--logo-h) * clamp(.6, sqrt(3.2 / var(--ar, 3.2)), 1.6)); }   /* equal area: every logo covers about the same space (2026-10-19) */
.network__fallback { font-size: 1rem; font-weight: 700; white-space: nowrap; color: var(--muted); }
.network__note { margin: clamp(14px, 2vw, 24px) auto 0; font-size: .95rem; color: var(--text); }
@media (hover: hover) { .network__marquee:hover .network__track { animation-play-state: paused; } }
@media (max-width: 700px) { .network { --logo-h: 32px; --logo-gap: 40px; } }
/* Reduced motion: no scrolling; the logos sit in a centered, wrapped grid, and the loop copy is dropped */
@media (prefers-reduced-motion: reduce) {
  .network__marquee { -webkit-mask-image: none; mask-image: none; }
  .network__track { width: auto; justify-content: center; }
  .network__group { flex-wrap: wrap; justify-content: center; row-gap: 28px; padding: 0 20px; }
  .network__group[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Newsletter (newsletter.js): latest issue featured, then past issues ---------- */
.nl-feature { display: grid; gap: clamp(28px, 4vw, 40px); }
.nl-feature__body { max-width: 760px; }
.nl-feature__body h2 { margin-bottom: .35em; }
.nl-feature__body .btn-row { margin-top: 24px; }
.nl-eyebrow { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.nl-empty { margin: 0; }
.btn.is-disabled { opacity: .6; cursor: default; pointer-events: none; }
/* The PDF itself, embedded on wider screens. Phones get the buttons only (most phone browsers can't show an embedded PDF). */
.nl-embed { overflow: hidden; border-radius: var(--radius-md); background: var(--well); box-shadow: 0 0 0 1px var(--line); }
.nl-embed iframe { display: block; width: 100%; height: clamp(560px, 85vh, 1100px); border: 0; }
@media (max-width: 759px) { .nl-embed { display: none; } }

/* ---------- About: closing call to action ("Think you'd fit here?") ---------- */
.cta-block { padding-top: 48px; border-top: 1px solid var(--gold-line); }
.cta-block p { color: var(--muted); }
.cta-block .btn-row { margin-top: 20px; }
.cta-block .btn--navy, :is(.section--light, .section--warm) .cta-block .btn--navy { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.cta-block .btn--navy:hover, :is(.section--light, .section--warm) .cta-block .btn--navy:hover { background: var(--gold-light); }

/* ---------- Home: quiet philanthropy line under the Recruitment and Members columns ---------- */
.home-giving { margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.home-giving p { max-width: none; margin: 0; color: var(--muted); }   /* one line on wide screens; wraps naturally on phones */

/* ---------- Recruitment and Members: open columns split by a gold line ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; }
.tile { display: flex; flex-direction: column; justify-content: flex-start; padding: 8px clamp(24px, 5vw, 64px) 8px 0; }
.tile + .tile { padding: 8px 0 8px clamp(24px, 5vw, 64px); border-left: 1px solid var(--gold-line); }
.tile .btn-row { margin-top: 12px; }
.tile--navy .lede, .tile--mist .lede { color: var(--muted); }
.tile--mist .btn--navy { background: transparent; color: inherit; border-color: currentColor; }
.tile--mist .btn--navy:hover { background: var(--ghost-hover); }
.tile__art, .faces { display: none; }   /* decorative tile art is not used in the open layout */
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile + .tile { padding: 32px 0; border-left: 0; }
  .tile + .tile { border-top: 1px solid var(--gold-line); }
}

/* ---------- Video feature ---------- */
.video-feature { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-top: 40px; border-radius: var(--radius-md); background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.video-feature video, .video-feature iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); cursor: pointer; }
.video-play:hover { background: var(--gold-light); }
.video-play[hidden] { display: none; }
.video-play svg { width: 30px; height: 30px; margin-left: 4px; }   /* nudged right so the triangle looks centered */
@media (max-width: 600px) {
  .video-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .video-play svg { width: 24px; height: 24px; margin-left: 3px; }
}

/* ---------- In their words (Home, quotes.js): one quote at a time; the box fits the short quotes, long ones get
   smaller text to fit it (set by quotes.js), and changes spin like a slot machine reel ---------- */
.quotes__stage { position: relative; overflow: hidden; max-width: 46rem; margin: 18px auto 0; text-align: left; }
.quote { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; visibility: hidden; }
.quote.is-current, .quote.is-leaving { visibility: visible; }
.quotes__stage.is-spinning > .quote { visibility: hidden; }   /* during a spin only the reel shows */
.quotes__reel { position: absolute; top: 0; left: 0; right: 0; will-change: transform, filter; }
.quote--reel { position: relative; inset: auto; height: var(--quote-h); visibility: visible; }
.quote blockquote { margin: 0; padding-left: 24px; border-left: 2px solid var(--gold-rule); font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }
.quote blockquote p { margin: 0; }
.quote blockquote p + p { margin-top: .8em; }
.quote figcaption { margin-top: 18px; padding-left: 26px; font-size: 1rem; font-weight: 600; color: var(--accent-text); }
.quotes__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.quotes__arrow, .quotes__play { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: border-color var(--dur-hover); }
.quotes__arrow:hover, .quotes__play:hover { border-color: var(--gold-rule); }
.quotes__arrow svg { width: 18px; height: 18px; }
.quotes__play svg { width: 16px; height: 16px; }
.quotes__play[hidden] { display: none; }
.quotes__play .quotes__icon-play, .quotes__play.is-paused .quotes__icon-pause { display: none; }
.quotes__play.is-paused .quotes__icon-play { display: inline; }
.quotes__dots { display: flex; gap: 4px; }
.quotes__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }   /* 24px to tap, 8px to see */
.quotes__dot::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: var(--line); transition: background-color var(--dur-hover), transform var(--dur-hover); }
.quotes__dot[aria-current="true"]::before { background: var(--gold-rule); transform: scale(1.25); }
@media (max-width: 600px) { .quote blockquote { padding-left: 18px; } .quote figcaption { padding-left: 20px; } .quotes__controls { gap: 8px; } }

/* ---------- Why Alpha Kappa Psi (Home): the heading centered, then the video (about 60%) and the "In their words" quote
   card (about 40%) side by side, top-aligned; stacked (video first) at 900px and below. From 1100px the card is exactly
   as tall as the video: contain: size keeps it from adding height to the row, so the row is the video's height and the
   card stretches to it (quotes.js cuts long quotes to fit, with "Read more"). An open "Read more" lets the card grow.
   Below 1100px the card fits the short quotes instead. The card is navy on the warm section, so it sets the navy text
   colors back for itself (the same values as :root). */
.why .lede { margin-inline: auto; }
.why__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: 40px; text-align: left; }
.why__grid .video-feature { margin-top: 0; }
.quotes-card { color-scheme: dark; --text: #F7F3EA; --muted: #B4BDD0; --line: var(--well-line); --accent-text: var(--gold); --gold-rule: var(--gold);
  position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius-lg); background: var(--grain), var(--light-text); color: var(--text); }
.quotes-card :focus-visible { outline-color: var(--gold); }
.quotes-card__mark { flex: none; display: block; height: .5em; margin-bottom: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 3.6rem; line-height: .9; color: var(--gold); }
.quotes-card__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* quotes.js fills it: the stage, then the controls */
.quotes-card .quotes__stage { flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; }
.quotes-card .quote { justify-content: flex-start; }   /* short quotes sit right under the quote mark; spare space goes below */
.quotes-card .quote > * { flex-shrink: 0; }
.quotes-card .quote blockquote { padding-left: 0; border-left: 0; font-size: clamp(.95rem, 1.1vw, 1.05rem); font-weight: 400; line-height: 1.55; color: var(--text); }
.quotes-card .quote blockquote p + p { margin-top: .6em; }
/* Read more (quotes.js): only on a quote cut to fit; the last lines fade out until it's opened */
.quote__more { display: none; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 700; color: var(--gold); cursor: pointer; }
.quote__more:hover { color: var(--gold-light); }
.quote__more svg { width: 16px; height: 16px; transition: transform var(--dur-hover); }
.quote__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.quote--clamped .quote__more { display: inline-flex; }
.quote--clamped blockquote { overflow: hidden; }
.quote--clamped:not(.is-open) blockquote { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6em), transparent); }
.quotes-card.is-expanded .quotes__stage { height: auto !important; }   /* the open quote sets the height */
.quotes-card.is-expanded .quote.is-current { position: relative; }
.quotes-card .quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-left: 0; }
.quote__photo { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--well); box-shadow: 0 0 0 2px var(--gold); }
.quote__photo--initials { display: grid; place-items: center; font-size: .9rem; font-weight: 700; color: var(--text); }
.quote__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.quote__name { font-weight: 700; color: var(--gold); }
.quote__meta { font-size: .9rem; font-weight: 400; color: var(--muted); }
.quotes-card .quotes__controls { flex: none; justify-content: flex-start; margin-top: 16px; }
/* Controls on navy: button outlines and the other dots light enough to see (3:1 or better); the current dot is gold */
.quotes-card :is(.quotes__arrow, .quotes__play) { border-color: rgba(247, 243, 234, .45); }
.quotes-card :is(.quotes__arrow, .quotes__play):hover { border-color: var(--gold); }
.quotes-card .quotes__dot::before { background: var(--muted); }
.quotes-card .quotes__dot[aria-current="true"]::before { background: var(--gold); }
@media (min-width: 1100px) {   /* same breakpoint as quotes.js (matchVideo) */
  .why__grid { align-items: stretch; }
  .why__grid .video-feature { align-self: start; }
  .quotes-card { contain: size; }
  .quotes-card.is-expanded { contain: none; }
}
@media (max-width: 900px) { .why__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner page header: campus photo under a navy overlay (the overlay is its own layer so the
   cursor lift can thin it; see Motion). Same backdrop on the sign-in page. ---------- */
.page-head, .recruit-hero, .signin-page { position: relative; isolation: isolate; overflow: hidden; background: rgb(var(--hero-rgb)); }
.page-head::after, .recruit-hero::after, .signin-page::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("../img/campus-hero.webp") center 40% / cover no-repeat;
}
/* Inner page headers: same idea as the Home hero (see there). Lighter than before above the text and on the right,
   with the soft gold glow in the upper right, fading to solid navy at the bottom edge. */
.page-head::before, .recruit-hero::before, .signin-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --ov-side: rgba(var(--hero-rgb), .65) 0%, rgba(var(--hero-rgb), .55) 60%, rgba(var(--hero-rgb), .5) 80%, rgba(var(--hero-rgb), .15) 100%;
  --ov-rows: rgba(var(--hero-rgb), 0) 25%, rgba(var(--hero-rgb), .45) 37%;
  --ov-pool: 40% 25% at 45% 30%; --ov-pool-a: 0;   /* a navy pool behind centered text; only Sign in turns it on */
  background:
    linear-gradient(rgba(var(--hero-rgb), var(--intro-dim)), rgba(var(--hero-rgb), var(--intro-dim))),
    radial-gradient(var(--ov-pool), rgba(var(--hero-rgb), var(--ov-pool-a)), rgba(var(--hero-rgb), calc(var(--ov-pool-a) * .7)) 60%, rgba(var(--hero-rgb), 0)),
    linear-gradient(180deg, rgba(var(--hero-rgb), 0) 60%, rgb(var(--hero-rgb)) 100%),
    linear-gradient(90deg, var(--ov-side)),
    linear-gradient(180deg, var(--ov-rows)),
    radial-gradient(60% 90% at 85% 10%, rgba(var(--gold-rgb), .25), rgba(var(--gold-rgb), 0));
}
@media (max-width: 1023px) {
  .page-head::before, .recruit-hero::before, .signin-page::before {
    --ov-side: rgba(var(--hero-rgb), .7) 0%, rgba(var(--hero-rgb), .65) 60%, rgba(var(--hero-rgb), .65) 80%, rgba(var(--hero-rgb), .6) 100%;
    --ov-rows: rgba(var(--hero-rgb), 0) 20%, rgba(var(--hero-rgb), .3) 32%;
    --ov-pool: 90% 25% at 45% 30%;
  }
}
/* Sign in: its card is centered and starts higher, so the ΑΚΨ and heading get the navy pool behind them */
.signin-page::before { --ov-pool-a: .55; }
.page-head .lede { color: var(--text); }
.page-head { padding: calc(clamp(72px, 10vw, 120px) + var(--over, 0px)) 0 clamp(40px, 6vw, 64px); }
.page-head h1 { max-width: 16ch; }
/* Photo-header headlines (About, Members, Newsletter, Philanthropy, Recruitment; not Sign in): a warm white to pale gold
   gradient, repeated on every line (1.06em, the h1 line height). When site.js splits the headline into words for the
   intro, the gradient goes on each word instead, since the moving words can't share the headline's clipped background. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(.page-head, .recruit-hero) h1:not(.is-split), :is(.page-head, .recruit-hero) h1 .intro-word {
    background: linear-gradient(180deg, var(--head-grad-top) 30%, var(--head-grad-end) 100%) 0 0 / 100% 1.06em repeat-y;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* ---------- About ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); }
[data-page="about"] .split { gap: clamp(40px, 8vw, 120px); }
/* Intro headings: the coat of arms sits right after the "Alpha Kappa Psi" heading, centered on it and about as tall as
   the heading text. If both don't fit on one line (very narrow phones), the crest goes above the heading (wrap-reverse). */
.split__title { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-start; gap: 10px 16px; margin-bottom: clamp(16px, 2vw, 26px); }
.split__title h2 { margin: 0; }
.coa { flex: none; width: auto; height: clamp(3.45rem, 6.9vw, 5.625rem); }   /* about 1.5 times the heading's height (h2 is clamp(2rem, 4vw, 3.25rem)); its own proportions */
[data-page="about"] .split > div > :last-child { margin-bottom: 0; }   /* so the space below the intro is the section's own padding, like the others */
/* About intro: Beta Pi text and photo side by side, then Alpha Kappa Psi with the group photo full width
   under it. Photos are never cropped: shown at their own proportions with rounded corners and a thin outline. */
[data-page="about"] .about-row { align-items: center; }
[data-page="about"] .section:has(.about-row) { overflow-x: clip; }   /* the photos slide in from the side: keep that from nudging the page sideways on phones */
[data-page="about"] .split.about-stack { grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); margin-top: clamp(56px, 8vw, 104px); }
.about-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
/* Pillars (BUSIK) as photo rows, same pattern as the intro: text and photo side by side, the photo switching sides
   each row. Flipped rows put the photo first in the HTML so the scroll reveal slides each column in from its own side. */
[data-page="about"] .pillar-row { margin-top: clamp(24px, 3vw, 36px); }   /* first row, right under the header */
[data-page="about"] .pillar-row + .pillar-row { margin-top: clamp(32px, 4vw, 48px); }
/* Compact rows on cream: a capped 3:2 photo column beside the text, so several pillars fit on screen at once */
.pillars-section { padding: clamp(56px, 7vw, 88px) 0; }
.pillars-section .wrap { width: min(980px, 100% - 40px); }   /* narrower than the page: keeps each photo close to its text, the same on both sides */
[data-page="about"] .pillars-section .pillar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(28px, 4vw, 48px); }
[data-page="about"] .pillars-section .pillar-row--flip { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.pillars-section .pillar-row .about-photo img { aspect-ratio: 3 / 2; max-height: 267px; object-fit: cover; }
.pillars-section .pillar-row__title { margin-bottom: 12px; }
.pillars-section .pillar-row p { margin-bottom: .6em; }
.pillar-row__title { flex-wrap: nowrap; }
.pillar-row__title h3 { margin: 0; }
/* Icon badges: a navy icon on a gold circle (inline Lucide SVGs in about.html), the same on navy or light sections */
.pillar-badge { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.pillar-badge svg { width: 24px; height: 24px; }
.pillar-row__name { display: block; }
.pillar-row__line { display: block; margin-top: 2px; font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .pillar-row--flip > .about-photo { order: 1; } }   /* phones: text first, photo under it */
@media (max-width: 800px) {   /* pillars on phones: one column, the photo under the text at up to 480px wide */
  [data-page="about"] .pillars-section .pillar-row, [data-page="about"] .pillars-section .pillar-row--flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pillars-section .pillar-row .about-photo { max-width: 480px; }
  .pillars-section .pillar-row .about-photo img { max-height: none; }
}
/* Section header: a small gold eyebrow over the tagline */
.eyebrow { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.pillars-tagline { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: .01em; }
.pillars-section .eyebrow { margin-bottom: 8px; }
/* Read more (pillars.js): the longer text shows its first 3.5 lines, fading out, and opens to its full height. Without the script it simply shows. */
.pillar-more[data-ready] { --peek: 5.4em; max-height: var(--peek); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent); transition: max-height var(--dur-reveal) var(--ease-reveal); }   /* closed: about 3.5 lines of it, fading out */
.pillar-more[data-ready].is-open { max-height: var(--full, 60em); -webkit-mask-image: none; mask-image: none; }   /* --full: its height, set by pillars.js */
.pillar-more__inner > :last-child { margin-bottom: 0; }
.pillar-more__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent-text); cursor: pointer; }
.pillar-more__btn:hover { color: var(--text); }
.pillar-more__btn svg { width: 18px; height: 18px; transition: transform var(--dur-reveal) var(--ease-reveal); }
.pillar-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Photo carousels (pillars.js, lists in pillar-photos.js). Only drawn when a pillar has 2+ photos; the frame is 3:2
   and the photos crossfade. With one photo the plain image above is used. */
.pcar { position: relative; }
.pcar__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); touch-action: pan-y; }
.about-photo .pcar__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; opacity: 0; transition: opacity 500ms var(--ease-out); }
.about-photo .pcar__slide.is-active { opacity: 1; }
.pcar__arrow { position: absolute; top: 0; bottom: 34px; margin: auto 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(247, 243, 234, .35); border-radius: 50%; background: rgba(27, 43, 75, .72); color: #F7F3EA; cursor: pointer; transition: background-color var(--dur-hover); }
.pcar__arrow:hover { background: rgba(27, 43, 75, .92); }
.pcar__arrow svg { width: 22px; height: 22px; }
.pcar__arrow--prev { left: 12px; }
.pcar__arrow--next { right: 12px; }
.pcar__dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.pcar__dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pcar__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background-color var(--dur-hover), transform var(--dur-hover); }   /* full --muted: 5.7:1 on cream */
.pcar__dot[aria-current="true"]::before { background: var(--accent-text); transform: scale(1.25); }
.pcar--single .pcar__arrow, .pcar--single .pcar__dots { display: none; }
/* Pillars (BUSIK) accordion, not on the page now (the photo rows above replaced it; kept for the vote): one row open at a time (site.js). Each row is a button: the big letter, the name with
   its one-line description, and a plus that turns into an x when open. The panel's height eases open by animating its
   grid row from 0fr to 1fr; a closed panel is also hidden from Tab and screen readers (visibility). Reduced motion:
   the global rule at the end of this file turns every transition off. */
.pillars { margin-top: 48px; border-top: 1px solid var(--line); --pillar-letter: 72px; --pillar-pad: 24px; }
.pillar { position: relative; border-bottom: 1px solid var(--line); }
.pillar::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-reveal) var(--ease-reveal); }   /* gold left border when open */
.pillar.is-open::before { transform: scaleY(1); }
.pillar__heading { margin: 0; font-size: inherit; letter-spacing: 0; }
.pillar__toggle { display: grid; grid-template-columns: var(--pillar-letter) minmax(0, 1fr) 24px; align-items: center; gap: 20px; width: 100%; padding: 22px var(--pillar-pad); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-hover); }
.pillar:not(.is-open) .pillar__toggle:hover { background: var(--ghost-hover); }
.pillar__toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.pillar__letter { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); opacity: .55; transform-origin: left center; transition: opacity var(--dur-hover), transform var(--dur-reveal) var(--ease-reveal); }
.pillar__toggle:hover .pillar__letter, .pillar.is-open .pillar__letter { opacity: 1; }
.pillar.is-open .pillar__letter { transform: scale(1.15); }
.pillar__name { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.pillar__line { display: block; margin-top: 2px; font-size: .95rem; font-weight: 400; color: var(--muted); }
.pillar__icon { position: relative; width: 22px; height: 22px; justify-self: end; color: var(--accent-text); transition: transform var(--dur-reveal) var(--ease-reveal); }
.pillar__icon::before, .pillar__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.pillar__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pillar.is-open .pillar__icon { transform: rotate(45deg); }   /* the plus turns into an x */
.pillar__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-reveal) var(--ease-reveal), visibility 0s linear var(--dur-reveal); }
.pillar.is-open .pillar__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-reveal) var(--ease-reveal), visibility 0s; }
.pillar__body { min-height: 0; overflow: hidden; padding: 0 var(--pillar-pad) 0 calc(var(--pillar-pad) + var(--pillar-letter) + 20px); opacity: 0; transition: opacity var(--dur-reveal-fade) var(--ease-out); }
.pillar.is-open .pillar__body { opacity: 1; transition-delay: 120ms; }   /* the text fades in as the row opens */
.pillar__body p { margin: 0; max-width: 70ch; color: var(--text-soft); }
.pillar__body p + p { margin-top: 1em; }
.pillar__body > :last-child { padding-bottom: 28px; }
@media (max-width: 640px) {
  .pillars { --pillar-letter: 40px; --pillar-pad: 14px; }
  .pillar__toggle { gap: 14px; padding-block: 18px; }
  .pillar__letter { font-size: 2.2rem; }
  .pillar__name { font-size: 1.15rem; }
  .pillar__line { font-size: .9rem; }
  .pillar__body { padding-left: var(--pillar-pad); }   /* phones: the text uses the full width under the row */
}

/* History: the title (gold eyebrow with a short gold rule, then the heading) above one full-width gold line with an
   evenly spaced gold ring per entry, the year above the line and the details below. If the entries don't fit, the
   timeline scrolls sideways in its own box (the page doesn't move). Phones (640px and below): a vertical timeline,
   the line down the left with a ring at each entry. Tighter padding than other sections, so the band hugs the content. */
.history-section { padding: clamp(48px, 6vw, 80px) 0; }
.history { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
.history__title h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.eyebrow--rule { display: flex; align-items: center; gap: 12px; }
.eyebrow--rule::after { content: ""; flex: none; width: 32px; height: 2px; background: var(--gold-rule); }
.timeline-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 0 12px; }
.timeline-scroll:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; border-radius: 4px; }
.timeline { --year-h: 2.4rem; --node: 18px; --tl-gap: 20px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); column-gap: var(--tl-gap); margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.timeline__year { height: var(--year-h); line-height: var(--year-h); margin-bottom: calc(var(--node) + 14px); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
/* the ring, on the line just under the year */
.timeline li::before { content: ""; position: absolute; z-index: 1; top: calc(var(--year-h) + 4px); left: 50%; width: var(--node); height: var(--node); margin-left: calc(var(--node) / -2); box-sizing: border-box; border-radius: 50%; border: 2px solid var(--gold-rule); background: var(--warm-bg); }
/* the line, from this ring's center to the next one's */
.timeline li::after { content: ""; position: absolute; top: calc(var(--year-h) + 4px + var(--node) / 2 - 1px); left: 50%; width: calc(100% + var(--tl-gap)); height: 2px; background: var(--gold-rule); }
.timeline li:last-child::after { display: none; }
.timeline p { margin: 0; max-width: 24ch; font-size: .95rem; color: var(--muted); }
@media (max-width: 640px) {
  .timeline-scroll { overflow: visible; padding: 0; }
  .timeline { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 24px; }
  .timeline li { display: block; padding-left: 34px; text-align: left; }
  .timeline__year { height: auto; line-height: 1.2; margin-bottom: 4px; }
  .timeline li::before { top: .15rem; left: 0; margin-left: 0; }
  .timeline li::after { top: calc(.15rem + var(--node)); left: calc(var(--node) / 2 - 1px); width: 2px; height: auto; bottom: calc(-24px - .15rem); }   /* down to the next ring (row gap plus the ring's offset) */
  .timeline p { max-width: none; }
}

/* ---------- Philanthropy ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; border-top: 1px solid var(--line); }
.way { display: block; padding: 24px 24px 8px 0; text-decoration: none; }
.way + .way { padding-left: 24px; border-left: 1px solid var(--line); }
.way strong { display: block; margin-bottom: 4px; font-size: 1.35rem; letter-spacing: -.015em; }
.way:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.way span { color: var(--muted); }
@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; }
  .way, .way + .way { padding: 18px 0; border-left: 0; }
  .way + .way { border-top: 1px solid var(--line); }
}
.lifeline-notes { margin-top: 24px; font-size: .95rem; color: var(--muted); }
/* Photo grid under Our Commitment to Service (2026-10-19): a large photo (2 by 2) and four tiles, every photo cropped
   to fill its tile so all edges line up. 4 columns, 2 on phones (the large one then spans the full width). */
.phil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 240px); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; }
.phil-grid__item { margin: 0; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
.phil-grid__item--big { grid-column: span 2; grid-row: span 2; }
.phil-grid__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 700px) { .phil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; } .phil-grid__item--big { grid-row: span 1; } }
/* A row of photos under a two-column section (Our Commitment to Service): as wide as the section, same height each */
.phil-photos--row { max-width: none; margin-top: clamp(28px, 4vw, 44px); }
/* Philanthropy photos (one in How We Give Back, two in Our Commitment to Service): a row as wide as the text column,
   every photo the same height at its own proportions (flex-grow is each photo's width / height, in --r), never cropped.
   Stacked full width at 760px and below. */
.phil-photos { display: flex; gap: 16px; max-width: 66ch; margin-top: 36px; }
.phil-photos img { flex: var(--r, 1) 1 0; min-width: 0; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 760px) { .phil-photos { flex-direction: column; } .phil-photos img { flex: none; } }
/* Text beside the photos (.phil-split): the text on the left, the photos in a right column (--photo-col wide, set per
   section), stacked top to bottom at full column width. Sized by the space the section has (a container query), not
   the window, so the alumni page beside its sidebar works too: under 960px it goes to one column with the photos in a
   row under the text, and under 600px (phones) they stack. */
:has(> .phil-split) { container-type: inline-size; }
.phil-split { display: grid; grid-template-columns: minmax(0, 66ch) minmax(0, var(--photo-col, 400px)); justify-content: start; gap: clamp(28px, 3vw, 40px); align-items: start; }   /* text column as wide as its paragraphs, so the photos sit right beside the text */
.phil-split__text > :last-child { margin-bottom: 0; }
.phil-split > .phil-photos { flex-direction: column; max-width: none; margin-top: 0; }
.phil-split > .phil-photos img { flex: none; }
@container (max-width: 959px) {
  .phil-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .phil-split > .phil-photos { flex-direction: row; max-width: 66ch; margin-top: 36px; }
  .phil-split > .phil-photos img { flex: var(--r, 1) 1 0; }
}
@container (max-width: 599px) { .phil-split > .phil-photos { flex-direction: column; } .phil-split > .phil-photos img { flex: none; } }
/* Staggered pair (Our Commitment to Service), beside the text only: each photo 78% of the column, the first against
   the right edge, the second lower and against the left, so they cascade diagonally. Under the text they go back to
   the row (and the phone stack) above. */
@container (min-width: 960px) {
  .phil-split > .phil-photos--stagger { gap: 28px; }
  .phil-split > .phil-photos--stagger img { width: 78%; }
  .phil-split > .phil-photos--stagger img:nth-child(odd) { align-self: flex-end; }
  .phil-split > .phil-photos--stagger img:nth-child(even) { align-self: flex-start; }
}

/* Philanthropy slideshow (Our Commitment to Service, phil-slideshow.js): one photo at a time in a 3:4 frame, crossfading,
   each shown whole (contain) on a navy well so wide photos aren't cropped. Controls under the frame: previous, the
   count, pause/play, next. Beside the text it fills the photo column; under the text (959px and below) it is up to
   420px wide. Without JS only the first photo shows and the controls stay hidden. */
.phil-show { width: 100%; }
.phil-show__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-md); background: var(--well); box-shadow: 0 0 0 1px var(--light-line); }
.phil-show__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease; }
.phil-show__slide.is-active { opacity: 1; }
.phil-show__bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.phil-show__bar[hidden] { display: none; }
.phil-show__count { margin: 0 8px; min-width: 4.5em; text-align: center; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--light-muted); }
.phil-show__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--light-line); border-radius: 50%; background: var(--light-bg); color: var(--light-text); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.phil-show__btn:hover { border-color: var(--gold-rule); background: var(--light-gold-tint); }
.phil-show__btn svg { width: 20px; height: 20px; }
.phil-show__btn .i-play, .phil-show.is-paused .phil-show__btn .i-pause { display: none; }
.phil-show.is-paused .phil-show__btn .i-play { display: block; }
@container (max-width: 959px) { .phil-split > .phil-show { max-width: 420px; margin-top: 36px; } }
/* Text-only sections, and the full-width photo slideshow at the bottom of the page (.phil-gallery, since 2026-10-18) */
.phil-text { max-width: 66ch; }
.phil-text > :last-child { margin-bottom: 0; }
.phil-gallery h2 { text-align: center; }
.phil-show--wide { max-width: 960px; margin: 28px auto 0; }
.phil-show--wide .phil-show__frame { aspect-ratio: 3 / 2; max-height: 78vh; }
@media (max-width: 600px) { .phil-show--wide .phil-show__frame { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .phil-show__slide { transition: none; } }

.pullquote { margin: 0; padding-left: 24px; border-left: 4px solid var(--gold); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; }
.placeholder { padding: 16px 18px; border: 2px dashed var(--gold-line); border-radius: 12px; background: var(--gold-tint); color: var(--gold-light); font-size: .95rem; }
:is(.section--light, .section--warm) .placeholder { color: var(--gold-deep); }
:is(.section--light, .section--warm) .pullquote { border-left-color: var(--gold-rule); }

.efforts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); margin-top: 40px; }
.effort { padding-top: 20px; border-top: 1px solid var(--gold-line); }
.effort h3 { margin-bottom: .35em; }
.effort p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .efforts { grid-template-columns: 1fr; } }
.help { padding: 0; }
.help .lede { color: var(--muted); }
.share-status { margin: 14px 0 0; min-height: 1.5em; color: var(--accent-text); font-weight: 600; }

/* ---------- Members ---------- */
.member-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 40px; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tab { padding: .65em 1.3em; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; transition: background-color var(--dur-hover); }
.tab:hover { background: var(--surface-2); }
.tab[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.search { min-width: min(300px, 100%); padding: .75em 1.2em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; color: var(--text); }
.search::placeholder { color: var(--muted); }
.search:focus-visible { border-color: var(--gold); }
/* Major and Graduating year filters (members.js). Side by side on phones too. */
.member-tools { margin-bottom: 20px; }
.member-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 36px; }
.member-filter { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.member-filter select { width: auto; min-width: 160px; max-width: 300px; padding: .65em 2.4em .65em 1.1em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2359637A' stroke-width='1.6'/></svg>") no-repeat right 1em center; font: inherit; font-size: .95rem; font-weight: 500; color: var(--text); -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer; }
.member-filter select:focus-visible { border-color: var(--gold); }
.member-filter select:disabled { opacity: .55; cursor: not-allowed; }
.member-count { margin: 0 0 .7em auto; font-size: .95rem; color: var(--muted); }
.member-clear { margin: 0 0 .7em; padding: 0; border: 0; border-bottom: 2px solid var(--gold-line); background: none; font: inherit; font-size: .95rem; font-weight: 600; color: var(--text); cursor: pointer; }
.member-clear:hover { border-color: var(--gold); }
.member-clear[hidden] { display: none; }
.member-filter[hidden] { display: none; }   /* Career interest, until anyone has one */
/* Smaller members controls (this page only: .tab and .search are also used inside the brothers site).
   Search text stays at 16px so iPhones don't zoom in when it's tapped. */
.member-tools .tabs { padding: 4px; }
.member-tools .tab { padding: .55em 1.15em; font-size: 15px; }
.member-tools .search { padding: .6em 1.1em; font-size: 16px; }
.member-filter { font-size: .8rem; }
.member-filter select { padding-block: .5em; font-size: .9rem; }
@media (max-width: 640px) {
  .member-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .member-filter select { min-width: 0; width: 100%; }
  .member-count { grid-column: 1; margin: 0; }
  .member-clear { grid-column: 2; justify-self: end; margin: 0; }
}
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 36px); }

.member { display: block; }
.member__media { position: relative; }   /* the photo and, on top of it, the LinkedIn badge: two separate links */
.member__photo { display: block; color: inherit; text-decoration: none; }
.member__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--well); box-shadow: inset 0 0 0 1px var(--well-line); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.member__initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; font-weight: 800; letter-spacing: -.03em; color: var(--gold); }
.member__initials--greek { font-family: var(--greek); font-weight: 400; letter-spacing: 0; }
.member__photo .member__logo { position: absolute; inset: 0; width: 46%; height: auto; margin: auto; object-fit: contain; }   /* logo badge for brothers without a photo: no crop, no stretch */
.member__photo--email:hover .member__logo { transform: none; }   /* no hover zoom on the trademark */
.member__badge { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--on-dark); color: var(--on-gold); transition: background-color .25s, transform .25s; }
.member__badge svg { width: 18px; height: 18px; }
.member__reveal { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--gold); color: var(--on-gold); font-weight: 700; transform: translateY(101%); transition: transform .3s ease; }
.member__reveal svg { width: 18px; height: 18px; }
.member__photo--email:hover .member__reveal, .member__photo--email:focus-visible .member__reveal { transform: none; }   /* "Email [name]": only on a photo with an address */
.member__badge:hover, .member__badge:focus-visible { background: var(--gold); transform: scale(1.08); }
.member__photo--email:hover img, .member__photo--email:focus-visible img { transform: scale(1.04); }
.member__name { margin: 16px 0 2px; font-size: 1.2rem; }
.member__name strong { font-weight: 800; }
.member__role { margin: 0; font-weight: 600; color: var(--accent-text); }
.member__major { margin: 0; font-size: .93rem; color: var(--muted); }
/* Members page: slightly smaller cards and tighter gaps, so five fit per row at full width (four before) */
[data-page="members"] .members-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(16px, 2vw, 24px); }
[data-page="members"] .member__photo { border-radius: 16px; }
[data-page="members"] .member__initials { font-size: 2.6rem; }
[data-page="members"] .member__badge { top: auto; bottom: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; }   /* bottom-right, above the hover bar so it stays visible; 44px is a full-size tap target */
[data-page="members"] .member__badge svg { width: 22px; height: 22px; }
[data-page="members"] .member__reveal { gap: 8px; padding: 12px 14px; font-size: .9rem; }
[data-page="members"] .member__reveal { padding-right: 62px; }   /* clear of the badge, which sits on the bar's right end */
[data-page="members"] .member__reveal svg { width: 16px; height: 16px; }
[data-page="members"] .member__name { margin-top: 12px; font-size: 1.1rem; }
[data-page="members"] .member__role { font-size: .95rem; }
[data-page="members"] .member__major { font-size: .88rem; }
.empty-state { grid-column: 1 / -1; padding: 48px 0; color: var(--muted); }

/* ---------- Recruitment ---------- */
.recruit-hero { padding: calc(clamp(72px, 10vw, 128px) + var(--over, 0px)) 0 clamp(72px, 10vw, 128px); color: var(--text); }
.recruit-hero h1 { max-width: 14ch; }
.recruit-hero .lede, .recruit-hero .interest-note { color: var(--text); }
.recruit-hero .btn--navy { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.recruit-hero .btn--navy:hover { background: var(--gold-light); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0 0; padding: 0; border-top: 1px solid var(--gold-line); }
.wrap:has(> .steps) { counter-reset: step; }   /* one count across both groups: 1 to 7 */
.steps li { padding: 24px 24px 24px 0; counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: 12px; font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--accent-text); }
.step__date { display: block; margin-bottom: 6px; font-weight: 700; color: var(--accent-text); }
.steps p { color: var(--muted); font-size: .97rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps h4 { margin: 0 0 .4em; font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.steps .step__meta { margin: 0 0 10px; color: var(--text-soft); font-size: .95rem; }
.step__meta span { display: block; }
.fixture-group { margin: 56px 0 0; }
.fixture-note { margin: 6px 0 0; color: var(--muted); }
.fixture-group + .steps, .fixture-note + .steps { margin-top: 20px; }
/* Recruitment event cards: a navy image area (the ΑΚΨ mark until a photo is added in event-photos.js), then the name
   and detail rows with small gold icons. Open events show date and time, location, and attire; invite-only, attire. */
.event-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 20px 0 0; padding: 0; }
.event-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); background: var(--warm-bg); box-shadow: 0 0 0 1px var(--light-line); }
.event-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grain), var(--light-text); }
.event-card__mark { font-family: var(--greek); font-size: clamp(2.2rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: .04em; color: var(--gold); }
.event-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card__body { padding: 18px 20px 20px; }
.event-card h4 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--text); }
.event-card__details { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .95rem; color: var(--text); }
.event-card__details li { display: flex; align-items: flex-start; gap: 10px; }
.event-card__details svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.event-card__time { white-space: nowrap; }   /* a time range never breaks at its hyphen */
.interest-cta { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--gold-line); }
.interest-cta .btn-row { margin-top: 0; }
.interest-note { margin: 16px 0 0; font-size: .95rem; color: var(--text-soft); }
.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; font-size: 1.15rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--accent-text); }
.faq details[open] summary::after { content: "\2212"; }
/* "Still have questions?" card (site.js CONFIG.contact), its own section at the end of <main> on every public page
   except Sign in. The navy card floats on a cream band (cream background only: the band keeps the navy text tokens,
   so the card's text stays light), which also separates it from the navy footer. The two VPs of Membership sit on the
   right (under the text on phones). Headshots are the 4:5 member photos cropped to circles. */
.contact-band { padding: clamp(56px, 7vw, 88px) 0; background: var(--light-bg); }
.section--light + .contact-band { padding-top: 0; }   /* after a cream section: one continuous cream area, no double gap */
.contact-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--grain), var(--bg); box-shadow: 0 0 0 1px var(--gold-line); }
.contact-card h2 { margin: 0 0 .4em; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.contact-card p { margin: 0; max-width: 46ch; color: var(--muted); }
.contact-card .btn-row { margin-top: 22px; }
.contact-card__people { display: flex; gap: clamp(20px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.contact-card__people li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.contact-card__photo { width: 96px; height: 96px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--well); box-shadow: 0 0 0 2px var(--gold); }
.contact-card__people .contact-card__photo--empty { display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: var(--muted); }
.contact-card__people span { font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .contact-card { grid-template-columns: minmax(0, 1fr); } }
.faq details p { margin: 12px 0 0; color: var(--muted); }

/* ---------- Sign in: borderless form on a soft glow ---------- */
.signin-page { display: grid; place-items: center; min-height: calc(100vh - var(--header-h) + var(--over, 0px)); padding: calc(64px + var(--over, 0px)) 20px 64px; }
.signin-page .form-note { color: var(--text); }
.signin-page .form-note.is-shown { color: var(--gold-light); }
.signin-card { width: min(440px, 100%); padding: clamp(32px, 5vw, 56px) 0; }
.signin-card .brand__letters { font-size: 2.6rem; }
.field { display: block; margin-bottom: 18px; }
.field span { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 600; }
.field input { width: 100%; padding: .8em 1em; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.field input::placeholder { color: var(--muted); }
.field input:focus-visible { border-color: var(--gold); }
.signin-card .btn { width: 100%; justify-content: center; }
/* "Sign in with Google": light button with Google's standard mark, per Google's sign-in branding */
.btn--google { gap: 12px; background: #fff; color: #1F1F1F; border-color: #747775; }
.btn--google:hover { background: #F2F2F2; }
.btn--google svg { flex: none; width: 20px; height: 20px; }
.signin-card .btn[disabled] { opacity: .6; cursor: not-allowed; }
.signin-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 !important; font-size: .9rem; color: var(--text); }   /* full text color: muted gray failed contrast over the photo */
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-note { margin: 16px 0 0; font-size: .92rem; color: var(--muted); }
.form-note.is-shown { color: var(--gold); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 40px; background: var(--bg-deep); color: var(--text); border-top: 1px solid var(--line); }
main:has(> section:last-child:not(.section--light, .section--warm, .contact-band)) + .site-footer { border-top-color: var(--footer-hairline); }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }   /* letters and both marks in one row; marks drop below the letters only if they don't fit */
.footer-brand .footer-letters { margin: 0; }
.footer-line { white-space: nowrap; }   /* chapter name, university, and email: one line each */
.footer-line--name { margin-top: 18px; }
.footer-marks { display: flex; flex: none; align-items: center; gap: 14px; }
.footer-coa { flex: none; width: auto; height: 60px; }
.footer-badge { flex: none; width: auto; height: 48px; }
.footer-letters { font-family: var(--greek); font-size: 3.4rem; line-height: 1; color: var(--gold); }
.footer-grid h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 14px; color: var(--muted); font-weight: 600; }
.footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer .socials { margin-top: 20px; }
.site-footer .socials a { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Motion: everything below is off with prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Page-to-page crossfade (same-site links). The header keeps its place while content fades. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); }
  ::view-transition-old(root) { animation: page-out var(--dur-fast) var(--ease-in) both; }
  ::view-transition-new(root) { animation: page-in var(--dur-base) var(--ease-out) both; }

  /* Page to page: the campus photo header carries over and morphs to the next page's header size. Its text is captured
     on its own: the old text slides up and out (site.js renames it head-text-out as the page leaves), the new text
     plays its intro. The site header keeps its place (above). */
  .hero, .page-head, .recruit-hero, .signin-page { view-transition-name: head-photo; }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) { view-transition-name: head-text; }
  ::view-transition-group(head-photo) { overflow: hidden; animation-duration: 600ms; animation-timing-function: var(--ease-reveal); }
  ::view-transition-old(head-photo), ::view-transition-new(head-photo) { height: 100%; object-fit: cover; animation-duration: 600ms; animation-timing-function: var(--ease-reveal); }
  ::view-transition-old(head-text-out) { animation: head-text-out 260ms var(--ease-in) both; }
  ::view-transition-new(head-text) { animation: none; }

  /* Header intro on arrival, every public page. Photo zooms 1.08 to 1 while the overlay settles from slightly darker.
     Text rises in: headline word by word (site.js splits it and sets the timing so it's fully in by about 1s), then
     the subtitle and buttons. Without site.js the headline comes in as one line. Arriving through a page transition,
     the photo is already carried over, so only the text plays (.vt-arrival). */
  .hero__photo, .page-head::after, .recruit-hero::after, .signin-page::after { animation: intro-zoom var(--dur-intro) var(--ease-reveal) both; }
  .hero__overlay, .page-head::before, .recruit-hero::before, .signin-page::before { animation: intro-settle var(--dur-intro) var(--ease-reveal) both; }
  .vt-arrival :is(.hero__photo, .hero__overlay), .vt-arrival :is(.page-head, .recruit-hero, .signin-page)::after, .vt-arrival :is(.page-head, .recruit-hero, .signin-page)::before { animation: none; }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > *, h1.is-split .intro-word {
    --intro-y: 16px;
    animation: intro-fade var(--dur-intro-fade) var(--ease-out) var(--intro-d, 600ms) both, intro-rise var(--dur-intro-rise) var(--ease-reveal) var(--intro-d, 600ms) both;
  }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > h1 { --intro-y: 24px; --intro-d: 200ms; }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > :has(~ h1) { --intro-d: 80ms; }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > h1 ~ * ~ * { --intro-d: 700ms; }
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > h1 ~ * ~ * ~ * { --intro-d: 800ms; }
  .signin-card > .brand__letters { display: inline-block; }   /* so it can rise (translate doesn't move inline text) */
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) > h1.is-split { animation: none; }   /* its words animate instead */
  h1.is-split .intro-word { display: inline-block; --intro-y: 24px; }

  /* Home hero letters. On arrival: Α, Κ, Ψ rise and fade in 120ms apart, then the gold line draws out from the center,
     then "Beta Pi Chapter" fades in (all done by about 2s; a little later when arriving through a page transition).
     Then a soft shine sweeps across the letters, once every 8 seconds. site.js adds the scroll parallax and fade
     (--hero-shift, --hero-fade) and the mouse tilt. These replace the general header intro for the hero's three pieces. */
  .hero__content { --hero-start: 150ms; translate: 0 var(--hero-shift, 0px); opacity: var(--hero-fade, 1); }
  .vt-arrival .hero__content { --hero-start: 300ms; }
  .hero .hero__content > .hero__letters, .hero .hero__content > .hero__rule, .hero .hero__content > .hero__chapter, .hero .hero__content > .hero__school { animation: none; }
  .hero__letters { transform-origin: 50% 60%; will-change: transform; }
  .hero__glyph { animation: glyph-in 800ms var(--ease-reveal) calc(var(--hero-start) + var(--i) * 120ms) both; }
  .hero .hero__content > .hero__rule { animation: rule-in 600ms var(--ease-reveal) calc(var(--hero-start) + 620ms) both; }
  .hero .hero__content > .hero__chapter { animation: intro-fade 700ms var(--ease-out) calc(var(--hero-start) + 1000ms) both; }
  .hero .hero__content > .hero__school { animation: intro-fade 700ms var(--ease-out) calc(var(--hero-start) + 1150ms) both; }
  .hero__letters::before { animation: intro-fade 800ms var(--ease-out) var(--hero-start) both; }   /* the scrim arrives with the letters */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* The shine: a pale band over the still sheen, clipped to the letters, parked off the left edge between sweeps.
       Each letter's sweep starts a beat after the one before, so it reads as one pass across Α, Κ, Ψ. */
    .hero__glyph {
      background:
        linear-gradient(105deg, rgba(255, 244, 214, 0) 42%, #FFF4D6 50%, rgba(255, 244, 214, 0) 58%) 100% 0 / 300% 100% no-repeat,
        linear-gradient(180deg, var(--gold-sheen) 0%, var(--gold-light) 45%, var(--gold) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: glyph-in 800ms var(--ease-reveal) calc(var(--hero-start) + var(--i) * 120ms) both,
                 hero-shine 8s linear calc(var(--hero-start) + 2000ms + var(--i) * 110ms) infinite;
    }
  }

  /* Scroll reveals, played once (site.js adds .reveal). The fade is shorter than the movement, so text is readable
     almost as soon as it starts; the movement keeps going a little longer so it reads as motion, not a blink. */
  .reveal { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--dur-reveal-fade) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms); }
  .reveal--left { transform: translateX(calc(-1 * var(--reveal-shift))); }
  .reveal--right { transform: translateX(var(--reveal-shift)); }
  .reveal--rise { transform: translateY(var(--reveal-rise)); }
  .reveal.is-in { opacity: 1; transform: none; }
  /* About: the Beta Pi photo slides in from the right once 40% of it is on screen (site.js adds .slide-photo) */
  .slide-photo { opacity: 0; transform: translateX(60px); transition: opacity var(--dur-reveal-fade) var(--ease-out), transform var(--dur-reveal) var(--ease-reveal); }
  .slide-photo.is-in { opacity: 1; transform: none; }
  /* Philanthropy photos fade and rise in as they scroll into view (phil-photos.js adds .phil-reveal) */
  .phil-reveal { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--dur-reveal) var(--ease-out) var(--phil-delay, 0ms), transform var(--dur-reveal) var(--ease-reveal) var(--phil-delay, 0ms); }
  .phil-reveal.is-in { opacity: 1; transform: none; }

  /* The header's see-through state eases in and out */
  .site-header { transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out); }
  .site-header::before { transition: opacity 300ms var(--ease-out); }
}


/* Footer social icons lift a little on hover (mouse and trackpad) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-footer .socials a { transition: background-color var(--dur-hover), color var(--dur-hover), transform 200ms var(--ease-out); }
  .site-footer .socials a:hover { transform: translateY(-4px); }
}

/* Mouse or trackpad only: the overlay lift on the hero and page headers
   (site.js moves the circle; at rest the mask is fully opaque, so the overlay looks unchanged) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero__overlay, .page-head::before, .recruit-hero::before, .signin-page::before {
    --lift-mask: radial-gradient(circle var(--lift-r, 0px) at var(--lift-x, 50%) var(--lift-y, 50%), rgba(0, 0, 0, var(--lift-a0, 1)) 0%, rgba(0, 0, 0, var(--lift-a1, 1)) 45%, #000 100%);
    -webkit-mask-image: var(--lift-mask);
    mask-image: var(--lift-mask);
  }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes intro-zoom { from { scale: 1.08; } }
@keyframes glyph-in { from { opacity: 0; translate: 0 .16em; } }
@keyframes rule-in { from { transform: scaleX(0); } }   /* scales from the middle out */
@keyframes hero-shine { 0% { background-position: 100% 0; } 14%, 100% { background-position: 0% 0; } }   /* about 1.1s sweep, then rest */
@keyframes intro-settle { from { --intro-dim: .3; } to { --intro-dim: 0; } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-rise { from { translate: 0 var(--intro-y, 16px); } }
@keyframes head-text-out { to { opacity: 0; transform: translateY(-24px); } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Reduced motion: no page transition, no zoom, no word by word; the photo header text just fades in quickly.
   An opacity fade only (no movement), so it's exempt from the rule above. */
@media (prefers-reduced-motion: reduce) {
  :is(.hero__content, .page-head > .wrap, .recruit-hero > .wrap, .signin-card) { animation: intro-fade 300ms var(--ease-out) both !important; }
}
/* Philo Week flyer (philanthropy.html), shown whole up to its own width */
.philo-week__flyer { display: block; width: 100%; max-width: 760px; height: auto; margin-top: 24px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--light-line), 0 10px 30px -18px rgba(27, 43, 75, .35); }

/* ---------- Corporate sponsorship (corporate-sponsorship.html, 2026-10-19, from the 2026-27 sponsorship packet) ----------
   One stats row under the header, then every section the same two columns (.spons-row): the label, heading, and a
   short intro on the left (sticky beside long content), the content on the right. Stacks under 900px. */
/* Why partner: text left, the chapter group photo right */
.spons-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.spons-intro__lede { max-width: 56ch; color: var(--muted); }
.spons-intro__photo { margin: 0; }
.spons-intro__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line); }
/* By the numbers: a navy band, the five stats large in a row with a gold rule over each, three photos underneath */
.spons-numbers .eyebrow { color: var(--gold); }
.spons-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.spons-stats li { padding-top: 16px; border-top: 2px solid var(--gold); }
.spons-stats strong { display: block; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.spons-stats span { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.35; color: var(--muted); }
.spons-note { margin: 20px 0 0; font-size: .85rem; color: var(--muted); }
.spons-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
.spons-photos img { display: block; width: 100%; height: clamp(170px, 28vw, 380px); object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-md); }
.spons-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.spons-row__head { position: sticky; top: 110px; }
.spons-row__head h2 { margin-bottom: 14px; }
.spons-row__head p:not(.eyebrow) { margin: 0; color: var(--muted); }
.spons-row__head .btn-row { margin-top: 24px; }
/* Tier table polish (2026-10-19): a medal-colored bar over each tier name, prices in tabular figures (no spaced
   commas), hover on rows, and the Gold column tinted */
.spons-table thead th i { display: block; width: 28px; height: 4px; margin: 0 auto 10px; border-radius: 2px; }
.t-bronze i { background: #B87333; }
.t-silver i { background: #A7ADB7; }
.t-gold i { background: var(--gold); }
.spons-table thead th span { letter-spacing: -.01em; font-variant-numeric: normal; }
.spons-table tbody tr:hover th, .spons-table tbody tr:hover td { background-color: rgba(27, 43, 75, .035); }
.spons-table tbody tr:hover td:last-child { background-color: rgba(238, 188, 64, .24); }
.spons-table th[scope="row"] { font-weight: 600; }
/* Packet buttons: gold Download (the site's main action color) and solid navy Open, with a soft shadow to lift them
   off the pale gold section */
.spons-btn { padding: 1.05em 2em; font-size: 1.08rem; box-shadow: 0 6px 18px rgba(27, 43, 75, .14); }
.spons-btn.btn--gold:hover { background: var(--gold-light); }
.spons-row__head p.spons-questions { margin-top: 20px !important; color: var(--text); }
.spons-reasons { display: grid; margin: 28px 0 0; }
.spons-reasons > div { padding: 22px 0; border-top: 1px solid var(--line); }
.spons-reasons > div:first-child { padding-top: 0; border-top: 0; }
.spons-reasons > div:last-child { padding-bottom: 0; }
.spons-reasons h3 { margin-bottom: 6px; }
.spons-reasons p { margin: 0; max-width: 56ch; color: var(--muted); }
.spons-table-wrap { overflow-x: auto; }
.spons-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.spons-table th, .spons-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.spons-table th[scope="row"], .spons-table thead th:first-child { padding-left: 0; text-align: left; font-weight: 600; }
.spons-table thead th { padding-top: 0; vertical-align: bottom; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); border-bottom: 2px solid var(--light-text); }
.spons-table thead th:first-child { color: var(--muted); }
.spons-table thead th span { display: block; margin-top: 4px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; text-transform: none; color: var(--light-text); font-variant-numeric: tabular-nums; }
.spons-table .is-gold { padding-top: 14px; border-radius: 12px 12px 0 0; }
.spons-table .is-gold, .spons-table td:last-child { background: rgba(238, 188, 64, .16); }
.spons-table td svg { width: 24px; height: 24px; color: var(--light-text); vertical-align: middle; }
.spons-none { display: inline-block; width: 14px; height: 2px; background: var(--line); vertical-align: middle; }
.spons-packet__view { overflow: hidden; border-radius: var(--radius-md); background: var(--well); box-shadow: 0 0 0 1px var(--line); }
.spons-packet__view iframe { display: block; width: 100%; height: min(78vh, 820px); border: 0; }
@media (max-width: 1100px) { .spons-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 900px) {
  .spons-row, .spons-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .spons-row__head { position: static; }
}
@media (max-width: 759px) { .spons-packet__view { display: none; } }
@media (max-width: 600px) {
  .spons-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .spons-table { font-size: .9rem; }
  .spons-table th, .spons-table td { padding: 12px 6px; }
  .spons-table thead th { font-size: .68rem; letter-spacing: .08em; }
  .spons-table thead th span { font-size: 1.15rem; }
  .spons-table td svg { width: 20px; height: 20px; }
}
/* How We Give Back (2026-10-20): the two photos sit side by side beside the text on wide screens (no empty right side) */
.phil-split > .phil-photos--pair { flex-direction: row; }
.phil-split > .phil-photos--pair img { flex: var(--r, 1) 1 0; }
@container (max-width: 599px) { .phil-split > .phil-photos--pair { flex-direction: column; } .phil-split > .phil-photos--pair img { flex: none; } }
/* Sponsorship tiers table animation (site.js, 2026-10-20) */
@media (prefers-reduced-motion: no-preference) {
  .spons-table.is-anim thead th { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease-out) var(--d, 0ms), transform .6s var(--ease-reveal) var(--d, 0ms); }
  .spons-table.is-anim tbody tr { opacity: 0; transform: translateX(-24px); transition: opacity .5s var(--ease-out) var(--d, 0ms), transform .6s var(--ease-reveal) var(--d, 0ms); }
  .spons-table.is-anim td svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--ease-out) var(--d2, 0ms); }
  .spons-table.is-anim td .spons-none { transform: scaleX(0); transition: transform .4s var(--ease-out) var(--d2, 0ms); }
  .spons-table.is-anim.is-in thead th, .spons-table.is-anim.is-in tbody tr { opacity: 1; transform: none; }
  .spons-table.is-anim.is-in td svg path { stroke-dashoffset: 0; }
  .spons-table.is-anim.is-in td .spons-none { transform: none; }
}
/* Tier prices: normal digit spacing so commas don't spread ($1,000 not $1 , 000) */
.spons-table th span { font-variant-numeric: normal; }
/* Our Commitment to Service (2026-10-20): on wide screens the photo grid sits beside the text (big photo on top,
   four below in a 2 x 2), filling the space that was empty to the right of the paragraphs */
:has(> .phil-service) { container-type: inline-size; }
@container (min-width: 1000px) {
  .phil-service { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); align-items: center; }
  .phil-service .phil-text p { max-width: none; }
  .phil-service .phil-grid { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 11vw, 170px); }
  .phil-service .phil-grid__item--big { grid-column: span 2; grid-row: span 2; }
}
/* Our Commitment to Service: side by side from 720px of section width (was 1000px, which most laptop windows missed) */
@container (min-width: 720px) {
  .phil-service { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
  .phil-service .phil-text p { max-width: none; }
  .phil-service .phil-grid { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(100px, 11vw, 170px); }
  .phil-service .phil-grid__item--big { grid-column: span 2; grid-row: span 2; }
}
/* Tiers table: no scroll box (2026-10-20). The rows rise in instead of sliding sideways, so nothing pokes out
   during the animation, and the table always fits its width. */
.spons-table-wrap { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .spons-table.is-anim tbody tr { transform: translateY(14px); }
}
/* Prices: normal digit spacing ($1,000, not $1 , 000) */
.spons-table thead th span { font-variant-numeric: normal; }
/* Public Newsletter page (2026-10-20): one card with the issue's cover, like the brothers site's Newsletters page */
.nlx-card { display: grid; grid-template-columns: clamp(140px, 22vw, 220px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; max-width: 820px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.nlx-card__cover { position: relative; display: block; aspect-ratio: 595 / 842; border-radius: 8px; overflow: hidden; background: #F3EEE3; box-shadow: 0 8px 22px rgba(27, 43, 75, .2); transform: rotate(-2deg); transition: transform .25s; }
.nlx-card:hover .nlx-card__cover { transform: rotate(0) scale(1.03); }
.nlx-card__cover canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.nlx-card__cover.is-drawn canvas { opacity: 1; }
.nlx-card__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-weight: 700; color: var(--muted); }
.nlx-card__cover.is-drawn .nlx-card__ph { display: none; }
.nlx-card__label { margin: 0 0 6px; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.nlx-card__title { margin: 0 0 10px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.nlx-card__sum { margin: 0 0 12px; color: var(--muted); }
.nlx-card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 8px; }
.nlx-card__read { font-size: 1.15rem; font-weight: 700; color: var(--gold-deep); text-decoration: none; }
.nlx-card__read:hover { text-decoration: underline; }
.nlx-card__dl { font-weight: 600; color: var(--muted); }
@media (max-width: 560px) { .nlx-card { grid-template-columns: 110px 1fr; gap: 16px; } }
/* Tier table checks (2026-10-20): each check sits in a filled circle (navy, gold in the Gold column), "not included"
   is a small hollow ring, and the header rule runs straight across the Gold column */
.spons-table td svg { box-sizing: border-box; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--light-text); color: #fff; box-shadow: 0 4px 10px rgba(27, 43, 75, .18); transition: transform .2s var(--ease-out); }
.spons-table td:last-child svg { background: var(--gold); color: var(--light-text); box-shadow: 0 4px 12px rgba(201, 151, 42, .35); }
.spons-table td svg path { stroke-width: 3; }
.spons-table tbody tr:hover td svg { transform: scale(1.08); }
.spons-none { width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 50%; background: none; }
.spons-table thead th { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--light-text); }
@media (max-width: 600px) { .spons-table td svg { width: 26px; height: 26px; padding: 5px; } }
@media (prefers-reduced-motion: no-preference) {
  .spons-table.is-anim td svg { transform: scale(.3); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) var(--d2, 0ms), opacity .25s var(--ease-out) var(--d2, 0ms); }
  .spons-table.is-anim.is-in td svg { transform: none; opacity: 1; }
  .spons-table.is-anim.is-in tbody tr:hover td svg { transform: scale(1.08); }
}