/* ==========================================================================
   Baby Shower — original minimalist design system
   ========================================================================== */

:root {
  --ink: #2E2A24;
  --ink-muted: rgba(46, 42, 36, 0.62);
  --ink-soft: rgba(46, 42, 36, 0.55);
  --indigo: #4F7195;
  --sky: #8FAFC7;
  --powder: #D8E2E1;
  /* Match media/hero.mp4 cream exactly — avoids seam under the clothesline */
  --mist: #EBE4D2;
  --ivory: #EBE4D2;
  --line: rgba(46, 42, 36, 0.14);
  --line-soft: rgba(46, 42, 36, 0.08);
  --sand: #E3C79E;
  --sage: #9FB093;
  --blush: #D9A17F;
  --butter: #E7C77E;

  --hero-glow-a: #EBE4D2;
  --hero-glow-b: var(--butter);
  --hero-glow-c: var(--blush);
  --hero-grad-top: #EBE4D2;
  --hero-grad-mid: #EBE4D2;
  --hero-grad-bot: #EBE4D2;

  --sticker-fill-when: rgba(216, 226, 225, 0.55);
  --sticker-fill-where: rgba(243, 232, 210, 0.72);
  --sticker-stroke: rgba(79, 113, 149, 0.18);
  --sticker-dash: rgba(79, 113, 149, 0.28);
  --sticker-meta-bg: rgba(255, 255, 255, 0.55);
  --sticker-shadow: rgba(79, 113, 149, 0.08);
  --story-card-shadow: rgba(46, 42, 36, 0.25);
  --details-wash-a: rgba(143, 175, 199, 0.14);
  --details-wash-b: rgba(231, 199, 126, 0.12);
  --float-bg: rgba(235, 228, 210, 0.88);
  --float-border: rgba(46, 42, 36, 0.12);
  --float-shadow:
    0 0 0 1px rgba(79, 113, 149, 0.1),
    0 0 22px -2px rgba(143, 175, 199, 0.48),
    0 0 40px -10px rgba(79, 113, 149, 0.22),
    0 12px 40px -16px rgba(46, 42, 36, 0.28);
  --float-shadow-strong:
    0 0 0 1px rgba(79, 113, 149, 0.22),
    0 0 30px 0 rgba(143, 175, 199, 0.62),
    0 0 52px -6px rgba(79, 113, 149, 0.34),
    0 14px 44px -14px rgba(46, 42, 36, 0.32);
  --float-ring-a: #8FAFC7;
  --float-ring-b: #4F7195;
  --float-ring-c: #E3C79E;
  --float-ring-d: #EBE4D2;
  --theme-color: #EBE4D2;

  /* Night doodle tokens (unused in light; set for night) */
  --night-bg: #12182A;
  --moon-fill: #F3EBD4;
  --moon-cream: #E8DFC8;
  --moon-spot: #C9B896;
  --cloud-fill: #2A3550;

  /* English default — Google Fraunces / Sora */
  --font-display: "Fraunces", serif;
  --font-body: "Sora", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1180px;
  --gutter: clamp(24px, 6vw, 64px);
  /* Hero kicker/title/sub column — media matches this width, not viewport. */
  --hero-column-max: 880px;
}

/* Nursery night light — deep navy, moonlight cream (not purple) */
html[data-theme="night"] {
  --ink: #E8E2D4;
  --ink-muted: rgba(232, 226, 212, 0.68);
  --ink-soft: rgba(232, 226, 212, 0.55);
  --indigo: #B7C9DC;
  --sky: #6B849E;
  --powder: #2A3650;
  --mist: #1A2238;
  --ivory: #12182A;
  --line: rgba(232, 226, 212, 0.16);
  --line-soft: rgba(232, 226, 212, 0.09);
  --sand: #C4A878;
  --sage: #7A9270;
  --blush: #C49274;
  --butter: #D4B86A;

  --hero-glow-a: #1E2A44;
  --hero-glow-b: #2A3A5C;
  --hero-glow-c: #3A2E48;
  --hero-grad-top: #0E1424;
  --hero-grad-mid: #12182A;
  --hero-grad-bot: #182238;

  --sticker-fill-when: rgba(36, 48, 72, 0.72);
  --sticker-fill-where: rgba(42, 52, 74, 0.78);
  --sticker-stroke: rgba(183, 201, 220, 0.22);
  --sticker-dash: rgba(183, 201, 220, 0.32);
  --sticker-meta-bg: rgba(20, 28, 46, 0.65);
  --sticker-shadow: rgba(0, 0, 0, 0.35);
  --story-card-shadow: rgba(0, 0, 0, 0.45);
  --details-wash-a: rgba(80, 110, 150, 0.12);
  --details-wash-b: rgba(180, 150, 90, 0.08);
  --float-bg: rgba(22, 30, 48, 0.88);
  --float-border: rgba(232, 226, 212, 0.14);
  --float-shadow:
    0 0 0 1px rgba(183, 201, 220, 0.16),
    0 0 24px -2px rgba(183, 201, 220, 0.32),
    0 0 44px -8px rgba(232, 226, 212, 0.1),
    0 14px 44px -14px rgba(0, 0, 0, 0.55);
  --float-shadow-strong:
    0 0 0 1px rgba(183, 201, 220, 0.28),
    0 0 32px 0 rgba(183, 201, 220, 0.42),
    0 0 56px -6px rgba(232, 226, 212, 0.16),
    0 16px 48px -12px rgba(0, 0, 0, 0.6);
  --float-ring-a: #B7C9DC;
  --float-ring-b: #8FAFC7;
  --float-ring-c: #E8DFC8;
  --float-ring-d: #6B849E;
  --theme-color: #12182A;

  --night-bg: #12182A;
  --moon-fill: #F3EBD4;
  --moon-cream: #E8DFC8;
  --moon-spot: #C9B896;
  --cloud-fill: #2A3550;
  color-scheme: dark;
}

html[lang="ka"] {
  --font-display: "Mecomicse", Georgia, "Times New Roman", serif;
  --font-body: "Mersad", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Mersad has no Mtavruli; Noto maps text-transform:uppercase to real caps. */
  --font-ui-caps: "Noto Sans Georgian", "Mersad", system-ui, sans-serif;
}

/* Mecomicse: NEVER clip display glyphs. Overflow:hidden on .reveal-line
   was shearing italic "გზაშია" (ascenders gone, only descenders left).
   Large title may sit over the clothesline; keep overflow visible. */
html[lang="ka"] .hero__top,
html[lang="ka"] .hero__copy,
html[lang="ka"] .hero__title,
html[lang="ka"] .hero__title .reveal-line,
html[lang="ka"] .hero__title .reveal-word,
html[lang="ka"] .hero__title .reveal-word--em {
  overflow: visible !important;
}

html[lang="ka"] .hero__title {
  line-height: 1.08;
  font-size: clamp(2.85rem, 9.2vw, 6.4rem);
  letter-spacing: -0.02em;
}

html[lang="ka"] .hero__title .reveal-line {
  padding-block: 0.04em 0.08em;
  margin-block: 0;
  padding-inline: 0.14em;
  transform: none;
}

html[lang="ka"] .hero__title .reveal-word--em {
  padding-inline: 0.1em;
  padding-block: 0.06em;
}

html[lang="ka"] .kicker {
  font-family: var(--font-ui-caps);
  line-height: 1.45;
  padding-block: 0.2em;
}

html[lang="ka"] .marquee__track,
html[lang="ka"] .story__kicker,
html[lang="ka"] .story__ampm,
html[lang="ka"] .story__moment-time,
html[lang="ka"] .detail-sticker__eyebrow,
html[lang="ka"] .cursor-ring.is-active::after {
  font-family: var(--font-ui-caps);
}

html[lang="ka"] .hero__sub {
  line-height: 1.55;
  padding-block: 0.12em;
}

html[lang="ka"] .marquee {
  padding-block: 28px;
}

html[lang="ka"] .marquee__track {
  line-height: 1.45;
  padding-block: 0.12em;
}

html[lang="ka"] .story__time {
  line-height: 1.2;
  padding-block: 0.06em;
}

html[lang="ka"] .story__moment h3 {
  line-height: 1.4;
  padding-block: 0.06em 0.1em;
}

html[lang="ka"] .detail-sticker__date {
  line-height: 1.12;
  padding-block: 0.04em 0.08em;
}

html[lang="ka"] .detail-sticker__month {
  line-height: 1.35;
  padding-inline: 0.04em 0.12em;
}

