:root {
    --wine: #6f1724;
    --wine-deep: #4f101a;
    --wine-soft: #8d3c47;

    --ink: #261d1c;
    --ink-soft: #6f625e;

    --cream: #f3eee5;
    --cream-2: #e9e0d4;
    --paper: #f8f4ed;

    --rose: #b88986;
    --sand: #c7ad8f;
    --charcoal: #393432;

    --line: rgba(38, 29, 28, 0.18);
    --line-light: rgba(255, 255, 255, 0.24);

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --shadow:
        0 28px 70px rgba(67, 25, 27, 0.18);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    background: var(--paper);
}


body {
    margin: 0;

    min-width: 320px;

    background: var(--paper);

    color: var(--ink);

    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.55;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body:not(.invitation-opened) {
    overflow: hidden;
}


body:not(.invitation-opened) .site {
    visibility: hidden;

    opacity: 0;

    pointer-events: none;
}


body.invitation-opened .site {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


button,
input,
textarea {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button {
    border: 0;
}


a {
    color: inherit;

    text-decoration: none;
}


img,
svg,
video {
    display: block;

    max-width: 100%;
}


[hidden] {
    display: none !important;
}


::selection {
    background: var(--wine);

    color: var(--paper);
}



/* =========================================================
   INTRO
========================================================= */

.intro {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: grid;

    place-items: center;

    min-height: 100dvh;

    padding:
        max(24px, env(safe-area-inset-top))
        20px
        max(24px, env(safe-area-inset-bottom));

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(150, 69, 76, 0.45),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #4a0e18 0%,
            #6f1724 46%,
            #4a0e18 100%
        );

    color: #fff9f1;

    transition:
        opacity 0.7s var(--ease),
        visibility 0.7s var(--ease),
        transform 0.7s var(--ease);
}


.intro::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.33;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0 1px,
            transparent 1px 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.014) 0 1px,
            transparent 1px 5px
        );

    mix-blend-mode: soft-light;
}


.intro.is-hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: scale(1.015);
}


.intro__ambient {
    position: absolute;

    width: 42vw;

    aspect-ratio: 1;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    animation:
        ambientDrift
        10s
        ease-in-out
        infinite
        alternate;
}


.intro__ambient--one {
    top: -20vw;

    left: -15vw;
}


.intro__ambient--two {
    right: -18vw;

    bottom: -22vw;

    animation-delay: -4s;
}


.intro__content {
    position: relative;

    z-index: 2;

    display: flex;

    width: min(100%, 520px);

    flex-direction: column;

    align-items: center;
}


.intro__eyebrow,
.intro__hint {
    margin: 0;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


.intro__eyebrow {
    margin-bottom: 20px;

    opacity: 0.75;
}


.intro__hint {
    margin-top: 14px;

    opacity: 0.46;

    letter-spacing: 0.16em;
}



/* =========================================================
   BOOK
========================================================= */

.book-scene {
    width: min(72vw, 340px);

    aspect-ratio: 0.72;

    perspective: 1800px;

    filter:
        drop-shadow(
            0
            34px
            42px
            rgba(20, 0, 4, 0.28)
        );
}


.book {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transform:
        rotateX(2deg)
        rotateY(-4deg);

    transition:
        transform
        1.1s
        var(--ease);
}


.intro.is-opening .book {
    transform:
        rotateX(0deg)
        rotateY(2deg)
        scale(1.025);
}


.book__page,
.book__cover {
    position: absolute;

    inset: 0;

    border-radius:
        4px
        10px
        10px
        4px;
}


.book__page {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 36px;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.42),
            transparent 30%
        ),
        #efe6d9;

    color: var(--wine-deep);

    box-shadow:
        inset
        16px
        0
        34px
        rgba(70, 35, 20, 0.08);

    overflow: hidden;
}


.book__page::before,
.book__page::after {
    content: "";

    position: absolute;

    width: 70%;

    aspect-ratio: 1;

    border:
        1px solid
        rgba(111, 23, 36, 0.17);

    border-radius: 50%;
}


.book__page::before {
    top: -38%;

    right: -35%;
}


