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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


:root {
    --cream: #eeeae2;
    --cream-light: #f5f2ec;
    --dark: #27241f;
    --muted: #77736c;
    --line: rgba(39, 36, 31, 0.20);
    --accent: #8b6b52;

    --footer-bg: #24211d;

    --opening-bg: #d9d1c5;
    --opening-subtitle: #696057;

    --hero-overlay-top:
        rgba(246, 246, 246, 0.25);

    --hero-overlay-bottom:
        rgba(201, 172, 109, 0.72);

    --final-overlay:
        rgba(28, 24, 20, 0.58);

    --serif:
        "Cormorant Garamond",
        serif;

    --sans:
        "Montserrat",
        sans-serif;
}


body {
    min-width: 320px;

    overflow-x: hidden;

    background:
        var(--cream);

    color:
        var(--dark);

    font-family:
        var(--sans);

    font-weight: 300;
}


body.is-locked {
    height: 100vh;
    overflow: hidden;
}


img {
    display: block;

    width: 100%;

    max-width: 100%;
}


button,
input,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;
}


.is-hidden {
    display: none !important;
}



/* =====================================================
   GLOBAL
===================================================== */

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

    margin:
        0 auto;
}


.section {
    padding:
        130px 0;

    background:
        var(--cream);
}


.section-label {
    margin-bottom:
        25px;

    color:
        var(--muted);

    font-family:
        var(--serif);

    font-size:
        17px;

    letter-spacing:
        0.25em;

    text-align:
        center;
}


.section-title {
    font-family:
        var(--serif);

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );

    font-weight:
        400;

    line-height:
        0.95;

    letter-spacing:
        0.02em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.section-lead {
    max-width:
        600px;

    margin:
        35px auto 0;

    font-family:
        var(--serif);

    font-size:
        27px;

    line-height:
        1.35;

    text-align:
        center;
}


.decor-line {
    position:
        relative;

    width:
        80px;

    height:
        1px;

    margin:
        35px auto;

    background:
        var(--line);
}


.decor-line span {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--accent);

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



/* =====================================================
   OPENING
===================================================== */

.opening {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        var(--opening-bg);

    color:
        #2b2722;
}


.opening__panel {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    z-index:
        2;

    width:
        50%;

    background-color:
        #cfc7ba;

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

    transition:
        transform
        1.45s
        cubic-bezier(
            .77,
            0,
            .18,
            1
        );
}


.opening__panel::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .32;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, .75),
            transparent 35%
        ),

        radial-gradient(
            circle at 70% 75%,
            rgba(80, 65, 50, .12),
            transparent 42%
        );

    pointer-events:
        none;
}


.opening__panel--left {
    left: 0;

    border-right:
        1px solid
        rgba(
            70,
            60,
            50,
            .12
        );
}


.opening__panel--right {
    right: 0;

    border-left:
        1px solid
        rgba(
            70,
            60,
            50,
            .12
        );
}


