/* ==========================================================================
   WEDDING WEBSITE — STYLE
   ========================================================================== */

:root {
  --cream: #fbf5ef;
  --cream-soft: #f5ebe0;
  --cream-deep: #ede0d0;
  --rose: #c08972;
  --rose-dark: #a16851;
  --rose-soft: #e8d3c8;
  --sage: #7c8a6e;
  --sage-dark: #626e57;
  --charcoal: #3b322c;
  --charcoal-soft: #7a6f66;
  --gold: #c6a15b;
  --white: #ffffff;

  --font-serif: "Playfair Display", serif;
  --font-sans: "Be Vietnam Pro", sans-serif;
  --font-script: "Dancing Script", cursive;

  --container: 1120px;
  --radius: 18px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-serif); margin: 0; font-weight: 600; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--rose-soft); color: var(--charcoal); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 110px 0; }

.overline {
  font-family: var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rose-dark);
  margin-bottom: 10px;
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--charcoal); }
.section-sub { margin-top: 16px; color: var(--charcoal-soft); font-size: 1.02rem; }

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  margin: 18px auto;
  width: 220px;
}
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.divider span:last-child { background: linear-gradient(90deg, currentColor, transparent); }
.divider svg { animation: heartBeat 2.6s ease-in-out infinite; }

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.22); }
  24% { transform: scale(1); }
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  border: 1.5px solid var(--rose);
  border-radius: 999px;
  color: var(--rose-dark);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn:hover { background: var(--rose); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(192, 137, 114, 0.35); }