.book__page::after {
    bottom: -40%;

    left: -38%;
}


.book__page-kicker,
.book__page-date {
    position: relative;

    z-index: 2;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.book__page-sign {
    position: relative;

    z-index: 2;

    margin: 30px 0;

    font-family: var(--serif);

    font-size:
        clamp(
            50px,
            12vw,
            78px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.9;
}


.book__cover {
    z-index: 2;

    transform-origin: 0 50%;

    transform-style: preserve-3d;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #7c2330,
            #59101b 70%
        );

    color: #fff9f1;

    box-shadow:
        inset
        1px
        0
        rgba(255, 255, 255, 0.14),

        inset
        -16px
        0
        30px
        rgba(48, 2, 10, 0.18),

        12px
        18px
        35px
        rgba(32, 0, 7, 0.28);

    transition:
        transform
        1.25s
        cubic-bezier(
            0.65,
            0,
            0.18,
            1
        );

    backface-visibility: visible;
}


.book__cover::after {
    content: "";

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: inherit;

    pointer-events: none;
}


.intro.is-opening .book__cover {
    transform:
        rotateY(-164deg);
}


.book__cover-inner {
    position: absolute;

    inset: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(255, 249, 241, 0.44);

    text-align: center;

    backface-visibility: hidden;
}


.book__tiny,
.book__date {
    font-size: 9px;
    font-weight: 500;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.book__monogram {
    position: absolute;

    top: 38px;

    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border:
        1px solid
        rgba(255, 249, 241, 0.45);

    border-radius: 50%;

    font-family: var(--serif);

    font-size: 17px;

    font-style: italic;
}


.book__names {
    margin: 26px 0;

    font-family: var(--serif);

    font-size:
        clamp(
            44px,
            11vw,
            64px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.04em;
}



/* =========================================================
   OPEN BUTTON
========================================================= */

.open-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    margin-top: 26px;

    padding:
        15px
        20px
        15px
        24px;

    border:
        1px solid
        rgba(255, 249, 241, 0.46);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.04);

    color: #fff9f1;

    cursor: pointer;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.open-button:hover {
    background: #fff9f1;

    color: var(--wine-deep);

    transform:
        translateY(-2px);
}


.open-button:focus-visible {
    outline:
        2px solid #fff9f1;

    outline-offset: 5px;
}


.open-button:disabled {
    cursor: wait;

    opacity: 0.7;
}


.open-button__arrow {
    font-size: 16px;

    line-height: 1;
}



/* =========================================================
   GENERAL
========================================================= */

.site {
    position: relative;

    min-height: 100vh;

    background: var(--paper);

    transition:
        opacity
        0.7s
        var(--ease);
}


.paper-noise {
    position: fixed;

    inset: 0;

    z-index: 20;

    pointer-events: none;

    opacity: 0.15;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(52, 35, 30, 0.022)
            0 1px,
            transparent 1px 4px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(52, 35, 30, 0.018)
            0 1px,
            transparent 1px 5px
        );

    mix-blend-mode: multiply;
}


.section {
    position: relative;

    padding: 112px 0;
}


.section--soft {
    background: var(--cream);
}


.section--wine {
    background:
        radial-gradient(
            circle at 84% 16%,
            rgba(255, 255, 255, 0.05),
            transparent 26%
        ),
        var(--wine);

    color: #fff9f1;
}


.container {
    width:
        min(
            1160px,
            calc(100% - 48px)
        );

    margin: 0 auto;
}


.container--narrow {
    width:
        min(
            820px,
            calc(100% - 48px)
        );
}


.container--form {
    width:
        min(
            760px,
            calc(100% - 48px)
        );
}


.section-number {
    margin-bottom: 28px;

    color: var(--wine);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.18em;
}


.section-number--light {
    color:
        rgba(
            255,
            249,
            241,
            0.72
        );
}


.section-kicker {
    margin:
        0
        0
        18px;

    color: var(--wine);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.section-kicker--light {
    color:
        rgba(
            255,
            249,
            241,
            0.76
        );
}


.section-title {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            48px,
            7vw,
            92px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.045em;
}


.section-title--light {
    color: #fff9f1;
}



/* =========================================================
   REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity
        0.85s
        var(--ease),

        transform
        0.85s
        var(--ease);
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}



/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    z-index: 1;

    display: flex;

    min-height: 100svh;

    flex-direction: column;

    justify-content: space-between;

    padding:
        max(
            34px,
            env(safe-area-inset-top)
        )
        0
        max(
            32px,
            env(safe-area-inset-bottom)
        );

    overflow: hidden;

    background: #f2f1ef;

    isolation: isolate;
}



/* =========================================================
   HERO VIDEO
========================================================= */

.hero-video {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background: #f2f1ef;
}


.hero-video__media {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center center;

    transform:
        translate(-50%, -50%)
        scale(1.015);

    opacity: 0;

    filter:
        brightness(1.04)
        contrast(0.94)
        saturate(0.78);

    transition:
        opacity 1.3s ease;

    will-change: opacity;
}


.hero-video__media.is-ready {
    opacity: 1;
}


/*
   Светлый слой.

   Он делает текст читаемым,
   но не скрывает фактуру ткани.
*/

.hero-video__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(250, 250, 248, 0.38) 0%,
            rgba(250, 250, 248, 0.12) 25%,
            rgba(250, 250, 248, 0.12) 60%,
            rgba(250, 250, 248, 0.42) 100%
        );

    pointer-events: none;
}


