/* ==========================================================================
   Chelsea & Shaquil — Convite (vintage lace design, 2026-10)
   From the bride's references: aged cream paper, lace ("renda") everywhere,
   dark botanical photographs, old-print serif, script headings in antique gold.
   Images in assets/vintage/ come from tools/ai_images.py + tools/vintage_assets.py.
   ========================================================================== */

:root {
  --cream: #F4ECDD;
  --cream-2: #FBF6EC;
  --ink: #3D3128;           /* sepia body text */
  --ink-soft: #6A5A47;
  --gold: #A9843E;
  --gold-deep: #6E5222;     /* script headings */
  --sage: #5E6B4E;
  --wine: #84343A;          /* the RSVP heart */
  --night: #14110D;         /* dark botanical sections */
  --on-dark: #F4ECDD;

  --f-script: 'Great Vibes', cursive;
  --f-body: 'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-caps: 'Cormorant SC', 'Cormorant Garamond', serif;
  --f-ar: 'Amiri', serif;

  --paper: url("../assets/gate/paper.jpg");
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 6vw, 48px);
  --maxw: 600px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
main { overflow-x: clip; }
body {
  margin: 0; color: var(--ink);
  background: var(--cream) var(--paper) 0 0 / 600px;
  font-family: var(--f-body); font-size: 18px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body.is-locked { overflow: hidden; height: 100svh; }
img, svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
strong { font-weight: 700; }
::selection { background: var(--gold); color: #fff; }

/* ─────────────── Type ─────────────── */
.script { font-family: var(--f-script); font-weight: 400; }
.heading {
  font-family: var(--f-script); font-weight: 400; color: var(--gold-deep);
  font-size: clamp(54px, 15vw, 84px); line-height: 1.05; margin: 0 0 18px; padding: 0 .12em;
}
.heading::after { content: ""; display: block; width: 150px; height: 17px; margin: 8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cg fill='none' stroke='%23A9843E' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M4 9 H58 M102 9 H156'/%3E%3Cpath d='M58 9 C64 2 70 2 74 9 C70 16 64 16 58 9Z M102 9 C96 2 90 2 86 9 C90 16 96 16 102 9Z'/%3E%3Cpath d='M40 9 C46 4 50 4 52 7 M120 9 C114 4 110 4 108 7'/%3E%3C/g%3E%3Cpath d='M80 3 L84 9 L80 15 L76 9Z' fill='%23A9843E'/%3E%3Ccircle cx='4' cy='9' r='1.6' fill='%23A9843E'/%3E%3Ccircle cx='156' cy='9' r='1.6' fill='%23A9843E'/%3E%3C/svg%3E") center / contain no-repeat; }   /* Regency flourish */
.heading--xl { font-size: clamp(76px, 22vw, 120px); margin-bottom: 4px; }
.label { font-family: var(--f-caps); font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.prose { font-size: clamp(17px, 4.5vw, 19px); margin: 0 auto 18px; max-width: 32em; }
.prose--lead { font-style: italic; font-size: clamp(20px, 5.4vw, 24px); }
.prose--sm { font-size: 16px; margin-bottom: 0; font-style: italic; }
.split-word { display: inline-block; white-space: nowrap; }
/* Each heading letter is animated on its own; Safari crops a transformed box's ink to the box, and script capitals
   and accents (the L and ã of Localização) rise above it. Pad the box around the glyph and pull it back. */
.split-char { display: inline-block; padding: .28em .06em .2em; margin: -.28em -.06em -.2em; }

/* "ink" writing reveal for script names */
.ink {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ink.is-written { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 2.2s var(--ease-out), mask-position 2.2s var(--ease-out); }

/* ─────────────── Layout ─────────────── */
.scene { position: relative; isolation: isolate; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.container { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.container--wide { max-width: 760px; }
.section { padding: clamp(76px, 12vh, 120px) 0; }
.paper { background: transparent; }
.dark { background: var(--night); color: var(--on-dark); overflow: hidden; }
.bg { inset: -10% 0; background: var(--night) center / cover no-repeat; }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, rgba(10, 8, 6, .15), rgba(10, 8, 6, .65)); }
.bg--calla { background-image: url("../assets/vintage/calla-dark.jpg"); }
.bg--flip { transform: scaleX(-1); }
.bg--meadow { background-image: url("../assets/vintage/meadow.jpg"); }
.bg--meadow::after { background: linear-gradient(rgba(16, 20, 12, .45), rgba(16, 20, 12, .55)); }
.bg--lilies { background-image: url("../assets/vintage/calla-bed.jpg"); }
.bg--lilies::after { background: radial-gradient(70% 60% at 50% 45%, rgba(10, 8, 6, 0), rgba(10, 8, 6, .5)); }

/* ─────────────── Fixed UI ─────────────── */
#dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.grain {
  position: fixed; inset: -50%; z-index: 51; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-deep), #E2C98E, var(--gold)); }

.music-btn {
  position: fixed; right: 14px; top: calc(14px + env(safe-area-inset-top)); z-index: 65;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(169, 132, 62, .55); background: rgba(251, 246, 236, .78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.6); transition: opacity .6s, transform .6s var(--ease-out);
}
.music-btn.is-shown { opacity: 1; transform: none; }
.music-btn .bars { display: flex; gap: 3px; align-items: flex-end; height: 15px; }
.music-btn .bars i { width: 2.4px; height: 4px; background: var(--gold-deep); border-radius: 2px; }
.music-btn.is-playing .bars i { animation: eq 1s ease-in-out infinite; }
.music-btn.is-playing .bars i:nth-child(2) { animation-delay: -.3s; }
.music-btn.is-playing .bars i:nth-child(3) { animation-delay: -.6s; }
.music-btn.is-playing .bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }

/* Floating CTA fades (never slides from below the screen: iPhone's toolbar can freeze it half-cut) */
.float-cta {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 64;
  padding: 13px 26px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-family: var(--f-caps); font-weight: 600; font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-2); background: var(--ink); box-shadow: 0 12px 28px -10px rgba(20, 14, 6, .6);
  transform: translate(-50%, 14px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.float-cta.is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s; }
.toast {
  position: fixed; left: 50%; top: calc(20px + env(safe-area-inset-top)); z-index: 90;
  transform: translate(-50%, -150%); opacity: 0; pointer-events: none;
  padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--cream-2);
  font-family: var(--f-caps); font-size: 15px; letter-spacing: .1em; transition: transform .5s var(--ease-out), opacity .3s;
}
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }

/* ─────────────── Buttons ─────────────── */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 30px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-body); font-size: 18px; text-decoration: underline; text-underline-offset: 4px;
  color: var(--ink); background: transparent; border: 1.6px solid var(--ink);
  transition: background .35s, color .35s, transform .35s var(--ease-out);
}
.btn:hover { background: var(--ink); color: var(--cream-2); }
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--ink); color: var(--cream-2); text-decoration: none; font-family: var(--f-caps); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 15px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }
.btn .ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .7s ease-out forwards; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.link-btn { background: none; border: 0; padding: 6px 0; margin-top: 14px; font-family: var(--f-caps); font-weight: 600; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.link-btn--light { color: var(--on-dark); }

/* ═══════════════════════ GATE ═══════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.5svh, 30px);
  padding: 24px; background: var(--night); color: #fff;
}
.gate > * { position: relative; z-index: 1; }
.gate > .gate__photo, .gate > .gate__veil { position: absolute; inset: 0; z-index: 0; }
.gate__veil { background: radial-gradient(85% 65% at 50% 50%, rgba(14, 10, 6, .2), rgba(14, 10, 6, .6)), linear-gradient(to bottom, rgba(14, 10, 6, .5), transparent 36%, transparent 64%, rgba(14, 10, 6, .55)); }
.gate__top { text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
/* As in the couple's reference: small serif caps, her name, then "& Shaquil" stepped down and to the right.
   The block starts near the top so "Vamos casar" sits just above our heads in the cover photo. */
.gate { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top) + 15svh); }
.gate__top { margin: 10svh 0 1svh; }   /* names sit just above the envelope, which stays below our faces */
.gate > .gate__eyebrow { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 15svh); text-align: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(13px, 3.5vw, 16px); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.gate__couple { font-family: var(--f-script); font-size: clamp(42px, 11vw, 58px); line-height: 1; margin: 0 auto; width: 5.9em; max-width: 92vw; }
.gate__her { display: block; text-align: left; }
.gate__him { display: block; text-align: right; margin-top: -.18em; }
.gate__him em { font-style: normal; font-size: .82em; }
.gate__to { margin: 14px 0 0; display: flex; flex-direction: column; }
.gate__to-label { font-style: italic; font-size: 16px; opacity: .85; }
.gate__to-name { font-family: var(--f-script); font-size: clamp(30px, 8vw, 40px); line-height: 1.1; }
.gate__hint { font-family: var(--f-caps); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .45; } }

