/* ═══════════════════════════════════════════════════════════════
   Henry & Florida · 1 Gusht 2026
   White paper, deep ink, embossed seal, olive leaves falling.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* PAPER · pure cool white + olive — NO yellow/sepia */
  --paper:        #f6fbf3;
  --paper-warm:   #ffffff;
  --paper-soft:   #eff5ea;
  --paper-deep:   #e2ecdb;
  --paper-edge:   #c8d6bf;

  /* INK · deep olive, cool */
  --ink:          #1f2e22;
  --ink-soft:     #354236;
  --ink-mute:     #6b806a;
  --ink-faded:    rgba(31, 46, 34, 0.55);

  --sage-deep:    #2e4530;
  --sage:         #5a7551;
  --sage-light:   #a5bb9a;
  --sage-mist:    #d3e0cc;
  --sage-pale:    #e4ecd9;

  --rust:         #973f2d;
  --rust-deep:    #5a1810;

  --gold:         #a98e5e;

  /* Type */
  --serif:   "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --script:  "Pinyon Script", "Great Vibes", cursive;

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-roll: cubic-bezier(0.7, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-sealed { overflow: hidden; height: 100dvh; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════
   ENVELOPE · photograph + letter that slides out from behind
   ═══════════════════════════════════════════════════════════════ */
.env {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 56px);
  /* Deep sage/teal — makes the cream envelope feel like a lit object */
  background:
    radial-gradient(ellipse at 50% 28%, rgba(120, 160, 145, 0.35) 0%, rgba(120, 160, 145, 0) 55%),
    radial-gradient(ellipse at 18% 95%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(ellipse at 86% 90%, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(178deg,
      #3d5a51 0%,
      #314a44 38%,
      #2a403a 70%,
      #233731 100%);
  transition: opacity 0.9s var(--ease-out), visibility 0.9s var(--ease-out);
}

/* Paper-grain noise on top of the veil */
.env::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(92deg,
      transparent 0, transparent 2px,
      rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 3px),
    repeating-linear-gradient(178deg,
      transparent 0, transparent 5px,
      rgba(255, 255, 255, 0.010) 5px, rgba(255, 255, 255, 0.010) 6px);
  opacity: 0.7;
  mix-blend-mode: overlay;
}
.env.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.env.is-gone    { display: none; }

/* Stage that holds the envelope, the peeking letter, and recipient */
.env-stage {
  position: relative;
  /* Aspect ratio matches envelope-bg.png (1080×675 = 1.6:1) so the
     photo fills the card with no letterbox bands that would leak the
     letter behind it. */
  width: min(100vw - 32px, calc((100dvh - 160px) * 1.6), 700px);
  aspect-ratio: 1.6 / 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
  z-index: 2;
}

/* The envelope photo card — the whole thing is the tap target */
.env-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  z-index: 3;
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  animation: envFloat 6s ease-in-out infinite;
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28))
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.32));
}
.env-card:hover  { transform: translateY(-3px) scale(1.012); }
.env-card:active { transform: translateY(0)    scale(0.992); }
.env-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 248, 232, 0.6);
}

.env-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Pulsing glow over the wax seal in the photo. The seal in envelope-bg.png
   sits roughly at 40% x / 60% y of the image — these % are tuned to that. */
.env-seal-glow {
  position: absolute;
  left: 40%;
  top: 60%;
  width: 18%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 240, 205, 0.55) 0%, rgba(255, 240, 205, 0.18) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: sealBreath 3.4s ease-in-out infinite;
}

@keyframes envFloat {
  0%, 100% { transform: translateY(0)    rotate(-0.3deg); }
  50%      { transform: translateY(-6px) rotate( 0.3deg); }
}
@keyframes sealBreath {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.10); }
}

/* The folded letter — starts fully hidden BEHIND the envelope photo,
   then slides up so it appears to emerge from the envelope's top edge.
   Sized close to the envelope body width so it reads as a real letter,
   not a tiny card. The opaque PNG keeps it hidden until it clears the top. */
.env-letter-peek {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  aspect-ratio: 1.45 / 1;
  /* Centered behind the envelope at rest — fully covered by the photo */
  transform: translate(-50%, -50%);
  z-index: 2;                 /* behind the envelope card (z 3) */
  pointer-events: none;
  opacity: 1;
}
.env-letter-paper {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(170deg, #fdfdf6 0%, #f6f3e6 55%, #ebe4cf 100%);
  border: 0.5px solid rgba(120, 100, 60, 0.22);
  box-shadow:
    inset 0 0 30px rgba(120, 100, 60, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 22px 40px -10px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6%;
}
.env-letter-mono {
  font-family: var(--script);
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.env-letter-mono .amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.42em;
  color: var(--gold);
  margin: 0 0.06em;
}
.env-letter-rule {
  width: 38%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(120, 100, 60, 0.55) 25%, rgba(120, 100, 60, 0.55) 75%, transparent);
}
.env-letter-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(10px, 1.4vw, 13px);
  letter-spacing: 0.36em;
  text-transform: lowercase;
  color: var(--ink-mute);
}

