/* ============================================================
   2026 Academic Scholarship Awards — The Evelyn Dunlap Foundation
   "Under the Stars, for Evelyn" — a cosmos of gold that forms a
   butterfly. Three beats: Hero · Tribute · The Particulars.
   ============================================================ */

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

:root {
  --bg: #060d20;
  --navy: #0a1430;
  --gold: #d4af37;
  --gold-bright: #f5d97c;
  --gold-glow: #ffe49b;
  --gold-deep: #8b6914;
  --cream: #ece0c0;
  --cream-dim: rgba(236, 224, 192, 0.74);
  --ink: #0b1020;
  /* channel tokens — UI chrome (borders, control fills) derives alphas from these */
  --gold-rgb: 212, 175, 55;
  --bright-rgb: 245, 217, 124;
  --bg-rgb: 6, 13, 32;
  --cream-rgb: 236, 224, 192;
  --navy-rgb: 10, 20, 48;
  --foil: linear-gradient(135deg, #8b6914 0%, #c89a3c 18%, #f5d97c 38%, #fff4cf 50%, #f5d97c 62%, #c89a3c 82%, #8b6914 100%);
  /* satin foil — button-scale gold: vertical sheen over a soft metal ramp (no hot diagonal band) */
  --foil-satin:
    linear-gradient(180deg, rgba(255, 252, 240, 0.30) 0%, rgba(255, 252, 240, 0.10) 30%,
      rgba(139, 105, 20, 0.10) 55%, rgba(255, 252, 240, 0.05) 78%, rgba(139, 105, 20, 0.16) 100%),
    linear-gradient(135deg, #8b6914 0%, #c89a3c 22%, #ecd28a 50%, #c89a3c 78%, #8b6914 100%);

  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --script: "Italianno", "Snell Roundhand", "Apple Chancery", cursive;
  --label: "Cinzel", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;

  /* tracking scale — every gold uppercase micro-label sits on one of these five stops */
  --track-1: 0.5em;
  --track-2: 0.42em;
  --track-3: 0.3em;
  --track-4: 0.22em;
  --track-5: 0.16em;

  /* radius vocabulary */
  --r-field: 6px;
  --r-btn: 10px;
  --r-tile: 10px;
  --r-panel: 18px;
  --r-card: 30px;
  --r-pill: 999px;

  /* hairline width ladder */
  --rule-minor: 40px;
  --rule-major: 64px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.4rem, 5vw, 5rem);
}

html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body.loading { overflow: hidden; }
@media (hover: none), (pointer: coarse) { body { overscroll-behavior-y: auto; } }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(212, 175, 55, 0.32); color: var(--gold-glow); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0);
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Cosmos ---------- */
#cosmos {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100lvh;
  display: block; pointer-events: none;
  transform: translateZ(0);
  opacity: 0; transition: opacity 1.2s ease;
}
body.cosmos-on #cosmos { opacity: 1; }

.cosmos-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* transparent base (no opaque fill) so iOS 26 Safari samples the html/body navy
     for its chrome instead of this edge-touching layer — keeps the bars seamless */
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 22%, rgba(20, 38, 74, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 82% 82%, rgba(25, 11, 34, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 14% 72%, rgba(40, 22, 20, 0.4) 0%, transparent 60%);
}
.cosmos-fallback::before, .cosmos-fallback::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(245, 217, 124, 0.8), transparent 60%),
    radial-gradient(1px 1px at 78% 42%, rgba(245, 217, 124, 0.6), transparent 60%),
    radial-gradient(1px 1px at 42% 78%, rgba(245, 217, 124, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 8%, rgba(245, 217, 124, 0.7), transparent 60%),
    radial-gradient(1px 1px at 22% 58%, rgba(245, 217, 124, 0.45), transparent 60%),
    radial-gradient(1px 1px at 65% 28%, rgba(245, 217, 124, 0.55), transparent 60%),
    radial-gradient(1px 1px at 52% 88%, rgba(245, 217, 124, 0.6), transparent 60%);
  background-repeat: no-repeat;
  animation: twinkle 7s ease-in-out infinite alternate;
}
.cosmos-fallback::after { background-position: 30% 60%; animation-duration: 9s; animation-delay: -3s; opacity: 0.7; }
body.cosmos-on .cosmos-fallback { opacity: 0.34; }
@keyframes twinkle { 0% { opacity: 0.45; } 100% { opacity: 1; } }

.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 82% 58% at 50% 46%, transparent 0%, rgba(6, 13, 32, 0.16) 58%, rgba(6, 13, 32, 0.74) 100%),
    linear-gradient(180deg, rgba(6, 13, 32, 0.4) 0%, transparent 24%, transparent 70%, rgba(6, 13, 32, 0.5) 100%);
  opacity: calc(0.72 - var(--sunset, 0) * 0.32);
}

/* Atmospheric background video — dimmed, blurred, slowly faded in */
.bg-video {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100lvh;
  object-fit: cover; object-position: 50% 0%; pointer-events: none;
  opacity: 0; transition: opacity 2.2s ease;
  filter: saturate(0.82) brightness(0.78) blur(2px);
  transform: translateZ(0) scale(1);
  transform-origin: 50% 0%;
}
.bg-scrim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
  background:
    linear-gradient(180deg, rgba(6, 13, 32, 0.74) 0%, rgba(6, 13, 32, 0.56) 42%, rgba(6, 13, 32, 0.82) 100%),
    radial-gradient(ellipse 85% 65% at 50% 42%, rgba(6, 13, 32, 0.16) 0%, rgba(6, 13, 32, 0.66) 100%);
}
body.bg-video-on .bg-video { opacity: 1; }
body.bg-video-on .bg-scrim { opacity: 1; }
/* when video is the base, remove the CSS starfield entirely — opacity:0 would keep
   two full-viewport twinkle animations ticking on retained layers */
body.bg-video-on .cosmos-fallback { display: none; }

/* HDR sunset the butterfly morphs into at the finale (driven by --sunset 0..1) */
.sunset {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--sunset, 0);
  background-image:
    /* 1 — discrete hot sun glow, low-center, behind the card */
    radial-gradient(38% 26% at 50% 88%, rgba(255, 244, 214, 0.55) 0%, rgba(255, 196, 128, 0.30) 34%, transparent 72%),
    /* 2 — static upward god-ray fan (so the reduced-motion fallback matches the animated scene) */
    conic-gradient(from 180deg at 50% 100%,
      transparent 0deg, rgba(255, 210, 150, 0.10) 12deg, transparent 24deg,
      rgba(255, 210, 150, 0.07) 38deg, transparent 52deg,
      rgba(255, 210, 150, 0.10) 70deg, transparent 84deg,
      rgba(255, 210, 150, 0.07) 104deg, transparent 118deg,
      rgba(255, 210, 150, 0.10) 145deg, transparent 160deg,
      rgba(255, 210, 150, 0.07) 180deg, transparent 200deg),
    /* 3 — molten horizon wash */
    radial-gradient(150% 70% at 50% 108%, rgba(244, 176, 98, 0.64) 0%, rgba(176, 100, 44, 0.4) 24%, rgba(120, 66, 34, 0.14) 50%, transparent 70%),
    /* 4 — vertical sky ramp (extra stops kill banding; softened bottom so it isn't a heavy amber slab) */
    linear-gradient(180deg, #04060f 0%, #060a16 26%, #0e0c1c 46%, #211625 58%, #38231a 68%, #573620 80%, #7a4f22 90%, #a07333 97%, #b9863c 100%);
  background-blend-mode: screen, screen, screen, normal;
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg);
  transition: opacity 0.9s ease, visibility 0.9s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
