/* ==========================================================================
   WEDDING SITE — STYLES
   Mobile first. Breakpoints step up at 600px, 900px and 1180px.
   Palette lives in :root — change it there and the whole site follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals */
  --white:       #ffffff;
  --ivory:       #fbf8f1;
  --ivory-deep:  #f4efe4;
  --sand:        #e9e2d3;

  /* Sage */
  --sage-50:   #eff2ec;
  --sage-100:  #dde4d6;
  --sage-200:  #c8d3bd;
  --sage-300:  #aebc9f;
  --sage-500:  #8a9a7b;
  --sage-600:  #758566;
  --sage-700:  #5e6d51;
  --sage-900:  #3c4735;

  /* Accents used only inside the flowers */
  --blush:     #e8d3cd;
  --blush-deep:#dcbfb8;
  --gold:      #c2a878;

  /* Text */
  --ink:       #3a3e36;
  --ink-soft:  #6c7265;
  --ink-faint: #9aa093;

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --gutter: 1.375rem;
  --measure: 46rem;
  --radius: 4px;
  --header-h: 3.5rem;

  --shadow-soft: 0 1px 2px rgba(60, 71, 53, .04), 0 12px 32px -18px rgba(60, 71, 53, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
p  { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* Author-level `display` on img/section would otherwise beat the UA rule for
   [hidden] — the hero photo and the finished-countdown message rely on it. */
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}
.container--narrow { max-width: 52rem; }

.section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.75rem, 11vw, 6.5rem);
  isolation: isolate;
}
.section--ivory { background: var(--ivory-deep); }
.section--sage  { background: var(--sage-50); }

/* Hairline separator drawn with the sand tone */
.section + .section { border-top: 1px solid rgba(174, 188, 159, .28); }

/* --------------------------------------------------------------------------
   4. Botanical decoration
   Every .decor is absolutely positioned, non-interactive and sits behind
   the content. Sizes are in vw so they scale with the viewport.
   -------------------------------------------------------------------------- */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--sage-300);
  opacity: .38;
  line-height: 0;
}
.decor svg { width: 100%; height: auto; display: block; }
.decor.bloom { color: var(--blush); opacity: .34; }

/* Hero */
.decor--hero-tl  { top: -3rem;  left: -4.5rem;  width: clamp(11rem, 34vw, 17rem); transform: rotate(18deg); }
.decor--hero-tr  { top: -2rem;  right: -3.5rem; width: clamp(8rem, 26vw, 12rem);  transform: rotate(-24deg) scaleX(-1); }
.decor--hero-bl  { bottom: -2.5rem; left: -2.5rem;  width: clamp(7rem, 24vw, 11rem); }
.decor--hero-bl2 { bottom: 1rem;    left: 3.5rem;   width: clamp(5.5rem, 18vw, 8.5rem); color: var(--sage-200); opacity: .34; }
.decor--hero-br  { bottom: -1.5rem; right: -2.5rem; width: clamp(6rem, 20vw, 9.5rem); }
.decor--hero-br2 { bottom: 3.5rem;  right: 2.5rem;  width: clamp(6rem, 20vw, 9rem); transform: scaleX(-1) rotate(-8deg); }

/* Countdown band */
.decor--band-l { top: 50%; left: -3rem;  width: clamp(6rem, 22vw, 10rem); transform: translateY(-50%) rotate(-6deg); opacity: .3; }
.decor--band-r { top: 50%; right: -3rem; width: clamp(6rem, 22vw, 10rem); transform: translateY(-50%) scaleX(-1) rotate(-6deg); opacity: .3; }

/* Generic section corners */
.decor--sec-tl { top: -3rem;    left: -4rem;    width: clamp(8rem, 26vw, 13rem); transform: rotate(24deg); }
.decor--sec-tr { top: -2.5rem;  right: -3.5rem; width: clamp(8rem, 26vw, 12rem); transform: rotate(-20deg) scaleX(-1); }
.decor--sec-bl { bottom: -3rem; left: -3.5rem;  width: clamp(8rem, 26vw, 12rem); transform: rotate(-12deg); }
.decor--sec-br { bottom: -4rem; right: -4rem;   width: clamp(8rem, 26vw, 13rem); transform: rotate(160deg); }

/* Footer */
.decor--foot-l { top: 1.25rem; left: -2.5rem;  width: clamp(6rem, 22vw, 9rem); color: var(--sage-300); opacity: .3; }
.decor--foot-r { bottom: 1.25rem; right: -2.5rem; width: clamp(6rem, 22vw, 9rem); color: var(--sage-300); opacity: .3; transform: scaleX(-1); }

