/* ======================================================================
   Ақсұңқар — Қыз ұзату · "Сәукеле"
   The theme toggle tells the story: day = қыз (meadow, ivory & sage),
   night = қалыңдық (crimson velvet & gold, the сәукеле). Default dark.
   Type: Yeseva One (folk display) · Alice (storybook body) · Caveat (hand accents)
   Frames: arch-top portal cards with double gold border
   Motion: drifting сәукеле feathers · slow-turning шаңырақ
   ====================================================================== */

:root {
  --bg: #F7F4EC;
  --bg-2: #EDE7D8;
  --panel: #FDFBF4;
  --panel-2: #F3EEE1;
  --ink: #2C231A;
  --ink-soft: #6C5F4E;
  --line: rgba(44,35,26,0.14);
  --gold: #A8842F;
  --gold-bright: #C5A045;
  --gold-soft: #DDC27A;
  --accent: #5D7A4E;
  --accent-soft: #7A966B;
  --on-accent: #FBF7EC;
  --shadow: rgba(60,48,24,0.16);
  --halo: rgba(168,132,47,0.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"] {
  --bg: #1D070C;
  --bg-2: #2A0C12;
  --panel: rgba(42,12,18,0.93);
  --panel-2: rgba(56,16,24,0.88);
  --ink: #F4EADA;
  --ink-soft: #D3B3A8;
  --line: rgba(201,162,39,0.26);
  --gold: #C9A227;
  --gold-bright: #E8C766;
  --gold-soft: #E3C56F;
  --accent: #E05566;
  --accent-soft: #EE8290;
  --on-accent: #2A060B;
  --shadow: rgba(0,0,0,0.55);
  --halo: rgba(232,199,102,0.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Alice', Georgia, serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}

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

/* ====== Fixed controls — glassmorphic ====== */
.theme-toggle {
  position: fixed; z-index: 60; cursor: pointer;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12));
  color: var(--gold);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: transform .25s var(--ease), background-color .4s, color .4s;
}
[data-theme="dark"] .theme-toggle {
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.26);
  color: var(--gold-bright);
  box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.28);
}
.theme-toggle { top: 14px; right: 14px; }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.icon-sun { display: none; } .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; }
.icon-sun { fill: currentColor; stroke: currentColor; }
.icon-moon { fill: currentColor; }

.theme-hint {
  position: fixed; top: 20px; right: 74px; z-index: 59;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px 8px 15px; border-radius: 999px;
  background: rgba(48, 14, 20, 0.9); color: var(--gold-bright);
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 48%, transparent);
  backdrop-filter: blur(10px);
  white-space: nowrap; opacity: 0; transform: translateX(8px);
  pointer-events: none; transition: opacity .4s, transform .4s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.34), 0 0 18px var(--halo);
}
.theme-hint.is-visible { opacity: 1; transform: none; animation: hintNudge 1.7s ease-in-out infinite; }
.theme-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
[data-theme="dark"] .theme-hint { display: none; }
@keyframes hintNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Music ring button */
.music-btn {
  position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); z-index: 60;
  width: 92px; height: 92px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; overflow: visible;
  background: transparent; color: var(--gold); cursor: pointer;
  outline-offset: 5px; touch-action: manipulation;
}
.music-btn::before {
  content: ""; position: absolute; inset: 22px; border-radius: 50%;
  box-shadow: 0 0 26px var(--halo);
  opacity: 0; transform: scale(.9);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.music-btn:focus-visible { outline: 2px solid var(--gold-bright); }
.music-btn:focus:not(:focus-visible) { outline: none; }
.music-btn:hover::before { opacity: .6; transform: scale(1); }
.music-btn[aria-pressed="true"]::before { opacity: 1; transform: scale(1.04); }
.music-btn:active .music-core { transform: scale(.95); }
.music-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: spin 18s linear infinite;
  animation-play-state: paused;
  filter: drop-shadow(0 1px 3px rgba(30,12,4,0.18));
}
.music-btn[aria-pressed="true"] .music-ring { animation-play-state: running; animation-duration: 11s; }
.ring-text {
  fill: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: lowercase;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--panel) 72%, transparent);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}
