/* =========================================================
   TEDDY & ROSALINDA
   STAGE 2 - FULL WEDDING INVITATION
========================================================= */


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

:root {

    --ivory: #f7f2e9;
    --ivory-light: #fcfaf6;
    --sand: #e4d9c9;

    --olive: #42493d;
    --olive-dark: #252b24;
    --olive-soft: #6c7367;

    --brown: #735e4d;
    --gold: #ad9065;

    --black: #191a18;
    --white: #ffffff;

    --serif:
        "Italiana",
        serif;

    --editorial:
        "Playfair Display",
        serif;

    --body:
        "Manrope",
        sans-serif;

    --nav-height:
        82px;

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top:
        var(--nav-height);

}


body {

    background:
        var(--ivory);

    color:
        var(--black);

    font-family:
        var(--body);

    overflow-x:
        hidden;

}


body.menu-open {

    overflow:
        hidden;

}


img {

    width:
        100%;

    display:
        block;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


::selection {

    background:
        var(--olive);

    color:
        var(--ivory);

}


/* =========================================================
   NAVBAR
========================================================= */

.wedding-navbar {

    position:
        fixed;

    left:
        0;

    top:
        0;

    z-index:
        5000;

    width:
        100%;

    height:
        var(--nav-height);

    display:
        flex;

    align-items:
        center;

    color:
        var(--white);

    transition:
        .35s ease;

}


.wedding-navbar.scrolled,
.inner-nav {

    background:
        rgba(
            247,
            242,
            233,
            .97
        );

    color:
        var(--black);

    backdrop-filter:
        blur(16px);

    box-shadow:

        0 1px 0
        rgba(
            0,
            0,
            0,
            .08
        );

}


.wedding-nav-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-left:
        clamp(
            20px,
            5vw,
            80px
        );

    padding-right:
        clamp(
            20px,
            5vw,
            80px
        );

}


.wedding-brand {

    font-family:
        var(--serif);

    font-size:
        1.7rem;

    letter-spacing:
        .14em;

}


.wedding-brand span {

    color:
        var(--gold);

    font-family:
        var(--editorial);

    font-style:
        italic;

    font-size:
        1rem;

}


.wedding-nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        27px;

}


.wedding-nav-links a {

    position:
        relative;

    padding:
        8px 0;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        .59rem;

    font-weight:
        500;

}


.wedding-nav-links a::after {

    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        1px;

    background:
        currentColor;

    transition:
        .3s ease;

}


.wedding-nav-links a:hover::after,
.wedding-nav-links a.active::after {

    width:
        100%;

}


.nav-rsvp {

    border:
        1px solid currentColor;

    padding:
        11px 18px
        !important;

}


.nav-rsvp::after {

    display:
        none;

}


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

.mobile-menu-button {

    width:
        45px;

    height:
        45px;

    border:
        0;

    background:
        transparent;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-end;

    gap:
        7px;

    color:
        inherit;

}


.mobile-menu-button span {

    height:
        1px;

    background:
        currentColor;

}


.mobile-menu-button span:first-child {

    width:
        27px;

}


.mobile-menu-button span:last-child {

    width:
        18px;

}


.mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    background:
        var(--olive-dark);

    color:
        var(--ivory);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-18px);

    transition:
        .45s ease;

}


.mobile-menu.open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.mobile-menu-close {

    position:
        absolute;

    right:
        25px;

    top:
        24px;

    border:
        0;

    background:
        transparent;

    color:
        var(--ivory);

    font-size:
        1.4rem;

}


.mobile-menu-inner {

    min-height:
        100svh;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        38px;

}


.mobile-menu-label {

    margin-bottom:
        35px;

    color:
        #cfc7ba;

    text-transform:
        uppercase;

    letter-spacing:
        .22em;

    font-size:
        .58rem;

}


.mobile-menu-inner > a {

    font-family:
        var(--serif);

    font-size:
        clamp(
            2.5rem,
            11vw,
            4.5rem
        );

    line-height:
        1.25;

}


.mobile-menu-date {

    position:
        absolute;

    left:
        38px;

    bottom:
        35px;

    font-size:
        .62rem;

    text-transform:
        uppercase;

    letter-spacing:
        .2em;

    color:
        #bbb4a9;

}


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

.home-hero {

    position:
        relative;

    height:
        100svh;

    min-height:
        680px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    overflow:
        hidden;

}


