/* =========================================================
   ROOT
========================================================= */

:root {

    --black:
        #050505;

    --black-soft:
        #0b0b0b;

    --white:
        #f7f5f0;

    --white-soft:
        #dedbd5;

    --gray:
        #94918b;

    --gold:
        #cab08b;

    --gold-muted:
        rgba(
            202,
            176,
            139,
            .68
        );

    --line-soft:
        rgba(
            255,
            255,
            255,
            .08
        );

    --glass:
        rgba(
            110,
            96,
            78,
            .15
        );

    --glass-border:
        rgba(
            255,
            255,
            255,
            .50
        );

    --glass-shadow:
        0 30px 85px
        rgba(
            0,
            0,
            0,
            .34
        ),

        0 10px 32px
        rgba(
            0,
            0,
            0,
            .18
        );

    --display-serif:
        "Bodoni Moda",
        "Cormorant Garamond",
        serif;

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    --ease:
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

    --site-background:
        none;

    --site-background-position:
        center center;

    --overlay-top:
        .64;

    --overlay-bottom:
        .72;

}


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

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

    background:
        var(--black);

}


body {

    position:
        relative;

    min-height:
        100%;

    overflow-x:
        hidden;

    background:

        linear-gradient(
            rgba(
                0,
                0,
                0,
                var(--overlay-top)
            ),

            rgba(
                0,
                0,
                0,
                var(--overlay-bottom)
            )
        ),

        var(--site-background);

    background-position:
        var(--site-background-position);

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;

    color:
        var(--white);

    font-family:
        var(--sans);

    font-weight:
        300;

    isolation:
        isolate;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    display:
        block;

    width:
        100%;

}


/* =========================================================
   AMBIENT
========================================================= */

.ambient {

    position:
        fixed;

    width:
        600px;

    height:
        600px;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(160px);

    opacity:
        .022;

    background:
        white;

    z-index:
        -6;

}


.ambient-1 {

    top:
        -300px;

    left:
        -250px;

}


.ambient-2 {

    right:
        -300px;

    bottom:
        -300px;

}


/* =========================================================
   GRAIN
========================================================= */

.grain {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        100;

    opacity:
        .018;

    mix-blend-mode:
        soft-light;

}


/* =========================================================
   PAGE PROGRESS
========================================================= */

.page-progress {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    z-index:
        150;

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

}


.page-progress span {

    display:
        block;

    width:
        0;

    height:
        100%;

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

    box-shadow:
        0 0 14px
        rgba(
            255,
            255,
            255,
            .35
        );

}


/* =========================================================
   GLASS
========================================================= */

