/* =========================================================================
   James & Elsie · Fifty Years  —  golden-hour garden invitation
   ========================================================================= */

:root {
  /* paper & ink */
  --paper:      #fbf4e8;
  --paper-warm: #f7ecd9;
  --ink:        #3a2c24;
  --ink-soft:   #715f53;
  --line:       #e6d4bd;

  /* florals */
  --coral:      #df775c;
  --coral-deep: #c8593e;
  --rose:       #e08a96;
  --rose-deep:  #cf6b7c;
  --orange:     #e08a3c;
  --sage:       #93a878;
  --sage-deep:  #5f7a52;
  --gold:       #c9a227;
  --gold-soft:  #d9b85f;
  --gold-bloom: #e0c06b;

  /* roles */
  --terracotta: #a8503a;     /* primary button: white text passes AA */
  --terracotta-dark: #8f4230;
  --gold-deep:  #a9842c;
  --orange-deep:#c2722f;
  --leaf-deep:  #6e8a3f;

  /* soft full-bleed section washes (light enough to keep dark text readable) */
  --wash-blush:  #f9e7e0;
  --wash-sage:   #ebf0e0;
  --wash-peach:  #fbe6d1;
  --wash-gold:   #f8eccf;
  --wash-rose:   #f8e4e8;
  --wash-footer: #f1ddce;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "EB Garamond", Georgia, serif;

  --shadow:  0 18px 50px -28px rgba(86, 47, 28, .5);
  --radius:  18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(60% 40% at 8% 4%,  rgba(224,138,150,.16), transparent 60%),
    radial-gradient(55% 40% at 96% 2%, rgba(224,138,60,.14),  transparent 60%),
    radial-gradient(60% 45% at 50% 100%, rgba(147,168,120,.16), transparent 65%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

::selection { background: var(--rose); color: #fff; }

/* ---------------------------------------------------------------- layout */
.sheet {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.1rem, 4vw, 2.6rem);
}

.section {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: clamp(2.8rem, 7vw, 4.6rem) 0;
}
/* full-bleed colored band behind each section (escapes the centered column) */
.section::before,
.hero::before,
.footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--wash, transparent);
}

/* the wash + accent assigned to each section, cycling through the palette */
.countdown-wrap { --wash: var(--wash-blush); }
.details        { --wash: var(--wash-sage); }
.menu           { --wash: var(--wash-peach); }
.setting        { --wash: var(--wash-gold); }
.parking        { --wash: var(--wash-rose); }
.rsvp           { --wash: var(--wash-blush); }
.guestbook      { --wash: var(--wash-sage); }