.opening__content {
    position:
        relative;

    z-index:
        5;

    width:
        min(
            90%,
            650px
        );

    text-align:
        center;

    transition:
        opacity
        .55s
        ease,

        transform
        .8s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


/* =====================================================
   МАТОВОЕ СТЕКЛО ЗА OPENING CONTENT
===================================================== */

@media (max-width: 1240px) {

    .opening__content::before {
        content: "";

        position: absolute;

        inset: -20px;

        z-index: -1;

        background:
            radial-gradient(
                circle,
                rgba(255, 255, 255, .72) 0%,
                rgba(255, 255, 255, .45) 45%,
                transparent 100%
            );
    }

}


.opening__small {
    margin-bottom:
        24px;

    font-family:
        var(--sans);

    font-size:
        9px;

    letter-spacing:
        .38em;

    text-transform:
        uppercase;

    opacity:
        .72;
}


.opening__ornament {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    margin-bottom:
        24px;
}


.opening__ornament span {
    width:
        45px;

    height:
        1px;

    background:
        rgba(
            43,
            39,
            34,
            .3
        );
}


.opening__ornament i {
    color:
        var(--accent);

    font-family:
        var(--serif);

    font-size:
        14px;

    font-style:
        normal;

    animation:
        openingStar
        2.5s
        ease-in-out
        infinite;
}


@keyframes openingStar {

    0%,
    100% {
        opacity: .55;

        transform:
            rotate(0deg)
            scale(1);
    }


    50% {
        opacity: 1;

        transform:
            rotate(45deg)
            scale(1.15);
    }

}


.opening__names {
    font-family:
        var(--serif);

    font-size:
        clamp(
            70px,
            11vw,
            120px
        );

    font-weight:
        400;

    line-height:
        .72;

    letter-spacing:
        .025em;

    text-transform:
        uppercase;
}


.opening__names em {
    display:
        inline-block;

    margin:
        0 .08em;

    color:
        var(--accent);

    font-size:
        .45em;

    font-style:
        normal;

    vertical-align:
        middle;
}


.opening__date {
    margin-top:
        30px;

    font-family:
        var(--serif);

    font-size:
        23px;

    letter-spacing:
        .2em;
}


.opening__subtitle {
    margin-top:
        14px;

    color:
        var(--opening-subtitle);

    font-family:
        var(--serif);

    font-size:
        19px;

    font-style:
        italic;
}


.opening__button {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        18px;

    min-width:
        245px;

    height:
        58px;

    margin-top:
        48px;

    padding:
        0 22px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            43,
            39,
            34,
            .48
        );

    background:
        rgba(
            245,
            242,
            236,
            .28
        );

    color:
        var(--dark);

    font-size:
        9px;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    transition:
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


.opening__button::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        var(--dark);

    transform:
        translateX(-101%);

    transition:
        transform
        .45s
        cubic-bezier(
            .77,
            0,
            .18,
            1
        );
}


.opening__button:hover {
    border-color:
        var(--dark);

    color:
        #fff;

    transform:
        translateY(-2px);
}


.opening__button:hover::before {
    transform:
        translateX(0);
}


.opening__button-text,
.opening__button-arrow {
    position:
        relative;

    z-index:
        2;
}


.opening__button-arrow {
    font-size:
        17px;

    transition:
        transform
        .35s
        ease;
}


.opening__button:hover
.opening__button-arrow {
    transform:
        translateX(5px);
}


.opening__hint {
    margin-top:
        18px;

    color:
        rgba(
            43,
            39,
            34,
            .52
        );

    font-size:
        7px;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;
}


.opening__frame {
    position:
        absolute;

    inset:
        22px;

    z-index:
        6;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .38
        );

    pointer-events:
        none;

    transition:
        opacity .7s ease,
        transform 1.2s ease;
}


.opening__light {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        8;

    width:
        15px;

    height:
        15px;

    border-radius:
        50%;

    background:
        #fff;

    box-shadow:
        0 0 30px 10px rgba(255, 255, 255, .5),
        0 0 100px 40px rgba(255, 255, 255, .25);

    opacity:
        0;

    pointer-events:
        none;

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


.opening.is-opening
.opening__content {
    opacity:
        0;

    transform:
        scale(.94)
        translateY(-15px);
}


.opening.is-opening
.opening__frame {
    opacity:
        0;

    transform:
        scale(1.08);
}


.opening.is-opening
.opening__light {
    animation:
        openingLight
        1.2s
        ease-out
        forwards;
}


@keyframes openingLight {

    0% {
        opacity: 0;

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


    25% {
        opacity: .9;
    }


    100% {
        opacity: 0;

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

}


.opening.is-opened {
    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity
        .4s
        ease
        .95s,

        visibility
        0s
        linear
        1.4s;
}


.opening.is-opened
.opening__panel--left {
    transform:
        translateX(-100%);
}


.opening.is-opened
.opening__panel--right {
    transform:
        translateX(100%);
}



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

.hero {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100svh;

    overflow:
        hidden;

    color:
        #fff;
}


.hero__background {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-color:
        #cfc7ba;

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;
}


.hero__overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            var(--hero-overlay-top),
            var(--hero-overlay-bottom)
        );
}


.hero__content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

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

    min-height:
        100svh;

    padding:
        80px 0 40px;
}


.hero__small {
    margin-bottom:
        35px;

    font-size:
        10px;

    letter-spacing:
        .35em;

    text-align:
        center;
}


.hero__photos {
    position:
        relative;

    width:
        min(
            100%,
            650px
        );

    height:
        310px;

    margin-bottom:
        30px;
}


