@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --cream: #fbf6ec;
  --ivory: #fffdf8;
  --ink: #1f2b1f;
  --ink-soft: #3b4636;
  --sage: #6f7d5c;
  --gold: #c9973a;
  --gold-light: #f3d58c;
  --gold-pale: #f8ecc9;
  --gold-deep: #9a6b1c;
  --gold-grad: linear-gradient(100deg, #a9761f 0%, #e7c46f 22%, #b8862c 42%, #f6e2a8 58%, #b07d26 78%, #d9ae55 100%);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --caps: 'Cinzel', 'Times New Roman', serif;
  --script: 'Great Vibes', cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

#heaven { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; display: block; }
main { position: relative; z-index: 1; overflow-x: clip; }

.veil {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #fff 0%, #fffdf6 55%, #fbf3df 100%);
}

/* ── Shared ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--caps);
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1rem;
  padding-left: 0.42em;
}
.eyebrow.light { color: var(--gold-light); }
.script { font-family: var(--script); font-weight: 400; line-height: 1.05; }
.gold-text, .name-text, .big-name, .cal-day, .champ-title, .angel-title {
  background: var(--gold-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* Phones: a still gold (the shimmer repaints huge text every frame; the word
   blur is switched off under Tribute). Both made scrolling stutter on phones. */
@media (hover: none) {
  .gold-text, .name-text, .big-name, .cal-day, .champ-title, .angel-title { animation: none; background-position: 40% 50%; }
}

.divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.2rem auto; width: min(420px, 80vw); }
.divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider svg { width: 30px; height: 28px; flex: none; }

/* ── Botanicals ─────────────────────────────────── */
.botanical { position: fixed; z-index: 2; pointer-events: none; width: min(46vw, 560px); }
.botanical img { width: 100%; }
.b-tl { top: -6px; left: -18px; transform-origin: 0 0; }
.b-br { bottom: -6px; right: -18px; transform: rotate(180deg); }
@media (max-width: 700px) {
  .botanical { width: 72vw; }
  .b-tl { left: -26vw; top: -4px; }
  .b-br { right: -26vw; }
}

/* ── Hero ───────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(4.5rem, 9vh, 6rem) 16px 5.5rem;
  position: relative;
}
.hero-eyebrow span { display: inline-block; }
.portrait {
  position: relative;
  height: clamp(300px, 54svh, 640px);
  aspect-ratio: 540 / 830;
  max-width: 78vw;
}
.portrait-glow {
  position: absolute; inset: -18% -30%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, 0.85), rgba(255, 240, 210, 0.35) 55%, transparent 75%);
  filter: blur(8px);
}
.portrait-img {
  position: absolute; left: 4.8%; top: 1.1%; width: 90.4%; height: 97.8%;
  object-fit: cover;
  filter: sepia(0.12) contrast(1.02);
}
.portrait-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 10px rgba(201, 151, 58, 0.35)); }
.name {
  margin: -0.42em 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, 0.5rem + 11vw, 8rem);
  white-space: nowrap;
  line-height: 1.15;
  position: relative;
  filter: drop-shadow(0 2px 2px rgba(255, 253, 246, 0.95)) drop-shadow(0 0 18px rgba(255, 250, 235, 0.9));
}
.name-text { display: inline-block; padding: 0 0.25em; }
.hero-sub {
  font-style: italic; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  color: var(--ink-soft); margin: 0.2rem 0 0;
}
.scroll-cue {
  position: absolute; bottom: max(1.2rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.4em; color: var(--gold-deep);
  padding: 0.5rem 1rem;
}
.scroll-cue svg { width: 14px; height: 34px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ── Tribute ────────────────────────────────────── */
/* Desktop: a tall section with a sticky panel holds the words in place while
   they light up. Phones: no held panels at all (see "Phones" below). */