@keyframes spin { to { transform: rotate(360deg); } }
.music-core {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12));
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
[data-theme="dark"] .music-core {
  background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.28);
}
.music-btn:hover .music-core,
.music-btn[aria-pressed="true"] .music-core { transform: scale(1.06); }
.music-core svg { width: 18px; height: 18px; fill: var(--gold); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
[data-theme="dark"] .music-core svg { fill: var(--gold-bright); }
.music-core .icon-play { margin-left: 2px; }
.icon-pause { display: none; }
.music-btn[aria-pressed="true"] .icon-play { display: none; }
.music-btn[aria-pressed="true"] .icon-pause { display: block; }

/* ====== Page shell ====== */
/* overflow-x clip: the side ornaments bleed past the edge — without this the
   mobile layout viewport widens and the fixed buttons land off-screen */
.page { position: relative; z-index: 1; overflow-x: clip; }
.card, .countdown-card {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(2.4rem, 8vw, 3.6rem) clamp(1.3rem, 6vw, 2.4rem);
}
.card.duet-card { max-width: 620px; }

/* ====== Reveal on scroll ====== */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(5px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ====== HERO — day meadow / night сәукеле ====== */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center;
  overflow: hidden; isolation: isolate;
  padding: 0 1.4rem clamp(3.4rem, 12vh, 6rem);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  transition: opacity 1s var(--ease);
}
.hero-img-night { opacity: 0; object-position: center 35%; }
[data-theme="dark"] .hero-img-day { opacity: 0; }
[data-theme="dark"] .hero-img-night { opacity: 1; }
/* Desktop / landscape: portrait photos — crisp at native aspect,
   sides filled with a blurred extension of the same frame. */
@media (min-aspect-ratio: 1/1) {
  .hero-img { object-fit: contain; }
  .hero-media::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #1D070C url("assets/photos/hero-day.jpg") center / cover no-repeat;
    filter: blur(34px) brightness(.7) saturate(1.12);
    transform: scale(1.12);
  }
  [data-theme="dark"] .hero-media::before {
    background-image: url("assets/photos/hero-night.jpg");
  }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(0,0,0,0.26), transparent 50%),
    linear-gradient(180deg, transparent 38%, rgba(29,7,12,0.55) 70%, rgba(29,7,12,0.92) 100%);
}
:root .hero-scrim {
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(34,26,8,0.14), transparent 50%),
    linear-gradient(180deg, transparent 40%, rgba(44,35,16,0.44) 72%, rgba(38,30,12,0.82) 100%);
}
/* fireflies — warm glow dots wandering and flickering over the hero
   (sunlit pollen motes by day, fireflies by night) */