.home-hero-image {

    position:
        absolute;

    inset:
        0;

    background:

        url(
            "https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=2000&q=92"
        )

        center 44%
        /
        cover
        no-repeat;

}


.home-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,

            rgba(
                10,
                12,
                10,
                .42
            ),

            rgba(
                10,
                12,
                10,
                .13
            )
            45%,

            rgba(
                10,
                12,
                10,
                .58
            )
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    padding-top:
        80px;

}


.hero-kicker,
.invitation-label {

    display:
        block;

    text-transform:
        uppercase;

    letter-spacing:
        .26em;

    font-size:
        .58rem;

}


.invitation-label {

    margin:
        25px 0 20px;

    color:
        #eee6db;

}


.hero-content h1 {

    font-family:
        var(--serif);

    font-size:
        clamp(
            4.2rem,
            11vw,
            9rem
        );

    line-height:
        .82;

    font-weight:
        400;

}


.hero-content h1 span {

    display:
        block;

    font-family:
        var(--editorial);

    font-size:
        .35em;

    font-style:
        italic;

    line-height:
        1.8;

}


.hero-line {

    width:
        80px;

    height:
        1px;

    margin:
        28px auto;

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

}


.hero-date {

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        .68rem;

}


.hero-location {

    margin-top:
        8px;

    font-family:
        var(--editorial);

    font-style:
        italic;

    font-size:
        .9rem;

}


.hero-actions {

    margin-top:
        38px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        25px;

}


.scroll-indicator {

    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    bottom:
        20px;

    transform:
        translateX(-50%);

    text-align:
        center;

}


.scroll-indicator span {

    display:
        block;

    font-size:
        .5rem;

    text-transform:
        uppercase;

    letter-spacing:
        .2em;

}


.scroll-indicator div {

    width:
        1px;

    height:
        35px;

    margin:
        10px auto 0;

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

}


/* =========================================================
   COMMON
========================================================= */

.section {

    padding:
        130px 20px;

}


.eyebrow {

    display:
        inline-block;

    color:
        var(--gold);

    text-transform:
        uppercase;

    letter-spacing:
        .25em;

    font-size:
        .59rem;

    font-weight:
        600;

}


.light-eyebrow {

    color:
        #e2cda9;

}


.center-copy {

    max-width:
        780px;

    margin:
        0 auto;

    text-align:
        center;

}


.center-copy h2,
.page-heading {

    margin:
        23px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            7vw,
            5.5rem
        );

    font-weight:
        400;

    line-height:
        1;

}


.center-copy h2 em,
.page-heading em {

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.center-copy p {

    max-width:
        560px;

    margin:
        0 auto;

    color:
        var(--olive-soft);

    line-height:
        2;

    font-size:
        .88rem;

}


/* =========================================================
   BUTTONS
========================================================= */

.luxury-button {

    min-width:
        210px;

    padding:
        16px 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

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

    background:
        var(--olive-dark);

    color:
        var(--ivory);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .58rem;

    transition:
        .3s ease;

}


.luxury-button:hover {

    color:
        var(--olive-dark);

    background:
        transparent;

}


.luxury-button.light {

    background:
        var(--ivory);

    color:
        var(--olive-dark);

    border-color:
        var(--ivory);

}


.luxury-button.light:hover {

    background:
        transparent;

    color:
        var(--ivory);

}


.text-button {

    border:
        0;

    background:
        transparent;

    padding:
        8px 0;

    display:
        inline-flex;

    gap:
        9px;

    align-items:
        center;

    border-bottom:
        1px solid
        currentColor;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

    font-size:
        .58rem;

}


.light-text {

    color:
        var(--white);

}


.underlined-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        currentColor;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .57rem;

}


/* =========================================================
   SPLIT
========================================================= */

.split-image {

    min-height:
        750px;

    height:
        100%;

}


.split-image img {

    height:
        100%;

    object-fit:
        cover;

}


.split-content {

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(
            70px,
            10vw,
            150px
        );

}


.split-content h2 {

    margin:
        25px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            6vw,
            5.4rem
        );

    line-height:
        .98;

}


.split-content h2 em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.split-content p {

    max-width:
        470px;

    color:
        var(--olive-soft);

    line-height:
        2;

    margin-bottom:
        30px;

}


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