.hero__photo {
    position:
        absolute;

    width:
        255px;

    height:
        320px;

    overflow:
        hidden;

    border:
        7px solid
        rgba(
            255,
            255,
            255,
            .9
        );

    background:
        #ddd;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            .25
        );
}


.hero__photo img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.hero__photo--left {
    left:
        50%;

    top:
        0;

    transform:
        translateX(-94%)
        rotate(-8deg);
}


.hero__photo--right {
    right:
        50%;

    top:
        10px;

    transform:
        translateX(94%)
        rotate(7deg);
}


.hero__names {
    max-width:
        100%;

    font-family:
        var(--serif);

    font-size:
        clamp(
            48px,
            9vw,
            90px
        );

    line-height:
        .85;

    letter-spacing:
        .03em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.hero__names span {
    display:
        inline-block;

    margin:
        0 .08em;

    font-size:
        .5em;

    vertical-align:
        middle;
}


.hero__date {
    margin-top:
        28px;

    font-family:
        var(--serif);

    font-size:
        24px;

    letter-spacing:
        .15em;
}


.hero__bottom {
    position:
        absolute;

    bottom:
        35px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;
}


.hero__play {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        0;

    background:
        none;

    color:
        #fff;

    font-size:
        9px;

    line-height:
        1.6;

    letter-spacing:
        .1em;

    text-align:
        left;

    text-transform:
        uppercase;
}


.hero__play-circle {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        43px;

    height:
        43px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .7
        );

    border-radius:
        50%;

    transition:
        .3s ease;
}


.hero__scroll {
    margin-top:
        20px;

    font-size:
        24px;

    animation:
        scrollDown
        1.5s
        infinite;
}


@keyframes scrollDown {

    0%,
    100% {
        transform:
            translateY(0);
    }


    50% {
        transform:
            translateY(8px);
    }

}



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

.intro {
    text-align:
        center;
}


.intro__text {
    width:
        min(
            100%,
            650px
        );

    margin:
        0 auto 20px;

    font-family:
        var(--serif);

    font-size:
        24px;

    line-height:
        1.5;
}


.intro__names {
    margin-top:
        50px;

    font-family:
        var(--serif);

    font-size:
        40px;

    text-transform:
        uppercase;
}


.intro__names span {
    color:
        var(--accent);
}



/* =====================================================
   PHOTO
===================================================== */

.photo-section {
    width:
        100%;

    padding:
        90px 24px;

    overflow:
        hidden;

    background:
        var(--cream);
}


.photo-section__image {
    position:
        relative;

    width:
        min(
            100%,
            1050px
        );

    margin:
        0 auto;

    overflow:
        hidden;

    background:
        #d8d0c5;

    box-shadow:
        0 25px 70px
        rgba(
            39,
            36,
            31,
            .16
        );
}


.photo-section img {
    width:
        100%;

    height:
        auto;

    object-fit:
        contain;
}


.photo-section__image::after {
    content:
        "";

    position:
        absolute;

    inset:
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .55
        );

    pointer-events:
        none;
}



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

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


.countdown {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    max-width:
        700px;

    margin:
        70px auto 0;

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

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


.countdown__item {
    padding:
        30px 15px;

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

    text-align:
        center;
}


.countdown__item:last-child {
    border-right:
        0;
}


.countdown__item strong {
    display:
        block;

    font-family:
        var(--serif);

    font-size:
        clamp(
            45px,
            7vw,
            75px
        );

    font-weight:
        400;

    line-height:
        1;
}


.countdown__item span {
    display:
        block;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        9px;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;
}



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

.timeline {
    max-width:
        800px;

    margin:
        75px auto 0;
}


.timeline-item {
    display:
        grid;

    grid-template-columns:
        100px
        40px
        1fr;

    min-height:
        150px;
}


.timeline-item__time {
    padding-top:
        4px;

    font-family:
        var(--serif);

    font-size:
        27px;

    text-align:
        right;
}


.timeline-item__line {
    position:
        relative;
}


.timeline-item__line::before {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        var(--line);

    transform:
        translateX(-50%);
}


.timeline-item__line span {
    position:
        absolute;

    left:
        50%;

    top:
        8px;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        var(--accent);

    transform:
        translateX(-50%);
}


.timeline-item:last-child
.timeline-item__line::before {
    display:
        none;
}


.timeline-item__content {
    padding-left:
        30px;

    padding-bottom:
        50px;
}


.timeline-item__content h3 {
    margin-bottom:
        10px;

    font-family:
        var(--serif);

    font-size:
        31px;

    font-weight:
        500;
}


.timeline-item__content p {
    max-width:
        470px;

    color:
        var(--muted);

    font-family:
        var(--serif);

    font-size:
        19px;

    line-height:
        1.5;
}



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

.location-section {
    background:
        var(--cream-light);

    text-align:
        center;
}


.location-address {
    margin:
        30px auto 45px;

    font-family:
        var(--serif);

    font-size:
        25px;

    line-height:
        1.5;
}


.map {
    position:
        relative;

    height:
        430px;

    margin-bottom:
        35px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #d9d5cb,
            #e9e5dc
        );
}