html[lang="ka"] .detail-sticker__place {
  line-height: 1.28;
  padding-inline: 0.04em 0.14em;
  padding-block: 0.06em;
}

html[lang="ka"] .closing__text {
  line-height: 1.55;
  padding-inline: 0.04em;
}

html[lang="ka"] .venue__kicker,
html[lang="ka"] .rsvp__kicker,
html[lang="ka"] .rsvp__inspector-hint,
html[lang="ka"] .rsvp-field__input:focus + .rsvp-field__label,
html[lang="ka"] .rsvp-field__input:not(:placeholder-shown) + .rsvp-field__label {
  font-family: var(--font-ui-caps);
}

html[lang="ka"] .venue__title,
html[lang="ka"] .rsvp__title,
html[lang="ka"] .venue__name,
html[lang="ka"] .rsvp__success-title {
  line-height: 1.2;
  padding-block: 0.04em;
}

html[lang="ka"] .site-float,
html[lang="ka"] .site-float__btn,
html[lang="ka"] .site-float__lang {
  overflow: visible;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.55s var(--ease-soft), color 0.45s var(--ease-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--indigo);
  color: var(--ivory);
}

/* ---------- Custom cursor ---------- */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor label {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.25s var(--ease-soft);
}

html.has-custom-cursor .cursor-dot,
html.has-custom-cursor .cursor-ring {
  opacity: 1;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--indigo);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid var(--indigo);
  transition: opacity 0.25s var(--ease-soft), width 0.35s var(--ease-out), height 0.35s var(--ease-out), background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.cursor-ring.is-active {
  width: 68px;
  height: 68px;
  background: var(--indigo);
  border-color: transparent;
}

.cursor-ring.is-active::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="night"] .grain {
  opacity: 0.07;
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   FLOATING CONTROLS (language + night)
   ========================================================================== */

.site-float {
  position: fixed;
  z-index: 10050;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--float-bg);
  border: 1.5px solid color-mix(in srgb, var(--indigo) 35%, transparent);
  box-shadow:
    var(--float-shadow),
    0 0 0 1px color-mix(in srgb, var(--sky) 25%, transparent),
    0 0 18px color-mix(in srgb, var(--indigo) 22%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: float-dock 7s ease-in-out infinite;
  will-change: transform;
  transition: box-shadow 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft);
}

.site-float:hover,
.site-float:focus-within {
  border-color: color-mix(in srgb, var(--indigo) 55%, transparent);
  box-shadow: var(--float-shadow-strong), 0 0 24px color-mix(in srgb, var(--indigo) 32%, transparent);
}

@keyframes float-dock {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.site-float__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft), transform 0.35s var(--ease-out);
}

.site-float__btn:hover {
  background: var(--line-soft);
}

.site-float__btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.site-float__btn[aria-pressed="true"] {
  background: var(--indigo);
  color: var(--ivory);
}

.site-float__lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  letter-spacing: 0.04em;
}

.site-float__lang-opt {
  opacity: 0.45;
  transition: opacity 0.25s var(--ease-soft);
}

.site-float__lang-opt.is-active {
  opacity: 1;
}

.site-float__btn--lang[aria-pressed="true"] .site-float__lang-opt {
  opacity: 0.55;
}

.site-float__btn--lang[aria-pressed="true"] .site-float__lang-opt.is-active {
  opacity: 1;
  color: inherit;
}

.site-float__lang-sep {
  opacity: 0.35;
}

.site-float__btn--theme {
  padding: 0;
  width: 44px;
}

.site-float__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-float__icon--sun {
  display: none;
}

html[data-theme="night"] .site-float__icon--moon {
  display: none;
}

html[data-theme="night"] .site-float__icon--sun {
  display: flex;
}

/* ==========================================================================
   DAY NURSERY DOODLES (light mode)
   Full-document absolute layer — scrolls with the page, masked off the
   clothesline video. Parallax via JS on .day-nursery__layer.
   ========================================================================== */

.day-nursery {
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  /* Soft gap around .hero__video — vars updated in JS */
  --hole-x: 0px;
  --hole-y: 0px;
  --hole-w: 0px;
  --hole-h: 0px;
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  -webkit-mask-position: 0 0, var(--hole-x) var(--hole-y);
  mask-position: 0 0, var(--hole-x) var(--hole-y);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

html[data-theme="night"] .day-nursery {
  display: none;
}

.day-nursery__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.day-nursery__polka {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--sky) 55%, transparent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 78% 6%, color-mix(in srgb, var(--blush) 50%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--butter) 55%, transparent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--powder) 70%, transparent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 48% 10%, color-mix(in srgb, var(--sky) 40%, transparent) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 86% 28%, color-mix(in srgb, var(--blush) 40%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 6% 36%, color-mix(in srgb, var(--butter) 45%, transparent) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 94% 42%, color-mix(in srgb, var(--sky) 45%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 52%, color-mix(in srgb, var(--blush) 40%, transparent) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 72% 58%, color-mix(in srgb, var(--powder) 65%, transparent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 10% 68%, color-mix(in srgb, var(--butter) 40%, transparent) 0 1.6px, transparent 2px),
    radial-gradient(circle at 88% 72%, color-mix(in srgb, var(--sky) 50%, transparent) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--blush) 42%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 64% 86%, color-mix(in srgb, var(--powder) 60%, transparent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 42% 94%, color-mix(in srgb, var(--butter) 45%, transparent) 0 2px, transparent 2.5px);
  animation: day-polka-breathe 14s ease-in-out infinite;
}

.day-doodle {
  position: absolute;
  opacity: 0.62;
  will-change: transform;
}

/* Hero / upper — kept in side margins so the video mask stays clean */
.day-doodle--cloud-a {
  width: clamp(88px, 13vw, 132px);
  top: 5%;
  left: 3%;
  opacity: 0.58;
  animation: day-drift-x 30s ease-in-out infinite;
}

.day-doodle--pacifier-a {
  width: clamp(36px, 5.5vw, 52px);
  top: 7%;
  right: clamp(20px, 5vw, 72px);
  opacity: 0.58;
  transform: rotate(8deg);
  animation: day-float-a 16s ease-in-out infinite;
}

.day-doodle--star-a {
  width: clamp(16px, 2.4vw, 22px);
  top: 11%;
  left: 12%;
  opacity: 0.48;
  animation: day-twinkle 7s ease-in-out infinite;
}

.day-doodle--heart-a {
  width: clamp(18px, 2.8vw, 26px);
  top: 14%;
  right: 10%;
  opacity: 0.5;
  animation: day-bob 9s ease-in-out infinite;
}

/* Story band */
.day-doodle--cloud-b {
  width: clamp(68px, 10vw, 108px);
  top: 28%;
  right: 4%;
  opacity: 0.52;
  animation: day-drift-x 36s ease-in-out infinite reverse;
}

.day-doodle--sock-a {
  width: clamp(34px, 5vw, 48px);
  top: 32%;
  left: clamp(14px, 4vw, 48px);
  opacity: 0.55;
  transform: rotate(-12deg);
  animation: day-float-b 13s ease-in-out infinite;
}

.day-doodle--star-b {
  width: clamp(12px, 1.8vw, 16px);
  top: 36%;
  left: 18%;
  opacity: 0.44;
  animation: day-twinkle 8.5s ease-in-out infinite 1.2s;
}

.day-doodle--heart-b {
  width: clamp(14px, 2.2vw, 20px);
  top: 42%;
  right: 14%;
  opacity: 0.46;
  animation: day-bob 11s ease-in-out infinite 1.4s;
}

/* Details band */
.day-doodle--cloud-c {
  width: clamp(80px, 12vw, 120px);
  top: 54%;
  left: 5%;
  opacity: 0.5;
  animation: day-drift-x 32s ease-in-out infinite;
}

.day-doodle--pacifier-b {
  width: clamp(32px, 5vw, 46px);
  top: 58%;
  right: clamp(18px, 6vw, 64px);
  opacity: 0.52;
  transform: rotate(-6deg);
  animation: day-float-a 18s ease-in-out infinite reverse;
}

.day-doodle--star-c {
  width: clamp(10px, 1.5vw, 14px);
  top: 62%;
  left: 40%;
  opacity: 0.42;
  animation: day-twinkle 6.5s ease-in-out infinite 0.6s;
}

.day-doodle--star-d {
  width: clamp(12px, 1.8vw, 16px);
  top: 66%;
  right: 22%;
  opacity: 0.4;
  animation: day-twinkle 9s ease-in-out infinite 0.8s;
}

/* Closing band */
.day-doodle--cloud-d {
  width: clamp(70px, 10vw, 104px);
  top: 78%;
  right: 6%;
  opacity: 0.48;
  animation: day-drift-x 34s ease-in-out infinite reverse;
}

.day-doodle--sock-b {
  width: clamp(30px, 4.5vw, 44px);
  top: 82%;
  left: clamp(16px, 5vw, 52px);
  opacity: 0.5;
  transform: rotate(10deg);
  animation: day-float-b 15s ease-in-out infinite reverse;
}

.day-doodle--heart-c {
  width: clamp(16px, 2.4vw, 22px);
  top: 88%;
  left: 22%;
  opacity: 0.44;
  animation: day-bob 10s ease-in-out infinite 0.5s;
}

.day-doodle--star-e {
  width: clamp(14px, 2vw, 20px);
  top: 90%;
  right: 16%;
  opacity: 0.42;
  animation: day-twinkle 7.5s ease-in-out infinite 1s;
}

.day-doodle--star-f {
  width: clamp(10px, 1.5vw, 14px);
  top: 94%;
  left: 48%;
  opacity: 0.4;
  animation: day-twinkle 8s ease-in-out infinite 0.3s;
}

@keyframes day-polka-breathe {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 0.26; }
}