.countdown-section {

    background:
        var(--ivory-light);

}


.countdown {

    max-width:
        900px;

    margin:
        70px auto 0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}


.countdown-item {

    flex:
        1;

    text-align:
        center;

}


.countdown-item strong {

    display:
        block;

    font-family:
        var(--serif);

    font-size:
        clamp(
            2.8rem,
            6vw,
            5rem
        );

    font-weight:
        400;

}


.countdown-item span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--olive-soft);

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        .54rem;

}


.countdown-line {

    width:
        1px;

    height:
        60px;

    background:
        var(--sand);

}


/* =========================================================
   EVENTS
========================================================= */

.events-section {

    padding:
        130px 20px;

}


.events-heading {

    max-width:
        700px;

    margin-bottom:
        55px;

}


.events-heading h2 {

    margin-top:
        22px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            7vw,
            5.4rem
        );

}


.events-heading h2 em {

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.event-panel {

    position:
        relative;

    min-height:
        510px;

    padding:
        55px;

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

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-end;

}


.event-panel.dark {

    background:
        var(--olive-dark);

    border-color:
        var(--olive-dark);

    color:
        var(--ivory);

}


.event-number {

    position:
        absolute;

    right:
        35px;

    top:
        25px;

    font-family:
        var(--serif);

    font-size:
        4rem;

    opacity:
        .08;

}


.event-icon {

    margin-bottom:
        auto;

    color:
        var(--gold);

    font-size:
        1.4rem;

}


.event-panel h3 {

    font-family:
        var(--serif);

    font-size:
        3rem;

}


.event-time {

    margin-top:
        15px;

    color:
        var(--gold);

    font-family:
        var(--editorial);

    font-style:
        italic;

}


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

.dress-section {

    padding:
        120px 20px;

    background:
        var(--ivory-light);

}


.dress-section h2 {

    margin:
        20px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            6vw,
            5rem
        );

}


.dress-section h2 em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.dress-section p {

    max-width:
        460px;

    line-height:
        2;

    color:
        var(--olive-soft);

}


.colour-palette {

    display:
        flex;

    gap:
        12px;

    margin:
        35px 0 20px;

}


.colour-palette span {

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

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

    box-shadow:
        0 0 0 1px
        rgba(
            0,
            0,
            0,
            .08
        );

}


.colour-one {
    background: #e8dfce;
}

.colour-two {
    background: #b8a07d;
}

.colour-three {
    background: #69705f;
}

.colour-four {
    background: #413b35;
}


.dress-label {

    font-family:
        var(--editorial);

    font-style:
        italic;

}


.dress-image {

    height:
        650px;

}


.dress-image img {

    height:
        100%;

    object-fit:
        cover;

}


/* =========================================================
   GALLERY PREVIEW
========================================================= */

.gallery-heading {

    margin-bottom:
        55px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

}


.gallery-heading h2 {

    margin-top:
        20px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            7vw,
            5.5rem
        );

}


.gallery-heading h2 em {

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.preview-grid {

    display:
        grid;

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

    gap:
        20px;

}


.preview-photo {

    min-height:
        330px;

}


.preview-photo.large {

    grid-row:
        span 2;

    min-height:
        680px;

}


.preview-photo img {

    height:
        100%;

    object-fit:
        cover;

}


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

.rsvp-cta {

    padding:
        140px 20px;

    background:
        var(--olive-dark);

    color:
        var(--ivory);

}


.rsvp-cta-content {

    max-width:
        760px;

    margin:
        auto;

    text-align:
        center;

}


.rsvp-cta-content h2 {

    margin:
        20px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            7vw,
            5.7rem
        );

}


.rsvp-cta-content h2 em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        #d9c7ab;

}


.rsvp-cta-content p {

    margin-bottom:
        35px;

    color:
        #d0cbc2;

}


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

.inner-page {

    padding-top:
        var(--nav-height);

}


.inner-hero {

    position:
        relative;

    height:
        70svh;

    min-height:
        550px;

    display:
        flex;

    align-items:
        flex-end;

    color:
        var(--white);

    background-size:
        cover;

    background-position:
        center;

}


.story-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=1800&q=90"
        );

}


.details-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1800&q=90"
        );

}


.programme-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1465495976277-4387d4b0e4a6?auto=format&fit=crop&w=1800&q=90"
        );

}


.gallery-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1800&q=90"
        );

}