.btn:hover::before { left: 125%; }
.btn--solid { background: var(--rose); color: var(--white); }
.btn--solid:hover { background: var(--rose-dark); }
.btn--small { padding: 10px 22px; font-size: 0.82rem; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
/* variant: settle in with a slight zoom (event cards, etc.) */
.reveal--zoom { transform: translateY(20px) scale(0.96); }

/* section-head divider lines draw outward from the heart when revealed */
.section-head.reveal .divider span {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.25s;
}
.section-head.reveal .divider span:first-child { transform-origin: right center; }
.section-head.reveal .divider span:last-child { transform-origin: left center; }
.section-head.reveal.is-visible .divider span { transform: scaleX(1); }

/* cross-page fade: every page eases in; .page-leave veils it on the way
   out (added by JS right before navigating index <-> album.html) */
body { animation: page-in 0.55s var(--ease) backwards; }
@keyframes page-in { from { opacity: 0; } }
body.page-leave { opacity: 0; pointer-events: none; transition: opacity 0.26s var(--ease); }

/* scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 22px 0;
}
.nav.is-scrolled { background: rgba(251, 245, 239, 0.92); backdrop-filter: blur(8px); box-shadow: 0 2px 18px rgba(59,50,44,0.08); padding: 14px 0; }

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--charcoal);
  letter-spacing: 0.05em;
}
.nav__brand span { color: var(--rose); }

.nav__links { display: flex; gap: 34px; }
.nav__links a {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--rose); transition: width 0.3s var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-active { color: var(--rose-dark); }
.nav__links a.is-active::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 18px; }

.lang-toggle {
  border: 1px solid var(--charcoal);
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--charcoal);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lang-toggle:hover { background: rgba(59, 50, 44, 0.05); }
.lang-toggle span { opacity: 0.4; transition: opacity 0.25s var(--ease); }
.lang-toggle[data-active="vi"] span[data-lang-label="vi"] { opacity: 1; }
.lang-toggle[data-active="en"] span[data-lang-label="en"] { opacity: 1; }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--charcoal); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(59, 50, 44, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav__scrim.is-show { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(192,137,114,0.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(124,138,110,0.16), transparent 45%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
  padding: 140px 20px 100px;
}

.hero__petals {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__decor { position: absolute; width: 160px; height: 160px; color: var(--gold); opacity: 0.55; animation: fadeIn 1.6s 0.2s both; }
.hero__decor--tl { top: 24px; left: 24px; }
.hero__decor--br { bottom: 24px; right: 24px; }
.hero__decor svg { width: 100%; height: 100%; }

.hero__content { position: relative; z-index: 1; width: 100%; max-width: 720px; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes blurIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.hero__overline {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sage-dark);
  font-weight: 600;
  margin-bottom: 28px;
  animation: riseIn 0.8s 0.1s var(--ease-out) both;
}

.hero__photo {
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto 30px;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 14px 44px rgba(59, 50, 44, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  background: var(--white);
  animation: riseIn 0.9s 0.25s var(--ease-out) both;
}
.hero__photo::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1.5px dashed rgba(198, 161, 91, 0.75);
  animation: spinSlow 36s linear infinite;
}
.hero__photo::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid rgba(198, 161, 91, 0.28);
}
.hero__photo svg { width: 42px; height: 42px; opacity: 0.7; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.hero__names {
  position: relative;
  font-size: clamp(2.7rem, 7.5vw, 5rem);
  font-style: italic;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.22;
  white-space: pre-line;
  animation: blurIn 1.1s 0.45s var(--ease-out) both;
}
.hero__names::before {
  content: "&";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -54%) rotate(-8deg);
  z-index: -1;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(8rem, 20vw, 15rem);
  line-height: 1;
  color: var(--rose);
  opacity: 0.24;
  pointer-events: none;
}

.hero .divider { animation: riseIn 0.8s 0.7s var(--ease-out) both; }

.hero__dates {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--rose-dark);
  font-weight: 600;
  margin-top: 6px;
  animation: riseIn 0.8s 0.82s var(--ease-out) both;
}
.hero__places {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--charcoal-soft);
  letter-spacing: 0.04em;
  animation: riseIn 0.8s 0.94s var(--ease-out) both;
}

.hero__scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-soft);
  animation: bob 2.4s ease-in-out infinite, fadeIn 1s 1.3s both;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.countdown {
  position: relative;
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--sage-dark), var(--sage));
  background-size: 26px 26px, auto;
  color: var(--white);
  text-align: center;
  padding: 140px 0 150px;
}
/* soft wave edges blending into the cream sections around it */
.countdown::before,
.countdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(30px, 5vw, 60px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.countdown::before {
  top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V12 C1080,58 360,58 0,12 Z' fill='%23f5ebe0'/%3E%3C/svg%3E");
}
.countdown::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 H1440 V48 C1080,2 360,2 0,48 Z' fill='%23fbf5ef'/%3E%3C/svg%3E");
}

/* Step indicator: JS sets grid-template-columns to 2*N-1 (dot/line/dot/.../dot)
   so it always fits however many events WEDDING_DATA.events has. */
.countdown__steps {
  display: grid;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  row-gap: 10px;
  margin: 0 auto 30px;
}
/* Dots and labels are buttons: tapping one switches the countdown to that
   event instead of always following the next upcoming one. */
.countdown__step-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  justify-self: center;
  cursor: pointer;
  position: relative;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* invisible halo so the 13px dot has a comfortable ~40px tap target */
.countdown__step-dot::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
.countdown__step-dot.is-done { background: var(--white); border-color: var(--white); }
.countdown__step-dot.is-active {
  background: var(--white);
  border-color: var(--white);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.22);
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22); }
  50% { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.06); }
}
.countdown__step-line { width: 56px; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px; transition: background 0.3s var(--ease); }
.countdown__step-line.is-done { background: var(--white); }
.countdown__step-label {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7; justify-self: center; white-space: nowrap;
  background: none; border: none; color: inherit;
  /* generous padding = bigger tap target; negative margin keeps layout */
  padding: 10px 12px; margin: -10px -6px;
  font-family: inherit; cursor: pointer;
  transition: opacity 0.3s var(--ease);
}
.countdown__step-label:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.countdown__step-label.is-active { opacity: 1; font-weight: 700; }

.countdown__label { font-size: 1.15rem; font-weight: 400; letter-spacing: 0.03em; }
.countdown__label strong { font-family: var(--font-serif); font-style: italic; font-weight: 600; }