.details   .section-title { color: var(--sage-deep); }
.menu      .section-title { color: var(--coral-deep); }
.setting   .section-title { color: #8a6516; }   /* deeper than wash for contrast */
.parking   .section-title { color: #b14a5c; }
.rsvp      .section-title { color: var(--terracotta-dark); }
.guestbook .section-title { color: #a85e1f; }

.overline {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: .72rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: .005em;
  margin: 0 0 .35rem;
  color: var(--ink);
}

/* floral divider */
.flourish { display: block; width: clamp(140px, 32vw, 200px); height: auto; margin: .4rem auto 1.6rem; }
.flourish.sm { width: clamp(120px, 26vw, 165px); margin-bottom: 1.9rem; }

.muted { color: var(--ink-soft); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: clamp(3.2rem, 8vw, 5rem) clamp(1rem, 5vw, 3rem) clamp(2.4rem, 6vw, 3.4rem);
}
/* warm golden-hour glow behind the hero */
.hero::before {
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(224, 138, 60, .20), transparent 60%),
    radial-gradient(85% 70% at 8% 6%, rgba(224, 138, 150, .20), transparent 55%),
    radial-gradient(80% 70% at 94% 2%, rgba(201, 162, 39, .17), transparent 55%);
}

.corner {
  position: absolute;
  width: clamp(96px, 21vw, 188px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: .96;
}
.corner.tl { top: -.3rem; left: -.6rem; }
.corner.tr { top: -.3rem; right: -.6rem; transform: scaleX(-1); }
.corner.bl { bottom: -.3rem; left: -.6rem; transform: scaleY(-1); }
.corner.br { bottom: -.3rem; right: -.6rem; transform: scale(-1, -1); }

.hero > :not(.corner) { position: relative; z-index: 1; }

.kicker {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--coral-deep);
  letter-spacing: .02em;
  margin: 0 0 1.2rem;
}

.years {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .34em;
  color: var(--gold);
  margin: 0 0 .4rem;
  text-indent: .34em;
}
.years i { font-style: normal; color: var(--gold-soft); transform: translateY(-.12em); }

.names {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(3.1rem, 13vw, 6rem);
  line-height: .98;
  letter-spacing: -.01em;
  margin: .2rem 0 .5rem;
  color: var(--ink);
}

.tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  color: var(--sage-deep);
  margin: 0 0 2rem;
}

/* framed portrait */
.portrait { position: relative; width: clamp(220px, 56vw, 330px); margin: 0 auto 2rem; }
.portrait-mat {
  background: #fff;
  padding: clamp(.6rem, 2.4vw, 1rem);
  border-radius: 6px;
  box-shadow: var(--shadow);
  transform: rotate(-1.4deg);
  border: 1px solid #f0e7d6;
}
.portrait-mat img { border-radius: 3px; width: 100%; height: auto; }
.portrait .seal {
  position: absolute;
  width: clamp(72px, 18vw, 104px);
  height: auto;
  right: clamp(-14px, -3vw, -26px);
  bottom: clamp(-16px, -3.5vw, -28px);
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 8px 22px -12px rgba(120,80,20,.5);
  transform: rotate(6deg);
}
.seal-50  { font-family: var(--display); font-weight: 600; font-size: 30px; fill: var(--gold); }
.seal-yrs { font-family: var(--body); font-size: 11px; letter-spacing: .28em; fill: var(--gold); text-indent:.28em;}

.invite-line {
  max-width: 30ch;
  margin: 0 auto 2rem;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.cta-note { font-size: .98rem; color: var(--ink-soft); }
.cta-note strong { color: var(--coral-deep); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .92em 2.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-primary {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(168,80,58,.9);
}
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(168,80,58,.95); }
.btn-ghost {
  background: transparent;
  color: var(--terracotta-dark);
  border-color: var(--terracotta);
}
.btn-ghost:hover { background: rgba(168,80,58,.07); transform: translateY(-2px); }
.btn-block { width: 100%; margin-top: .5rem; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- verse */
.verse-band { --wash: var(--wash-gold); }
.verse {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 4.8vw, 2.15rem); line-height: 1.38;
  color: var(--ink); max-width: 24ch; margin: 0 auto 1rem;
}
.verse-ref {
  display: block; font-family: var(--display); font-style: normal;
  letter-spacing: .2em; text-transform: uppercase; font-size: .8rem;
  color: var(--gold-deep);
}

/* ---------------------------------------------------------------- countdown */
.countdown {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(.4rem, 2.2vw, 1.1rem);
  margin: .4rem 0 1.5rem;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(54px, 16vw, 92px); }
.cd-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1;
  color: var(--coral-deep);
  font-variant-numeric: tabular-nums;
}
.cd-lab {
  margin-top: .5rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .66rem;
  color: var(--ink-soft);
}
.cd-sep {
  font-family: var(--display);
  font-size: clamp(1.8rem, 7vw, 3rem);
  color: var(--gold-soft);
  line-height: 1.1;
}
.deadline-line { max-width: 38ch; margin: 0 auto; color: var(--ink-soft); font-style: italic; }
.countdown.closed .cd-sep { display: none; }

/* ---------------------------------------------------------------- details */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 4vw, 2rem);
  margin-top: 1rem;
  text-align: center;
}
.detail {
  padding: 1.5rem 1rem;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-top: 3px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -24px rgba(86,47,28,.6);
}
.detail:nth-child(1) { border-top-color: var(--coral); }
.detail:nth-child(2) { border-top-color: var(--sage); }
.detail:nth-child(3) { border-top-color: var(--orange); }
.detail:nth-child(4) { border-top-color: var(--rose); }
.detail-ico { font-size: 1.4rem; }
.detail:nth-child(1) .detail-ico { color: var(--coral); }
.detail:nth-child(2) .detail-ico { color: var(--sage-deep); }
.detail:nth-child(3) .detail-ico { color: var(--orange); }
.detail:nth-child(4) .detail-ico { color: var(--rose-deep); }
.detail h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  margin: .5rem 0 .4rem;
  color: var(--sage-deep);
}
.detail p { margin: 0; }
.maplink { display: inline-block; margin-top: .6rem; color: var(--terracotta-dark); font-style: italic; }