.hero-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-dust span {
  position: absolute; width: var(--sz, 3px); height: var(--sz, 3px); border-radius: 50%;
  background: #FFE9A8; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255, 214, 120, 0.55), 0 0 2px 1px rgba(255, 240, 200, 0.9);
  animation:
    ff-wander var(--dur, 12s) ease-in-out infinite alternate,
    ff-flicker var(--fdur, 3.4s) ease-in-out infinite;
}
@keyframes ff-wander {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--x1, 30px), var(--y1, -22px)); }
  50%  { transform: translate(var(--x2, -24px), var(--y2, 14px)); }
  75%  { transform: translate(var(--x3, 18px), var(--y3, 26px)); }
  100% { transform: translate(var(--x4, -12px), var(--y4, -18px)); }
}
@keyframes ff-flicker {
  0%, 100% { opacity: .05; }
  35% { opacity: .95; }
  55% { opacity: .4; }
  78% { opacity: .85; }
}
.hero-text { position: relative; z-index: 1; color: #FFF6EA; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.eyebrow {
  font-family: 'Inter', sans-serif; font-size: .76rem; letter-spacing: .46em;
  text-transform: uppercase; margin: 0 0 .35rem; padding-left: .46em;
  color: var(--gold-soft); text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.bride-name {
  font-family: 'Yeseva One', Georgia, serif; font-weight: 400;
  font-size: clamp(2.7rem, 13vw, 4.4rem); margin: 0; line-height: 1.04;
  letter-spacing: .015em;
  color: var(--gold-soft);
  filter: drop-shadow(0.5px 0.5px 0.4px rgba(0,0,0,.55)) drop-shadow(0 3px 14px rgba(0,0,0,.55));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bride-name {
    background: linear-gradient(100deg, #C9982F 0%, #F4DD9C 26%, #FFF6DD 44%, #F0D488 60%, #C9982F 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: sheen 7s linear infinite;
  }
}
@keyframes sheen { to { background-position: -250% 0; } }
.hero-date {
  font-style: italic; font-size: 1.18rem; letter-spacing: .03em;
  margin: .7rem 0 0; color: #F6ECDA; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.scroll-cue {
  position: absolute; left: 50%; bottom: max(1.4vh, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: #F6ECDA;
  font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  opacity: .85;
}
.scroll-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ====== Headings & ornaments ====== */
.script-heading {
  font-family: 'Yeseva One', Georgia, serif; font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.05rem); margin: 0 0 1rem; line-height: 1.22;
  color: var(--gold); text-align: center;
}
[data-theme="dark"] .script-heading { text-shadow: 0 0 22px rgba(201,162,39,0.3); }
.script-heading::after {
  content: ""; display: block; width: 54px; height: 1px; margin: .7rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* divider — gold hairline with an eight-point star */
.divider {
  position: relative;
  height: 40px; max-width: 380px; margin: .4rem auto;
}
.divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: .7;
}
.divider::after {
  content: "✦"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  padding: 0 .6rem; background: var(--bg);
  color: var(--gold); font-size: .95rem;
  transition: background-color .6s var(--ease);
}

.ornament-star {
  display: block; width: 30px; height: 30px; margin: 0 auto 1rem;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6 1.3 6.7 7 7-5.7.3-6.3 1-7 7-.7-6-1.3-6.7-7-7 5.7-.3 6.3-1 7-7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.7 6 1.3 6.7 7 7-5.7.3-6.3 1-7 7-.7-6-1.3-6.7-7-7 5.7-.3 6.3-1 7-7z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: pulseStar 4s var(--ease) infinite;
}
@keyframes pulseStar { 0%,100% { opacity: .65; transform: scale(.92) rotate(0deg); } 50% { opacity: 1; transform: scale(1.06) rotate(10deg); } }

/* ====== Side ornaments — turning шаңырақ bleeding off the page edge ====== */
.side-orn { position: relative; height: 0; pointer-events: none; }
.side-orn::before {
  content: ""; position: absolute; top: 0; z-index: -1;
  width: min(310px, 62vw); aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("assets/ornaments/shanyrak.png") center/contain no-repeat;
  opacity: .3;
  animation: orn-spin 80s linear infinite;
}
.side-orn.left::before { left: calc(-1 * min(155px, 31vw)); }
.side-orn.right::before { right: calc(-1 * min(155px, 31vw)); }
:root:not([data-theme="dark"]) .side-orn::before { opacity: .45; }
@keyframes orn-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

/* ====== Night ember field (fixed, night only) ====== */
.embers { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); }
[data-theme="dark"] .embers { opacity: 1; }
.embers span {
  position: absolute; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px 1px var(--halo);
  animation: twinkle var(--tw, 4s) ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .8; } }

/* ====== Card surface — arch-top portal frames ====== */
.intro, .duet-card, .date-card, .venue-card, .form-card, .hosts-card, .closing-card {
  border-radius: clamp(110px, 30vw, 170px) clamp(110px, 30vw, 170px) 20px 20px;
  margin-top: clamp(1.6rem, 6vw, 2.6rem); margin-bottom: clamp(1.6rem, 6vw, 2.6rem);
  padding-top: clamp(3.4rem, 12vw, 5rem);
  background:
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 18px 50px var(--shadow);
}
/* inner gold hairline following the arch */
.intro::before, .duet-card::before, .date-card::before, .venue-card::before,
.form-card::before, .hosts-card::before, .closing-card::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: clamp(102px, 28vw, 162px) clamp(102px, 28vw, 162px) 14px 14px;
}
[data-theme="dark"] .intro, [data-theme="dark"] .duet-card, [data-theme="dark"] .date-card,
[data-theme="dark"] .venue-card, [data-theme="dark"] .form-card,
[data-theme="dark"] .hosts-card, [data-theme="dark"] .closing-card {
  backdrop-filter: blur(6px);
}

/* ====== INTRO / invitation ====== */
.intro { text-align: center; overflow: hidden; }
.salutation-text { font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.2rem; font-style: italic; }
.invitation-text { font-size: 1.1rem; line-height: 1.65; color: var(--ink); margin: 0; font-weight: 500; }