/* On wide screens the hero sprig reaches into the names — push it out. */
@media (min-width: 900px) {
  .decor--hero-tl { left: -6rem; opacity: .3; }
}

/* Gentle drift — disabled for reduced motion (see §13) */
@media (min-width: 900px) {
  .decor--hero-tl, .decor--sec-tl { animation: sway 14s ease-in-out infinite; }
  .decor--hero-tr, .decor--sec-tr { animation: sway 17s ease-in-out infinite reverse; }
}
@keyframes sway {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 2.2deg; }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 248, 241, .82);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: rgba(174, 188, 159, .38);
  background: rgba(251, 248, 241, .94);
}
.site-header__inner {
  max-width: 68rem;
  margin-inline: auto;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.monogram {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--sage-700);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Padding keeps the edge fade over empty space rather than over the first
     and last link, which otherwise lose a letter on narrow phones. */
  padding-inline: 14px;
  margin-right: -14px;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  flex: 0 0 auto;
  padding-block: .5rem;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--sage-700); border-bottom-color: var(--sage-300); }

@media (min-width: 900px) {
  :root { --header-h: 4.25rem; }
  .site-nav { gap: 2rem; mask-image: none; }
  .site-nav a { font-size: .74rem; }
  .monogram { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   6. Shared type pieces
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-600);
  font-weight: 400;
}
.eyebrow--vi { color: var(--ink-faint); letter-spacing: .16em; margin-top: .1rem; }
.eyebrow:empty, .eyebrow--vi:empty { display: none; }

.ornament {
  width: clamp(9rem, 40vw, 13rem);
  margin: 1.5rem auto;
  color: var(--sage-300);
  line-height: 0;
}
.ornament svg { width: 100%; height: auto; }

.sec-head { text-align: center; margin-bottom: clamp(2.25rem, 6vw, 3.25rem); }
.sec-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 8.5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--sage-900);
  margin-top: .5rem;
}
.sec-head__vi {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  color: var(--sage-600);
  margin-top: .25rem;
}
.sec-head__vi:empty { display: none; }
.sec-head__intro {
  max-width: 34rem;
  margin-inline: auto;
  font-size: .94rem;
  color: var(--ink-soft);
}
.sec-head__intro--vi { font-style: italic; color: var(--ink-faint); font-size: .88rem; }
.sec-head__intro:empty { display: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3rem, 10vw, 5.5rem) clamp(3.5rem, 12vw, 6rem);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--white) 0%, var(--ivory) 55%, var(--ivory-deep) 100%);
  text-align: center;
}
.hero__inner { display: grid; gap: clamp(2.25rem, 8vw, 3rem); }

.hero__text > * + * { margin-top: .35rem; }

.names {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--sage-900);
  line-height: 1.02;
  margin-block: 1rem .75rem;
  display: grid;
  justify-items: center;
  gap: .1rem;
}
.names__one, .names__two { font-size: clamp(3.1rem, 17vw, 6.5rem); }
.names__amp {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  color: var(--sage-500);
  line-height: 1;
  padding-block: .15em;
}

.hero__invite {
  font-size: .95rem;
  color: var(--ink-soft);
  max-width: 26rem;
  margin-inline: auto;
}
.hero__invite--vi { font-style: italic; color: var(--ink-faint); font-size: .88rem; }
.hero__invite:empty { display: none; }

.hero__date {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  letter-spacing: .04em;
  color: var(--sage-700);
}
.hero__date--vi { font-style: italic; font-size: clamp(1.05rem, 4.2vw, 1.35rem); color: var(--sage-600); }
.hero__time { font-size: .86rem; letter-spacing: .06em; color: var(--ink-soft); margin-top: .6rem; }
.hero__time--vi { font-style: italic; color: var(--ink-faint); margin-top: .05rem; }
.hero__date:empty, .hero__time:empty { display: none; }

/* Arch photo frame */
.hero__figure { margin: 0; display: grid; justify-items: center; }

/* The ring lives on a wrapper: .arch clips its own overflow to mask the
   photo, which would also clip a ring drawn inside it. */
.arch-ring {
  position: relative;
  padding: .55rem;
  border: 1px solid var(--sage-200);
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius);
}

