/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  --bg:          #e8dfc9;
  --paper:       #fdfaf3;   /* warm ivory letter paper */
  --paper-2:     #f6efe3;   /* recessed paper shade (fields) */
  --bg-card:     #fdfaf3;
  --env-body:    #e8e0d0;
  --env-flap:    #ded4c2;
  --env-fold:    #cdb88f;
  --text:        #2a2118;
  --muted:       #6f6359;
  --subtle:      #a0958b;
  --accent:      #a8784e;
  --accent-dk:   #8a5f3a;
  --accent-lt:   #c8a47a;
  --gold-1:      #b8924f;
  --border:      rgba(42,33,24,0.11);
  --border-card: rgba(42,33,24,0.07);
  --frame:       rgba(168,120,78,0.30);
  /* Art Nouveau corner — stylized rose on a vine with leaves (top-left; mirrored per corner) */
  --nouveau-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23bf9a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M37 30 C 27 41 19 57 16 86'/%3E%3Cpath d='M37 30 C 47 21 62 16 88 14'/%3E%3Ccircle cx='34' cy='28' r='13'/%3E%3Cpath d='M34 17 C 41 17 47 22 47 30 C 47 38 40 42 33 41 C 27 40 24 34 26 29 C 27 25 32 24 35 27 C 37 29 36 33 33 33'/%3E%3Cpath d='M22 54 C 13 52 9 56 8 65 C 17 66 23 62 22 54 Z' fill='%23bf9a63' stroke='none' opacity='0.85'/%3E%3Cpath d='M62 18 C 62 11 66 8 73 8 C 73 15 69 19 62 18 Z' fill='%23bf9a63' stroke='none' opacity='0.85'/%3E%3C/svg%3E");
  --shadow-env:  0 28px 72px rgba(42,33,24,0.26), 0 8px 20px rgba(42,33,24,0.13);
  --shadow-card: 0 2px 48px rgba(42,33,24,0.08);
  --r:           20px;
  --pad:         clamp(28px, 5vw, 60px);
  /* Shared width for the envelope AND the letter below it, so they stay aligned
     and fill the screen. Grows with the viewport (wide on big monitors), capped
     by height so the landscape envelope never gets too tall, ~94vw on phones. */
  --env-w:       min(94vw, 1080px, 95svh);
  /* Vintage paper grain — subtle monochrome fractal noise, tiled */
  --paper-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.7'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* No image may ever exceed its container — keeps layout responsive everywhere */
img { display: block; max-width: 100%; height: auto; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  color: var(--text);
  overflow-x: hidden;
  background: var(--bg);
}

/* ─── Cursor glow ─────────────────────────────────────────── */
.cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,120,78,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
  opacity: 0;
}

/* ─── Language toggle ─────────────────────────────────────── */
.lang-switch {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(245,240,232,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--subtle);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: 500 0.7rem/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
  color: var(--subtle);
  padding: 0;
  transition: color 0.2s;
}
.lang-btn.active { color: var(--accent); }
.lang-btn:hover  { color: var(--text); }

/* ─── Nav dots ────────────────────────────────────────────── */
.page-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}
.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(42,33,24,0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.dot:hover  { border-color: var(--accent); transform: scale(1.3); }
.dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.dot.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(2.2); opacity: 0; }
}

/* ─── Main fade for lang switch ───────────────────────────── */
#main { transition: opacity 0.2s ease; }
#main.fading { opacity: 0; }

/* ─── ENVELOPE SECTION ────────────────────────────────────── */
.env-section {
  height: 300vh;  /* animation uses first 250vh; last 50vh hold before letter-scroll */
  position: relative;
}
.env-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.4s;
  z-index: 6;
}
.scroll-hint p {
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--subtle);
}
.sh-line {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--accent-lt), transparent);
  animation: sh-draw 2s ease-in-out infinite;
}
@keyframes sh-draw {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ─── The envelope shell ──────────────────────────────────── */
.envelope {
  position: relative;
  width: var(--env-w);
  aspect-ratio: 520 / 340;
  /* NO overflow:hidden — letter must emerge above */
}

/* Back face */
.env-back {
  position: absolute;
  inset: 0;
  background: var(--paper-grain), var(--env-body);
  border-radius: 6px;
  box-shadow: var(--shadow-env);
  z-index: 1;
  overflow: hidden;
}
.env-fold-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--env-fold);
}