.glass-card,
.hero-panel {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

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

    backdrop-filter:
        blur(18px)
        saturate(112%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(112%);

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

    box-shadow:
        var(--glass-shadow);

    transition:
        transform
        .75s
        var(--ease),

        border-color
        .7s
        ease,

        box-shadow
        .7s
        ease;

}


.glass-card::before,
.hero-panel::before {

    content:
        "";

    position:
        absolute;

    inset:
        10px;

    pointer-events:
        none;

    z-index:
        2;

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

}


.glass-card::after,
.hero-panel::after {

    content:
        "";

    position:
        absolute;

    top:
        -60%;

    left:
        -65%;

    width:
        34%;

    height:
        220%;

    pointer-events:
        none;

    z-index:
        3;

    opacity:
        0;

    background:

        linear-gradient(

            90deg,

            transparent
            0%,

            rgba(
                255,
                255,
                255,
                .015
            )
            20%,

            rgba(
                255,
                255,
                255,
                .085
            )
            50%,

            rgba(
                255,
                255,
                255,
                .018
            )
            78%,

            transparent
            100%

        );

    filter:
        blur(4px);

    transform:
        rotate(15deg);

    animation:
        glassSheen
        11s
        cubic-bezier(
            .45,
            .05,
            .55,
            .95
        )
        infinite;

}


@keyframes glassSheen {

    0%,
    38% {

        left:
            -65%;

        opacity:
            0;

    }


    44% {

        opacity:
            .08;

    }


    54% {

        opacity:
            .44;

    }


    64% {

        opacity:
            .07;

    }


    70%,
    100% {

        left:
            135%;

        opacity:
            0;

    }

}


@media (hover: hover) and (pointer: fine) {

    .glass-card:hover {

        transform:
            translate3d(
                0,
                -4px,
                0
            );

        border-color:
            rgba(
                255,
                255,
                255,
                .78
            );

        box-shadow:

            0 36px 95px
            rgba(
                0,
                0,
                0,
                .38
            ),

            0 12px 34px
            rgba(
                0,
                0,
                0,
                .22
            );

    }

}


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

.reveal {

    opacity:
        0;

    transform:
        translateY(
            35px
        );

    filter:
        blur(4px);

    transition:

        opacity
        1s
        var(--ease),

        transform
        1s
        var(--ease),

        filter
        1s
        var(--ease);

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

    filter:
        blur(0);

}


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

.hero {

    position:
        relative;

    min-height:
        100vh;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        42px 24px;

    overflow:
        hidden;

    isolation:
        isolate;

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

}


.hero-bg {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

}


.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    background:

        radial-gradient(

            ellipse
            at center,

            rgba(
                0,
                0,
                0,
                .05
            )
            0%,

            rgba(
                0,
                0,
                0,
                .20
            )
            48%,

            rgba(
                0,
                0,
                0,
                .48
            )
            100%

        );

}


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

.hero-panel {

    width:
        min(
            900px,
            calc(
                100vw - 46px
            )
        );

    min-height:
        630px;

    border-color:
        rgba(
            255,
            255,
            255,
            .55
        );

}


.hero-panel-inner {

    position:
        relative;

    z-index:
        4;

    min-height:
        630px;

    padding:
        38px 42px 30px;

    display:
        flex;

    flex-direction:
        column;

}


.hero-topline {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        17px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

}


.hero-label {

    font-size:
        7px;

    letter-spacing:
        .42em;

    color:
        rgba(
            229,
            212,
            188,
            .58
        );

}


.hero-composition {

    position:
        relative;

    flex:
        1;

    min-height:
        450px;

}


.hero-names {

    position:
        absolute;

    top:
        42px;

    left:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    font-family:
        var(--display-serif);

    line-height:
        .82;

}


.hero-name {

    font-size:
        clamp(
            62px,
            7.6vw,
            104px
        );

    font-weight:
        500;

    letter-spacing:
        -.055em;

    color:
        #fff;

    text-shadow:
        0 1px 1px
        rgba(
            0,
            0,
            0,
            .22
        );

}


.hero-ampersand {

    margin:
        -2px
        0
        -2px
        5px;

    font-family:
        var(--serif);

    font-style:
        italic;

    font-size:
        50px;

    font-weight:
        300;

    color:
        var(--gold);

}


.hero-date-editorial {

    position:
        absolute;

    top:
        38px;

    right:
        3px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    font-family:
        var(--display-serif);

    font-size:
        40px;

    line-height:
        1.03;

    letter-spacing:
        -.04em;

    color:
        rgba(
            244,
            232,
            214,
            .88
        );

}


.hero-small-copy {

    position:
        absolute;

    top:
        53%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -90deg
        );

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    opacity:
        .48;

    white-space:
        nowrap;

}


.hero-small-copy span {

    font-size:
        6px;

    letter-spacing:
        .42em;

    color:
        var(--gold);

}


.hero-small-copy div {

    width:
        46px;

    height:
        1px;

    background:
        rgba(
            202,
            176,
            139,
            .45
        );

}


.hero-quote-new {

    position:
        absolute;

    left:
        0;

    bottom:
        12px;

    max-width:
        330px;

    font-family:
        var(--serif);

    font-size:
        23px;

    font-style:
        italic;

    line-height:
        1.52;

    color:
        rgba(
            248,
            239,
            226,
            .88
        );

}


