/* ═══ Kate is One · запрошення ═══ */

:root{
  --milk:#fdfbf6;
  --ink:#141210;
  --text:#2a2622;
  --muted:#7d7466;
  --rule-soft:#cfc5b3;
  --on-dark:#f6f1e7;
  --muted-dark:#b3a996;
  --gold:#e3dac8;
  --video-bg:#1d1b18;
  --pad:28px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,Helvetica,Arial,sans-serif;
  --calli:'Pinyon Script','Great Vibes',cursive;
  --hand:'Great Vibes',cursive;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--milk)}

body{
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-wrap:pretty;
  /* колонка строго по центру вікна, незалежно від успадкованих стилів */
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
}

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

a{color:var(--ink)}
a:hover{opacity:.75}

h1,h2,p,ul,li{margin:0;padding:0}
ul{list-style:none}

.sheet{
  flex:0 0 auto;
  width:100%;
  max-width:460px;
  margin:0 auto;
  background:var(--milk);
  overflow:hidden;
}

/* ─── дрібна uppercase-мітка ─── */
.label{
  font-family:var(--sans);
  font-size:10px;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}
.label--dark{font-size:9px;color:var(--muted-dark)}
.label--gold{color:var(--gold)}

/* ─── вертикальна лінія ─── */
.rule-v{width:1px;background:var(--ink)}
.rule-v--56{height:56px;margin:30px auto 0}
.rule-v--48{height:48px;margin:28px auto}

/* ─── каліграфія ─── */
.script{font-family:var(--calli);font-weight:400;color:var(--ink)}

/* ═══ 1 · Hero ═══ */
.hero{position:relative}

.hero__media{position:relative;height:660px}

.hero__photo{width:100%;height:100%;object-fit:cover}

.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:260px;
  background:linear-gradient(to bottom,rgba(253,251,246,0) 0%,var(--milk) 88%);
  pointer-events:none;
}

.hero__top{
  position:absolute;top:22px;left:22px;right:22px;
  display:flex;justify-content:space-between;
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);
  pointer-events:none;
}

.hero__text{
  position:relative;
  margin-top:-170px;
  padding:0 var(--pad) 56px;
  text-align:center;
}

.script--kate{font-size:108px;line-height:.9}
.script--one{font-size:84px;line-height:1;margin-top:-4px;padding-left:70px}

.hero__lead{
  font-style:italic;font-size:20px;line-height:1.6;
  margin:26px 4px 0;
}

/* ═══ 2 · Дата ═══ */
.date{padding:0 var(--pad) 56px}

.date__block{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:22px 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

.date__day{
  font-weight:300;font-size:150px;line-height:.8;
  letter-spacing:-.04em;color:var(--ink);
}

.date__meta{
  display:flex;flex-direction:column;gap:10px;
  border-left:1px solid var(--rule-soft);
  padding-left:22px;
}

.date__line{font-size:26px;line-height:1.1;color:var(--ink)}

.week{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  margin-top:20px;text-align:center;
}
.week__day{display:flex;flex-direction:column;align-items:center;gap:8px}
.week__name{
  font-family:var(--sans);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.week__num{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text);
}
.week__num--on{background:var(--ink);color:var(--on-dark)}

/* ═══ 3 · Лічильник ═══ */
.countdown{
  background:var(--ink);color:var(--on-dark);
  padding:52px 24px 50px;text-align:center;
}
.countdown__title{font-family:var(--hand);font-size:34px;line-height:1.2}
.countdown__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:26px;
}
.countdown__cell{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.countdown__cell + .countdown__cell{border-left:1px solid rgba(246,241,231,.2)}
.countdown__value{
  font-weight:300;font-size:52px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.countdown__label{
  font-family:var(--sans);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-dark);
}

/* ═══ 4 · Фото-смуга ═══ */
.band{position:relative;height:520px}
.band__photo{width:100%;height:100%;object-fit:cover}
.band__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px var(--pad);
  background:linear-gradient(to top,rgba(20,18,16,.55),rgba(20,18,16,0));
  pointer-events:none;
}
.band__caption .script{font-size:44px;line-height:1;color:var(--on-dark)}

/* ═══ Секції 01–03 ═══ */
.section{padding:64px var(--pad) 24px}
.section--timing{padding-bottom:40px}

.sec-head{display:flex;align-items:baseline;gap:14px}
.sec-head__num{font-style:italic;font-size:22px;color:var(--muted)}
.sec-head__rule{flex:1;height:1px;background:var(--ink);transform:translateY(-6px)}
.sec-head__en{
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);
}

.sec-title{
  font-size:48px;font-weight:400;line-height:1;
  color:var(--ink);margin-top:22px;
}