/* no JS = no dismissLoader — never strand guests behind the curtain, and never lock scroll */
html:not(.js) .loader { display: none; }
html:not(.js) body.loading { overflow-y: auto; }
.loader__crest {
  font-family: var(--label); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: var(--track-1); text-indent: var(--track-1);
  color: transparent; background: var(--foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}
.loader__bar { width: 140px; height: 1px; background: rgba(212, 175, 55, 0.16); overflow: hidden; position: relative; }
.loader__bar::after {
  content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, var(--gold-bright), transparent);
  animation: barSweep 1.6s ease-in-out infinite;
}
.loader__caption {
  font-family: var(--label); font-size: 0.58rem; letter-spacing: var(--track-1); text-indent: var(--track-1);
  text-transform: uppercase; color: var(--gold-deep);
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes barSweep { to { left: 100%; } }

/* ---------- Layout ---------- */
main { position: relative; z-index: 2; }
section {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.eyebrow {
  font-family: var(--label); font-weight: 500;
  font-size: clamp(0.6rem, 0.85vw, 0.72rem);
  letter-spacing: var(--track-1); text-indent: var(--track-1); text-transform: uppercase;
  color: var(--gold); opacity: 0.92;
}

/* ---------- Reveal primitives ---------- */
html.js .reveal-fade {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.js .reveal-fade.is-in { opacity: 1; transform: none; }
html.js .reveal-fade[data-delay="1"] { --d: 120; }
html.js .reveal-fade[data-delay="2"] { --d: 260; }
html.js .reveal-fade[data-delay="3"] { --d: 400; }
html.js .reveal-fade[data-delay="4"] { --d: 560; }

html.js .reveal-rise { overflow: hidden; display: block; }
html.js .reveal-rise > span {
  display: block; transform: translate3d(0, 110%, 0); opacity: 0;
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.js .reveal-rise.is-in > span,
html.js .is-in .reveal-rise > span { transform: none; opacity: 1; }
html.js .hero__title .reveal-rise:nth-child(2) > span { transition-delay: 0.1s; }
html.js .reveal-rise[data-delay="1"] { --d: 120; }
html.js .reveal-rise[data-delay="2"] { --d: 260; }
html.js .reveal-rise[data-delay="3"] { --d: 400; }
html.js .reveal-rise[data-delay="4"] { --d: 560; }

/* Eyebrows settle into place: tracking breathes in from wide, no vertical motion */
html.js .eyebrow.reveal-fade {
  transform: none; letter-spacing: 0.58em;
  transition: opacity 0.95s var(--ease), letter-spacing 1.3s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.js .eyebrow.reveal-fade.is-in { letter-spacing: var(--track-1); }

/* Ornaments draw outward; the diamond arrives last */
html.js .ornament.reveal-fade { transform: scaleX(0.4); }
html.js .ornament.reveal-fade.is-in { transform: scaleX(1); }
html.js .ornament.reveal-fade::before { opacity: 0; transition: opacity 0.5s ease calc(var(--d, 0) * 1ms + 550ms); }
html.js .ornament.reveal-fade.is-in::before { opacity: 1; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero__inner { width: 100%; max-width: 70rem; }
.hero .eyebrow { display: block; margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.hero__title {
  font-family: var(--display); font-weight: 600; line-height: 1.0; letter-spacing: 0.05em;
  color: transparent; background: var(--foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 14s ease-in-out 0.4s infinite;
  filter: drop-shadow(0 0 26px rgba(6, 13, 32, 0.7));
}
/* the foil shimmer waits in the wings until the curtain lifts (no-JS keeps it unconditional) */
html.js body:not(.overture) .hero__title { animation-play-state: paused; }
.hero__title span span { font-size: clamp(3.2rem, 12vw, 9.2rem); display: block; }
.hero__title--formal {
  max-width: 66rem; margin-inline: auto;
  line-height: 1.04; letter-spacing: 0.045em;
}
.hero__title--formal span span {
  font-size: 5.75rem;
}
.hero__year {
  margin-top: 0.4rem;
  font-family: var(--label); font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.7rem); letter-spacing: var(--track-2); text-indent: var(--track-2);
  color: var(--gold-bright);
}
/* Event identity — the 5-second "what is this?" line. Cream, not foil:
   the title and primary button own the foil; a second foil line dilutes it. */
.hero__identity {
  margin-top: clamp(0.7rem, 1.6vh, 1.1rem);
  font-family: var(--label); font-weight: 500;
  font-size: clamp(0.64rem, 1.05vw, 0.82rem); letter-spacing: var(--track-2); text-indent: var(--track-2);
  text-transform: uppercase; color: var(--cream); opacity: 0.9;
  text-shadow: 0 0 14px rgba(6, 13, 32, 0.9);
}
.hero__identity--formal {
  max-width: 48rem; margin-left: auto; margin-right: auto;
  line-height: 1.55; letter-spacing: 0.24em; text-indent: 0.24em;
}
.ornament {
  display: block; width: 150px; height: 1px; margin: clamp(1.4rem, 3vh, 2.2rem) auto;
  background: linear-gradient(to right, transparent 0%, var(--gold) 18% 42%, transparent 45% 55%, var(--gold) 58% 82%, transparent 100%);
  position: relative; opacity: 0.85;
}
.ornament::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; background: var(--gold-bright);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(245, 217, 124, 0.85);
}
.hero__tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--cream);
  max-width: 54rem; margin-left: auto; margin-right: auto; line-height: 1.42;
  text-shadow: 0 0 18px rgba(6, 13, 32, 0.8);
}
.hero__meta {
  margin-top: clamp(1rem, 2vh, 1.5rem);
  font-family: var(--label); font-size: clamp(0.66rem, 1vw, 0.82rem);
  letter-spacing: var(--track-2); text-indent: var(--track-2); text-transform: uppercase;
  color: var(--cream); opacity: 0.92; text-shadow: 0 0 14px rgba(6, 13, 32, 0.9);
}

/* Overture — armed by body.overture in the same beat the loader lifts, so the
   hero choreography (eyebrow → title lines → year → ornament → tagline → meta)
   plays in view instead of finishing behind the curtain. */
body.overture .hero .eyebrow { --d: 0; }
body.overture .hero .hero__identity { --d: 600; }
body.overture .hero .ornament { --d: 760; }
body.overture .hero .hero__tagline { --d: 920; }
body.overture .hero .hero__meta { --d: 1060; }
body.overture .hero__title .reveal-rise:nth-child(1) > span { transition-delay: 0.12s; }
body.overture .hero__title .reveal-rise:nth-child(2) > span { transition-delay: 0.26s; }

.scroll-hint {
  position: absolute; left: 50%; bottom: max(clamp(1.4rem, 4vh, 2.6rem), calc(env(safe-area-inset-bottom) + 1rem));
  transform: translateX(-50%); z-index: 3;
  font-family: var(--label); font-size: 0.56rem; letter-spacing: var(--track-1); text-indent: var(--track-1);
  text-transform: uppercase; color: var(--gold);
  opacity: 0; animation: fadeIn 1s 1.4s ease both;
  display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.6s ease;
}
/* once the guest is under way, "Begin" bows out for good (visibility clears it
   from the a11y tree after the fade) */
.scroll-hint.is-away {
  animation: none; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s 0.6s;
}
.scroll-hint.is-away .scroll-hint__line { animation: none; }
.scroll-hint__line {
  display: block; width: 1px; height: 42px; margin-top: 10px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  transform-origin: top; animation: linePulse 2.4s ease-in-out infinite;
}
.scroll-hint:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }
@keyframes fadeIn { to { opacity: 0.72; } }
@keyframes linePulse { 0%, 100% { transform: scaleY(0.55); opacity: 0.4; } 50% { transform: scaleY(1.1); opacity: 1; } }

/* ---------- TRIBUTE ---------- */
.tribute { min-height: 120svh; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; }
.tribute::before {
  content: ""; position: absolute; inset: -6vh 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 38% 58% at 50% 50%, rgba(6, 13, 32, 0.92) 0%, rgba(6, 13, 32, 0.78) 38%, rgba(6, 13, 32, 0.32) 62%, transparent 84%);
}
.tribute__inner { max-width: 40rem; }
.tribute .eyebrow { display: block; margin-bottom: clamp(0.8rem, 2vh, 1.4rem); }
.tribute__name {
  font-family: var(--display); font-weight: 600; letter-spacing: 0.08em;
  font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.05; color: var(--gold); text-wrap: balance;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
  /* drop-shadow (not text-shadow) so the glow survives the reveal-rise overflow mask */
  filter: drop-shadow(0 0 22px rgba(6, 13, 32, 0.85)) drop-shadow(0 0 44px rgba(6, 13, 32, 0.5));
}
.tribute__years {
  margin-top: -0.6rem; margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
  font-family: var(--label); font-weight: 500;
  font-size: clamp(0.62rem, 1vw, 0.78rem); letter-spacing: var(--track-2); text-indent: var(--track-2);
  text-transform: uppercase; color: var(--gold); opacity: 0.82;
  text-shadow: 0 0 16px rgba(6, 13, 32, 0.8);
}
.tribute__dedication {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.5; color: var(--cream);
  max-width: 36rem; margin: 0 auto; text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(6, 13, 32, 0.95), 0 0 22px rgba(6, 13, 32, 0.8);
}
.scripture {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin: clamp(1.8rem, 4vh, 2.8rem) 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(6, 13, 32, 0.8);
}
.scripture__cite { font-size: 0.72em; font-style: normal; letter-spacing: 0.06em; color: var(--gold); }
.tribute__invite {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.7; color: var(--cream); opacity: 0.92;
  max-width: 36rem; margin: 0 auto; text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(6, 13, 32, 0.95), 0 0 22px rgba(6, 13, 32, 0.8);
}
.signature { margin-top: clamp(1.8rem, 4vh, 2.6rem); display: flex; flex-direction: column; gap: 0.35rem; }
.signature__name { font-family: var(--script); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9; color: var(--gold-bright); }
.signature__role {
  font-family: var(--label); font-size: 0.58rem; letter-spacing: var(--track-3); text-indent: var(--track-3);
  text-transform: uppercase; color: var(--gold); opacity: 0.85;
}
.hairline {
  display: block; width: var(--rule-major); height: 1px; margin: clamp(2.2rem, 5vh, 3rem) auto 0;
  background: var(--gold); opacity: 0.6; transform: scaleX(0); transform-origin: center;
  transition: transform 1.3s var(--ease) 0.3s;
}
.is-in .hairline { transform: scaleX(1); }

/* ---------- EVELYN'S LEGACY + COMMUNITY IMPACT ----------
   Two editorial spreads between the butterfly and the card. The fixed gold
   cosmos sits behind them, so each carries a soft radial scrim (cloned from
   .tribute::before) and the tribute legibility text-shadow. No boxes, no
   cards — figures and honorees float on the scrim. Foil is reserved for the
   numerals and the tiny roman ordinals; headlines stay calm cream. */
.legacy, .impact, .giving, .experience {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.legacy::before, .impact::before, .giving::before, .experience::before {
  content: ""; position: absolute; inset: -6vh 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 48% 60% at 50% 50%, rgba(6, 13, 32, 0.9) 0%, rgba(6, 13, 32, 0.74) 40%, rgba(6, 13, 32, 0.3) 64%, transparent 86%);
}
/* every beat gets a full frame — no half-empty viewports between plates */
.legacy { min-height: 92svh; }
.impact { min-height: 100svh; }
.giving { min-height: 100svh; }
.experience { min-height: 88svh; }
.legacy__inner { max-width: 50rem; }
.impact__inner { max-width: 44rem; }
.giving__inner { max-width: 58rem; }
.experience__inner { max-width: 54rem; }
.legacy .eyebrow, .impact .eyebrow, .giving .eyebrow, .experience .eyebrow { display: block; margin-bottom: clamp(0.8rem, 2vh, 1.4rem); }

/* Matched-pair section headlines — calm cream so the gold lives in the numbers */
.legacy__title, .impact__title, .giving__title, .experience__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: 0.05em; line-height: 1.1;
  color: var(--cream); text-wrap: balance;
  /* drop-shadow (not text-shadow) so the glow survives the reveal-rise overflow mask */
  filter: drop-shadow(0 0 22px rgba(6, 13, 32, 0.85)) drop-shadow(0 0 44px rgba(6, 13, 32, 0.5));
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.legacy__lead, .impact__lead, .impact__close, .giving__lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; color: var(--cream);
  max-width: 34rem; margin: 0 auto; text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(6, 13, 32, 0.95), 0 0 22px rgba(6, 13, 32, 0.8);
}
.giving__lead { max-width: 40rem; }
@media (min-width: 641px) {
  .legacy__lead, .impact__lead, .impact__close, .giving__lead { text-wrap: balance; }
}

/* Legacy figures — an engraved colophon plate: framed by fading hairlines,
   columns divided by faded rules, foil numerals as the engraving */
.legacy__figures {
  margin: clamp(2.4rem, 5vh, 3.6rem) auto 0; max-width: 46rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: end;
  padding: clamp(1.4rem, 3vh, 2rem) 0;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.35) 22% 78%, transparent) 1;
}
.figure:not(:first-child)::before {
  content: ""; position: absolute;
  left: calc(clamp(1.6rem, 3.5vw, 3.2rem) / -2); top: 14%; bottom: 14%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.28) 30% 70%, transparent);
}
/* column-reverse: <dt> precedes <dd> in source (correct list semantics) while the
   foil numeral still renders ABOVE its label. gap replaces the label's old margin-top. */
