/* ============================================================
   Summer Soirée 2026 — 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;
  --navy-2: #14264a;
  --plum: #190b22;
  --gold: #d4af37;
  --gold-soft: #c89a3c;
  --gold-bright: #f5d97c;
  --gold-glow: #ffe49b;
  --gold-deep: #8b6914;
  --cream: #ece0c0;
  --cream-dim: rgba(236, 224, 192, 0.74);
  --ink: #0b1020;
  --foil: linear-gradient(135deg, #8b6914 0%, #c89a3c 18%, #f5d97c 38%, #fff4cf 50%, #f5d97c 62%, #c89a3c 82%, #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;

  --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; }

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.06);
  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, drop the CSS starfield so layers don't fight */
body.bg-video-on .cosmos-fallback { opacity: 0; }

/* 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; }
.loader__crest {
  font-family: var(--label); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: 0.5em; text-indent: 0.5em;
  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: 0.55em; text-indent: 0.55em;
  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: 0.5em; text-indent: 0.5em; 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);
}
html.js .reveal-rise.is-in > span,
html.js .is-in .reveal-rise > span { transform: none; opacity: 1; }
html.js .reveal-rise:nth-child(2) > span { transition-delay: 0.1s; }

/* ---------- 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 infinite;
  filter: drop-shadow(0 0 26px rgba(6, 13, 32, 0.7));
}
.hero__title span span { font-size: clamp(3.2rem, 12vw, 9.2rem); display: block; }
.hero__year {
  margin-top: 0.4rem;
  font-family: var(--label); font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.7rem); letter-spacing: 0.42em; text-indent: 0.42em;
  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: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--cream); opacity: 0.9;
  text-shadow: 0 0 14px rgba(6, 13, 32, 0.9);
}
.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);
  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: 0.4em; text-indent: 0.4em; text-transform: uppercase;
  color: var(--cream); opacity: 0.92; text-shadow: 0 0 14px rgba(6, 13, 32, 0.9);
}

.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: 0.5em; text-indent: 0.5em;
  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;
}
.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: 4px; 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);
  text-shadow: 0 0 22px rgba(6, 13, 32, 0.85), 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: 0.45em; text-indent: 0.45em;
  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: 0.32em; text-indent: 0.32em;
  text-transform: uppercase; color: var(--gold); opacity: 0.85;
}
.hairline {
  display: block; width: 64px; 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 {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.legacy::before, .impact::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%);
}
.legacy__inner { max-width: 50rem; }
.impact__inner { max-width: 44rem; }
.legacy .eyebrow, .impact .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 {
  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;
  text-shadow: 0 0 22px rgba(6, 13, 32, 0.85), 0 0 44px rgba(6, 13, 32, 0.5);
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
.legacy__lead, .impact__lead, .impact__close {
  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: 37rem; 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);
}

/* Legacy figures — a colophon row of foil numerals over hair-thin rules */
.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;
}
/* 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; }
.figure__value {
  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__value::after {
  content: ""; display: block; width: 34px; height: 1px; margin: 0.7rem auto 0;
  background: var(--gold); opacity: 0.4;
}
.figure__label {
  font-family: var(--label); font-size: clamp(0.52rem, 0.8vw, 0.62rem);
  letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: var(--cream-dim);
}

/* Community Impact — a single centered roll of three honorees, 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(2.2rem, 5vh, 3.4rem) 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: 40px; height: 1px; margin: clamp(2.2rem, 5vh, 3.4rem) auto 0;
  background: var(--gold); opacity: 0.25;
}
.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: 0.4em; text-indent: 0.4em; 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-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: var(--cream-dim); margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.impact .ornament { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* ---------- PARTICULARS card ---------- */
.particulars { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; isolation: isolate; }
.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 72%);
  mix-blend-mode: screen; filter: blur(8px);
}
.card {
  position: relative; max-width: 36rem; width: 100%;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.6rem, 4vw, 3rem);
  border-radius: 30px;
  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, calc(0.26 + var(--sunset, 0) * 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),
    0 30px 130px rgba(228, 162, 86, calc(var(--sunset, 0) * 0.22));
  transform: translateZ(0);
  transition: transform 0.7s var(--ease), box-shadow 0.4s ease, border-color 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;
}
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: 0.5em; text-indent: 0.5em; 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: 0.22em; text-indent: 0.22em;
  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: 0.55em; text-indent: 0.55em; text-transform: uppercase; color: var(--gold); opacity: 0.9;
}
.card__rule { display: block; width: 48px; 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: 0.16em; text-indent: 0.16em; 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__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: 10px;
  background: rgba(10, 20, 48, 0.55); color: var(--gold-bright);
  font-family: var(--label); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.32em; text-indent: 0.32em; 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: 0.2em; text-indent: 0.2em;
  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; }
