/* ══════════════════════════════════════════
   ПЕРЕМЕННЫЕ И БАЗА
══════════════════════════════════════════ */
:root{
  --accent:#c0a0aa;
  --text:#4a4a4a;
  --heading:rgba(120,100,108,.62);
  --light:rgba(255,255,255,.85);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* ══════════════════════════════════════════
   BODY — лёгкий градиент
══════════════════════════════════════════ */
body{
  font-family:'Jost',sans-serif;
  font-weight:300;
  font-size:clamp(14px,1.8vw + 8px,24px);
  color:var(--text);
  overflow-x:hidden;
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), url('bg.jpeg') center/cover fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ══════════════════════════════════════════
   КОНТЕЙНЕРЫ
══════════════════════════════════════════ */
.container{
  max-width:1000px;
  margin:auto;
  padding:clamp(20px,4vw,40px) clamp(14px,4vw,20px);
  text-align:center;
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* ══════════════════════════════════════════
   ЗАГОЛОВКИ
══════════════════════════════════════════ */
h1,h2{
  font-family:'Great Vibes',cursive;
  font-weight:100;
  color:var(--heading);
  text-align:center;
  letter-spacing:1px;
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
}
h2{font-size:clamp(28px,7.5vw,90px);margin-bottom:.5em}
h1{font-size:clamp(40px,9vw,113px)}

/* ══════════════════════════════════════════
   ИМЕНА
══════════════════════════════════════════ */
.names{
  font-family:'Great Vibes','Georgia',serif;
  font-size:clamp(36px,13vw,165px);
  font-weight:400;
  color:var(--text);
  margin-top:clamp(32px,6vw,80px);
  letter-spacing:.03em;
  display:inline-block;
  text-decoration:none;
  line-height:1.1;
  word-break:keep-all;
  white-space:nowrap;
}
@media(max-width:480px){
  .names{white-space:normal;word-break:break-word;}
}

.rings-svg{
  display:inline-block;
  vertical-align:middle;
  width:.72em;
  height:.82em;
  margin:0 .04em;
  position:relative;
  top:-.06em;
}
.date{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(20px,5.5vw,74px);
  letter-spacing:.1em;
  margin-top:.2em;
}
.timer{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(13px,2.2vw,30px);
  letter-spacing:.08em;
  margin-top:.6em;
}
p{
  font-size:clamp(13px,1.8vw,24px);
  line-height:1.7;
}
.photo{
  width:100%;
  height:auto;
  border-radius:16px;
  margin-top:16px;
}

/* ══════════════════════════════════════════
   ПРОГРАММА
══════════════════════════════════════════ */
.program{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
.program-item{
  flex:0 0 clamp(140px,38vw,220px);
  background:var(--light);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.1);
  font-family:'Cormorant Garamond',serif;
}
.program-item p{
  font-size:clamp(12px,1.6vw,22px);
  margin-top:8px;
  line-height:1.4;
}
.program-svg{
  width:100%;
  height:clamp(90px,18vw,140px);
  display:block;
  border-radius:10px;
}

/* ══════════════════════════════════════════
   ПАЛИТРА
══════════════════════════════════════════ */
.palette{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:clamp(8px,2vw,16px);
  margin-top:28px;
  overflow-x:auto;
  padding-bottom:8px;
}
.palette-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(11px,1.3vw,16px);
  color:#9a7a84;
  white-space:nowrap;
}
.swatch{
  width:clamp(34px,5vw,52px);
  height:clamp(34px,5vw,52px);
  border-radius:50%;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  border:2px solid rgba(255,255,255,.85);
}

/* ══════════════════════════════════════════
   КАРТА И КАЛЕНДАРЬ
══════════════════════════════════════════ */
.map{
  width:100%;
  height:clamp(220px,45vw,300px);
  border-radius:16px;
  border:none;
  box-shadow:0 8px 22px rgba(0,0,0,.1);
  margin-top:20px;
  display:block;
}
#map-fallback a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #e6d5dc;
  border-radius: 30px;
  color: var(--heading);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  transition: background 0.2s;
}
#map-fallback a:active {
  background: #d4bfc8;
}
@media (hover: hover) {
  #map-fallback a:hover {
    background: #d4bfc8;
  }
}
.calendar-wrap{
  margin-top:40px;
  display:flex;
  justify-content:center;
  overflow-x:auto;
}
.calendar{
  display:inline-block;
  padding:clamp(16px,4vw,36px) clamp(14px,4vw,44px);
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.11);
  font-family:'Cormorant Garamond',serif;
}
.calendar-title{
  font-size:clamp(16px,2.5vw,33px);
  font-weight:600;
  text-align:center;
  margin-bottom:16px;
  letter-spacing:.1em;
}
.grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(6px,1.5vw,12px) clamp(6px,1.5vw,14px);
  font-size:clamp(14px,2.5vw,30px);
  text-align:center;
}
.grid-head{
  font-size:clamp(10px,1.5vw,21px);
  font-weight:500;
  color:#999;
  padding-bottom:4px;
  border-bottom:1px solid #f0e8e8;
}
.heart{color:#c33;font-weight:bold;position:relative}
.heart::after{
  content:'❤';
  position:absolute;
  top:-10px;
  right:-8px;
  font-size:clamp(10px,1.5vw,16px);
}

/* ══════════════════════════════════════════
   ФОРМА И КНОПКИ (touch-оптимизация)
══════════════════════════════════════════ */
input,textarea{
  width:100%;
  padding:clamp(8px,2vw,12px);
  margin-top:10px;
  border-radius:10px;
  border:1px solid #ddd;
  font-family:'Jost',sans-serif;
  font-size:max(16px, clamp(14px,2vw,22px));
  -webkit-text-size-adjust:100%;
  -webkit-appearance:none;
  appearance:none;
  background:#fff;
}
.attend-group{
  display:flex;
  gap:12px;
  margin-top:10px;
  justify-content:center;
}
.attend-btn{
  flex:1;
  max-width:180px;
  padding:clamp(10px,2vw,14px) clamp(16px,4vw,28px);
  border:2px solid #e0ccd4;
  border-radius:20px;
  background:#fff;
  cursor:pointer;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(18px,3vw,30px);
  color:#9a7a84;
  letter-spacing:.05em;
  transition:background .2s, transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color:transparent;
}
.attend-btn:active{transform:scale(0.97);}
.attend-btn.selected{
  background:#e6d5dc;
  border-color:var(--accent);
  color:var(--heading);
}
.submit-btn{
  margin-top:14px;
  padding:clamp(8px,2vw,12px) clamp(16px,4vw,28px);
  border:none;
  border-radius:20px;
  background:#e6d5dc;
  cursor:pointer;
  font-family:'Great Vibes',cursive;
  font-size:clamp(20px,3vw,36px);
  font-weight:100;
  color:var(--heading);
  touch-action: manipulation;
  transition:transform .1s;
}
.submit-btn:active{transform:scale(0.97);}

/* ══════════════════════════════════════════
   FADE-АНИМАЦИИ
══════════════════════════════════════════ */
.fade{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════
   ЖЕМЧУЖИНЫ
══════════════════════════════════════════ */
.pearl{
  position:fixed;
  top:-30px;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
  background: radial-gradient(circle at 30% 30%, #fff, #f0e8e4);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  animation: fall linear infinite;
}
@keyframes fall{
  0%{transform:translateY(-10vh); opacity:0}
  10%{opacity:0.7}
  100%{transform:translateY(110vh); opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .pearl{display:none}
  .fade{opacity:1;transform:none;transition:none}
}
/* Отключаем hover на тач-устройствах */
@media (hover: hover){
  .attend-btn:hover{background:#f9f3f5;border-color:var(--accent);}
  .submit-btn:hover{background:#d4bfc8;}
}