.env-cue {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: rgba(240, 245, 235, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  opacity: 0;
  z-index: 101;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  animation: ctaIn 0.9s 0.6s var(--ease-out) forwards, ctaBob 2.4s 1.6s ease-in-out infinite;
}
.env-cue svg { width: 13px; height: 13px; opacity: 0.9; }
@keyframes ctaIn  { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 0.78; transform: translate(-50%, 0); } }
@keyframes ctaBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

/* ═════ OPENING CHOREOGRAPHY ═════
   1. Seal flares with a gold flash
   2. Envelope tilts back slightly in 3D (as if held open from the top)
   3. The folded letter slides UP from behind the envelope
   4. Envelope drops away, letter scales up and fades the whole stage out
*/
.env.is-opening .env-cue { animation: none; opacity: 0; transition: opacity .25s ease; }
.env.is-opening .env-seal-glow {
  animation: sealFlare 0.7s var(--ease-out) forwards;
}
@keyframes sealFlare {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1);   filter: blur(6px); }
  40%  { opacity: 1;   transform: translate(-50%, -50%) scale(2.8); filter: blur(2px); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(4.2); filter: blur(12px); }
}

.env.is-opening .env-card {
  animation: envCardOpen 1.8s 0.3s var(--ease-roll) forwards;
}
@keyframes envCardOpen {
  0%   { transform: translateY(0)    rotateX(0)     scale(1);    opacity: 1; }
  30%  { transform: translateY(2px)  rotateX(-2deg) scale(1.005); opacity: 1; }
  100% { transform: translateY(60px) rotateX(-8deg) scale(0.92); opacity: 0; }
}

/* The letter slides STRAIGHT UP from its hidden position behind the envelope.
   Because the envelope photo is opaque, the letter only becomes visible as
   its top edge clears the envelope's top edge — reads as "pulling it out". */
.env.is-opening .env-letter-peek {
  animation: letterSlideOut 1.9s 0.25s var(--ease-roll) forwards;
}
@keyframes letterSlideOut {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65%  { opacity: 1; transform: translate(-50%, -150%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1.06); }
}



/* ═══════════════════════════════════════════════════════════════
   THE LETTER · one piece of paper
   ═══════════════════════════════════════════════════════════════ */
.letter {
  position: relative;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(ellipse at 50% 100%, rgba(150, 190, 140, 0.07) 0%, rgba(150, 190, 140, 0) 60%),
    linear-gradient(170deg, #ffffff 0%, #f4faef 45%, #e6efd9 100%);
  overflow: hidden;
}

.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(92deg,
      transparent 0, transparent 2px,
      rgba(60, 100, 60, 0.013) 2px, rgba(60, 100, 60, 0.013) 3px),
    repeating-linear-gradient(178deg,
      transparent 0, transparent 5px,
      rgba(60, 100, 60, 0.010) 5px, rgba(60, 100, 60, 0.010) 6px);
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.paper-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.paper-watermark img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 42vh;                        /* horizontal strip at the bottom */
  object-fit: cover;
  object-position: center 8%;
  opacity: 0.18;
  filter:
    grayscale(1)
    brightness(1.12)
    contrast(1.08)
    hue-rotate(70deg);                /* nudges any residual warmth toward green */
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.15) 14%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.9) 44%,
    rgba(0, 0, 0, 1) 60%
  );
          mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.15) 14%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.9) 44%,
    rgba(0, 0, 0, 1) 60%
  );
}
.paper-watermark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 251, 243, 1) 0%, rgba(246, 251, 243, 1) 42%, rgba(246, 251, 243, 0.92) 54%, rgba(246, 251, 243, 0.6) 66%, rgba(246, 251, 243, 0.25) 80%, rgba(246, 251, 243, 0) 92%, rgba(246, 251, 243, 0.5) 100%);
}

.paper-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(40, 70, 40, 0.06) 100%);
}

/* ── Letter content ─────────────────────────────────────── */
.letter-inner {
  position: relative;
  z-index: 3;
  width: min(820px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(72px, 14vw, 140px) clamp(16px, 5vw, 48px) clamp(80px, 12vw, 120px);
  color: var(--ink);
  text-align: center;
}

.l-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(40px, 7vw, 64px);
}
.l-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.l-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.06em;
  color: var(--ink);
  padding-top: 12px;
  border-top: 0.5px solid rgba(107, 128, 106, 0.42);
  min-width: 240px;
  text-align: center;
}