.hero-photo-small {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        255px;

    height:
        220px;

    overflow:
        hidden;

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

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            .30
        );

}


.hero-photo-small img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(1)
        contrast(1.1)
        brightness(.78);

    transform:
        scale(1.03);

    transition:

        transform
        1.4s
        var(--ease),

        filter
        1s
        ease;

}


.hero-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding-top:
        22px;

    margin-top:
        18px;

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

}


.hero-enter {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        rgba(
            232,
            214,
            189,
            .65
        );

}


.hero-enter span {

    font-size:
        7px;

    letter-spacing:
        .4em;

}


.hero-enter i {

    font-family:
        var(--serif);

    font-size:
        18px;

    font-style:
        normal;

    animation:
        arrowFloat
        2.2s
        ease-in-out
        infinite;

}


@keyframes arrowFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(
                5px
            );

    }

}


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

.section {

    position:
        relative;

    width:
        min(
            1180px,
            calc(
                100% - 80px
            )
        );

    margin:
        0 auto;

    padding:
        165px 0;

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

}


.section-number {

    position:
        absolute;

    top:
        180px;

    left:
        0;

    font-size:
        9px;

    letter-spacing:
        .3em;

    color:
        var(--gold-muted);

}


.section-heading {

    max-width:
        690px;

    margin-left:
        120px;

    padding:
        42px
        44px
        46px;

}


.section-heading > span {

    display:
        block;

    margin-bottom:
        20px;

    font-size:
        8px;

    letter-spacing:
        .38em;

    color:
        var(--gold-muted);

}


.section-heading h2 {

    font-family:
        var(--display-serif);

    font-size:
        clamp(
            54px,
            7vw,
            94px
        );

    font-weight:
        400;

    line-height:
        .88;

    letter-spacing:
        -.04em;

}


.section-heading h2 em {

    font-family:
        var(--serif);

    font-weight:
        300;

    color:
        var(--gold);

}


.section-heading p {

    max-width:
        500px;

    margin-top:
        30px;

    font-size:
        11px;

    line-height:
        1.9;

    color:
        var(--white-soft);

}


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

.details-grid {

    display:
        grid;

    grid-template-columns:
        .75fr
        .85fr
        1.4fr;

    gap:
        18px;

    margin-left:
        120px;

    margin-top:
        70px;

}


.detail {

    min-height:
        235px;

    padding:
        32px 30px;

}


.detail-label {

    display:
        block;

    margin-bottom:
        34px;

    font-size:
        8px;

    letter-spacing:
        .3em;

    color:
        var(--gold-muted);

}


.detail h3 {

    font-family:
        var(--display-serif);

    font-size:
        35px;

    font-weight:
        400;

    line-height:
        1.05;

}


.detail p {

    max-width:
        300px;

    margin-top:
        16px;

    font-size:
        10px;

    line-height:
        1.8;

    color:
        var(--white-soft);

}


.map-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        27px;

    padding-bottom:
        8px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .52
        );

    font-size:
        8px;

    letter-spacing:
        .25em;

    transition:
        gap
        .35s
        ease;

}


@media (hover: hover) and (pointer: fine) {

    .map-button:hover {

        gap:
            27px;

    }

}


/* =========================================================
   EDITORIAL GALLERY
========================================================= */

.editorial-section {

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

    margin:
        0 auto;

    padding:
        100px
        0
        165px;

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

}


.editorial-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr
        .72fr
        .9fr;

    grid-template-rows:
        280px
        360px;

    gap:
        16px;

}


.editorial-photo {

    position:
        relative;

    min-height:
        280px;

    overflow:
        hidden;

    background:
        #090909;

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

}


.editorial-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(.75);

    transform:
        scale(1.03);

    transition:

        transform
        1.5s
        var(--ease),

        filter
        1s
        ease;

}