@keyframes day-drift-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

@keyframes day-float-a {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50% { transform: translate(-8px, 10px) rotate(2deg); }
}

@keyframes day-float-b {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-8px) rotate(-6deg); }
}

@keyframes day-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.06); }
}

@keyframes day-twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.88) rotate(0deg); }
  50% { opacity: 0.55; transform: scale(1.08) rotate(8deg); }
}

/* ==========================================================================
   NIGHT SKY DOODLES
   ========================================================================== */

.night-sky {
  display: none;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

html[data-theme="night"] .night-sky {
  display: block;
}

.night-sky__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.night-stars {
  position: absolute;
  inset: 0;
}

.night-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--moon-cream);
  opacity: 0.35;
  box-shadow: 0 0 4px rgba(243, 235, 212, 0.35);
  animation: star-twinkle var(--twinkle-dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

.night-star--lg {
  width: 3px;
  height: 3px;
  opacity: 0.5;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 0.75; transform: scale(1.15); }
}

.night-moon {
  position: absolute;
  top: clamp(48px, 10vh, 96px);
  right: clamp(24px, 8vw, 88px);
  width: clamp(56px, 9vw, 88px);
  opacity: 0.9;
  animation: moon-drift 18s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(243, 235, 212, 0.22));
}

.night-cloud {
  position: absolute;
  opacity: 0.85;
}

.night-cloud--a {
  width: clamp(90px, 14vw, 140px);
  top: 22%;
  left: 6%;
  animation: cloud-drift 28s ease-in-out infinite;
}

.night-cloud--b {
  width: clamp(70px, 11vw, 110px);
  top: 58%;
  right: 10%;
  animation: cloud-drift 34s ease-in-out infinite reverse;
}

.night-teddy {
  position: absolute;
  bottom: clamp(72px, 12vh, 120px);
  left: clamp(16px, 5vw, 48px);
  width: clamp(48px, 7vw, 68px);
  opacity: 0.7;
  animation: teddy-breathe 5.5s ease-in-out infinite;
}

@keyframes moon-drift {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(-6px, 8px) rotate(2deg); }
}

@keyframes cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(12px); }
}

@keyframes teddy-breathe {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  /* Grow with content — never fixed height. overflow:hidden here clipped KA title/sub. */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding:
    max(clamp(40px, 5vh, 64px), env(safe-area-inset-top, 0px))
    var(--gutter)
    max(clamp(72px, 9vh, 112px), env(safe-area-inset-bottom, 0px));
  /* Clip atmosphere orbs only — not kicker/title/sub glyphs.
     No isolation here: it traps mix-blend and leaves a black/empty video plate on mobile. */
  overflow: visible;
  gap: 0;
}

.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hero-grad-top) 0%, var(--hero-grad-mid) 55%, var(--hero-grad-bot) 100%);
  transition: background 0.55s var(--ease-soft);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.orb--a {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -14%;
  right: -10%;
  background: radial-gradient(circle at 40% 40%, var(--hero-glow-a) 0%, var(--ivory) 55%, transparent 75%);
  opacity: 0.55;
  animation: float-a 22s ease-in-out infinite;
}

.orb--b {
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  bottom: -12%;
  left: -8%;
  background: radial-gradient(circle at 60% 60%, var(--hero-glow-b) 0%, transparent 72%);
  opacity: 0.3;
  animation: float-b 26s ease-in-out infinite;
}

.orb--c {
  display: none;
}

html[data-theme="night"] .orb--a {
  opacity: 0.4;
}

html[data-theme="night"] .orb--b {
  opacity: 0.22;
}

html[data-theme="night"] .orb--c {
  opacity: 0.18;
}

@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.06); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, -4%) scale(1.08); }
}
@keyframes float-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6%, 6%); }
}

/* Kicker, title, copy, and media — centered column stack. */
.hero__top,
.hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--hero-column-max);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
  overflow: visible;
}

.hero__top {
  z-index: 2;
  gap: clamp(6px, 1.2vw, 10px);
  margin-bottom: clamp(6px, 1.2vw, 12px);
}

.hero__copy {
  z-index: 2;
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(12px, 2.2vw, 24px);
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
}

.kicker__line {
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left center;
}

.kicker__line--end {
  transform-origin: right center;
}

.hero__title {
  width: 100%;
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-size: clamp(3.4rem, 11vw, 7.6rem);
  text-align: center;
  overflow: visible;
}

.hero__title .reveal-line {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.hero__title .reveal-line:first-child {
  transform: none;
}

.hero__title .reveal-line:last-child {
  transform: none;
  margin-top: -0.06em;
}

.hero.is-ready .reveal-line {
  overflow: visible;
}

.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.15em) scale(0.92);
  filter: blur(12px);
  will-change: transform, opacity, filter;
  transform-origin: 50% 80%;
}

.reveal-word--em {
  font-style: italic;
  font-weight: 500;
  font-size: 1.08em;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--indigo) 0%, #6B8FAF 45%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.reveal-word.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero.is-ready .reveal-word--em.is-in {
  animation: title-em-float 5.5s var(--ease-soft) 1.2s infinite;
}

@keyframes title-em-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.04em) scale(1.015); }
}

.hero__video {
  position: relative;
  z-index: 1;
  /* Same column as title — native aspect (1:1), no 100vw plate. */
  width: 100%;
  max-width: var(--hero-column-max);
  height: auto;
  flex: 0 0 auto;
  align-self: center;
  margin: clamp(4px, 1vw, 12px) auto 0;
  min-width: 0;
  line-height: 0;
  background: transparent;
  overflow: visible;
}

.hero__video picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.hero__video-el {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  background: transparent;
  object-fit: contain;
}

/* ---------- Hero load entrance ---------- */
.hero-enter {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(8px);
}

.hero.is-ready .hero-enter {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 1.05s var(--ease-out),
    transform 1.15s var(--ease-out),
    filter 1.05s var(--ease-out);
}

.hero.is-ready .kicker.hero-enter {
  transition-delay: 0.02s;
}

.hero.is-ready .kicker.hero-enter .kicker__line {
  animation: kicker-draw 0.85s var(--ease-out) 0.12s both;
}

.hero.is-ready .hero__sub.hero-enter {
  transition-delay: 0.42s;
}

.hero.is-ready .hero__cta.hero-enter {
  transition-delay: 0.58s;
}

.hero.is-ready .hero__video.hero-enter {
  transition-delay: 0.78s;
}

@keyframes kicker-draw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 0.5; }
}

.hero__sub {
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-muted);
  max-width: 46ch;
  font-weight: 300;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-radius: 999px;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}

.btn--primary {
  background: var(--indigo);
  color: var(--ivory);
}

.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--ink);
}

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--indigo);
  color: var(--indigo);
}

/* ==========================================================================
   HERO WATERCOLOR FLOATERS
   ========================================================================== */

.hero__floaters {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Must stay visible — overflow:hidden clipped balloon clouds & drift */
  overflow: visible;
}