/* Photos (any [data-photos] box) */
.photos { overflow: hidden; }
.photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.photos img.is-on { opacity: 1; }

/* ── Envelope: paper texture + per-panel light, lace on the flap, monogram printed ── */
.envelope {
  --tex: var(--paper);
  position: relative; display: block; padding: 0; border: 0; background: none;
  width: min(80vw, 400px); aspect-ratio: 1.42; perspective: 1200px;
  filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .5)) drop-shadow(0 4px 6px rgba(0, 0, 0, .3));
}
.envelope span { display: block; }
.env__back, .env__front, .env__flap, .env__letter { position: absolute; inset: 0; }
.env__back { border-radius: 4px; background: linear-gradient(to bottom, rgba(90, 66, 30, .3), rgba(90, 66, 30, .1) 45%, rgba(90, 66, 30, .03)), var(--tex) 0 0 / 420px; }
.env__letter {
  inset: 6% 6% 4% 6%; z-index: 2; border-radius: 3px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), var(--tex) 37px 11px / 420px;
  box-shadow: 0 -3px 14px rgba(70, 50, 20, .18);
}
.env__letter::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(110, 82, 34, .45); }
/* The letter carries only Lady Whistledown's greeting; its words are written in once it reaches the middle */
.envelope .env__letter { display: grid; -webkit-backface-visibility: hidden; backface-visibility: hidden; }   /* own layer: no seams when it is scaled up */   /* `.envelope span` would otherwise make it a block and lose the centring */
.env__letter-inner { display: block; text-align: center; color: var(--ink); padding: 0 10%; }
.env__salute { display: block; font-size: clamp(28px, 7.6vw, 38px); line-height: 1.15; color: var(--gold-deep); margin-bottom: 8px; }
.env__text { display: block; font-style: italic; font-size: clamp(16px, 4.3vw, 20px); line-height: 1.45; }
.env__text .w { display: inline-block; }
.gate > .gate__next { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 9svh); text-align: center; margin: 0;
  font-family: var(--f-caps); font-weight: 600; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; opacity: 0; pointer-events: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.gate__next.is-on { opacity: 1; pointer-events: auto; animation: hint 2.4s ease-in-out infinite; }