@media (hover: hover) and (pointer: fine) {

    .editorial-photo:hover img {

        transform:
            scale(1.075);

        filter:
            grayscale(1)
            contrast(1.05)
            brightness(.88);

    }

}


.editorial-photo--tall {

    grid-row:
        1 / 3;

}


.editorial-photo--wide {

    grid-column:
        2 / 4;

}


.editorial-photo--small {

    grid-column:
        3;

}


.editorial-note {

    padding:
        34px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

}


.editorial-note > span {

    font-size:
        8px;

    letter-spacing:
        .38em;

    color:
        var(--gold-muted);

}


.editorial-note p {

    margin:
        28px 0;

    font-family:
        var(--display-serif);

    font-size:
        clamp(
            30px,
            3vw,
            48px
        );

    font-weight:
        400;

    line-height:
        1;

}


.editorial-note i {

    font-family:
        var(--serif);

    font-size:
        40px;

    color:
        var(--gold);

}


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

.timeline {

    margin-left:
        120px;

    margin-top:
        70px;

    display:
        grid;

    gap:
        14px;

}


.timeline-item {

    display:
        grid;

    grid-template-columns:
        170px
        1px
        1fr;

    min-height:
        150px;

}


.timeline-time {

    padding:
        48px 28px;

    font-size:
        9px;

    letter-spacing:
        .2em;

    color:
        var(--gold-muted);

}


.timeline-marker {

    position:
        relative;

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

}


.timeline-marker span {

    position:
        absolute;

    top:
        48px;

    left:
        -4px;

    width:
        9px;

    height:
        9px;

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

    border-radius:
        50%;

    background:
        var(--black);

    box-shadow:

        0 0 0 5px
        rgba(
            5,
            5,
            5,
            .8
        ),

        0 0 22px
        rgba(
            255,
            255,
            255,
            .15
        );

}


.timeline-content {

    padding:
        36px
        38px
        34px
        48px;

}


.timeline-content > span {

    display:
        block;

    margin-bottom:
        6px;

    font-size:
        7px;

    letter-spacing:
        .25em;

    color:
        var(--gold-muted);

}


.timeline-content h3 {

    font-family:
        var(--display-serif);

    font-size:
        41px;

    font-weight:
        400;

}


.timeline-content p {

    max-width:
        520px;

    margin-top:
        8px;

    font-size:
        10px;

    line-height:
        1.75;

    color:
        var(--white-soft);

}


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

.dress-section {

    position:
        relative;

    min-height:
        850px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        150px 30px;

    overflow:
        hidden;

    isolation:
        isolate;

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

}


.dress-photo {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

}


.dress-section::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:

        linear-gradient(

            to right,

            rgba(
                0,
                0,
                0,
                .48
            ),

            rgba(
                0,
                0,
                0,
                .15
            )
            35%,

            rgba(
                0,
                0,
                0,
                .15
            )
            65%,

            rgba(
                0,
                0,
                0,
                .48
            )

        );

}


.dress-inner {

    width:
        min(
            690px,
            calc(
                100vw - 40px
            )
        );

    padding:
        54px
        55px
        58px;

    text-align:
        center;

}


.dress-eyebrow {

    font-size:
        9px;

    letter-spacing:
        .48em;

    color:
        var(--gold-muted);

}


.dress-symbol {

    margin:
        40px
        auto
        22px;

    font-family:
        var(--serif);

    font-size:
        58px;

    color:
        var(--gold);

}


.dress-inner h2 {

    font-family:
        var(--display-serif);

    font-size:
        clamp(
            60px,
            8vw,
            106px
        );

    font-weight:
        400;

    line-height:
        .82;

    letter-spacing:
        -.045em;

}


.dress-inner h2 em {

    font-family:
        var(--serif);

    font-weight:
        300;

    color:
        var(--gold);

}


.dress-inner p {

    max-width:
        430px;

    margin:
        42px
        auto
        32px;

    font-size:
        11px;

    line-height:
        1.9;

    color:
        var(--white-soft);

}