.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 500px; margin: 30px auto 0; }
.countdown__box {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  padding: 22px 10px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 30px rgba(0, 0, 0, 0.08);
}
.countdown__num { display: block; font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.countdown__num.is-tick { animation: numTick 0.5s var(--ease-out); }
@keyframes numTick {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
.countdown__unit { display: block; margin-top: 10px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

.countdown__done h3 { color: var(--white); font-size: 1.7rem; font-style: italic; }
.countdown__done p { margin-top: 12px; max-width: 480px; margin-left: auto; margin-right: auto; opacity: 0.9; }
.countdown__done .btn { margin-top: 26px; border-color: var(--white); color: var(--white); }
.countdown__done .btn:hover { background: var(--white); color: var(--sage-dark); }

/* ==========================================================================
   STORY TIMELINE
   ========================================================================== */
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 22px;
  width: 1px; background: var(--cream-deep);
}
/* gold line that "draws" downward as the visitor scrolls (see effects.js) */
.timeline::after {
  content: ""; position: absolute; top: 0; left: 22px;
  width: 1px; height: calc(var(--tl-progress, 0) * 100%);
  background: linear-gradient(180deg, var(--gold), var(--rose));
}

.timeline__item {
  position: relative;
  padding: 0 0 56px 64px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 15px; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--rose);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  z-index: 1;
}
.timeline__item.is-visible::before {
  background: var(--rose);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5.5px rgba(198, 161, 91, 0.6);
  animation: dotPing 1s var(--ease-out) 0.2s both;
}
/* gold ripple that radiates out once, each time the dot fills */
@keyframes dotPing {
  0% { box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px rgba(198, 161, 91, 0.75); }
  55% { box-shadow: 0 0 0 4px var(--cream), 0 0 0 18px rgba(198, 161, 91, 0); }
  100% { box-shadow: 0 0 0 4px var(--cream), 0 0 0 5.5px rgba(198, 161, 91, 0.6); }
}

.timeline__date { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-dark); font-weight: 600; }
.timeline__title { margin-top: 8px; font-size: 1.3rem; font-style: italic; }
.timeline__text { margin-top: 10px; color: var(--charcoal-soft); }
.timeline__photo { margin-top: 16px; border-radius: var(--radius); overflow: hidden; max-width: 320px; box-shadow: 0 12px 34px rgba(59, 50, 44, 0.1); }
.timeline__photo img { width: 100%; transition: transform 0.6s var(--ease); }
.timeline__photo:hover img { transform: scale(1.05); }

@media (min-width: 760px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .timeline::after { left: 50%; transform: translateX(-50%); }
  .timeline__item { width: 50%; padding: 0 0 64px 0; }
  .timeline__item:nth-child(odd) { left: 0; padding-right: 56px; text-align: right; }
  .timeline__item:nth-child(even) { left: 50%; padding-left: 56px; }
  .timeline__item::before { left: auto; }
  .timeline__item:nth-child(odd)::before { right: -8px; }
  .timeline__item:nth-child(even)::before { left: -8px; }
  .timeline__item:nth-child(odd) .timeline__photo { margin-left: auto; }

  /* slide in from each side of the center line */
  .timeline__item.reveal { transform: translateX(-64px); transition-duration: 1s, 1s; }
  .timeline__item.reveal:nth-child(even) { transform: translateX(64px); }
  .timeline__item.reveal.is-visible { transform: none; }
}

/* ==========================================================================
   EVENTS
   ========================================================================== */
.event-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }

.event-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 10px 40px rgba(59,50,44,0.07);
}
.event-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* once revealed, retarget the transition so hover lift stays snappy */
.event-card.is-visible {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(59, 50, 44, 0.12);
  border-color: rgba(198, 161, 91, 0.35);
}

.event-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.event-card__badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--rose-soft); color: var(--rose-dark);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.event-card__date { font-family: var(--font-serif); font-size: 1.5rem; font-style: italic; color: var(--charcoal); }
.event-card__title { margin-top: 14px; font-size: 1.5rem; }
.event-card__subtitle { color: var(--charcoal-soft); margin-top: 4px; font-size: 0.92rem; }