.figure { margin: 0; display: flex; flex-direction: column-reverse; gap: 0.7rem; position: relative; }
.figure__value {
  /* align-self shrinks the clip box to the glyphs so "8" and "3" ride the same
     dark→bright→dark foil ramp as "$225K+" (a stretched box samples one flat stop) */
  align-self: center; padding-inline: 0.06em;
  color: transparent; background: var(--foil); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw, 4.2rem); line-height: 1; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 18px rgba(6, 13, 32, 0.7));
}
.figure__label {
  font-family: var(--label); font-size: clamp(0.52rem, 0.8vw, 0.62rem);
  letter-spacing: var(--track-3); text-indent: var(--track-3); text-transform: uppercase; color: var(--cream-dim);
}

/* Scholarship awards and community impact — centered award rolls, dedication-page style */
.impact__lead { margin-bottom: clamp(0.6rem, 1.6vh, 1rem); }
.impact__roll { list-style: none; padding: 0; margin: clamp(1.4rem, 3vh, 2.2rem) 0 0; }
.honoree { text-align: center; margin: clamp(2rem, 4.2vh, 2.9rem) auto; max-width: 34rem; }
.honoree:first-child { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }
.honoree:not(:last-child)::after {
  content: ""; display: block; width: var(--rule-minor); height: 1px; margin: clamp(2rem, 4.2vh, 2.9rem) auto 0;
  background: linear-gradient(to right, transparent, var(--gold) 30% 70%, transparent);
  opacity: 0.3;
}
/* Community Impact medallions — engraved award plaques on the shared diamond motif */
.honoree__emblem {
  display: block; margin: 0 auto 0.8rem;
  width: clamp(40px, 4.5vw, 48px); height: auto; aspect-ratio: 1;
  color: var(--gold); opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(6, 13, 32, 0.6));
}
.honoree__index {
  display: block; margin-bottom: 0.6rem;
  color: transparent; background: var(--foil);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-family: var(--label); font-weight: 600;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem); letter-spacing: var(--track-2); text-indent: var(--track-2); opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(6, 13, 32, 0.6));
}
.honoree__name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: 0.03em; line-height: 1.2;
  color: var(--gold-bright); text-wrap: balance;
  text-shadow: 0 0 22px rgba(6, 13, 32, 0.85);
}
.honoree__desc {
  margin: 0.6rem auto 0; max-width: 30rem;
  font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.55; color: var(--cream); text-wrap: pretty;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(6, 13, 32, 0.95), 0 0 22px rgba(6, 13, 32, 0.8);
}
.impact__close { color: rgba(var(--cream-rgb), 0.84); max-width: 32rem; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.impact .ornament { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.impact--community .impact__inner { max-width: 48rem; }
.impact--community::before {
  background:
    radial-gradient(ellipse 52% 62% at 50% 48%, rgba(25, 11, 34, 0.62) 0%, rgba(6, 13, 32, 0.82) 42%, rgba(6, 13, 32, 0.32) 68%, transparent 88%),
    radial-gradient(ellipse 34% 24% at 50% 64%, rgba(245, 217, 124, 0.12), transparent 76%);
}
.impact--community .impact__lead { max-width: 38rem; }
.impact--community .honoree { max-width: 38rem; }
.impact--community .honoree__name {
  font-size: clamp(1.52rem, 3.2vw, 2.28rem);
}

/* Legacy Giving — a quiet donor roll, built for scanning without breaking the invitation mood */
.giving__tiers {
  margin: clamp(2.2rem, 5vh, 3.2rem) auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1rem); align-items: stretch;
}
.tier {
  position: relative; overflow: hidden; min-height: 13rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  text-align: left; padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(var(--gold-rgb), 0.32); border-radius: var(--r-tile);
  background: linear-gradient(160deg, rgba(255, 248, 232, 0.075), rgba(6, 13, 32, 0.52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 42px rgba(0, 0, 0, 0.18);
}
.tier::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--foil); opacity: 0.85;
}
.tier__amount {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(1.7rem, 3vw, 2.25rem); color: transparent;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tier__name {
  margin-top: 0.2rem;
  font-family: var(--label); font-size: clamp(0.76rem, 1.05vw, 0.9rem); line-height: 1.35;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright);
}
.tier__desc {
  font-size: clamp(0.92rem, 1.12vw, 1.02rem); line-height: 1.48; color: var(--cream-dim); text-wrap: pretty;
}
/* Desktop tiers are live controls, not plaques — a quiet hairline affordance
   that brightens as the card lifts. (Mobile overrides this into a full pill.) */
.tier__select {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-height: 2.4rem; padding: 0.4rem 0.1rem;
  font-family: var(--label); font-weight: 600; font-size: 0.58rem;
  letter-spacing: var(--track-4); text-indent: var(--track-4); text-transform: uppercase;
  color: var(--gold); opacity: 0.85;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  transition: color 0.3s, border-color 0.3s, opacity 0.3s;
}
.tier:hover .tier__select, .tier__select:hover, .tier__select:focus-visible {
  color: var(--gold-bright); border-color: var(--gold-bright); opacity: 1;
}
.tier__select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.tier { transition: transform 0.55s var(--ease), border-color 0.35s ease, box-shadow 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
  .tier:hover, .tier:focus-within {
    transform: translateY(-4px); border-color: rgba(var(--bright-rgb), 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 56px rgba(0, 0, 0, 0.28);
  }
}
.giving__actions {
  margin: clamp(2rem, 4vh, 2.8rem) auto 0;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap;
}
.giving__actions .btn { min-width: 13rem; }
/* the RSVP twin: exact type parity with the foil primary — one gold, one hairline */
.giving__actions .btn--soft {
  min-height: 3.3rem; padding: 1rem 1.8rem; font-size: 0.7rem;
  letter-spacing: var(--track-3); text-indent: var(--track-3);
  border-color: rgba(var(--gold-rgb), 0.55); background: rgba(var(--navy-rgb), 0.45);
}

/* Evening experience — concise enough to scan, ceremonial enough to picture */
.experience::before {
  background:
    radial-gradient(ellipse 54% 62% at 50% 48%, rgba(6, 13, 32, 0.9) 0%, rgba(6, 13, 32, 0.72) 44%, rgba(6, 13, 32, 0.26) 70%, transparent 90%),
    radial-gradient(ellipse 36% 22% at 50% 58%, rgba(245, 217, 124, 0.1), transparent 72%);
}
.experience__intro {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.5;
  color: var(--cream-dim); margin: 0 auto; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(6, 13, 32, 0.95);
}
.experience__list {
  list-style: none; margin: clamp(1.8rem, 4vh, 2.6rem) auto 0;
  padding: clamp(1rem, 2.4vw, 1.35rem) 0;
  max-width: 48rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.34) 20% 80%, transparent) 1;
}
.experience__item {
  position: relative; min-height: 4.45rem;
  display: grid; place-items: center; gap: 0.62rem;
  padding: 0.85rem clamp(0.75rem, 1.8vw, 1.1rem);
  font-family: var(--label); font-weight: 600;
  font-size: clamp(0.72rem, 1.05vw, 0.88rem); line-height: 1.45;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72), 0 0 18px rgba(6, 13, 32, 0.82);
}
.experience__item::before {
  content: ""; display: block; width: 0.34rem; height: 0.34rem;
  background: var(--foil); transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(var(--bright-rgb), 0.28);
}
.experience__item--chef {
  gap: 0.36rem;
}
.experience__item--chef::before {
  content: none;
}
.experience__label {
  display: block;
}
.experience__detail {
  display: block; max-width: 16rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(0.96rem, 1.16vw, 1.12rem); line-height: 1.34;
  letter-spacing: 0; text-transform: none; color: var(--cream-dim);
}
.chef-credit {
  display: flex; align-items: center; justify-content: center; gap: 0.44rem;
  margin-top: 0.12rem; color: var(--gold-bright); white-space: nowrap;
  font-size: 1.08em;
}
.chef-star {
  position: relative; flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  background: var(--foil);
  clip-path: polygon(50% 0%, 58% 31%, 86% 14%, 69% 42%, 100% 50%, 69% 58%, 86% 86%, 58% 69%, 50% 100%, 42% 69%, 14% 86%, 31% 58%, 0% 50%, 31% 42%, 14% 14%, 42% 31%);
  filter: drop-shadow(0 0 7px rgba(var(--bright-rgb), 0.46));
}
.chef-star::after {
  content: ""; position: absolute; inset: 34%; border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.62);
}
@media (min-width: 761px) {
  .experience__item:not(:nth-child(3n + 1)) {
    border-left: 1px solid rgba(var(--gold-rgb), 0.16);
  }
  .experience__item:nth-child(n + 4) {
    border-top: 1px solid rgba(var(--gold-rgb), 0.13);
  }
}
@media (min-width: 561px) and (max-width: 760px) {
  .experience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience__item:nth-child(even) { border-left: 1px solid rgba(var(--gold-rgb), 0.16); }
  .experience__item:nth-child(n + 3) { border-top: 1px solid rgba(var(--gold-rgb), 0.13); }
}