.env__front { z-index: 3; border-radius: 4px; overflow: hidden; }
.env__panel { position: absolute; inset: 0; }
.env__panel i { position: absolute; inset: 0; display: block; }
.env__panel--l { filter: drop-shadow(1.5px 0 1.6px rgba(70, 50, 20, .3)); }
.env__panel--l i { clip-path: polygon(0 0, 53% 54%, 0 100%); background: linear-gradient(100deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%), var(--tex) 0 0 / 420px; }
.env__panel--r { filter: drop-shadow(-1.5px 0 1.6px rgba(70, 50, 20, .3)); }
.env__panel--r i { clip-path: polygon(100% 0, 47% 54%, 100% 100%); background: linear-gradient(260deg, rgba(60, 40, 10, .08), rgba(60, 40, 10, .02) 65%), var(--tex) 170px 60px / 420px; }
.env__panel--b { filter: drop-shadow(0 -2px 2.2px rgba(70, 50, 20, .32)); }
.env__panel--b i { clip-path: polygon(0 100%, 0 96%, 50% 45%, 100% 96%, 100% 100%); background: linear-gradient(to top, rgba(60, 40, 10, .06), rgba(255, 255, 255, .16)), var(--tex) 90px 200px / 420px; }
.env__flap { z-index: 4; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; }
.env__flap-inner {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 52% 97%, 50% 100%, 48% 97%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .28), rgba(60, 40, 10, .07)), var(--tex) 250px 0 / 420px;
}
.env__flap-shade { position: absolute; inset: 0; transform: translateY(3px); filter: blur(3px); opacity: .3; backface-visibility: hidden; }
.env__flap-shade i { position: absolute; inset: 0; display: block; background: rgba(50, 35, 10, .7); clip-path: polygon(0 0, 100% 0, 52% 97%, 50% 100%, 48% 97%); }
.env__flap::after {   /* inner face once it turns over: lined paper */
  content: ""; position: absolute; inset: 0; transform: rotateX(180deg); backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 52% 97%, 50% 100%, 48% 97%);
  background: linear-gradient(to bottom, rgba(90, 66, 30, .14), rgba(90, 66, 30, .04)), var(--tex) 0 0 / 420px;
}
/* lace tucked under the flap: only the scalloped edge shows below the V. Each strip is centred on its edge's
   midpoint (¼ and ¾ across, half-way down the flap), turned to the edge's angle (atan(0.58/1.42 ÷ 0.5) = 39.25°)
   and pushed out along the edge's normal. It sits before the flap paper in the DOM, so the flap covers its top
   half and the blurred flap shade falls across it. */