.tribute { height: 260svh; position: relative; }
.tribute-inner {
  position: sticky; top: 0; min-height: 100svh; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; padding: 4rem 16px; text-align: center;
}
.reveal-words .w { display: inline-block; opacity: 0.1; filter: blur(4px); transition: none; }
@media (hover: none) { .reveal-words .w { filter: none; } }
.lead { font-style: italic; font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem); line-height: 1.25; margin: 0; color: var(--ink); }
.big-name { font-size: clamp(5rem, 3rem + 12vw, 12rem); line-height: 1.35; margin: -0.1em 0 -0.1em; padding: 0 0.2em; }
.body { font-style: italic; font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); line-height: 1.4; margin: 0 auto; max-width: 30ch; color: var(--ink-soft); }

/* ── Champagne ──────────────────────────────────── */
.champagne { height: 230svh; position: relative; }
.champ-inner {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1rem, 4vw, 4rem);
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);
  color: #f6ead0;
}
.champ-photo { margin: 0; justify-self: end; height: min(82svh, 720px); aspect-ratio: 662 / 1080; position: relative; will-change: transform, opacity; }
.champ-photo img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 44%, #000 50%, rgba(0,0,0,.6) 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 44%, #000 50%, rgba(0,0,0,.6) 72%, transparent 100%);
}
.champ-title { font-size: clamp(3.6rem, 2rem + 6vw, 7.4rem); margin: 0 0 1.2rem; padding: 0.1em 0.15em; }
.champ-text { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.8rem); font-style: italic; max-width: 26ch; margin: 0 0 1rem; line-height: 1.4; }
.champ-text.dim { color: rgba(246, 234, 208, 0.65); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); }
/* Phones: iPhone Safari scrolls apart from the page's scripts, so any panel held
   still while the finger keeps moving jitters. Here the sections scroll
   normally and their animations play by themselves as they come into view. */
@media (hover: none) {
  .tribute, .champagne { height: auto; }
  .tribute-inner, .champ-inner { position: relative; }
  .champ-inner { height: auto; min-height: 100svh; padding-block: 4rem; }
}
@media (max-width: 760px) {
  .champ-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; text-align: center; gap: 0; }
  .champ-photo { justify-self: center; height: 44svh; }
  .champ-copy { display: flex; flex-direction: column; align-items: center; margin-top: -2.5rem; }
  .champ-title { margin-bottom: 0.6rem; }
}

/* ── Save the date ──────────────────────────────── */
.date { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 6rem 16px 4rem; text-align: center; }
.date-inner { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.std-title {
  font-family: var(--caps); font-weight: 400; margin: 0;
  font-size: clamp(2rem, 1.2rem + 4.4vw, 4.6rem); letter-spacing: 0.24em; padding-left: 0.24em; line-height: 1.1;
  color: var(--ink);
}
.calendar { display: flex; align-items: center; justify-content: center; gap: clamp(0.8rem, 3vw, 2rem); margin: 0.6rem 0 0.2rem; }
.cal-side {
  font-family: var(--caps); letter-spacing: 0.28em; font-size: clamp(0.8rem, 0.65rem + 0.6vw, 1.15rem);
  padding: 0.7em 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  min-width: 9.5em; color: var(--ink-soft);
}
.cal-day { font-family: var(--serif); font-weight: 500; font-size: clamp(4.6rem, 3rem + 8vw, 9.5rem); line-height: 1; font-variant-numeric: lining-nums; display: inline-flex; align-items: flex-start; }
.cal-day sup { font-size: 0.22em; line-height: 1; margin: 1.15em 0 0 0.12em; font-family: var(--caps); letter-spacing: 0.04em; }
.cal-time { font-family: var(--caps); letter-spacing: 0.2em; font-size: 0.95rem; color: var(--gold-deep); margin: 0.6rem 0 0; }
.cal-venue { font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--ink-soft); margin: 0.2rem 0 0; }
.cal-venue a { color: var(--gold-deep); }
.cal-note { font-style: italic; font-size: 1.05rem; color: var(--ink-soft); max-width: 30em; margin: 0.9rem auto 0; padding: 0 16px; }
@media (max-width: 520px) {
  .cal-side { min-width: 0; letter-spacing: 0.16em; font-size: 0.72rem; }
}
.countdown { display: flex; gap: clamp(0.8rem, 3vw, 2.2rem); margin: 1.6rem 0 2.2rem; }
.rsvp-prompt { display: flex; flex-direction: column; align-items: center; margin-bottom: 0.4rem; }
.rsvp-prompt p { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); font-weight: 500; color: var(--ink); line-height: 1.25; }
.rsvp-prompt p span { display: inline-block; margin-top: 0.3rem; font-size: 0.68em; font-style: italic; font-weight: 400; color: var(--ink-soft); }
.rsvp-arrow { width: 18px; height: 34px; margin-top: 0.5rem; color: var(--gold); animation: point 1.6s ease-in-out infinite; }
@keyframes point { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(8px); opacity: 1; } }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; }
.countdown b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); color: var(--gold-deep); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--sage); margin-top: 0.4rem; }

