/* Olga & Joyd — wedding website. Portuguese quinta: lime-washed walls, terracotta, olive, azulejo blue. */
:root {
  --lime: #F5EFE4;
  --lime-deep: #EAE0CF;
  --paper: #FBF8F2;
  --ink: #2B2420;
  --ink-soft: #5E534A;
  --terracotta: #B5603C;
  --terracotta-deep: #93492B;
  --olive: #6E6E48;
  --azulejo: #2E4A7D;
  --line: rgba(43, 36, 32, .16);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-hero: clamp(3.6rem, 1.6rem + 9vw, 9rem);
  --text-h2: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, .8rem + 2vw, 3rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Subtle lime-wash texture */
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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .topbar, .footer { position: relative; z-index: 1; }

/* Type */
.eyebrow { margin: 0 0 1rem; font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--terracotta); }
.h2 { margin: 0 0 1.4rem; font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); line-height: 1.05; letter-spacing: -.01em; }
.h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0 1.8rem; border: 1px solid var(--terracotta); border-radius: 0; font: 500 .8rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.btn--solid { background: var(--terracotta); color: var(--paper); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.btn--line { background: transparent; color: var(--terracotta-deep); }
.btn--line:hover, .btn--line:focus-visible { background: var(--terracotta); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .lang-switch button:focus-visible, .topbar a:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 3px; }

/* Language switch */
.lang-switch { display: inline-flex; border: 1px solid var(--line); }
.lang-switch button { padding: .45rem .8rem; border: 0; background: none; color: var(--ink-soft); font: 500 .72rem/1 var(--font-body); letter-spacing: .18em; cursor: pointer; transition: background-color .3s, color .3s; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Envelope opening ---------- */
.envelope-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); background: radial-gradient(ellipse at 50% 40%, var(--paper), var(--lime-deep)); transition: opacity .9s var(--ease), visibility .9s; }
.envelope-screen.is-gone { opacity: 0; visibility: hidden; }
.envelope-wrap { display: grid; justify-items: center; gap: 1.8rem; text-align: center; }
.envelope-to { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); color: var(--ink-soft); }
.envelope { position: relative; width: min(78vw, 420px); aspect-ratio: 1.45; perspective: 1200px; }
.envelope__back, .envelope__front { position: absolute; inset: 0; }
.envelope__back { background: #E4D6C0; box-shadow: 0 30px 60px -30px rgba(80, 50, 30, .45); }
.envelope__front { z-index: 3; background: linear-gradient(160deg, #F1E8D8, #E9DDC8); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.envelope__front::before, .envelope__front::after { content: ""; position: absolute; bottom: 0; width: 50%; height: 100%; background: linear-gradient(to top right, rgba(120, 90, 60, .07), transparent 60%); }
.envelope__front::before { left: 0; clip-path: polygon(0 100%, 0 0, 100% 56%); }
.envelope__front::after { right: 0; transform: scaleX(-1); clip-path: polygon(0 100%, 0 0, 100% 56%); }
.envelope__flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 4; transform-origin: top; background: #E7DAC4; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .9s var(--ease); }
.envelope__card { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; z-index: 2; display: grid; place-content: center; gap: .4rem; background: var(--paper); border: 1px solid rgba(181, 96, 60, .35); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(181, 96, 60, .3); transition: transform 1s var(--ease) .45s; }
.envelope__card-names { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1; }
.envelope__card-date { font-size: .72rem; letter-spacing: .3em; color: var(--terracotta); }
.envelope__seal { position: absolute; z-index: 5; left: 50%; top: 52%; width: 58px; height: 58px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #C9734D, var(--terracotta-deep) 70%); box-shadow: 0 3px 8px rgba(80, 30, 10, .35), inset 0 0 0 4px rgba(255, 255, 255, .08); color: #F6DCC9; font-family: var(--font-display); font-size: 1.1rem; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.envelope.is-open .envelope__seal { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.envelope.is-open .envelope__flap { transform: rotateX(180deg); z-index: 1; }
.envelope.is-open .envelope__card { transform: translateY(-46%); z-index: 4; }
.envelope-open { min-width: 15rem; }
.lang-switch--envelope { margin-top: -.4rem; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--gutter); background: rgba(245, 239, 228, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar__mark { font-family: var(--font-display); font-size: 1.4rem; text-decoration: none; }
.topbar__nav { display: flex; gap: clamp(1rem, 2vw, 2.2rem); }
.topbar__nav a { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); transition: color .3s; }
.topbar__nav a:hover { color: var(--terracotta); }
@media (max-width: 720px) { .topbar__nav { display: none; } }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - 60px); display: grid; align-content: center; justify-items: center; gap: .4rem; padding: var(--space-section) var(--gutter); text-align: center; }
.hero__names { margin: .2rem 0 .4rem; font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: .92; letter-spacing: -.02em; }
.hero__names em { font-style: italic; color: var(--terracotta); }
.hero__lead { margin: 0 0 2rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); color: var(--ink-soft); }
.hero__date { display: flex; align-items: baseline; gap: .7rem; font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; }
.hero__dash { color: var(--terracotta); }
.hero__month { margin-left: .6rem; font-family: var(--font-body); font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; }
.hero__place { margin: 1rem 0 2.4rem; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); }
.countdown { display: flex; gap: clamp(1.4rem, 4vw, 3.5rem); margin-bottom: 2.6rem; }
.countdown div { display: grid; justify-items: center; }
.countdown b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Azulejo tile band ---------- */
.tiles { height: 56px; background-color: var(--paper); border-block: 1px solid rgba(46, 74, 125, .25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%232E4A7D' stroke-width='1.3'%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3Cpath d='M28 4c5 8 5 16 0 24c-5-8-5-16 0-24zM28 52c5-8 5-16 0-24c-5 8-5 16 0 24zM4 28c8-5 16-5 24 0c-8 5-16 5-24 0zM52 28c-8-5-16-5-24 0c8 5 16 5 24 0z'/%3E%3Cpath d='M0 0l10 10M56 0L46 10M0 56l10-10M56 56L46 46' /%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%232E4A7D'/%3E%3C/svg%3E");
  background-size: 56px 56px; opacity: .9; }

/* ---------- Welcome ---------- */
.welcome { max-width: 46rem; margin: 0 auto; padding: var(--space-section) var(--gutter); text-align: center; }
.welcome__text { margin: 0 auto; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); }
.welcome__sign { margin: 2rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.8rem; color: var(--terracotta); }

/* ---------- Weekend ---------- */
.weekend { padding: 0 var(--gutter) var(--space-section); max-width: 78rem; margin: 0 auto; text-align: center; }
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 3rem 0 0; padding: 0; list-style: none; text-align: left; }
.day { position: relative; padding: 2.4rem 2rem 2.2rem; background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.day:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(80, 50, 30, .45); }
.day--main { background: var(--terracotta); color: var(--paper); border-color: var(--terracotta); }
.day__date { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.4rem; font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.day__num { font-family: var(--font-display); font-size: 3.4rem; line-height: .8; letter-spacing: 0; }
.day__title { margin: 0 0 .7rem; font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.day__text { margin: 0 0 1.2rem; }
.day:not(.day--main) .day__text { color: var(--ink-soft); }
.day__meta { margin: 0; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.day__plan { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(251, 248, 242, .35); }
.day__plan li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(251, 248, 242, .35); }
.tbc { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
@media (max-width: 900px) { .days { grid-template-columns: 1fr; } }

/* ---------- Venue ---------- */
.venue { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 78rem; margin: 0 auto; padding: var(--space-section) var(--gutter); }
.venue__text p { color: var(--ink-soft); }
.venue__address { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--olive) !important; }
.venue__links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.venue__map { aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--paper); padding: 10px; }
.venue__map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.25) saturate(.8); }
@media (max-width: 900px) { .venue { grid-template-columns: 1fr; } }

/* ---------- Info cards ---------- */
.info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 78rem; margin: 0 auto var(--space-section); padding: 0 var(--gutter); }
.info__card { padding: 2.2rem 1.8rem; background: var(--paper); outline: 1px solid var(--line); }
.info__card p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
@media (max-width: 1000px) { .info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .info { grid-template-columns: 1fr; } }