.notes-row { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.gift-note {
  max-width: 36ch; margin: 0;
  font-family: var(--display); font-style: italic; font-size: 1.3rem;
  color: var(--ink);
}
.alcohol-note { margin: 0; }
.alcohol-note span {
  display: inline-block;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  background: rgba(201,162,39,.06);
  border-radius: 999px;
  padding: .35em 1.3em;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}

/* ---------------------------------------------------------------- menu */
.menu-intro { max-width: 40ch; margin: 0 auto 2rem; color: var(--ink-soft); font-style: italic; }
.menu-list { list-style: none; padding: 0; margin: 0 auto; max-width: 480px; text-align: left; }
.menu-list li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px dotted var(--line);
}
.menu-list .dish { font-family: var(--display); font-size: 1.32rem; color: var(--ink); white-space: nowrap; }
.menu-list .dot { flex: 1; border-bottom: 1px dotted var(--gold-soft); transform: translateY(-.25em); }
.menu-list .tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  white-space: nowrap; padding: .28em .85em; border-radius: 999px;
  color: var(--sage-deep); background: rgba(147,168,120,.18);
}
.tag.t-fav   { color: var(--gold-deep);  background: rgba(201,162,39,.18); }
.tag.t-warm  { color: var(--coral-deep); background: rgba(200,89,62,.14); }
.tag.t-vegan { color: var(--sage-deep);  background: rgba(110,138,63,.16); }
.tag.t-fresh { color: var(--leaf-deep);  background: rgba(110,138,63,.16); }
.tag.t-sweet { color: var(--rose-deep);  background: rgba(207,107,124,.16); }

/* ---------------------------------------------------------------- the setting */
.setting-frame {
  margin: 1rem auto 0;
  max-width: 600px;
  background: #fff;
  padding: clamp(.6rem, 2.4vw, 1rem);
  border-radius: 8px;
  border: 1px solid #f0e7d6;
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}
.setting-frame img {
  width: 100%; height: auto;
  border-radius: 4px;
  /* warm the golden-hour light to sit inside the palette */
  filter: saturate(1.05) contrast(1.02) brightness(1.01);
}
.setting-frame figcaption {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin-top: .9rem;
}
@media (prefers-reduced-motion: reduce) { .setting-frame { transform: none; } }

/* ---------------------------------------------------------------- parking & map */
.map-frame {
  margin: 0 auto 1.9rem;
  max-width: 560px;
  background: #fff;
  padding: clamp(.5rem, 2vw, .8rem);
  border-radius: 14px;
  border: 1px solid #f0e7d6;
  box-shadow: var(--shadow);
  transform: rotate(-.8deg);
}
.map-embed-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  background: var(--paper-warm);
}
.map-embed-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* soften the map to sit inside the warm palette */
  filter: saturate(.9) sepia(.06);
}
.map-cap {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  gap: .35rem;
  margin: .7rem 0 .2rem;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--ink);
}
.map-cap .muted { font-family: var(--body); font-size: .95rem; }
.map-pin { font-size: 1rem; }

.parking-note { max-width: 44ch; margin: 0 auto 1.8rem; }

@media (prefers-reduced-motion: reduce) { .map-frame { transform: none; } }

/* ---------------------------------------------------------------- forms */
.form { max-width: 480px; margin: 0 auto; text-align: left; }
.field { margin-bottom: 1.4rem; }
.field > label,
.field legend {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .5rem;
}
.field .muted { font-family: var(--body); font-size: .9rem; }

input[type=text], input[type=email], input[type=tel], input[type=number], textarea, input[type=file] {
  width: 100%;
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8em .9em;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(223,119,92,.16);
}
input[type=file] { padding: .65em .7em; background: rgba(255,255,255,.5); }