/* Letter card */
.env-letter {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 130%;         /* taller than envelope */
  background: var(--paper);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -4px 24px rgba(42,33,24,0.08), 0 8px 32px rgba(42,33,24,0.10);
  z-index: 2;
  transform: translateY(100%); /* initially below envelope; JS drives 100% → -15% */
  opacity: 0;                  /* hidden until it starts rising */
  will-change: transform, opacity;
  overflow: hidden;
}
/* inset hairline frame — the page edge of fine stationery */
.env-letter::before {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid var(--frame);
  border-radius: 6px;
  pointer-events: none;
  z-index: 3;
}

/* Letter inner content */
.letter-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5%, 40px);
  text-align: center;
  opacity: 0;           /* JS drives opacity 0 → 1 */
  will-change: opacity;
}

/* Side + bottom mask — sits in front of letter, hides its interior */
.env-mask {
  position: absolute;
  inset: 0;
  border: clamp(14px, 3.5%, 26px) solid var(--env-body);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: none;
}

/* Flap wrapper — provides the 3-D perspective */
.env-flap-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  z-index: 5;
  perspective: 900px;
  perspective-origin: 50% 0%;
}

/* Rotating element */
.env-flap {
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: rotateX(0deg);      /* JS drives 0 → 180 */
  transform-style: preserve-3d;
  will-change: transform;
}

/* Triangle shape on the front of the flap */
.env-flap-tri {
  position: absolute;
  inset: 0;
  background: var(--paper-grain), var(--env-flap);
  clip-path: polygon(0% 0%, 100% 0%, 50% 88%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Wax seal at the tip of the flap triangle */
/* Seal — the bird & fox emblem. It sits on the flap tip and lifts up with the
   flap as it opens (the flap rotates rotateX 0→180°, carrying the seal with it). */
.wax-seal {
  position: absolute;
  top: 88%;             /* the flap's tip, where it closes onto the envelope */
  left: 50%;
  width:  clamp(55px, calc(var(--env-w) * 0.125), 89px);
  height: clamp(55px, calc(var(--env-w) * 0.125), 89px);
  transform: translate(-50%, -50%) translateZ(0.5px);
  border-radius: 50%;
  background: url('seal.png?v=2') center / cover no-repeat;
  box-shadow: 0 2px 7px rgba(42,33,24,0.20);
  backface-visibility: hidden;        /* flips out of view as the flap passes vertical */
  -webkit-backface-visibility: hidden;
  z-index: 1;
}

/* Opening paragraph on the letter card */
.ltr-opening {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 320px;
  text-align: center;
  margin-top: 10px;
}

/* ─── Letter card typography ─────────────────────────────── */
.ltr-eyebrow {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.names-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.ltr-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--text);
}
.amp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  line-height: 1.3;
  display: block;
}
.dateline {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-block;
  padding: 5px 16px;
  margin-bottom: 18px;
}

/* ─── Countdown ───────────────────────────────────────────── */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cu { text-align: center; min-width: 44px; }
.cn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 300;
  color: var(--text);
  display: block;
  line-height: 1;
}
.cn.pop { animation: cn-pop 0.35s ease; }
@keyframes cn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); color: var(--accent); }
  100% { transform: scale(1); }
}
.cl {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
  display: block;
  margin-top: 4px;
}
.csep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.ltr-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 999px;
  font: 400 0.82rem/1 'Inter', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn.filled {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 14px rgba(168,120,78,0.28);
}
.btn.filled:hover { background: #956940; box-shadow: 0 6px 22px rgba(168,120,78,0.38); }
.btn.outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.outline:hover { border-color: var(--accent); color: var(--accent); }

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.35);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-out 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-out {
  to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

/* ─── Letter scroll — all sections after the envelope are one paper document ── */
.letter-scroll {
  position: relative;
  background: var(--paper);
  max-width: var(--env-w);       /* matches the envelope width exactly */
  margin: 0 auto;
  border-radius: 0 0 var(--r) var(--r);
  box-shadow:
    0 -2px 18px rgba(42,33,24,0.05),
    0 18px 48px rgba(42,33,24,0.06);
  padding-bottom: clamp(84px, 12vw, 150px);
}
/* continuous inset frame — same hairline as the letterhead page */
.letter-scroll::before {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid var(--frame);
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
}
/* Art Nouveau corner ornaments on the invitation frame */
.nouveau {
  position: absolute;
  width:  clamp(40px, 5.5vw, 82px);
  height: clamp(40px, 5.5vw, 82px);   /* must equal width — % height breaks on a tall page */
  background: var(--nouveau-corner) center / contain no-repeat;
  z-index: 4;
  pointer-events: none;
  opacity: 0.85;
}
.nc-tl { top: 8px;    left: 8px;  }
.nc-tr { top: 8px;    right: 8px;  transform: scaleX(-1); }
.nc-bl { bottom: 8px; left: 8px;   transform: scaleY(-1); }
.nc-br { bottom: 8px; right: 8px;  transform: scale(-1, -1); }


/* Letter page — each section within the letter scroll */
.lp {
  padding: clamp(40px, 7vw, 70px) clamp(28px, 6%, 60px);
}
/* sections are parted by their ornament flourish, not a hard rule */
.lp-inner { width: 100%; }
.text-center { text-align: center; }

/* ─── Ornament divider ────────────────────────────────────── */
.rule-ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--accent-lt);
}
.rule-ornament::before,
.rule-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.rule-ornament span {
  font-size: 0.78rem;
  color: var(--accent);
  opacity: 0.85;
}