/* ---------- PARTICULARS card ---------- */
.particulars { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; overflow-x: clip; }
.particulars::before {
  content: ""; position: absolute; inset: -5vh 0; z-index: -1; pointer-events: none;
  opacity: calc(1 - var(--sunset, 0) * 0.78);
  background: radial-gradient(ellipse 70% 72% at 50% 50%, rgba(6, 13, 32, 0.72) 0%, rgba(6, 13, 32, 0.5) 36%, rgba(6, 13, 32, 0.18) 66%, transparent 90%);
}
/* Warm sun backglow behind the glass card — rises with the finale (--sunset),
   so the card reads as backlit even under prefers-reduced-motion. */
.particulars::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: 8%; width: min(72rem, 120%); height: 60vh;
  transform: translateX(-50%);
  opacity: calc(var(--sunset, 0) * 0.9);
  background: radial-gradient(50% 50% at 50% 70%, rgba(255, 206, 150, 0.42) 0%, rgba(255, 170, 110, 0.16) 40%, transparent 80%);
  mix-blend-mode: screen;
}
.card {
  position: relative; max-width: 36rem; width: 100%;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--r-card);
  background:
    linear-gradient(160deg, rgba(46, 58, 92, 0.1) 0%, rgba(24, 32, 58, 0.18) 52%, rgba(14, 16, 32, 0.32) 100%);
  border: 1px solid rgba(255, 228, 190, 0.26);
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 8px rgba(255, 180, 130, 0.18),
    inset 0 26px 60px rgba(255, 255, 255, 0.06),
    inset 0 -34px 70px rgba(8, 6, 18, 0.34),
    0 50px 110px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
  transition: transform 0.7s var(--ease), box-shadow 0.4s ease;
  will-change: transform;
  isolation: isolate;
  text-shadow: 0 1px 3px rgba(12, 6, 22, 0.55);
}
.card::before { /* liquid-glass top reflection + corner glint */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 44%),
    radial-gradient(75% 50% at 14% 0%, rgba(255, 246, 220, 0.28), transparent 60%),
    radial-gradient(70% 44% at 92% 100%, rgba(255, 196, 140, 0.14), transparent 60%);
}
.card::after { /* cursor / touch glow */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 198, 0.2) 0%, rgba(255, 238, 198, 0.06) 26%, transparent 58%);
  opacity: var(--glow, 0); transition: opacity 0.45s ease; mix-blend-mode: screen;
}
/* Sunset-reactive rim + backglow as ONE opacity-cheap layer, so the finale never
   re-styles the blurred card itself (border/shadow recalcs against blur(26px) jank). */