.dress-colors {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        22px
        32px;

}


.dress-colors span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        8px;

    letter-spacing:
        .28em;

}


.swatch {

    width:
        10px;

    height:
        10px;

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

    border-radius:
        50%;

}


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

.rsvp-form {

    max-width:
        820px;

    margin-left:
        120px;

    margin-top:
        70px;

    padding:
        42px;

}


.form-group {

    margin-bottom:
        42px;

}


.form-group > label {

    display:
        block;

    margin-bottom:
        17px;

    font-size:
        8px;

    line-height:
        1.7;

    letter-spacing:
        .22em;

    color:
        var(--gold-muted);

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        38px;

}


input,
select,
textarea {

    width:
        100%;

    padding:
        14px 0;

    border:
        none;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .30
        );

    border-radius:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        300;

    transition:
        border-color
        .3s
        ease;

}


input::placeholder,
textarea::placeholder {

    color:
        #706d68;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        rgba(
            255,
            255,
            255,
            .9
        );

}


select {

    appearance:
        none;

    padding-right:
        26px;

}


select option {

    background:
        #080808;

    color:
        white;

}


textarea {

    min-height:
        110px;

    resize:
        vertical;

}


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

.attendance-options {

    display:
        grid;

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

    gap:
        12px;

}


.radio-card {

    position:
        relative;

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 20px;

    cursor:
        pointer;

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

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

    backdrop-filter:
        blur(10px);

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

    transition:

        transform
        .5s
        var(--ease),

        border-color
        .4s
        ease,

        background
        .4s
        ease;

}


.radio-card input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


.radio-card span {

    font-size:
        10px;

    line-height:
        1.5;

    color:
        var(--white-soft);

}


.radio-card:has(
    input:checked
) {

    border-color:
        rgba(
            255,
            255,
            255,
            .85
        );

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

}


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

.submit-button {

    width:
        100%;

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 25px;

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

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

    backdrop-filter:
        blur(10px);

    color:
        var(--white);

    font-size:
        8px;

    letter-spacing:
        .28em;

    transition:

        transform
        .4s
        var(--ease),

        background
        .4s
        ease,

        color
        .4s
        ease;

}


.submit-button i {

    font-size:
        18px;

    font-style:
        normal;

}


@media (hover: hover) and (pointer: fine) {

    .submit-button:hover {

        transform:
            translateY(
                -2px
            );

        background:
            var(--white);

        color:
            var(--black);

    }

}


.submit-button:disabled {

    cursor:
        wait;

    opacity:
        .65;

}


.form-message {

    min-height:
        18px;

    margin-top:
        20px;

    text-align:
        center;

    font-size:
        10px;

    line-height:
        1.6;

}


.form-message.success {

    color:
        var(--white-soft);

}


.form-message.error {

    color:
        #ffb6b6;

}


/* =========================================================
   HONEYPOT
========================================================= */

.honeypot {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

    clip-path:
        inset(
            50%
        ) !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;

}


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

.final-section {

    position:
        relative;

    min-height:
        92vh;

    min-height:
        92svh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        120px 30px 155px;

    overflow:
        hidden;

    text-align:
        center;

    isolation:
        isolate;

}


.final-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    background:

        radial-gradient(

            circle
            at center,

            rgba(
                0,
                0,
                0,
                .06
            )
            0%,

            rgba(
                0,
                0,
                0,
                .30
            )
            58%,

            rgba(
                0,
                0,
                0,
                .62
            )
            100%

        );

}


.final-photo {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

}


.final-line {

    position:
        absolute;

    top:
        0;

    width:
        1px;

    height:
        100px;

    background:

        linear-gradient(

            to bottom,

            rgba(
                255,
                255,
                255,
                .50
            ),

            transparent

        );

}


.final-content {

    width:
        min(
            860px,
            100%
        );

    padding:
        48px
        50px;

}