/* Ornament spin-in when section reveals */
.reveal.visible .rule-ornament span {
  animation: orn-spin 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes orn-spin {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ─── Section typography ──────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 18px;
}
h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 5px;
}
p { color: var(--muted); line-height: 1.78; }
.body-lead {
  font-size: 1.05rem;
  max-width: 720px;
  margin-bottom: 26px;
  line-height: 1.85;
}
.text-center .body-lead { margin-left: auto; margin-right: auto; }

/* ─── Blockquote ──────────────────────────────────────────── */
blockquote {
  margin-top: 22px;
  padding: 20px 24px;
  border-left: 2px solid var(--accent-lt);
  background: rgba(168,120,78,0.04);
  border-radius: 0 12px 12px 0;
}
blockquote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 10px;
}
blockquote cite {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ─── Letter voice: salutation, drop cap, signature ───────── */
.salutation {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--accent-dk);
  margin-bottom: 12px;
}

/* Illuminated initial on the first line of the letter body */
#invitation .body-lead::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  margin: 0.04em 0.14em 0 0;
  color: var(--accent);
}

.signature {
  text-align: center;
  margin-top: 36px;
}
.sig-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.sig-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.sig-n {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.3rem, 6.2vw, 3.9rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--text);
}
.sig-amp { font-size: clamp(1.2rem, 3vw, 1.9rem); }
.sig-place {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
}
.sig-place::before,
.sig-place::after {
  content: '✦';
  color: var(--gold-1);
  font-size: 0.6rem;
  margin: 0 10px;
  vertical-align: 1px;
  opacity: 0.7;
}

/* ─── Timeline ────────────────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(168,120,78,0.3), transparent);
}
.tl-item {
  display: flex;
  gap: 20px;
  padding: 13px 0;
  transition: background 0.2s;
}
.tl-item:hover .tl-marker {
  border-color: var(--accent);
  background: rgba(168,120,78,0.06);
}
.tl-marker {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, background 0.2s;
}
.tl-marker span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  color: var(--accent);
}
.tl-body { padding-top: 6px; }
.tl-meta { font-size: 0.84rem; color: var(--subtle); margin-top: 3px; }

/* Two-day programme */
.day-block + .day-block { margin-top: 30px; }
.day-head { margin: 22px 0 2px; }
.day-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  color: var(--text);
  line-height: 1.1;
}
.day-date {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}
.day-block .timeline { margin-top: 12px; }

/* Schedule — timed programme with line icons */
.schedule { position: relative; margin-top: 14px; }
.schedule::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(168,120,78,0.32), transparent);
}
.sch-item { display: flex; align-items: center; gap: 18px; padding: 11px 0; }
.sch-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.sch-icon svg { width: 26px; height: 26px; }
.sch-body { display: flex; flex-direction: column; }
.sch-time {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  color: var(--text);
  line-height: 1.05;
}
.sch-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