.card__warm {
  position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 228, 190, 0.35);
  box-shadow: 0 30px 130px rgba(228, 162, 86, 0.22);
  opacity: var(--sunset, 0);
}
html.js .card.reveal-fade { transform: translate3d(0, 22px, 0); }
html.js .card.reveal-fade.is-in { transform: translateZ(0); }

.label {
  font-family: var(--label); font-weight: 500; font-size: clamp(0.58rem, 0.85vw, 0.7rem);
  letter-spacing: var(--track-1); text-indent: var(--track-1); text-transform: uppercase; color: var(--gold); opacity: 0.9;
}
.card__day {
  margin-top: 1.2rem; font-family: var(--label); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: var(--track-4); text-indent: var(--track-4);
  text-transform: uppercase; color: var(--gold-bright); line-height: 1.3; text-wrap: balance;
}
.card__time-range {
  font-family: var(--label); font-size: clamp(0.66rem, 1vw, 0.78rem);
  letter-spacing: var(--track-1); text-indent: var(--track-1); text-transform: uppercase; color: var(--gold); opacity: 0.9;
}
.card__rule { display: block; width: var(--rule-minor); height: 1px; background: var(--gold); opacity: 0.5; margin: clamp(1.2rem, 2.4vw, 1.7rem) auto; }
.card__venue {
  font-family: var(--label); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: var(--track-5); text-indent: var(--track-5); text-transform: uppercase; color: var(--cream); line-height: 1.3;
}
.card__address { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--cream); opacity: 0.92; margin-top: 0.5rem; line-height: 1.55; }
.card__setting { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(0.98rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--cream-dim); max-width: 24rem; margin: clamp(0.9rem, 2vw, 1.2rem) auto 0; text-wrap: balance; }
.card__closing {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  line-height: 1.58; color: var(--gold-bright); max-width: 27rem;
  margin: clamp(1.25rem, 2.6vw, 1.65rem) auto 0; text-wrap: balance;
}
.card__attire { font-family: var(--serif); font-style: italic; font-size: clamp(0.9rem, 1.1vw, 1rem); color: var(--cream-dim); margin-top: clamp(1rem, 2vw, 1.3rem); }