/* ====== PHOTO DUET — қыз бен қалыңдық ====== */
.duet-card { text-align: center; }
.duet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duet-item { margin: 0; }
.panel-photo {
  display: block; width: 100%; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px var(--shadow);
  outline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.panel-photo:focus-visible { outline: 2px solid var(--gold-bright); }
.panel-photo { border-radius: clamp(70px, 19vw, 110px) clamp(70px, 19vw, 110px) 12px 12px; }
.panel-photo img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  transition: filter .8s var(--ease), transform .8s var(--ease);
}
.panel-photo:hover img { transform: scale(1.025); }
/* the look matching the active theme glows; the other recedes */
[data-theme="dark"] .duet-day-item .panel-photo img { filter: grayscale(.4) brightness(.78); }
:root:not([data-theme="dark"]) .duet-night-item .panel-photo img { filter: grayscale(.4) brightness(.92); }
[data-theme="dark"] .duet-night-item .panel-photo { box-shadow: 0 14px 36px var(--shadow), 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 26px var(--halo); }
:root:not([data-theme="dark"]) .duet-day-item .panel-photo { box-shadow: 0 14px 36px var(--shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.duet-item figcaption { margin-top: .7rem; transition: opacity .6s var(--ease); }
[data-theme="dark"] .duet-day-item figcaption { opacity: .55; }
:root:not([data-theme="dark"]) .duet-night-item figcaption { opacity: .55; }
.duet-label { display: block; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.6rem, 5.6vw, 2rem); color: var(--gold); line-height: 1.1; }
.duet-sub { display: block; font-style: italic; font-size: .95rem; color: var(--ink-soft); }
.duet-note {
  margin: 1.4rem 0 0; font-family: 'Caveat', cursive; font-weight: 500;
  font-size: 1.2rem; color: var(--ink-soft);
}
.duet-note::before { content: "☾ "; color: var(--gold); font-style: normal; }
@media (max-width: 420px) {
  .duet { gap: 9px; }
  .duet-sub { font-size: .85rem; }
}

/* ====== DATE / calendar ====== */
.date-card { text-align: center; }
.date-line { font-size: 1.15rem; font-style: italic; color: var(--ink-soft); margin: 0 0 1.2rem; }
.calendar {
  max-width: 360px; margin: 0 auto; padding: 1.2rem 1rem 1.4rem;
  border-radius: 16px; border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}
.cal-month { font-family: 'Yeseva One', Georgia, serif; font-size: 1.15rem; letter-spacing: .04em; color: var(--gold); margin-bottom: .6rem; }
.cal-row, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head span { font-family: 'Inter', sans-serif; font-size: .64rem; letter-spacing: .04em; color: var(--ink-soft); text-transform: uppercase; padding: .3rem 0; }
.cal-grid { margin-top: .4rem; }
.cal-grid span {
  position: relative; font-family: 'Alice', serif; font-weight: 400;
  font-size: .95rem; color: var(--ink); padding: .5rem 0; border-radius: 50%;
}
.cal-event { background: var(--accent); color: var(--on-accent) !important; font-weight: 700 !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-theme="dark"] .cal-event { box-shadow: 0 0 18px rgba(224,85,102,0.6); }
.cal-heart { position: absolute; top: -7px; right: -1px; width: 14px; height: 14px; fill: var(--gold); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.time-line { margin: 1.2rem 0 0; font-size: 1.05rem; color: var(--ink-soft); }
.time-line strong { color: var(--gold); font-size: 1.3rem; }

/* ====== VENUE ====== */
.venue-card { text-align: center; }
.venue-name { font-family: 'Yeseva One', Georgia, serif; font-size: 1.35rem; line-height: 1.5; color: var(--gold); margin: .2rem 0 .4rem; }
.venue-help { font-size: .98rem; color: var(--ink-soft); margin: 0 0 1.3rem; }

/* ====== Buttons ====== */
.map-btn, .submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  border: none; cursor: pointer; border-radius: 999px;
  padding: .85rem 1.7rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--on-accent);
  box-shadow: 0 8px 22px var(--halo);
  transition: transform .2s var(--ease), box-shadow .3s, filter .3s;
}
[data-theme="dark"] .map-btn, [data-theme="dark"] .submit-btn { color: #2A1404; }
.map-btn svg { width: 19px; height: 19px; fill: currentColor; }
.map-btn:hover, .submit-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.map-btn:active, .submit-btn:active { transform: translateY(0) scale(.98); }

/* ====== Forms ====== */
.form-card { text-align: center; }
.form-intro { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 1.5rem; font-style: italic; }
.field { display: block; text-align: left; margin: 0 auto 1.1rem; max-width: 400px; }
.field-label { display: block; font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.field input[type="text"], .field textarea {
  width: 100%; font-family: 'Alice', serif; font-size: 1.02rem; color: var(--ink);
  padding: .75rem .9rem; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 60%, transparent); resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--halo); }