.rsvp-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1800&q=90"
        );

}


.location-hero {

    background-image:

        url(
            "https://images.unsplash.com/photo-1507504031003-b417219a0fde?auto=format&fit=crop&w=1800&q=90"
        );

}


.inner-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,

            rgba(
                0,
                0,
                0,
                .15
            ),

            rgba(
                0,
                0,
                0,
                .62
            )
        );

}


.inner-hero-content {

    position:
        relative;

    z-index:
        2;

    padding-bottom:
        70px;

}


.inner-hero-content h1 {

    max-width:
        850px;

    margin:
        15px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            4rem,
            9vw,
            7.5rem
        );

    line-height:
        .9;

}


.inner-hero-content h1 em {

    display:
        block;

    font-family:
        var(--editorial);

}


.inner-hero-content p {

    color:
        rgba(
            255,
            255,
            255,
            .8
        );

}


/* =========================================================
   STORY
========================================================= */

.story-section {

    padding:
        20px 20px
        130px;

}


.story-row {

    max-width:
        1100px;

    margin:
        0 auto 120px;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
        90px;

    align-items:
        center;

}


.story-row.reverse {

    grid-template-columns:
        .9fr 1.1fr;

}


.story-row.reverse .story-photo {

    order:
        2;

}


.story-photo {

    height:
        650px;

}


.story-photo img {

    height:
        100%;

    object-fit:
        cover;

}


.story-number {

    display:
        block;

    margin-bottom:
        30px;

    font-family:
        var(--serif);

    font-size:
        4rem;

    color:
        rgba(
            0,
            0,
            0,
            .07
        );

}


.story-copy h2 {

    margin:
        20px 0;

    font-family:
        var(--serif);

    font-size:
        4rem;

}


.story-copy p {

    line-height:
        2;

    color:
        var(--olive-soft);

}


/* =========================================================
   QUOTE
========================================================= */

.quote-section {

    padding:
        140px 20px;

    background:
        var(--olive-dark);

    color:
        var(--ivory);

}


.quote-content {

    max-width:
        840px;

    margin:
        auto;

    text-align:
        center;

}


.quote-content span {

    color:
        var(--gold);

    letter-spacing:
        .25em;

    font-size:
        .6rem;

}


.quote-content blockquote {

    margin-top:
        30px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            2.7rem,
            6vw,
            5rem
        );

}


.quote-content blockquote em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        #d7c6ad;

}


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

.details-grid-section {

    padding:
        0 20px
        130px;

}


.details-grid {

    display:
        grid;

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

    gap:
        20px;

}


.details-card {

    position:
        relative;

    min-height:
        470px;

    padding:
        45px;

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

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-end;

}


.details-number {

    position:
        absolute;

    right:
        30px;

    top:
        20px;

    font-family:
        var(--serif);

    font-size:
        3.5rem;

    opacity:
        .07;

}


.details-card > i {

    margin-bottom:
        auto;

    color:
        var(--gold);

}


.details-card h3 {

    font-family:
        var(--serif);

    font-size:
        2.5rem;

}


.details-card strong {

    margin:
        12px 0;

    color:
        var(--brown);

    font-family:
        var(--editorial);

    font-weight:
        500;

}


.etiquette-list {

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

}


.etiquette-item {

    padding:
        30px 0;

    display:
        grid;

    grid-template-columns:
        80px 1fr;

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

}


.etiquette-item > span {

    font-family:
        var(--serif);

    color:
        var(--gold);

}


.etiquette-item h3 {

    font-family:
        var(--editorial);

    font-weight:
        500;

}


.etiquette-item p {

    color:
        var(--olive-soft);

}


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

.timeline {

    max-width:
        900px;

    margin:
        90px auto 0;

}


.timeline-item {

    display:
        grid;

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

    gap:
        25px;

    padding-bottom:
        60px;

}


.timeline-time {

    padding-top:
        3px;

    font-family:
        var(--editorial);

}


.timeline-dot {

    position:
        relative;

    width:
        12px;

    height:
        12px;

    margin-top:
        5px;

    border-radius:
        50%;

    background:
        var(--gold);

}


.timeline-dot::after {

    content: "";

    position:
        absolute;

    top:
        12px;

    left:
        50%;

    width:
        1px;

    height:
        90px;

    background:
        var(--sand);

}