.hero-floater {
  --fx: 22px;
  --fy: 18px;
  --fx-neg: -16px;
  --fy-neg: -20px;
  --fr: 7deg;
  --fr0: -3deg;
  --fr-neg: -6deg;
  --fdur: 16s;
  --fdelay: 0s;
  --fopacity: 0.48;
  position: absolute;
  opacity: var(--fopacity);
  overflow: visible;
  will-change: transform;
  animation: hero-floater-drift var(--fdur) ease-in-out var(--fdelay) infinite;
  filter: saturate(0.95);
  transition: opacity 0.45s var(--ease-soft), filter 0.45s var(--ease-soft);
}

.hero-floater__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  /* Extra room for watercolor filter bleed */
  padding: 6%;
  margin: -6%;
  box-sizing: content-box;
}

.hero-floater--hotair {
  width: clamp(78px, 12vw, 128px);
  top: 5%;
  left: 1.5%;
  --fopacity: 0.5;
  --fdur: 14s;
}

.hero-floater--pair {
  width: clamp(68px, 10vw, 104px);
  top: 9%;
  right: 2%;
  --fopacity: 0.5;
  --fdur: 17s;
  --fdelay: -4s;
}

.hero-floater--blue {
  width: clamp(36px, 5.5vw, 52px);
  top: 40%;
  left: 3%;
  --fopacity: 0.42;
  --fdur: 12s;
  --fdelay: -2s;
}

.hero-floater--cream {
  width: clamp(32px, 5vw, 48px);
  top: 46%;
  right: 5%;
  --fopacity: 0.4;
  --fdur: 15s;
  --fdelay: -6s;
}

.hero-floater--cloud {
  width: clamp(70px, 12vw, 110px);
  top: 22%;
  left: 4%;
  --fopacity: 0.38;
  --fdur: 22s;
  --fdelay: -3s;
}

.hero-floater--star {
  width: clamp(18px, 2.8vw, 28px);
  top: 28%;
  left: 14%;
  --fopacity: 0.42;
  --fdur: 10s;
  --fdelay: -1s;
}

.hero-floater--blue-b {
  width: clamp(28px, 4vw, 40px);
  bottom: 26%;
  right: 10%;
  --fopacity: 0.36;
  --fdur: 13s;
  --fdelay: -5s;
}

.hero-floater--cream-b {
  width: clamp(30px, 4.2vw, 44px);
  top: 58%;
  left: 16%;
  --fopacity: 0.34;
  --fdur: 18s;
  --fdelay: -7s;
}

html[data-theme="night"] .hero-floater {
  --fopacity: 0.24;
  filter: brightness(0.72) saturate(0.55);
}

/* Explicit lengths — avoid calc(var(--x) * n) which some engines drop in keyframes */
@keyframes hero-floater-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--fr0));
  }
  25% {
    transform: translate3d(var(--fx), var(--fy-neg), 0) rotate(var(--fr));
  }
  50% {
    transform: translate3d(var(--fx-neg), var(--fy), 0) rotate(var(--fr-neg));
  }
  75% {
    transform: translate3d(var(--fx), var(--fy), 0) rotate(var(--fr0));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--fr0));
  }
}

@keyframes hero-floater-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.marquee {
  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  /* Soft tuck under hero / into story — keep a light seam, not a crush. */
  margin-top: -28px;
  margin-bottom: 0;
  background: var(--indigo);
  color: var(--mist);
  overflow: hidden;
  padding: 20px 0;
  transform: rotate(-1.35deg) scale(1.12);
  transform-origin: center center;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  min-width: 200%;
  animation: marquee-scroll 32s linear infinite;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
}

.marquee__dot {
  opacity: 0.45;
  font-style: normal;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   STORY (sticky scroll moments)
   ========================================================================== */

.story {
  padding:
    clamp(72px, 11vh, 112px)
    var(--gutter)
    clamp(40px, 8vh, 80px);
}

.story__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.story__panel {
  position: sticky;
  top: 12vh;
}

.story__card {
  background: var(--mist);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: clamp(32px, 5vw, 44px);
  min-height: clamp(380px, 44vh, 480px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  box-shadow: 0 24px 60px -30px var(--story-card-shadow);
}

.story__time {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  color: var(--ink);
  line-height: 1;
  transition: opacity 0.3s var(--ease-soft);
}

.story__ampm {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
}

.story__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 7;
  margin-top: 18px;
  color: var(--indigo);
}

.story__scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.story__scene-art.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.story__kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.story__moment {
  padding: clamp(28px, 4vw, 40px) 0;
  min-height: clamp(340px, 58vh, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  max-width: 46ch;
}

/* Specificity boosted (.story ancestor + 2 classes) so this reliably wins
   over the shared .reveal.is-visible opacity rule regardless of source order. */
.story .story__moment:not(.is-active) {
  opacity: 0.55;
}

.story .story__moment.is-active {
  opacity: 1;
}

.story__moment:first-of-type {
  border-top: none;
}

.story__moment-time {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
  margin-bottom: 12px;
}

.story__moment h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
}

.story__moment p {
  font-size: 15px;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .story__inner {
    grid-template-columns: 1fr;
  }
  .story__panel {
    position: static;
    max-width: 280px;
    margin: 0 auto clamp(32px, 8vw, 48px);
  }
  .story__card {
    min-height: auto;
    justify-content: flex-start;
  }
  .story__moment {
    min-height: auto;
    justify-content: flex-start;
  }
  .story .story__moment:not(.is-active),
  .story .story__moment.is-active {
    opacity: 1;
  }
}

/* ==========================================================================
   DETAILS — playful sticker panels
   ========================================================================== */

.details {
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  background:
    radial-gradient(ellipse 50% 40% at 18% 30%, var(--details-wash-a), transparent 70%),
    radial-gradient(ellipse 45% 35% at 82% 70%, var(--details-wash-b), transparent 70%);
}

.details__grid {
  max-width: min(920px, var(--container));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
}

.detail-sticker {
  position: relative;
  padding: clamp(48px, 6vw, 68px) clamp(40px, 5vw, 56px) clamp(40px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  min-height: 340px;
  color: var(--ink);
  isolation: isolate;
}

.detail-sticker--where.reveal {
  transition-delay: 0.12s;
}

.detail-sticker__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

.detail-sticker__blob {
  fill: rgba(255, 255, 255, 0.72);
  stroke: var(--sticker-stroke);
  stroke-width: 1.4;
  filter: drop-shadow(0 10px 28px var(--sticker-shadow));
}

.detail-sticker--when .detail-sticker__blob {
  fill: var(--sticker-fill-when);
}

.detail-sticker--where .detail-sticker__blob {
  fill: var(--sticker-fill-where);
}

.detail-sticker__dash {
  stroke: var(--sticker-dash);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
}

.detail-sticker__doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.detail-doodle {
  --doodle-rot: 0deg;
  position: absolute;
  color: var(--indigo);
  opacity: 0;
  transform: translateY(10px) rotate(var(--doodle-rot)) scale(0.9);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.detail-sticker.is-visible .detail-doodle {
  opacity: 1;
  transform: translateY(0) rotate(var(--doodle-rot)) scale(1);
}

.detail-sticker.is-visible .detail-doodle--clock {
  transition-delay: 0.15s;
  animation: detail-float 5.5s var(--ease-soft) 0.85s infinite;
}

.detail-sticker.is-visible .detail-doodle--sock {
  transition-delay: 0.28s;
  animation: detail-wiggle 6s var(--ease-soft) 1s infinite;
}

.detail-sticker.is-visible .detail-doodle--beanie {
  transition-delay: 0.4s;
  animation: detail-float 6.5s var(--ease-soft) 1.2s infinite reverse;
}

.detail-sticker.is-visible .detail-doodle--line {
  transition-delay: 0.15s;
}

.detail-sticker.is-visible .detail-doodle--teddy {
  transition-delay: 0.3s;
  animation: detail-float 5.8s var(--ease-soft) 0.9s infinite;
}

.detail-sticker.is-visible .detail-doodle--pin {
  transition-delay: 0.42s;
  animation: detail-bob 4.8s var(--ease-soft) 1.1s infinite;
}

.detail-doodle--clock {
  --doodle-rot: 8deg;
  width: 52px;
  top: 9%;
  left: 7%;
}

.detail-doodle--sock {
  --doodle-rot: -18deg;
  width: 38px;
  bottom: 11%;
  right: 8%;
}

.detail-doodle--beanie {
  --doodle-rot: 12deg;
  width: 46px;
  top: 10%;
  right: 7%;
}

.detail-doodle--line {
  --doodle-rot: -4deg;
  width: 78px;
  top: 8%;
  left: 6%;
}

.detail-doodle--teddy {
  --doodle-rot: -8deg;
  width: 48px;
  bottom: 10%;
  right: 6%;
}

.detail-doodle--pin {
  --doodle-rot: 6deg;
  width: 32px;
  top: 9%;
  right: 8%;
}

@keyframes detail-float {
  0%, 100% { transform: translateY(0) rotate(var(--doodle-rot)) scale(1); }
  50% { transform: translateY(-6px) rotate(var(--doodle-rot)) scale(1); }
}

@keyframes detail-wiggle {
  0%, 100% { transform: translateY(0) rotate(-18deg) scale(1); }
  50% { transform: translateY(-4px) rotate(-12deg) scale(1); }
}

@keyframes detail-bob {
  0%, 100% { transform: translateY(0) rotate(6deg) scale(1); }
  50% { transform: translateY(-5px) rotate(10deg) scale(1); }
}

.detail-sticker__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
}

.detail-sticker__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 2px 3px 0 rgba(79, 113, 149, 0.2);
  transform: rotate(-6deg);
}

.detail-sticker__badge--soft {
  background: var(--blush);
  box-shadow: 2px 3px 0 rgba(217, 161, 127, 0.28);
  transform: rotate(5deg);
}

.detail-sticker__figure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  width: 100%;
}