.l-opening {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 26px);
  color: var(--ink-soft);
  text-align: center;
}

/* Prose paragraphs */
.l-prose {
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.7;
  color: var(--ink-soft);
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.l-prose em {
  font-style: italic;
  color: var(--ink);
}
.l-prose strong {
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
}
.l-prose-lead {
  font-size: clamp(19px, 2.4vw, 22.5px);
}

/* THE NAMES — animated like handwriting */
.l-names {
  margin: clamp(22px, 4vw, 36px) auto clamp(14px, 2vw, 22px);
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 124px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(-4px, -0.6vw, 4px);
}
.l-name {
  display: block;
  line-height: 1.05;
  padding: 0 0.06em 0.12em;
  position: relative;
}
.l-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em) rotate(-3deg);
  filter: blur(2px);
  will-change: opacity, transform, filter;
}
body.is-revealed .l-letter {
  animation: letterIn 0.55s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(0.18em) rotate(-3deg); filter: blur(2px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
.l-name:nth-child(1) {
  align-self: flex-start;
  margin-left: clamp(0px, 4vw, 30px);
}
.l-name:nth-child(3) {
  align-self: flex-end;
  margin-right: clamp(0px, 4vw, 30px);
}
.l-amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.4em;
  line-height: 1;
  color: var(--gold);
  margin: -0.16em 0;
  align-self: center;
  opacity: 0;
}

/* The H/F letter animation handles names; amp fades in between */
body.is-revealed .l-amp {
  animation: ampIn 0.5s 2.4s var(--ease-out) forwards;
}
@keyframes ampIn {
  from { opacity: 0; transform: translateY(4px) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0)    rotate(0); }
}

/* Flourish — a single olive leaf flanked by thin rules */
.l-flourish {
  display: block;
  width: 100%;
  height: 22px;
  margin: clamp(28px, 5vw, 48px) auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' fill='none' stroke='%236b806a' stroke-width='0.6' stroke-linecap='round'><path d='M0 12 L104 12'/><path d='M136 12 L240 12'/><ellipse cx='120' cy='12' rx='10' ry='3.4' transform='rotate(-30 120 12)' fill='%236b806a' stroke='none' opacity='0.85'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.65;
}

/* ── Section labels ───────────────────────────────────────── */
.l-block { margin: 0; text-align: center; }

.l-label {
  margin: 0 0 clamp(16px, 2.4vw, 22px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--ink);
  letter-spacing: 0.005em;
}
.l-label::after {
  content: "";
  display: block;
  width: 36px;
  height: 0.5px;
  background: var(--ink-mute);
  margin: 10px auto 0;
  opacity: 0.5;
}

/* Programme — full-width rows with a dotted leader between time and event */
.l-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
}
.l-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 2vw, 22px);
  row-gap: 2px;
  align-items: baseline;
  text-align: left;
}
.l-step-dot { display: none; }
.l-step::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  height: 0;
  margin-bottom: 0.48em;
  border-bottom: 1px dotted rgba(107, 128, 106, 0.6);
}
.l-step-time {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 28px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.l-step-event {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--ink-soft);
  line-height: 1.3;
  text-align: right;
}
.l-step-detail {
  grid-column: 3;
  grid-row: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.6vw, 14.5px);
  color: var(--ink-mute);
  line-height: 1.3;
  text-align: right;
}

/* Palette */
.l-palette {
  margin: clamp(16px, 2.6vw, 22px) auto 0;
  display: flex;
  gap: clamp(14px, 2.4vw, 18px);
  justify-content: center;
}
.l-palette span {
  display: block;
  width: clamp(40px, 7vw, 54px);
  height: clamp(40px, 7vw, 54px);
  border-radius: 50%;
  background: var(--c);
  border: 0.5px solid rgba(40, 60, 30, 0.14);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    0 5px 12px rgba(60, 80, 50, 0.10);
}

/* ═════ RSVP — real, weighted buttons ═════ */
.l-rsvp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.l-rsvp-q {
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.l-rsvp-q em {
  color: var(--rust);
  font-style: italic;
}
/* Clear, prominent invite-capacity card so the guest sees at a glance
   exactly how many people the invitation is for. */
.l-capacity {
  margin: 14px auto clamp(20px, 3vw, 28px);
  max-width: 460px;
  padding: 16px 22px 14px;
  border: 1px solid rgba(120, 145, 115, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.45);
  text-align: center;
}
.l-capacity-head {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.3;
}
.l-capacity-break {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-mute);
}