/* The button */
.std-button {
  position: relative; border: 0; background: none; padding: 0;
  width: min(440px, 88vw); aspect-ratio: 2.35 / 1;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.std-halo {
  position: absolute; inset: -38% -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 140, 0.75), rgba(255, 230, 170, 0.28) 55%, transparent 72%);
  animation: halo 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo { 50% { transform: scale(1.08); opacity: 0.75; } }
.std-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from var(--a), #a9761f, #f6e2a8, #c9973a, #fff7dc, #b07d26, #e9c977, #a9761f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite;
}
@keyframes spin { to { --a: 360deg; } }
/* Solid gold so it reads as something to press, not a decoration */
.std-face {
  position: absolute; inset: 3px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 22%, #f7dd96 0%, #dcb056 38%, #b8862c 78%, #a2721f 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 248, 225, 0.55), inset 0 -10px 24px rgba(110, 72, 10, 0.35), inset 0 8px 18px rgba(255, 250, 230, 0.45), 0 20px 46px -12px rgba(120, 80, 14, 0.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  color: #fffdf6; text-shadow: 0 1px 2px rgba(90, 58, 6, 0.6);
  transition: filter 0.3s;
}
.std-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%); animation: sweep 3.8s ease-in-out infinite 1s;
}
@keyframes sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.std-wings { width: 28%; color: #fff7dc; margin-bottom: 0.1rem; animation: flap 3.2s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(90, 58, 6, 0.5)); }
@keyframes flap { 50% { transform: scaleY(0.88) translateY(2px); } }
.std-small { font-style: italic; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); color: #fff7e0; }
.std-label { font-family: var(--serif); font-weight: 600; font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.05; color: #fffdf6; }
.std-button:hover .std-halo, .std-button:focus-visible .std-halo { animation-duration: 1.8s; }
.std-button:hover .std-face { filter: brightness(1.07); }
.std-button:active .std-face { filter: brightness(0.95); }
.std-button:focus-visible { outline: none; }
.std-button:focus-visible .std-face { box-shadow: inset 0 0 0 5px rgba(255, 248, 225, 0.8), 0 0 0 4px rgba(201, 151, 58, 0.45), 0 20px 46px -12px rgba(120, 80, 14, 0.75); }

.footer { position: relative; text-align: center; padding: 4rem 16px 7rem; }
.footer .script { font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem); color: var(--gold); margin: 0; }
.footer-small { font-style: italic; color: var(--ink-soft); margin: 0.4rem 0 0; }

/* ── Modal / form ───────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal[hidden], .angel[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(251, 246, 236, 0.62); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
.card {
  position: relative; width: min(470px, 100%); max-height: calc(100svh - 32px); overflow: hidden auto;
  background: linear-gradient(180deg, #fffefa 0%, #fbf4e5 100%);
  border: 1px solid rgba(201, 151, 58, 0.5);
  border-radius: 30px;
  padding: clamp(2.2rem, 6vw, 3rem) clamp(1.3rem, 5vw, 2.6rem) clamp(1.6rem, 5vw, 2.4rem);
  box-shadow: 0 40px 90px -30px rgba(120, 84, 20, 0.45), 0 0 0 8px rgba(255, 253, 246, 0.6);
  text-align: center;
}
.card-leaves { position: absolute; top: -8px; right: -70px; width: 300px; transform: rotate(8deg); pointer-events: none; opacity: 0.95; }
.card-close { position: absolute; top: 12px; left: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 151, 58, 0.4); background: rgba(255, 253, 246, 0.8); font-size: 1.5rem; line-height: 1; color: var(--gold-deep); z-index: 2; }
.card .eyebrow { margin-top: 0.6rem; }
.card-title { font-family: var(--script); font-weight: 400; font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); margin: 0; line-height: 1.1; color: var(--gold-deep); }
.card-sub { font-family: var(--caps); letter-spacing: 0.16em; font-size: 0.82rem; color: var(--ink-soft); margin: 0.3rem 0 1.4rem; }
.field { display: block; text-align: left; margin: 0 0 1.05rem; }
.field > span { display: block; font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.15rem; }
.field input {
  width: 100%; border: 0; border-bottom: 1px solid rgba(154, 107, 28, 0.35); background: transparent;
  font: 400 1.3rem/1.3 var(--serif); color: var(--ink); padding: 0.45rem 0.1rem; border-radius: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field input::placeholder { color: rgba(59, 70, 54, 0.38); font-style: italic; }
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold), 0 10px 18px -14px rgba(201, 151, 58, 0.8); }
.field.invalid input { border-color: #b4553f; }
.err { display: block; min-height: 0; color: #a24a36; font-style: italic; font-size: 0.95rem; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 0.4rem; }
.stepper button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold); background: var(--ivory); font-size: 1.5rem; line-height: 1; color: var(--gold-deep); transition: background 0.2s, transform 0.2s; }
.stepper button:hover { background: var(--gold-pale); }
.stepper button:active { transform: scale(0.92); }
.stepper output { font: 500 2.4rem/1 var(--serif); font-variant-numeric: lining-nums; min-width: 2ch; text-align: center; color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #a24a36; font-style: italic; min-height: 1.2em; margin: 0.2rem 0 0.6rem; }
.submit {
  width: 100%; border: 0; border-radius: 999px; padding: 1rem 1.2rem;
  background: linear-gradient(100deg, #a9761f, #d9ae55 30%, #f3d58c 50%, #c9973a 70%, #a9761f);
  background-size: 200% 100%;
  color: #fffdf6; font-family: var(--caps); letter-spacing: 0.2em; font-size: 0.95rem; font-weight: 600;
  text-shadow: 0 1px 2px rgba(110, 72, 10, 0.5);
  box-shadow: 0 14px 30px -12px rgba(154, 107, 28, 0.7);
  position: relative; transition: background-position 0.8s, transform 0.2s;
}
.submit:hover { background-position: 100% 0; }
.submit:active { transform: scale(0.98); }
.submit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.submit-busy { display: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 253, 246, 0.4); border-top-color: #fff; animation: rot 0.8s linear infinite; margin: 0 auto; }
.submit.busy .submit-label { display: none; }
.submit.busy .submit-busy { display: block; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ── Angel confirmation ─────────────────────────── */
.angel { position: fixed; inset: 0; z-index: 60; overflow: hidden auto; display: flex; flex-direction: column; align-items: center; }
.angel-light { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 34%, #ffffff 0%, #fffaf0 35%, #f8ecd0 75%, #f1dfb8 100%); }
.angel-rays {
  position: fixed; left: 50%; top: 32%; width: 260vmax; height: 260vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, 0.32) 0deg 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 62%);
          mask-image: radial-gradient(closest-side, #000 8%, transparent 62%);
  animation: rays 60s linear infinite;
}
@keyframes rays { to { rotate: 360deg; } }
.angel-stage { position: relative; width: 100%; height: min(52svh, 520px); flex: none; margin-top: max(2svh, 12px); }
.angel-wings { position: absolute; left: 50%; top: 50%; width: min(1150px, 165vw, 125svh); translate: -50% -44%; overflow: visible; }
.angel-wings .feather { fill: url(#featherFill); stroke: rgba(176, 125, 38, 0.55); stroke-width: 1.1; }
.angel-wings .feather.covert { stroke: rgba(176, 125, 38, 0.4); }
.angel-wings .rachis { stroke: rgba(176, 125, 38, 0.45); stroke-width: 1; fill: none; }
.angel-portrait {
  position: absolute; left: 50%; top: 50%; translate: -50% -46%;
  width: clamp(110px, 16vw, 168px); aspect-ratio: 488 / 812;
  border-radius: 50%; padding: 4px;
  background: linear-gradient(135deg, #f6e2a8, #b8862c, #f6e2a8, #a9761f);
  box-shadow: 0 0 40px 10px rgba(255, 236, 190, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.angel-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.angel-halo {
  position: absolute; left: 50%; top: 50%;
  width: clamp(90px, 12vw, 130px); aspect-ratio: 3.6 / 1;
  translate: -50% calc(-1 * clamp(150px, 18vw, 200px));
  border-radius: 50%;
  border: 4px solid #f3d58c;
  box-shadow: 0 0 18px 6px rgba(255, 215, 120, 0.85), inset 0 0 12px 3px rgba(255, 215, 120, 0.7);
}
.angel-copy { position: relative; text-align: center; padding: 0 16px 3rem; max-width: 640px; }
.angel-copy .eyebrow { color: var(--gold-deep); margin-bottom: 0.2rem; }
.angel-title { font-size: clamp(3.4rem, 2.4rem + 5vw, 5.6rem); margin: 0; padding: 0 0.2em; }
.angel-msg { font-style: italic; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); color: var(--ink-soft); margin: 0.2rem 0 1.4rem; }
.angel-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 1px solid var(--gold);
  font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.16em; color: var(--gold-deep);
  background: rgba(255, 253, 246, 0.85); transition: background 0.25s, transform 0.2s;
}
.btn:hover { background: var(--gold-pale); transform: translateY(-1px); }
.btn.gold { background: linear-gradient(100deg, #a9761f, #d9ae55 35%, #f3d58c 55%, #c9973a 80%); color: #fffdf6; text-shadow: 0 1px 2px rgba(110, 72, 10, 0.5); border-color: transparent; }
.angel-close { margin-top: 1.4rem; background: none; border: 0; font-style: italic; font-size: 1.1rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(201, 151, 58, 0.6); }

.dom-feather { position: fixed; z-index: 61; pointer-events: none; width: 34px; height: 90px; left: 0; top: 0; will-change: transform; }

/* ── Loading / motion ───────────────────────────── */
body.is-loading main > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .reveal-words .w { opacity: 1 !important; filter: none !important; }
  .tribute { height: auto; }
}

/* Still sky when WebGL is unavailable */
.no-webgl body { background: radial-gradient(ellipse at 50% -10%, #fff1cf 0%, #fbf6ec 45%, #f6eedc 100%) fixed; }
.no-webgl .champagne { background: radial-gradient(ellipse at 50% 45%, #3a2611 0%, #1a1009 60%, #0e0905 100%); }
.btn[hidden] { display: none; }
.angel-copy .eyebrow, .angel-msg { text-shadow: 0 0 10px #fffaf0, 0 0 22px #fffaf0; }

/* Gallery links */
.gallery-link {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem;
  padding: 0.8rem 1.4rem; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(243, 213, 140, 0.6); color: var(--gold-light);
  font-family: var(--caps); font-size: 0.78rem; letter-spacing: 0.18em;
  background: rgba(255, 220, 150, 0.06);
  transition: background 0.3s, gap 0.3s, box-shadow 0.3s;
}
.gallery-link svg { width: 18px; height: 18px; }
.gallery-link:hover, .gallery-link:focus-visible { background: rgba(255, 220, 150, 0.16); gap: 0.9rem; box-shadow: 0 0 30px -6px rgba(255, 210, 120, 0.6); outline: none; }
.gallery-link.dark { color: var(--gold-deep); border-color: var(--gold); background: rgba(255, 253, 246, 0.7); margin-top: 1.6rem; }
.gallery-link.dark:hover { background: var(--gold-pale); }

/* Directions button under the venue */
.cal-venue span { display: block; }
.dir-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.7rem;
  padding: 0.55rem 1.15rem 0.55rem 0.9rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--gold); background: rgba(255, 253, 246, 0.75);
  font-family: var(--caps); font-style: normal; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--gold-deep);
  transition: background 0.25s, box-shadow 0.25s;
}
.dir-btn svg { width: 17px; height: 17px; }
.dir-btn:hover, .dir-btn:focus-visible { background: var(--gold-pale); box-shadow: 0 0 24px -6px rgba(201, 151, 58, 0.6); outline: none; }