.detail-sticker__day {
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 400;
}

.detail-sticker__date {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 9vw, 5.4rem);
  line-height: 0.92;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.detail-sticker__month {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  font-style: italic;
  color: var(--indigo);
}

.detail-sticker__place {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.2rem);
  font-style: italic;
  color: var(--ink);
  display: block;
  line-height: 1.05;
}

.detail-sticker__place-sub {
  font-size: 15px;
  color: var(--ink-soft);
  display: block;
  margin-top: 6px;
}

.detail-sticker__meta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink-muted);
  width: fit-content;
  padding: 8px 16px 8px 12px;
  background: var(--sticker-meta-bg);
  border: 1.5px dashed var(--sticker-dash);
  border-radius: 18px 22px 16px 20px / 20px 16px 22px 18px;
}

.detail-sticker__meta-icon {
  width: 18px;
  height: 18px;
  color: var(--indigo);
  flex-shrink: 0;
}

.detail-sticker__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--indigo);
  min-height: 44px;
  width: fit-content;
  padding: 0 4px;
  border-bottom: 1.5px dashed transparent;
  transition: border-color 0.3s var(--ease-soft), gap 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

.detail-sticker__link:hover {
  border-color: var(--indigo);
  gap: 12px;
}

.detail-sticker__link svg {
  transition: transform 0.3s var(--ease-out);
}

.detail-sticker__link:hover svg {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   VENUE / MAP
   ========================================================================== */

.venue {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 12vh, 120px) var(--gutter);
}

.venue__header {
  max-width: 42rem;
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}

.venue__kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
  margin-bottom: 12px;
}

.venue__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 12px;
}

.venue__lede {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.55;
  max-width: 40ch;
  margin-inline: auto;
}

.venue__stage {
  max-width: min(920px, var(--container));
  margin: 0 auto;
  border-radius: 28px 34px 30px 32px / 32px 28px 34px 30px;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--indigo) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--powder) 35%, transparent), transparent 40%),
    color-mix(in srgb, var(--mist) 70%, transparent);
  box-shadow:
    0 18px 50px -28px var(--sticker-shadow),
    0 0 0 1px color-mix(in srgb, var(--sky) 18%, transparent);
  transform: rotate(-0.35deg);
}

.venue__map-wrap {
  position: relative;
  /* ~half prior height (was 16/11) — bar below stays unchanged */
  aspect-ratio: 32 / 11;
  min-height: 140px;
  background: var(--powder);
  overflow: hidden;
}

.venue__map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  z-index: 1;
  background: #e5e3df;
}

.venue__map .leaflet-tile-pane {
  filter: saturate(0.92) contrast(0.98);
  transition: filter 0.45s var(--ease-soft);
}

html[data-theme="night"] .venue__map .leaflet-tile-pane {
  filter: saturate(0.55) brightness(0.72) contrast(1.05);
}

.venue__map.leaflet-container {
  font-family: var(--font-body, system-ui, sans-serif);
}

.venue__map .leaflet-control-zoom a {
  border-color: color-mix(in srgb, var(--indigo) 22%, transparent);
  color: var(--indigo);
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
}

html[data-theme="night"] .venue__map .leaflet-control-zoom a {
  background: color-mix(in srgb, var(--mist) 88%, #1a2238);
  color: var(--sky);
}

.venue__map .leaflet-control-attribution {
  font-size: 10px;
  background: color-mix(in srgb, var(--ivory) 75%, transparent);
  color: var(--ink-muted);
}

html[data-theme="night"] .venue__map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--mist) 75%, transparent);
  color: color-mix(in srgb, var(--sky) 70%, transparent);
}

.venue__map-open {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--indigo);
  background: color-mix(in srgb, var(--ivory) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--indigo) 18%, transparent);
  box-shadow: 0 4px 14px -6px rgba(46, 42, 36, 0.35);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}

html[data-theme="night"] .venue__map-open {
  background: color-mix(in srgb, var(--mist) 90%, #1a2238);
  color: var(--sky);
}

.venue__map-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(46, 42, 36, 0.4);
}

.venue__map-open svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Leaflet marker — geographic pin (not viewport-fixed) */
.venue__pin-marker {
  background: none !important;
  border: none !important;
}

.venue__pin-marker .venue__pin-bob {
  display: block;
  color: var(--indigo);
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 1px 0 rgba(46, 42, 36, 0.22))
    drop-shadow(0 4px 6px rgba(46, 42, 36, 0.32))
    drop-shadow(0 10px 16px rgba(46, 42, 36, 0.22));
  opacity: 0;
}

.venue.is-visible .venue__pin-marker .venue__pin-bob {
  opacity: 1;
  animation: venue-pin-hop 1.1s var(--ease-out) 0.2s both;
}

.venue.is-visible .venue__pin-marker .venue__pin-bob {
  animation: venue-pin-hop 1.1s var(--ease-out) 0.2s both,
    venue-pin-bob 3.6s var(--ease-soft) 1.4s infinite;
}

@keyframes venue-pin-hop {
  0% { transform: scale(0.7) translateY(-28%); opacity: 0; }
  55% { transform: scale(1.08) translateY(-4%); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes venue-pin-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.venue__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 18px clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--ivory) 88%, var(--powder));
  border-top: 1.5px dashed color-mix(in srgb, var(--indigo) 28%, transparent);
}

html[data-theme="night"] .venue__bar {
  background: color-mix(in srgb, var(--mist) 80%, #1a2238);
}

.venue__place {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.venue__place-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--indigo);
  background: color-mix(in srgb, var(--sky) 28%, transparent);
  flex-shrink: 0;
}

.venue__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  color: var(--ink);
  line-height: 1.2;
}

.venue__address {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.venue__directions {
  gap: 10px;
  flex-shrink: 0;
}

.venue__directions svg {
  transition: transform 0.35s var(--ease-out);
}

.venue__directions:hover svg {
  transform: translate(2px, -2px);
}

html[lang="ka"] .venue__directions > span {
  transform: translateY(2px);
}

/* ==========================================================================
   RSVP + GLASSES INSPECTOR
   ========================================================================== */

.rsvp {
  position: relative;
  z-index: 3;
  padding: clamp(64px, 10vh, 110px) var(--gutter) clamp(48px, 7vh, 72px);
}

.rsvp__header {
  position: relative;
  z-index: 1;
  max-width: min(640px, var(--container));
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}

.rsvp__kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
  margin-bottom: 12px;
}

.rsvp__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 12px;
}

.rsvp__lede {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1.55;
  max-width: 42ch;
  margin-inline: auto;
}

.rsvp__layout {
  position: relative;
  z-index: 1;
  max-width: min(640px, var(--container));
  margin: 0 auto;
}

.rsvp__inspector {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 88px;
  pointer-events: none;
  opacity: 0.55;
  transform: translate3d(0, 0, 0) rotate(-6deg);
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.35s var(--ease-soft);
  will-change: transform;
}

.rsvp.is-inspecting .rsvp__inspector {
  opacity: 1;
}

.rsvp-glasses {
  width: 78px;
  color: var(--indigo);
  filter: drop-shadow(0 8px 14px rgba(46, 42, 36, 0.12));
  overflow: visible;
}