.event-row { display: flex; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cream-soft); }
.event-row__body { flex: 1; min-width: 0; }
.event-row__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream-soft); color: var(--rose-dark);
  display: flex; align-items: center; justify-content: center;
}
.event-row__icon svg { width: 18px; height: 18px; }
.event-row__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dark); }
.event-row__name { font-weight: 600; margin-top: 4px; }
.event-row__addr { color: var(--charcoal-soft); font-size: 0.92rem; margin-top: 3px; }
.event-row__time { color: var(--charcoal-soft); font-size: 0.88rem; margin-top: 6px; }

.event-map { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--cream-deep); }
.event-map iframe { width: 100%; height: 190px; border: 0; display: block; }
.event-map--placeholder {
  height: 120px; display: flex; align-items: center; justify-content: center;
  background: var(--cream-soft); color: var(--charcoal-soft); font-size: 0.85rem;
  text-align: center; padding: 12px; border-style: dashed;
}

.event-row__directions { margin-top: 12px; display: inline-block; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery--day { background: var(--cream-soft); }

/* Uniform tiles: every photo crops to the same 3:4 frame so the grid reads
   as one quiet block instead of a ragged photo wall. Full image in lightbox. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.photo-grid__item {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--cream-deep);
}
.photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.photo-grid__item:hover img { transform: scale(1.04); }
.photo-grid__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(59,50,44,0.35), transparent 40%);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.photo-grid__item:hover::after { opacity: 1; }

@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 560px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .photo-grid__item { border-radius: 8px; } }

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 28px;
  border: 1.5px dashed var(--cream-deep);
  border-radius: var(--radius);
  color: var(--charcoal-soft);
  background: rgba(255, 255, 255, 0.4);
}
.gallery-empty svg { width: 40px; height: 40px; color: var(--gold); margin-bottom: 18px; }
.gallery-empty h3 { font-size: 1.25rem; font-style: italic; color: var(--charcoal); margin-bottom: 10px; }

/* Album catalog: one stacked-cover card per category. Photos stay tucked
   away until a card is opened, so the section reads as a tidy shelf of
   albums rather than a wall of images. */
.filter-pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.filter-pills:empty { display: none; }

.album-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.album-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 6px 2px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-dark);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.album-back:hover { color: var(--rose); transform: translateX(-3px); }
.album-bar__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--charcoal);
}
.album-bar__count {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.82rem;
  color: var(--charcoal-soft);
  letter-spacing: 0.04em;
}

/* Coverflow ring carousel: cards are positioned purely by JS transforms
   (see setupCarousel in gallery.js), not native scrolling, so the row
   wraps infinitely in either direction. perspective gives the rotateY
   tilt real depth instead of a flat skew; overflow:hidden clips the ring
   at the section edges. Height is set inline by JS (absolute children
   don't contribute to auto height). */
.album-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  perspective: 1400px;
  margin-top: 12px;
  --album-gap: 30px;
}
.album-carousel.is-dragging { cursor: grabbing; user-select: none; }
.album-carousel .album-card {
  position: absolute;
  /* keep in sync with VPAD_TOP in gallery.js */
  top: 32px;
  left: 50%;
}
.album-carousel .album-card img { pointer-events: none; }
.album-card {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 216px;
  text-align: center;
}
.album-card:not(.is-centered) .album-card__name { color: var(--charcoal-soft); }
.album-card__stack {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  /* room for the tilted photos underneath to peek out */
  margin: 10px 12px 14px;
}
/* every layer is a real photo in a thick white "print" frame */
.album-card__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 7px solid var(--white);
  box-shadow: 0 8px 20px rgba(59, 50, 44, 0.22);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.album-card__under--2 { transform: rotate(6deg) translate(9px, 6px); }