.btn-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
  max-width: 21rem; margin: clamp(2.2rem, 4.5vw, 3rem) auto 0;
}
.btn-row .btn--primary { grid-column: 1 / -1; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.3rem; padding: 1rem 1.8rem; overflow: hidden; isolation: isolate;
  border: 1px solid var(--gold); border-radius: var(--r-btn);
  background: rgba(var(--navy-rgb), 0.55); color: var(--gold-bright);
  font-family: var(--label); font-weight: 600; font-size: 0.66rem;
  letter-spacing: var(--track-3); text-indent: var(--track-3); text-transform: uppercase;
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.22s var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
/* Smaller, lighter secondary actions (Directions / Calendar) */
.btn--soft {
  min-height: 3rem; padding: 0.55rem 0.7rem;
  font-size: 0.56rem; letter-spacing: var(--track-4); text-indent: var(--track-4);
  border-color: rgba(212, 175, 55, 0.42); color: var(--gold-bright);
  background: rgba(255, 248, 232, 0.05);
}
.btn--soft:hover, .btn--soft:focus-visible { color: var(--ink); border-color: var(--gold-bright); }
.btn__inner { position: relative; pointer-events: none; display: inline-flex; align-items: center; gap: 0.55em; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--foil); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--gold-bright); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 6px 22px rgba(245, 217, 124, 0.16); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active, .btn.is-pressed { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.btn--primary {
  background: var(--foil-satin); background-size: 100% 100%; color: var(--ink);
  border-color: var(--gold-bright); font-weight: 700; font-size: 0.7rem;
  /* neutral dark grounding — metal reflects, it doesn't glow */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(120, 86, 20, 0.32);
}
/* hover-in-only sheen sweep: transition lives on the destination state, so
   hover-out snaps invisibly between the off-canvas endpoints (no reverse sweep) */
.btn--primary::before {
  display: block; z-index: 0; /* above the opaque satin fill, below the positioned label */
  background: linear-gradient(115deg, transparent 36%, rgba(255, 252, 240, 0.45) 50%, transparent 64%);
  background-size: 100% 100%;
  transform: translateX(-101%); transform-origin: center;
  transition: none;
}
.btn--primary:hover::before, .btn--primary:focus-visible::before {
  transform: translateX(101%);
  transition: transform 0.9s var(--ease);
}
.btn--primary:hover, .btn--primary:focus-visible {
  color: var(--ink); border-color: #fff7da; transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(245, 217, 124, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.card__links { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: flex; align-items: center; justify-content: center; gap: 0.2rem 0.4rem; flex-wrap: wrap; }
/* separators dangle at wrap points — the links carry their own rhythm */
.card__links-sep { display: none; }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--label); font-size: 0.6rem; letter-spacing: var(--track-4); text-indent: var(--track-4);
  text-transform: uppercase; color: var(--gold); position: relative; padding: 0.5rem 0.3rem;
  transition: color 0.3s;
}
.textlink::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; bottom: 0.7rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.textlink:hover, .textlink:focus-visible { color: var(--gold-bright); }
.textlink:hover::after, .textlink:focus-visible::after { transform: scaleX(1); }
.textlink:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: max(clamp(2.4rem, 5vw, 3.6rem), calc(env(safe-area-inset-bottom) + 1.2rem));
}
/* a centered fading hairline instead of an edge-to-edge rule — the page's quiet colophon */
.site-footer::before {
  content: ""; display: block; width: min(26rem, 64%); height: 1px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.4) 28% 72%, transparent);
}
.footer__name { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: 0.04em; color: var(--cream); }
.footer__sub { font-family: var(--label); font-size: 0.56rem; letter-spacing: var(--track-3); text-indent: var(--track-3); text-transform: uppercase; color: var(--gold); opacity: 0.85; margin-top: 0.4rem; }
.footer__scripture { margin-top: 0.9rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--gold); opacity: 0.7; }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  padding: max(1.4rem, env(safe-area-inset-top)) max(1.4rem, env(safe-area-inset-right)) max(1.4rem, env(safe-area-inset-bottom)) max(1.4rem, env(safe-area-inset-left));
  background: rgba(6, 13, 32, 0); transition: background 0.45s ease;
  transition-behavior: allow-discrete;
}
.modal.is-open { display: flex; background: rgba(6, 13, 32, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.modal__panel {
  position: relative; width: 100%; max-width: 34rem;
  max-height: calc(100dvh - 2.8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-radius: var(--r-panel);
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 3.4vw, 2.4rem);
  text-align: center; color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 38, 74, 0.94) 0%, rgba(10, 20, 48, 0.97) 50%, rgba(25, 11, 34, 0.98) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 244, 207, 0.16), inset 0 0 0 1px rgba(var(--gold-rgb), 0.28), 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.94) translate3d(0, 10px, 0); opacity: 0;
  transition: transform 0.48s var(--ease), opacity 0.38s ease;
}
.modal__panel--switch {
  padding-top: clamp(3.6rem, 7vw, 4.15rem);
}
.modal.is-open .modal__panel { transform: none; opacity: 1; }
@starting-style {
  .modal.is-open { background: rgba(6, 13, 32, 0); }
  .modal.is-open .modal__panel {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 10px, 0);
  }
}
.modal__panel::-webkit-scrollbar { width: 6px; }
.modal__panel::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 3px; }
.modal__close {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 3;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: 50%; font-size: 1.7rem; font-weight: 300; line-height: 1;
  color: var(--gold); border: 1px solid transparent; transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.modal__close:hover, .modal__close:focus-visible { border-color: var(--gold); color: var(--gold-bright); background: rgba(212, 175, 55, 0.08); }
.modal__close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.modal__switch {
  position: absolute; top: 0.58rem; left: 0.72rem; z-index: 3;
  max-width: calc(100% - 5.4rem); min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.45rem 0.68rem; border: 1px solid rgba(var(--bright-rgb), 0.42); border-radius: var(--r-pill);
  background: rgba(var(--bg-rgb), 0.48); color: var(--gold-bright);
  font-family: var(--label); font-size: 0.62rem; line-height: 1.15;
  letter-spacing: var(--track-5); text-transform: uppercase; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color 0.24s ease, background 0.24s ease, color 0.24s ease, transform 0.24s ease;
}
.modal__switch:hover,
.modal__switch:focus-visible {
  border-color: rgba(245, 217, 124, 0.8); background: rgba(245, 217, 124, 0.1);
  color: var(--gold-bright); outline: none;
}
.modal__switch:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.modal__switch:active { transform: translateY(1px); }
.modal__eyebrow { font-family: var(--label); font-size: 0.6rem; letter-spacing: var(--track-1); text-indent: var(--track-1); text-transform: uppercase; color: var(--gold); opacity: 0.82; }
.modal__heading { font-family: var(--label); font-weight: 500; font-size: clamp(1.65rem, 3.4vw, 2.35rem); letter-spacing: 0.04em; line-height: 1.12; color: var(--gold-bright); margin: 0.35rem 0 0.5rem; }
.modal__sub { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--cream-dim); margin-bottom: 1rem; text-wrap: balance; }