/* Chantilly lace tucked under the flap, tailored to the envelope. Geometry in envelope widths (W): the flap is
   0.4085 W tall, so each V edge runs at atan(0.4085/0.5) = 39.25° and is 0.6455 W long. A strip 0.12 W tall is pushed
   0.0216 W (18% of its height) out along the edge's normal. To mitre cleanly on the centre line its lower edge must
   reach 0.0816·tan(39.25°) ≈ 0.067 W past the point, and its outer end only has to reach the corner, where the clip
   cuts it flush with the envelope's side and top. So each strip runs from 0.05 W before the corner to 0.08 W past
   the point: 0.776 W long, centred 0.015 W towards the point from the edge's midpoint. */
.env__laces { position: absolute; inset: 0; backface-visibility: hidden; }
.env__laces--l { clip-path: polygon(0 0, 50% 0, 50% 140%, 0 140%); }
.env__laces--r { clip-path: polygon(50% 0, 100% 0, 100% 140%, 50% 140%); }
.env__lace {
  position: absolute; top: 52.3%; width: 77.6%; height: 0; padding-bottom: 12%;
  background: url("../assets/vintage/lace-chantilly.png") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 .6px .3px rgba(40, 28, 10, .32)) drop-shadow(0 2px 2px rgba(40, 28, 10, .12));
}
.env__lace--l { left: calc(26.16% - 38.8%); transform: translateY(-50%) rotate(39.25deg) translateY(18%); }
.env__lace--r { left: calc(73.84% - 38.8%); transform: translateY(-50%) rotate(-39.25deg) translateY(18%) scaleX(-1); }
/* the gold wax seal from the Nikkah invite, pressed where the flap's point closes */
.env__seal { position: absolute; z-index: 5; left: 50%; top: 56%; width: 23%; transform: translate(-50%, -50%) rotate(-6deg);
  filter: drop-shadow(0 3px 3px rgba(40, 26, 6, .45)) drop-shadow(0 8px 12px rgba(40, 26, 6, .25)); }
.env__seal img { display: block; width: 100%; height: auto; }
.env__print { position: absolute; left: 50%; top: 43%; width: 21%; aspect-ratio: 200 / 280; height: auto; transform: translate(-50%, -50%); backface-visibility: hidden;
  filter: drop-shadow(-.5px -.5px 0 rgba(255, 253, 245, .9)) drop-shadow(.6px .8px .6px rgba(70, 50, 20, .45)); }   /* gold crest, pressed into the paper */

/* ═══════════════════════ 1 · FULL-SCREEN PHOTO ═══════════════════════
   DSC05170 edge to edge. The top of the photo is light marble and curtains, so "Vamos casar" and our names sit there in
   sepia and antique gold; the date sits low over a soft dark fade at the bottom. */
.hero { height: 100svh; min-height: 560px; overflow: hidden; }
.hero__photo img { object-position: 62% 50%; }
.hero__veil { background: linear-gradient(to bottom, rgba(251, 246, 236, .55) 0%, rgba(251, 246, 236, .2) 26%, rgba(251, 246, 236, 0) 40%,
  rgba(20, 14, 6, 0) 62%, rgba(20, 14, 6, .55) 88%, rgba(20, 14, 6, .7) 100%); }
.hero__top { position: absolute; z-index: 2; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 9svh); text-align: center; color: var(--ink); }
.hero__eyebrow { font-family: var(--f-display); font-weight: 600; font-size: clamp(13px, 3.5vw, 16px); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; margin: 0 0 4px; }
.hero__names { font-family: var(--f-script); font-weight: 400; font-size: clamp(50px, 13.5vw, 72px); line-height: 1; margin: 0 auto; width: 5.9em; max-width: 92vw; color: var(--gold-deep);
  text-shadow: 0 0 18px rgba(251, 246, 236, .9), 0 0 2px rgba(251, 246, 236, .8); }
/* the ink mask clips at the box edge, and Great Vibes' capitals rise above the line: pad the box up, pull it back */
.hero__her { display: block; text-align: left; padding: .3em .1em 0; margin-top: -.3em; }
.hero__him { display: block; text-align: right; margin-top: -.48em; padding: .3em .1em 0; }
.hero__him em { font-style: normal; font-size: .82em; }
.hero__bottom { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 118px); text-align: center; color: #FBF6EC; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.hero__rule { display: block; width: 64px; height: 1px; margin: 0 auto 14px; background: linear-gradient(90deg, transparent, #E2C98E, transparent); }
.hero__date { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 7vw, 34px); letter-spacing: .22em; text-indent: .22em; margin: 0; }
.hero__place { font-family: var(--f-caps); font-weight: 600; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; margin: 6px 0 0; opacity: .9; }
.hero .scroll-hint { color: #FBF6EC; }

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

.scroll-hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--f-caps); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; }
.scroll-hint i { width: 1px; height: 40px; background: linear-gradient(currentColor, transparent); }