.arch {
  position: relative;
  width: min(19rem, 74vw);
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% var(--radius) var(--radius) / 38% 38% var(--radius) var(--radius);
  overflow: hidden;
  background: linear-gradient(165deg, var(--white), var(--sage-50));
  box-shadow: var(--shadow-soft);
}
/* Thin inner keyline, drawn on top of the photo */
.arch::after {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50% 50% 2px 2px / 38% 38% 2px 2px;
  pointer-events: none;
  z-index: 2;
}
.arch__img { width: 100%; height: 100%; object-fit: cover; }

.arch__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .35rem;
  padding: 2.5rem 1.5rem 1.5rem;
  text-align: center;
  color: var(--sage-600);
}
.arch__placeholder-icon { width: 5.5rem; color: var(--sage-300); margin-bottom: .5rem; }
.arch__placeholder-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--sage-700);
}
.arch__placeholder-hint { font-size: .74rem; line-height: 1.6; color: var(--ink-faint); }
.arch__placeholder-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  background: var(--sage-50);
  padding: .1rem .3rem;
  border-radius: 3px;
}

.arch__caption {
  margin-top: 1.5rem;
  display: grid;
  gap: .1rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.arch__caption span:empty { display: none; }
.arch__caption span[lang="vi"] { text-transform: none; letter-spacing: .05em; font-style: italic; }

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    text-align: left;
  }
  .hero { text-align: left; }
  .names { justify-items: start; }
  .hero__invite { margin-inline: 0; }
  .hero .ornament { margin-inline: 0; }
  .arch { width: min(24rem, 38vw); }
  .arch__caption { justify-items: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   8. Countdown
   -------------------------------------------------------------------------- */
.countdown__heading {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  color: var(--sage-900);
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
  display: grid;
  gap: .1rem;
}
.countdown__heading span {
  font-style: italic;
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  color: var(--sage-600);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  max-width: 44rem;
  margin-inline: auto;
}
.cd {
  background: var(--white);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius);
  padding: 1.1rem .5rem 1rem;
  text-align: center;
  display: grid;
  gap: .1rem;
  box-shadow: 0 8px 20px -18px rgba(60, 71, 53, .5);
}
.cd__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--sage-700);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.cd__label {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .5rem;
}
.cd__label--vi {
  margin-top: 0;
  text-transform: none;
  letter-spacing: .05em;
  font-style: italic;
  font-size: .74rem;
  color: var(--ink-faint);
}
.cd__label:empty { display: none; }

.countdown__done {
  text-align: center;
  display: grid;
  gap: .25rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  color: var(--sage-700);
}
.countdown__done span[lang="vi"] { font-style: italic; font-size: .78em; color: var(--sage-600); }

/* Screen-reader-only live region */
.countdown__live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 600px) {
  .countdown { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .cd { padding: 1.5rem .5rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   9. Timeline (daytime + reception)
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 1.5rem;
}
/* The vine running down the left */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .75rem;
  bottom: .75rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sage-200) 8%, var(--sage-200) 92%, transparent);
}

.tl-item {
  position: relative;
  padding: 1.1rem 0 1.1rem .5rem;
}
.tl-item + .tl-item { border-top: 1px solid rgba(174, 188, 159, .28); }

/* Leaf-shaped node on the vine */
.tl-item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 1.55rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1.5px solid var(--sage-500);
  box-shadow: 0 0 0 4px var(--ivory);
}
.section--ivory .tl-item::before { background: var(--ivory-deep); box-shadow: 0 0 0 4px var(--ivory-deep); }

.tl-time {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-600);
  font-weight: 500;
  margin-bottom: .3rem;
}
.tl-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: var(--sage-900);
  line-height: 1.2;
}
.tl-title-vi {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .78em;
  color: var(--sage-600);
  margin-top: .12rem;
}
.tl-loc {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.tl-loc::before {
  content: "";
  width: 14px; height: 9px;
  background: currentColor;
  border-radius: 50%;
  transform: rotate(-30deg);
  opacity: .55;
  flex: 0 0 auto;
}
.tl-desc { margin-top: .5rem; font-size: .92rem; color: var(--ink-soft); }
.tl-desc-vi { margin-top: .1rem; font-size: .86rem; font-style: italic; color: var(--ink-faint); }

@media (min-width: 700px) {
  .timeline { padding-left: 0; }
  .timeline::before { left: 7.5rem; }
  .tl-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0 3rem;
    padding: 1.35rem 0;
  }
  .tl-item::before { left: calc(7.5rem - 5px); top: 1.85rem; }
  .tl-time { text-align: right; margin-top: .5rem; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   10. Menu card
   -------------------------------------------------------------------------- */
.menu-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 2.5rem);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
/* Inset keyline */
.menu-card::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid var(--sage-50);
  border-radius: 2px;
  pointer-events: none;
}
.menu-card__corner {
  position: absolute;
  width: clamp(5rem, 16vw, 7.5rem);
  color: var(--sage-200);
  opacity: .55;
  line-height: 0;
  pointer-events: none;
}
.menu-card__corner svg { width: 100%; height: auto; }
/* Fully inside the card — the card clips its overflow, and a sprig hung off
   the corner reads as a smudge rather than a leaf. */