/* attendance choice cards */
.attend { border: none; margin: 0 0 1.4rem; padding: 0; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.choice {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .95em .6em;
  cursor: pointer;
  background: rgba(255,255,255,.5);
  font-family: var(--display);
  font-size: 1.05rem;
  transition: border-color .2s, background .2s, color .2s;
}
.choice input { accent-color: var(--terracotta); width: 1.1em; height: 1.1em; }
.choice:has(input:checked) { border-color: var(--terracotta); background: rgba(168,80,58,.08); color: var(--terracotta-dark); }
.choice:focus-within { box-shadow: 0 0 0 4px rgba(223,119,92,.16); }

.check { display: flex; align-items: flex-start; gap: .55rem; margin-top: .7rem; font-family: var(--body); font-size: .96rem; color: var(--ink-soft); cursor: pointer; }
.check input { margin-top: .25em; accent-color: var(--terracotta); width: 1.05em; height: 1.05em; }

.party-field.hide { display: none; }

.turnstile { margin: 0 0 1rem; min-height: 0; }
.turnstile:not(:empty) { margin-bottom: 1.4rem; }

.form-msg { margin: 1rem 0 0; text-align: center; min-height: 1.4em; }
.form-msg.error { color: var(--coral-deep); }
.form-msg.ok { color: var(--sage-deep); }

.form-success { text-align: center; }
.form-success h3 { font-family: var(--display); font-size: 2.2rem; color: var(--coral-deep); margin: 0 0 .5rem; }
.form-success p { color: var(--ink-soft); max-width: 34ch; margin: 0 auto; }

/* ---------------------------------------------------------------- guestbook */
.gb-intro { max-width: 42ch; margin: 0 auto 2rem; color: var(--ink-soft); font-style: italic; }
.gb-form { margin-bottom: 2.6rem; }

/* ---- guestbook recorder ---- */
.rec-label { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink); margin-bottom: .5rem; }
.rec-choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.rec-choice {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: 1rem; color: var(--terracotta-dark);
  background: rgba(255,255,255,.7); border: 1px solid var(--terracotta); border-radius: 999px;
  padding: .6em 1.1em; cursor: pointer; transition: background .2s, transform .2s;
}
.rec-choice:hover { background: rgba(168,80,58,.08); transform: translateY(-1px); }
.rec-choice .ico { font-size: 1.15rem; }
.rec-choice:focus-within, .rec-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.rec-stage, .rec-result {
  margin-top: 1rem; padding: 1.1rem; text-align: center;
  background: #fff; border: 1px solid #f0e7d6; border-radius: 14px;
  box-shadow: 0 12px 30px -24px rgba(86,47,28,.6);
}
.rec-preview { width: 100%; max-width: 340px; margin: 0 auto .8rem; border-radius: 12px; background: #2e241f; aspect-ratio: 4/3; object-fit: cover; transform: scaleX(-1); }
.rec-meter { width: 80%; max-width: 300px; height: 10px; margin: .4rem auto 1rem; background: rgba(95,122,82,.18); border-radius: 999px; overflow: hidden; }
.rec-meter span { display: block; height: 100%; width: 0%; background: var(--sage-deep); border-radius: 999px; transition: width .08s linear; }

.rec-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.rec-dot.live { background: #d6453c; animation: recpulse 1.1s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,69,60,.5); } 50% { box-shadow: 0 0 0 7px rgba(214,69,60,0); } }
.rec-time { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.rec-hint { font-size: .9rem; flex-basis: 100%; }

.rec-actions { display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.btn.rec-go { padding: .6em 1.5em; font-size: .95rem; }
.rec-playback { margin-bottom: .8rem; }
.rec-playback video, .rec-playback img { width: 100%; max-width: 340px; border-radius: 12px; }
.rec-playback audio { width: 100%; max-width: 340px; }
.rec-saved { font-family: var(--display); color: var(--sage-deep); font-size: 1.05rem; }

.gb-card audio { width: 100%; margin-bottom: .5rem; }
.gb-wall { columns: 2; column-gap: 1rem; margin-top: 1rem; }
@media (max-width: 540px) { .gb-wall { columns: 1; } }
.gb-card {
  break-inside: avoid;
  background: #fff;
  border: 1px solid #f0e7d6;
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1rem;
  box-shadow: 0 10px 28px -22px rgba(86,47,28,.7);
  text-align: left;
  transform: rotate(var(--tilt, -.6deg));
}
.gb-card:nth-child(even) { --tilt: .7deg; }
.gb-card img, .gb-card video { width: 100%; border-radius: 8px; margin-bottom: .7rem; }
.gb-card .gb-text { font-family: var(--display); font-size: 1.12rem; color: var(--ink); margin: 0 0 .5rem; }
.gb-card .gb-from { font-size: .85rem; letter-spacing: .04em; color: var(--coral-deep); }
.gb-card .gb-from::before { content: "— "; }
.gb-empty { color: var(--ink-soft); font-style: italic; }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; isolation: isolate; --wash: var(--wash-footer); text-align: center; padding: 3.4rem 0 2.4rem; }
.closing { font-family: var(--display); font-style: italic; font-size: 1.35rem; max-width: 34ch; margin: 0 auto .8rem; color: var(--ink); }
.signoff { font-family: var(--display); font-size: 1.8rem; color: var(--coral-deep); margin: 0 0 1.6rem; }
.admin-link { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--line); text-decoration: none; }
.admin-link:hover { color: var(--ink-soft); }

/* ---------------------------------------------------------------- petals */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.petal { position: absolute; top: -6%; will-change: transform; animation: fall linear infinite; }
@keyframes fall {
  0%   { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { transform: translate(var(--drift, 40px), 110vh) rotate(360deg); opacity: 0; }
}

/* ---------------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: .08s; }
.reveal[data-reveal-delay="2"] { transition-delay: .16s; }
.reveal[data-reveal-delay="3"] { transition-delay: .24s; }
.reveal[data-reveal-delay="4"] { transition-delay: .32s; }
.reveal[data-reveal-delay="5"] { transition-delay: .40s; }
.reveal[data-reveal-delay="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .petals { display: none; }
  .portrait-mat { transform: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 480px) {
  body { font-size: 18px; }
  .detail-grid { grid-template-columns: 1fr; }
  .choice-row { grid-template-columns: 1fr; }
  .menu-list .dish { font-size: 1.18rem; white-space: normal; }
}