.rsvp-glasses__eyes {
  opacity: 0;
  transition: opacity 0.28s var(--ease-soft);
}

.rsvp.is-inspecting .rsvp-glasses__eyes {
  opacity: 1;
}

.rsvp-glasses__pupil-wrap {
  transform: translate(var(--look-x, 0px), var(--look-y, 0px));
  transition: transform 0.4s var(--ease-out);
}

.rsvp-glasses__eye--l {
  transform-origin: 32px 28px;
}

.rsvp-glasses__eye--r {
  transform-origin: 88px 28px;
}

.rsvp.is-inspecting .rsvp-glasses__eye--l,
.rsvp.is-inspecting .rsvp-glasses__eye--r {
  animation: rsvp-eye-blink 4.6s var(--ease-soft) infinite;
}

.rsvp.is-inspecting .rsvp-glasses__eye--r {
  animation-delay: 0.12s;
}

.rsvp-glasses__lens {
  transform-origin: center;
  transition: transform 0.4s var(--ease-out), fill-opacity 0.35s var(--ease-soft);
}

.rsvp.is-inspecting .rsvp-glasses__lens {
  fill-opacity: 0.16;
}

.rsvp.is-inspecting .rsvp-glasses__lens--l {
  animation: rsvp-lens-glance 2.8s var(--ease-soft) infinite;
}

.rsvp.is-inspecting .rsvp-glasses__lens--r {
  animation: rsvp-lens-glance 2.8s var(--ease-soft) 0.15s infinite;
}

.rsvp-glasses__brows {
  transition: opacity 0.3s var(--ease-soft);
}

.rsvp.is-inspecting .rsvp-glasses__brows {
  opacity: 0.85;
}

.rsvp.is-inspecting .rsvp-glasses__brow--l {
  transform-origin: 32px 10px;
  animation: rsvp-brow-mad-l 3.2s var(--ease-soft) infinite;
}

.rsvp.is-inspecting .rsvp-glasses__brow--r {
  transform-origin: 88px 10px;
  animation: rsvp-brow-mad-r 3.2s var(--ease-soft) 0.08s infinite;
}

@keyframes rsvp-lens-glance {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(1.5px, 0.8px); }
  70% { transform: translate(-1px, -0.5px); }
}

@keyframes rsvp-eye-blink {
  0%, 42%, 48%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.08); }
}

@keyframes rsvp-brow-mad-l {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(0, 1px) rotate(-8deg); }
}

@keyframes rsvp-brow-mad-r {
  0%, 100% { transform: translate(0, 0) rotate(4deg); }
  50% { transform: translate(0, 1px) rotate(8deg); }
}

.rsvp.is-inspecting .rsvp-glasses {
  animation: rsvp-glasses-lean 3.6s var(--ease-soft) infinite;
}

@keyframes rsvp-glasses-lean {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(1px, 1px) rotate(2.5deg); }
  65% { transform: translate(-1.5px, 0.5px) rotate(-2deg); }
}

.rsvp__inspector-hint {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}

.rsvp.is-inspecting .rsvp__inspector-hint {
  opacity: 0.75;
}

.rsvp__form {
  position: relative;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 36px) clamp(24px, 3.5vw, 32px);
  border-radius: 26px 32px 28px 30px / 30px 26px 32px 28px;
  border: 1.5px solid color-mix(in srgb, var(--indigo) 20%, transparent);
  background:
    radial-gradient(ellipse 60% 40% at 12% 0%, color-mix(in srgb, var(--sky) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--mist) 55%, transparent);
  box-shadow: 0 18px 44px -38px var(--sticker-shadow);
}

.rsvp__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
}

.rsvp-field {
  position: relative;
  grid-column: 1 / -1;
}

.rsvp-field--half {
  grid-column: span 1;
}

.rsvp-field__input {
  width: 100%;
  padding: 22px 2px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  transition: color 0.25s var(--ease-soft);
}

.rsvp-field__input--area {
  min-height: 96px;
  padding-top: 28px;
}

.rsvp-field__label {
  position: absolute;
  left: 2px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 8px);
  font-size: 15px;
  color: var(--ink-soft);
  pointer-events: none;
  transform-origin: left center;
  transition:
    transform 0.35s var(--ease-out),
    color 0.3s var(--ease-soft),
    top 0.35s var(--ease-out),
    font-size 0.35s var(--ease-out);
}

.rsvp-paci {
  flex-shrink: 0;
  width: 15px;
  height: 17px;
  color: var(--indigo);
  opacity: 0;
  transform: translateY(2px) scale(0.55) rotate(-12deg);
  transform-origin: 50% 60%;
  transition:
    opacity 0.3s var(--ease-soft),
    transform 0.4s var(--ease-out);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sky) 30%, transparent));
}

.rsvp-field:focus-within .rsvp-paci {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  animation: rsvp-paci-wiggle 2.4s var(--ease-soft) 0.15s infinite;
}

.rsvp-field:focus-within .rsvp-field__label {
  top: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo);
}

.rsvp-field:focus-within .rsvp-paci {
  width: 14px;
  height: 16px;
}

@keyframes rsvp-paci-wiggle {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  40% { transform: translateY(-2px) rotate(7deg) scale(1.05); }
  70% { transform: translateY(1px) rotate(-3deg) scale(0.98); }
}

.rsvp-field__optional {
  font-size: 0.85em;
  opacity: 0.7;
}

.rsvp-field--area .rsvp-field__label {
  max-width: calc(100% - 96px);
  line-height: 1.35;
}

.rsvp-field__optional-badge {
  position: absolute;
  top: 14px;
  right: 0;
  z-index: 1;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1.5px dashed color-mix(in srgb, var(--indigo) 35%, transparent);
  background: color-mix(in srgb, var(--sky) 18%, var(--ivory));
  color: var(--indigo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: top 0.35s var(--ease-out), opacity 0.3s var(--ease-soft);
}

.rsvp-field--area:focus-within .rsvp-field__optional-badge,
.rsvp-field--area:has(.rsvp-field__input:not(:placeholder-shown)) .rsvp-field__optional-badge {
  top: 0;
  opacity: 0.85;
}

.rsvp-field__input:focus + .rsvp-field__label,
.rsvp-field__input:not(:placeholder-shown) + .rsvp-field__label {
  top: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo);
}

.rsvp-field__line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: color-mix(in srgb, var(--indigo) 22%, transparent);
  transform-origin: left center;
  transition: background 0.3s var(--ease-soft), transform 0.45s var(--ease-out);
}

.rsvp-field__input:focus ~ .rsvp-field__line {
  background: var(--indigo);
  transform: scaleY(1.4);
}

.rsvp-field.is-invalid .rsvp-field__line {
  background: var(--blush);
}

.rsvp-field__error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--blush);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}

.rsvp-field.is-invalid .rsvp-field__error {
  opacity: 1;
  transform: translateY(0);
}

.rsvp__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.rsvp__submit {
  min-width: 180px;
  gap: 8px;
}

.rsvp__submit:active {
  transform: translateY(1px) scale(0.98);
}

.rsvp__submit.is-sending {
  opacity: 0.72;
  pointer-events: none;
}

.rsvp__banner {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px 18px 14px 16px / 16px 14px 18px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--blush) 55%, transparent);
  background: color-mix(in srgb, var(--blush) 14%, transparent);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.rsvp__banner[hidden] {
  display: none;
}

.rsvp__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  text-align: center;
  background: color-mix(in srgb, var(--mist) 92%, transparent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.rsvp__form.is-sent .rsvp__success {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.rsvp__form.is-sent .rsvp__fields,
.rsvp__form.is-sent .rsvp__actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}

.rsvp__success[hidden] {
  display: none;
}

.rsvp__form.is-sent .rsvp__success[hidden] {
  display: flex;
}

.rsvp__success-mark {
  width: 64px;
  color: var(--indigo);
  margin-bottom: 4px;
}

.rsvp__success-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--ink);
}

.rsvp__success-body {
  font-size: 15px;
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 28ch;
}

.rsvp__calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  width: min(100%, 280px);
}

.rsvp__calendar-hint {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--indigo) 72%, var(--ink-muted));
  opacity: 0.9;
}

.rsvp__calendar-btn {
  gap: 10px;
  width: 100%;
  max-width: 260px;
  padding: 0 22px;
  box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--indigo) 55%, transparent);
}

