/* ============ база ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --cream: #f5efe3;
    --cream2: #ede5d4;
    --brown: #3a2b18;
    --brown2: #5a4630;
    --taupe: #8a7d68;
    --light: #f7f2e8;
}

html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--brown);
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.6;
    text-align: center;
}

.script { font-family: 'Marck Script', 'Segoe Script', cursive; font-weight: 400; }

section { padding: 70px 22px; }
section > * { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ============ фото-блоки с «рваным» краем ============ */
.photo {
    position: relative;
    background-color: #33241a;
    background-image: linear-gradient(160deg, #40301e, #6b5138 55%, #2a1d10);
    background-size: cover;
    background-position: center;
    color: var(--light);
    padding: 90px 22px;
}
.photo::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(rgba(25,15,8,.45), rgba(25,15,8,.25) 45%, rgba(25,15,8,.55));
}
.photo > * { position: relative; z-index: 1; }

.torn-b {
    clip-path: polygon(0 0, 100% 0, 100% 96.5%, 97% 98%, 93% 96.8%, 89% 98.4%, 85% 97%, 81% 98.6%, 77% 96.9%, 73% 98.2%, 69% 97.1%, 65% 98.5%, 61% 96.8%, 57% 98.3%, 53% 97%, 49% 98.6%, 45% 96.9%, 41% 98.2%, 37% 97.1%, 33% 98.5%, 29% 96.8%, 25% 98.3%, 21% 97%, 17% 98.6%, 13% 96.9%, 9% 98.2%, 5% 97.1%, 2% 98.4%, 0 96.8%);
}
.torn-tb {
    clip-path: polygon(
        0 1.8%, 3% 0.6%, 7% 2%, 11% 0.8%, 15% 2.2%, 19% 0.7%, 23% 1.9%, 27% 0.5%, 31% 2.1%, 35% 0.9%, 39% 1.8%, 43% 0.6%, 47% 2.2%, 51% 0.8%, 55% 2%, 59% 0.5%, 63% 1.9%, 67% 0.7%, 71% 2.1%, 75% 0.6%, 79% 2%, 83% 0.8%, 87% 1.8%, 91% 0.5%, 95% 2.1%, 100% 1%,
        100% 98.2%, 97% 99.4%, 93% 98%, 89% 99.2%, 85% 97.8%, 81% 99.3%, 77% 98.1%, 73% 99.5%, 69% 97.9%, 65% 99.2%, 61% 98%, 57% 99.4%, 53% 97.8%, 49% 99.3%, 45% 98.1%, 41% 99.5%, 37% 97.9%, 33% 99.2%, 29% 98%, 25% 99.4%, 21% 97.8%, 17% 99.3%, 13% 98.1%, 9% 99.5%, 5% 97.9%, 2% 99.2%, 0 98%
    );
}