/* ═══════════════════════ 2 · Silver frame + blessing ═══════════════════════ */
/* gilt baroque oval (examples/image0.jpeg, turned on its side by tools/gold_frame.py); the photo sits just under its moulding */
.gilt-oval { position: relative; width: min(108%, 520px); left: 50%; translate: -50% 0; aspect-ratio: 1401 / 1061; margin: 0 0 26px; }
.gilt-oval__photo { position: absolute; inset: 19.5% 18% 19% 20.5%; border-radius: 50%; }
.gilt-oval__frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(40, 28, 10, .4)) drop-shadow(0 2px 3px rgba(40, 28, 10, .3)); }
.parents { display: grid; gap: 22px; margin: 22px 0 26px; }
@media (min-width: 620px) { .parents { grid-template-columns: 1fr 1fr; } }
.parents__name { font-size: clamp(19px, 5vw, 22px); margin: 0; line-height: 1.35; }
.signature-mono { width: 104px; height: 104px; margin: 22px auto 0; filter: drop-shadow(0 1px 0 rgba(255, 250, 230, .7)) drop-shadow(0 1.5px 1.5px rgba(60, 40, 10, .45)); }   /* polished gold, as on the RSVP envelope */
.signature { font-size: clamp(54px, 15vw, 78px); line-height: 1.1; color: var(--gold-deep); margin: 0; padding: 0 .12em; }