.album-card__under--1 { transform: rotate(-5deg) translate(-9px, 3px); }
.album-card__cover { box-shadow: 0 16px 32px rgba(59, 50, 44, 0.28); }
/* hover: the stack fans out and the cover lifts */
.album-card:hover .album-card__cover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(59, 50, 44, 0.32);
}
.album-card:hover .album-card__under--1 { transform: rotate(-8.5deg) translate(-15px, 6px); }
.album-card:hover .album-card__under--2 { transform: rotate(9.5deg) translate(15px, 9px); }
/* Empty album: blank paper sheets + a camera placeholder, no interaction */
.album-card--empty { cursor: default; }
.album-card--empty .album-card__stack::before,
.album-card--empty .album-card__stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--cream-deep);
}
.album-card--empty .album-card__stack::before { transform: rotate(-4deg) translate(-4px, 2px); }
.album-card--empty .album-card__stack::after { transform: rotate(3deg) translate(5px, 4px); background: var(--cream-soft); }
.album-card__blank {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 7px solid var(--white);
  border-radius: 8px;
  background: var(--cream-soft);
  box-shadow: 0 10px 24px rgba(59, 50, 44, 0.13);
  color: var(--gold);
}
.album-card__blank svg { width: 34px; height: 34px; opacity: 0.75; }
.album-card--empty .album-card__name { color: var(--charcoal-soft); }
.album-card--empty .album-card__count { color: var(--rose-dark); opacity: 0.75; }