.rsvp__calendar-btn:hover {
  transform: translateY(-2px);
}

.rsvp__calendar-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
}

a.rsvp__calendar-btn {
  text-decoration: none;
  box-sizing: border-box;
}

html[lang="ka"] .rsvp__calendar-hint {
  font-style: normal;
  font-family: var(--font-ui-caps);
  letter-spacing: 0.04em;
  font-size: 12px;
}

/* Cursor glasses peek near RSVP */
html.has-custom-cursor .cursor-ring.is-rsvp-inspect {
  width: 72px;
  height: 72px;
  background: color-mix(in srgb, var(--indigo) 88%, transparent);
  border-color: transparent;
}

html.has-custom-cursor .cursor-ring.is-rsvp-inspect::after {
  content: attr(data-label);
}

/* ==========================================================================
   CLOSING
   ========================================================================== */

.closing {
  position: relative;
  z-index: 3;
  overflow: visible;
  background: var(--ivory);
  padding:
    clamp(72px, 11vh, 120px)
    var(--gutter)
    clamp(120px, 16vh, 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* Soft sky — lower third only; cream stays seamless above */
.closing-sky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(40vh, 340px);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, #000 72%);
}

.closing-sky__band {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 35%,
    color-mix(in srgb, var(--sky) 5%, transparent) 55%,
    rgba(216, 226, 225, 0.1) 78%,
    rgba(235, 228, 210, 0.05) 100%
  );
}

.closing-sky__haze {
  display: none;
}

.closing-cloud {
  position: absolute;
  will-change: transform;
}

.closing-cloud--a {
  width: clamp(120px, 22vw, 200px);
  top: 12%;
  left: clamp(-12px, 2vw, 48px);
  opacity: 0.72;
  animation: closing-cloud-drift-a 32s ease-in-out infinite;
}

.closing-cloud--b {
  width: clamp(96px, 16vw, 148px);
  top: 18%;
  right: clamp(-8px, 1vw, 36px);
  opacity: 0.68;
  animation: closing-cloud-drift-b 38s ease-in-out infinite reverse;
}

.closing-cloud--c {
  width: clamp(72px, 12vw, 112px);
  top: 38%;
  left: clamp(8px, 6vw, 72px);
  opacity: 0.55;
  animation: closing-cloud-float 24s ease-in-out infinite 0.8s;
}

.closing-cloud--d {
  width: clamp(100px, 18vw, 168px);
  top: 42%;
  right: clamp(4px, 4vw, 56px);
  opacity: 0.58;
  animation: closing-cloud-drift-a 36s ease-in-out infinite 1.2s;
}

.closing-cloud--e {
  width: clamp(56px, 10vw, 88px);
  bottom: 22%;
  left: clamp(12px, 8vw, 96px);
  opacity: 0.48;
  animation: closing-cloud-float 20s ease-in-out infinite reverse;
}

.closing-cloud--f {
  width: clamp(64px, 11vw, 104px);
  bottom: 18%;
  right: clamp(16px, 7vw, 88px);
  opacity: 0.52;
  animation: closing-cloud-drift-b 28s ease-in-out infinite;
}

.closing-cloud--g {
  width: clamp(48px, 8vw, 72px);
  top: 24%;
  left: 50%;
  margin-left: clamp(-180px, -28vw, -120px);
  opacity: 0.4;
  animation: closing-cloud-float 22s ease-in-out infinite 0.4s;
}

@keyframes closing-cloud-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -6px); }
}

@keyframes closing-cloud-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 5px); }
}

@keyframes closing-cloud-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

html[data-theme="night"] .closing-sky__band {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(42, 53, 80, 0.22) 35%,
    rgba(26, 32, 52, 0.18) 100%
  );
}

html[data-theme="night"] .closing-cloud path:not([fill="none"]) {
  fill: var(--cloud-fill);
  fill-opacity: 0.2;
  stroke: var(--moon-cream);
  stroke-opacity: 0.32;
}

html[data-theme="night"] .closing-cloud path[fill="url(#g-cloud)"] {
  fill-opacity: 0.16;
}

html[data-theme="night"] .closing-cloud path[fill="none"] {
  stroke: var(--moon-cream);
  stroke-opacity: 0.22;
}

html[data-theme="night"] .closing-cloud ellipse {
  fill: var(--moon-cream);
  fill-opacity: 0.08;
}

html[data-theme="night"] .closing-cloud {
  opacity: 0.85;
}

.closing__motif,
.closing__text,
.closing__meta {
  position: relative;
}

.closing-baby,
.closing__text,
.closing__meta {
  position: relative;
  z-index: 3;
}

.closing__motif {
  display: block;
  width: clamp(120px, 28vw, 168px);
  height: auto;
  margin-inline: auto;
  color: var(--indigo);
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transform-origin: 50% 60%;
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

/* Decorative corner flourish — behind centered baby + copy */
.closing__elephant-wrap {
  position: absolute;
  left: clamp(8px, 2vw, 24px);
  bottom: clamp(12px, 2.5vh, 28px);
  z-index: 1;
  width: auto;
  max-width: min(28vw, 235px);
  padding: 0;
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

.closing-elephant,
.closing-elephant__img {
  display: block;
  flex-shrink: 0;
  width: clamp(130px, 27.5vw, 200px);
  height: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
  object-fit: contain;
  object-position: left bottom;
  mix-blend-mode: multiply;
  color: var(--indigo);
  opacity: 0;
  transform: none;
  transform-origin: 0% 100%;
  transition:
    opacity 0.9s var(--ease-out) 0.35s,
    transform 0.9s var(--ease-out) 0.35s,
    filter 0.9s var(--ease-out) 0.35s;
}

.closing.is-visible .closing-elephant,
.closing.is-visible .closing-elephant__img {
  opacity: 1;
  transform: none;
}

.closing.is-visible .closing-elephant__img {
  animation: closing-elephant-float 5.2s var(--ease-soft) 1.15s infinite;
}

@keyframes closing-elephant-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.closing-baby {
  --look-x: 0px;
  --look-y: 0px;
}

.closing-baby__shades {
  transform: translate(var(--look-x), var(--look-y));
  will-change: transform;
}

.closing.is-visible .closing__motif:not(.closing-elephant) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.closing.is-visible .closing-baby__figure {
  animation: closing-baby-float 4.8s var(--ease-soft) 0.85s infinite;
  transform-origin: 80px 100px;
}

.closing.is-visible .closing-baby__pom {
  animation: closing-baby-pom 3.6s var(--ease-soft) 1s infinite;
  transform-origin: 80px 20px;
}

.closing.is-visible .closing-baby__arm--l {
  animation: closing-baby-arm-l 4.4s var(--ease-soft) 1.05s infinite;
  transform-origin: 54px 100px;
}

.closing.is-visible .closing-baby__arm--r {
  animation: closing-baby-wave 5.2s var(--ease-soft) 1.1s infinite;
  transform-origin: 106px 100px;
}

.closing.is-visible .closing-baby__foot--l {
  animation: closing-baby-foot-l 3.9s var(--ease-soft) 1s infinite;
  transform-origin: 66px 158px;
}

.closing.is-visible .closing-baby__foot--r {
  animation: closing-baby-foot-r 4.2s var(--ease-soft) 1.25s infinite;
  transform-origin: 94px 158px;
}

.closing.is-visible .closing-baby__sparkle--a {
  animation: closing-baby-sparkle 2.8s var(--ease-soft) 0.9s infinite;
  transform-origin: 28px 52px;
}

.closing.is-visible .closing-baby__sparkle--b {
  animation: closing-baby-sparkle 3.2s var(--ease-soft) 1.4s infinite;
  transform-origin: 132px 65px;
}

.closing.is-visible .closing-baby__sparkle--c {
  animation: closing-baby-sparkle 2.6s var(--ease-soft) 1.8s infinite;
  transform-origin: 124px 118px;
}

.closing.is-visible .closing-baby__shine {
  animation: closing-baby-shine 3.4s var(--ease-soft) 1.2s infinite;
}

@keyframes closing-baby-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes closing-baby-pom {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}

@keyframes closing-baby-arm-l {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(1.5px); }
}

@keyframes closing-baby-wave {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-4deg); }
}

@keyframes closing-baby-foot-l {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-2px); }
}

@keyframes closing-baby-foot-r {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-2.5px); }
}

@keyframes closing-baby-sparkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

@keyframes closing-baby-shine {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.7; }
}