/*
   Едва заметная виньетка
   помогает композиции.
*/

.hero-video__vignette {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(244, 242, 239, 0.14) 72%,
            rgba(226, 222, 218, 0.28) 100%
        );

    pointer-events: none;
}



/* =========================================================
   HERO DECOR
========================================================= */

.hero::before,
.hero::after {
    content: "";

    position: absolute;

    z-index: 1;

    border:
        1px solid
        rgba(111, 23, 36, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


.hero::before {
    top: 12%;

    left: 50%;

    width:
        min(
            70vw,
            720px
        );

    aspect-ratio: 1;

    transform:
        translateX(-50%);
}


.hero::after {
    top: 20%;

    left: 50%;

    width:
        min(
            54vw,
            560px
        );

    aspect-ratio: 1;

    transform:
        translateX(-50%);
}


.hero__topline {
    position: relative;

    z-index: 5;

    display: flex;

    width:
        min(
            1160px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    justify-content: space-between;

    gap: 16px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(38, 29, 28, 0.23);

    color: var(--ink);

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.hero__center {
    position: relative;

    z-index: 5;

    width:
        min(
            980px,
            calc(100% - 40px)
        );

    margin: auto;

    padding: 70px 0;

    text-align: center;
}


.hero__kicker {
    color: var(--wine);
}


.hero__title {
    margin:
        18px
        0
        28px;

    color: var(--ink);

    font-family: var(--serif);

    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.06em;
}


.hero__name {
    display: block;

    font-size:
        clamp(
            78px,
            15vw,
            180px
        );

    text-shadow:
        0 1px 16px
        rgba(255, 255, 255, 0.4);
}


.hero__ampersand {
    display: block;

    margin:
        -0.05em
        0
        -0.02em;

    color: var(--wine);

    font-size:
        clamp(
            52px,
            9vw,
            110px
        );

    font-style: italic;
}


.hero__subtitle {
    max-width: 560px;

    margin: 0 auto;

    color: #554b48;

    font-family: var(--serif);

    font-size:
        clamp(
            20px,
            2.3vw,
            28px
        );

    line-height: 1.25;

    text-shadow:
        0 1px 12px
        rgba(255, 255, 255, 0.6);
}


.hero__ornament {
    position: absolute;

    z-index: 4;

    color:
        rgba(
            111,
            23,
            36,
            0.5
        );

    font-family: var(--serif);

    font-size: 18px;

    animation:
        slowSpin
        18s
        linear
        infinite;
}


.hero__ornament--left {
    top: 28%;

    left: 8%;
}


.hero__ornament--right {
    right: 9%;

    bottom: 24%;

    animation-direction: reverse;
}


.scroll-link {
    position: relative;

    z-index: 5;

    display: flex;

    width:
        min(
            1160px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    align-items: center;

    justify-content: space-between;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(38, 29, 28, 0.23);

    color: #514844;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}



/* =========================================================
   INVITATION
========================================================= */

.invitation {
    background: var(--cream);
}


.invitation__text {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 32px;

    margin-top: 54px;

    padding-top: 30px;

    border-top:
        1px solid
        var(--line);

    color: var(--ink-soft);

    font-size: 14px;
}


.invitation__text p {
    margin: 0;
}


.date-card {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap: 24px;

    align-items: end;

    margin-top: 70px;

    padding:
        28px
        0
        0;

    border-top:
        1px solid
        var(--line);
}


.date-card__day {
    font-family: var(--serif);

    font-size:
        clamp(
            100px,
            20vw,
            180px
        );

    font-weight: 400;

    line-height: 0.64;

    letter-spacing: -0.06em;
}


.date-card__meta {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding-bottom: 4px;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}



/* =========================================================
   COUNTDOWN
========================================================= */

.countdown-section {
    overflow: hidden;
}


.countdown-section::after {
    content: "ИО";

    position: absolute;

    right: -0.08em;

    bottom: -0.25em;

    color:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-family: var(--serif);

    font-size:
        min(
            46vw,
            520px
        );

    font-style: italic;

    line-height: 1;

    pointer-events: none;
}


.countdown {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    gap: 24px;

    align-items: start;

    margin-top: 72px;

    padding-top: 36px;

    border-top:
        1px solid
        var(--line-light);
}


.countdown__item {
    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 8px;
}


.countdown__item strong {
    font-family: var(--serif);

    font-size:
        clamp(
            62px,
            10vw,
            118px
        );

    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.055em;
}


.countdown__item span {
    color:
        rgba(
            255,
            249,
            241,
            0.65
        );

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.countdown__divider {
    padding-top: 6px;

    color:
        rgba(
            255,
            249,
            241,
            0.28
        );

    font-family: var(--serif);

    font-size:
        clamp(
            38px,
            6vw,
            70px
        );
}



/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    margin-top: 72px;

    border-top:
        1px solid
        var(--line);
}


.timeline__item {
    display: grid;

    grid-template-columns:
        120px
        1px
        minmax(0, 1fr);

    gap: 34px;

    min-height: 180px;

    padding: 36px 0;

    border-bottom:
        1px solid
        var(--line);
}


.timeline__time {
    color: var(--wine);

    font-family: var(--serif);

    font-size: 42px;

    font-style: italic;

    line-height: 1;
}


.timeline__line {
    height: 100%;

    background: var(--line);
}


.timeline__content {
    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr);

    column-gap: 22px;

    align-content: start;
}


.timeline__icon {
    grid-row: span 2;

    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border:
        1px solid
        var(--line);

    border-radius: 50%;

    color: var(--wine);

    font-family: var(--serif);

    font-size: 22px;
}


.timeline__content h3 {
    margin:
        0
        0
        12px;

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 500;

    line-height: 1;
}


.timeline__content p {
    max-width: 560px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 13px;
}



/* =========================================================
   DRESS CODE
========================================================= */

.dress-code__grid,
.location__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);

    gap: 80px;

    align-items: end;
}


.dress-code__copy {
    padding-bottom: 8px;

    color: var(--ink-soft);

    font-family: var(--serif);

    font-size:
        clamp(
            22px,
            2.5vw,
            31px
        );

    line-height: 1.2;
}


.dress-code__copy p {
    margin: 0;
}


.palette {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 70px;
}


.palette__color {
    aspect-ratio: 1;

    border-radius: 50%;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(38, 29, 28, 0.08);

    transition:
        transform
        0.35s
        var(--ease);
}


.palette__color:hover {
    transform:
        translateY(-8px)
        scale(1.02);
}


.palette__color--1 {
    background: #efe9df;
}


.palette__color--2 {
    background: #c7ad8f;
}


.palette__color--3 {
    background: #b88986;
}


.palette__color--4 {
    background: #6f1724;
}


.palette__color--5 {
    background: #393432;
}



/* =========================================================
   DETAILS
========================================================= */

.details__list {
    margin-top: 72px;

    border-top:
        1px solid
        var(--line);
}


.detail-card {
    display: grid;

    grid-template-columns:
        72px
        220px
        minmax(0, 1fr);

    gap: 28px;

    padding: 34px 0;

    border-bottom:
        1px solid
        var(--line);
}


.detail-card__number {
    color: var(--wine);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.14em;
}


.detail-card h3 {
    margin: 0;

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 500;

    line-height: 1;
}


.detail-card p {
    max-width: 560px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 13px;
}



/* =========================================================
   LOCATION
========================================================= */

.location-card {
    padding: 34px;

    border:
        1px solid
        var(--line-light);

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );
}


.location-card__label {
    margin:
        0
        0
        18px;

    color:
        rgba(
            255,
            249,
            241,
            0.62
        );

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.location-card h3 {
    margin:
        0
        0
        18px;

    font-family: var(--serif);

    font-size:
        clamp(
            44px,
            5vw,
            64px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.95;
}


.location-card__address {
    margin:
        0
        0
        34px;

    color:
        rgba(
            255,
            249,
            241,
            0.72
        );

    font-size: 13px;
}



/* =========================================================
   BUTTON
========================================================= */

.button {
    display: inline-flex;

    min-height: 52px;

    align-items: center;

    justify-content: center;

    gap: 28px;

    padding:
        14px
        22px;

    border:
        1px solid
        transparent;

    border-radius: 999px;

    cursor: pointer;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition:
        transform
        0.3s
        var(--ease),

        background
        0.3s
        ease,

        color
        0.3s
        ease,

        border-color
        0.3s
        ease;
}


.button:hover {
    transform:
        translateY(-2px);
}


.button:focus-visible {
    outline:
        2px solid
        currentColor;

    outline-offset: 4px;
}


.button--light {
    border-color:
        rgba(
            255,
            249,
            241,
            0.52
        );

    color: #fff9f1;
}


.button--light:hover {
    background: #fff9f1;

    color: var(--wine-deep);
}


.button--dark {
    background: var(--wine);

    color: #fff9f1;
}


.button--dark:hover {
    background: var(--wine-deep);
}



/* =========================================================
   RSVP
========================================================= */

.rsvp {
    background: var(--paper);
}


.rsvp__intro {
    max-width: 560px;

    margin:
        34px
        0
        0;

    color: var(--ink-soft);

    font-size: 13px;
}


.rsvp-form {
    display: grid;

    gap: 34px;

    margin-top: 58px;

    padding-top: 34px;

    border-top:
        1px solid
        var(--line);
}


.form-field {
    display: grid;

    gap: 11px;

    margin: 0;

    padding: 0;

    border: 0;
}


.form-field > label,
.form-field legend {
    padding: 0;

    color: var(--ink);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.form-field input[type="text"],
.form-field input[type="number"],
.form-field textarea {
    width: 100%;

    border: 0;

    border-bottom:
        1px solid
        var(--line);

    border-radius: 0;

    outline: 0;

    background: transparent;

    color: var(--ink);

    font-family: var(--serif);

    font-size: 25px;

    font-weight: 400;

    transition:
        border-color
        0.25s
        ease;
}


.form-field input[type="text"],
.form-field input[type="number"] {
    min-height: 56px;

    padding: 10px 0;
}


.form-field textarea {
    min-height: 138px;

    padding: 14px 0;

    resize: vertical;

    line-height: 1.25;
}


.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--wine);
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color:
        rgba(
            38,
            29,
            28,
            0.34
        );
}


.form-note {
    color: var(--ink-soft);

    font-size: 11px;
}



/* =========================================================
   CHOICES
========================================================= */

.choice-grid {
    display: grid;

    gap: 10px;

    margin-top: 4px;
}


.choice-grid--attendance {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


.choice-grid--drinks {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.choice-card {
    position: relative;

    display: grid;

    min-height: 74px;

    place-items: center;

    padding: 14px;

    border:
        1px solid
        var(--line);

    cursor: pointer;

    text-align: center;

    transition:
        border-color
        0.25s
        ease,

        background
        0.25s
        ease,

        color
        0.25s
        ease,

        transform
        0.25s
        var(--ease);
}


.choice-card:hover {
    border-color:
        rgba(
            111,
            23,
            36,
            0.48
        );

    transform:
        translateY(-2px);
}


.choice-card input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.choice-card span {
    font-size: 11px;

    line-height: 1.35;
}


.choice-card:has(input:checked) {
    border-color: var(--wine);

    background: var(--wine);

    color: #fff9f1;
}


.choice-card:has(input:focus-visible) {
    outline:
        2px solid
        var(--wine);

    outline-offset: 3px;
}


.choice-card--small {
    min-height: 58px;
}



/* =========================================================
   ERRORS
========================================================= */

.form-error {
    min-height: 16px;

    color: #a32938;

    font-size: 10px;
}


.form-field.is-invalid input[type="text"],
.form-field.is-invalid input[type="number"],
.form-field.is-invalid textarea,
.form-field.is-invalid .choice-card {
    border-color: #a32938;
}


.website-field {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}



/* =========================================================
   SUBMIT
========================================================= */

.form-submit {
    justify-self: start;

    min-width: 225px;

    margin-top: 8px;
}


.form-submit:disabled {
    cursor: wait;

    opacity: 0.7;

    transform: none;
}


.form-submit__loader {
    display: none;

    width: 14px;
    height: 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.4
        );

    border-top-color: #fff;

    border-radius: 50%;

    animation:
        loaderSpin
        0.7s
        linear
        infinite;
}


.form-submit.is-loading
.form-submit__arrow {
    display: none;
}


.form-submit.is-loading
.form-submit__loader {
    display: block;
}



/* =========================================================
   STATUS
========================================================= */

.form-status {
    display: none;

    padding: 16px 18px;

    border:
        1px solid
        var(--line);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.2;
}


.form-status.is-visible {
    display: block;
}


.form-status.is-success {
    border-color:
        rgba(
            49,
            104,
            65,
            0.35
        );

    background:
        rgba(
            49,
            104,
            65,
            0.06
        );

    color: #315f3d;
}


.form-status.is-error {
    border-color:
        rgba(
            163,
            41,
            56,
            0.32
        );

    background:
        rgba(
            163,
            41,
            56,
            0.05
        );

    color: #8e2030;
}



/* =========================================================
   FINAL
========================================================= */

.final {
    display: grid;

    min-height: 80svh;

    place-items: center;

    overflow: hidden;

    background: var(--cream);

    text-align: center;
}


.final::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            70vw,
            670px
        );

    aspect-ratio: 1;

    border:
        1px solid
        rgba(
            111,
            23,
            36,
            0.12
        );

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        );
}


.final__title {
    position: relative;

    margin: 24px 0;

    font-family: var(--serif);

    font-size:
        clamp(
            66px,
            11vw,
            130px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.06em;
}


.final__date {
    position: relative;

    margin:
        38px
        0
        0;

    color: var(--wine);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.2em;
}



/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ambientDrift {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }


    to {
        transform:
            translate3d(
                3vw,
                2vw,
                0
            )
            scale(1.06);
    }

}


@keyframes slowSpin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes loaderSpin {

    to {
        transform:
            rotate(360deg);
    }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .section {
        padding: 92px 0;
    }


    .dress-code__grid,
    .location__grid {
        grid-template-columns: 1fr;

        gap: 42px;

        align-items: start;
    }


    .countdown {
        gap: 16px;
    }


    .timeline__item {
        grid-template-columns:
            100px
            1px
            minmax(0, 1fr);

        gap: 24px;
    }


    .detail-card {
        grid-template-columns:
            52px
            170px
            minmax(0, 1fr);
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .container,
    .container--narrow,
    .container--form,
    .hero__topline,
    .scroll-link {
        width:
            min(
                100% - 32px,
                1160px
            );
    }


    .section {
        padding: 76px 0;
    }


    .section-number {
        margin-bottom: 22px;
    }


    .section-title {
        font-size:
            clamp(
                45px,
                13vw,
                68px
            );
    }


    .intro__eyebrow {
        margin-bottom: 16px;
    }


    .book-scene {
        width:
            min(
                74vw,
                290px
            );
    }


    .book__cover-inner {
        inset: 14px;
    }


    .book__monogram {
        top: 30px;
    }


    .open-button {
        margin-top: 22px;
    }


    .hero {
        min-height: 100dvh;
    }


    /*
       На мобильных вертикальное видео
       занимает весь экран.
    */

    .hero-video__media {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;

        transform:
            translate(-50%, -50%)
            scale(1.02);

        filter:
            brightness(1.03)
            contrast(0.95)
            saturate(0.76);
    }


    .hero-video__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(250, 250, 248, 0.44) 0%,
                rgba(250, 250, 248, 0.12) 26%,
                rgba(250, 250, 248, 0.14) 62%,
                rgba(250, 250, 248, 0.5) 100%
            );
    }


    .hero__topline {
        font-size: 8px;
    }


    .hero__center {
        width:
            calc(100% - 28px);

        padding: 56px 0;
    }


    .hero__name {
        font-size:
            clamp(
                72px,
                25vw,
                118px
            );
    }


    .hero__ampersand {
        font-size:
            clamp(
                50px,
                16vw,
                74px
            );
    }


    .hero__subtitle {
        max-width: 330px;

        font-size: 20px;
    }


    .hero__ornament--left {
        top: 24%;

        left: 5%;
    }


    .hero__ornament--right {
        right: 6%;

        bottom: 18%;
    }


    .invitation__text {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 38px;
    }


    .date-card {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 50px;
    }


    .date-card__day {
        font-size:
            clamp(
                100px,
                38vw,
                150px
            );
    }


    .date-card__meta {
        padding-top: 15px;

        border-top:
            1px solid
            var(--line);
    }


    .countdown {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            30px
            18px;

        margin-top: 52px;
    }


    .countdown__divider {
        display: none;
    }


    .countdown__item {
        padding-bottom: 18px;

        border-bottom:
            1px solid
            var(--line-light);
    }


    .countdown__item strong {
        font-size:
            clamp(
                60px,
                20vw,
                92px
            );
    }


    .timeline {
        margin-top: 52px;
    }


    .timeline__item {
        grid-template-columns:
            74px
            minmax(0, 1fr);

        gap: 18px;

        min-height: auto;

        padding: 28px 0;
    }


    .timeline__line {
        display: none;
    }


    .timeline__time {
        font-size: 31px;
    }


    .timeline__content {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        column-gap: 14px;
    }


    .timeline__icon {
        width: 34px;
        height: 34px;

        font-size: 17px;
    }


    .timeline__content h3 {
        margin-bottom: 9px;

        font-size: 28px;
    }


    .timeline__content p {
        grid-column:
            1 / -1;

        margin-top: 14px;
    }


    .dress-code__copy {
        font-size: 22px;
    }


    .palette {
        gap: 8px;

        margin-top: 48px;
    }


    .details__list {
        margin-top: 52px;
    }


    .detail-card {
        grid-template-columns:
            44px
            1fr;

        gap:
            14px
            16px;

        padding: 28px 0;
    }


    .detail-card h3 {
        font-size: 29px;
    }


    .detail-card p {
        grid-column: 2;
    }


    .location-card {
        padding:
            26px
            22px;
    }


    .choice-grid--attendance,
    .choice-grid--drinks {
        grid-template-columns: 1fr;
    }


    .choice-card {
        min-height: 58px;
    }


    .form-submit {
        width: 100%;

        justify-self: stretch;
    }


    .final {
        min-height: 72svh;
    }


    .final__title {
        font-size:
            clamp(
                60px,
                19vw,
                92px
            );
    }

}



/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 380px) {

    .book-scene {
        width:
            min(
                72vw,
                250px
            );
    }


    .book__names {
        font-size: 42px;
    }


    .open-button {
        gap: 16px;

        padding-inline: 18px;

        font-size: 9px;
    }


    .hero__topline span:first-child {
        max-width: 130px;
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }


    .reveal {
        opacity: 1;

        transform: none;
    }

}