.final-content > span {

    display:
        block;

    margin-bottom:
        34px;

    font-size:
        8px;

    letter-spacing:
        .5em;

    color:
        var(--gold-muted);

}


.final-content h2 {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    font-family:
        var(--display-serif);

    font-size:
        clamp(
            50px,
            7vw,
            104px
        );

    font-weight:
        400;

    line-height:
        .82;

    letter-spacing:
        -.04em;

}


.final-content h2 small {

    font-family:
        var(--serif);

    font-size:
        .4em;

    font-style:
        italic;

    color:
        var(--gold);

}


.final-content p {

    margin-top:
        40px;

    font-family:
        var(--serif);

    font-size:
        25px;

    color:
        var(--white-soft);

}


/* =========================================================
   FINAL BOTTOM / AACREATE
========================================================= */

.final-bottom {

    position:
        absolute;

    left:
        50%;

    bottom:
        25px;

    transform:
        translateX(
            -50%
        );

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    padding:
        0 20px;

    text-align:
        center;

}


.final-bottom-text {

    font-size:
        7px;

    line-height:
        1.6;

    letter-spacing:
        .35em;

    color:
        #777;

}


/* =========================================================
   AACREATE CLICKABLE LOGO
========================================================= */

.final-creator {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        4px;

    opacity:
        .72;

    transition:

        opacity
        .35s
        ease,

        transform
        .35s
        var(--ease);

}


.final-creator img {

    display:
        block;

    width:
        auto;

    height:
        30px;

    max-width:
        140px;

    object-fit:
        contain;

}


@media (hover: hover) and (pointer: fine) {

    .final-creator:hover {

        opacity:
            1;

        transform:
            translateY(
                -3px
            );

    }

}


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

@media (max-width: 900px) {

    .section {

        width:
            min(
                calc(
                    100% - 44px
                ),
                720px
            );

        padding:
            120px 0;

    }


    .section-number {

        position:
            static;

        margin-bottom:
            28px;

    }


    .section-heading,
    .details-grid,
    .timeline,
    .rsvp-form {

        margin-left:
            0;

    }


    .details-grid,
    .timeline,
    .rsvp-form {

        margin-top:
            40px;

    }


    .details-grid {

        grid-template-columns:
            1fr;

    }


    .editorial-section {

        width:
            min(
                calc(
                    100% - 44px
                ),
                820px
            );

        padding:
            80px
            0
            120px;

    }


    .editorial-grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            420px
            320px
            300px;

    }


    .editorial-photo--tall {

        grid-row:
            1;

        grid-column:
            1;

    }


    .editorial-note {

        grid-row:
            1;

        grid-column:
            2;

    }


    .editorial-photo--wide {

        grid-row:
            2;

        grid-column:
            1 / 3;

    }


    .editorial-photo--small {

        grid-row:
            3;

        grid-column:
            1 / 3;

    }

}


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

@media (max-width: 760px) {

    .hero {

        padding:
            16px;

    }


    .hero-panel {

        width:
            100%;

        min-height:
            auto;

    }


    .hero-panel-inner {

        min-height:
            760px;

        padding:
            30px
            22px
            24px;

    }


    .hero-label {

        font-size:
            5px;

        letter-spacing:
            .28em;

    }


    .hero-composition {

        min-height:
            610px;

    }


    .hero-names {

        top:
            38px;

        right:
            0;

    }


    .hero-name {

        font-size:
            clamp(
                50px,
                15vw,
                76px
            );

    }


    .hero-ampersand {

        font-size:
            38px;

    }


    .hero-date-editorial {

        top:
            245px;

        right:
            auto;

        left:
            0;

        flex-direction:
            row;

        align-items:
            center;

        gap:
            12px;

        font-size:
            26px;

    }


    .hero-date-editorial
    span:not(:last-child)::after {

        content:
            "·";

        margin-left:
            12px;

        color:
            var(--gold);

    }


    .hero-small-copy {

        display:
            none;

    }


    .hero-quote-new {

        top:
            315px;

        bottom:
            auto;

        max-width:
            100%;

        font-size:
            20px;

    }


    .hero-photo-small {

        width:
            78%;

        height:
            220px;

    }


    .hero-footer {

        gap:
            15px;

    }

}


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