.donation-methods {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.82rem; margin: 1.35rem 0 0; text-align: left;
}
.donation-method {
  position: relative; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.32); border-radius: var(--r-tile);
  background:
    linear-gradient(160deg, rgba(255, 248, 232, 0.055), rgba(6, 13, 32, 0.6));
  padding: 0.95rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.donation-method::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 217, 124, 0.8), transparent);
  opacity: 0.45;
}
.donation-method--form { padding: 0; }
.donation-method--paypal {
  grid-column: 1 / -1;
  border-color: rgba(245, 217, 124, 0.62);
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(245, 217, 124, 0.16), transparent 45%),
    linear-gradient(145deg, rgba(255, 248, 232, 0.08), rgba(6, 13, 32, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 34px rgba(0, 0, 0, 0.2);
}
.donation-method--paypal::before { opacity: 0.9; }
.donation-method__button {
  width: 100%; display: block; text-align: left;
  padding: 0.95rem 1rem; color: var(--cream);
}
.donation-method__button:hover,
.donation-method__button:focus-visible { background: rgba(212, 175, 55, 0.1); outline: none; }
.donation-method__button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -3px;
}
.paypal-button__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.82rem; min-width: 0;
}
.paypal-mark {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; justify-content: center;
  min-width: 5.1rem; min-height: 2.1rem; padding: 0.2rem 0.58rem 0.22rem;
  border-radius: var(--r-field); background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  font-family: Arial, Helvetica, sans-serif; font-size: 1.16rem; font-weight: 800;
  letter-spacing: 0; line-height: 1; text-transform: none;
}
.paypal-mark span:first-child { color: #003087; }
.paypal-mark span:last-child { color: #009cde; margin-left: 0.02em; }
.paypal-button__copy { display: grid; gap: 0.2rem; min-width: 0; }
.paypal-button__copy small {
  margin: 0; font-size: 0.92rem; color: rgba(236, 224, 192, 0.76);
}
.paypal-button__arrow {
  display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border-radius: 50%;
  border: 1px solid rgba(245, 217, 124, 0.34); color: var(--gold-bright);
  font-size: 1.55rem; line-height: 1; transform: translateY(-0.02rem);
}
.donation-method h4,
.donation-method__label {
  font-family: var(--label); font-size: 0.72rem; letter-spacing: var(--track-4); text-transform: uppercase;
  color: var(--gold-bright);
}
.donation-method h4 { margin-bottom: 0.1rem; }
.donation-method p,
.donation-method small,
.donation-method address {
  display: block; margin-top: 0.42rem;
  font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; color: var(--cream-dim);
}
.donation-method address { font-style: normal; color: var(--cream); }
.donation-method a {
  color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(245, 217, 124, 0.35);
  text-underline-offset: 0.18em; overflow-wrap: anywhere;
}
.donation-method__contact { font-size: 0.92rem; }
.donation-facts {
  margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem; text-align: left;
}
.donation-facts div {
  border-top: 1px solid rgba(var(--gold-rgb), 0.22); padding-top: 0.7rem;
}
.donation-facts dt {
  font-family: var(--label); font-size: 0.55rem; letter-spacing: var(--track-3); text-transform: uppercase;
  color: var(--gold); opacity: 0.82;
}
.donation-facts dd {
  margin-top: 0.25rem; font-family: var(--serif); font-size: 1.02rem; color: var(--cream);
}

/* ---------- Form ---------- */
.rsvp-form { text-align: left; display: grid; gap: 0.82rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: grid; gap: 0.34rem; }
.is-hidden { display: none !important; }
.field > label, .field__label {
  font-family: var(--label); font-size: 0.58rem; letter-spacing: var(--track-3); text-indent: var(--track-3);
  text-transform: uppercase; color: var(--gold); opacity: 0.88;
}
.field .opt { letter-spacing: 0.1em; opacity: 0.85; }
.field__hint {
  margin-top: 0.15rem; font-family: var(--serif); font-style: italic;
  font-size: 0.92rem; line-height: 1.35; color: var(--cream-dim);
}
.rsvp-form input[type="text"], .rsvp-form input[type="email"], .rsvp-form input[type="tel"], .rsvp-form select, .rsvp-form textarea {
  width: 100%; padding: 0.72rem 0.9rem; min-height: 2.75rem;
  background: rgba(var(--bg-rgb), 0.6); border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: var(--r-field);
  color: var(--cream); font-family: var(--serif); font-size: 1.05rem;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.rsvp-form textarea { min-height: auto; resize: vertical; line-height: 1.5; }
.rsvp-form select option { color: #0b1020; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus {
  outline: none; border-color: var(--gold-bright); background: rgba(var(--bg-rgb), 0.8);
  box-shadow: 0 0 0 3px rgba(var(--bright-rgb), 0.26);
}
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.seg__opt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg__opt span {
  display: block; padding: 0.72rem 0.7rem; min-height: 2.75rem; text-align: center;
  background: rgba(var(--bg-rgb), 0.55); border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: var(--r-field);
  font-family: var(--label); font-size: 0.62rem; letter-spacing: var(--track-5); text-indent: var(--track-5); text-transform: uppercase;
  color: var(--cream); display: grid; place-items: center;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.seg__opt:hover span { border-color: var(--gold); color: var(--gold-bright); }
.seg__opt input:checked + span { border-color: var(--gold-bright); background: rgba(var(--gold-rgb), 0.22); color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(var(--bright-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.rsvp-form__submit { width: 100%; margin-top: 0.3rem; }
.rsvp-form__submit:disabled { opacity: 0.6; cursor: wait; }
.rsvp-form__error { min-height: 1.3em; margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: #e89a8c; text-align: center; }
.rsvp-form__error.is-success { color: var(--gold-bright); }

.rsvp-success { text-align: center; padding: 0.6rem 0; }
.rsvp-success__mark { font-size: 2rem; color: var(--gold-bright); filter: drop-shadow(0 0 14px rgba(245, 217, 124, 0.7)); margin-bottom: 0.6rem; }
.rsvp-success__heading { font-family: var(--label); font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 2.7rem); letter-spacing: 0.05em; line-height: 1.1; color: var(--gold-bright); margin-bottom: 0.8rem; }
.rsvp-success__text { font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.7; color: var(--cream); opacity: 0.92; text-wrap: balance; }

/* ---------- Agenda (programme modal) ---------- */
.agenda { list-style: none; text-align: left; max-width: 26rem; margin: 1.4rem auto 0; display: grid; gap: 0.1rem; }
.agenda li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(var(--gold-rgb), 0.12); align-items: baseline; }
.agenda li:last-child { border-bottom: 0; }
.agenda__time { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.agenda__what { display: flex; flex-direction: column; gap: 0.1rem; }
.agenda__what strong { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--cream); }
.agenda__what { color: var(--cream-dim); font-size: 0.92rem; }
.agenda__note { margin-top: 1.2rem; font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--cream-dim); opacity: 0.7; }

/* ---------- Touch burst ---------- */
.touch-burst {
  position: fixed; left: 0; top: 0; width: 12px; height: 12px; z-index: 9998; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 184, 0.95) 0%, rgba(245, 217, 124, 0.62) 30%, rgba(212, 175, 55, 0.16) 62%, transparent 72%);
  transform: translate3d(-50%, -50%, 0) scale(0.25); opacity: 0.9; mix-blend-mode: screen;
  animation: touchBurst 0.68s var(--ease) forwards;
}
@keyframes touchBurst { 0% { transform: translate3d(-50%, -50%, 0) scale(0.25); opacity: 0.9; } 100% { transform: translate3d(-50%, -50%, 0) scale(9); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .hero__title span span { font-size: clamp(2.9rem, 17.5vw, 5rem); }
  .hero__title--formal { max-width: 24rem; line-height: 1.08; letter-spacing: 0.035em; }
  .hero__title--formal span span { font-size: 2.55rem; }
  .hero__identity--formal {
    max-width: 22rem; line-height: 1.6;
    letter-spacing: 0.13em; text-indent: 0.13em;
  }
  .hero__tagline { max-width: 22.5rem; font-size: 1.06rem; padding: 0 0.4rem; line-height: 1.46; }
  .field-row { grid-template-columns: 1fr; }
  .seg { grid-template-columns: 1fr; }
  .giving__tiers { grid-template-columns: 1fr; }
  .giving__lead { font-size: clamp(1.08rem, 6vw, 1.42rem); line-height: 1.52; }
  .tier {
    min-height: 0; display: grid; grid-template-columns: minmax(9rem, 0.95fr) 1fr;
    gap: 0.6rem 0.85rem; align-items: start;
    padding: 1rem; border-radius: var(--r-tile);
    border-color: rgba(var(--bright-rgb), 0.52);
    background:
      radial-gradient(110% 130% at 0% 0%, rgba(245, 217, 124, 0.16), transparent 44%),
      linear-gradient(160deg, rgba(255, 248, 232, 0.095), rgba(6, 13, 32, 0.72) 58%, rgba(25, 11, 34, 0.58));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -18px 42px rgba(6, 13, 32, 0.28),
      0 20px 44px rgba(0, 0, 0, 0.24);
  }
  .tier::before { height: 3px; opacity: 1; }
  .tier::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    /* screen-blend baked into normal-blend alphas (x0.75) — same sheen over the
       dark navy base without four per-frame backdrop read-backs mid-scroll */
    background:
      linear-gradient(115deg, transparent 0%, rgba(255, 244, 207, 0.10) 35%, transparent 58%),
      radial-gradient(42% 60% at 100% 0%, rgba(245, 217, 124, 0.10), transparent 66%);
  }
  .tier__amount {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 2.1rem; line-height: 0.95;
  }
  .tier__name {
    grid-column: 2; margin-top: 0.1rem;
    font-size: clamp(0.72rem, 3.8vw, 0.9rem); line-height: 1.28;
    letter-spacing: var(--track-5);
  }
  .tier__desc {
    grid-column: 1 / -1;
    font-size: clamp(1.02rem, 5.2vw, 1.25rem); line-height: 1.46;
    color: rgba(236, 224, 192, 0.82);
  }
  .tier__select {
    grid-column: 1 / -1; position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.9rem; width: 100%; margin-top: 0.15rem;
    opacity: 1; padding: 0; align-self: auto;
    border: 1px solid rgba(var(--bright-rgb), 0.58); border-radius: var(--r-tile);
    background: rgba(var(--bright-rgb), 0.09); color: var(--gold-bright);
    font-family: var(--label); font-weight: 600; font-size: 0.62rem;
    letter-spacing: var(--track-4); text-indent: var(--track-4); text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .tier__select:active { transform: translateY(1px); }
  .tier__select:focus-visible {
    outline: 2px solid var(--gold-bright); outline-offset: 3px;
  }
  .giving__actions { align-items: stretch; flex-direction: column; }
  .giving__actions .btn { width: 100%; min-width: 0; }
  .donation-methods { grid-template-columns: 1fr; }
  .paypal-button__row { grid-template-columns: auto minmax(0, 1fr); }
  .paypal-button__arrow { display: none; }
  .donation-facts { grid-template-columns: 1fr; }
  /* Zoom the background video out a touch on phones (object-fit:cover still
     fills the viewport at scale 1, so there are no edge gaps). */
  .bg-video { transform: translateZ(0) scale(1); }
  /* ---- mobile smoothness ---- */
  /* under the live canvas the 0.34-opacity starfield twinkle is invisible work */
  body.cosmos-on .cosmos-fallback::before,
  body.cosmos-on .cosmos-fallback::after { animation-play-state: paused; }
  /* --sunset consumers raster once and fade as pure composite steps */
  .sunset, .vignette, .card__warm, .particulars::after { will-change: opacity; }
  /* drop only the blur from the video grade — a full-viewport Gaussian re-run on
     every decoded frame; saturate/brightness keep the mood pixel-identical */
  .bg-video { filter: saturate(0.82) brightness(0.78); }
  /* glass tiering: 26px backdrop blur at DPR3 is a 78-device-px kernel re-filtered
     every frame the finale animates beneath the card; 14px over a slightly darker
     base reads the same frosted at phone size */
  .card {
    -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.04);
    backdrop-filter: blur(14px) saturate(1.7) brightness(1.04);
    background: linear-gradient(160deg, rgba(46, 58, 92, 0.14) 0%, rgba(24, 32, 58, 0.24) 52%, rgba(14, 16, 32, 0.42) 100%);
  }
  /* the modal wash is 92%+ opaque — the full-viewport backdrop blur under it is invisible work */
  .modal.is-open { background: rgba(var(--bg-rgb), 0.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* one wide glow instead of a chained 132-device-px double kernel during title reveals */
  .tribute__name, .legacy__title, .impact__title, .giving__title, .experience__title {
    filter: drop-shadow(0 0 26px rgba(6, 13, 32, 0.9));
  }
}
@media (min-width: 641px) and (max-width: 980px) {
  .hero__title--formal { max-width: 48rem; }
  .hero__title--formal span span { font-size: 4.1rem; }
  .hero__identity--formal {
    max-width: 40rem; letter-spacing: 0.18em; text-indent: 0.18em;
  }
  .giving__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 4-up tiers: align interiors across cards (name row reserves 2 lines,
   the GIVE hairline pins to the bottom) */
@media (min-width: 981px) {
  .tier { justify-content: flex-start; }
  .tier__name { min-height: 2.7em; }
  .tier__select { margin-top: auto; }
}
/* a longer runway on desktop so the formed butterfly is held at rest over Evelyn's name */
@media (min-width: 641px) {
  .tribute { min-height: 128svh; }
}
@media (max-width: 560px) {
  /* Legacy figures: a quiet centered vertical list rather than a cramped 3-up row */
  .legacy__figures {
    grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2rem); max-width: 22rem;
    border: 0; border-image: none; padding-block: 0;
  }
  .figure:not(:first-child)::before { content: none; }
  .figure__value::after {
    content: ""; display: block; width: var(--rule-minor); height: 1px; margin: 0.7rem auto 0;
    background: var(--gold); opacity: 0.4;
  }
  .honoree { margin-block: clamp(1.8rem, 4vh, 2.6rem); }
  .experience__list {
    grid-template-columns: 1fr; max-width: 24rem;
    margin-top: clamp(1.4rem, 3.5vh, 2rem);
    padding-block: 0.45rem;
  }
  .experience__item {
    min-height: 0; padding-block: 1rem;
  }
  .experience__item + .experience__item {
    border-top: 1px solid rgba(var(--gold-rgb), 0.13);
  }
}
@media (max-width: 380px) {
  .btn, .giving__actions .btn--soft { letter-spacing: var(--track-4); text-indent: var(--track-4); padding-left: 1.2rem; padding-right: 1.2rem; }
  .hero__identity { letter-spacing: var(--track-3); text-indent: var(--track-3); }
  .hero__title--formal span span { font-size: 2.25rem; }
  .hero__identity--formal { letter-spacing: 0.1em; text-indent: 0.1em; }
  .hero__tagline { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { cursor: auto; }
  #cosmos, .bg-video, .bg-scrim { display: none !important; }
  .loader { display: none !important; }
  body.loading { overflow: auto; }
  html.js .reveal-fade, html.js .reveal-rise > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .eyebrow.reveal-fade { letter-spacing: var(--track-1) !important; }
  html.js .ornament.reveal-fade { transform: none !important; }
  html.js .ornament.reveal-fade::before { opacity: 1 !important; transition: none !important; }
  .hairline { transform: scaleX(1) !important; }
  .tribute, .legacy, .impact, .giving, .experience { min-height: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  /* the finale dusk is allowed one gentle opacity cross-fade (no transform/motion) so it
     eases in with the card instead of popping as a hard full-screen flash */
  .sunset, .particulars::before, .particulars::after, .card__warm { transition: opacity 0.7s ease !important; }
}

/* ---------- Print ---------- */
@media print {
  #cosmos, .cosmos-fallback, .vignette, .scroll-hint, .loader, .btn-row, .card__links { display: none !important; }
  .legacy::before, .impact::before, .giving::before, .experience::before { display: none !important; }
  body { background: #fff !important; color: #000 !important; cursor: auto !important; }
  html.js .reveal-fade, html.js .reveal-rise > span {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.js .eyebrow.reveal-fade { letter-spacing: var(--track-1) !important; }
  html.js .ornament.reveal-fade { transform: none !important; }
  html.js .ornament.reveal-fade::before { opacity: 1 !important; transition: none !important; }
  main *, .site-footer * {
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .hero__title, .tribute__name,
  .figure__value, .honoree__index { color: #6b5210 !important; -webkit-text-fill-color: #6b5210 !important; }
  .honoree__emblem { color: #6b5210 !important; filter: none !important; }
  .tribute, .legacy, .impact, .giving, .experience { min-height: auto; }
}