/* ═══════════════════════ 3 · Countdown ═══════════════════════ */
.contagem { padding: clamp(70px, 11vh, 110px) 0; }
.contagem__title { font-size: clamp(46px, 13vw, 72px); line-height: 1.1; margin: 0 0 10px; color: #fff; padding: 0 .12em; }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: clamp(4px, 2vw, 14px); }
.cd { min-width: 60px; }
.cd__num { position: relative; overflow: hidden; height: 1.1em; font-family: var(--f-display); font-weight: 500; font-size: clamp(42px, 12vw, 64px); line-height: 1.1; color: #fff; }
.cd__num span { position: absolute; inset: 0; }
.cd__sep { font-family: var(--f-display); font-size: clamp(36px, 10vw, 56px); line-height: 1.15; color: #fff; }
.cd__lbl { font-family: var(--f-caps); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-top: 2px; }
.contagem .link-btn { margin-top: 26px; }

/* ═══════════════════════ 4 · Location ═══════════════════════ */
.venue { margin-top: 26px; }
.venue__name { font-family: var(--f-caps); font-weight: 500; font-size: clamp(28px, 8vw, 36px); letter-spacing: .06em; margin: 4px 0 0; line-height: 1.15; }
.venue__city { margin-bottom: 18px; }
.venue__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.venue__btns .btn { min-width: 150px; }
.venue__map { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(110, 82, 34, .4), 0 0 0 7px var(--cream-2), 0 0 0 8px rgba(110, 82, 34, .3), 0 24px 40px -24px rgba(40, 28, 10, .5); }
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.05) sepia(.08); }

/* ═══════════════════════ 5 · RSVP envelope among lilies ═══════════════════════ */
.convite-rsvp { min-height: 92svh; display: grid; place-items: center; padding: 60px 0; }
.rsvp-env { position: relative; z-index: 2; display: block; width: min(76vw, 360px); aspect-ratio: 1 / 1.1; text-decoration: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.rsvp-env > span { position: absolute; display: block; }
.rsvp-env__back { left: 0; right: 0; bottom: 0; height: 60%; border-radius: 4px; background: linear-gradient(to bottom, rgba(90, 66, 30, .32), rgba(90, 66, 30, .08)), var(--paper) 0 0 / 420px; }
/* polaroid + heart live in a layer clipped at the envelope's bottom edge, so when they sink into the pocket they vanish */
.rsvp-env__inside { inset: 0; clip-path: polygon(-60% -60%, 160% -60%, 160% 40%, 100% 40%, 100% 100%, 0 100%, 0 40%, -60% 40%); }   /* free above the pocket's rim (40%), envelope-wide below it */
.rsvp-env__inside > span { position: absolute; display: block; }
.rsvp-env__polaroid { left: 6%; bottom: 37%; width: 44%; aspect-ratio: .82; padding: 5% 5% 15%; background: #FBF8F1; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transform-origin: 50% 100%; }
.rsvp-env__polaroid .photos { position: relative; display: block; width: 100%; height: 100%; }
.rsvp-env__heart { right: 3%; bottom: 41%; width: 56%; aspect-ratio: 200 / 180; transform-origin: 50% 100%; }
.rsvp-env__heart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.rsvp-env__heart path { fill: var(--wine); }
.rsvp-env__heart-text { position: absolute; inset: 14% 17% 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #FBEFE6; }
.rsvp-env__heart-text .script { font-size: clamp(21px, 5.8vw, 29px); line-height: 1; }
.rsvp-env__heart-text small { margin-top: 6px; font-family: var(--f-caps); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.rsvp-env__front {
  left: 0; right: 0; bottom: 0; height: 60%; border-radius: 0 0 4px 4px;
  clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .25), rgba(60, 40, 10, .06)), var(--paper) 120px 40px / 420px;
}
/* The opening envelope's Chantilly lace, sewn along the pocket's V and hanging down onto the front (it lives inside
   the clipped front, so its top is cut exactly on the opening). Geometry in envelope widths (W): H = 1.1 W, the pocket is
   0.66 W tall, the V dips 0.297 W → 30.7°, each edge 0.5815 W long, midpoints at (¼ or ¾, 0.1485 W) in the front's box.
   A strip 0.105 W tall is pushed 40% of its height into the front; its lower edge then needs 0.095·tan(30.7°) ≈ 0.056 W
   past the point to mitre on the centre line, so each strip runs 0.05 W before the corner to 0.08 W past the point
   (0.712 W long, centred 0.015 W towards the point). */
.rsvp-env__front > span { position: absolute; display: block; }
.rsvp-env__laces { inset: 0; }
.rsvp-env__laces--l { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.rsvp-env__laces--r { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.rsvp-env__lace { position: absolute; display: block; top: 23.67%; width: 71.2%; height: 0; padding-bottom: 10.5%;
  background: url("../assets/vintage/lace-chantilly.png") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 .6px .3px rgba(40, 28, 10, .32)) drop-shadow(0 2px 2px rgba(40, 28, 10, .12)); }
.rsvp-env__lace--l { left: calc(26.29% - 35.6%); transform: translateY(-50%) rotate(30.7deg) translateY(40%); }
.rsvp-env__lace--r { left: calc(73.71% - 35.6%); transform: translateY(-50%) rotate(-30.7deg) translateY(40%) scaleX(-1); }
/* our monogram in polished gold, low on the pocket, under the lace */
.rsvp-env__mono { position: absolute; left: 50%; top: 81%; width: 25%; aspect-ratio: 1; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 0 rgba(255, 250, 230, .7)) drop-shadow(0 1.5px 1.5px rgba(60, 40, 10, .45)); }

/* ═══════════════════════ 6 · Our day (doodles) ═══════════════════════ */
.doodles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 14px; margin-top: 18px; }
@media (min-width: 700px) { .doodles { grid-template-columns: repeat(3, 1fr); } }
.doodle { display: flex; flex-direction: column; align-items: center; }
.doodles .doodle:last-child:nth-child(odd) { grid-column: 1 / -1; }
.doodle img { width: min(100%, 150px); aspect-ratio: 1; object-fit: contain; }
.doodle__time { font-family: var(--f-body); font-size: 21px; margin: 6px 0 0; }
.doodle__title { font-family: var(--f-body); font-style: italic; font-size: 18px; margin: 0; line-height: 1.3; }

/* ═══════════════════════ 7 · Lace photo + verse ═══════════════════════ */
.mensagem { padding: clamp(80px, 12vh, 120px) 0; }
.lace-photo { position: relative; width: min(84vw, 380px); aspect-ratio: 1; margin: 0 auto 30px; }
.lace-photo__img { position: absolute; inset: 21%; }
.lace-photo__lace { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
.mensagem__ar { font-family: var(--f-ar); font-size: clamp(28px, 8vw, 38px); line-height: 1.8; margin: 0; color: #fff; }
.mensagem__verse { font-style: italic; font-size: clamp(21px, 5.6vw, 25px); margin: 0 0 18px; }
.mensagem__verse small { display: block; font-style: normal; font-family: var(--f-caps); font-size: 14px; letter-spacing: .2em; opacity: .8; }
.mensagem__dua { font-style: italic; font-size: clamp(18px, 4.8vw, 21px); line-height: 1.55; max-width: 26em; margin: 0 auto; }

/* ═══════════════════════ 8 · Gifts ═══════════════════════ */
.gifts .btn { margin-top: 8px; }
.accounts { display: grid; gap: 14px; margin-top: 26px; text-align: left; }
.acct { position: relative; padding: 18px 20px 12px; border-radius: 6px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), var(--paper) 0 0 / 420px; box-shadow: 0 0 0 1px rgba(110, 82, 34, .35), 0 0 0 5px var(--cream-2), 0 0 0 6px rgba(110, 82, 34, .25), 0 18px 30px -22px rgba(40, 28, 10, .5); }
.acct__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.acct__bank { font-family: var(--f-caps); font-weight: 600; font-size: 19px; letter-spacing: .1em; }
.acct__holder { font-style: italic; font-size: 15px; text-align: right; color: var(--ink-soft); }
.acct__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(110, 82, 34, .22); }
.acct__k { display: block; font-family: var(--f-caps); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.acct__v { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.copy { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(61, 49, 40, .4); background: transparent; color: var(--ink); transition: background .3s, color .3s; }
.copy svg { width: 17px; height: 17px; }
.copy.is-done { background: var(--ink); color: var(--cream-2); }

/* ═══════════════════════ 9 · RSVP form ═══════════════════════ */
.lockets { position: relative; width: min(56vw, 230px); margin: 0 auto 14px; }
.lockets img { width: 100%; height: auto; }
.lockets__l { position: absolute; font-family: var(--f-body); font-size: clamp(30px, 8.4vw, 42px); line-height: 1; color: var(--ink); }
.lockets__l--c { left: 33.5%; top: 55%; transform: translate(-50%, -50%) rotate(-14deg); }
.lockets__l--s { left: 68.5%; top: 54%; transform: translate(-50%, -50%) rotate(12deg); }
.rsvp__deadline { font-family: var(--f-caps); font-weight: 600; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 20px; }
.rsvp__seats { font-style: italic; color: var(--gold-deep); margin: -8px 0 18px; }
.notice { text-align: left; margin: 0 0 28px; padding: 16px 18px; border-radius: 6px; background: rgba(110, 82, 34, .07); border: 1px solid rgba(110, 82, 34, .3); }
.notice__title { font-family: var(--f-caps); font-weight: 600; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 4px; }
.notice__text { font-size: 16.5px; line-height: 1.5; margin: 0; color: var(--ink-soft); }
.rsvp-form { display: grid; gap: 20px; text-align: left; }
.vfield { display: grid; gap: 6px; }
.vfield > span, .choice legend, .stepper__label { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--ink); }
.vfield input, .vfield textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink); padding: 12px 14px; outline: none; resize: vertical;
  background: rgba(255, 255, 255, .55); border: 1.4px solid rgba(61, 49, 40, .45); border-radius: 8px; transition: border-color .3s, box-shadow .3s;
}
.vfield textarea { min-height: 96px; }
.vfield input:focus, .vfield textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(110, 82, 34, .14); }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.choice legend { padding: 0; margin-bottom: 10px; }
.choice__opt { position: relative; display: block; }
.choice__opt input { position: absolute; opacity: 0; pointer-events: none; }
.choice__opt span { display: block; padding: 18px 16px; border-radius: 8px; background: rgba(61, 49, 40, .1); font-size: 18px; transition: background .3s, color .3s; }
.choice__opt input:checked + span { background: var(--ink); color: var(--cream-2); }
.choice__opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.stepper-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border: 1.4px solid rgba(61, 49, 40, .45); border-radius: 8px; transition: opacity .4s; }
.stepper-wrap.is-off { opacity: .35; pointer-events: none; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1.4px solid var(--ink); background: none; font-size: 20px; line-height: 1; }
.stepper button:disabled { opacity: .3; }
.stepper output { min-width: 32px; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 24px; }
.form-error { color: #9A3A2B; font-size: 15px; margin: 0; min-height: 1em; }
.rsvp-done { text-align: center; padding: 10px 0; }
.rsvp-done__check { width: 84px; height: 84px; margin: 0 auto 10px; }
.rsvp-done__check circle, .rsvp-done__check path { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rsvp-done__check circle { stroke-dasharray: 227; stroke-dashoffset: 227; }
.rsvp-done__check path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.rsvp-done.is-anim circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out); }
.rsvp-done.is-anim path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s .7s var(--ease-out); }