/* ─── Location ────────────────────────────────────────────── */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 20px 0 24px; }
.loc-card {
  padding: 20px;
  background: rgba(42,33,24,0.025);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.2s;
}
.loc-card:hover { border-color: var(--accent-lt); transform: translateY(-2px); }
.loc-card h3 { font-size: 1.12rem; margin-bottom: 7px; }
.map-btn { display: inline-flex; }

/* Telegram join button */
.tg-btn {
  gap: 9px;
  margin-top: 8px;
  padding: 14px 30px;
  font-size: 0.92rem;
}
.tg-icon { width: 19px; height: 19px; flex-shrink: 0; }

/* Dress code */
.dc-swatches { display: flex; justify-content: center; gap: 12px; margin: 6px 0 26px; }
.dc-swatches span {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(42,33,24,0.10);
}
.dc-pin { gap: 8px; }
.dc-pin-icon { width: 17px; height: 17px; flex-shrink: 0; }

/* Heart marking the wedding date */
.dl-heart { color: #c0563c; margin: 0 8px; font-size: 0.85em; vertical-align: 1px; }

/* Countdown footer near the bottom */
.countdown-wrap { margin: 34px 0 4px; }
.cd-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 14px;
}

/* ─── RSVP ────────────────────────────────────────────────── */
.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  width: min(360px, 100%);
  margin: 24px auto 0;
}
.rsvp-form input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--text);
  font: 300 0.93rem/1 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rsvp-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168,120,78,0.1);
}
.rsvp-form input::placeholder { color: var(--subtle); }
.rsvp-form .btn { width: 100%; }
.form-msg { min-height: 20px; font-size: 0.86rem; color: var(--accent); margin-top: 10px; text-align: center; }

/* ─── Photo in the letter ─────────────────────────────────── */
.ls-photo {
  margin: 8px 0 26px;
}
.ls-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--frame);
  box-shadow: 0 6px 22px rgba(42,33,24,0.08);
}

/* ─── Access gate ─────────────────────────────────────────── */
.gate { display: none; }
html.access-denied #gate { display: flex; }
html.access-denied #main,
html.access-denied .page-dots { display: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 150;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.gate-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(40px, 6vw, 60px) clamp(28px, 6vw, 52px);
  text-align: center;
}
.gate-card::before {            /* same hairline frame as the letter */
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--frame);
  border-radius: 12px;
  pointer-events: none;
}
.gate-seal {
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: url('seal.png?v=2') center / cover no-repeat;
  box-shadow: 0 3px 10px rgba(42,33,24,0.18);
}
.gate-title {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin-bottom: 12px;
}
.gate-msg {
  font-size: 0.92rem;
  max-width: 320px;
  margin: 0 auto 24px;
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: min(320px, 100%);
  margin: 0 auto;
}
.gate-form input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--text);
  font: 300 0.95rem/1 'Inter', sans-serif;
  text-align: center;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gate-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168,120,78,0.1);
}
.gate-form input::placeholder { color: var(--subtle); }
.gate-err {
  margin-top: 16px;
  font-size: 0.84rem;
  color: #b0492f;
}

/* ─── Stagger children ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .stagger {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .stagger.stagger-in { opacity: 1; transform: none; }
}

/* ─── Scroll reveal ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s cubic-bezier(0.22,0.1,0.25,1), transform 0.85s cubic-bezier(0.22,0.1,0.25,1);
  }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger { opacity: 1; transform: none; transition: none; }
  .sh-line, .dot.active::after, .cn.pop { animation: none; }
  .env-letter { transform: translateY(-15%) !important; opacity: 1 !important; }
  .letter-inner { opacity: 1 !important; }
  .env-flap    { transform: rotateX(160deg) !important; }
  .wax-seal    { opacity: 0 !important; }
  .scroll-hint { opacity: 0 !important; }
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-dots { right: 10px; }
  .lang-switch { top: 14px; right: 14px; }
  .ltr-name { font-size: clamp(2rem, 12vw, 3rem); }
  .countdown { gap: 7px; }
  .cn { font-size: 1.8rem; }
  .cu { min-width: 36px; }
  .salutation { font-size: 1.32rem; }
  #invitation .body-lead::first-letter { font-size: 3em; }
  .sig-names { font-size: clamp(1.9rem, 10vw, 2.5rem); }
  .letter-scroll::before,
  .env-letter::before { inset: 9px; }
}