.timeline-item:last-child
.timeline-dot::after {

    display:
        none;

}


.timeline-content span {

    color:
        var(--gold);

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        .55rem;

}


.timeline-content h3 {

    margin:
        8px 0;

    font-family:
        var(--serif);

    font-size:
        2.1rem;

}


.timeline-content p {

    color:
        var(--olive-soft);

}


/* =========================================================
   FULL GALLERY
========================================================= */

.wedding-gallery {

    margin-top:
        80px;

    display:
        grid;

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

    gap:
        25px;

}


.gallery-photo img {

    height:
        100%;

    object-fit:
        cover;

}


.gallery-a {

    grid-column:
        1 / 8;

    height:
        680px;

}


.gallery-b {

    grid-column:
        9 / 13;

    height:
        500px;

    margin-top:
        130px;

}


.gallery-c {

    grid-column:
        2 / 6;

    height:
        520px;

}


.gallery-quote {

    grid-column:
        7 / 13;

    align-self:
        center;

    padding:
        80px 30px;

}


.gallery-quote span {

    color:
        var(--gold);

    letter-spacing:
        .2em;

    font-size:
        .6rem;

}


.gallery-quote blockquote {

    margin-top:
        20px;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

}


.gallery-quote blockquote em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.gallery-d {

    grid-column:
        1 / 9;

    height:
        620px;

}


.gallery-e {

    grid-column:
        9 / 13;

    height:
        480px;

    margin-top:
        150px;

}


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

.rsvp-section {

    padding:
        120px 20px;

}


.rsvp-layout {

    max-width:
        1100px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        100px;

}


.rsvp-copy h2 {

    margin:
        20px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            3.5rem,
            6vw,
            5.5rem
        );

}


.rsvp-copy h2 em {

    display:
        block;

    font-family:
        var(--editorial);

    color:
        var(--brown);

}


.rsvp-copy p {

    color:
        var(--olive-soft);

    line-height:
        2;

}


.rsvp-date {

    margin-top:
        50px;

    padding-top:
        25px;

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

}


.rsvp-date span {

    display:
        block;

    color:
        var(--olive-soft);

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        .57rem;

}


.rsvp-date strong {

    display:
        block;

    margin-top:
        8px;

    font-family:
        var(--editorial);

    font-weight:
        500;

}


.rsvp-form {

    padding:
        50px;

    background:
        var(--ivory-light);

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

}


.form-field {

    margin-bottom:
        28px;

}


.form-field label {

    display:
        block;

    margin-bottom:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

    font-size:
        .55rem;

}


.form-field input,
.form-field select,
.form-field textarea {

    width:
        100%;

    border:
        0;

    border-bottom:
        1px solid
        #b9ae9d;

    outline:
        none;

    padding:
        12px 0;

    background:
        transparent;

}


.form-button {

    margin-top:
        10px;

    width:
        100%;

}


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

.location-grid {

    display:
        grid;

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

    gap:
        20px;

}


.location-card {

    position:
        relative;

    min-height:
        520px;

    padding:
        55px;

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

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

}


.location-card.dark {

    color:
        var(--ivory);

    background:
        var(--olive-dark);

    border-color:
        var(--olive-dark);

}


.location-number {

    position:
        absolute;

    top:
        20px;

    right:
        35px;

    font-family:
        var(--serif);

    font-size:
        4rem;

    opacity:
        .08;

}


.location-card h2 {

    margin:
        18px 0;

    font-family:
        var(--serif);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.3rem
        );

}


.location-card p {

    margin-bottom:
        30px;

    line-height:
        1.9;

}


.travel-note {

    padding:
        120px 20px;

    background:
        var(--ivory-light);

}


/* =========================================================
   PAGE CTA
========================================================= */

.page-cta {

    padding:
        120px 20px;

}


.dark-page-cta {

    background:
        var(--olive-dark);

    color:
        var(--ivory);

}


.dark-page-cta
.center-copy h2 em {

    color:
        #d8c7ad;

}


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

.wedding-footer {

    padding:
        90px 20px;

    text-align:
        center;

    background:
        var(--ivory-light);

}


.footer-monogram {

    font-family:
        var(--serif);

    font-size:
        2.8rem;

    letter-spacing:
        .14em;

}


.footer-monogram span {

    color:
        var(--gold);

    font-family:
        var(--editorial);

    font-style:
        italic;

    font-size:
        1.3rem;

}