/* ─── RSVP pop-up (option A): tapping the envelope lifts a card out of its pocket, the card flies to the middle and
   becomes this pop-up, and the RSVP form (#rsvpBox) is moved into it. The same form stays at the bottom of the page. */
.rsvp-env__card { left: 12%; right: 12%; bottom: 5%; height: 25%; z-index: 0; border-radius: 3px; opacity: 0;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), var(--paper) 20px 10px / 420px;
  outline: 1px solid rgba(169, 132, 62, .6); outline-offset: -8px; box-shadow: 0 -4px 14px rgba(40, 28, 10, .25); }
.rsvp-ghost { position: fixed; z-index: 91; pointer-events: none; border-radius: 3px;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), var(--paper) 20px 10px / 420px;
  outline: 1px solid rgba(169, 132, 62, .6); outline-offset: -9px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.rsvp-modal { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 90; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
.rsvp-modal__veil { position: absolute; inset: 0; background: rgba(20, 14, 6, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rsvp-modal__card { position: relative; width: min(100%, 480px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-radius: 3px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)), var(--paper) 20px 10px / 420px;
  outline: 1px solid rgba(169, 132, 62, .6); outline-offset: -9px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.rsvp-modal__inner { padding: 34px 24px calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.rsvp-modal__inner .rsvp-box { text-align: left; }
.rsvp-modal__inner .rsvp__deadline { font-size: 14px; letter-spacing: .1em; margin-bottom: 22px; }
.rsvp-modal__title { font-size: clamp(40px, 11vw, 54px); line-height: 1.1; color: var(--gold-deep); margin: 6px 0 4px; padding: 0 .15em; }
.rsvp-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--ink); background: rgba(251, 246, 236, .9); border: 1px solid rgba(169, 132, 62, .6); }
body.is-modal { overflow: hidden; }
/* once the guest has answered, only the thank-you note is left */
.rsvp-answered .rsvp-box .notice, .rsvp-answered .rsvp__seats, .rsvp-answered .rsvp-modal__title,
.rsvp-answered .rsvp__deadline, .rsvp-answered .rsvp__intro { display: none; }
html.lenis-stopped { overflow: hidden; }

/* ═══════════════════════ 10 · Thank you ═══════════════════════ */
.obrigado { min-height: 100svh; display: grid; align-items: end; overflow: hidden; color: #fff; }
.obrigado__photo { position: absolute; inset: 0; }
.obrigado__veil { background: linear-gradient(to bottom, var(--cream) 0%, rgba(244, 236, 221, 0) 14%, rgba(20, 14, 6, 0) 42%, rgba(20, 14, 6, .62) 100%); }
.obrigado__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
.obrigado__title { font-size: clamp(76px, 23vw, 140px); line-height: 1.05; margin: 0; padding: 0 .15em; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.obrigado__text { font-style: italic; font-size: clamp(20px, 5.4vw, 27px); margin: 4px 0 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }

/* ═══════════════════════ 11 · On the day ═══════════════════════ */
.dayof__cards { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 620px) { .dayof__cards { grid-template-columns: 1fr 1fr; } }
.dayof-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px 22px; border-radius: 6px; text-decoration: none; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), var(--paper) 0 0 / 420px; box-shadow: 0 0 0 1px rgba(110, 82, 34, .35), 0 0 0 5px var(--cream-2), 0 0 0 6px rgba(110, 82, 34, .25); }
.dayof-card__icon { width: 58px; height: 58px; color: var(--ink); }
.dayof-card__icon svg { width: 100%; height: 100%; }
.dayof-card__title { font-family: var(--f-script); font-size: 34px; line-height: 1.15; color: var(--gold-deep); }
.dayof-card__sub { font-size: 16px; color: var(--ink-soft); line-height: 1.45; }
.dayof-card__badge { margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ink); font-family: var(--f-caps); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.dayof-card.is-locked .dayof-card__icon { opacity: .4; }
.dayof-card.is-open .dayof-card__badge { background: var(--ink); color: var(--cream-2); }

/* ═══════════════════════ Footer ═══════════════════════ */
.footer { padding: 80px 0 calc(110px + env(safe-area-inset-bottom)); }
.footer__mono { width: 128px; height: 128px; margin: 0 auto 18px; color: var(--ink); }
.contacts { display: flex; justify-content: center; gap: clamp(24px, 10vw, 60px); margin: 0 0 30px; }
.contact { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.contact .script { font-size: clamp(40px, 11vw, 54px); line-height: 1.1; color: var(--gold-deep); }
.contact small { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ink-soft); }
.contact small svg { width: 16px; height: 16px; }
.footer__insha { font-size: clamp(40px, 11vw, 58px); line-height: 1.15; margin: 10px 0 4px; color: var(--gold-deep); }
.footer__hash { font-family: var(--f-caps); font-weight: 600; letter-spacing: .14em; font-size: 17px; margin: 0; color: var(--ink-soft); }
.footer .link-btn { display: table; margin: 18px auto 0; }

/* ═══════════════════════ Reduced motion ═══════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ink { -webkit-mask-image: none; mask-image: none; }
  .grain { display: none; }
}