.menu-card__corner--tl { top: .3rem;    left: .3rem;   transform: rotate(4deg); }
.menu-card__corner--br { bottom: .3rem; right: .3rem;  transform: rotate(184deg); }

.menu-card__body { position: relative; z-index: 1; display: grid; gap: clamp(1.5rem, 4vw, 2rem); }

.course { text-align: center; }
.course + .course { padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--sage-50); }

.course__name {
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage-500);
  margin-bottom: .9rem;
}
.course__name-vi {
  display: block;
  text-transform: none;
  letter-spacing: .08em;
  font-style: italic;
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: .1rem;
}

.dish + .dish { margin-top: 1.15rem; }
.dish__en {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  color: var(--sage-900);
  line-height: 1.25;
}
.dish__vi {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  color: var(--sage-600);
  margin-top: .1rem;
}
.dish__note {
  display: block;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--ink-faint);
  max-width: 28rem;
  margin-inline: auto;
}

.menu-card__note {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--sage-50);
  text-align: center;
  display: grid;
  gap: .2rem;
  font-size: .8rem;
  color: var(--ink-faint);
}
.menu-card__note span[lang="vi"] { font-style: italic; }
.menu-card__note span:empty { display: none; }
.menu-card__note:not(:has(span:not(:empty))) { display: none; }

/* --------------------------------------------------------------------------
   11. Venue card
   -------------------------------------------------------------------------- */
.venue-card {
  background: var(--white);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.venue-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--sage-900);
  line-height: 1.15;
}
.venue-card__address {
  font-style: normal;
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.venue-card__when {
  margin-top: 1rem;
  display: grid;
  gap: .05rem;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage-600);
}
.venue-card__when span[lang="vi"] {
  text-transform: none;
  letter-spacing: .03em;
  font-style: italic;
  color: var(--ink-faint);
}
.venue-card__when span:empty { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.75rem;
  padding: .8rem 1.6rem;
  background: var(--sage-700);
  color: var(--ivory);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--sage-900); transform: translateY(-1px); }
.btn__icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

.venue-card__notes {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sage-50);
  display: grid;
  gap: .9rem;
  text-align: center;
}
.venue-card__notes:empty { display: none; }
.venue-card__notes li { font-size: .88rem; color: var(--ink-soft); }
.venue-card__notes .note-vi {
  display: block;
  font-style: italic;
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: .05rem;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sage-700);
  color: var(--sage-50);
  text-align: center;
  padding-block: clamp(3rem, 10vw, 4.5rem);
}
.site-footer .decor { color: var(--sage-50); opacity: .16; }

.site-footer__names {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.5vw, 2.25rem);
  font-weight: 300;
  line-height: 1.3;
  display: grid;
  gap: .05rem;
}
.site-footer__amp { font-style: italic; font-size: .62em; color: var(--sage-200); }
.site-footer__date {
  margin-top: .85rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage-200);
}
.site-footer__msg { margin-top: 1.5rem; font-size: .92rem; color: var(--sage-100); }
.site-footer__msg--vi { margin-top: .1rem; font-style: italic; font-size: .86rem; color: var(--sage-200); }
.site-footer__msg:empty { display: none; }
.site-footer__tag {
  margin-top: 1.5rem;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--sage-200);
}
.site-footer__tag:empty { display: none; }

/* --------------------------------------------------------------------------
   13. Reveal animation + motion preferences
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible[data-delay="1"] { transition-delay: .08s; }
.js .reveal.is-visible[data-delay="2"] { transition-delay: .16s; }
.js .reveal.is-visible[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .decor { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   14. Print — a clean one-page card
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .decor, .countdown, .countdown__heading { display: none !important; }
  body { background: #fff; }
  .section, .hero { padding-block: 1.25rem; background: #fff !important; }
  .menu-card, .venue-card { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}