html[data-theme="night"] .closing-baby__skin {
  fill: var(--moon-cream);
  fill-opacity: 0.16;
}

html[data-theme="night"] .closing-baby__onesie {
  fill: var(--indigo);
  fill-opacity: 0.18;
}

html[data-theme="night"] .closing-baby__wash {
  fill: var(--indigo);
  fill-opacity: 0.12;
}

html[data-theme="night"] .closing.is-visible .closing-elephant__img {
  filter: brightness(0.88) saturate(0.92);
}

.closing__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  max-width: 32ch;
  color: var(--ink);
  line-height: 1.35;
}

.closing__meta {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ==========================================================================
   SCROLL REVEAL (shared)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
  .hero {
    padding:
      max(clamp(36px, 4.5vh, 52px), env(safe-area-inset-top, 0px))
      var(--gutter)
      max(clamp(64px, 9vh, 96px), env(safe-area-inset-bottom, 0px));
  }

  html[lang="ka"] .hero__title {
    font-size: clamp(2.55rem, 10vw, 4.2rem);
    line-height: 1.1;
  }

  .hero__top {
    gap: 6px;
    margin-bottom: 6px;
  }

  .hero__copy {
    gap: 12px;
    margin-bottom: clamp(10px, 2.5vw, 18px);
  }

  .hero__video {
    margin-top: clamp(4px, 1.5vw, 12px);
    margin-bottom: 0;
  }

  .details__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .detail-sticker {
    min-height: 300px;
    padding: 52px 44px 44px;
  }

  .detail-doodle--clock {
    top: 8%;
    left: 5%;
  }

  .detail-doodle--beanie {
    top: 9%;
    right: 5%;
  }

  .detail-doodle--sock {
    bottom: 10%;
    right: 6%;
  }

  .detail-doodle--line {
    top: 7%;
    left: 5%;
  }

  .detail-doodle--pin {
    top: 8%;
    right: 6%;
  }

  .detail-doodle--teddy {
    bottom: 9%;
    right: 5%;
  }

  .detail-doodle--clock,
  .detail-doodle--line {
    width: 44px;
  }

  .detail-doodle--line {
    width: 64px;
  }

  .detail-doodle--beanie,
  .detail-doodle--teddy {
    width: 40px;
  }

  .br-desktop { display: none; }
  .marquee {
    margin-top: -20px;
    margin-bottom: 0;
    transform: rotate(-1.5deg) scale(1.1);
  }

  .story {
    padding-top: clamp(56px, 10vh, 88px);
  }

  .site-float {
    z-index: 10050;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    gap: 4px;
    padding: 4px;
  }

  .site-float__btn {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 10px;
  }

  .site-float__btn--theme {
    width: 40px;
  }

  .night-moon {
    top: 56px;
    right: 18px;
    width: 48px;
  }

  .night-teddy {
    bottom: 88px;
    width: 44px;
  }

  .night-cloud--a,
  .night-cloud--b {
    opacity: 0.55;
  }

  .day-doodle--pacifier-a {
    top: 4%;
    right: 12px;
    width: 34px;
  }

  .day-doodle--pacifier-b {
    width: 30px;
  }

  .day-doodle--sock-a {
    left: 10px;
    width: 32px;
  }

  .day-doodle--sock-b {
    width: 30px;
  }

  .day-doodle--cloud-a,
  .day-doodle--cloud-b,
  .day-doodle--cloud-c,
  .day-doodle--cloud-d {
    opacity: 0.38;
  }

  .closing-cloud {
    opacity: 0.42 !important;
  }

  .closing-cloud--a,
  .closing-cloud--d {
    width: clamp(88px, 18vw, 140px);
  }

  .closing-cloud--b {
    width: clamp(72px, 14vw, 108px);
  }

  .closing-elephant {
    width: clamp(110px, 32.5vw, 165px);
  }

  .closing__elephant-wrap {
    left: clamp(4px, 1.5vw, 16px);
    max-width: min(34vw, 165px);
    bottom: clamp(8px, 2vh, 20px);
  }

  .day-nursery__polka {
    opacity: 0.16;
  }

  .hero-floater--desktop {
    display: none;
  }

  .hero-floater--hotair {
    width: 64px;
    opacity: 0.34;
  }

  .hero-floater--pair {
    width: 56px;
  }

  .hero-floater--cloud {
    width: 64px;
    opacity: 0.28;
  }

  .venue__stage {
    transform: none;
    border-radius: 22px;
  }

  .venue__map-wrap {
    /* ~half prior mobile height (was 4/3) */
    aspect-ratio: 8 / 3;
    min-height: 120px;
  }

  .venue__bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .venue__directions {
    width: 100%;
  }

  .rsvp__fields {
    grid-template-columns: 1fr;
  }

  .rsvp-field--half {
    grid-column: 1;
  }

  .rsvp__inspector {
    width: 64px;
  }

  .rsvp-glasses {
    width: 58px;
  }

  .rsvp__inspector-hint {
    display: none;
  }
}

@media (min-width: 721px) {
  .br-desktop { display: inline; }
}

/* ==========================================================================
   MOTION / INPUT PREFERENCES
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor label {
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .orb,
  .marquee__track,
  .site-float,
  .night-moon,
  .night-cloud,
  .night-teddy,
  .night-star,
  .day-nursery__polka,
  .day-doodle,
  .closing-cloud,
  .hero-floater,
  .venue__pin-marker .venue__pin-bob,
  .rsvp-glasses__lens,
  .rsvp-glasses__eye--l,
  .rsvp-glasses__eye--r,
  .rsvp-glasses__brow--l,
  .rsvp-glasses__brow--r,
  .rsvp-glasses,
  .rsvp-paci {
    animation: none !important;
  }

  .hero-floater {
    opacity: 0.32 !important;
    transform: none !important;
  }

  .rsvp-field:focus-within .rsvp-paci {
    opacity: 1 !important;
    transform: none !important;
  }

  .venue.is-visible .venue__pin-marker .venue__pin-bob {
    opacity: 0.9 !important;
    transform: none !important;
  }

  .rsvp__inspector {
    transition: none !important;
  }

  .rsvp__calendar-btn:hover {
    transform: none;
  }

  .rsvp.is-inspecting .rsvp-glasses__eyes {
    opacity: 1;
  }

  .rsvp.is-inspecting .rsvp-glasses__lens {
    fill-opacity: 0.16;
  }

  .rsvp.is-inspecting .rsvp-glasses__brows {
    opacity: 0.85;
  }

  .rsvp-glasses__pupil-wrap {
    transition: none !important;
  }

  .day-nursery__layer,
  .night-sky__layer {
    transform: none !important;
    will-change: auto;
  }

  .site-float {
    box-shadow: var(--float-shadow);
  }

  .site-float:hover,
  .site-float:focus-within {
    box-shadow: var(--float-shadow-strong);
  }

  .reveal,
  .reveal-word,
  .hero-enter,
  .closing__motif,
  .detail-doodle {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .reveal-word.is-in,
  .hero.is-ready .reveal-word--em.is-in {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .closing-baby__figure,
  .closing-baby__pom,
  .closing-baby__arm--l,
  .closing-baby__arm--r,
  .closing-baby__foot--l,
  .closing-baby__foot--r,
  .closing-baby__sparkle,
  .closing-baby__shine,
  .closing-elephant__img {
    animation: none !important;
  }

  .closing-baby__shades {
    transform: none !important;
    will-change: auto;
  }

  .reveal,
  .reveal-word,
  .hero-enter,
  .closing__motif:not(.closing-elephant) {
    transform: none !important;
  }

  .closing-elephant,
  .closing-elephant__img {
    transform: none !important;
  }

  .detail-doodle {
    transform: rotate(var(--doodle-rot, 0deg)) !important;
  }

  .night-star {
    opacity: 0.45 !important;
  }

  .day-doodle {
    opacity: 0.4 !important;
  }

  .day-nursery__polka {
    opacity: 0.2 !important;
  }

  .hero.is-ready .kicker.hero-enter .kicker__line {
    animation: none !important;
  }

  .story__moment {
    min-height: auto;
    justify-content: flex-start;
    opacity: 1 !important;
    transition: none !important;
  }

  .story__card {
    min-height: auto;
    justify-content: flex-start;
  }

  .story__scene-art {
    transition: none !important;
  }

  .cursor-dot, .cursor-ring {
    display: none !important;
  }

  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor input,
  html.has-custom-cursor textarea,
  html.has-custom-cursor label {
    cursor: auto !important;
  }
}