/* ---------- RSVP ---------- */
.rsvp { max-width: 46rem; margin: 0 auto; padding: var(--space-section) var(--gutter); text-align: center; }
.rsvp__lead { margin: 0 0 2.6rem; color: var(--ink-soft); }
.form { display: grid; gap: 1.4rem; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.field legend { margin-bottom: .6rem; }
.field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: 300 1rem/1.4 var(--font-body); transition: border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--terracotta); }
.field--choice { display: flex; flex-wrap: wrap; gap: .6rem; }
.field--choice legend { width: 100%; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: inline-block; padding: .7rem 1.2rem; border: 1px solid var(--line); background: var(--paper); font-size: .92rem; transition: background-color .3s, color .3s, border-color .3s; }
.pill input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--paper); }
.pill input:focus-visible + span { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.form__if-yes { display: grid; gap: 1.4rem; transition: opacity .4s var(--ease); }
.form__if-yes[hidden] { display: none; }
.form__submit { justify-self: center; margin-top: .6rem; min-width: 16rem; }
.form__thanks { padding: 2.6rem 1.6rem; background: var(--paper); border: 1px solid var(--line); text-align: center; }
.form__thanks h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; }
.form__thanks p { margin: 0; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.footer { padding: 4rem var(--gutter) 3rem; text-align: center; border-top: 1px solid var(--line); background: var(--lime-deep); }
.footer__names { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 2.6rem; }
.footer p:last-child { margin: 0; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

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

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

/* Static screenshot mode (?open&shot) */
.shot .reveal { opacity: 1 !important; transform: none !important; }
.shot .hero { min-height: 900px; }

/* =========================================================
   V2 — hero in the style of the lace reference
   ========================================================= */
:root {
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --font-caps: "Cormorant Garamond", Georgia, serif;
  --sepia-ink: #4A3F36;
}

/* Top bar floats over the photo, turns solid after the hero */
.topbar { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.topbar, .topbar .topbar__nav a { color: #F6F0E6; }
.topbar .lang-switch { border-color: rgba(246, 240, 230, .5); }
.topbar .lang-switch button { color: #F6F0E6; }
.topbar .lang-switch button[aria-pressed="true"] { background: #F6F0E6; color: var(--ink); }
.topbar.is-solid { background: rgba(245, 239, 228, .92); border-bottom-color: var(--line); backdrop-filter: blur(10px); }
.topbar.is-solid, .topbar.is-solid .topbar__nav a { color: var(--ink-soft); }
.topbar.is-solid .topbar__mark { color: var(--ink); }
.topbar.is-solid .lang-switch { border-color: var(--line); }
.topbar.is-solid .lang-switch button { color: var(--ink-soft); }
.topbar.is-solid .lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; gap: 0; padding: clamp(5rem, 4rem + 3vw, 7rem) var(--gutter) 2rem; overflow: hidden; text-align: center; }
.hero__bg { position: absolute; inset: -4%; z-index: -1; background: url("assets/hero-tree.webp") center 55% / cover no-repeat; transform: scale(1.04); animation: heroDrift 24s var(--ease) both; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(40, 32, 26, .05), rgba(40, 32, 26, .38)); }
@keyframes heroDrift { from { transform: scale(1.1); } to { transform: scale(1.02); } }

.monogram { position: relative; width: clamp(130px, 9vw + 70px, 190px); color: #F6F0E6; }
.monogram svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1; opacity: .85; }
.monogram span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-script); font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); line-height: 1; padding-top: .2em; }
.monogram i { font-style: normal; font-size: .55em; margin: 0 .05em; }

.lace-card { position: relative; width: min(84vw, 560px); aspect-ratio: 1; display: grid; place-content: center; gap: clamp(1rem, .6rem + 1.2vw, 1.8rem); padding: 20%; margin: 1rem 0; background: url("assets/lace.webp") center / contain no-repeat; filter: drop-shadow(0 18px 28px rgba(30, 22, 16, .35)); color: var(--sepia-ink); animation: cardIn 1.4s var(--ease) .2s both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
.lace-card__kicker, .lace-card__date { margin: 0; font-family: var(--font-caps); font-weight: 400; font-size: clamp(.95rem, .7rem + .9vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase; }
.lace-card__names { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: clamp(2.8rem, 1.6rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: 0; }
.lace-card__names span { display: inline-block; margin-left: -.6em; }
.hero__scroll { align-self: end; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: #F6F0E6; opacity: .85; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 38px; margin: .6rem auto 0; background: currentColor; opacity: .6; animation: scrollLine 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes scrollLine { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Welcome now carries place + countdown */
.welcome__place { margin: 0 0 1.6rem; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--olive); }
.welcome .countdown { justify-content: center; margin: 0 0 3rem; }
.welcome .btn { margin-top: 2.2rem; }

/* Envelope screen: same photo, blurred, linen envelope */
.envelope-screen { background: none; }
.envelope-screen::before { content: ""; position: absolute; inset: -20px; background: url("assets/hero-tree.webp") center / cover no-repeat; filter: blur(6px) brightness(.78); }
.envelope-wrap { position: relative; }
.envelope-to { color: #F6F0E6; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.envelope__back { background: #DCD3C4; }
.envelope__front { background: linear-gradient(160deg, #EFE9DF, #E2D9CA); }
.envelope__flap { background: linear-gradient(180deg, #E8E1D5, #DDD4C5); }
.envelope__back, .envelope__front, .envelope__flap { background-blend-mode: multiply; }
.envelope__front::before, .envelope__flap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: repeating-linear-gradient(0deg, rgba(120, 100, 80, .12) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 80, .10) 0 1px, transparent 1px 3px); }
.envelope__card { background: url("assets/lace-700.webp") center / cover no-repeat; border: 0; box-shadow: none; color: var(--sepia-ink); }
.envelope__card-names { font-family: var(--font-script); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.envelope__card-date { color: var(--sepia-ink); font-family: var(--font-caps); letter-spacing: .2em; }
.envelope__seal { background: radial-gradient(circle at 35% 30%, #F4EFE6, #D9D0C1 70%); color: var(--sepia-ink); font-family: var(--font-script); font-size: 1.4rem; box-shadow: 0 3px 10px rgba(30, 20, 10, .3), inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 4px rgba(74, 63, 54, .25); }
.btn--glass { border-color: rgba(246, 240, 230, .8); background: rgba(246, 240, 230, .14); color: #F6F0E6; backdrop-filter: blur(6px); }
.btn--glass:hover, .btn--glass:focus-visible { background: #F6F0E6; color: var(--ink); }
.lang-switch--envelope { border-color: rgba(246, 240, 230, .5); }
.lang-switch--envelope button { color: #F6F0E6; }
.lang-switch--envelope button[aria-pressed="true"] { background: #F6F0E6; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .lace-card, .hero__scroll::after { animation: none; }
}
.lace-card { width: min(84vw, 560px, 66svh); align-content: center; justify-content: stretch; justify-items: center; }
.monogram span { display: flex; align-items: center; justify-content: center; }
.monogram i { align-self: center; }
@media (min-width: 900px) { .hero { padding-top: 5.5rem; } .monogram { width: 150px; } }
.lace-card { --card-w: min(84vw, 560px, 66svh); width: var(--card-w); padding: calc(var(--card-w) * .2); }
.lace-card__names { font-size: calc(var(--card-w) * .12); }
.lace-card__kicker, .lace-card__date { font-size: calc(var(--card-w) * .038); white-space: nowrap; }

/* =========================================================
   V3 — sections after the banner (lace / silver / paper)
   ========================================================= */
:root { --cream: #F8F5EF; --paper-white: #FCFBF8; --text-warm: #3A322C; }
body { background: var(--cream); }
body::before { opacity: .35; }
main > section:not(.hero) { color: var(--text-warm); }

.script-title { margin: 0 0 1.4rem; font-family: var(--font-script); font-weight: 400; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: 1.05; color: var(--text-warm); text-align: center; }
.script-title--small { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); margin-bottom: .8rem; }
.script-title--stack { display: grid; justify-content: center; line-height: .95; font-size: clamp(3rem, 2rem + 4vw, 5.4rem); }
.script-title--stack span:last-child { padding-left: 1.4em; }
.serif-text { max-width: 30rem; margin: 0 auto 2.4rem; font-family: var(--font-caps); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.4; text-align: center; color: #5A5047; }
.btn--paper { min-height: 3.6rem; padding: 0 2.6rem; border: 1px solid var(--text-warm); background: transparent; color: var(--text-warm); font: 400 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1 var(--font-caps); letter-spacing: .02em; text-transform: none; }
.btn--paper:hover, .btn--paper:focus-visible { background: var(--text-warm); color: var(--paper-white); }

/* Greeting */
.greet { position: relative; padding: clamp(7rem, 5rem + 6vw, 11rem) var(--gutter) clamp(4rem, 3rem + 4vw, 7rem); text-align: center; }
.lace-edge { position: absolute; top: -2px; left: 0; right: 0; height: clamp(40px, 3vw + 26px, 70px); background: url("assets/lace-edge.webp") center top / auto 100% repeat-x; transform: scaleY(-1); }
.portrait { position: relative; width: min(64vw, 330px); aspect-ratio: 811 / 1200; margin: 0 auto 3.4rem; }
.portrait__photo { position: absolute; left: 11%; right: 11%; top: 19%; bottom: 12%; overflow: hidden; border-radius: 50%; background: #CFC6B8; }
.portrait__photo img { width: 100%; height: 100%; object-fit: cover; }
.portrait__frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(40, 30, 20, .22)); }
.portrait__key { position: absolute; left: -24%; top: 56%; width: 58%; filter: drop-shadow(0 8px 10px rgba(40, 30, 20, .22)); }
.greet .script-title { font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem); }
.greet__text { max-width: 30rem; margin: 0 auto; font-family: var(--font-caps); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.45; color: #5A5047; }
.soft-heart { display: block; width: 30px; height: 26px; margin: 3.6rem auto 0; background: #8E8077; filter: blur(2.5px); opacity: .7; clip-path: path("M15 26 C15 26 0 16 0 7.5 C0 3 3.5 0 7.5 0 C10.5 0 13.5 2 15 4.5 C16.5 2 19.5 0 22.5 0 C26.5 0 30 3 30 7.5 C30 16 15 26 15 26 Z"); }

/* Calendar */
.calendar { padding: 2rem var(--gutter) clamp(4rem, 3rem + 4vw, 7rem); text-align: center; }
.calendar__row { display: flex; justify-content: center; gap: clamp(1.2rem, 4vw, 3.4rem); margin: 1rem 0 0; padding: 0; list-style: none; }
.calendar__row li { position: relative; display: grid; gap: 1.4rem; justify-items: center; min-width: 3rem; }
.calendar__row span { font-family: var(--font-script); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1; }
.calendar__row b { position: relative; z-index: 1; font-family: var(--font-caps); font-weight: 400; font-size: clamp(2.2rem, 1.7rem + 1.8vw, 3.1rem); line-height: 1; }
.calendar__row .is-day b::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 2.6em; height: 2.6em; transform: translate(-50%, -52%); background: url("assets/doily.webp") center / contain no-repeat; opacity: .9; }

/* Location: lace cloth + silver tray + paper card */
.location { padding: 0 var(--gutter) clamp(4rem, 3rem + 4vw, 7rem); overflow: hidden; }
.location__stage { position: relative; width: min(94vw, 900px); aspect-ratio: 1 / .95; margin: 0 auto; display: grid; place-items: center; }
.location__cloth { position: absolute; width: 92%; left: 4%; top: 2%; filter: drop-shadow(0 10px 18px rgba(40, 30, 20, .12)); }
.location__tray { position: absolute; width: 56%; left: 22%; top: 0; filter: drop-shadow(0 18px 22px rgba(40, 30, 20, .3)); }
.location__card { position: relative; z-index: 2; width: min(66vw, 390px); padding: 2.4rem 1.6rem 1.8rem; background: var(--paper-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); box-shadow: 0 14px 22px -8px rgba(30, 22, 16, .45); text-align: center; }
.location__photo { width: 44%; margin: -4.4rem auto 1rem; border: 6px solid #fff; box-shadow: 0 6px 14px rgba(30, 22, 16, .2); }
.location__glass { position: absolute; right: -9%; top: 18%; width: 26%; filter: drop-shadow(0 6px 8px rgba(30, 22, 16, .2)); }
.location__kind { margin: .4rem 0 0; font-family: var(--font-caps); font-size: 1.3rem; }
.location__name { margin: 0 0 1rem; font-family: var(--font-script); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem); line-height: 1.1; }
.location__addr { margin: 0 0 1.6rem; font-family: var(--font-caps); font-size: 1.12rem; line-height: 1.35; color: #5A5047; }
.location__card .btn--paper { width: 100%; }

/* Plan */
.plan { padding: clamp(3rem, 2rem + 3vw, 5rem) var(--gutter) clamp(4rem, 3rem + 4vw, 7rem); }
.plan__list { max-width: 37rem; margin: 3.4rem auto 0; padding: 0; list-style: none; display: grid; gap: clamp(3rem, 2rem + 3vw, 4.6rem); }
.plan__row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--text-warm); }
.plan__time { font-family: var(--font-script); font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem); line-height: .9; }
.plan__icon { width: clamp(84px, 7vw + 50px, 130px); height: clamp(84px, 7vw + 50px, 130px); object-fit: contain; margin-bottom: calc(clamp(84px, 7vw + 50px, 130px) * -.5); filter: drop-shadow(0 6px 8px rgba(30, 22, 16, .18)); }
.plan__what { display: grid; justify-items: end; text-align: right; font-family: var(--font-caps); }
.plan__what b { font-weight: 400; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); line-height: 1.1; }
.plan__what small { font-size: .95rem; color: #7A6E64; }

/* Dress code */
.dress { padding: clamp(4rem, 3rem + 4vw, 7rem) var(--gutter); text-align: center; }
.swatches { display: grid; grid-template-columns: repeat(3, clamp(72px, 7vw + 40px, 120px)); justify-content: center; row-gap: 1rem; }
.swatches span { width: 118%; aspect-ratio: 1; border-radius: 50%; background: var(--c); margin-left: -9%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03); }

/* Wishes: envelope on lace */
.wishes { padding: 2rem var(--gutter) clamp(4rem, 3rem + 4vw, 7rem); overflow: hidden; }
.wishes__stage { position: relative; width: min(94vw, 780px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.wishes__cloth { position: absolute; width: 74%; transform: rotate(45deg); filter: drop-shadow(0 10px 18px rgba(40, 30, 20, .12)); }
.mail { position: relative; width: min(78vw, 420px); aspect-ratio: 1 / .74; margin-top: 12%; }
.mail__back { position: absolute; inset: 0; background: #E9E2D4; clip-path: polygon(0 0, 50% -36%, 100% 0, 100% 100%, 0 100%); }
.mail__letter { position: absolute; left: 1%; right: 1%; top: -38%; bottom: 30%; padding: 1.8rem 1.6rem; background: var(--paper-white); box-shadow: 0 6px 18px rgba(30, 22, 16, .12); text-align: center; }
.mail__letter p { margin: 0; font-family: var(--font-caps); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.4; color: #5A5047; }
.mail__front { position: absolute; inset: 0; background: linear-gradient(170deg, #EFE9DD, #E4DCCB); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); box-shadow: 0 18px 26px rgba(30, 22, 16, .2); display: grid; place-items: center; }
.mail__front::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: repeating-linear-gradient(0deg, rgba(120, 100, 80, .12) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 80, .1) 0 1px, transparent 1px 3px); }
.mail__seal { position: relative; top: 18%; display: grid; place-items: center; width: 4.6rem; height: 3.4rem; border-radius: 50%; border: 1px solid rgba(90, 80, 71, .35); font-family: var(--font-script); font-size: 1.7rem; color: rgba(90, 80, 71, .7); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7), 0 1px 1px rgba(90, 80, 71, .15); }

/* Care */
.care { padding: clamp(3rem, 2rem + 3vw, 5rem) var(--gutter); text-align: center; }

/* RSVP restyle */
.rsvp { max-width: 40rem; padding: clamp(3rem, 2rem + 3vw, 5rem) var(--gutter) clamp(4rem, 3rem + 4vw, 6rem); }
.rsvp .serif-text { margin-bottom: 2rem; }
.form { gap: 2rem; font-family: var(--font-caps); }
.q { display: grid; gap: .7rem; margin: 0; padding: 0; border: 0; }
.q legend, .q__label { padding: 0; margin-bottom: .3rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); color: var(--text-warm); }
.q__hint { margin-top: -.4rem; font-family: var(--font-body); font-style: italic; font-size: .85rem; color: #6E6259; }
.q--line input { width: 100%; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--text-warm); background: transparent; font: 400 1.15rem/1.3 var(--font-caps); color: var(--text-warm); border-radius: 0; }
.q--line input:focus { outline: none; border-bottom-width: 2px; }
.opt { display: flex; align-items: center; gap: .8rem; cursor: pointer; font-size: 1.2rem; }
.opt input { appearance: none; -webkit-appearance: none; flex: none; width: 1.45rem; height: 1.45rem; margin: 0; border: 1.5px solid #8A7E74; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.opt--box input { border-radius: 0; }
.opt input::after { content: ""; width: .7rem; height: .7rem; border-radius: inherit; background: var(--text-warm); transform: scale(0); transition: transform .25s var(--ease); }
.opt input:checked::after { transform: scale(1); }
.opt input:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.form__submit { width: 100%; }
.form__thanks { background: var(--paper-white); border: 1px solid rgba(58, 50, 44, .2); }
.form__thanks h3 { font-family: var(--font-script); font-size: 2.6rem; }

/* Countdown card: lace frame + paper + bow */
.timer { padding: 2rem var(--gutter) 4rem; }
.timer__card { position: relative; width: min(92vw, 620px); aspect-ratio: 1 / .9; margin: 0 auto; display: grid; align-content: center; justify-items: center; gap: 1.6rem; padding: 14% 12% 16%; background: url("assets/lace.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 14px 20px rgba(40, 30, 20, .18)); }
.timer__card .script-title--stack { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); margin: 0; }
.timer__digits { display: flex; align-items: flex-start; gap: .5rem; font-family: var(--font-caps); color: var(--text-warm); }
.timer__digits div { display: grid; justify-items: center; }
.timer__digits b { font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.timer__digits span { font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); }
.timer__digits i { font-style: normal; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; }
.timer__bow { position: absolute; bottom: 4%; left: 50%; width: 26%; transform: translateX(-50%); }

/* Goodbye */
.bye { padding: 2rem var(--gutter) 5rem; text-align: center; }
.bye .script-title { margin-bottom: .6rem; }
.bye__names { margin: 0; font-family: var(--font-caps); font-size: 1.05rem; letter-spacing: .12em; color: #7A6E64; }

@media (max-width: 560px) {
  .plan__row { grid-template-columns: auto 1fr; }
  .plan__icon { grid-row: span 2; order: -1; margin-bottom: 0; }
  .plan__what { justify-items: start; text-align: left; }
  .location__glass { right: -4%; }
}

/* V4 — video hero (no envelope) */
.hero__bg { background: #3a322c url("assets/hero-poster.jpg") center / cover no-repeat; animation: none; transform: none; inset: 0; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.55) saturate(.65) brightness(.92) contrast(.95); }
.hero__bg::after { z-index: 1; background: radial-gradient(ellipse at 50% 50%, rgba(40, 32, 26, .12), rgba(40, 32, 26, .45)); }
.hero > *:not(.hero__bg) { position: relative; z-index: 2; }
.hero__bg { z-index: 0; }
/* fixes */
.location__photo { height: auto; aspect-ratio: 420 / 320; object-fit: cover; }
.location__cloth, .location__tray, .wishes__cloth { height: auto; align-self: start; justify-self: start; }
.wishes__cloth { aspect-ratio: 1; align-self: center; justify-self: center; position: absolute; left: 13%; top: 13%; }
.mail { width: min(80vw, 440px); margin-top: 22%; }
.mail__letter { top: -52%; bottom: 34%; padding: 1.6rem 1.4rem 1rem; }
.mail__letter p { font-size: clamp(.98rem, .9rem + .3vw, 1.12rem); }
img[data-missing] { visibility: hidden; }
.portrait__key { width: 46%; height: auto; left: -18%; top: 58%; }
.timer__bow { width: 30%; height: auto; bottom: 2%; }
.timer__card .script-title--stack { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.timer__card .script-title--stack span { white-space: nowrap; }
.timer__card { padding: 12% 14% 22%; }
/* decorations never stretch */
.portrait img, .location img, .wishes img, .timer img, .plan__icon { height: auto; max-width: none; }
.portrait__frame { height: 100%; }
.portrait__key { width: 34% !important; left: -12% !important; top: 60% !important; }

/* =========================================================
   V5 — palette "Portuguese olive"
   ========================================================= */
:root {
  --lime: #F6F2EA; --cream: #F6F2EA; --paper: #FBF8F2; --paper-white: #FBF8F2; --lime-deep: #ECE4D4;
  --olive: #7A7A52; --olive-deep: #5F6040; --ochre: #C9A45C; --terracotta: #B5694A; --terracotta-deep: #94523A;
  --text-warm: #3A322C; --ink: #3A322C; --sepia-ink: #3A322C;
}
body { background: var(--cream); }

/* warmer video, lighter sepia */
.hero__video { filter: sepia(.28) saturate(.85) brightness(.95) contrast(.97) hue-rotate(-4deg); }
.hero__bg::after { background: radial-gradient(ellipse at 50% 50%, rgba(58, 50, 30, .08), rgba(58, 50, 30, .42)); }

/* lace & paper: warm ivory instead of grey */
.lace-card, .location__cloth, .wishes__cloth, .timer__card, .lace-edge { filter: sepia(.22) saturate(1.15) brightness(1.02) drop-shadow(0 14px 22px rgba(60, 45, 25, .18)); }
.lace-card { color: var(--text-warm); }
.lace-card__kicker, .lace-card__date { color: var(--olive-deep); }

/* titles & accents */
.script-title { color: var(--text-warm); }
.serif-text, .greet__text, .location__addr, .mail__letter p { color: #5E5346; }
.monogram { color: #FBF3E2; }
.soft-heart { background: var(--ochre); opacity: .75; }
.calendar__row span { color: var(--olive); }
.calendar__row .is-day b { color: var(--terracotta); }
.calendar__row .is-day b::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 1.9em; height: 1.9em; transform: translate(-50%, -52%); border-radius: 50%; border: 1px solid var(--ochre); box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px rgba(201, 164, 92, .45); }
.plan__row { border-bottom-color: rgba(122, 122, 82, .55); }
.plan__time { color: var(--olive-deep); }
.plan__what small { color: var(--olive); }
.location__kind { color: var(--olive); }
.bye__names { color: var(--olive); }

/* buttons */
.btn--paper { border-color: var(--olive-deep); color: var(--olive-deep); }
.btn--paper:hover, .btn--paper:focus-visible { background: var(--olive-deep); color: var(--paper-white); }
.btn--solid { background: var(--olive-deep); border-color: var(--olive-deep); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--terracotta); border-color: var(--terracotta); }

/* form */
.q--line input { border-bottom-color: rgba(95, 96, 64, .6); }
.opt input { border-color: var(--olive); }
.opt input::after { background: var(--olive-deep); }

/* envelope & mail */
.mail__back { background: #E6DCC6; }
.mail__front { background: linear-gradient(170deg, #EEE5D2, #E2D5BA); }
.mail__seal { color: var(--ochre); border-color: rgba(201, 164, 92, .6); }

/* top bar when solid */
.topbar.is-solid { background: rgba(246, 242, 234, .93); }
.topbar.is-solid .lang-switch button[aria-pressed="true"] { background: var(--olive-deep); color: var(--paper); }
.portrait__photo img { filter: sepia(.25) saturate(.9); } img[data-missing], .plan__icon:not([src$=\".webp\"]) { visibility: hidden; }
/* V6 cinematic video: graded in the file itself; slow push-in */
.hero__video { filter: none; animation: pushIn 40s linear infinite alternate; transform-origin: 50% 45%; }
@keyframes pushIn { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero__bg::after { background: linear-gradient(180deg, rgba(20,16,10,.35) 0%, rgba(20,16,10,.05) 30%, rgba(20,16,10,.08) 70%, rgba(20,16,10,.45) 100%); }
@media (prefers-reduced-motion: reduce) { .hero__video { animation: none; } }

/* =========================================================
   V7 — envelope inside the hero (wax seal → card rises)
   ========================================================= */
.invite { --card-w: min(84vw, 560px, 64svh); position: relative; width: var(--card-w); height: var(--card-w); margin: 1rem 0; display: grid; place-items: center; perspective: 1400px; }
.invite .lace-card { position: absolute; inset: 0; margin: 0; width: var(--card-w); z-index: 2; animation: none;
  transform: translateY(14%) scale(.56); transition: transform 1.3s var(--ease), filter 1s var(--ease); }
.invite.is-rise .lace-card { transform: translateY(-34%) scale(.6); z-index: 2; }
.invite.is-out .lace-card { transform: none; z-index: 6; }

/* envelope pieces share one box */
.invite__env, .invite__front { position: absolute; left: 50%; top: 56%; width: calc(var(--card-w) * .82); aspect-ratio: 1.42; transform: translate(-50%, -50%); transition: transform 1.2s var(--ease), opacity .9s var(--ease); }
.invite__env { z-index: 1; }
.invite__back { position: absolute; inset: 0; background: linear-gradient(170deg, #E8DEC9, #D9CCB1); box-shadow: 0 30px 50px -20px rgba(20, 14, 8, .55); }
.invite__flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; transform-origin: top; z-index: 4; background: linear-gradient(180deg, #EFE6D3, #E3D7BE);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 1s var(--ease); filter: drop-shadow(0 2px 2px rgba(60, 45, 25, .15)); }
.invite__front { z-index: 3; background: linear-gradient(160deg, #F3ECDD, #E6DAC2); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.invite__front::before, .invite__flap::before, .invite__back::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: repeating-linear-gradient(0deg, rgba(110, 90, 60, .12) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110, 90, 60, .1) 0 1px, transparent 1px 3px); }
.invite__front::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 7%; height: 1px; background: rgba(201, 164, 92, .55); box-shadow: 0 -5px 0 rgba(201, 164, 92, .25); }
/* when sealed the flap is above the card; open: flips back */
.invite.is-open .invite__flap { transform: rotateX(180deg); z-index: 0; }
.invite.is-out .invite__env, .invite.is-out .invite__front { transform: translate(-50%, 40%) scale(.92); opacity: 0; pointer-events: none; }

/* wax seal */
.invite__seal { position: absolute; z-index: 7; left: 50%; top: calc(56% + var(--card-w) * .82 / 1.42 * .06); transform: translate(-50%, -50%); width: calc(var(--card-w) * .2); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.invite__wax { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 32% 28%, #A5A473 0, #7A7A52 38%, #5A5B3B 75%, #4B4C31 100%);
  box-shadow: 0 6px 14px rgba(20, 14, 8, .45), inset 0 0 0 calc(var(--card-w) * .012) rgba(255, 255, 255, .06), inset 0 -4px 8px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .18); }
.invite__wax::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid rgba(250, 240, 210, .35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.invite__wax span { font-family: var(--font-script); font-size: calc(var(--card-w) * .068); color: #EFE3BF; text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 -1px 0 rgba(255, 255, 255, .15); }
.hero.is-sealed .invite__seal { animation: sealPulse 2.8s var(--ease) infinite; }
@keyframes sealPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
.invite__seal:hover .invite__wax { filter: brightness(1.08); }
.invite__seal:focus-visible { outline: 2px solid #F6F0E6; outline-offset: 6px; border-radius: 50%; }
.invite.is-open .invite__seal { animation: none; transform: translate(-50%, -30%) scale(1.25) rotate(-12deg); opacity: 0; pointer-events: none; }

.invite__hint { position: absolute; bottom: -1.6rem; left: 0; right: 0; margin: 0; font-family: var(--font-caps); font-style: italic; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); letter-spacing: .04em; color: #F8F1E1; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); transition: opacity .5s; animation: hintIn 1.2s var(--ease) 1s both; }
@keyframes hintIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.invite.is-open .invite__hint { opacity: 0; }

.hero__scroll { transition: opacity .8s var(--ease) .4s; }
.hero.is-sealed .hero__scroll { opacity: 0; pointer-events: none; }

/* sound toggle */
.sound { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(95, 96, 64, .4); background: rgba(246, 242, 234, .85); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; }
.sound[hidden] { display: none; }
.sound__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.sound__bars i { width: 2px; height: 4px; background: var(--olive-deep); }
.sound.is-on .sound__bars i { animation: bar 1s ease-in-out infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .2s; } .sound.is-on .sound__bars i:nth-child(3) { animation-delay: .4s; } .sound.is-on .sound__bars i:nth-child(4) { animation-delay: .1s; }
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* page sections reveal more cinematically */
.reveal { transform: translateY(34px); filter: blur(4px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }
.reveal.is-in { filter: none; }
.portrait.reveal { transform: translateY(40px) scale(.96); }
.portrait.reveal.is-in { transform: none; }
.portrait.is-in .portrait__key { animation: keySwing 4s ease-in-out 1.2s infinite; transform-origin: 62% 8%; }
@keyframes keySwing { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }

@media (prefers-reduced-motion: reduce) {
  .invite .lace-card, .invite__env, .invite__front, .invite__flap, .invite__seal { transition: none; animation: none; }
  .reveal { filter: none; }
}
/* envelope fix: card fully inside, flap above card */
.invite .lace-card { transform: translateY(6%) scale(.48); }
.invite.is-rise .lace-card { transform: translateY(-30%) scale(.52); }
.invite.is-out .lace-card { transform: none; }
.invite__flap { position: absolute; left: 50%; top: calc(56% - var(--card-w) * .82 / 1.42 / 2); width: calc(var(--card-w) * .82); height: calc(var(--card-w) * .82 / 1.42 * .6); transform: translateX(-50%); transform-origin: top center; z-index: 5; }
.invite.is-open .invite__flap { transform: translateX(-50%) rotateX(180deg); z-index: 1; }
.invite.is-out .invite__flap { opacity: 0; transition: opacity .6s var(--ease); }
.invite__front { z-index: 4; }

/* =========================================================
   V8 — envelope like the reference: lace-trimmed rounded flap
   ========================================================= */
.invite__seal { display: none; }
.invite__hit { position: absolute; z-index: 8; left: 50%; top: 56%; width: calc(var(--card-w) * .86); aspect-ratio: 1.42; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: pointer; }
.invite__hit:focus-visible { outline: 2px solid #F6F0E6; outline-offset: 8px; }
.invite.is-open .invite__hit { pointer-events: none; }

.invite__env, .invite__front { width: calc(var(--card-w) * .86); }
.invite__back { background: linear-gradient(170deg, #E4DFD2, #D8D1C1); }
.invite__front { background: linear-gradient(165deg, #EEEAE0, #E5DFD1); clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%); }
.invite__front::after { left: 0; right: 0; bottom: auto; top: 0; height: 100%; background:
  linear-gradient(to top right, transparent calc(50% - .6px), rgba(120, 105, 80, .14) 50%, transparent calc(50% + .6px)) left bottom / 50% 62% no-repeat,
  linear-gradient(to top left, transparent calc(50% - .6px), rgba(120, 105, 80, .14) 50%, transparent calc(50% + .6px)) right bottom / 50% 62% no-repeat; box-shadow: none; }

.invite__flap { background: none; clip-path: none; filter: drop-shadow(0 6px 8px rgba(40, 30, 15, .22));
  width: calc(var(--card-w) * .86); height: calc(var(--card-w) * .86 / 1.42 * .86);
  top: calc(56% - var(--card-w) * .86 / 1.42 / 2); }
.invite__flap::before { display: none; }
.invite__lace, .invite__paper { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.invite__lace { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H100%20V10%20Q96.38%2010.52%2096.93%2014.14%20Q93.30%2014.67%2093.86%2018.29%20Q90.23%2018.81%2090.79%2022.43%20Q87.16%2022.95%2087.71%2026.57%20Q84.09%2027.09%2084.64%2030.71%20Q81.02%2031.24%2081.57%2034.86%20Q77.95%2035.38%2078.50%2039.00%20Q74.88%2039.52%2075.43%2043.14%20Q71.80%2043.67%2072.36%2047.29%20Q68.73%2047.81%2069.29%2051.43%20Q65.66%2051.95%2066.21%2055.57%20Q62.59%2056.09%2063.14%2059.71%20Q59.52%2060.24%2060.07%2063.86%20Q56.45%2064.38%2057.00%2068.00%20Q50%2079%2043%2068%20Q43.55%2064.38%2039.93%2063.86%20Q40.48%2060.24%2036.86%2059.71%20Q37.41%2056.09%2033.79%2055.57%20Q34.34%2051.95%2030.71%2051.43%20Q31.27%2047.81%2027.64%2047.29%20Q28.20%2043.67%2024.57%2043.14%20Q25.12%2039.52%2021.50%2039.00%20Q22.05%2035.38%2018.43%2034.86%20Q18.98%2031.24%2015.36%2030.71%20Q15.91%2027.09%2012.29%2026.57%20Q12.84%2022.95%209.21%2022.43%20Q9.77%2018.81%206.14%2018.29%20Q6.70%2014.67%203.07%2014.14%20Q3.62%2010.52%200.00%2010.00%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H100%20V10%20Q96.38%2010.52%2096.93%2014.14%20Q93.30%2014.67%2093.86%2018.29%20Q90.23%2018.81%2090.79%2022.43%20Q87.16%2022.95%2087.71%2026.57%20Q84.09%2027.09%2084.64%2030.71%20Q81.02%2031.24%2081.57%2034.86%20Q77.95%2035.38%2078.50%2039.00%20Q74.88%2039.52%2075.43%2043.14%20Q71.80%2043.67%2072.36%2047.29%20Q68.73%2047.81%2069.29%2051.43%20Q65.66%2051.95%2066.21%2055.57%20Q62.59%2056.09%2063.14%2059.71%20Q59.52%2060.24%2060.07%2063.86%20Q56.45%2064.38%2057.00%2068.00%20Q50%2079%2043%2068%20Q43.55%2064.38%2039.93%2063.86%20Q40.48%2060.24%2036.86%2059.71%20Q37.41%2056.09%2033.79%2055.57%20Q34.34%2051.95%2030.71%2051.43%20Q31.27%2047.81%2027.64%2047.29%20Q28.20%2043.67%2024.57%2043.14%20Q25.12%2039.52%2021.50%2039.00%20Q22.05%2035.38%2018.43%2034.86%20Q18.98%2031.24%2015.36%2030.71%20Q15.91%2027.09%2012.29%2026.57%20Q12.84%2022.95%209.21%2022.43%20Q9.77%2018.81%206.14%2018.29%20Q6.70%2014.67%203.07%2014.14%20Q3.62%2010.52%200.00%2010.00%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E");
  background: url("assets/lace-tile.webp") center / calc(var(--card-w) * .2) repeat; filter: sepia(.15) brightness(1.04); }
.invite__paper { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H100%20V3%20L58%2059%20Q50%2069%2042%2059%20L0%203%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200%20H100%20V3%20L58%2059%20Q50%2069%2042%2059%20L0%203%20Z%27%20fill%3D%27black%27/%3E%3C/svg%3E"); background: linear-gradient(175deg, #F1EDE4, #E7E1D4); }
.invite__paper::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(0deg, rgba(110, 90, 60, .08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(110, 90, 60, .07) 0 1px, transparent 1px 3px); }
.invite__mono { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-family: var(--font-script); font-size: calc(var(--card-w) * .095); line-height: 1; color: #2E2722; white-space: nowrap; }
.invite__mono i { font-style: normal; font-size: .6em; margin: 0 -.05em; }
.invite.is-open .invite__flap { filter: none; }

/* intro text above the envelope */
.invite__intro { position: absolute; z-index: 9; left: 50%; bottom: calc(44% + var(--card-w) * .86 / 1.42 / 2 + .6rem); transform: translateX(-50%); width: 120vw; max-width: 1100px; text-align: center; color: #F8F3E8; transition: opacity .8s var(--ease), transform 1s var(--ease); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.invite__intro p { margin: 0 0 .2rem; font-family: var(--font-caps); font-size: clamp(.9rem, .75rem + .6vw, 1.3rem); letter-spacing: .14em; text-transform: uppercase; }
.invite__intro h2 { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: clamp(2.8rem, 1.6rem + 4.8vw, 5.8rem); line-height: 1.05; }
.invite.is-open .invite__intro { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
.invite__hint { bottom: calc(56% - var(--card-w) * .86 / 1.42 / 2 - 3.4rem); font-style: normal; font-size: clamp(.85rem, .75rem + .4vw, 1.1rem); letter-spacing: .16em; text-transform: uppercase; }
.hero.is-sealed .monogram { opacity: 0; }
.monogram { transition: opacity .8s var(--ease) .6s; }
.hero.is-sealed .invite__env { animation: envFloat 5s ease-in-out infinite; }
@keyframes envFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .hero.is-sealed .invite__env { animation: none; } }
/* V8b — flap is a rendered image with real lace trim */
.invite__lace, .invite__paper { display: none; }
.invite__flap { background: url("assets/flap.webp") center top / 100% 100% no-repeat; height: calc(var(--card-w) * .86 / 1.42 * .86 * 1.0); filter: drop-shadow(0 4px 6px rgba(40, 30, 15, .18)); }
.invite__mono { top: 46%; color: #2A2420; }
.invite__front { background: linear-gradient(165deg, #EEEAE0, #E2DCCD); }
.invite__back { box-shadow: 0 34px 60px -24px rgba(10, 8, 4, .7); }
.invite__hint { bottom: calc(44% - var(--card-w) * .86 / 1.42 / 2 - 3rem); }

/* =========================================================
   V9 — simple envelope (her image), click → card fades in
   ========================================================= */
.invite { --env-w: min(76vw, 620px, 80svh); width: 100%; height: auto; min-height: 60svh; display: grid; justify-items: center; align-content: center; gap: 0; perspective: none; }
.invite__env, .invite__front, .invite__flap, .invite__hit, .invite__seal { display: none !important; }
.invite__intro { position: static; transform: none; width: auto; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); color: #FBF6EC; }
.invite__intro p { font-size: clamp(.85rem, .72rem + .5vw, 1.15rem); letter-spacing: .2em; margin-bottom: .4rem; }
.invite__intro h2 { font-size: clamp(3rem, 1.8rem + 4.6vw, 6rem); }
.mailpiece { position: relative; width: var(--env-w); padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 26px 34px rgba(10, 8, 4, .45)); transition: transform .5s var(--ease), filter .5s var(--ease), opacity .7s var(--ease); }
.mailpiece img { display: block; width: 100%; height: auto; }
.mailpiece:hover { transform: translateY(-4px); filter: drop-shadow(0 32px 40px rgba(10, 8, 4, .5)); }
.mailpiece:focus-visible { outline: 2px solid #F6F0E6; outline-offset: 10px; }
.mailpiece__crest { position: absolute; left: 50%; top: 42%; width: 17%; transform: translate(-50%, -50%); color: #BDB5A8; }
.mailpiece__crest svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 -1px 0 rgba(120, 105, 85, .35)); }
.mailpiece__crest span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-script); font-size: calc(var(--env-w) * .07); color: #A69D90; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(110, 95, 75, .35); }
.mailpiece__crest i { font-style: normal; font-size: .55em; }
.invite__hint { position: static; margin-top: clamp(1.4rem, 3.4vh, 2.4rem); animation: none; letter-spacing: .2em; color: #FBF6EC; }
/* hairlines like the reference */
.invite::before, .invite::after { content: ""; position: absolute; left: 50%; width: calc(var(--env-w) * 1.08); height: 1px; transform: translateX(-50%); background: rgba(251, 246, 236, .22); }
.invite::before { top: calc(50% - var(--env-w) * .59 / 2 - 1.4rem + 2.4rem); }
.invite::after { top: calc(50% + var(--env-w) * .59 / 2 + .2rem + 1.2rem); }
/* card appears in place */
.invite .lace-card { position: absolute; left: 50%; top: 50%; inset: auto; width: var(--card-w); transform: translate(-50%, -50%) scale(.97); opacity: 0; pointer-events: none; transition: opacity .9s var(--ease) .25s, transform 1.1s var(--ease) .25s; }
.invite.is-out .lace-card { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.invite.is-out .mailpiece, .invite.is-out .invite__intro, .invite.is-out .invite__hint, .invite.is-out::before, .invite.is-out::after { opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.invite.is-out .mailpiece { transform: scale(.98); }
.hero { grid-template-columns: minmax(0, 1fr); }
.invite { width: 100%; max-width: 100%; min-width: 0; }
.invite__intro h2 { white-space: nowrap; }
@media (max-width: 600px) { .invite { --env-w: 88vw; } .invite__intro h2 { font-size: 13vw; } }
html, body { overflow-x: clip; max-width: 100%; }

/* V10 — gate: only video + envelope until the envelope is clicked */
body.is-gated { overflow: hidden; height: 100svh; }
body.is-gated .topbar, body.is-gated .sound, body.is-gated main > section:not(.hero), body.is-gated .footer, body.is-gated .lace-edge, body.is-gated .hero__scroll, body.is-gated .monogram { display: none !important; }
body.is-gated .hero { position: fixed; inset: 0; min-height: 0; height: 100svh; z-index: 40; padding: 0 var(--gutter); grid-template-rows: 1fr; align-content: center; }
body.is-gated .invite { min-height: 0; }
.topbar { animation: barIn .9s var(--ease) both; }
@keyframes barIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.invite.is-out .mailpiece, .invite.is-out .invite__intro, .invite.is-out .invite__hint { display: none; }
.invite.is-out::before, .invite.is-out::after { display: none; }
.invite.is-out .lace-card { position: relative; left: auto; top: auto; transform: none; animation: cardIn 1.2s var(--ease) both; opacity: 1; }
.invite::before, .invite::after { display: none !important; }
.hero__video { animation: none !important; transform: none !important; filter: none !important; }

/* V11 — premium entrance on load */
.hero__bg { animation: bgIn 2.4s ease-out both; }
@keyframes bgIn { from { opacity: 0; } to { opacity: 1; } }
.invite__intro p { animation: kickerIn 2s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes kickerIn { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } to { opacity: 1; letter-spacing: .2em; filter: blur(0); } }
.invite__intro h2 { animation: namesIn 2.6s cubic-bezier(.22,1,.36,1) 1.3s both; }
@keyframes namesIn { 0% { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.03); clip-path: inset(0 100% 0 0); } 45% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; clip-path: inset(0 -10% 0 -10%); } }
.mailpiece { animation: envIn 2.2s cubic-bezier(.22,1,.36,1) 2.1s both; }
@keyframes envIn { from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px) drop-shadow(0 0 0 rgba(0,0,0,0)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 26px 34px rgba(10,8,4,.45)); } }
.mailpiece__crest { animation: crestIn 2s ease-out 3.4s both; }
@keyframes crestIn { from { opacity: 0; } to { opacity: 1; } }
.invite__hint { animation: hintIn2 1.6s ease-out 3.9s both; }
@keyframes hintIn2 { from { opacity: 0; letter-spacing: .4em; } to { opacity: .9; letter-spacing: .2em; } }
.mailpiece:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .hero__bg, .invite__intro p, .invite__intro h2, .mailpiece, .mailpiece__crest, .invite__hint { animation: none; } }

/* V12 — subtle vignette + fine film grain over the hero video */
.hero__bg::after { background:
  radial-gradient(ellipse 75% 70% at 50% 48%, rgba(0,0,0,0) 55%, rgba(12,9,5,.42) 100%),
  linear-gradient(180deg, rgba(20,16,10,.28) 0%, rgba(20,16,10,.04) 30%, rgba(20,16,10,.06) 70%, rgba(20,16,10,.38) 100%); }
.hero__bg::before { content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .hero__bg::before { animation: none; } }
.names-img { line-height: 0; }
.names-img img { display: block; width: min(78vw, 640px); height: auto; margin: .4rem auto 0; filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); }
/* names: no cropping, softer colour */
@keyframes namesIn { 0% { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.03); clip-path: inset(-40% 100% -40% -10%); } 45% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; clip-path: inset(-40% -10% -40% -10%); } }
.invite__intro h2 { padding: .15em .2em .25em; line-height: 1.25; color: #EDE4D3; opacity: .92; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.invite__intro p { color: #EDE4D3; }
.invite__intro p { position: relative; top: .9em; z-index: 1; }
/* envelope exactly centred on screen; text sits above/below it */
body.is-gated .invite { position: relative; height: 100svh; min-height: 0; display: grid; place-items: center; }
body.is-gated .invite__intro { position: absolute; left: 0; right: 0; bottom: calc(50% + var(--env-w) * .587 / 2 + clamp(.8rem, 2.4vh, 1.8rem)); margin: 0; }
body.is-gated .invite__hint { position: absolute; left: 0; right: 0; top: calc(50% + var(--env-w) * .587 / 2 + clamp(1.4rem, 3.4vh, 2.4rem)); margin: 0; }
body.is-gated .invite__intro { transform: none; width: auto; max-width: none; }
.lang-switch--gate { display: none; }
body.is-gated .lang-switch--gate { display: inline-flex; position: fixed; top: 1.2rem; right: 1.2rem; z-index: 50; border-color: rgba(237,228,211,.45); animation: hintIn2 1.6s ease-out 3.9s both; }
body.is-gated .lang-switch--gate button { color: #EDE4D3; }
body.is-gated .lang-switch--gate button[aria-pressed="true"] { background: #EDE4D3; color: var(--ink); }
:lang(uk) .script-title { font-family: "Marck Script", var(--font-script); }
/* richer, finer film grain */
.hero__bg::before { opacity: .2; mix-blend-mode: soft-light; background-size: 160px 160px; animation: grain .8s steps(8) infinite; }
.hero__bg .grain2 { display: none; }
.invite .lace-card { position: relative; left: auto; top: auto; display: none; }
.invite.is-out .lace-card { display: grid; animation: cardReveal 1.6s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardReveal { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.shot .hero__bg::before { animation: none; }
/* soft focus at the edges, sharp centre */
.hero__edge { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 55%, #000 100%); }
/* fit everything on short screens: envelope size follows screen height too */
.invite { --env-w: min(76vw, 620px, calc((100svh - 22rem) / .587)); }
@media (max-width: 600px) { .invite { --env-w: min(88vw, calc((100svh - 20rem) / .587)); } }
.invite__intro h2 { font-size: clamp(2.6rem, min(1.4rem + 4.6vw, 9svh), 6rem); }
body.is-gated .invite__intro { bottom: calc(50% + var(--env-w) * .587 / 2 + clamp(.6rem, 2vh, 1.4rem)); }
body.is-gated .invite__hint { top: calc(50% + var(--env-w) * .587 / 2 + clamp(1rem, 3vh, 2.2rem)); }
.invite { --env-w: min(76vw, 620px, calc((100svh - 16rem) / .587)); }
/* darker while sealed, brightens when opened */
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(18, 14, 9, .5); transition: opacity 1.8s cubic-bezier(.22,1,.36,1); }
.hero.is-opened .hero__shade { opacity: 0; }
/* centre the whole group (text + envelope + hint) as one block */
body.is-gated .invite { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100svh; }
body.is-gated .invite__intro, body.is-gated .invite__hint { position: static; margin: 0; }
body.is-gated .invite__intro { margin-bottom: clamp(1rem, 3vh, 2rem); }
body.is-gated .invite__hint { margin-top: clamp(1.4rem, 3.6vh, 2.4rem); }
.invite__intro p { top: 0; }
/* mobile: bigger text + envelope */
@media (max-width: 600px) {
  .invite { --env-w: min(90vw, calc((100svh - 17rem) / .587)); }
  .invite__intro p { font-size: 1rem; letter-spacing: .18em; }
  .invite__intro h2 { font-size: 15vw; }
  .invite__hint { font-size: 1rem; letter-spacing: .16em; }
}
.invite__intro h2 { font-size: clamp(3.4rem, min(2rem + 5.8vw, 12svh), 7.6rem); }
@media (max-width: 600px) { .invite__intro h2 { font-size: 17vw; } }

/* V13 — more refined entrance + two-step opening */
.invite__intro p, .invite__hint { animation: none !important; }
.ch { display: inline-block; opacity: 0; filter: blur(5px); transform: translateY(.35em); animation: chIn 1.4s cubic-bezier(.22,1,.36,1) both; }
.invite__intro p .ch { animation-delay: calc(.9s + var(--i) * 45ms); }
.invite__hint .ch { animation-delay: calc(4.2s + var(--i) * 28ms); }
@keyframes chIn { to { opacity: 1; filter: blur(0); transform: none; } }
.invite__intro h2 { animation: namesIn2 3.2s cubic-bezier(.22,1,.36,1) 1.6s both; }
@keyframes namesIn2 {
  0% { opacity: 0; filter: blur(18px); transform: translateY(18px) scale(1.04); letter-spacing: .06em; clip-path: inset(-40% 100% -40% -10%); }
  50% { opacity: 1; }
  100% { opacity: .95; filter: blur(0); transform: none; letter-spacing: 0; clip-path: inset(-40% -10% -40% -10%); } }
.mailpiece { animation: envIn2 2.6s cubic-bezier(.16,1,.3,1) 2.6s both; }
@keyframes envIn2 {
  0% { opacity: 0; transform: translateY(60px) scale(.94) rotate(-1.2deg); filter: blur(12px) drop-shadow(0 0 0 rgba(0,0,0,0)); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 26px 34px rgba(10,8,4,.45)); } }
.mailpiece__crest { animation: crestIn 2.4s ease-out 3.8s both; }
/* gentle breathing once settled */
.hero.is-sealed .mailpiece img { animation: breathe 6s ease-in-out 5.4s infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* opening: lift, then dissolve away; text recedes */
.invite.is-leaving .mailpiece { animation: none; transform: translateY(-14px) scale(1.03); filter: blur(0) drop-shadow(0 40px 50px rgba(10,8,4,.5)); transition: transform .5s cubic-bezier(.22,1,.36,1), filter .5s; }
.invite.is-leaving .mailpiece { animation: envOut 1.1s cubic-bezier(.65,0,.35,1) .25s forwards; }
@keyframes envOut { 0% { opacity: 1; transform: translateY(-14px) scale(1.03); filter: blur(0); } 100% { opacity: 0; transform: translateY(10px) scale(.92); filter: blur(10px); } }
.invite.is-leaving .invite__intro, .invite.is-leaving .invite__hint { transition: opacity .9s ease, filter .9s ease, transform .9s ease; opacity: 0; filter: blur(6px); transform: translateY(-8px); }
.invite.is-leaving .invite__hint { transform: translateY(8px); }
.invite.is-out .lace-card { animation: cardBloom 2s cubic-bezier(.16,1,.3,1) both; }
@keyframes cardBloom { 0% { opacity: 0; transform: translateY(24px) scale(.92); filter: blur(12px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .ch, .invite__intro h2, .mailpiece, .mailpiece img, .invite.is-out .lace-card { animation: none !important; opacity: 1; filter: none; transform: none; } }
.hero__bg::before { opacity: .32; background-size: 140px 140px; }
.hero__shade { background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(18,14,9,.34) 0%, rgba(18,14,9,.5) 70%, rgba(18,14,9,.56) 100%); }
.hero__shade { background: radial-gradient(ellipse 58% 54% at 50% 50%, rgba(18,14,9,.16) 0%, rgba(18,14,9,.34) 55%, rgba(18,14,9,.52) 100%); }
/* premium language switch: no box, serif caps, thin underline on active */
.lang-switch, body.is-gated .lang-switch--gate, .topbar .lang-switch, .topbar.is-solid .lang-switch { border: 0 !important; gap: .2rem; align-items: center; }
.lang-switch button { position: relative; padding: .4rem .55rem; background: none !important; font-family: var(--font-caps); font-weight: 400; font-size: .95rem; letter-spacing: .16em; opacity: .55; transition: opacity .4s ease; }
.lang-switch button + button::before { content: ""; position: absolute; left: -.15rem; top: 50%; width: 1px; height: .8em; transform: translateY(-50%); background: currentColor; opacity: .35; }
.lang-switch button::after { content: ""; position: absolute; left: .55rem; right: calc(.55rem + .16em); bottom: .15rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.lang-switch button[aria-pressed="true"] { opacity: 1; }
.lang-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.lang-switch button:hover { opacity: .9; }
body.is-gated .lang-switch--gate button, .topbar .lang-switch button, body.is-gated .lang-switch--gate button[aria-pressed="true"], .topbar .lang-switch button[aria-pressed="true"] { color: #EDE4D3 !important; }
.topbar.is-solid .lang-switch button, .topbar.is-solid .lang-switch button[aria-pressed="true"] { color: var(--ink) !important; }
/* refined interlaced monogram, debossed */
.mailpiece__crest { width: 19%; top: 41%; color: #B9B0A2; }
.mailpiece__crest svg { stroke-width: 1.2; }
.mailpiece__crest .mono { position: absolute; inset: 0; display: block; font-family: var(--font-script); color: #A99F91;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(105,92,72,.38); }
.mono b { position: absolute; font-weight: 400; line-height: 1; }
.mono__o { left: 22%; top: 24%; font-size: calc(var(--env-w) * .16); }
.mono__j { left: 46%; top: 33%; font-size: calc(var(--env-w) * .15); }
.mono__o { left: 23%; top: 27%; font-size: calc(var(--env-w) * .118); }
.mono__j { left: 45%; top: 31%; font-size: calc(var(--env-w) * .112); }
.mailpiece__crest svg { stroke-width: 1.4; }
.invite__intro p, .invite__hint { font-weight: 500; }
/* ornate rose crest frame around the monogram */
.mailpiece__crest { width: 22%; top: 40%; }
.crest__frame { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(105,92,72,.28)); }
.mono__o { left: 27%; top: 30%; font-size: calc(var(--env-w) * .11); }
.mono__j { left: 45%; top: 34%; font-size: calc(var(--env-w) * .104); }
.invite__intro h2 { font-size: clamp(3.7rem, min(2.2rem + 6.3vw, 13svh), 8.2rem); }
@media (max-width: 600px) { .invite__intro h2 { font-size: 18.5vw; } }
body.is-gated .invite__intro { margin-bottom: clamp(.2rem, 1vh, .8rem); position: relative; top: clamp(.4rem, 1.6vh, 1.2rem); }
.invite__intro p { position: relative; top: 1.1em; }
/* monogram v3: contained inside the crest, debossed in the frame colour */
.mailpiece__crest .mono { inset: 26% 22% 24% 22%; display: flex; align-items: center; justify-content: center; gap: 0; color: #B3AA9C; }
.mono b, .mono i { position: static; }
.mono__o, .mono__j { font-family: var(--font-caps); font-style: italic; font-weight: 500; font-size: calc(var(--env-w) * .068); line-height: 1; letter-spacing: 0; }
.mono__amp { font-family: var(--font-script); font-style: normal; font-size: calc(var(--env-w) * .034); margin: 0 .06em; transform: translateY(.1em); opacity: .9; }

/* =========================================================
   V14 — premium finish (same layout)
   ========================================================= */
/* film-like grade: warm highlights, olive shadows, lifted blacks */
.hero__video { filter: contrast(1.06) saturate(.88) sepia(.08) brightness(1.02) !important; }
.hero__bg .hero__tone { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(230, 196, 140, .22) 0%, rgba(120, 110, 70, .12) 55%, rgba(40, 46, 30, .28) 100%); }
.hero__bg .hero__lift { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(36, 30, 20, .10); mix-blend-mode: lighten; }
/* titles: soft ivory with gentle depth */
.invite__intro h2 { color: #F1E9DA; text-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 28px rgba(10,8,4,.35); }
.invite__intro p, .invite__hint { color: #EADFC9; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
/* envelope: real contact shadow + soft ambient, slightly warmer paper */
.mailpiece img { filter: sepia(.06) brightness(1.01); }
.mailpiece::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(8,6,3,.55), transparent 70%); filter: blur(10px); }
.mailpiece { filter: drop-shadow(0 30px 40px rgba(10, 8, 4, .42)) drop-shadow(0 4px 6px rgba(10, 8, 4, .25)); }
/* lace card after opening: same depth */
.invite .lace-card { filter: sepia(.22) saturate(1.15) brightness(1.02) drop-shadow(0 30px 40px rgba(10,8,4,.4)) drop-shadow(0 4px 6px rgba(10,8,4,.2)); }
.word { display: inline-block; white-space: nowrap; }
.invite__hint { line-height: 1.7; }
/* language change: everything re-appears together, quickly */
.lang-swap .ch { animation-duration: .7s !important; animation-delay: calc(var(--i) * 12ms) !important; }
.mono-img { position: absolute; left: 50%; top: 52%; width: 50%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(105,92,72,.35)); }
/* fixes: breathing only on the envelope image, monogram stays put */
.hero.is-sealed .mailpiece img { animation: none; }
.invite:not(.is-out) .mailpiece > img { animation: breathe 6s ease-in-out 5.4s infinite; }
.mailpiece .mono-img { position: absolute; display: block; width: 52%; height: auto; left: 50%; top: 53%; transform: translate(-50%, -50%); animation: none !important; }
/* smooth, unhurried opening — no jump */
.invite.is-leaving .mailpiece { transition: none; transform: none; animation: envOut2 1.3s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes envOut2 {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 30px 40px rgba(10,8,4,.42)); }
  35%  { opacity: 1; transform: translateY(-6px) scale(1.012); filter: blur(0) drop-shadow(0 38px 48px rgba(10,8,4,.45)); }
  100% { opacity: 0; transform: translateY(4px) scale(.96); filter: blur(9px) drop-shadow(0 20px 30px rgba(10,8,4,0)); } }
.mailpiece .mono-img { width: 58%; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; }
.topbar__mark { justify-self: start; }
.topbar .lang-switch { justify-self: end; }
/* real paper surface behind the content */
body { background: #F5F0E6 url("assets/paper.jpg") center / 600px 600px repeat; }
body::before { opacity: .18; }
main > section:not(.hero) { background: transparent; }
.footer { background: transparent; }
main::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 100, 70, .10) 100%); }
body { background: #F5F0E6 url("assets/paper.jpg?v=3") 0 0 / 512px 512px repeat; }
main::after { display: none; }
.shot .hero, .shot body.is-gated .hero { min-height: 900px !important; height: 900px !important; }

/* =========================================================
   V15 — premium pass on the content
   ========================================================= */
/* small spaced caps above each script title */
.eyebrow-sm { margin: 0 0 .9rem; text-align: center; font-family: var(--font-caps); font-weight: 500; font-size: clamp(.78rem, .7rem + .25vw, .92rem); letter-spacing: .32em; text-transform: uppercase; color: var(--olive); }
/* ornamental divider */
.flourish { width: min(260px, 60vw); height: 24px; margin: clamp(1.5rem, 3vw, 2.5rem) auto; background: url("assets/icons/flourish.svg") center / contain no-repeat; opacity: .85; }
/* calm, consistent section rhythm */
.greet { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.calendar, .plan, .dress, .care, .rsvp { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.script-title { letter-spacing: .005em; }
.script-title--stack { font-size: clamp(2.8rem, 2rem + 3.4vw, 4.8rem); }

/* plan: engraved icons in a soft medallion */
.plan__icon { width: clamp(70px, 5vw + 44px, 104px); height: clamp(70px, 5vw + 44px, 104px); padding: 14%; margin-bottom: calc(clamp(70px, 5vw + 44px, 104px) * -.5); border-radius: 50%; background: radial-gradient(circle, #FBF8F1 0 62%, transparent 63%); box-shadow: 0 0 0 1px rgba(122,122,82,.28), 0 0 0 6px rgba(251,248,241,.9), 0 0 0 7px rgba(201,164,92,.35); filter: none; }
.plan__row { border-bottom: 1px solid rgba(122,122,82,.38); padding-bottom: 1.1rem; }
.plan__row:hover .plan__icon { transform: translateY(-3px); transition: transform .5s cubic-bezier(.22,1,.36,1); }

/* location card: deckled paper + thin double rule */
.location__card { box-shadow: 0 1px 1px rgba(30,22,16,.08), 0 18px 34px -12px rgba(30,22,16,.35); outline: 1px solid rgba(122,122,82,.25); outline-offset: -12px; }
.location__card::after { content: ""; position: absolute; inset: 16px; border: .5px solid rgba(122,122,82,.18); pointer-events: none; }
.location__photo { border: 7px solid #FCFAF5; box-shadow: 0 8px 18px rgba(30,22,16,.22); transform: rotate(-2deg); }

/* dress code: fabric-like swatches with soft sheen */
.swatches span { box-shadow: inset 0 -10px 18px rgba(0,0,0,.06), inset 0 8px 14px rgba(255,255,255,.35), 0 8px 18px -8px rgba(40,30,20,.3); }

/* wishes envelope: paper, not flat gradient */
.mail__back { background: #E7DFCF; }
.mail__front { background: #EFE8DA url("assets/paper.jpg?v=3") center / 380px repeat; }
.mail__front::before { display: none; }
.mail__letter { background: #FCFAF5 url("assets/paper.jpg?v=3") center / 380px repeat; box-shadow: 0 6px 18px rgba(30,22,16,.12), inset 0 0 0 10px rgba(252,250,245,.6), inset 0 0 0 11px rgba(122,122,82,.2); }
.mail__seal { width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 0; color: #EFE3BF; font-size: 1.5rem;
  background: radial-gradient(circle at 34% 30%, #A5A473 0, #7A7A52 40%, #56573A 78%, #48492F 100%);
  box-shadow: 0 4px 10px rgba(20,14,8,.4), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 5px rgba(255,255,255,.18); text-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* reply card */
.reply-card { position: relative; margin: 2.2rem auto 0; padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) clamp(1.4rem, 1rem + 2.4vw, 3.2rem); background: #FCFAF5 url("assets/paper.jpg?v=3") center / 512px repeat; box-shadow: 0 1px 1px rgba(30,22,16,.06), 0 24px 44px -18px rgba(30,22,16,.32); text-align: left; }
.reply-card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(122,122,82,.28); pointer-events: none; }
.reply-card::after { content: ""; position: absolute; inset: 19px; border: .5px solid rgba(122,122,82,.16); pointer-events: none; }
.reply-card .form { position: relative; z-index: 1; }
.form__submit { background: var(--olive-deep) !important; color: #FBF6EC !important; border-color: var(--olive-deep) !important; letter-spacing: .08em; }
.form__submit:hover { background: var(--terracotta) !important; border-color: var(--terracotta) !important; }

/* timer: warm lace + single line title */
.timer__card { filter: sepia(.22) saturate(1.15) brightness(1.02) drop-shadow(0 18px 26px rgba(40,30,20,.18)); }
.timer__card .eyebrow-sm { margin-bottom: .2rem; }
.timer__card .script-title--small { margin: 0 0 .4rem; }
.timer__digits b { color: var(--olive-deep); }
.timer__digits span { font-family: var(--font-caps); letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.7rem, .62rem + .3vw, .86rem); color: var(--olive); }
.timer__digits i { color: var(--ochre); }

/* goodbye: monogram seal */
.bye { padding-bottom: 6rem; }
.bye::before { content: ""; display: block; width: 92px; height: 104px; margin: 0 auto 1.4rem; background: url("assets/crest.webp") center / contain no-repeat; opacity: .55; filter: sepia(.4) saturate(1.4) brightness(.85); }
.timer__card.reveal, .timer__card.reveal.is-in { filter: sepia(.22) saturate(1.15) brightness(1.02) drop-shadow(0 18px 26px rgba(40,30,20,.18)); }
.timer__card { padding: 13% 15% 22%; }
.timer__digits { gap: .25rem; }
.timer__digits b { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); }
.timer__digits div { min-width: 3.2em; }
.timer__digits span { font-size: clamp(.6rem, .55rem + .2vw, .74rem); letter-spacing: .1em; }

/* =========================================================
   V16 — real paper background + envelope that opens and releases a card
   ========================================================= */
body { background: #F4F0E7; }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("assets/paper-bg.jpg") center / cover no-repeat; }
body::before { opacity: .08; }

/* closed + open layers inside the envelope button */
.mailpiece { overflow: visible; }
.mailpiece__closed { position: relative; z-index: 2; transition: opacity .55s ease; }
.openenv { position: absolute; z-index: 1; left: calc(var(--env-w) * -.039); bottom: calc(var(--env-w) * -.017); width: calc(var(--env-w) * 1.0711); height: calc(var(--env-w) * 1.1157); opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.openenv img { position: absolute; inset: 0; width: 100%; height: 100%; }
.openenv__back { z-index: 1; }
.openenv__front { z-index: 3; filter: drop-shadow(0 -2px 3px rgba(60,45,25,.10)); }
.insert { position: absolute; z-index: 2; left: 13%; width: 74%; top: 47%; aspect-ratio: 1.5; display: grid; grid-template-rows: 1fr auto; padding: 4% 4% 2.5%; background: #FCFAF5 url("assets/paper.jpg?v=3") center / 400px repeat; box-shadow: 0 2px 4px rgba(40,30,20,.12), 0 12px 24px -10px rgba(40,30,20,.3); transition: transform 1.5s cubic-bezier(.22,1,.36,1); }
.insert__photo { overflow: hidden; }
.insert__photo img { position: static; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.9); }
.insert__names { padding-top: 3%; text-align: center; font-family: var(--font-script); font-size: calc(var(--env-w) * .06); line-height: 1; color: var(--text-warm); }
.mailpiece__crest { z-index: 3; transition: opacity .4s ease; }

.invite.is-opening .mailpiece__closed, .invite.is-opening .mailpiece__crest { opacity: 0; }
.invite.is-opening .openenv { opacity: 1; }
.invite.is-opening .mailpiece, .invite.is-opening .mailpiece:hover { transform: none; animation: none; }
.invite.is-opening .mailpiece > img { animation: none; }
.invite.is-rise .insert { transform: translateY(-78%); }

/* ribbon lying across the closed envelope */
.ribbon { position: absolute; z-index: 4; width: calc(var(--env-w) * .62); left: calc(50% - var(--env-w) * .52); top: calc(50% + var(--env-w) * .12); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(20,14,8,.28)); transform: rotate(-8deg); animation: ribbonIn 2s cubic-bezier(.16,1,.3,1) 3.2s both; transition: transform 1s cubic-bezier(.65,0,.35,1), opacity .8s ease; }
@keyframes ribbonIn { from { opacity: 0; transform: translateY(20px) rotate(-14deg); } to { opacity: 1; transform: rotate(-8deg); } }
body:not(.is-gated) .ribbon { display: none; }
.invite.is-opening .ribbon { animation: none; opacity: 0; transform: translate(-30px, 60px) rotate(-18deg); }

/* texts recede at the click */
.invite.is-opening .invite__intro, .invite.is-opening .invite__hint { transition: opacity .8s ease, filter .8s ease, transform .8s ease; opacity: 0; filter: blur(6px); }
.invite.is-opening .invite__intro { transform: translateY(-10px); }
.invite.is-opening .invite__hint { transform: translateY(10px); }
/* the whole envelope leaves after the card is out */
.invite.is-leaving .mailpiece { animation: envLeave 1s cubic-bezier(.45,0,.2,1) forwards !important; }
@keyframes envLeave { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: scale(1.04); filter: blur(8px); } }

/* final save-the-date card in the hero */
.save-card { --sc-w: min(84vw, 470px, calc((100svh - 10rem) * .74)); width: var(--sc-w); aspect-ratio: auto; display: grid !important; place-content: initial; gap: 0; padding: calc(var(--sc-w) * .06) calc(var(--sc-w) * .06) calc(var(--sc-w) * .08); background: #FCFAF5 url("assets/paper.jpg?v=3") center / 512px repeat !important; color: var(--text-warm); text-align: center; filter: drop-shadow(0 30px 40px rgba(10,8,4,.4)) drop-shadow(0 4px 6px rgba(10,8,4,.2)) !important; }
.save-card::after { content: ""; position: absolute; inset: calc(var(--sc-w) * .03); border: 1px solid rgba(122,122,82,.25); pointer-events: none; }
.save-card__photo { aspect-ratio: 1.45; overflow: hidden; margin-bottom: calc(var(--sc-w) * .06); }
.save-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.9); }
.save-card__kicker { margin: 0 0 .5rem; font-family: var(--font-caps); font-weight: 500; font-size: calc(var(--sc-w) * .03); letter-spacing: .3em; text-transform: uppercase; color: var(--olive); }
.save-card__names { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: calc(var(--sc-w) * .13); line-height: 1.05; }
.save-card__names i { font-style: normal; font-size: .6em; color: var(--ochre); }
.save-card__date { margin: .6rem 0 .3rem; font-family: var(--font-caps); font-size: calc(var(--sc-w) * .05); letter-spacing: .2em; }
.save-card__place { margin: 0; font-family: var(--font-caps); font-style: italic; font-size: calc(var(--sc-w) * .034); color: #6E6259; }
.invite.is-out .save-card { position: relative; left: auto; top: auto; transform: none; animation: cardBloom 1.6s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .insert, .ribbon { transition: none; animation: none; } }
/* layout fixes: ribbon is decoration on the envelope, not in the flow */
.invite { position: relative; }
.ribbon { position: absolute !important; margin: 0 !important; width: calc(var(--env-w) * .5) !important; height: auto !important; left: calc(50% - var(--env-w) * .58) !important; top: calc(50% + var(--env-w) * .02) !important; z-index: 6; }
body.is-gated .invite { justify-content: center; }
/* save card sizing */
.save-card { --sc-w: min(84vw, 440px, calc((100svh - 11rem) * .72)); max-width: var(--sc-w); }
.save-card__photo { aspect-ratio: 1.6; }
.save-card__names { font-size: calc(var(--sc-w) * .12); }
.hero.is-opened .monogram { display: none; }
.mailpiece .ribbon { position: absolute !important; z-index: 5; width: 52% !important; left: -18% !important; top: 62% !important; }
.save-card { margin-top: 3rem; }
.shot .insert, .shot .openenv, .shot .mailpiece__closed { transition: none !important; }
/* opening stage: whole envelope glides down so the open flap + card stay in view */
.mailpiece { transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .5s; }
.invite.is-opening .mailpiece { transform: translateY(calc(var(--env-w) * .34)) !important; }
.invite.is-opening .mailpiece__crest, .invite.is-opening .invite__intro h2, .invite.is-opening .invite__intro p, .invite.is-opening .ch { animation: none !important; opacity: 0 !important; transition: opacity .5s ease; }
.invite.is-opening .mailpiece .ribbon { animation: none; opacity: 0; }
.invite.is-rise .insert { transform: translateY(-64%); }
.invite.is-leaving .mailpiece { animation: envLeave2 1s cubic-bezier(.45,0,.2,1) forwards !important; }
@keyframes envLeave2 { from { opacity: 1; transform: translateY(calc(var(--env-w) * .34)); filter: blur(0); } to { opacity: 0; transform: translateY(calc(var(--env-w) * .34)) scale(1.04); filter: blur(8px); } }
.insert { aspect-ratio: 1.32; }
.insert__text { display: grid; justify-items: center; gap: .15em; padding-top: 3%; }
.insert__kicker { font-family: var(--font-caps); font-weight: 500; font-size: calc(var(--env-w) * .018); letter-spacing: .3em; text-transform: uppercase; color: var(--olive); }
.insert__names { padding: 0; font-size: calc(var(--env-w) * .055); }
.insert__date { font-family: var(--font-caps); font-size: calc(var(--env-w) * .022); letter-spacing: .2em; color: var(--text-warm); }
/* first screen back exactly as before: hidden card takes no space */
.invite:not(.is-out) .save-card { display: none !important; }
.save-card { margin-top: 0; }

/* V17 — envelope stays open with the card out; aligned pieces */
.openenv { left: calc(var(--env-w) * -.0141); bottom: calc(var(--env-w) * -.016); width: calc(var(--env-w) * 1.0281); height: calc(var(--env-w) * 1.0710); }
.invite.is-out .save-card { display: none !important; }
.invite.is-out .mailpiece { display: block !important; opacity: 1 !important; animation: none !important; filter: drop-shadow(0 30px 40px rgba(10,8,4,.42)) !important; transform: translateY(calc(var(--env-w) * .34)) !important; }
.invite.is-out .mailpiece__closed, .invite.is-out .mailpiece__crest { opacity: 0 !important; }
.invite.is-out .openenv { opacity: 1; }
.invite.is-out .invite__intro, .invite.is-out .invite__hint { display: block !important; visibility: hidden; }
.hero.is-opened .invite { height: 100svh; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero.is-opened { padding-top: 0; padding-bottom: 0; }
.hero.is-opened .hero__scroll { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); }
.mailpiece { cursor: default; }
.hero.is-sealed .mailpiece { cursor: pointer; }
.insert { aspect-ratio: 1.22; }
.insert__place { font-family: var(--font-caps); font-style: italic; font-size: calc(var(--env-w) * .02); color: #6E6259; }
.invite.is-rise .insert { transform: translateY(-70%); }
.invite.is-opening .mailpiece, .invite.is-out .mailpiece { transform: translateY(calc(var(--env-w) * .2)) scale(.86) !important; transform-origin: 50% 100%; }
.topbar .lang-switch { grid-column: 3; }
.openenv__back { transform: scaleX(1.042); transform-origin: 50% 100%; }
.openenv { height: calc(var(--env-w) * 1.1513); }
.openenv__back { transform: none; }

/* Envelope opens in place, no jump.
   The open envelope grows up from the closed envelope's bottom edge, so its middle sits .2475 × --env-w above the
   closed envelope's middle. The closed envelope (with the names above and the hint below) therefore sits .2 × --env-w
   below the screen centre: closed it reads as centred under the names, open it lands in the middle of the screen. */
.invite { --env-w: min(76vw, 620px, 58svh); }
@media (max-width: 600px) { .invite { --env-w: min(88vw, 58svh); } }
body.is-gated .invite, .hero .invite { position: relative; top: calc(var(--env-w) * .2); }
.invite.is-opening .mailpiece, .invite.is-opening .mailpiece:hover { transform: none !important; animation: none !important; filter: none !important; }
/* one soft, even shadow under the paper instead of the dark strip */
.mailpiece { filter: drop-shadow(0 22px 30px rgba(20, 14, 6, .30)) drop-shadow(0 3px 5px rgba(20, 14, 6, .16)); }
.openenv { filter: drop-shadow(0 24px 34px rgba(20, 14, 6, .30)) drop-shadow(0 3px 6px rgba(20, 14, 6, .14)); }
.openenv, .mailpiece__closed, .mailpiece__crest { transition: opacity .7s ease; }
.insert { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .1s; }
/* the dividers between sections must not show over the closed envelope */
body.is-gated .flourish { display: none !important; }
/* no lace band under the first screen */
.lace-edge { display: none !important; }
/* last block: back to the envelope */
.bye__back { display: inline-block; margin-top: 1.6rem; }
/* more air between the names and the closed envelope, so the script letters are never cut by it */
body.is-gated .invite__intro { bottom: calc(50% + var(--env-w) * .587 / 2 + clamp(1.6rem, 4.5vh, 3rem)) !important; }
/* after opening, the first screen keeps exactly the gated layout, so nothing moves when the page unlocks */
.hero.is-opened { position: relative; height: 100svh; min-height: 0; padding: 0 var(--gutter); grid-template-rows: 1fr; align-content: center; }
.hero.is-opened .invite { height: 100svh; min-height: 0; display: grid; place-items: center; }
.hero.is-opened .monogram { display: none; }
.hero.is-opened .hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); }
/* closed envelope a little below centre, so the open one lands in the middle */
body.is-gated .invite, .hero .invite { top: calc(var(--env-w) * .1); }
body.is-gated .invite__intro { bottom: calc(50% + var(--env-w) * .587 / 2 + clamp(2.2rem, 5.5vh, 3.6rem)) !important; }
.invite.is-out .lace-card { display: none !important; }
/* lift the names clear of the envelope so no letter touches it */
body.is-gated .invite__intro { translate: 0 clamp(-2.6rem, -4.5vh, -1.4rem); }
@media (max-width: 600px) { body.is-gated .invite__intro { translate: 0 -3.4rem; } }
/* clean envelope images (no baked shadow, paper centred): open envelope aligned to the same centre line */
.openenv { left: calc(var(--env-w) * -.0352); }
/* names fit on every phone */
@media (max-width: 600px) { .invite__intro h2 { font-size: min(11.5vw, 3.4rem); white-space: nowrap; } }
/* first screen: all text pure white, with a soft shadow so it reads over the video */
.invite__intro, .invite__intro p, .invite__intro h2, .invite__intro .ch, .invite__hint, .invite__hint .ch,
body.is-gated .lang-switch--gate button { color: #fff !important; opacity: 1; }
.invite__intro p, .invite__intro h2, .invite__hint, body.is-gated .lang-switch--gate button { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 18px rgba(0, 0, 0, .45) !important; }
/* no initials in the corner; on phones the language switch sits in the middle of the top */
.topbar__mark { display: none !important; }
.topbar { justify-content: flex-end; }
@media (max-width: 600px) {
  .topbar { justify-content: center; }
  body.is-gated .lang-switch--gate { left: 50%; right: auto; transform: translateX(-50%); }
}
/* desktop: a much bigger envelope (the open one still fits: 1.1157 × --env-w ≤ ~78% of the screen) */
@media (min-width: 601px) { .invite { --env-w: min(70vw, 900px, 70svh); } }
body.is-gated .invite__hint { top: calc(50% + var(--env-w) * .587 / 2 + clamp(.5rem, 1.4vh, 1.1rem)) !important; }
body.is-gated .invite__hint { margin-top: clamp(.5rem, 1.4vh, 1rem) !important; }
/* after opening: the video melts into the cream page instead of ending on a hard line */
.hero.is-opened::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(244, 240, 231, 0) 0%, rgba(244, 240, 231, .18) 30%, rgba(244, 240, 231, .55) 62%, rgba(244, 240, 231, .88) 85%, #F4F0E7 100%); }
.hero.is-opened .hero__bg, .hero.is-opened .hero__video {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, .5) 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, rgba(0, 0, 0, .5) 85%, transparent 100%); }
.hero.is-opened .invite { z-index: 3; }
.hero.is-opened .hero__scroll { z-index: 3; color: #6b5f52; }
.hero.is-opened .hero__scroll::after { background: #6b5f52; }
/* let the paper texture of the page show through the fade, so there is no seam */
.hero.is-opened::after { display: none; }
.hero.is-opened .hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.18) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.18) 88%, transparent 100%); }
.hero.is-opened .hero__video { -webkit-mask-image: none; mask-image: none; }
/* closed: envelope + hint sit higher; while it opens the whole letter glides gently back to the centre */
body.is-gated .invite, .hero .invite { transition: top 1.4s cubic-bezier(.22, 1, .36, 1); }
body.is-gated .invite:not(.is-opening) { top: calc(var(--env-w) * .1 - 6svh); }
body.is-gated .invite:not(.is-opening) { top: calc(var(--env-w) * .1 - 12svh); }
body.is-gated .invite__intro { translate: 0 -1rem; }
@media (max-width: 600px) { body.is-gated .invite__intro { translate: 0 -2.2rem; } }
@media (max-width: 600px) { .invite__intro h2 { font-size: min(14.5vw, 4.2rem) !important; } }
@media (max-width: 600px) { body.is-gated .invite:not(.is-opening) { top: calc(var(--env-w) * .1 - 4svh); } }
@media (min-width: 601px) { body.is-gated .invite:not(.is-opening) { top: calc(var(--env-w) * .1 - 8svh); } }
/* phones: calm motion, nothing moves — everything only fades in, and the envelope opens exactly where it is */
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
  .invite__intro h2 { animation: mFade 1.6s ease 1.2s both !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .ch { animation: mFade 1s ease both; transform: none !important; filter: none !important; }
  .invite:not(.is-opening) .mailpiece { animation: mFade 1.6s ease 2s both !important; }
  .invite:not(.is-opening) .mailpiece > img { animation: none !important; }
  .invite:not(.is-opening) .mailpiece:hover { transform: none !important; }
  body.is-gated .invite, .hero .invite { transition: none !important; }
  body.is-gated .invite.is-opening { top: calc(var(--env-w) * .1 - 4svh) !important; }
}

/* ===== Cinematic first screen =====
   Slow, calm, film-like: nothing slides or bounces. Things come out of darkness and out of focus, in order:
   0.0s  black → the quinta film fades up, settling from a slow push-in (Ken Burns)
   1.2s  "You've got mail from" letter by letter, out of soft focus
   1.8s  the names are drawn left → right like ink, sharpening
   3.0s  the envelope surfaces from the blur, a hair larger than life, settling into place
   4.6s  "Click envelope to open" breathes in, then pulses very gently
   On open: the words dissolve into soft focus where they are, the shade lifts like a lens opening, the envelope opens in place. */
@keyframes cineFilm { 0% { opacity: 0; transform: scale(1.12); filter: brightness(.55) blur(6px); } 35% { opacity: 1; } 100% { opacity: 1; transform: scale(1.02); filter: none; } }
@keyframes cineLetter { 0% { opacity: 0; filter: blur(8px); } 100% { opacity: 1; filter: blur(0); } }
@keyframes cineInk { 0% { opacity: 0; filter: blur(10px); clip-path: inset(-40% 100% -40% -10%); } 30% { opacity: 1; } 100% { opacity: 1; filter: blur(0); clip-path: inset(-40% -10% -40% -10%); } }
@keyframes cineEnv { 0% { opacity: 0; transform: scale(1.035); filter: blur(14px) brightness(1.08); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cineHint { 0% { opacity: 0; letter-spacing: .34em; filter: blur(4px); } 100% { opacity: 1; letter-spacing: .2em; filter: blur(0); } }
@keyframes cineBreath { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cineOut { to { opacity: 0; filter: blur(10px); } }

body.is-gated .hero__bg { animation: cineFilm 5.5s cubic-bezier(.16, 1, .3, 1) both !important; transform-origin: 50% 45%; }
body.is-gated .hero__shade { transition: opacity 2.4s cubic-bezier(.22, 1, .36, 1); }
.invite__intro p, .invite__intro .ch, .invite__hint .ch { transform: none !important; }
.invite__intro .ch { animation: cineLetter 1.6s cubic-bezier(.22, 1, .36, 1) both !important; animation-delay: calc(1.2s + var(--i) * 55ms) !important; }
.invite__intro h2 { animation: cineInk 2.8s cubic-bezier(.65, 0, .35, 1) 1.8s both !important; transform: none !important; }
.invite:not(.is-opening) .mailpiece { animation: cineEnv 2.4s cubic-bezier(.16, 1, .3, 1) 3s both !important; transform-origin: 50% 50%; }
.invite:not(.is-opening) .mailpiece > img { animation: none !important; }
.invite:not(.is-opening) .mailpiece:hover { transform: scale(1.012) !important; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.invite__hint { animation: cineHint 2s cubic-bezier(.22, 1, .36, 1) 4.6s both, cineBreath 4.5s ease-in-out 7s infinite !important; }
.invite__hint .ch { animation: none !important; opacity: 1 !important; filter: none !important; }
/* opening: dissolve in place, no movement */
.invite.is-opening .invite__intro, .invite.is-opening .invite__hint { animation: cineOut 1s ease forwards !important; transform: none !important; transition: none !important; }
.invite.is-opening .invite__intro .ch, .invite.is-opening .invite__intro h2 { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { body.is-gated .hero__bg, .invite__intro .ch, .invite__intro h2, .invite .mailpiece, .invite__hint { animation: none !important; opacity: 1; filter: none; clip-path: none; } }
.hero.is-opened .hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%); }
/* video smoothness: the fade-up stays on after the page unlocks (no snap when the gate is removed),
   no blur on the moving film (too heavy for phones), GPU layer for the video */
@keyframes cineFilm2 { 0% { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
body.is-gated .hero__bg, .hero__bg { animation: cineFilm2 5.5s cubic-bezier(.16, 1, .3, 1) both !important; transform-origin: 50% 45%; filter: none !important; }
.hero__video { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
/* performance: no live blur over the moving film (backdrop-filter re-blurs every video frame) */
.hero__edge { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* envelope appears with opacity + scale only (no animated blur on the big image) */
@keyframes cineEnv2 { 0% { opacity: 0; transform: scale(1.04); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.invite:not(.is-opening) .mailpiece { animation: cineEnv2 2.4s cubic-bezier(.16, 1, .3, 1) 3s both !important; will-change: transform, opacity; }
/* hover (mouse only): the envelope slowly comes closer, the shadow deepens and softens, the crest catches the light */
@media (hover: hover) and (pointer: fine) {
  .invite:not(.is-opening) .mailpiece { transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), filter 1.4s cubic-bezier(.16, 1, .3, 1); }
  .invite:not(.is-opening) .mailpiece:hover { transform: scale(1.045) !important;
    filter: drop-shadow(0 40px 46px rgba(20, 14, 6, .34)) drop-shadow(0 6px 10px rgba(20, 14, 6, .16)) !important; }
  .mailpiece__crest { transition: filter 1.4s cubic-bezier(.16, 1, .3, 1); }
  .invite:not(.is-opening) .mailpiece:hover .mailpiece__crest { filter: brightness(1.06) drop-shadow(0 0 10px rgba(255, 246, 225, .55)); }
  .invite:not(.is-opening) .mailpiece:hover ~ .invite__hint { animation-play-state: paused; opacity: 1; }
}
/* Ukrainian: the names are written in Cyrillic script */
:lang(uk) .invite__intro h2 { font-family: "Marck Script", var(--font-script); font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem) !important; }
@media (max-width: 600px) { :lang(uk) .invite__intro h2 { font-size: min(10.5vw, 3rem) !important; } }
@media (max-width: 600px) { :lang(uk) .invite__intro h2 { font-size: 8.6vw !important; } }
/* classic ampersand between the names (Cormorant Garamond), the script names are unchanged */
.amp { font-family: "Cormorant Garamond", "Times New Roman", serif; font-style: normal; font-weight: 400; font-size: .62em; margin: 0 .22em; position: relative; top: -.12em; letter-spacing: 0; }
/* smooth hover: no animation fighting the transform, no animated filter (the shadow is its own layer that only fades) */
.invite:not(.is-opening) .mailpiece.is-ready { animation: none !important; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .invite:not(.is-opening) .mailpiece { transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) !important; transform: translateZ(0) scale(1); backface-visibility: hidden; }
  .invite:not(.is-opening) .mailpiece.is-ready:hover { transform: translateZ(0) scale(1.04) !important; filter: drop-shadow(0 22px 30px rgba(20, 14, 6, .30)) drop-shadow(0 3px 5px rgba(20, 14, 6, .16)) !important; }
  .mailpiece::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -6%; height: 22%; z-index: -1; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 10, 4, .42), rgba(15, 10, 4, 0) 70%); opacity: 0; transform: translateY(-6%);
    transition: opacity 1.6s cubic-bezier(.16, 1, .3, 1), transform 1.6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
  .invite:not(.is-opening) .mailpiece.is-ready:hover::after { opacity: 1; transform: translateY(8%); }
  .invite:not(.is-opening) .mailpiece.is-ready:hover .mailpiece__crest { filter: none; }
  .invite.is-opening .mailpiece::after { opacity: 0; }
}
/* our own OJ monogram on the envelope, pressed into the paper like the crest */
.mono-img--oj { width: 30% !important; height: auto; top: 51%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(105, 92, 72, .35)) !important; opacity: .92; }
/* OJ monogram colour: change this one value (any colour, e.g. #1F2A6B navy, #B08D57 gold) */
:root { --mono-color: #9A8F7F; }
svg.mono-img--oj { color: var(--mono-color); width: 38% !important; height: auto; top: 51%; }
/* monogram: plain, no emboss effect */
svg.mono-img--oj { filter: none !important; opacity: 1 !important; text-shadow: none; }
/* frame around the monogram (from Olga's design), colour follows the monogram */
:root { --frame-color: #A79B89; }
.mailpiece__crest svg.oj-frame { position: absolute; left: 50%; top: 51%; width: 62%; height: auto; transform: translate(-50%, -50%); color: var(--frame-color); filter: none; }
.mailpiece__crest { aspect-ratio: 1; }
.mailpiece__crest svg.oj-frame { width: 100%; top: 50%; }
svg.mono-img--oj { width: 34% !important; top: 50% !important; }
.mailpiece__crest { top: 70% !important; }
/* the monogram sits like a seal on the tip of the flap, over the edge */
.mailpiece__crest { top: 77% !important; }
.mailpiece__crest::before { content: ""; position: absolute; inset: 2%; border-radius: 42%; background: #F5F0E6 url("assets/paper.jpg?v=3") center / 220px;
  box-shadow: 0 3px 8px rgba(40, 30, 15, .16), 0 1px 2px rgba(40, 30, 15, .12); }
.mailpiece__crest svg { z-index: 1; }
.mailpiece__crest { width: 13% !important; }

/* ===== Real paper feel (shape unchanged): every layer is cut to the envelope's own silhouette ===== */
.mailpiece__closed { position: relative; z-index: 0; }
.mailpiece .paperlight { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask: url("assets/envelope-clean.webp") center / 100% 100% no-repeat; mask: url("assets/envelope-clean.webp") center / 100% 100% no-repeat;
  /* soft window light from the top left, falling off to the lower right, like a photo of real card */
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 253, 248, .38), rgba(255, 253, 248, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0) 45%, rgba(92, 72, 46, .10) 100%),
    url("assets/paper.jpg?v=3") center / 340px;
  background-blend-mode: normal, normal, multiply; mix-blend-mode: multiply; opacity: .9; }
.mailpiece .paperlight::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 18% 8%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%); mix-blend-mode: screen; }
.invite.is-opening .mailpiece .paperlight { opacity: 0; transition: opacity .7s ease; }
/* grounded like a card on a table: a tight contact shadow plus a wide soft one */
.mailpiece { filter: drop-shadow(0 1px 1px rgba(30, 20, 8, .28)) drop-shadow(0 6px 10px rgba(30, 20, 8, .18)) drop-shadow(0 28px 40px rgba(30, 20, 8, .26)) !important; }
.invite:not(.is-opening) .mailpiece.is-ready:hover { filter: drop-shadow(0 1px 1px rgba(30, 20, 8, .24)) drop-shadow(0 10px 16px rgba(30, 20, 8, .18)) drop-shadow(0 40px 54px rgba(30, 20, 8, .28)) !important; }
.mailpiece .paperlight { background: linear-gradient(158deg, rgba(255, 255, 255, 0) 40%, rgba(92, 72, 46, .16) 100%), url("assets/paper.jpg?v=3") center / 340px; opacity: .42; }
.mailpiece .paperlight::after { background: radial-gradient(110% 85% at 16% 6%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 52%); opacity: .55; }
.mailpiece .paperlight { isolation: isolate; }
.mailpiece__crest { z-index: 2; }
@media (max-width: 600px) { .topbar .lang-switch { margin: 0 auto !important; position: static !important; transform: none !important; } .topbar { left: 0; right: 0; justify-content: center !important; } }
@media (max-width: 600px) { .topbar { display: flex !important; justify-content: center !important; } }

/* ===== Palette: Linen #F7F3EB · Envelope #EDE4D7 · Warm stone #A8957B · Sage olive #8A8F6A · Terracotta #B4643F (accent, ≤10%) · Warm ink #3A322C ===== */
:root { --c-linen: #F7F3EB; --c-env: #EDE4D7; --c-stone: #A8957B; --c-sage: #8A8F6A; --c-terra: #B4643F; --c-ink: #3A322C;
  --cream: var(--c-linen); --mono-color: var(--c-stone); --frame-color: var(--c-terra); }
body { background: var(--c-linen); }
/* video grade to the palette: greens pulled to sage, highlights to linen, shadows to warm ink, less saturation */
.hero__video { filter: saturate(.72) sepia(.14) hue-rotate(-4deg) contrast(.97) brightness(1.03) !important; }
.hero__bg .hero__tone { mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(247, 243, 235, .30) 0%, rgba(168, 149, 123, .22) 45%, rgba(138, 143, 106, .20) 75%, rgba(58, 50, 44, .34) 100%) !important; }
.hero__bg .hero__lift { background: rgba(58, 50, 44, .10) !important; mix-blend-mode: lighten; }
.hero__shade { background: radial-gradient(ellipse 58% 54% at 50% 50%, rgba(58, 50, 44, .14) 0%, rgba(58, 50, 44, .32) 58%, rgba(44, 37, 32, .50) 100%) !important; }
/* the only terracotta on this screen: the thin seal frame and the active-language underline */
.lang-switch button[aria-pressed="true"] { text-decoration-color: var(--c-terra) !important; border-bottom-color: var(--c-terra) !important; }
.hero__video { filter: saturate(.72) sepia(.14) hue-rotate(-4deg) contrast(.96) brightness(1.08) !important; }
:root { --frame-color: #8A8F6A; }
/* terracotta only as a whisper: a faint warm glow in the film grade, never in letters or lines */
.lang-switch button[aria-pressed="true"] { text-decoration-color: currentColor !important; border-bottom-color: currentColor !important; }
.hero__bg .hero__tone { background: linear-gradient(180deg, rgba(180, 100, 63, .10) 0%, rgba(247, 243, 235, .24) 22%, rgba(168, 149, 123, .22) 50%, rgba(138, 143, 106, .20) 78%, rgba(58, 50, 44, .34) 100%) !important; }
/* paper under the seal is cut exactly to the frame's outline (no circle sticking out) */
.mailpiece__crest::before { inset: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask: url("assets/oj-frame-mask.png") center / 100% 100% no-repeat; mask: url("assets/oj-frame-mask.png") center / 100% 100% no-repeat; }
.mailpiece__crest { filter: drop-shadow(0 2px 4px rgba(40, 30, 15, .16)); }
/* vignette back, softer than before (no blur, just darker corners) */
.hero__edge { background: radial-gradient(ellipse 75% 70% at 50% 48%, rgba(40, 33, 28, 0) 52%, rgba(40, 33, 28, .28) 82%, rgba(30, 24, 20, .52) 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; }
.hero__video { filter: saturate(.72) sepia(.14) hue-rotate(-4deg) contrast(1.04) brightness(1.07) !important; }

/* ===== Concept (preview with ?concept): an editorial, film-title first screen ===== */
.cx-credits { display: none; }
html.concept body.is-gated .hero::before { content: ""; position: fixed; inset: clamp(14px, 1.8vw, 26px); z-index: 45; pointer-events: none;
  border: 1px solid rgba(247, 243, 235, .38); box-shadow: inset 0 0 0 5px rgba(247, 243, 235, 0), inset 0 0 0 6px rgba(247, 243, 235, .16); }
html.concept body.is-gated .cx-credits { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: fixed; left: clamp(44px, 4.4vw, 70px); right: clamp(44px, 4.4vw, 70px);
  bottom: clamp(36px, 4.4vh, 52px); z-index: 46; font: 500 11px var(--font-caps); letter-spacing: .38em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4); animation: cineHint 2.4s cubic-bezier(.22, 1, .36, 1) 5.2s both; }
html.concept .cx-credits span:last-child { text-align: right; }
html.concept .cx-credits .cx-date { font: 400 15px var(--font-caps); letter-spacing: .32em; }
html.concept .cx-credits .cx-date::before, html.concept .cx-credits .cx-date::after { content: ""; display: inline-block; width: 34px; height: 1px; background: rgba(255, 255, 255, .5); vertical-align: middle; margin: 0 16px; }
html.concept body.is-gated .lang-switch--gate { top: clamp(34px, 4vh, 46px); right: clamp(44px, 4.4vw, 70px); }
html.concept .invite__intro p { letter-spacing: .42em !important; font-size: clamp(.78rem, .7rem + .3vw, 1rem) !important; }
html.concept .invite__hint { letter-spacing: .34em !important; font-size: .8rem !important; }
html.concept .invite__hint::before { content: ""; display: block; width: 1px; height: 26px; margin: 0 auto 12px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.7)); }
html.concept .hero__grain { display: block; }
html.concept body.is-gated .hero::after { content: ""; position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  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 baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* after opening: the film runs further down the page and melts into the paper over a long, eased fade */
.hero.is-opened { overflow: visible !important; }
.hero.is-opened .hero__bg { bottom: -48svh !important; height: auto !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.66) 66%, rgba(0,0,0,.45) 74%, rgba(0,0,0,.27) 82%, rgba(0,0,0,.13) 89%, rgba(0,0,0,.04) 95%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.66) 66%, rgba(0,0,0,.45) 74%, rgba(0,0,0,.27) 82%, rgba(0,0,0,.13) 89%, rgba(0,0,0,.04) 95%, transparent 100%) !important; }
.hero.is-opened + section, .hero.is-opened ~ section { position: relative; z-index: 1; background: transparent; }
html.concept .invite__hint::before { display: none; }
/* final: one hairline frame close to the edge, credits well inside it with air */
html.concept body.is-gated .hero::before { inset: clamp(12px, 1.4vw, 20px) !important; border: .5px solid rgba(247, 243, 235, .42) !important; box-shadow: none !important; }
html.concept body.is-gated .cx-credits { grid-template-columns: 1fr 1fr; bottom: clamp(44px, 5.6vh, 64px) !important; left: clamp(48px, 5vw, 80px) !important; right: clamp(48px, 5vw, 80px) !important; }
html.concept body.is-gated .lang-switch--gate { top: clamp(40px, 5vh, 56px) !important; right: clamp(48px, 5vw, 80px) !important; }
@media (max-width: 600px) { html.concept body.is-gated .cx-credits { grid-template-columns: 1fr; gap: 6px; text-align: center; font-size: 9px; letter-spacing: .3em; } html.concept .cx-credits span:last-child { text-align: center; } html.concept body.is-gated .lang-switch--gate { right: auto !important; } }
html.concept body.is-gated .hero::before { border-color: rgba(247, 243, 235, .22) !important; }

/* ===== Palette across the whole site (no orange letters: the old terracotta/ochre roles move to sage and stone) ===== */
:root { --paper: #F7F3EB; --paper-white: #FBF8F2; --cream: #F7F3EB; --lime: #F7F3EB; --lime-deep: #EDE4D7;
  --olive: #8A8F6A; --olive-deep: #5F6348; --ochre: #A8957B; --terracotta: #5F6348; --terracotta-deep: #3A322C; --azulejo: #8A8F6A;
  --ink: #3A322C; --ink-soft: #5E534A; --text-warm: #3A322C; --sepia-ink: #3A322C; --line: rgba(58, 50, 44, .16); }
.form__submit, .btn--solid { background: var(--olive-deep) !important; border-color: var(--olive-deep) !important; color: var(--paper) !important; }
.form__submit:hover, .btn--solid:hover { background: var(--c-ink) !important; border-color: var(--c-ink) !important; }
.opt input:checked { accent-color: var(--olive-deep); }
.bye__mono { display: block; width: 54px; height: auto; margin: 0 auto 1.2rem; color: var(--mono-color); }
@media (min-width: 601px) {
  html.concept body.is-gated .cx-credits { display: flex !important; justify-content: space-between; }
  html.concept .cx-credits span:first-child { text-align: left; }
}
/* no sideways scroll: the film may bleed but never widen the page */
html, body { overflow-x: clip; }
main { overflow-x: clip; }
/* the hairline frame draws itself around the screen, slowly, like a pen on a card */
html.concept body.is-gated .hero::before { display: none !important; }
.cx-frame { display: none; }
html.concept body.is-gated .cx-frame { display: block; position: fixed; inset: clamp(12px, 1.4vw, 20px); width: calc(100% - 2 * clamp(12px, 1.4vw, 20px)); height: calc(100% - 2 * clamp(12px, 1.4vw, 20px));
  z-index: 45; pointer-events: none; overflow: visible; }
.cx-frame rect { fill: none; stroke: rgba(247, 243, 235, .32); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cxDraw 3.6s cubic-bezier(.65, 0, .35, 1) 2.4s forwards; }
@keyframes cxDraw { to { stroke-dashoffset: 0; } }
.invite.is-opening ~ .cx-frame, body:not(.is-gated) .cx-frame { opacity: 0; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) { .cx-frame rect { animation: none; stroke-dashoffset: 0; } }
html.concept .invite__hint { font-size: clamp(.86rem, .76rem + .35vw, 1.08rem) !important; }
/* on open: the frame and the credits dissolve so slowly the eye barely notices */
.cx-frame, .cx-credits { transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1), filter 2.6s cubic-bezier(.4, 0, .2, 1); }
html.concept .invite.is-opening .cx-frame, html.concept .invite.is-opening .cx-credits { opacity: 0 !important; filter: blur(1.5px); }
html.concept .invite.is-opening .cx-credits { animation: none !important; }
/* names and kicker in warm paper tones from the palette instead of pure white */
.invite__intro p, .invite__intro .ch { color: #EDE4D7 !important; }
.invite__intro h2, .invite__intro h2 .amp { color: #F3ECE0 !important; }
/* last block: our seal (frame + OJ) instead of the old crest, and a properly centred button */
.bye::before { display: none !important; }
.bye__seal { position: relative; display: block; width: 116px; aspect-ratio: 1; margin: 0 auto 1.6rem; }
.bye__seal .bye__frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--frame-color); }
.bye__seal .bye__oj { position: absolute; left: 50%; top: 50%; width: 36%; height: auto; transform: translate(-50%, -50%); color: var(--mono-color); }
.bye__back { display: inline-flex !important; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0 2.4rem !important; line-height: 1 !important;
  margin-top: 2rem !important; border: 1px solid var(--olive-deep) !important; color: var(--olive-deep) !important; letter-spacing: .04em; text-decoration: none;
  transition: background-color .5s cubic-bezier(.22, 1, .36, 1), color .5s cubic-bezier(.22, 1, .36, 1); }
.bye__back:hover, .bye__back:focus-visible { background: var(--olive-deep) !important; color: var(--paper) !important; }
.hero.is-opened .hero__scroll { color: #F3ECE0 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } .hero.is-opened .hero__scroll::after, .hero.is-opened .hero__scroll::before { background: rgba(243, 236, 224, .8) !important; }

/* ===== The rest of the page, one system with the first screen =====
   linen paper, straight photos with a hairline inset, our frame + OJ seal, sage details, generous air */
.sx-kicker { margin: 0; font: 500 .74rem var(--font-caps); letter-spacing: .34em; text-transform: uppercase; color: var(--olive-deep); }
.sx-kicker--soft { color: var(--c-stone); }
/* welcome */
.sx-greet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center;
  max-width: 1180px; margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) var(--gutter) clamp(4rem, 7vw, 7rem) !important; text-align: left; }
.sx-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.sx-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) sepia(.12) contrast(1.02); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
.sx-photo::after { content: ""; position: absolute; inset: 14px; border: .5px solid rgba(247, 243, 235, .7); pointer-events: none; }
.sx-photo:hover img { transform: scale(1.03); }
.sx-letter .script-title { text-align: left; margin: 1.1rem 0 1.6rem; }
.sx-letter .greet__text { margin: 0; max-width: 31rem; text-align: left; font: 400 clamp(1.15rem, 1rem + .45vw, 1.4rem)/1.65 var(--font-caps); color: #5A5047; }
.sx-sign { margin: 2.2rem 0 0; font: 400 clamp(1.6rem, 1.2rem + 1vw, 2.2rem) var(--font-script); color: var(--c-ink); }
/* date */
.sx-date { text-align: center; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) !important; display: grid; justify-items: center; gap: 1.1rem; }
.sx-rule { display: block; width: 1px; height: clamp(40px, 6vw, 64px); background: linear-gradient(rgba(138, 143, 106, 0), rgba(138, 143, 106, .7), rgba(138, 143, 106, 0)); }
.sx-day { margin: .2rem 0; font: 300 clamp(3rem, 1.8rem + 4.6vw, 6.4rem)/1 var(--font-caps); letter-spacing: .08em; color: var(--c-ink); font-variant-numeric: lining-nums; }
/* venue */
.sx-venue { position: relative; display: grid; place-items: center; min-height: clamp(560px, 82vh, 820px); padding: clamp(4rem, 8vw, 7rem) var(--gutter) !important; isolation: isolate; }
.sx-venue__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.sx-venue__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) sepia(.14) contrast(1.03) brightness(1.04); }
.sx-card { position: relative; width: min(440px, 100%); padding: clamp(3.6rem, 6vw, 4.4rem) clamp(1.8rem, 4vw, 3rem) clamp(2.4rem, 4vw, 3rem); text-align: center;
  background: rgba(247, 243, 235, .94); box-shadow: 0 30px 60px -34px rgba(40, 30, 15, .45); }
.sx-card::before { content: ""; position: absolute; inset: 10px; border: .5px solid rgba(138, 143, 106, .55); pointer-events: none; }
.sx-seal { position: absolute; left: 50%; top: 0; width: 76px; aspect-ratio: 1; transform: translate(-50%, -50%); }
.sx-seal::before { content: ""; position: absolute; inset: 0; background: var(--c-linen); -webkit-mask: url("assets/oj-frame-mask.png") center / 100% 100% no-repeat; mask: url("assets/oj-frame-mask.png") center / 100% 100% no-repeat; }
.sx-seal .sx-frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--frame-color); }
.sx-seal .sx-oj { position: absolute; left: 50%; top: 50%; width: 36%; height: auto; transform: translate(-50%, -50%); color: var(--mono-color); }
.sx-card .script-title { margin-bottom: .6rem; }
.sx-name { margin: .5rem 0 1rem; font: 400 clamp(1.7rem, 1.3rem + 1vw, 2.3rem)/1.15 var(--font-caps); color: var(--c-ink); }
.sx-addr { margin: 0 0 2rem; font: 400 1.02rem/1.6 var(--font-caps); letter-spacing: .06em; color: #6b6157; }
.sx-link { display: inline-block; font: 500 .76rem var(--font-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--olive-deep); text-decoration: none;
  padding-bottom: .5rem; background: linear-gradient(currentColor, currentColor) center bottom / 40% 1px no-repeat; transition: background-size .8s cubic-bezier(.22, 1, .36, 1); }
.sx-link:hover, .sx-link:focus-visible { background-size: 100% 1px; }
/* rsvp: same card language */
.rsvp .reply-card { background: rgba(247, 243, 235, .96) !important; box-shadow: 0 30px 60px -38px rgba(40, 30, 15, .4) !important; border: 0 !important; position: relative; }
.rsvp .reply-card::before { content: ""; position: absolute; inset: 10px; border: .5px solid rgba(138, 143, 106, .55); pointer-events: none; }
.rsvp .eyebrow-sm { color: var(--olive-deep); letter-spacing: .34em; }
.form__submit { border-radius: 0 !important; letter-spacing: .3em !important; text-transform: uppercase; font-size: .82rem !important; }
.soft-heart, .lace-edge, .portrait { display: none !important; }
@media (max-width: 760px) {
  .sx-greet { grid-template-columns: 1fr; text-align: center; gap: 2.4rem; }
  .sx-letter .script-title, .sx-letter .greet__text { text-align: center; margin-left: auto; margin-right: auto; }
  .sx-photo { max-width: 360px; margin: 0 auto; width: 100%; }
}
.sx-photo img { filter: saturate(.62) sepia(.2) contrast(1.02) brightness(1.03) !important; }
.sx-kicker--soft { color: #8A7C68; }
.sx-venue__photo img { filter: saturate(.7) sepia(.12) contrast(1.04) brightness(1.02); }

/* ===== Premium pass: same layout, finer detail and calmer, cinematic motion ===== */
/* reveal: content rises a few px out of a soft focus, staggered, long ease */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1.6s cubic-bezier(.16, 1, .3, 1), transform 1.6s cubic-bezier(.16, 1, .3, 1), filter 1.6s cubic-bezier(.16, 1, .3, 1); }
.reveal.is-in, .reveal.in, .reveal.is-visible { opacity: 1; transform: none; filter: none; }
.sx-letter.reveal { transition-delay: .18s; }
/* photo: opens like a curtain, then settles */
.sx-photo.reveal { filter: none; transform: none; clip-path: inset(8% 8% 8% 8%); transition: clip-path 2.2s cubic-bezier(.65, 0, .35, 1), opacity 1.4s ease; }
.sx-photo.reveal.is-in, .sx-photo.reveal.in, .sx-photo.reveal.is-visible { clip-path: inset(0 0 0 0); }
.sx-photo img { transform: scale(1.08); transition: transform 3.2s cubic-bezier(.16, 1, .3, 1) !important; }
.sx-photo.is-in img, .sx-photo.in img, .sx-photo.is-visible img { transform: scale(1); }
/* photo caption like a gallery label */
.sx-photo::before { content: "Quinta La Vénus de Lisbonne"; position: absolute; left: 28px; bottom: 26px; z-index: 2; font: 500 .62rem var(--font-caps); letter-spacing: .34em; text-transform: uppercase; color: rgba(247, 243, 235, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
/* letter: a fine numeral rule above the kicker */
.sx-letter .sx-kicker::before { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--olive); vertical-align: middle; margin-right: 14px; }
.sx-sign { position: relative; }
/* the date: numerals with a small olive dot between, the rule lines draw down */
.sx-day { letter-spacing: .14em; }
.sx-date .sx-rule { transform-origin: top; transform: scaleY(0); transition: transform 1.8s cubic-bezier(.65, 0, .35, 1) .2s; }
.sx-date.is-in .sx-rule, .sx-date.in .sx-rule, .sx-date.is-visible .sx-rule { transform: scaleY(1); }
/* venue: slow parallax drift of the photo, card floats with a deeper, softer shadow */
.sx-venue__photo img { transform: scale(1.1) translateY(var(--px, 0px)); will-change: transform; }
.sx-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 50px 80px -50px rgba(40, 30, 15, .55), 0 10px 24px -14px rgba(40, 30, 15, .18) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sx-name { letter-spacing: .01em; }
/* form: lines instead of boxes, quieter labels */
.rsvp .q__label, .rsvp legend { font: 500 .74rem var(--font-caps) !important; letter-spacing: .3em; text-transform: uppercase; color: var(--olive-deep) !important; }
.rsvp input[type=text], .rsvp input:not([type]), .rsvp input[type=email] { background: transparent !important; border: 0 !important; border-bottom: .5px solid rgba(58, 50, 44, .35) !important; border-radius: 0 !important;
  transition: border-color .6s cubic-bezier(.22, 1, .36, 1); }
.rsvp input:focus { outline: none; border-bottom-color: var(--olive-deep) !important; }
.form__submit { transition: background-color .6s cubic-bezier(.22, 1, .36, 1), letter-spacing .6s cubic-bezier(.22, 1, .36, 1) !important; }
.form__submit:hover { letter-spacing: .36em !important; }
/* final seal breathes very slowly */
@keyframes sealBreath { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
.bye__seal { animation: sealBreath 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .reveal, .sx-photo.reveal, .sx-photo img, .sx-date .sx-rule { transition: none !important; opacity: 1; transform: none; filter: none; clip-path: none; } .bye__seal { animation: none; } }
/* video stays its own size after opening (stretching it made it soft); the long fade is done inside the frame */
.hero.is-opened .hero__bg { bottom: 0 !important; }
.hero__video { image-rendering: auto; }
/* desktop: scroll hint lower, near the bottom edge */
@media (min-width: 601px) { .hero.is-opened .hero__scroll { bottom: .6rem !important; } }
.hero.is-opened .hero__scroll { color: #5E534A !important; text-shadow: none !important; } .hero.is-opened .hero__scroll::after, .hero.is-opened .hero__scroll::before { background: rgba(94, 83, 74, .6) !important; }
/* normal (lining) numerals everywhere, Cormorant's old-style digits read oddly */
body, body * { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* venue photo in colour, gently graded to the palette */
.sx-venue__photo img { filter: saturate(.92) sepia(.06) contrast(1.03) brightness(1.02) !important; }
/* more air: the RSVP starts well below the venue */
.rsvp { padding-top: clamp(7rem, 12vw, 11rem) !important; }
.sx-venue { margin-bottom: clamp(1rem, 3vw, 3rem); }
.rsvp .serif-text { max-width: 34rem; }
.rsvp-date { font-weight: 600; color: var(--c-ink); white-space: nowrap; border-bottom: .5px solid var(--olive); padding-bottom: 1px; }
.sx-venue__photo img { filter: saturate(.95) contrast(1.03) brightness(1.03) !important; object-position: 50% 45%; }
/* venue photo: film-like grade — warm highlights, soft greens, lifted shadows — and a fine grain */
.sx-venue__photo img { filter: saturate(.82) sepia(.1) hue-rotate(-3deg) contrast(1.06) brightness(1.04) !important; }
.sx-venue__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(247, 228, 196, .35) 0%, rgba(168, 149, 123, .18) 50%, rgba(58, 50, 44, .30) 100%); }
.sx-venue__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  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 baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
/* guests block */
.if-come[hidden], .kids[hidden], #partnerRow[hidden] { display: none !important; }
.if-come { animation: mFade .8s ease both; }
.kid { display: grid; grid-template-columns: 1fr 96px 28px; gap: 1rem; align-items: end; animation: mFade .6s ease both; }
.kid__age select { width: 100%; background: transparent; border: 0; border-bottom: .5px solid rgba(58, 50, 44, .35); padding: .55rem 0; font: 400 1.05rem var(--font-caps); color: var(--c-ink); }
.kid__x { border: 0; background: none; color: var(--c-stone); font-size: 1.3rem; line-height: 1; padding: 0 0 .6rem; cursor: pointer; }
.kid__x:hover { color: var(--c-ink); }
.kids__add { margin: .4rem 0 1.2rem; border: 0; background: none; padding: 0; font: 500 .74rem var(--font-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--olive-deep); cursor: pointer; }
.kids__add:hover { text-decoration: underline; text-underline-offset: 4px; }
#partnerRow, .kids { margin-top: .6rem; }
.if-come fieldset.q { margin-bottom: 1.4rem; }
.kid + .kid { margin-top: .4rem; }
#partnerRow + fieldset.q, .if-come > fieldset.q + fieldset.q { margin-top: 1.6rem; }
.hero__scroll { font-weight: 600 !important; }
.form__promise { margin: 1.8rem auto 0; max-width: 24rem; text-align: center; font: 400 .98rem/1.6 var(--font-caps); color: #6b6157; }
.form__promise-rule { display: block; width: 28px; height: 1px; margin: 0 auto 1rem; background: var(--olive); }

/* wider, more generous reply card; terracotta only in the smallest signals */
.rsvp .reply-card { max-width: 760px !important; width: calc(100% - 2 * var(--gutter)); padding: clamp(2.6rem, 2rem + 3vw, 4.6rem) clamp(1.6rem, 1rem + 4vw, 5rem) !important; }
.rsvp .reply-card::before { inset: 12px !important; }
.rsvp .reply-card::after { content: ""; position: absolute; left: 50%; top: 12px; width: 42px; height: 1px; transform: translate(-50%, -.5px); background: var(--c-terra); }
@media (min-width: 761px) {
  .rsvp .form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .rsvp .form > fieldset.q:first-of-type, .rsvp .form > .if-come, .rsvp .form > .form__submit, .rsvp .form > .form__promise, .rsvp .form > p.visually-hidden, .rsvp .form > input[type=hidden] { grid-column: 1 / -1; }
  .rsvp .if-come { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .rsvp .if-come[hidden] { display: none !important; }
  .rsvp .if-come > .kids, .rsvp .if-come > #partnerRow { grid-column: 1 / -1; }
  .rsvp .form > fieldset.q:first-of-type { display: flex; gap: 2.6rem; flex-wrap: wrap; align-items: center; }
  .rsvp .form > fieldset.q:first-of-type legend { width: 100%; }
}
.opt input:checked::after { background: var(--c-terra) !important; transform: scale(.72) !important; }
.opt input:checked { border-color: var(--c-terra) !important; }
.rsvp input:focus, .kid__age select:focus { border-bottom-color: var(--c-terra) !important; outline: none; }
.form__submit { min-height: 3.6rem; margin-top: 1.4rem; }
.form__promise-rule { background: var(--c-terra) !important; opacity: .8; }
.rsvp { max-width: none !important; }
.rsvp > .eyebrow-sm, .rsvp > .script-title, .rsvp > .serif-text { max-width: 640px; margin-left: auto; margin-right: auto; }
.rsvp .reply-card { width: min(760px, calc(100% - 2 * var(--gutter))) !important; margin-left: auto !important; margin-right: auto !important; }
.form__promise { max-width: 30rem; font-size: 1.08rem; line-height: 1.7; color: #5E534A; }
.form__promise .fp-sign { display: block; margin-top: .9rem; font: 400 1.5rem var(--font-script); color: var(--c-ink); }
/* countdown in place of the date */
.sx-count { display: flex; align-items: flex-start; justify-content: center; gap: clamp(1rem, 3vw, 3rem); margin: .4rem 0; }
.sx-count > div { display: grid; justify-items: center; min-width: clamp(4.2rem, 9vw, 8.4rem); }
.sx-count b { font: 300 clamp(2.8rem, 1.6rem + 4.4vw, 6.2rem)/1 var(--font-caps); letter-spacing: .04em; color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; }
.sx-count b.tk { animation: tk .9s cubic-bezier(.22, 1, .36, 1); }
@keyframes tk { from { opacity: .35; filter: blur(3px); } to { opacity: 1; filter: none; } }
.sx-count span { margin-top: .9rem; font: 500 .68rem var(--font-caps); letter-spacing: .34em; text-transform: uppercase; color: var(--olive-deep); }
.sx-count i { align-self: center; width: 1px; height: clamp(2.4rem, 4vw, 4rem); margin-top: -1.4rem; background: rgba(138, 143, 106, .45); }
.sx-until { margin-top: .4rem; }
@media (max-width: 600px) { .sx-count { gap: .5rem; } .sx-count i { display: none; } .sx-count > div { min-width: 0; flex: 1; } .sx-count span { letter-spacing: .2em; font-size: .58rem; } }
/* countdown: more air, readable labels, rolling digits */
.sx-date { padding-top: clamp(5rem, 9vw, 8rem) !important; padding-bottom: clamp(6rem, 12vw, 11rem) !important; gap: 1.6rem !important; }
.sx-count b { position: relative; display: block; overflow: hidden; height: 1.08em; min-width: 2.2ch; text-align: center; }
.sx-count .roll { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
.sx-count .roll--in { animation: rollIn .9s cubic-bezier(.16, 1, .3, 1) both; }
.sx-count .roll--out { animation: rollOut .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rollIn { from { transform: translateY(70%); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes rollOut { from { transform: none; opacity: 1; filter: none; } to { transform: translateY(-70%); opacity: 0; filter: blur(6px); } }
.sx-count > div:first-child b { min-width: 3.2ch; }
.sx-count span { font-size: .8rem !important; letter-spacing: .22em !important; color: #5E534A !important; }
/* UX: every small label at a readable size, calmer spacing */
.sx-kicker { font-size: .86rem !important; letter-spacing: .22em !important; color: #5E534A; }
.sx-kicker--soft { color: #7A6E60 !important; }
.rsvp .q__label, .rsvp legend { font-size: .84rem !important; letter-spacing: .18em !important; color: #4A4235 !important; }
.opt span { font-size: 1.12rem; }
.form__submit { font-size: .9rem !important; letter-spacing: .24em !important; }
.kids__add { font-size: .84rem !important; letter-spacing: .16em !important; }
.sx-link { font-size: .84rem !important; letter-spacing: .22em !important; }
.cx-credits { font-size: 12px !important; letter-spacing: .3em !important; }
/* form: one calm column inside the wider card (labels no longer wrap) */
.rsvp .form, .rsvp .if-come { display: block !important; }
.rsvp .form > fieldset.q:first-of-type { display: flex !important; flex-wrap: wrap; column-gap: 2.6rem; }
.rsvp .form > fieldset.q:first-of-type legend { width: 100%; }
.rsvp .q { margin-bottom: 1.8rem; }
/* the "font" shorthand resets numerals, so force lining digits everywhere */
body, body * { font-variant-numeric: lining-nums !important; }
.sx-count b, .sx-count b * { font-variant-numeric: lining-nums tabular-nums !important; }
.sx-count b .roll { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; margin: 0 !important; text-transform: none !important; }
/* venue: a taller, letterboxed film frame — slow drift, warm grade, grain, soft vignette, card floating in the light */
.sx-venue { min-height: clamp(680px, 100vh, 1000px) !important; }
.sx-venue__photo { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important; }
.sx-venue__photo img { object-position: 50% 55% !important; filter: saturate(.84) sepia(.1) hue-rotate(-3deg) contrast(1.07) brightness(1.03) !important; animation: venueDrift 30s ease-in-out infinite alternate; }
@keyframes venueDrift { from { scale: 1; } to { scale: 1.06; } }
.sx-venue__photo { background: #2a241f; }
.sx-venue::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(30, 24, 20, 0) 45%, rgba(30, 24, 20, .34) 100%); }
.sx-venue .sx-card { transform: translateY(0); }
.sx-venue::before { content: "La Vénus de Lisbonne · Calhandriz"; position: absolute; left: clamp(28px, 4vw, 64px); bottom: clamp(18%, 18vh, 22%); z-index: 2;
  font: 500 .74rem var(--font-caps); letter-spacing: .32em; text-transform: uppercase; color: rgba(247, 243, 235, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
@media (max-width: 600px) { .sx-venue::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .sx-venue__photo img { animation: none; } }
/* map link as a clear button: outlined, pin icon, fills on hover */
.sx-link { display: inline-flex !important; align-items: center; gap: .7rem; padding: 1rem 1.9rem !important; background: none !important;
  border: 1px solid var(--olive-deep); color: var(--olive-deep) !important; letter-spacing: .22em !important;
  transition: background-color .6s cubic-bezier(.22, 1, .36, 1), color .6s cubic-bezier(.22, 1, .36, 1) !important; }
.sx-link::before { content: ""; width: 12px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.2 6 9 6 9s6-4.8 6-9a6 6 0 0 0-6-6zm0 8.3A2.3 2.3 0 1 1 6 3.7a2.3 2.3 0 0 1 0 4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.2 6 9 6 9s6-4.8 6-9a6 6 0 0 0-6-6zm0 8.3A2.3 2.3 0 1 1 6 3.7a2.3 2.3 0 0 1 0 4.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-link:hover, .sx-link:focus-visible { background: var(--olive-deep) !important; color: var(--c-linen) !important; }
.sx-venue::before { display: none !important; }
.rsvp textarea { width: 100%; min-height: 6.5rem; resize: vertical; background: transparent; border: 0; border-bottom: .5px solid rgba(58, 50, 44, .35); padding: .6rem 0;
  font: 400 1.08rem/1.6 var(--font-caps); color: var(--c-ink); transition: border-color .6s cubic-bezier(.22, 1, .36, 1); }
.rsvp textarea:focus { outline: none; border-bottom-color: var(--c-terra); }
.rsvp .q__hint { font: 400 .92rem var(--font-caps) !important; color: #7A6E60 !important; letter-spacing: 0 !important; font-style: normal !important; }

/* ===== The lace card that rises out of the envelope (reference: lace-cut paper, script title, caps names) ===== */
.insert.insert--lace { left: 9%; width: 82%; aspect-ratio: 1 !important; top: 34%; padding: 0 !important; display: grid; place-items: center;
  background: url("assets/lace-card-hq.webp?v=1") center / 100% 100% no-repeat !important; box-shadow: none !important;
  filter: drop-shadow(0 2px 2px rgba(40, 30, 15, .16)) drop-shadow(0 18px 26px rgba(40, 30, 15, .22)); }
.insert.insert--lace .insert__photo { display: none; }
.lc-text { display: grid; justify-items: center; text-align: center; gap: calc(var(--env-w) * .018); padding: 0 16%; }
.lc-title { font: 400 calc(var(--env-w) * .1)/.95 var(--font-script); color: var(--c-ink); max-width: 6.5em; }
.lc-names { margin-top: calc(var(--env-w) * .03); font: 500 calc(var(--env-w) * .034) var(--font-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.lc-names .amp { font-size: 1em; margin: 0 .2em; top: 0; }
.lc-date { font: 500 calc(var(--env-w) * .03) var(--font-caps); letter-spacing: .16em; text-transform: uppercase; color: #5E534A; }
.invite.is-rise .insert.insert--lace { transform: translateY(-58%) !important; }
.insert.insert--lace { left: 14%; width: 72%; top: 40%; }
.invite.is-rise .insert.insert--lace { transform: translateY(-50%) !important; }
.lc-text { padding: 0 18% 8%; gap: calc(var(--env-w) * .014); }
.lc-title { font-size: calc(var(--env-w) * .11); line-height: .9; max-width: 4.6em; }
.openenv__back { z-index: 0 !important; position: absolute; }
.insert.insert--lace { z-index: 2 !important; }
.openenv__front { z-index: 3 !important; }
/* countdown hierarchy: small caps kicker, big numerals, tiny unit labels, a script line, quiet place */
.sx-date .sx-kicker:first-of-type { font-size: .78rem !important; letter-spacing: .3em !important; color: var(--olive-deep) !important; }
.sx-count span { font-size: .7rem !important; letter-spacing: .3em !important; color: #8A7C68 !important; margin-top: 1.1rem; }
.sx-until { margin: .8rem 0 0; font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem)/1.1 var(--font-script) !important; color: var(--c-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
.sx-date .sx-kicker--soft { font-size: .74rem !important; letter-spacing: .3em !important; color: #8A7C68 !important; }

/* after the envelope opens: the light fade appears slowly (no jump) and sits lower */
.hero.is-opened .hero__bg, .hero.is-opened .hero__video { -webkit-mask-image: none !important; mask-image: none !important; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(247, 243, 235, 0) 0%, rgba(247, 243, 235, .12) 22%, rgba(247, 243, 235, .38) 48%, rgba(247, 243, 235, .72) 74%, rgba(247, 243, 235, .94) 90%, #F7F3EB 100%);
  transition: opacity 3.2s cubic-bezier(.4, 0, .2, 1) .4s; }
.hero.is-opened::after { opacity: 1; display: block !important; }
.hero.is-opened .invite, .hero.is-opened .hero__scroll { z-index: 3; }
/* more air after the envelope, smaller welcome photo */
.sx-greet { padding-top: clamp(8rem, 14vw, 13rem) !important; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important; }
.sx-photo { max-width: 400px; justify-self: end; width: 100%; }
@media (max-width: 760px) { .sx-photo { justify-self: center; max-width: 320px; } }
/* lace card starts fully inside the pocket, then rises */
.insert.insert--lace { left: 18% !important; width: 64% !important; top: 35% !important; }
.invite.is-rise .insert.insert--lace { transform: translateY(-52%) !important; }
/* the fade must end fully opaque before the hero's bottom edge, or the moving film shows through as a flickering band */
.hero::after { height: 42% !important;
  background: linear-gradient(180deg, rgba(247, 243, 235, 0) 0%, rgba(247, 243, 235, .16) 20%, rgba(247, 243, 235, .45) 40%, rgba(247, 243, 235, .78) 58%, rgba(247, 243, 235, .96) 72%, #F7F3EB 80%, #F7F3EB 100%) !important; }
.hero.is-opened .hero__bg { clip-path: inset(0 0 2px 0); }
/* ===== Film → page: the video itself fades to transparent (no overlay colour, so the paper texture runs through untouched).
   The mask is always there; opening only slides it, so the fade glides in instead of switching on. ===== */
.hero::after { display: none !important; }
.hero.is-opened .hero__bg { clip-path: none !important; }
.hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 94%, transparent 100%) !important;
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 94%, transparent 100%) !important;
  -webkit-mask-size: 100% 165%; mask-size: 100% 165%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 3.4s cubic-bezier(.4, 0, .2, 1) .3s, mask-position 3.4s cubic-bezier(.4, 0, .2, 1) .3s; }
.hero.is-opened .hero__bg { bottom: -32svh !important; -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.hero.is-opened .hero__video { height: 100% !important; }
/* welcome block further from the envelope; our photo, landscape crop kept elegant */
.sx-greet { padding-top: clamp(12rem, 20vw, 18rem) !important; }
.sx-photo { aspect-ratio: 4 / 5; }
.sx-photo img { object-position: 42% 50%; }
.sx-photo::before { display: none; }
.hero.is-opened .hero__bg, body .hero .hero__bg { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 94%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 70%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 94%, transparent 100%) !important; }
.hero.is-opened .hero__video { -webkit-mask-image: none !important; mask-image: none !important; }
.hero.is-opened .hero__bg { bottom: 0 !important; }
/* form card outline in terracotta from the palette */
.rsvp .reply-card::before { border-color: rgba(180, 100, 63, .55) !important; }
.rsvp .reply-card { outline: .5px solid rgba(180, 100, 63, .35); outline-offset: 0; }
/* envelope dissolves, the lace card comes forward to fill the screen */
.insert.insert--lace { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .1s, translate 2.4s cubic-bezier(.65, 0, .35, 1), scale 2.4s cubic-bezier(.65, 0, .35, 1) !important; transform-origin: 50% 50%; will-change: transform, translate, scale; }
.openenv__back, .openenv__front { transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1), filter 1.8s cubic-bezier(.4, 0, .2, 1); }
.invite.is-zoom .openenv__back, .invite.is-zoom .openenv__front { opacity: 0; filter: blur(3px); }
.invite.is-zoom .openenv { filter: none !important; }
.invite.is-zoom .insert.insert--lace { z-index: 5 !important; filter: drop-shadow(0 30px 60px rgba(30, 22, 12, .35)); }
/* zoomed card: its rise offset is dropped, translate/scale do the whole move */
.invite.is-zoom .insert.insert--lace { transform: none !important; }
/* Ukrainian script titles: Great Vibes (elegant, full Cyrillic) instead of Marck Script */
:lang(uk) .script-title, :lang(uk) .invite__intro h2, :lang(uk) .lc-title, :lang(uk) .sx-sign, :lang(uk) .sx-until, :lang(uk) .fp-sign { font-family: "Great Vibes", var(--font-script) !important; }
.invite.is-zoom ~ .hero__scroll, .hero.is-opened:has(.is-zoom) .hero__scroll { opacity: 0; transition: opacity 1s; }
/* cinematic zoom: long ease, the film behind slowly defocuses and dims like a pulled focus, the card settles from a slight tilt */
.insert.insert--lace { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .1s, translate 3.4s cubic-bezier(.76, 0, .24, 1), scale 3.4s cubic-bezier(.76, 0, .24, 1), rotate 3.4s cubic-bezier(.22, 1, .36, 1) !important; }
.invite.is-zoom .insert.insert--lace { rotate: 0deg; }
.invite.is-rise:not(.is-zoom) .insert.insert--lace { rotate: -1.2deg; }
.openenv__back, .openenv__front { transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1), filter 2.6s cubic-bezier(.4, 0, .2, 1) !important; }
.hero__video { transition: filter 3.6s cubic-bezier(.4, 0, .2, 1), transform 6s cubic-bezier(.16, 1, .3, 1) !important; }
.hero:has(.invite.is-zoom) .hero__video { filter: saturate(.7) sepia(.14) hue-rotate(-4deg) contrast(1.02) brightness(.86) blur(3px) !important; transform: scale(1.06) !important; }
.hero:has(.invite.is-zoom) .hero__shade { opacity: .6 !important; transition: opacity 3.6s ease; }
.invite.is-zoom .insert.insert--lace { filter: drop-shadow(0 2px 3px rgba(30, 22, 12, .2)) drop-shadow(0 40px 70px rgba(20, 14, 8, .45)) !important; }
/* lace card typography: a clear, letterpress-like hierarchy */
.lc-text { gap: 0 !important; padding: 0 17% 3% !important; }
.lc-kick { font: 500 calc(var(--env-w) * .02) var(--font-caps); letter-spacing: .42em; text-transform: uppercase; color: #8A7C68; margin-bottom: calc(var(--env-w) * .012); }
.lc-title { font-size: calc(var(--env-w) * .108) !important; line-height: .86 !important; color: #2E2723 !important; }
.lc-rule { display: block; width: calc(var(--env-w) * .05); height: 1px; margin: calc(var(--env-w) * .03) 0 calc(var(--env-w) * .026); background: var(--c-terra); opacity: .75; }
.lc-names { margin: 0 !important; font: 500 calc(var(--env-w) * .031) var(--font-caps) !important; letter-spacing: .3em !important; color: #2E2723 !important; }
.lc-date { margin-top: calc(var(--env-w) * .012); font: 400 calc(var(--env-w) * .024) var(--font-caps) !important; letter-spacing: .2em !important; color: #4A4235 !important; }
.lc-place { margin-top: calc(var(--env-w) * .006); font: 400 calc(var(--env-w) * .019) var(--font-caps); letter-spacing: .14em; color: #8A7C68; }
.lc-note { margin-top: calc(var(--env-w) * .026); font: 400 calc(var(--env-w) * .036) var(--font-script); color: #5E534A; }
:lang(uk) .lc-note { font-family: "Great Vibes", var(--font-script); }
.lc-text > * { text-shadow: 0 .5px 0 rgba(255, 255, 255, .6); }

/* ===== Calm opening sequence =====
   0.0s flap opens · 0.9s card slides up out of the pocket (1.6s) · 2.7s envelope fades away in place (2.4s, no blur, no movement)
   while the card, perfectly straight, glides to the centre and grows (2.6s). The film behind stays as it is. */
.insert.insert--lace { rotate: 0deg !important;
  transition: transform 1.6s cubic-bezier(.33, 0, .2, 1), translate 2.6s cubic-bezier(.45, 0, .2, 1), scale 2.6s cubic-bezier(.45, 0, .2, 1) !important; }
.invite.is-rise:not(.is-zoom) .insert.insert--lace { rotate: 0deg !important; }
.openenv__back, .openenv__front { transition: opacity 2.4s cubic-bezier(.4, 0, .2, 1) !important; filter: none !important; }
.invite.is-zoom .openenv__back, .invite.is-zoom .openenv__front { opacity: 0 !important; filter: none !important; }
.hero:has(.invite.is-zoom) .hero__video { filter: saturate(.72) sepia(.14) hue-rotate(-4deg) contrast(1.04) brightness(1.07) !important; transform: none !important; }
.hero:has(.invite.is-zoom) .hero__shade { opacity: 1 !important; }
.invite.is-zoom .insert.insert--lace { filter: drop-shadow(0 2px 3px rgba(30, 22, 12, .18)) drop-shadow(0 28px 50px rgba(20, 14, 8, .32)) !important; transition-property: transform, translate, scale, filter; }
/* the light fade arrives so slowly the eye doesn't catch it: long, linear-ish, starts after the card settles */
.hero__bg { transition: -webkit-mask-position 7s cubic-bezier(.37, 0, .63, 1) 2.2s, mask-position 7s cubic-bezier(.37, 0, .63, 1) 2.2s !important; }
/* no jump on click: the envelope keeps exactly the same place from closed to open (no top transition, same offset in every state) */
body .invite, body.is-gated .invite, body.is-gated .invite.is-opening, body.is-gated .invite:not(.is-opening), .hero .invite { transition: none !important; }
@media (min-width: 601px) { body .invite, body.is-gated .invite, body.is-gated .invite.is-opening, body.is-gated .invite:not(.is-opening), .hero .invite { top: calc(var(--env-w) * .1 - 8svh) !important; } }
@media (max-width: 600px) { body .invite, body.is-gated .invite, body.is-gated .invite.is-opening, body.is-gated .invite:not(.is-opening), .hero .invite { top: calc(var(--env-w) * .1 - 4svh) !important; } }
/* our photo exactly as it is */
.sx-photo img { filter: none !important; }
/* the screen lightens as one slow breath: the dark shade, vignette and bottom fade all ease over the same long time */
.hero__shade, .hero__edge { transition: opacity 7s cubic-bezier(.37, 0, .63, 1) 2.2s !important; }
.hero.is-opened .hero__shade { opacity: 0 !important; }
.hero.is-opened .hero__edge { opacity: .55; }
.hero:has(.invite.is-zoom) .hero__shade { opacity: 0 !important; }

/* ===== FINAL light fade (replaces every earlier version) =====
   One layer only: the film's own mask. The mask is twice the hero's height; its top half is solid, its bottom half
   holds the fade (solid to 78% of the screen, then dissolving to nothing at the very bottom). Opening slides the mask
   from the solid half to the fade half, so the light rises from below the screen, slowly, with no moment you can point at. */
.hero::after { display: none !important; }
.hero__video, .hero__tone, .hero__lift { -webkit-mask-image: none !important; mask-image: none !important; }
.hero .hero__bg, .hero.is-opened .hero__bg, body .hero .hero__bg {
  bottom: 0 !important; clip-path: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 89%, rgba(0,0,0,.82) 91.5%, rgba(0,0,0,.55) 94%, rgba(0,0,0,.28) 96.5%, rgba(0,0,0,.09) 98.6%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 89%, rgba(0,0,0,.82) 91.5%, rgba(0,0,0,.55) 94%, rgba(0,0,0,.28) 96.5%, rgba(0,0,0,.09) 98.6%, transparent 100%) !important;
  -webkit-mask-size: 100% 200% !important; mask-size: 100% 200% !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important;
  transition: -webkit-mask-position 6.5s cubic-bezier(.45, 0, .25, 1) 2.8s, mask-position 6.5s cubic-bezier(.45, 0, .25, 1) 2.8s !important; }
.hero.is-opened .hero__bg { -webkit-mask-position: 0 100% !important; mask-position: 0 100% !important; }
/* the dark shade lifts on the very same curve and clock, so it reads as one movement */
.hero__shade { transition: opacity 6.5s cubic-bezier(.45, 0, .25, 1) 2.8s !important; }
.hero__edge { transition: opacity 6.5s cubic-bezier(.45, 0, .25, 1) 2.8s !important; }
/* kill the old overlay fade for good (it switched on instantly when the page unlocked) */
.hero::after, .hero.is-opened::after, body .hero.is-opened::after { display: none !important; content: none !important; }
/* fade a touch lower */
.hero .hero__bg, .hero.is-opened .hero__bg, body .hero .hero__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 91%, rgba(0,0,0,.8) 93%, rgba(0,0,0,.52) 95.2%, rgba(0,0,0,.26) 97.3%, rgba(0,0,0,.08) 99%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 91%, rgba(0,0,0,.8) 93%, rgba(0,0,0,.52) 95.2%, rgba(0,0,0,.26) 97.3%, rgba(0,0,0,.08) 99%, transparent 100%) !important; }
/* Scroll appears only once the card has fully come out */
.hero__scroll { opacity: 0 !important; transition: opacity 1.6s ease !important; }
.hero.is-opened:has(.invite.is-zoom) .hero__scroll { opacity: 1 !important; transition-delay: 3s !important; }
/* the fade dissolves IN (all of it at once, very slowly) instead of sliding up: --k goes 0 → 1 */
@property --k { syntax: '<number>'; inherits: false; initial-value: 0; }
.hero .hero__bg, .hero.is-opened .hero__bg, body .hero .hero__bg {
  --k: 0;
  -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,calc(1 - var(--k) * .2)) 82%, rgba(0,0,0,calc(1 - var(--k) * .48)) 88%, rgba(0,0,0,calc(1 - var(--k) * .74)) 93%, rgba(0,0,0,calc(1 - var(--k) * .92)) 97.5%, rgba(0,0,0,calc(1 - var(--k))) 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,calc(1 - var(--k) * .2)) 82%, rgba(0,0,0,calc(1 - var(--k) * .48)) 88%, rgba(0,0,0,calc(1 - var(--k) * .74)) 93%, rgba(0,0,0,calc(1 - var(--k) * .92)) 97.5%, rgba(0,0,0,calc(1 - var(--k))) 100%) !important;
  transition: --k 7s cubic-bezier(.4, 0, .3, 1) 2.6s !important; }
.hero.is-opened .hero__bg { --k: 1; }
/* crisp text on the enlarged card: no cached low-res layer */
.insert.insert--lace, .invite.is-zoom .insert.insert--lace { will-change: auto !important; backface-visibility: visible !important; }
.invite.is-zoom .lc-text { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
/* "Please": smaller and a little lower */
.lc-kick { font-size: calc(var(--env-w) * .016) !important; letter-spacing: .46em !important; margin: calc(var(--env-w) * .02) 0 calc(var(--env-w) * .006) !important; }
/* countdown: small touches of colour */
.sx-count i { background: linear-gradient(rgba(180, 100, 63, 0), rgba(180, 100, 63, .55), rgba(180, 100, 63, 0)) !important; }
.sx-count > div:last-child b { color: var(--c-terra) !important; }
.sx-date .sx-kicker:first-of-type::before, .sx-date .sx-kicker:first-of-type::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-sage); vertical-align: middle; margin: 0 14px; }
.sx-until { color: var(--olive-deep) !important; }

/* ===== PROPOSAL preview (?proposal): rhythm of light and dark bands, colour with purpose ===== */
/* 1 welcome: bigger photo, the letter sits lower like a caption, a terracotta date stamp */
html.proposal .sx-greet { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; max-width: 1280px; gap: clamp(3rem, 7vw, 8rem); }
html.proposal .sx-photo { max-width: none; aspect-ratio: 4 / 5; justify-self: stretch; }
html.proposal .sx-letter { align-self: end; padding-bottom: 2rem; }
html.proposal .sx-letter .sx-kicker { color: var(--c-terra) !important; }
html.proposal .sx-letter .sx-kicker::before { background: var(--c-terra) !important; }
/* 2 countdown: a deep olive band — the one dark moment of the page, linen numerals, terracotta seconds */
html.proposal .sx-date { background: #3E4230; color: #F7F3EB; margin-top: clamp(4rem, 8vw, 7rem); }
html.proposal .sx-date .sx-count b { color: #F7F3EB !important; }
html.proposal .sx-date .sx-count > div:last-child b { color: #D9906A !important; }
html.proposal .sx-date .sx-count span, html.proposal .sx-date .sx-kicker, html.proposal .sx-date .sx-kicker--soft { color: rgba(247, 243, 235, .7) !important; }
html.proposal .sx-date .sx-until { color: #EDE4D7 !important; }
html.proposal .sx-date .sx-rule { background: linear-gradient(rgba(247,243,235,0), rgba(247,243,235,.5), rgba(247,243,235,0)) !important; }
html.proposal .sx-count i { background: rgba(247, 243, 235, .25) !important; }
/* 3 rsvp: a soft envelope-paper band so the white card floats */
html.proposal .rsvp { background: #EDE4D7; padding-bottom: clamp(5rem, 9vw, 8rem) !important; }
html.proposal .rsvp .reply-card { background: #FBF8F2 !important; }
html.proposal .form__submit { background: var(--c-terra) !important; border-color: var(--c-terra) !important; }
/* 4 farewell: linen again, the seal bigger, button quiet */
html.proposal .bye__seal { width: 150px; }
html.proposal .bye { padding-top: clamp(6rem, 10vw, 9rem) !important; }

/* ===== PROPOSAL 2 preview (?proposal2): one continuous film, no hard edges ===== */
/* every band melts into the next through long gradients instead of straight cuts */
html.proposal2 .sx-greet { max-width: 1100px; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important; gap: clamp(3rem, 7vw, 7rem); padding-bottom: clamp(7rem, 12vw, 11rem) !important; }
html.proposal2 .sx-photo { max-width: 340px !important; justify-self: end; aspect-ratio: 4 / 5; box-shadow: 0 40px 70px -40px rgba(40, 30, 15, .45); }
html.proposal2 .sx-photo::after { inset: 12px; border-color: rgba(247, 243, 235, .75); }
html.proposal2 .sx-letter { align-self: center; padding-bottom: 0; }
/* countdown: a dusk band — the quinta at evening, very dim, behind linen numerals; edges dissolve into the paper */
html.proposal2 .sx-date { position: relative; isolation: isolate; background: none !important; margin-top: 0; padding: clamp(10rem, 16vw, 15rem) var(--gutter) !important; }
html.proposal2 .sx-date::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, #F7F3EB 0%, #5C5E47 18%, #3E4230 34%, #3A3D2C 66%, #6E6A55 84%, #EDE4D7 100%); }
html.proposal2 .sx-date::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: luminosity;
  background: url("assets/quinta-pergola.webp") center 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%); mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%); }
html.proposal2 .sx-date .sx-rule { display: none; }
html.proposal2 .sx-date .sx-count > div:last-child b { color: #E0A27F !important; }
/* rsvp: the paper deepens gently to envelope tone and back */
html.proposal2 .rsvp { background: linear-gradient(180deg, #EDE4D7 0%, #EDE4D7 70%, #F7F3EB 100%) !important; }
html.proposal2 .rsvp .reply-card { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 50px 90px -50px rgba(40, 30, 15, .4) !important; }
/* farewell: a letterboxed strip of the pergola that fades in from the paper, seal and words over the light */
html.proposal2 .bye { position: relative; isolation: isolate; padding-top: clamp(9rem, 14vw, 13rem) !important; padding-bottom: clamp(9rem, 14vw, 13rem) !important; }
html.proposal2 .bye::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .38;
  background: url("assets/quinta-pergola.webp") center 45% / cover no-repeat; filter: saturate(.7) sepia(.15);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%); }
html.proposal2 .bye .script-title { color: #2E2723; }

/* ===== PROPOSAL 3 (?proposal3): quiet luxury — like a printed invitation suite, one film moment, one dark ending ===== */
/* welcome: centred like a letter, small photo set like a tipped-in print */
html.proposal3 .sx-greet { display: grid !important; grid-template-columns: 1fr !important; justify-items: center; text-align: center !important; max-width: 760px; gap: 3.2rem;
  padding-top: clamp(11rem, 18vw, 16rem) !important; padding-bottom: clamp(7rem, 11vw, 10rem) !important; }
html.proposal3 .sx-photo { width: 260px !important; max-width: 260px !important; aspect-ratio: 4 / 5; justify-self: center !important;
  padding: 10px; background: #FBF8F2; box-shadow: 0 1px 2px rgba(40, 30, 15, .12), 0 30px 50px -30px rgba(40, 30, 15, .4); }
html.proposal3 .sx-photo::after { inset: 10px; border: 0; }
html.proposal3 .sx-letter .script-title, html.proposal3 .sx-letter .greet__text { text-align: center !important; margin-left: auto; margin-right: auto; }
html.proposal3 .sx-letter .sx-kicker::before { display: none; }
html.proposal3 .sx-letter .greet__text { max-width: 34rem; }
/* countdown: stationery — a double hairline frame on linen, thin numerals, one terracotta hairline */
html.proposal3 .sx-date { background: none !important; padding: clamp(4rem, 7vw, 6rem) var(--gutter) !important; }
html.proposal3 .sx-date .sx-rule { display: none; }
html.proposal3 .sx-count { position: relative; padding: clamp(2.6rem, 4vw, 3.6rem) clamp(2rem, 5vw, 5rem); outline: .5px solid rgba(58, 50, 44, .28); outline-offset: 0;
  box-shadow: inset 0 0 0 7px #F7F3EB, inset 0 0 0 7.5px rgba(58, 50, 44, .18); }
html.proposal3 .sx-count::before { content: ""; position: absolute; left: 50%; top: -1px; width: 60px; height: 1px; transform: translateX(-50%); background: var(--c-terra); }
html.proposal3 .sx-count i { background: rgba(58, 50, 44, .16) !important; }
html.proposal3 .sx-count > div:last-child b { color: var(--c-ink) !important; }
/* one cinematic moment between countdown and RSVP: a 2.39:1 film frame of the pergola, edges feathered into the paper */
html.proposal3 .rsvp::before { content: ""; display: block; width: 100%; aspect-ratio: 2.39 / 1; max-height: 70vh; margin: 0 0 clamp(6rem, 10vw, 9rem);
  background: url("assets/quinta-pergola.webp") center 52% / cover no-repeat; filter: saturate(.85) sepia(.08) contrast(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
html.proposal3 .rsvp { padding-top: 0 !important; background: none !important; max-width: none !important; }
html.proposal3 .form__submit { background: var(--c-terra) !important; border-color: var(--c-terra) !important; }
/* ending: the page deepens slowly into olive, like a fade to black at the end of a film; seal and words in linen */
html.proposal3 .bye { position: relative; isolation: isolate; margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(14rem, 22vw, 20rem) var(--gutter) clamp(8rem, 12vw, 11rem) !important;
  background: linear-gradient(180deg, rgba(62, 66, 48, 0) 0%, rgba(62, 66, 48, .55) 22%, #3E4230 44%, #33372A 100%) !important; }
html.proposal3 .bye .script-title { color: #F3ECE0 !important; }
html.proposal3 .bye__names { color: rgba(243, 236, 224, .72) !important; }
html.proposal3 .bye__seal .bye__frame { color: rgba(243, 236, 224, .7); } html.proposal3 .bye__seal .bye__oj { color: #EDE4D7; }
html.proposal3 .bye__back { border-color: rgba(243, 236, 224, .55) !important; color: #F3ECE0 !important; }
/* form card: warm beige paper (same paper grain as the page) */
.rsvp .reply-card { background: #EDE4D7 url("assets/paper.jpg?v=3") 0 0 / 512px 512px repeat !important; background-blend-mode: multiply !important; }
/* footer seal smaller */
.bye__seal { width: 84px !important; }
html.proposal3 .sx-count { gap: clamp(1rem, 2.4vw, 2.4rem); } html.proposal3 .sx-count > div { min-width: clamp(4rem, 7vw, 6.6rem); }
/* form card back to its original paper look */
.rsvp .reply-card { background: #FCFAF5 url("assets/paper.jpg?v=3") center / 400px repeat !important; background-blend-mode: normal !important; }
.hero__scroll, .hero.is-opened .hero__scroll { color: #F3ECE0 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .45) !important; } .hero.is-opened .hero__scroll::before, .hero.is-opened .hero__scroll::after { background: rgba(243, 236, 224, .8) !important; }

/* countdown on a solid deep-olive band: no gradients, just texture — fine film grain + a whisper of the paper fibre */
.sx-date { position: relative; isolation: isolate; background: #3E4230 !important; color: #F3ECE0; margin-top: clamp(3rem, 6vw, 5rem); }
.sx-date::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: url("assets/paper.jpg?v=3") 0 0 / 420px 420px repeat; }
.sx-date::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; }
.sx-date .sx-count b { color: #F3ECE0 !important; }
.sx-date .sx-count > div:last-child b { color: #D9906A !important; }
.sx-date .sx-count span, .sx-date .sx-kicker, .sx-date .sx-kicker--soft { color: rgba(243, 236, 224, .72) !important; }
.sx-date .sx-date .sx-kicker:first-of-type::before, .sx-date .sx-kicker:first-of-type::after { background: rgba(243, 236, 224, .5) !important; }
.sx-date .sx-until { color: #EDE4D7 !important; }
.sx-date .sx-rule { background: rgba(243, 236, 224, .35) !important; }
.sx-count i { background: rgba(243, 236, 224, .22) !important; }
/* welcome, as in proposal 3: centred like a letter, small photo set like a tipped-in print */
.sx-greet { display: grid !important; grid-template-columns: 1fr !important; justify-items: center; text-align: center !important; max-width: 760px; gap: 3.2rem;
  padding-top: clamp(11rem, 18vw, 16rem) !important; padding-bottom: clamp(7rem, 11vw, 10rem) !important; }
.sx-photo { width: 260px !important; max-width: 260px !important; aspect-ratio: 4 / 5; justify-self: center !important;
  padding: 10px; background: #FBF8F2; box-shadow: 0 1px 2px rgba(40, 30, 15, .12), 0 30px 50px -30px rgba(40, 30, 15, .4); }
.sx-photo::after { inset: 10px; border: 0; }
.sx-letter .script-title, .sx-letter .greet__text { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.sx-letter .sx-kicker::before { display: none; }
.sx-letter .greet__text { max-width: 34rem; }
@media (max-width: 600px) { .sx-photo { width: 220px !important; } }
.rsvp .reply-card { background-size: 180px 180px !important; }
.sx-date::before { mix-blend-mode: multiply !important; opacity: .3 !important; } .sx-date .sx-count > div:last-child b, .sx-date .sx-count > div:last-child b .roll { color: #D9906A !important; }
.sx-date .sx-kicker:first-of-type { color: rgba(243, 236, 224, .82) !important; }
.sx-photo { position: relative; } .sx-photo::after { content: "" !important; position: absolute !important; inset: 18px !important; border: .5px solid rgba(247, 243, 235, .55) !important; pointer-events: none; z-index: 2; display: block !important; }
/* photo: the hairline sits AROUND the print, not on it */
.sx-photo::after { display: none !important; }
.sx-photo { outline: .5px solid rgba(58, 50, 44, .32); outline-offset: 12px; margin: 12px 0 !important; }
/* map button under the letter */
.sx-map { margin-top: 2.2rem; }
.sx-photo { outline: 1px solid rgba(58, 50, 44, .3) !important; outline-offset: 14px !important; }
/* small "Save the date" line under our photo in terracotta */
.sx-letter .sx-kicker { color: var(--c-terra) !important; }

/* ===== PROPOSAL 4 preview (?proposal4) ===== */
.p4-days { display: none; }
/* 1 the three days at a glance: instantly clear who/when, Saturday is the wedding */
html.proposal4 .p4-days { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 0; padding: 0 var(--gutter) clamp(6rem, 10vw, 9rem); }
html.proposal4 .p4-day { display: grid; justify-items: center; gap: .35rem; padding: 2.2rem 1rem; text-align: center; border-left: .5px solid rgba(58, 50, 44, .2); }
html.proposal4 .p4-day:first-child { border-left: 0; }
html.proposal4 .p4-dn { font: 500 .74rem var(--font-caps); letter-spacing: .3em; text-transform: uppercase; color: #8A7C68; }
html.proposal4 .p4-day b { font: 300 4.2rem/1 var(--font-caps); color: var(--c-ink); }
html.proposal4 .p4-dm { font: 400 .9rem var(--font-caps); letter-spacing: .2em; text-transform: uppercase; color: #5E534A; }
html.proposal4 .p4-day em { margin-top: .6rem; font: 400 1.5rem var(--font-script); font-style: normal; color: var(--c-ink); }
html.proposal4 .p4-day--main b { color: var(--c-terra); }
html.proposal4 .p4-day--main .p4-dn { color: var(--c-terra); }
/* 2 the letter tightens: less space between photo and words, a seal closes the block */
html.proposal4 .sx-greet { padding-bottom: clamp(4rem, 7vw, 6rem) !important; gap: 2.6rem; }
/* 3 countdown band: taller, bigger thin numerals, more air = more cinematic */
html.proposal4 .sx-date { padding: clamp(9rem, 14vw, 13rem) var(--gutter) !important; margin-top: 0; }
html.proposal4 .sx-count b { font-size: clamp(3.6rem, 2rem + 5.4vw, 7.6rem) !important; font-weight: 300; }
html.proposal4 .sx-date .sx-rule { display: none; }
/* 4 rsvp: the card rests on linen with a long soft shadow, terracotta send */
html.proposal4 .rsvp { padding-top: clamp(9rem, 14vw, 12rem) !important; }
html.proposal4 .form__submit { background: var(--c-terra) !important; border-color: var(--c-terra) !important; }
/* 5 ending: a deep olive band like the countdown, so the page starts dark (film) and ends dark (credits) */
html.proposal4 .bye { background: #3E4230 !important; padding: clamp(8rem, 12vw, 11rem) var(--gutter) !important; margin-top: clamp(6rem, 10vw, 9rem); position: relative; isolation: isolate; }
html.proposal4 .bye::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; mix-blend-mode: multiply; background: url("assets/paper.jpg?v=3") 0 0 / 420px repeat; }
html.proposal4 .bye .script-title { color: #F3ECE0 !important; }
html.proposal4 .bye__names { color: rgba(243, 236, 224, .72) !important; }
html.proposal4 .bye__seal .bye__frame { color: rgba(243, 236, 224, .65); } html.proposal4 .bye__seal .bye__oj { color: #EDE4D7; }
html.proposal4 .bye__back { border-color: rgba(243, 236, 224, .5) !important; color: #F3ECE0 !important; }
/* normal (lining) digits everywhere — this beats the "font:" shorthands that reset it */
html:root body *, html:root body *::before, html:root body *::after { font-variant-numeric: lining-nums !important; font-feature-settings: "lnum" 1 !important; }
html:root body .sx-count b, html:root body .sx-count b * { font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: "lnum" 1, "tnum" 1 !important; }
/* the wedding days stand out: terracotta, a touch heavier */
.greet__text .hl { color: var(--c-terra); font-weight: 600; white-space: nowrap; }
.lc-date { color: var(--c-terra) !important; }
/* pencil underline */
.greet__text .hl, .rsvp-date { position: relative; border-bottom: 0 !important; }
.pencil { position: absolute; left: -2%; width: 104%; bottom: -.32em; height: .42em; overflow: visible; pointer-events: none; }
.pencil path { fill: none; stroke: var(--c-terra); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.65, 0, .35, 1) .25s; filter: url(#inkRough); }
.pencil .p2 { opacity: .35; stroke-width: 1; transition-delay: .9s; transition-duration: 1.1s; }
.is-drawn .pencil path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .pencil path { transition: none; stroke-dashoffset: 0; } }
/* countdown dividers: a fine hairline that fades out at both ends, with a small pearl in the middle */
.sx-count i { position: relative; width: 1px !important; height: clamp(3.4rem, 5vw, 5rem) !important; margin-top: -.6rem !important;
  background: linear-gradient(180deg, rgba(243, 236, 224, 0) 0%, rgba(243, 236, 224, .38) 30%, rgba(243, 236, 224, .38) 70%, rgba(243, 236, 224, 0) 100%) !important; }
.sx-count i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #F7EFE2, #D9C9B0 70%); box-shadow: 0 0 0 3px #3E4230; }
/* the film runs a little further down the page: the video layer is 112% of the screen from the start
   (the extra part sits below the fold), and after opening the first section is that tall too */
.hero .hero__bg, .hero.is-opened .hero__bg, body .hero .hero__bg { top: 0 !important; bottom: auto !important; height: 112svh !important; }
.hero.is-opened { height: 112svh !important; }
/* countdown: no vertical sticks above and below */
.sx-date .sx-rule { display: none !important; }
/* lace card text, refined: generous air, a quiet hierarchy */
.lc-text { padding: 2% 18% 4% !important; }
.lc-kick { font-size: calc(var(--env-w) * .015) !important; letter-spacing: .5em !important; color: #9A8B76 !important; margin: 0 0 calc(var(--env-w) * .014) !important; }
.lc-title { font-size: calc(var(--env-w) * .112) !important; line-height: .84 !important; color: #2A2420 !important; }
.lc-rule { width: calc(var(--env-w) * .036) !important; margin: calc(var(--env-w) * .034) 0 calc(var(--env-w) * .03) !important; opacity: .9 !important; }
.lc-names { font: 500 calc(var(--env-w) * .033) var(--font-caps) !important; letter-spacing: .34em !important; color: #2A2420 !important; }
.lc-names .amp { font-family: var(--font-script); font-size: 1.3em; letter-spacing: 0; margin: 0 .2em; text-transform: none; position: relative; top: .06em; }
.lc-date { display: flex; align-items: center; gap: calc(var(--env-w) * .016); margin-top: calc(var(--env-w) * .016) !important;
  font: 500 calc(var(--env-w) * .021) var(--font-caps) !important; letter-spacing: .28em !important; }
.lc-date::before, .lc-date::after { content: ""; width: calc(var(--env-w) * .03); height: .5px; background: currentColor; opacity: .55; }
.lc-note { margin-top: calc(var(--env-w) * .034) !important; font-size: calc(var(--env-w) * .033) !important; color: #6B6052 !important; }
.lc-date { white-space: nowrap; letter-spacing: .22em !important; font-size: calc(var(--env-w) * .019) !important; gap: calc(var(--env-w) * .012); }
.lc-date::before, .lc-date::after { width: calc(var(--env-w) * .022); flex: none; }
.lc-text { padding: 2% 14% 4% !important; }

/* Photo frame: a hairline square draws itself AROUND the print, then breathes very slowly */
.sx-photo-wrap { position: relative; display: block; justify-self: center; width: fit-content; margin: 26px auto; }
.sx-photo-wrap .sx-photo { outline: none !important; margin: 0 !important; }
.sx-photo-wrap .sx-frame { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); pointer-events: none; overflow: visible; transform-origin: 50% 50%; animation: sxFrameBreath 7s ease-in-out 3.6s infinite alternate; }
.sx-photo-wrap .sx-frame rect { fill: none; stroke: rgba(58, 50, 44, .42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s cubic-bezier(.65, 0, .35, 1) .5s; }
.sx-photo-wrap .sx-frame rect.sx-frame__outer { stroke: rgba(168, 149, 123, .45); transition-delay: 1.2s; }
.sx-photo-wrap.is-drawn .sx-frame rect { stroke-dashoffset: 0; }
@keyframes sxFrameBreath { from { transform: scale(1); opacity: 1; } to { transform: scale(1.012); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sx-photo-wrap .sx-frame { animation: none; } .sx-photo-wrap .sx-frame rect { transition: none; stroke-dashoffset: 0; } }
.sx-photo img { object-position: 50% 0%; }