.l-rsvp-allowance {
  margin: 8px 0 clamp(22px, 3.4vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-mute);
}
.l-rsvp-allowance::before,
.l-rsvp-allowance::after {
  content: "·";
  margin: 0 10px;
  color: var(--ink-mute);
  opacity: 0.5;
}
/* When allowance is hidden, restore the spacing on the question */
.l-rsvp-q:has(+ [hidden]) {
  margin-bottom: clamp(22px, 3.4vw, 32px);
}

.l-rsvp-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 18px);
  margin: 0 auto;
}

/* The buttons themselves — proper, visible, hit-the-eye */
.l-rsvp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 188px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 21px);
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .25s var(--ease-out),
    box-shadow .25s var(--ease-out),
    background .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out);
}
.l-rsvp-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.l-rsvp-mark svg { width: 14px; height: 14px; }

/* Primary · filled deep ink */
.l-rsvp-yes {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow:
    0 6px 16px rgba(31, 46, 34, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.l-rsvp-yes .l-rsvp-mark {
  background: rgba(255, 255, 255, 0.16);
  color: var(--paper);
}
.l-rsvp-yes:hover {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px rgba(31, 46, 34, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.l-rsvp-yes:active { transform: translateY(0); }

/* Secondary · outlined */
.l-rsvp-no {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(107, 128, 106, 0.55);
}
.l-rsvp-no .l-rsvp-mark {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--ink-mute);
}
.l-rsvp-no:hover {
  background: rgba(31, 46, 34, 0.04);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

/* Thanks state */
.l-rsvp-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeUp 0.65s var(--ease-out);
}
/* Thanks message — serif italic, NOT script. Only the names use the script font. */
.l-thanks-h {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.2;
  color: var(--sage-deep);
  letter-spacing: -0.005em;
}
.l-thanks-h::before,
.l-thanks-h::after {
  content: "·";
  margin: 0 12px;
  color: var(--ink-mute);
  opacity: 0.5;
  font-style: normal;
}
.l-thanks-sub {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-mute);
}
.l-rsvp-edit {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-mute);
  border-bottom: 0.5px solid rgba(107, 128, 106, 0.42);
  padding: 4px 0;
}
.l-rsvp-edit:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* Foot · signature */
.l-foot {
  margin-top: clamp(24px, 4vw, 40px);
  text-align: center;
}
.l-closing {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--ink-soft);
}
.l-sig {
  margin: clamp(6px, 1.2vw, 10px) 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 78px);
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.l-sig .amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.4em;
  color: var(--gold);
}

/* Toast */
.toast {
  position: fixed;
  left: 50%; bottom: 36px;
  transform: translate(-50%, 80px);
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* ═════ FALLING OLIVE LEAVES ═════ */
.leaf-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
/* On the envelope screen the leaves sit BEHIND the envelope (z 2) but
   above the gradient background and noise. */
.env > .leaf-field {
  position: absolute;
  z-index: 1;
}
.leaf {
  position: absolute;
  top: -8%;
  width: 18px;
  height: 26px;
  color: var(--sage);
  animation: leafFall linear infinite, leafSway 4.5s ease-in-out infinite;
  will-change: transform;
}
.leaf svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
}
@keyframes leafFall {
  0%   { top: -10%;  }
  100% { top: 115%;  }
}
@keyframes leafSway {
  0%, 100% { transform: translateX(-14px) rotate(-22deg); }
  50%      { transform: translateX( 14px) rotate( 28deg); }
}


/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .letter-inner {
    padding-top: clamp(56px, 14vw, 90px);
    width: min(540px, calc(100% - 32px));
  }
  .l-names {
    font-size: clamp(60px, 17vw, 96px);
  }
  .l-name:nth-child(1) { margin-left: 14px; }
  .l-name:nth-child(3) { margin-right: 14px; }

  .l-step { column-gap: 14px; }
  .l-step-time  { font-size: 20px; }
  .l-step-event { font-size: 17px; }

  .l-prose { font-size: 17px; }

  .l-rsvp-choice {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .l-rsvp-btn {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    padding: 16px 24px;
  }
}

@media (max-width: 420px) {
  .l-names { font-size: clamp(54px, 18vw, 80px); }
  .l-name:nth-child(1) { margin-left: 4px; }
  .l-name:nth-child(3) { margin-right: 4px; }
  .l-date { font-size: 16px; letter-spacing: 0.04em; }
  .l-eyebrow { letter-spacing: 0.28em; font-size: 11px; }
  .env-name { font-size: 38px; }
  .l-rsvp-q { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}