@media (max-width: 650px) {

    body {

        background-attachment:
            scroll;

    }


    .section {

        width:
            min(
                calc(
                    100% - 30px
                ),
                560px
            );

        padding:
            95px 0;

    }


    .section-heading {

        padding:
            30px
            22px
            34px;

    }


    .section-heading h2 {

        font-size:
            clamp(
                52px,
                16vw,
                70px
            );

    }


    .section-heading p {

        font-size:
            10px;

    }


    .details-grid {

        margin-top:
            24px;

    }


    .detail {

        min-height:
            0;

        padding:
            28px
            22px;

    }


    .detail h3 {

        font-size:
            31px;

    }


    .editorial-section {

        width:
            calc(
                100% - 30px
            );

        padding:
            60px
            0
            95px;

    }


    .editorial-grid {

        display:
            flex;

        flex-direction:
            column;

    }


    .editorial-photo {

        min-height:
            350px;

    }


    .editorial-note {

        min-height:
            290px;

        padding:
            28px
            24px;

    }


    .editorial-note p {

        font-size:
            38px;

    }


    .timeline {

        gap:
            10px;

        margin-top:
            24px;

    }


    .timeline-item {

        grid-template-columns:
            76px
            1px
            1fr;

    }


    .timeline-time {

        padding:
            38px
            14px;

        font-size:
            7px;

    }


    .timeline-marker span {

        top:
            38px;

    }


    .timeline-content {

        padding:
            30px
            18px
            28px
            24px;

    }


    .timeline-content h3 {

        font-size:
            31px;

    }


    .timeline-content p {

        font-size:
            9px;

    }


    .dress-section {

        min-height:
            720px;

        padding:
            100px
            15px;

    }


    .dress-inner {

        padding:
            40px
            20px
            43px;

    }


    .dress-inner h2 {

        font-size:
            clamp(
                56px,
                17vw,
                76px
            );

    }


    .rsvp-form {

        margin-top:
            24px;

        padding:
            30px
            20px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .attendance-options {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .form-group {

        margin-bottom:
            34px;

    }


    .final-section {

        padding:
            100px
            15px
            155px;

    }


    .final-content {

        padding:
            38px
            18px
            42px;

    }


    .final-content h2 {

        flex-direction:
            column;

        gap:
            8px;

        font-size:
            clamp(
                52px,
                16vw,
                76px
            );

    }


    .final-content h2 small {

        font-size:
            32px;

    }


    .final-bottom {

        bottom:
            22px;

        gap:
            11px;

        padding:
            0 15px;

    }


    .final-bottom-text {

        font-size:
            6px;

        letter-spacing:
            .27em;

    }


    .final-creator img {

        height:
            27px;

        max-width:
            125px;

    }

}


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

@media (max-width: 430px) {

    .hero-panel-inner {

        min-height:
            720px;

    }


    .hero-composition {

        min-height:
            570px;

    }


    .hero-name {

        font-size:
            49px;

    }


    .hero-date-editorial {

        top:
            230px;

    }


    .hero-quote-new {

        top:
            295px;

        font-size:
            18px;

    }


    .hero-photo-small {

        width:
            61%;

        height:
            184px;

    }


    .final-creator img {

        height:
            25px;

        max-width:
            115px;

    }

}


/* =========================================================
   TOUCH
========================================================= */

@media (hover: none), (pointer: coarse) {

    .glass-card,
    .hero-panel,
    .radio-card,
    .submit-button {

        transform:
            none !important;

    }

}


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

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition-duration:
            .01ms !important;

    }


    .reveal {

        opacity:
            1;

        transform:
            none;

        filter:
            none;

    }

}