fieldset.field { border: none; padding: 0; margin: 0 auto 1.4rem; max-width: 400px; }
.radio {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: .85rem 1.1rem; margin-bottom: .6rem; border-radius: 14px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 50%, transparent);
  font-size: 1.04rem; color: var(--ink); transition: all .25s var(--ease);
}
.radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid var(--gold-soft); flex: 0 0 auto; position: relative; transition: all .25s; }
.radio input:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); }
.radio:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 4px 14px var(--halo); }
.submit-btn { width: 100%; max-width: 400px; position: relative; margin-top: .3rem; }
.btn-spinner { display: none; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--on-accent) 40%, transparent); border-top-color: var(--on-accent); border-radius: 50%; animation: spin .7s linear infinite; }
.submit-btn.is-loading .btn-label { opacity: .5; }
.submit-btn.is-loading .btn-spinner { display: inline-block; }
.form-msg { min-height: 1.2em; margin: 1rem 0 0; font-size: 1rem; }
.form-msg.is-ok { color: var(--gold); } .form-msg.is-err { color: var(--accent); }

/* ====== COUNTDOWN ====== */
.countdown-card { position: relative; text-align: center; border-radius: clamp(110px, 30vw, 170px) clamp(110px, 30vw, 170px) 20px 20px; overflow: hidden; margin-top: 1.6rem; margin-bottom: 1.6rem; padding-top: clamp(3.4rem, 12vw, 5rem); }
.countdown-veil { position: absolute; inset: 0; z-index: 0; background: url("assets/photos/crimson-portrait.jpg") center 20% / cover no-repeat; opacity: .9; }
.countdown-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(29,7,12,0.68), rgba(29,7,12,0.86)); }
.countdown-card .script-heading, .countdown { position: relative; z-index: 1; }
.countdown-card .script-heading { color: #F4DD9C; }
.countdown { display: flex; justify-content: center; gap: clamp(.5rem, 3vw, 1rem); }
.cd-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: clamp(58px, 18vw, 74px); padding: .9rem .5rem; border-radius: 14px;
  background: rgba(255,244,214,0.08); border: 1px solid rgba(232,199,102,0.34);
  backdrop-filter: blur(3px);
}
.cd-num { font-family: 'Yeseva One', Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 6.6vw, 2.4rem); color: #F7E3A6; line-height: 1; text-shadow: 0 0 16px rgba(232,199,102,0.4); }
.cd-lbl { font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #ECD9C2; }

/* ====== HOSTS ====== */
.hosts-card { text-align: center; }
.hosts { font-size: 1.1rem; line-height: 1.7; color: var(--ink); }
.hosts p { margin: .3rem 0; }
.hosts .hosts-lead { font-style: italic; color: var(--ink-soft); }
.hosts strong { color: var(--gold); font-size: 1.7rem; font-family: 'Caveat', cursive; font-weight: 600; }
.hosts-social { display: flex; gap: 14px; justify-content: center; margin-top: 1.3rem; }
.hosts-social:empty { display: none; }
.hosts-social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--gold); color: var(--gold); box-shadow: 0 6px 16px var(--shadow); transition: transform .2s var(--ease); }
.hosts-social a:hover { transform: translateY(-3px); }
.hosts-social svg { width: 22px; height: 22px; fill: currentColor; }

/* ====== CLOSING ====== */
.closing-card { text-align: center; }
.closing-star {
  display: block; width: 76px; height: 76px; margin: 0 auto 1.2rem;
  background: url("assets/ornaments/shanyrak.png") center/contain no-repeat;
  filter: drop-shadow(0 0 14px var(--halo));
  animation: slow-spin 45s linear infinite;
}
.closing-text { font-size: 1.1rem; line-height: 1.7; font-style: italic; color: var(--ink); margin: 0 0 1rem; }
.closing-await { font-family: 'Caveat', cursive; font-weight: 600; font-size: 2.4rem; color: var(--gold); margin: 0; }

/* ====== FOOTER ====== */
.footer { text-align: center; padding: 3rem 1.4rem 4rem; color: var(--ink-soft); }
.footer .hairline { display: block; width: 60px; height: 1px; margin: 0 auto 1.4rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer p { font-size: .95rem; margin: 0 0 .4rem; }
.footer span[aria-label="love"] { color: var(--accent); }
.footer-link { font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: .04em; color: var(--gold); text-decoration: none; opacity: .8; }

/* ====== LIGHTBOX ====== */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,4,8,0.94); display: grid; place-items: center; backdrop-filter: blur(8px); }
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lightbox-close { position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 16px; }
.lightbox-close, .lightbox-nav {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(232,199,102,0.4);
  background: rgba(52,14,22,0.6); color: var(--gold-soft); cursor: pointer; display: grid; place-items: center;
}
.lightbox-close svg, .lightbox-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev { left: 14px; } .lightbox-nav.next { right: 14px; }

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}