.sec-lead{font-style:italic;font-size:19px;line-height:1.6;margin:18px 0 30px}
.sec-lead--narrow{max-width:320px;margin-bottom:28px}

/* ─── відео ─── */
.video{position:relative;margin:0 calc(-1 * var(--pad));aspect-ratio:16/9;background:var(--video-bg)}
.video__player{width:100%;height:100%;object-fit:cover;background:var(--video-bg);display:block}

/* кнопка «програвати» поверх постера */
.video__btn{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.video__btn[hidden]{display:none}

.video__ring{
  width:92px;height:92px;border-radius:50%;
  border:1px solid var(--on-dark);
  background:rgba(20,18,16,.28);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease;
}
.video__ring i{
  width:0;height:0;margin-left:6px;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:22px solid var(--on-dark);
}
.video__btn:hover .video__ring{background:rgba(20,18,16,.45);transform:scale(1.04)}
.video__btn:active .video__ring{transform:scale(.97)}
.video__btn:focus-visible .video__ring{outline:1px solid var(--on-dark);outline-offset:6px}

/* заглушка на випадок, якщо файла відео ще немає */
.video__stub{
  width:100%;height:100%;background:var(--video-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.video__play{
  width:62px;height:62px;border-radius:50%;border:1px solid var(--on-dark);
  display:flex;align-items:center;justify-content:center;
}
.video__play i{
  width:0;height:0;margin-left:4px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid var(--on-dark);
}

/* ─── сітка story ─── */
.story-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:170px 170px;gap:10px;margin-top:10px;
}
.story-grid > div{overflow:hidden}
.story-grid__tall{grid-row:span 2}
.story-grid img{width:100%;height:100%;object-fit:cover;object-position:center}
/* кадр підняли, щоб не обрізало обличчя */
.story-grid img[src*="story-2"]{object-position:center 12%}

/* ═══ Місяці ═══ */
.months{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 12px;
}
.month{display:flex;flex-direction:column;gap:10px}
.month--low{margin-top:40px}
.month__photo{aspect-ratio:3/4;overflow:hidden}
.month__photo img{width:100%;height:100%;object-fit:cover}
.month__cap{
  display:flex;align-items:baseline;gap:8px;
  border-top:1px solid var(--rule-soft);padding-top:8px;
}
.month__name{font-size:18px;color:var(--ink)}

/* ═══ Фото з нагадуванням ═══ */
.shot{position:relative;margin-top:40px;overflow:hidden;aspect-ratio:3/2}
/* кадр зсунуто ліворуч, щоб напис лягав на траву, а не на дівчинку */
.shot img{width:110%;max-width:none;height:100%;object-fit:cover;object-position:center;margin-left:-10%;display:block}
.shot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:46%;
  background:linear-gradient(to bottom,rgba(20,18,16,.38) 0%,rgba(20,18,16,0) 100%);
  pointer-events:none;
}
.shot__note{
  position:absolute;top:20px;right:22px;
  margin:0;
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.22em;line-height:2;
  text-transform:uppercase;text-align:right;
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* ═══ Програма ═══ */
.timing{
  display:flex;flex-direction:column;
  margin-top:28px;border-top:1px solid var(--ink);
}
.timing__row{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;
  padding:20px 0;border-bottom:1px solid var(--rule-soft);
}
.timing__time{
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding-top:7px;
}
.timing__title{font-size:26px;line-height:1.15;color:var(--ink)}
.timing__text{font-style:italic;font-size:17px;line-height:1.5;margin-top:4px}

/* ═══ Локація ═══ */
.venue{position:relative;height:560px}
.venue__photo{width:100%;height:100%;object-fit:cover}
.venue__veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,18,16,.15) 0%,rgba(20,18,16,.7) 100%);
  pointer-events:none;
}
.venue__text{
  position:absolute;left:var(--pad);right:var(--pad);bottom:36px;
  display:flex;flex-direction:column;gap:14px;color:var(--on-dark);
}
.venue__kicker{font-style:italic;font-size:19px}
.venue__name{font-size:44px;line-height:1}
.venue__btn{
  margin-top:10px;
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 20px;border:1px solid var(--on-dark);
  color:var(--on-dark);text-decoration:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
}
.venue__arrow{font-size:16px;letter-spacing:0}

/* ═══ Фінал ═══ */
.final{padding:72px var(--pad) 80px;text-align:center}
.final__text{font-style:italic;font-size:21px;line-height:1.6;margin:0 auto;max-width:320px}
.final__sign{font-family:var(--hand);font-size:40px;line-height:1.3;color:var(--ink)}
.final__stamp{font-size:9px;letter-spacing:.35em;margin-top:30px}

/* ═══ Поява при скролі ═══ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}