.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(245, 217, 124, 0.22); }
.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: 5px; }

.btn--primary {
  background: var(--foil); background-size: 100% 100%; color: var(--ink);
  border-color: var(--gold-bright); font-weight: 700; font-size: 0.7rem;
  box-shadow: 0 14px 38px rgba(245, 217, 124, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--primary::before { display: none; }
.btn--primary:hover, .btn--primary:focus-visible {
  color: var(--ink); border-color: #fff7da; transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(245, 217, 124, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@keyframes rsvpPulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(245, 217, 124, 0.34), 0 0 0 0 rgba(245, 217, 124, 0), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  50% { box-shadow: 0 18px 48px rgba(245, 217, 124, 0.5), 0 0 0 8px rgba(245, 217, 124, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(236, 224, 192, 0.45); }
.btn--ghost::before { background: var(--cream); opacity: 0.06; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--gold-bright); border-color: var(--gold); box-shadow: none; }

.card__links { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.card__links-sep { color: var(--gold); opacity: 0.5; }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase; color: var(--gold); position: relative; padding: 0.5rem 0.6rem;
  transition: color 0.3s;
}
.textlink::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; 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: 4px; border-radius: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(2.4rem, 5vw, 3.6rem) 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));
  border-top: 1px solid rgba(212, 175, 55, 0.16);
}
.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: 0.36em; text-indent: 0.36em; 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; color: var(--gold); opacity: 0.8; }

/* ---------- 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;
}
.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: 18px;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.5rem, 4vw, 2.6rem);
  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 var(--gold);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 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.is-open .modal__panel { transform: none; opacity: 1; }
.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.5rem; 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__eyebrow { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase; color: var(--gold); opacity: 0.82; }
.modal__heading { font-family: var(--label); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: 0.04em; line-height: 1.12; color: var(--gold-bright); margin: 0.5rem 0 0.7rem; }
.modal__sub { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--cream-dim); margin-bottom: 1.6rem; text-wrap: balance; }

/* ---------- Form ---------- */
.rsvp-form { text-align: left; display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: grid; gap: 0.45rem; }
.is-hidden { display: none !important; }
.field > label, .field__label {
  font-family: var(--label); font-size: 0.58rem; letter-spacing: 0.26em; text-indent: 0.26em;
  text-transform: uppercase; color: var(--gold); opacity: 0.88;
}
.field .opt { letter-spacing: 0.1em; opacity: 0.6; }
.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.85rem 0.95rem; min-height: 3rem;
  background: rgba(6, 13, 32, 0.6); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 6px;
  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(6, 13, 32, 0.8);
  box-shadow: 0 0 0 2px rgba(245, 217, 124, 0.18);
}
.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.85rem 0.7rem; min-height: 3rem; text-align: center;
  background: rgba(6, 13, 32, 0.55); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 6px;
  font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.14em; text-indent: 0.14em; 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: 1.5px solid var(--gold-bright); background: rgba(212, 175, 55, 0.22); color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(245, 217, 124, 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; }

.checks { display: grid; gap: 0.5rem; }
.check { display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(212, 175, 55, 0.32); border-radius: 6px; background: rgba(6, 13, 32, 0.5); cursor: pointer; }
.check input { width: auto; min-height: auto; accent-color: var(--gold); }
.check span { font-family: var(--serif); font-size: 1.02rem; color: var(--cream); }
.check:has(input:checked) { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); }
.check input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.mode-attending { display: grid; gap: 1rem; }
.mode-sponsor { display: none; gap: 1rem; }
.rsvp-form.sponsor-mode .mode-attending { display: none; }
.rsvp-form.sponsor-mode .mode-sponsor { display: grid; }

.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(212, 175, 55, 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__tagline { font-size: 1.12rem; padding: 0 0.4rem; }
  .field-row { grid-template-columns: 1fr; }
  .seg { 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); }
}
@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; }
  .honoree { margin-block: clamp(1.8rem, 4vh, 2.6rem); }
}
@media (max-width: 380px) {
  .btn { letter-spacing: 0.24em; text-indent: 0.24em; padding-left: 1.2rem; padding-right: 1.2rem; }
  .hero__identity { letter-spacing: 0.3em; text-indent: 0.3em; }
}

/* ---------- 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; }
  .hairline { transform: scaleX(1) !important; }
  .tribute { 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 { 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 { display: none !important; }
  body { background: #fff !important; color: #000 !important; cursor: auto !important; }
  .hero__title, .tribute__name,
  .figure__value, .honoree__index { color: #6b5210 !important; -webkit-text-fill-color: #6b5210 !important; }
}