@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap"); /* === базовый (ширина 450-500 px) === */
@import url("https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
    font-size: 100%;
    min-width: 250px;
}

@font-face {
    font-family: "Mavka";
    src: url("../fonts/mavka.otf") format("opentype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}

@font-face {
    font-family: "American Typewriter";
    src: url("../fonts/americanTypewriter.ttf") format("truetype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}

@font-face {
    font-family: "American Typewriter Bold";
    src: url("../fonts/americanTypewriter-Bold.ttf") format("truetype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}

@font-face {
    font-family: "Caveat";
    src: url("../fonts/Caveat.ttf") format("truetype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}
@font-face {
    font-family: "Tagesschrift";
    src: url("../fonts/TagesschriftCyrillic-Regular.ttf") format("truetype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}
@font-face {
    font-family: "HQY";
    src: url("../fonts/HQYSaversText.ttf") format("truetype");
    /* при необходимости укажите: font-weight / font-style */
    font-display: swap;          /* ускоряет отрисовку текста */
}

:root {
    --bg: #ededed;
    --ink: #222;
    --accent: #da7568;
    --accent-light: #dfe6fa;

    /* 4.5 vw ≈ 18 px → 1.125 rem */
    --gap: 1.125rem; /* равномерные отступы под мобильный */

    font-family: "American Typewriter", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    color: var(--ink);
    background: var(--bg);
}

/* -------------------------------------------------- */
/* GLOBAL RESET & CONTAINER                           */
/* -------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    max-width: 600px; /* «мобильная» колоночка на десктопе */
    margin: 0 auto;
}

section {
    /* 1.125 rem × 1.4 ≈ 1.575 rem */
    /*padding: calc(var(--gap) * 1.4) var(--gap);*/
}

/* контейнер, внутри которого происходит скролл */
.viewport {
    height: 100dvh;                 /* ровно высота окна */
    overflow-y: scroll;            /* вертик. прокрутка */
    scroll-snap-type: y mandatory; /* щёлкать строго по секциям */
    scroll-behavior: smooth;       /* плавное скольжение */
}

/* каждая «страница» */
.screen {
    height: 100dvh;                 /* на полный экран */
    scroll-snap-align: start;      /* прилипать к верху */
    align-items: center;
}

/* 3) финальный длинный экран */
.screen--long{
    padding:0;                  /* снимем паддинг: будет во внутреннем блоке */
    overflow:hidden;            /* скрываем хвост, если контент выше 100vh */
}

/* 4) внутренний скроллируемый контейнер */
.long__inner{
    height:100%;                /* захватываем 100vh */
    overflow-y:auto;            /* личная прокрутка */
}

/* 5) чтобы Snap не «отлипал» в середине длинного экрана,
      добавим дополнительное глубокое прилипание */
.screen--long{
    scroll-snap-stop:always;    /* браузер «зависнет» на нём, пока не доскроллим внутрь */
}

/* индикатор «листайте ниже» */
.scroll-indicator{
    position:absolute;
    bottom: 0.1rem;

    left:50%;
    transform:translateX(-50%);
    font:600 1.1rem/1 "Montserrat",sans-serif;
    color:#cf6a5d;            /* тот же сиреневый, что и таймер */
    pointer-events:none;      /* чтоб не перехватывал тапы/клики */
    user-select:none;
    display:flex;align-items:center;
    gap:.35rem;
    opacity:0;                /* появится после загрузки */
    animation:fadeUp .9s 1.5s forwards;
    backdrop-filter: blur(3px);
    padding: 11px;
    clip-path: inset(0 round 27px);
}

/* собственно стрелка */
.scroll-indicator .arrow{
    display:inline-block;
    font-size:1.3rem;
    animation:jump 1.4s ease-in-out infinite;
    position: relative;
    top: -5px;
}

/* лёгкое подпрыгивание стрелки */
@keyframes jump{
    0%,100%{transform:translateY(0);}
    50%   {transform:translateY(6px);}
}

/* плавное появление индикатора */
@keyframes fadeUp{
    from{opacity:0;transform:translate(-50%,6px);}
    to  {opacity:1;transform:translate(-50%,0);}
}

/* -------------------------------------------------- */
/* TYPOGRAPHY                                         */
/* -------------------------------------------------- */
h1, h2 {
    font-family: "Caveat", cursive;
}

/* 12 vw ≈ 48 px → 3 rem */
h1 {
    font-size: 3rem;
    text-align: center;
    /* 8 vw ≈ 32 px → 2 rem ; 3 vw ≈ 12 px → 0.75 rem */
    margin: 2rem 0 0.75rem;
}

/* 9 vw ≈ 36 px → 2.25 rem */
h2 {
    font-size: 2.25rem;
    /* 5 vw ≈ 20 px → 1.25 rem */
    margin-bottom: 1.25rem;
    color: var(--accent);
}

/* -------------------------------------------------- */
/* CROSS RIBBONS (endless marquee)                    */
/* CROSS RIBBONS (endless marquee)                    */
/* CROSS RIBBONS (endless marquee)                    */
/* CROSS RIBBONS (endless marquee)                    */
/* CROSS RIBBONS (endless marquee)                    */
/* -------------------------------------------------- */

/* 28 vw ≈ 110 px → 6.875 rem */
.ribbons {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    position: relative;
    height: 6.875rem;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    left: -10px; /* фиксированно, не завися от шрифта */
    top: 30px;
    width: 110%;
    white-space: nowrap;
    display: flex;
}

.ribbon span {
    flex: 0 0 auto;
    /* 1.5 vw ≈ 6 px → 0.375 rem */
    padding: 0.375rem 0;
    /* 6 vw ≈ 23.4 px → 1.4375 rem */
    font-size: 4.5vw;
    font-weight: 300;
    letter-spacing: 1px;
    animation: scroll 15s linear infinite;
}

.ribbon--top {
    transform: rotate(-8deg);
    background: var(--accent);
    color: #fff;
}

.ribbon--bottom {
    transform: rotate(8deg);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 3px var(--bg);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.ribbon--bottom span {
    animation-direction: reverse;
}

/*- ===== Блок-анонс «Наконец-то!» ======== */
/*- ===== Блок-анонс «Наконец-то!» ======== */
/*- ===== Блок-анонс «Наконец-то!» ======== */
/*- ===== Блок-анонс «Наконец-то!» ======== */
/*- ===== Блок-анонс «Наконец-то!» ======== */
.prologue-paper {
    position: relative;
    padding: 0.25rem 1.5rem 3rem;
    text-align: left;
    overflow: hidden;
}

.prologue-title {
    max-width: 400px;
    font: 700 2.25rem/1.2 "Cormorant Garamond", serif;
    margin-bottom: 1rem;
}

.prologue-lead {
    max-width: 400px;
    font: 1rem/1.45 "American Typewriter", serif;
    margin-bottom: 3.5rem;
    color: #555;
    text-align: end;
}

.prologue-ring {
    position: absolute;
    right: 1.25rem;
    top: 5.5rem;
    width: 4rem;
    height: auto;
}

.prologue-text {
    font: 1rem/1.45 "American Typewriter", serif;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 2.8rem;
}

.prologue-big {
    font: 700 2rem/1.2 "Cormorant Garamond", serif;
    letter-spacing: 1px;
    text-align: center;
    transform: rotate(4deg);
    margin: 6vw 0;
}

/* -------- АНИМАЦИИ -------- */
@keyframes fade-in   {to{opacity:1}}
@keyframes slide-up  {to{opacity:1;transform:translateY(0)}}

.fade-in   {opacity:0;animation:fade-in .8s .2s forwards}
.slide-up  {opacity:0;transform:translateY(40px);animation:slide-up .8s .6s forwards}

.delay-1{animation-delay:.9s!important}
.delay-2{animation-delay:1.2s!important}
.delay-3{animation-delay:1.6s!important}

/* -------- COUNTDOWN -------- */
.countdown{
    display:flex;gap:1rem;justify-content:center;margin-top:2.2rem;
    font:600 1rem/1.2 "Montserrat",sans-serif;opacity:1;
}
.countdown-vert b {
    flex-grow: 1;
    font-size: 2.6rem;
    line-height: 1;
    display: inline-block;
    /* width: 2ch; */
    /* text-align: center; */
    margin: 0 auto;
    animation: pulseNum 10s ease-in-out infinite;
    color: #555555;
}
.countdown small{font-size:.7rem;text-transform:uppercase;letter-spacing:.3px;color:#555}

/* вертикальный вид */
.countdown-vert{
    display: flex;
    flex-direction: row;
    align-items:flex-start;      /* выравниваем влево */
    gap:.9rem;
    font:600 1rem/1 "Montserrat",sans-serif;
    opacity:1;                  /* появится через анимацию delay-3 */
    width: 95%;
    margin: 0 auto;
}

/* каждая строка = flex-контейнер */
.countdown-vert > div{
    display:flex;
    flex-grow: 1;
    flex-direction: column;
    align-items:baseline;
    width: 50px;
    margin-top: 2vw;
}

/* цифры: фиксированная ширина + выравнивание вправо */
.countdown-vert b {
    flex-grow: 1;
    font-size: 2.3rem;
    line-height: 1;
    width: 2ch;
    text-align: center;
    display: inline-block;
    /* width: 2ch; */
    /* text-align: center; */
    margin: 0 auto;
    animation: pulseNum 10s ease-in-out infinite;
    color: #555555;
}

/* подпись */
.countdown-vert span{
    font-family: "Caveat", cursive;
    font-size: 1.5rem;
    letter-spacing: .3px;
    color: #555555;
    margin: 0 auto;
}

/* контейнер */
.kids-timer{
    row-gap:.65rem;
    font-family:"Gloria Hallelujah",cursive;
    text-align:left;
    line-height:1;
}

/* цифры */
.kids-timer .num{
    color:#665781;             /* сиреневый как на примере */
    display:inline-block;
    min-width:3.6rem;          /* чтобы разряды держали колонку */
}

/* подписи */
.kids-timer .word{
    margin-left:.15rem;
    color:#665781;
    letter-spacing:.3px;
}

/* лёгкая «дрожь» – цифры чуть качаются (опционально) */
@keyframes wobble{
    0%,100%{transform:rotate(-1deg);}
    50%    {transform:rotate(1deg);}
}
.kids-timer .num{
    animation:wobble 5s ease-in-out infinite;
}



/* маленький fade-in для текста */
.prologue-lead,.prologue-text{opacity:0;animation:fade-in .6s forwards}

/* -------- ритмический bounce у лент (уже были scroll-анимации) -------- */
.ribbons{
    height: 8rem;
    animation:fade-in .8s .1s forwards
}


/* === шрифты, если ещё не подключали === */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap");

/* контейнер */
.announce{
    position:relative;
    margin-top: 6.2rem;
    padding: 2.25rem 1.5rem 3rem;
}

.announce__paper > * {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.mini-calendar {
    margin-left: 0;
    margin-right: 0;
}

/* «лист бумаги» */
.announce__paper {
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    padding: 2.7rem 0 1.7rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .05);
}

/* заголовок */
.announce__title{
    font: 700 2rem / 1.12 "Cormorant Garamond", serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .8px;
    margin-bottom: 2rem;
    color: #272b2d;
    text-shadow: 1px 0 0 #ffffff, 0 1px 0 white, -1px 0 0 white, 0 -1px 0 white;
}

/* PNG с детьми — чуть заходит на бумагу сверху */
.announce__img {
    position: absolute;
    top: -4.5rem;
    right: 2%;
    width: 5rem;
    /* transform: translateX(-50%) rotate(-3deg); */
    pointer-events: none;
}

.announce__img_left {
    position: absolute;
    top: -6rem;
    left: -1rem;
    width: 8.5rem;
    pointer-events: none;
}

.announce.info {
    margin-top: -2rem;
}

.info .announce__paper {
    padding: 3.1rem 0 2.4rem;
}

/*!* мобильный/узкий экран: уменьшаем всё пропорционально *!*/
/*@media(max-width:360px){*/
/*    .announce{max-width:15rem;}*/
/*    .announce__title{font-size:1.75rem;}*/
/*    .announce__img{width:6.5rem;top:-2.7rem;}*/
/*}*/


/* ---------- MINI-CALENDAR (grid) ---------- */
/* ---------- MINI-CALENDAR (grid) ---------- */
/* ---------- MINI-CALENDAR (grid) ---------- */
/* ---------- MINI-CALENDAR (grid) ---------- */
/* ---------- MINI-CALENDAR (grid) ---------- */

.mini-calendar {
    position: relative;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:auto auto; /* 1-я строка — дни, 2-я — числа */
    overflow: hidden;
    text-align: center;
    padding-bottom: 3vw;
}

.weekday {
    padding: 0.5rem 0;
    font-size: 0.875rem; /* 14 px */
    font-weight: 600;
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.weekday:last-child {
    border-right: none;
}

.weekday:first-child {
    border-left: 1px solid #ccc;
}

.mini-cal__cell {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 1rem;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff;
}

.mini-cal__cell:nth-of-type(5) {
    border-left: 1px solid #ccc;
}

.mini-cal__cell:nth-of-type(4) {
    border-right: none;
}

/* последняя в строке чисел */

.couple {
    z-index: 1;
    position: relative;
}

.hands img {
    width: 100%;
    z-index: 10;
    position: relative;
}

.hands.hands-2 img {
    width: 122%;
    z-index: 10;
    position: relative;
    left: -3rem;
}


/* ===== план дня ===== */
/* ===== план дня ===== */
/* ===== план дня ===== */
/* ===== план дня ===== */
/* ===== план дня ===== */
/* ===== план дня ===== */
/* ===== план дня ===== */
.plan {
    padding: 2.25rem 1.5rem 0rem;
}

.plan img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    padding: 1rem;
    padding-top: 4rem;
    padding-bottom: 2rem;
    background: white;
    /*border-radius: 1rem;*/
    box-shadow: 0 6px 14px rgba(0, 0, 0, .05);

}

.plan img:last-child {
    border-radius: 0 0 1rem 1rem;
}

.plan__title {
    font-family: "Caveat", cursive;
    font-size: 2.25rem;
    text-align: center;
    color: #506488;
    margin-bottom: 2.5rem;
}

.plan_animation {
    animation: anim-heart 1.6s infinite linear;
}

@keyframes anim-heart {
    0% {
        transform: scale(1, 1);
        animation-timing-function: 0;
    }
    50% {
        transform: scale(1.48, 1.48);
        animation-timing-function: 0;
    }
    100% {
        transform: scale(1, 1);
    }
}

/* карточка события */
.event {
    position: relative;
    margin-bottom: 3.5rem;
    max-width: 260px;
}

.event.right {
    margin-left: auto;
    text-align: right;
}

.event.left {
    text-align: left;
}

.event__time {
    display: block;
    font: 700 1.75rem/1.2 "Montserrat", sans-serif;
    color: #506488;
}

.event__text {
    font: 600 0.8125rem/1.4 "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #222;
    margin-top: .35rem;
}

/* маленькие иконки/сердца */
.event__icon,
.event__heart {
    position: absolute;
    top: -1.2rem;
    font-size: 1.2rem;
}

.event__icon svg {
    width: 1.1rem;
    height: auto;
    display: block;
}

.event.right .event__icon {
    right: -1.8rem;
}

.event.left .event__icon {
    left: -1.8rem;
}

.event__heart {
    color: #506488;
}

.event.right .event__heart {
    right: -1.4rem;
}

.event.left .event__heart {
    left: -1.4rem;
}

.dancers svg {
    width: 2.5rem;
}

.arrow.right {
    margin-left: 4.5rem;
}

.arrow.left {
    margin-right: 4.5rem;
}

.arrow.long {
    width: 200px;
    height: 60px;
    margin: 0 0 -1rem 0;
}

.arrow.curve {
    width: 260px;
    height: 110px;
    margin: -.5rem 0 -.8rem 0;
}

/* ============  PLACES SECTION  ============ */
/* ============  PLACES SECTION  ============ */
/* ============  PLACES SECTION  ============ */
/* ============  PLACES SECTION  ============ */
/* ============  PLACES SECTION  ============ */
/* ============  PLACES SECTION  ============ */
/* ---------- контейнер секции ---------- */
.places{
    display:flex;
    flex-direction:column;
    margin-top: -23vw;
}

/* ---------- карточка места ---------- */
.place{
    background:var(--bg);
    border-radius:16px;
    margin-bottom: 18vw;
}



/* фото-блок */
.place__photo{
    position:relative;
    width:100%;
    z-index: 5;
}
.place__photo img{
    width:100%;height:100%;
    object-fit:cover;
}

/* волнистая маска */
.wave{
    position:absolute;left:0;width:100%;height:40px;
    pointer-events:none;
}
.wave.top{top:-1px;}          /* лёгкое перекрытие */
.wave.bot{bottom:-1px;}

/* ---------- карточка-«листок» ---------- */
.place__card {
    position: relative;
    text-align: center;
    transform: rotate(-4.5deg) scale(0.8);
    margin: -6.25rem auto 0;
    width: 88%;
    z-index: 20;
}

.place__card img {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* заголовки и тексты */
.place__title{
    font:700 1.7rem/1 "Tagesschrift",cursive;
    color:var(--accent);
    top: 2rem;
    z-index: 30;
    position: relative;
}
.note__title {
    font: 100 1.3rem / 1.3 "Tagesschrift", cursive;
    z-index: 30;
    top: 1.8rem;
    position: relative;
    margin: 0.8rem 0;
    color: #555;
}

.note__addr {
    font: 1rem / 1.35 "Tagesschrift", cursive;
    color: #757571;
    z-index: 30;
    top: 1.8rem;
    position: relative;
    margin: 0.8rem 0;
}

/* кнопка */
.btn-map {
    position: relative;
    top: 2.5rem;
    padding: .8rem 1.6rem;
    font: .95rem / 1 "HQY", cursive;
    color: #fff;
    background: #4dadc7;
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

/* ------------------  TORN PAPER DECOR  ------------------ */
/* ------------------  TORN PAPER DECOR  ------------------ */
/* ------------------  TORN PAPER DECOR  ------------------ */
/* ------------------  TORN PAPER DECOR  ------------------ */
/* ------------------  TORN PAPER DECOR  ------------------ */
.torn{
    position:relative;
    overflow:hidden;           /* обрезаем всё лишнее */
    height:220px;              /* или auto + соотношение через aspect-ratio */
}

/* ------------- фото ------------- */
.torn__photo{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
}

/* ------------- рваные края ------------- */
.torn::before,
.torn::after{
    content:"";
    position:absolute;
    left:0;right:0;            /* тянем на всю ширину */
    height:180px;              /* = высота PNG (можно меньше — отрежется) */
    background:url("../img/torn-paper-edge.png") repeat-x top left;
    pointer-events:none;
    z-index:2;
}

/* верх */
.torn::before{top:-80px;}    /* поднимаем, чтобы в кадре остался ТОЛЬКО рваный пояс */

/* низ (разворачиваем) */
.torn::after{
    bottom:-80px;
    transform:scaleY(-1);
}


.torn-paper {
    position: relative; /* база для before/after */
    isolation: isolate; /* чтобы z-index не конфликтовал */
    overflow: visible; /* края могут выходить наружу */
}

/* верхний рваный край */
.torn-paper-top::before,
.torn-paper-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px; /* высота PNG; поправьте под свой файл */
    background-size: cover;
    background-repeat: repeat-x;
    pointer-events: none; /* не перехватывать клики */
    z-index: 2; /* над содержимым */
}

/* верх */
.torn-paper-top::before {
    top: -14px; /* наполовину накладывается на блок */
    background-image: url("../img/torn-paper-edge.png");
}

/* низ (тот же PNG, просто перевёрнут) */
.torn-paper-bottom::after {
    bottom: -14px;
    transform: rotate(180deg);
    background-image: url("../img/torn-paper-edge_bottom.png"); /* или torn-edge-bottom.png */
}

.spacer {
    background: #FFFFFF;
    height: 4vw;
}

/* ------------------  СЛУЖЕБНОЕ (если важно отступ) ------- */
/* чтобы соседние блоки не прижимались к «выступающим» краям */
.torn-paper + * {
    margin-top: 0;
}

* + .torn-paper {
    margin-top: 0;
}


/* ===== MINI-CALENDAR TWEAKS ===================================== */
.mini-calendar {
    padding: 1rem 1rem 1.4rem 1rem;
    /*           1-я    2-я   3-я   4-я   */
    grid-template-columns: 0.85fr 1.15fr 1.15fr 0.85fr;
}

/* шрифты в vw, чтобы масштабировались с экраном */
.mini-calendar .day-num {
    font-size: 7vw;
    line-height: 1;
}

.mini-calendar .day-month {
    font-size: 3.5vw;
}

.mini-calendar .weekday {
    font-size: 3vw;
}

/* ширина PNG-колец — почти вся площадь 2-й + 3-й ячеек */
.mini-calendar .mark-circle {
    width: 26vw;
    max-width: none;
}


.day-num {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 600;
}

.day-month {
    font-size: 0.875rem;
    text-transform: lowercase;
}

/* ---------- PNG-кольца, фиксированные в сетке ---------- */
.mark-circle {
    grid-row: 2;
    justify-self: center;
    align-self: center;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.mark-circle {
    position: absolute;
    top: -3vw;
    right: 19vw;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

.mark-circle-left {
    grid-row: 2;
    justify-self: center;
    align-self: center;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 2;
    width: 26vw;

    position: absolute;
    top: -3vw;
    left: 20vw;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

/* 10 vw ≈ 40 px → 2.5 rem  (точно 39 → 2.4375, округлил) */
.day-num {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 600;
}

/* 3.5 vw ≈ 14 px → 0.875 rem */
.day-month {
    font-size: 0.875rem;
    text-transform: lowercase;
}

/* Fallback drawn circle */
.marked::after {
    content: '';
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    border: 4px solid #ce4c2c;
    border-radius: 50%;
    transform: rotate(-6deg);
    opacity: .7;
    z-index: 0;
}

.marked {
    z-index: 1;
}

/* -------------------------------------------------- */
/* HERO (cover)                                       */
/* -------------------------------------------------- */
.hero {
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 55 vw ≈ 214 px → 13.375 rem */
.hero__illu {
    width: 13.375rem;
    max-width: 250px;
    margin: 0 auto;
    display: block;
}

/* 4 vw ≈ 16 px → 1rem */
.hero__names {
    margin-top: 1rem;
    font-size: 1.34375rem; /* 5.5 vw ≈ 21.45 px */
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent);
}

/* 5.2 vw ≈ 20.8 px → 1.3 rem */
.hero__date {
    font-size: 1.3rem;
    color: var(--ink);
    /* 1.5 vw ≈ 6 px → 0.375 rem */
    margin-top: 0.375rem;
}

/* -------------------------------------------------- */
/* PHOTO BLOCK                                        */
/* -------------------------------------------------- */
.photo {
    position: relative;
}

/* 82 vw ≈ 320 px → 20rem */
.photo__img {
    width: 20rem;
    max-width: 380px;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    aspect-ratio: 3/4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    transform: rotate(-2deg);
}

/* Overlap helper */
/* -6 vw ≈ -24 px → -1.5 rem */
.overlap {
    margin-top: -1.5rem;
}

/* -------------------------------------------------- */
/* GREETING BLOCK                                     */
/* -------------------------------------------------- */

a.greeting, .gifts, .schedule {
    display: block;
}

.greeting p {
    font-size: 1.125rem; /* 4.5 vw ≈ 18 px */
    background: var(--accent-light);
    /* 5 vw (20px) 6 vw (24px) */
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
}

/* -------------------------------------------------- */
/* SCHEDULE LIST                                      */
/* -------------------------------------------------- */
.schedule ul {
    list-style: none;
}

.schedule li {
    font-size: 1.125rem;
    margin-bottom: 0.875rem; /* 3.5 vw ≈ 14 px */
}

.schedule strong {
    color: var(--accent);
}

/* -------------------------------------------------- */
/* GIFTS TEXT                                         */
/* -------------------------------------------------- */
.gifts p {
    font-size: 1.125rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
}

/* -------------------------------------------------- */
/* GUEST CHAT BUTTON                                  */
/* -------------------------------------------------- */
.chat .btn {
    display: inline-block;
    /* 4 vw 7 vw ≈ 16 px 28 px */
    padding: 1rem 1.75rem;
    margin-top: 1rem;
    font-size: 1.125rem;
    background: var(--accent);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* -------------------------------------------------- */
/* FOOTER                                             */
/* FOOTER                                             */
/* FOOTER                                             */
/* FOOTER                                             */
/* FOOTER                                             */
/* FOOTER                                             */
/* FOOTER                                             */
/* -------------------------------------------------- */
.footer {
    text-align: center;
    padding-bottom: calc(var(--gap) * 2); /* 2.25rem */
    background: var(--accent);
    color: #fff;
    margin-top: -1rem; /* -4 vw ≈ -16px */
}

.footer p {
    font-size: 1.1875rem; /* 4.8 vw ≈ 18.8 px */
}


/* =====  блок-приглашение  ===== */
.invite{
    max-width:520px;
    margin:0 auto;
    text-align:center;
    padding:0 1.25rem;
}

.invite__title{
    font:600 2rem/1.15 "Cormorant Garamond",serif;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#2f3a3c;            /* тёплый тёмно-серый; при желании замените */
    margin-bottom:1.8rem;
}

.invite__lead, .paragraph {
    font: 400 1.2rem/1.45 "Montserrat",sans-serif;
    margin-bottom:1.7rem;
}

.invite__text,
.invite__extra{
    font:1.2rem/1.55 "Montserrat",sans-serif;
    margin-bottom:0;
    /*color: #e76a5c;*/
    margin-top: 1rem;
}

/* акцентное предложение – чуть контрастнее */
.invite__extra{
    font-weight:600;
    color:#225c7a;            /* тот же синий, что и в других элементах сайта */
}



/* 16 px → макетный 1 rem */

/* < 420 px  → 15 px */
@media (max-width: 420px) {
    html {
        font-size: 93.75%;
    }

    /* 15 / 16 */
}


/* < 330 px  → 13 px  (читаемо даже на iPhone SE) */
@media (max-width: 360px) {
    html {
        font-size: 76.25%;
    }

    /* 13 / 16 */
}

@media (max-width: 290px) {
    html {
        font-size: 65.25%;
    }

    /* 13 / 16 */
}

.divider img {
    width: 100%;
    margin: 2rem 0;
}

.divider.divider-absolute {
    margin: 0rem 0;
    margin-top: -3.6rem;
}

.timer h4 {
    font-family: "Mavka", "Montserrat", "Helvetica Neue", Arial, "sans-serif";
    margin-bottom: 4rem;
    font-size: 2rem;
    text-align: center;
    color: #555555;
}

.waiting h4 {
    margin-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
}

.waiting p {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.info li {
    width: fit-content;
}
.info ul {
    font-family: "Montserrat", sans-serif;
    width: fit-content;
    margin: 0 auto;
    font-size: 1.2rem;
}

/* ---------- базовая сетка ---------- */
.qr-section{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    padding:2rem 1rem;
    display: none;
}

/* на экранах ≥450 px растягиваем на весь экран */
@media(min-width:455px){
    .qr-section{
        height:100vh;
        display:flex;
    }

    .viewport, #page {
        display: none;
    }
}

.qr-title{
    font:600 1.6rem/1.25 "Montserrat",sans-serif;
    text-align:center;
    letter-spacing:.6px;
    text-transform:uppercase;
}

/* контейнер QR, размер на мобильных поменьше */
#qr-box canvas, #qr-box img{   /* QRCode.js выводит либо canvas, либо img */
    width:260px;height:260px;     /* десктоп */
}
@media(max-width:450px){
    #qr-box canvas, #qr-box img{
        width:200px;height:200px;
    }
}

/* =================== CSS =================== */

/* прелоадер-оверлей */
#preloader{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:#fff; z-index:9999;
    transition:opacity .5s ease, visibility .5s ease;
}
#preloader.hide{opacity:0; visibility:hidden;}

/* спиннер */
.spinner{
    width:70px; height:70px; stroke:#d95d5d; fill:none;
    stroke-width:5; stroke-linecap:round;
    animation:spin 1.2s linear infinite;
}
@keyframes spin{100%{transform:rotate(360deg)}}

/* базовые размеры и анимация */
.spinner{width:70px;height:70px}

/* фоневая «дорожка» */
.track{
    fill:none;
    stroke:#f1f1f1;
    stroke-width:5;
}

/* активная дуга c зазором */
.indicator{
    fill:none;
    stroke:#d95d5d;
    stroke-width:5;
    stroke-linecap:round;

    /*  circumference ≈ 138 – отдаём 100px под дугу, 38px под «белый кусочек»  */
    stroke-dasharray:100 38;
    stroke-dashoffset:0;
}

/* пока body .is-loading → контент скрыт */
body.is-loading #page{opacity:0; pointer-events:none;}
#page.fade-in{transition:opacity .6s ease .1s;}
body:not(.is-loading) #page{opacity:1; pointer-events:auto;}


img.dress {
    width: 91%;
    margin: 0 auto;
    border: #ccb0ad solid 7px;
    padding: 0 0.7rem 0.7rem 0.7rem;
    border-radius: 20px;
}