/* ============ 1. обложка ============ */
.hero {
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 22px 110px;
}
.hero-names { font-size: clamp(44px, 12vw, 84px); line-height: 1.25; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero-names span { display: block; }
.hero-names .amp { font-size: .55em; margin: 6px 0; opacity: .9; }
.hero-sub {
    margin-top: 26px;
    text-transform: uppercase;
    letter-spacing: .45em;
    font-size: 15px;
    text-indent: .45em;
}

/* ============ 2. приглашение ============ */
.invite h1 { font-size: clamp(34px, 8vw, 52px); color: var(--brown2); line-height: 1.3; }
.invite-text { margin: 28px auto 0; max-width: 420px; font-style: italic; font-size: 21px; }
.invite-date { margin-top: 38px; font-size: clamp(30px, 7vw, 42px); color: var(--brown); }
.invite-time { margin-top: 10px; font-size: clamp(24px, 6vw, 32px); color: var(--brown); }

/* ============ 3. календарь ============ */
.cal-inner { max-width: 420px; margin: 0 auto; }
.cal-month { font-size: clamp(38px, 9vw, 56px); margin-bottom: 18px; }
.cal-table { width: 100%; border-collapse: collapse; font-style: italic; }
.cal-table th {
    font-weight: 500; font-size: 14px; letter-spacing: .2em; text-transform: lowercase;
    padding: 8px 2px 14px; opacity: .85; font-style: normal;
}
.cal-table th + th, .cal-table td + td { border-left: 1px solid rgba(247,242,232,.25); }
.cal-table tr:first-child th { border-bottom: 1px solid rgba(247,242,232,.35); }
.cal-table td { padding: 7px 2px; font-size: 20px; }
.cal-table .wed span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f2e8' stroke-width='1.6'%3E%3Cpath d='M12 21s-7-4.6-9.5-8.5C.6 9 2.4 5.5 6 5.5c2 0 3.5 1 4.5 2.6 1-1.6 2.5-2.6 4.5-2.6 3.6 0 5.4 3.5 3.5 7C19 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============ 4. программа ============ */
.program .heart { position: relative; z-index: 1; margin-bottom: -8px; }
.timeline { position: relative; max-width: 460px; margin: 0 auto; }
.timeline .tline { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-item {
    position: relative; z-index: 1;
    width: 50%; min-height: 128px;
    display: flex; flex-direction: column; justify-content: center;
}
.tl-item:nth-of-type(odd)  { margin-left: 50%; text-align: left;  padding-left: 18px; padding-right: 6px; }
.tl-item:nth-of-type(even) { margin-right: 50%; text-align: right; padding-right: 18px; padding-left: 6px; }
.tl-time { font-size: 34px; color: var(--brown); line-height: 1.2; }
.tl-text {
    text-transform: uppercase; letter-spacing: .2em;
    font-size: 12px; margin-top: 8px; color: var(--brown2); line-height: 1.7;
}

/* ============ 5. таймер ============ */
.cd-title { text-transform: uppercase; letter-spacing: .35em; text-indent: .35em; font-size: 15px; }
.cd-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; max-width: 440px; margin: 26px auto 0;
}
.cd-num { font-size: clamp(36px, 10vw, 60px); line-height: 1.1; }
.cd-lbl { font-style: italic; font-size: 15px; opacity: .85; margin-top: 4px; }

/* ============ 6. место ============ */
.venue h2 { font-size: clamp(34px, 8vw, 48px); color: var(--brown2); }
.venue-label { margin-top: 14px; font-style: italic; color: var(--taupe); font-size: 17px; }
.venue-addr { margin-top: 20px; font-size: 24px; line-height: 1.8; }
.venue-hall { font-style: italic; }
.venue-img {
    display: block; margin: 34px auto 0; max-width: 360px; width: 100%;
    border-radius: 6px; box-shadow: 0 18px 45px rgba(58,43,24,.25);
}
.venue .btn { margin-top: 28px; }
.owners { margin-top: 46px; font-size: clamp(26px, 6vw, 34px); color: var(--brown2); line-height: 1.5; }

/* ============ 7. анкета / 8. пожелания ============ */
.rsvp, .wishes { background: var(--cream2); }
.wishes { background: var(--cream); }
.rsvp h2, .wishes h2 { font-size: clamp(32px, 8vw, 46px); color: var(--brown2); margin-bottom: 24px; }
.wishes-hint { margin: -12px auto 22px; font-style: italic; color: var(--taupe); }

form { max-width: 400px; margin: 0 auto; text-align: left; }
.fld { display: block; margin-bottom: 22px; }
.fld > span { display: block; margin-bottom: 8px; font-style: italic; font-size: 18px; }
input[type="text"], textarea {
    width: 100%; padding: 13px 22px;
    border: 1.5px solid var(--brown); border-radius: 40px;
    background: transparent; color: var(--brown);
    font: italic 18px 'Cormorant Garamond', serif;
    outline: none;
}
textarea { border-radius: 22px; resize: vertical; }
input[type="text"]::placeholder, textarea::placeholder { color: #a2937d; }
input[type="text"]:focus, textarea:focus { border-color: var(--taupe); box-shadow: 0 0 0 3px rgba(138,125,104,.15); }

.radio { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; font-style: italic; font-size: 19px; }
.radio input { accent-color: var(--brown2); width: 17px; height: 17px; cursor: pointer; }

.btn {
    display: inline-block; margin-top: 6px;
    padding: 13px 46px; border: none; border-radius: 40px;
    background: var(--taupe); color: var(--light);
    font: 500 17px 'Cormorant Garamond', serif;
    letter-spacing: .15em; text-indent: .15em; text-transform: lowercase;
    cursor: pointer; text-decoration: none;
    transition: background .25s, transform .2s;
}
.btn:hover { background: var(--brown2); transform: translateY(-1px); }

.ok {
    max-width: 400px; margin: 0 auto 20px; padding: 12px 18px;
    border: 1px solid var(--taupe); border-radius: 14px;
    font-style: italic; color: var(--brown2);
}

.wish-list { max-width: 460px; margin: 34px auto 0; text-align: left; }
.wish { padding: 16px 20px; margin-bottom: 14px; background: var(--cream2); border-radius: 18px; }
.wish-text { font-style: italic; font-size: 19px; }
.wish-name { text-align: right; font-size: 21px; color: var(--brown2); margin-top: 4px; }

/* ============ подвал ============ */
.footer { padding: 30px 16px 38px; font-size: 22px; color: var(--taupe); }

/* ============ анимация появления ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}