.map__pattern {
    position:
        absolute;

    inset:
        0;

    opacity:
        .35;

    background-image:
        linear-gradient(
            35deg,
            transparent 46%,
            rgba(100, 90, 75, .25) 47%,
            transparent 48%
        );

    background-size:
        80px 80px;
}


.map__pin {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        62px;

    height:
        62px;

    border-radius:
        50%
        50%
        50%
        0;

    background:
        var(--accent);

    color:
        #fff;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .2);

    rotate:
        -45deg;

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


.map__pin span {
    rotate:
        45deg;
}


.map__label {
    position:
        absolute;

    left:
        50%;

    top:
        calc(
            50% + 60px
        );

    font-family:
        var(--serif);

    font-size:
        15px;

    line-height:
        1.2;

    transform:
        translateX(-50%);
}



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

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        55px;

    padding:
        0 40px;

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

    background:
        transparent;

    color:
        var(--dark);

    font-size:
        10px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    transition:
        .3s ease;
}


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

    color:
        #fff;
}


.button--dark {
    width:
        100%;

    background:
        var(--dark);

    color:
        #fff;
}



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

.details {
    max-width:
        680px;

    margin:
        70px auto 0;
}


.details__item {
    display:
        grid;

    grid-template-columns:
        80px
        1fr;

    padding:
        30px 0;

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


.details__item:first-child {
    border-top:
        1px solid
        var(--line);
}


.details__symbol {
    color:
        var(--accent);

    font-family:
        var(--serif);

    font-size:
        35px;
}


.details__item p {
    font-family:
        var(--serif);

    font-size:
        21px;

    line-height:
        1.5;
}



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

.dress-section {
    text-align:
        center;
}


.dress-text {
    max-width:
        600px;

    margin:
        15px auto 0;

    font-family:
        var(--serif);

    font-size:
        21px;

    line-height:
        1.5;
}


.palette {
    display:
        flex;

    justify-content:
        center;

    margin-top:
        55px;
}


.palette__color {
    width:
        75px;

    height:
        75px;

    margin-left:
        -10px;

    border:
        5px solid
        var(--cream);

    border-radius:
        50%;
}


.palette__color:first-child {
    margin-left:
        0;
}



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

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


.rsvp-form {
    width:
        min(
            100%,
            650px
        );

    margin:
        70px auto 0;
}


.rsvp-deadline {
    margin:
        18px auto 0;

    color:
        var(--muted);

    font-family:
        var(--serif);

    font-size:
        17px;

    text-align:
        center;
}


.form-group {
    margin-bottom:
        45px;
}


.form-group > label {
    display:
        block;

    margin-bottom:
        18px;

    font-family:
        var(--serif);

    font-size:
        25px;

    line-height:
        1.2;
}


.form-group small {
    display:
        block;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


.rsvp-form
input[type="text"],

.rsvp-form
input[type="number"] {
    width:
        100%;

    height:
        58px;

    padding:
        0;

    border:
        0;

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

    outline:
        none;

    background:
        transparent;

    color:
        var(--dark);

    font-family:
        var(--serif);

    font-size:
        21px;
}


.rsvp-form input:focus,
.rsvp-form textarea:focus {
    border-bottom-color:
        var(--accent);
}


.rsvp-form textarea {
    display:
        block;

    width:
        100%;

    min-height:
        140px;

    padding:
        14px 0;

    resize:
        vertical;

    border:
        0;

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

    outline:
        none;

    background:
        transparent;

    color:
        var(--dark);

    font-family:
        var(--serif);

    font-size:
        21px;

    line-height:
        1.55;
}


.radio-list,
.checkbox-list {
    display:
        grid;

    gap:
        10px;
}


.choice {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        54px;

    padding:
        13px 16px;

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

    background:
        rgba(255, 255, 255, .18);

    cursor:
        pointer;

    transition:
        border-color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}


.choice:hover {
    border-color:
        var(--accent);

    background:
        rgba(255, 255, 255, .42);

    transform:
        translateY(-1px);
}


.choice input {
    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    accent-color:
        var(--accent);
}


.choice span {
    font-family:
        var(--serif);

    font-size:
        19px;
}


.rsvp-form
.button--dark {
    min-height:
        58px;
}


.rsvp-form
.button--dark:disabled {
    opacity:
        .55;

    cursor:
        wait;
}


.form-message {
    min-height:
        30px;

    margin-top:
        20px;

    font-family:
        var(--serif);

    font-size:
        20px;

    text-align:
        center;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        .3s ease;
}


.form-message.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.form-message.is-success {
    color:
        #4e654f;
}


.form-message.is-error {
    color:
        #8b3e38;
}


.honeypot {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    border:
        0 !important;
}



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

.final-section {
    --final-image:
        none;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        90vh;

    overflow:
        hidden;

    color:
        #fff;
}


.final-section::before {
    content:
        "";

    position:
        absolute;

    inset:
        -3%;

    background-image:
        var(--final-image);

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;
}


.final-section__overlay {
    position:
        absolute;

    inset:
        0;

    background:
        var(--final-overlay);
}


.final-section__content {
    position:
        relative;

    z-index:
        2;

    text-align:
        center;
}


.final-section__small {
    margin-bottom:
        30px;

    font-size:
        10px;

    letter-spacing:
        .35em;
}


.final-section h2 {
    font-family:
        var(--serif);

    font-size:
        clamp(
            48px,
            9vw,
            90px
        );

    font-weight:
        400;

    line-height:
        .9;

    text-transform:
        uppercase;
}


.final-section__date {
    margin-top:
        35px;

    font-family:
        var(--serif);

    font-size:
        24px;

    letter-spacing:
        .2em;
}



/* =====================================================
   FOOTER
===================================================== */

.footer {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        55px 20px 38px;

    background:
        var(--footer-bg);

    color:
        #fff;

    text-align:
        center;
}


.footer__names {
    font-family:
        var(--serif);

    font-size:
        30px;
}


.footer__text {
    margin-top:
        8px;

    font-size:
        9px;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

    opacity:
        .6;
}



/* =====================================================
   FOOTER CREATOR
===================================================== */

.footer__creator {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        10px;

    width:
        min(
            100%,
            320px
        );

    margin-top:
        38px;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );
}


.footer__creator-text {
    font-family:
        var(--sans);

    font-size:
        7px;

    font-weight:
        300;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;

    opacity:
        .45;
}


.footer__creator-link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        6px 10px;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.footer__creator-link:hover {
    opacity:
        .72;

    transform:
        translateY(-2px);
}


.footer__creator-link:focus-visible {
    outline:
        1px solid
        rgba(
            255,
            255,
            255,
            .7
        );

    outline-offset:
        5px;
}


.footer__creator-logo {
    display:
        block;

    width:
        auto;

    max-width:
        115px;

    max-height:
        45px;

    object-fit:
        contain;
}



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

.reveal {
    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}



/* =====================================================
   LARGE SCREEN
===================================================== */

@media (min-width: 1600px) {

    .hero__background {
        background-size:
            auto 100%;
    }

}



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

@media (max-width: 768px) {

    .section {
        padding:
            95px 0;
    }


    .container {
        width:
            min(
                100% - 34px,
                650px
            );
    }


    .opening__frame {
        inset:
            14px;
    }


    .opening__names {
        font-size:
            clamp(
                62px,
                15vw,
                90px
            );
    }


    .hero__content {
        width:
            min(
                100% - 30px,
                650px
            );
    }


    .hero__photos {
        height:
            275px;
    }


    .hero__photo {
        width:
            215px;

        height:
            275px;
    }


    .hero__names {
        font-size:
            clamp(
                43px,
                12vw,
                70px
            );
    }


    .timeline-item {
        grid-template-columns:
            75px
            30px
            1fr;
    }


    .timeline-item__content {
        padding-left:
            20px;
    }


    .map {
        height:
            350px;
    }

}



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

@media (max-width: 560px) {

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


    .section {
        padding:
            80px 0;
    }


    .section-title {
        font-size:
            42px;
    }


    .section-lead {
        font-size:
            22px;
    }


    .opening__content::before {
        inset:
            -14px;
    }


    .opening__small {
        margin-bottom:
            20px;

        font-size:
            7px;

        letter-spacing:
            .28em;
    }


    .opening__ornament {
        margin-bottom:
            20px;
    }


    .opening__ornament span {
        width:
            32px;
    }


    .opening__names {
        font-size:
            clamp(
                50px,
                16vw,
                75px
            );

        line-height:
            .78;
    }


    .opening__date {
        margin-top:
            24px;

        font-size:
            18px;
    }


    .opening__subtitle {
        margin-top:
            10px;

        font-size:
            17px;
    }


    .opening__button {
        min-width:
            225px;

        height:
            54px;

        margin-top:
            38px;

        font-size:
            8px;
    }


    .opening__frame {
        inset:
            10px;
    }


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

        padding-top:
            65px;

        padding-bottom:
            35px;
    }


    .hero__photos {
        height:
            220px;
    }


    .hero__photo {
        width:
            160px;

        height:
            210px;

        border-width:
            5px;
    }


    .hero__photo--left {
        transform:
            translateX(-91%)
            rotate(-8deg);
    }


    .hero__photo--right {
        transform:
            translateX(91%)
            rotate(7deg);
    }


    .hero__names {
        font-size:
            clamp(
                40px,
                14vw,
                62px
            );
    }


    .hero__date {
        font-size:
            19px;
    }


    .intro__text {
        font-size:
            20px;
    }


    .countdown {
        margin-top:
            45px;
    }


    .countdown__item {
        padding:
            20px 4px;
    }


    .countdown__item strong {
        font-size:
            38px;
    }


    .countdown__item span {
        font-size:
            7px;
    }


    .timeline {
        margin-top:
            50px;
    }


    .timeline-item {
        grid-template-columns:
            55px
            22px
            1fr;
    }


    .timeline-item__time {
        font-size:
            20px;
    }


    .timeline-item__content {
        padding-left:
            15px;
    }


    .timeline-item__content h3 {
        font-size:
            24px;
    }


    .timeline-item__content p {
        font-size:
            17px;
    }


    .location-address {
        font-size:
            21px;
    }


    .map {
        height:
            300px;
    }


    .details__item {
        grid-template-columns:
            55px
            1fr;
    }


    .details__item p {
        font-size:
            18px;
    }


    .palette__color {
        width:
            52px;

        height:
            52px;

        border-width:
            3px;
    }


    .dress-text {
        font-size:
            19px;
    }


    .rsvp-form {
        margin-top:
            50px;
    }


    .form-group > label {
        font-size:
            22px;
    }


    .choice span {
        font-size:
            17px;
    }


    .final-section {
        min-height:
            75vh;
    }


    .final-section h2 {
        font-size:
            50px;
    }


    .footer {
        padding:
            45px 18px 30px;
    }


    .footer__creator {
        margin-top:
            30px;

        padding-top:
            22px;
    }


    .footer__creator-logo {
        max-width:
            100px;
    }

}



/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 380px) {

    .opening__names {
        font-size:
            47px;
    }


    .opening__date {
        font-size:
            17px;
    }


    .opening__button {
        min-width:
            210px;
    }


    .hero__photo {
        width:
            145px;

        height:
            195px;
    }


    .hero__names {
        font-size:
            37px;
    }


    .countdown__item strong {
        font-size:
            32px;
    }


    .timeline-item {
        grid-template-columns:
            47px
            18px
            1fr;
    }


    .timeline-item__content h3 {
        font-size:
            21px;
    }


    .timeline-item__content p {
        font-size:
            16px;
    }

}



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

@media (max-width: 340px) {

    .opening__names {
        font-size:
            43px;
    }


    .opening__button {
        min-width:
            195px;

        padding:
            0 15px;
    }


    .hero__photo {
        width:
            137px;

        height:
            185px;
    }


    .hero__names {
        font-size:
            35px;
    }

}



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

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}