/* Template 1 — «Emerald Vows» · тёмная вечерняя афиша */
:root {
  --accent: #c8a24a;          /* переопределяется из БД (color_accent) */
  --forest: #0f2620;
  --forest-deep: #081713;
  --paper: #f3ecdd;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Mulish', -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--forest-deep);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.eyebrow, .section-eyebrow {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--accent);
}

/* ── Афиша ── */
.stage {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem; overflow: hidden;
}
.stage-bg {
  position: absolute; inset: 0;
  background: var(--forest) center/cover no-repeat;
  transform: scale(1.1); filter: saturate(0.9) brightness(0.8);
  z-index: 0;
}
.stage-veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 100% at 50% 20%, rgba(15,38,32,0.55), rgba(8,23,19,0.94) 75%);
}
.frame { position: absolute; inset: clamp(1rem,2.5vw,2rem); border: 1px solid rgba(200,162,74,0.4); z-index: 2; pointer-events: none; }

.stage-inner { position: relative; z-index: 3; max-width: 40rem; }
.names {
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 500; line-height: 0.98;
  margin: 1.2rem 0 1rem; letter-spacing: 0.01em;
}
.quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: rgba(243, 236, 221, 0.82); max-width: 32rem; margin: 0 auto;
}
.meta {
  display: flex; align-items: stretch; gap: 1.6rem;
  width: fit-content; margin: 2.4rem auto 0; padding: 1rem 1.8rem;
  border: 1px solid rgba(200,162,74,0.35);
}
.meta-item { display: flex; flex-direction: column; gap: 0.3rem; }
.meta-key { font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.meta-val { font-family: var(--serif); font-size: 1.4rem; }
.meta-sep { width: 1px; background: rgba(200,162,74,0.35); }

.scroll-cue { width: fit-content; margin: 2.6rem auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(243,236,221,0.6); }
.scroll-cue span { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Секции ── */
section { padding: clamp(4rem, 10vw, 7rem) 1.5rem; text-align: center; }
.section-eyebrow { display: block; margin-bottom: 1.4rem; }

.countdown { background: var(--forest); }
.cd-grid { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; }
.cd-cell { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 84px; }
.cd-cell b { font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 4.5rem); font-weight: 500; line-height: 1; color: var(--accent); }
.cd-cell span { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(243,236,221,0.65); }

.venue { background: var(--forest-deep); }
.venue-name { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 6vw, 3.4rem); margin: 0.6rem 0; }
.venue-addr { color: rgba(243,236,221,0.7); font-size: 1.05rem; }
.ornament { margin-top: 2rem; color: var(--accent); font-size: 1.4rem; letter-spacing: 0.6em; }

.tpl-foot { background: #060f0c; text-align: center; padding: 3rem 1.5rem; }
.foot-names { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: var(--accent); }
.foot-date { color: rgba(243,236,221,0.55); font-size: 0.85rem; letter-spacing: 0.1em; margin-top: 0.3rem; }

/* Анимации — скрываем только при активном JS (html.js) */
html.js .anim, html.js .reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .anim, .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .scroll-cue i { animation: none; }
}
@media (max-width: 520px) {
  .meta { flex-direction: column; gap: 0.9rem; }
  .meta-sep { display: none; }
}