.wedding-footer h3 {

    margin-top:
        18px;

    font-family:
        var(--editorial);

    font-style:
        italic;

    font-size:
        1.4rem;

    font-weight:
        500;

}


.wedding-footer p {

    margin-top:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

    font-size:
        .57rem;

}


.footer-links {

    margin-top:
        28px;

    display:
        flex;

    justify-content:
        center;

    gap:
        25px;

    flex-wrap:
        wrap;

}


.footer-links a {

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        .55rem;

}


.footer-divider {

    width:
        50px;

    height:
        1px;

    margin:
        30px auto;

    background:
        var(--gold);

}


.wedding-footer small {

    color:
        var(--olive-soft);

}


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

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

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

}


.reveal.visible {

    opacity:
        1;

    transform:
        none;

}


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

@media
(max-width: 991.98px) {


    :root {

        --nav-height:
            72px;

    }


    .split-image {

        min-height:
            600px;

    }


    .split-content {

        padding:
            80px 25px;

    }


    .details-grid {

        grid-template-columns:
            1fr;

    }


    .story-row,
    .story-row.reverse {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .story-row.reverse .story-photo {

        order:
            initial;

    }


    .rsvp-layout {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .location-grid {

        grid-template-columns:
            1fr;

    }


}


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

@media
(max-width: 767.98px) {


    .home-hero {

        min-height:
            620px;

    }


    .home-hero-image {

        background-position:
            58% center;

    }


    .hero-content {

        padding:
            85px 18px 0;

    }


    .hero-content h1 {

        font-size:
            4.1rem;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .section {

        padding:
            95px 18px;

    }


    .center-copy h2 {

        font-size:
            3.2rem;

    }


    .split-image {

        min-height:
            520px;

    }


    .countdown {

        gap:
            6px;

    }


    .countdown-item strong {

        font-size:
            2rem;

    }


    .countdown-item span {

        font-size:
            .43rem;

        letter-spacing:
            .09em;

    }


    .countdown-line {

        height:
            40px;

    }


    .events-section {

        padding:
            95px 18px;

    }


    .event-panel {

        padding:
            35px;

        min-height:
            440px;

    }


    .dress-image {

        height:
            520px;

    }


    .gallery-heading {

        display:
            block;

    }


    .gallery-heading
    .underlined-link {

        margin-top:
            20px;

    }


    .preview-grid {

        gap:
            12px;

    }


    .preview-photo.large {

        min-height:
            510px;

    }


    .preview-photo {

        min-height:
            249px;

    }


    .inner-hero {

        min-height:
            500px;

    }


    .inner-hero-content {

        padding:
            0 20px 45px;

    }


    .inner-hero-content h1 {

        font-size:
            4rem;

    }


    .story-section {

        padding:
            10px 18px
            90px;

    }


    .story-row {

        margin-bottom:
            90px;

    }


    .story-photo {

        height:
            520px;

    }


    .story-copy h2 {

        font-size:
            3.2rem;

    }


    .details-grid-section {

        padding:
            0 18px
            95px;

    }


    .details-card {

        min-height:
            430px;

        padding:
            35px;

    }


    .etiquette-item {

        grid-template-columns:
            50px 1fr;

    }


    .timeline {

        margin-top:
            65px;

    }


    .timeline-item {

        grid-template-columns:
            85px 25px 1fr;

        gap:
            12px;

    }


    .timeline-time {

        font-size:
            .8rem;

    }


    .timeline-content h3 {

        font-size:
            1.7rem;

    }


    .wedding-gallery {

        display:
            block;

    }


    .gallery-photo,
    .gallery-a,
    .gallery-b,
    .gallery-c,
    .gallery-d,
    .gallery-e {

        width:
            100%;

        height:
            auto;

        margin:
            0 0 28px;

    }


    .gallery-photo img {

        height:
            480px;

    }


    .gallery-b img,
    .gallery-c img,
    .gallery-e img {

        height:
            420px;

    }


    .gallery-quote {

        padding:
            70px 10px;

    }


    .rsvp-section {

        padding:
            90px 18px;

    }


    .rsvp-form {

        padding:
            30px 22px;

    }


    .location-card {

        padding:
            35px;

        min-height:
            470px;

    }


    .footer-links {

        gap:
            14px;

    }


}