.album-card__name {
  display: block;
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--charcoal);
}
.album-card__count {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

@media (max-width: 560px) {
  .album-carousel { --album-gap: 20px; }
  .album-card { width: 180px; }
  .album-card__name { font-size: 1.05rem; }
}

.gallery-loadmore { text-align: center; margin-top: 36px; }
.gallery-bottombar { text-align: center; margin-top: 26px; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 16, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px;
  animation: fadeIn 0.3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 88vw; max-height: 76vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox__img.is-anim { animation: lbImg 0.4s var(--ease-out); }
@keyframes lbImg {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
/* stepping through photos slides the incoming one in from its side */
.lightbox__img.anim-next { animation: lbNext 0.38s var(--ease-out); }
.lightbox__img.anim-prev { animation: lbPrev 0.38s var(--ease-out); }
@keyframes lbNext { from { opacity: 0; transform: translateX(52px) scale(0.98); } }
@keyframes lbPrev { from { opacity: 0; transform: translateX(-52px) scale(0.98); } }
.lightbox__caption { color: rgba(255,255,255,0.75); margin-top: 18px; font-size: 0.9rem; }
.lightbox__count { color: rgba(255, 255, 255, 0.5); margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.14em; }
.lightbox__count:empty { display: none; }

.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  color: var(--white); border-radius: 50%; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.2); transform: scale(1.06); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  color: var(--rose-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(59, 50, 44, 0.14);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.to-top.is-show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--rose); color: var(--white); border-color: var(--rose); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { text-align: center; padding: 72px 0 50px; color: var(--charcoal-soft); }
.footer__names { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--charcoal); margin-bottom: 4px; }
.footer__names span { color: var(--rose); }
.footer__made { margin-top: 6px; font-size: 0.82rem; }

/* ==========================================================================
   RESPONSIVE — NAV
   ========================================================================== */
@media (max-width: 860px) {
  .nav__links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: var(--cream); flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 40px; gap: 26px; box-shadow: -8px 0 30px rgba(0,0,0,0.08);
    transform: translateX(100%); transition: transform 0.45s var(--ease); z-index: 99;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { font-size: 1.05rem; opacity: 0; transform: translateX(18px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.3s var(--ease); }
  .nav__links.is-open a { opacity: 1; transform: none; }
  .nav__links.is-open a:nth-child(1) { transition-delay: 0.08s; }
  .nav__links.is-open a:nth-child(2) { transition-delay: 0.13s; }
  .nav__links.is-open a:nth-child(3) { transition-delay: 0.18s; }
  .nav__links.is-open a:nth-child(4) { transition-delay: 0.23s; }
  .nav__links.is-open a:nth-child(5) { transition-delay: 0.28s; }
  .nav__burger { display: flex; z-index: 101; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 600px) {
  section { padding: 76px 0; }
  .event-card { padding: 26px; }
  .countdown { padding: 108px 0 116px; }
  .countdown__grid { gap: 10px; }
  .countdown__box { min-width: 0; padding: 16px 8px; }
  .countdown__num { font-size: 1.9rem; }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox { padding: 16px; }
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

@media (max-width: 430px) {
  .countdown__grid { gap: 8px; }
  .countdown__box { padding: 14px 6px; border-radius: 12px; }
  .countdown__num { font-size: 1.55rem; }
  .countdown__unit { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__petals { display: none; }
}

/* ==========================================================================
   ALBUM PAGE (album.html) — full-page view of a single album
   ========================================================================== */
.album-page__bar {
  /* fixed, not sticky: the back button must stay in reach while the
     visitor scrolls through a long album */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: rgba(251, 245, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cream-deep);
}
.album-page__brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--charcoal);
}
.album-page__brand span { color: var(--rose); }
.album-page__main { padding: 116px 0 96px; } /* clears the fixed bar */
.album-page .gallery-bottombar { margin-top: 40px; }

/* On the album page the back control is a solid pill, easy to spot and
   tap — unlike the quiet inline link style it inherits from .album-back. */
.album-page .album-back {
  background: var(--rose);
  color: var(--white);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.8rem;
  box-shadow: 0 6px 16px rgba(192, 137, 114, 0.35);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.album-page .album-back:hover {
  background: var(--rose-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(161, 104, 81, 0.4);
}
.album-page .album-back { white-space: nowrap; }

/* narrow screens: the bar only has room for the two buttons */
@media (max-width: 560px) {
  .album-page__bar { padding: 10px 14px; }
  .album-page__brand { display: none; }
  .album-page .album-back { padding: 9px 14px; font-size: 0.72rem; }
  .album-page__main { padding-top: 96px; }
}

/* ==========================================================================
   GUESTBOOK — well wishes from guests
   ========================================================================== */
.guestbook__form {
  max-width: 640px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guestbook__input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--cream-deep);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.guestbook__input:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(192, 137, 114, 0.14);
}
.guestbook__input::placeholder { color: var(--charcoal-soft); opacity: 0.7; }
.guestbook__textarea { resize: vertical; min-height: 110px; }

.guestbook__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.guestbook__thanks { color: var(--sage-dark); font-size: 0.92rem; }

.guestbook__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}
.guestbook__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 28px;
  border: 1.5px dashed var(--cream-deep);
  border-radius: var(--radius);
  color: var(--charcoal-soft);
}
.guestbook__entry {
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 22px -14px rgba(59, 50, 44, 0.18);
}
/* a just-submitted wish pops into the list */
.guestbook__entry.is-new { animation: entryPop 0.55s var(--ease-out); }
@keyframes entryPop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
}
.guestbook__entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.guestbook__entry-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--rose-dark);
}
.guestbook__entry-date { font-size: 0.75rem; color: var(--charcoal-soft); white-space: nowrap; }
.guestbook__entry-msg { font-size: 0.93rem; white-space: pre-line; overflow-wrap: anywhere; }

/* ==========================================================================
   OPENING INVITE — envelope splash screen
   ========================================================================== */
body.invite-lock { overflow: hidden; }

.invite {
  position: fixed;
  inset: 0;
  z-index: 300; /* above nav (120) and lightbox (200) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 255, 255, 0.8), transparent 60%),
    var(--cream-soft);
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
/* display:flex above would override the hidden attribute's display:none
   (same trick as .lightbox[hidden]); without this the envelope stays
   visible but dead after F5/back once the session flag is set. */
.invite[hidden] { display: none; }
.invite.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* let the seal-break + flap-open play before the page is revealed */
  transition-delay: 1s;
}

/* The envelope front: dusty blue paper with silver-foil lettering.
   Text sits in the lower half; the flap + wax seal own the upper half. */
.invite__card {
  --seal: clamp(60px, 17vw, 86px); /* wax seal diameter, shared below */
  position: relative;
  width: min(680px, 94vw);
  aspect-ratio: 8 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: none;
  border-radius: 10px;
  padding: 3% 7% 5%;
  color: #eaf0f5;
  background: linear-gradient(158deg, #83a1b7 0%, #6d8ca4 48%, #5e7c94 100%);
  box-shadow:
    0 34px 64px -22px rgba(59, 50, 44, 0.42),
    0 10px 24px -12px rgba(59, 50, 44, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  perspective: 1100px; /* gives the flap flip its 3D depth */
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.invite__card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 42px 74px -22px rgba(59, 50, 44, 0.48),
    0 14px 28px -12px rgba(59, 50, 44, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.invite.is-open .invite__card {
  transform: translateY(-16px) scale(1.04);
  transition-delay: 0.85s;
}

/* Triangular flap, hinged on the card's top edge */
.invite__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42%;
  transform-origin: 50% 0;
  transition: transform 0.85s var(--ease) 0.32s;
  filter: drop-shadow(0 6px 9px rgba(45, 60, 75, 0.28));
  z-index: 2;
}
.invite__flap-face {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(196deg, #91adc2 0%, #7191a9 55%, #62809a 100%);
}
.invite.is-open .invite__flap { transform: rotateX(180deg); }

/* Wax seal on the flap tip, carrying the monogram */
.invite__seal {
  position: absolute;
  top: calc(42% - var(--seal) / 2);
  left: 50%;
  width: var(--seal);
  height: var(--seal);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* uneven blob, like hand-poured wax */
  border-radius: 46% 54% 51% 49% / 53% 47% 55% 45%;
  background: radial-gradient(circle at 34% 30%, #c08972, #9c6049 55%, #7d4936);
  box-shadow:
    0 6px 14px rgba(70, 40, 30, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -5px 9px rgba(70, 35, 25, 0.45);
  font-family: var(--font-script);
  font-size: clamp(21px, 6vw, 29px);
  color: #f6e9e2;
  text-shadow: 0 1px 2px rgba(70, 35, 25, 0.5);
  z-index: 3;
}
.invite__seal::before {
  /* embossed inner ring */
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  border: 1px solid rgba(255, 240, 230, 0.35);
}
/* idle: the wax seal "breathes" gently to invite a tap; the more specific
   is-open rule below replaces it with the break animation. */
.invite__seal { animation: sealIdle 3.2s ease-in-out infinite; }
@keyframes sealIdle {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}
.invite.is-open .invite__seal {
  animation: invite-seal-break 0.55s var(--ease) forwards;
}
@keyframes invite-seal-break {
  0% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
  35% { transform: translateX(-50%) scale(1.14) rotate(-7deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(84px) rotate(-26deg) scale(0.92); opacity: 0; }
}

.invite__names {
  font-family: var(--font-script);
  /* sized so the full names stay on one line inside the card */
  font-size: clamp(1.4rem, 5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(38, 56, 72, 0.35);
  /* Anchor the text block right below the wax seal so they can never
     overlap at any viewport/zoom. Top margin percentages resolve against
     the card WIDTH: flap tip = 42% of height = 42% * 5/8 = 26.25% of
     width, minus the 3% top padding = 23.25%. */
  margin-top: calc(23.25% + var(--seal) / 2 + clamp(12px, 2.4vw, 24px));
}

.invite__date {
  margin-top: 6px;
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* recenter letter-spaced text */
}

.invite__to {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 74%;
  /* pushed to the card bottom; padding keeps a floor when space is tight */
  margin-top: auto;
  padding-top: 12px;
}
.invite__to-label {
  font-size: clamp(0.68rem, 2.2vw, 0.8rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 3px;
}
/* Dotted "write the guest's name here" leader; filled by ?to= links */
.invite__to-line {
  flex: 1;
  min-height: 1.4em;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.65);
  padding: 0 8px 1px;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  line-height: 1.15;
}

.invite__hint {
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  animation: invite-pulse 2.4s ease-in-out infinite;
}
@keyframes invite-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}