/* ==========================================================
   VERA — DESIGN SYSTEM
========================================================== */

:root {

    --vera-teal: #008a94;
    --pasta-gold: #e8b923;
    --bright-yellow: #f4c430;
    --tomato-red: #ad5248;
    --pesto-green: #4a7c59;
    --warm-cream: #f5f0e6;
    --stone-beige: #d8d0c4;
    --soft-grey: #a8a8a8;
    --charcoal: #3d3d3d;
    --deep-black: #1a1a1a;
    --pure-white: #ffffff;

    --cream: var(--warm-cream);
    --sand: var(--stone-beige);
    --dark: var(--deep-black);
    --black: var(--deep-black);
    --terracotta: var(--tomato-red);
    --olive: var(--pesto-green);
    --white: var(--pure-white);

    --serif: "Montserrat", Helvetica, Arial, sans-serif;
    --sans: "DM Sans", Helvetica, Arial, sans-serif;

    --header-height: 82px;

    --container: 1400px;

}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--cream);
    color: var(--black);

    font-family: var(--sans);
    font-weight: 400;

    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

h1,
h2,
h3 {

    color: var(--vera-teal);

}

.hero h1,
.dish-hero h2,
.experience h2 {

    color: var(--pure-white);

}


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

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

.section-dark {
    background: var(--dark);
    color: var(--white);
}

.section-label {
    display: block;

    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.section-light .section-label {

    color: var(--deep-black);
    border-left: 2px solid var(--vera-teal);
    padding-left: 10px;

}

.section-dark .section-label {

    color: var(--pasta-gold);

}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 34px;

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

    letter-spacing: .12em;
    text-transform: uppercase;

    border-bottom: 1px solid currentColor;

    padding-bottom: 8px;
}

.text-link span {
    transition: transform .35s ease;
}

.text-link:hover span {
    transform: translateX(6px);
}

.text-link.light {
    color: var(--pasta-gold);
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    z-index: 100;

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

    align-items: center;

    padding: 0 42px;

    color: white;

    mix-blend-mode: difference;
}

.logo {

    display: block;
    width: 47px;
    height: 21px;

}

.logo img {

    width: 100%;
    height: 100%;
    object-fit: contain;
}

.desktop-nav {

    display: flex;
    align-items: center;
    gap: 34px;
}

.desktop-nav a,
.header-reserve {

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

    letter-spacing: .13em;
    text-transform: uppercase;
}

.desktop-nav a {
    opacity: .8;

    transition: opacity .3s ease;
}

.desktop-nav a:hover {
    opacity: 1;
}

.header-reserve {
    justify-self: end;
}

.mobile-menu-button {
    display: none;
}


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

.hero {

    position: relative;

    width: 100%;
    height: 100svh;

    min-height: 680px;

    overflow: hidden;

    color: white;
}

.hero-image {
    position: absolute;
    inset: 0;
}

.hero-image img {

    animation:
        heroImage 2s cubic-bezier(.2,.65,.2,1) forwards;

    transform: scale(1.06);
}

@keyframes heroImage {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }

}

.hero-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.25) 0%,
            rgba(0,0,0,.04) 45%,
            rgba(0,0,0,.45) 100%
        );
}

.hero-content {

    position: absolute;

    left: 8vw;
    bottom: 13vh;

    z-index: 2;
}

.eyebrow {

    margin: 0 0 18px;

    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.hero-title {

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(100px, 13vw, 200px);

    font-weight: 400;

    line-height: .72;

    letter-spacing: -.04em;
}

.hero-logo {

    display: block;
    width: clamp(190px, 23vw, 330px);
    height: auto;
    margin: 0;
    object-fit: contain;

}

.visually-hidden {

    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

}

.hero-subtitle {

    margin: 36px 0 0;

    font-family: var(--serif);

    font-size: clamp(30px, 3.3vw, 52px);

    line-height: .95;
}

.hero-button {

    display: inline-block;

    margin-top: 42px;

    padding: 14px 25px;

    border: 1px solid var(--vera-teal);
    background: var(--vera-teal);
    color: var(--deep-black);

    font-size: 11px;

    letter-spacing: .15em;
    text-transform: uppercase;

    transition:
        background .35s ease,
        color .35s ease;
}

.hero-button:hover {

    background: var(--pasta-gold);
    border-color: var(--pasta-gold);
    color: var(--deep-black);

}

.hero-scroll {

    position: absolute;

    right: 42px;
    bottom: 42px;

    display: flex;
    align-items: center;
    gap: 16px;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    writing-mode: vertical-rl;
}

.scroll-line {

    width: 1px;
    height: 55px;

    background: rgba(255,255,255,.7);
}


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

.intro {

    display: grid;

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

    gap: 10vw;

    align-items: center;

    padding: 13vw 9vw;
}

.intro-image {

    height: min(700px, 55vw);
}

.intro-content {

    max-width: 570px;

    padding-right: 4vw;
}

.intro-content h2 {

    margin: 28px 0 36px;

    font-family: var(--serif);

    font-size: clamp(52px, 5.7vw, 88px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.035em;
}

.intro-content p {

    max-width: 470px;

    margin: 0;

    font-size: 15px;

    line-height: 1.9;

    color: var(--charcoal);
}


/* ==========================================================
   ZAHIE
========================================================== */

.zahie {

    display: grid;

    background: var(--vera-teal);

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

    min-height: 850px;
}

.zahie-content {

    display: flex;

    flex-direction: column;
    justify-content: center;

    padding:
        10vw
        7vw
        10vw
        9vw;
}

.zahie-content h2 {

    margin: 30px 0;

    color: var(--pure-white);

    font-family: var(--serif);

    font-size: clamp(75px, 8vw, 130px);

    font-weight: 400;

    line-height: .78;

    letter-spacing: -.04em;
}

.zahie-content p {

    max-width: 430px;

    margin: 0;

    font-size: 15px;

    line-height: 1.9;

    color: rgba(255,255,255,.72);
}

.zahie-image {

    min-height: 700px;
}


/* ==========================================================
   KITCHEN
========================================================== */

.kitchen {

    padding: 12vw 0 14vw;
}

.section-heading {

    padding-left: 9vw;

    margin-bottom: 6vw;
}

.section-heading h2 {

    margin: 30px 0 0;

    font-family: var(--serif);

    font-size: clamp(90px, 12vw, 180px);

    font-weight: 400;

    line-height: .75;

    letter-spacing: -.05em;
}

.kitchen-image {

    width: 92vw;
    height: 58vw;

    max-height: 820px;

    margin-left: 4vw;

    overflow: hidden;
}

.kitchen-copy {

    max-width: 500px;

    margin:
        45px
        0
        0
        auto;

    padding-right: 8vw;
}

.kitchen-copy p {

    font-family: var(--serif);

    font-size: 30px;

    line-height: 1.05;
}


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

.menu-section {

    padding: 12vw 8vw 9vw;
    background: var(--pesto-green);
    color: var(--pure-white);
}


.menu-section .section-label {

    color: var(--pure-white);

}

.menu-section h2,
.menu-section h3 {

    color: var(--pure-white);

}
.menu-intro {

    max-width: 650px;

    margin-bottom: 8vw;
}

.menu-intro h2 {

    margin: 30px 0 0;

    font-family: var(--serif);

    font-size: clamp(65px, 8vw, 120px);

    font-weight: 400;

    line-height: .8;

    letter-spacing: -.04em;
}

.menu-grid {

    display: grid;

    grid-template-columns:
        .7fr
        1.3fr;

    gap: 7vw;

    align-items: center;
}

.menu-list {

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

.menu-category {

    display: grid;

    grid-template-columns: 40px 1fr;

    align-items: center;

    padding: 28px 0;

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

    opacity: .45;

    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;

    cursor: pointer;

    transition: opacity .3s ease;
}

.menu-category:hover,
.menu-category.active {

    opacity: 1;
}

.menu-category.active h3 {

    color: var(--pure-white);

}

.menu-category span {

    font-size: 10px;

    letter-spacing: .1em;
}

.menu-category h3 {

    margin: 0;

    font-family: var(--serif);

    font-size: 42px;

    font-weight: 400;
}

.menu-image {

    position: relative;

    height: min(620px, 48vw);

    overflow: hidden;
}

.menu-image::after {

    position: absolute;
    inset: 45% 0 0;

    background: linear-gradient(180deg, transparent, rgba(26,26,26,.8));
    content: "";

}

.menu-image-caption {

    position: absolute;

    left: 32px;
    bottom: 30px;

    z-index: 1;

    color: white;
}

.menu-image-caption span {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: .2em;

    text-transform: uppercase;
}

.menu-image-caption strong {

    font-family: var(--serif);

    font-size: 35px;

    font-weight: 400;
}

.menu-link-wrapper {

    margin-top: 70px;

    text-align: center;
}

.outline-button {

    display: inline-block;

    padding: 16px 30px;

    border: 1px solid var(--pure-white);
    color: var(--pure-white);

    font-size: 11px;

    letter-spacing: .15em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease;
}

.outline-button:hover {

    background: var(--pasta-gold);

    color: var(--deep-black);

}


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

.dish-hero {

    position: relative;

    height: 100svh;

    min-height: 650px;

    overflow: hidden;

    color: white;
}

.dish-hero img {

    transition: transform 1.5s cubic-bezier(.2,.6,.2,1);
}

.dish-hero:hover img {

    transform: scale(1.035);

}

.dish-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.58),
            rgba(0,0,0,.05)
        );
}

.dish-content {

    position: absolute;

    left: 9vw;
    bottom: 13vw;

    z-index: 2;
}

.dish-content h2 {

    margin: 30px 0 0;

    font-family: var(--serif);

    font-size: clamp(65px, 8vw, 125px);

    font-weight: 400;

    line-height: .8;

    letter-spacing: -.045em;
}


/* ==========================================================
   SPACE
========================================================== */

.space-section {

    padding: 13vw 8vw 14vw;
}

.space-heading {

    max-width: 700px;

    margin-bottom: 8vw;
}

.space-heading h2 {

    margin: 30px 0 0;

    font-family: var(--serif);

    font-size: clamp(60px, 7vw, 105px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.04em;
}

.space-gallery {

    position: relative;

    min-height: 900px;
}

.gallery-large {

    width: 72%;

    height: 700px;
}

.gallery-small {

    position: absolute;

    right: 0;
    bottom: 0;

    width: 38%;

    height: 460px;

    border: 15px solid var(--cream);
}


/* ==========================================================
   EXPERIENCE
========================================================== */

.experience {

    position: relative;

    height: 85svh;

    min-height: 650px;

    overflow: hidden;

    color: white;
}

.experience-image {

    position: absolute;
    inset: 0;
}

.experience-image img {

    transition: transform 1.5s ease;
}

.experience:hover img {

    transform: scale(1.025);

}

.experience-overlay {

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.28);
}

.experience-content {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.experience-content h2 {

    margin: 0;

    color: inherit;

    font-family: var(--serif);

    font-size: clamp(55px, 7vw, 110px);

    line-height: .8;

    letter-spacing: -.04em;
}


/* ==========================================================
   INSTAGRAM
========================================================== */

.instagram {

    padding: 12vw 5vw 13vw;
}

.instagram-header {

    display: grid;

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

    align-items: end;

    margin-bottom: 6vw;
}

.instagram-header h2 {

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(55px, 6vw, 90px);

    font-weight: 400;

    line-height: .8;
}

.instagram-header .text-link {

    justify-self: end;

    margin: 0;
}

.instagram-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        .8fr
        1fr;

    grid-template-rows:
        300px
        300px;

    gap: 12px;
}

.instagram-item {

    overflow: hidden;
}

.instagram-item img {

    transition: transform .7s cubic-bezier(.2,.6,.2,1);
}

.instagram-item:hover img {

    transform: scale(1.035);
}

.item-1 {
    grid-row: span 2;
}

.item-4 {
    grid-column: span 2;
}


/* ==========================================================
   RESERVATION
========================================================== */

.reservation {

    min-height: 85vh;

    background: var(--pesto-green);
    color: var(--pure-white);

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 10vw 5vw;
}

.reservation-content h2 {

    margin: 30px 0 55px;

    color: var(--pure-white);

    font-family: var(--serif);

    font-size: clamp(75px, 9vw, 135px);

    font-weight: 400;

    line-height: .75;

    letter-spacing: -.045em;
}

.reservation .section-label {

    color: var(--pure-white);

}

.reservation .reservation-button {

    padding: 16px 30px;
    border-color: var(--pure-white);
    background: transparent;
    color: var(--pure-white);
    letter-spacing: .15em;

}

.reservation .reservation-button:hover {

    background: var(--pasta-gold);
    border-color: var(--pasta-gold);
    color: var(--deep-black);

}

.reservation-button {

    display: inline-block;

    padding: 18px 35px;

    border: 1px solid rgba(255,255,255,.7);
    background: var(--vera-teal);
    color: var(--deep-black);

    font-size: 11px;

    letter-spacing: .16em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease;
}

.reservation-button:hover {

    background: var(--pasta-gold);

    border-color: var(--pasta-gold);
    color: var(--deep-black);

}

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

.footer {

    padding: 7vw 7vw 35px;
    background: var(--bright-yellow);
    color: var(--deep-black);
}

.footer-logo {

    margin-bottom: 7vw;

    font-size: clamp(100px, 18vw, 280px);

    line-height: .65;

    letter-spacing: -.07em;
}

.footer-logo img {

    width: min(100%, 638px);
    height: auto;
    object-fit: contain;
    filter: brightness(0);

}

.footer-columns {

    display: grid;

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

    gap: 50px;

    padding-bottom: 70px;

    border-bottom: 1px solid rgba(26,26,26,.3);
}

.footer-columns span {

    display: block;

    margin-bottom: 20px;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: .75;
}

.footer-columns p,
.footer-columns a {

    display: block;

    margin: 0 0 9px;

    font-size: 13px;

    line-height: 1.7;
}

.footer-columns a {

    transition: opacity .3s ease;
}

.footer-columns a:hover {

    opacity: .55;

}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 25px;

    font-size: 10px;

    letter-spacing: .08em;

    opacity: .7;
}


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

.reveal,
.reveal-image {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.65,.2,1);
}

.reveal.visible,
.reveal-image.visible {

    opacity: 1;

    transform: translateY(0);

}


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

@media (max-width: 900px) {

    .site-header {

        padding: 0 25px;

    }

    .desktop-nav,
    .header-reserve {

        display: none;

    }

    .site-header {

        display: flex;

        justify-content: space-between;

    }

    .mobile-menu-button {

        display: flex;

        width: 30px;
        height: 25px;

        padding: 0;

        border: 0;

        background: none;

        flex-direction: column;

        justify-content: center;

        gap: 7px;

        cursor: pointer;
    }

    .mobile-menu-button span {

        display: block;

        width: 100%;
        height: 1px;

        background: white;

    }

    .intro {

        gap: 7vw;

        padding: 15vw 7vw;

    }

    .zahie {

        grid-template-columns: 1fr;

    }

    .zahie-image {

        min-height: 75vw;

        order: -1;

    }

    .zahie-content {

        padding: 14vw 8vw;

    }

    .menu-grid {

        grid-template-columns: 1fr;

    }

    .menu-image {

        height: 70vw;

    }

    .space-gallery {

        min-height: 70vw;

    }

    .gallery-large {

        width: 75%;

        height: 55vw;

    }

    .gallery-small {

        width: 40%;

        height: 38vw;

    }

}


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

@media (max-width: 600px) {

    :root {
        --header-height: 70px;
    }

    .site-header {

        padding: 0 20px;

    }

    .logo {

        width: 43px;
        height: 19px;

    }


    /* HERO */

    .hero {

        min-height: 680px;

    }

    .hero-content {

        left: 25px;
        right: 25px;
        bottom: 100px;

    }

    .hero-title {

        font-size: 82px;

    }

    .hero-logo {

        width: min(235px, 72vw);

    }

    .hero-subtitle {

        margin-top: 25px;

        font-size: 34px;

    }

    .hero-button {

        margin-top: 30px;

    }

    .hero-scroll {

        display: none;

    }


    /* INTRO */

    .intro {

        display: block;

        padding: 90px 25px 110px;

    }

    .intro-image {

        height: 115vw;

        margin-bottom: 65px;

    }

    .intro-content {

        padding: 0;

    }

    .intro-content h2 {

        font-size: 57px;

    }

    .intro-content p {

        font-size: 14px;

        line-height: 1.85;

    }


    /* ZAHIE */

    .zahie-content {

        padding: 90px 25px 100px;

    }

    .zahie-content h2 {

        font-size: 75px;

    }

    .zahie-image {

        min-height: 120vw;

    }


    /* KITCHEN */

    .kitchen {

        padding: 100px 0 110px;

    }

    .section-heading {

        padding: 0 25px;

        margin-bottom: 55px;

    }

    .section-heading h2 {

        font-size: 78px;

    }

    .kitchen-image {

        width: 100%;

        height: 120vw;

        margin: 0;

    }

    .kitchen-copy {

        margin: 35px 25px 0;

        padding: 0;

    }

    .kitchen-copy p {

        font-size: 27px;

    }


    /* MENU */

    .menu-section {

        padding: 95px 25px 85px;

    }

    .menu-intro {

        margin-bottom: 60px;

    }

    .menu-intro h2 {

        font-size: 68px;

    }

    .menu-category {

        padding: 22px 0;

    }

    .menu-category h3 {

        font-size: 35px;

    }

    .menu-image {

        height: 110vw;

    }

    .menu-image-caption strong {

        font-size: 30px;

    }


    /* DISH */

    .dish-hero {

        min-height: 700px;

    }

    .dish-content {

        left: 25px;
        right: 25px;
        bottom: 80px;

    }

    .dish-content h2 {

        font-size: 70px;

    }


    /* SPACE */

    .space-section {

        padding: 100px 25px 110px;

    }

    .space-heading {

        margin-bottom: 60px;

    }

    .space-heading h2 {

        font-size: 52px;

    }

    .space-gallery {

        min-height: 120vw;

    }

    .gallery-large {

        width: 88%;

        height: 90vw;

    }

    .gallery-small {

        width: 48%;

        height: 55vw;

        border-width: 8px;

    }


    /* EXPERIENCE */

    .experience {

        min-height: 650px;

    }

    .experience-content h2 {

        font-size: 62px;

    }


    /* INSTAGRAM */

    .instagram {

        padding: 95px 20px 100px;

    }

    .instagram-header {

        display: block;

        margin-bottom: 50px;

    }

    .instagram-header h2 {

        margin-top: 25px;

        font-size: 56px;

    }

    .instagram-header .text-link {

        margin-top: 30px;

    }

    .instagram-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows: auto;

        gap: 7px;

    }

    .instagram-item {

        height: 47vw;

    }

    .item-1 {

        grid-row: span 1;

    }

    .item-4 {

        grid-column: span 1;

    }


    /* RESERVATION */

    .reservation {

        min-height: 720px;

        padding: 90px 25px;

    }

    .reservation-content,
    .footer-columns {

        min-width: 0;

    }

    .reservation-content h2 {

        font-size: 64px;

    }

    /* FOOTER */

    .footer {

        padding: 75px 25px 30px;

    }

    .footer-logo {

        font-size: 115px;

        margin-bottom: 80px;

    }

    .footer-columns {

        grid-template-columns: 1fr 1fr;

        gap: 50px 25px;

    }

    .footer-columns > div:first-child {

        grid-column: span 2;

    }

    .footer-bottom {

        display: block;

        line-height: 2;

    }

    .footer-bottom span {

        display: block;

    }

}


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

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 200;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--vera-teal);

    color: var(--deep-black);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.mobile-menu.open {

    opacity: 1;

    visibility: visible;

}

.mobile-menu nav {

    display: flex;

    flex-direction: column;

    gap: 22px;

    text-align: center;
}

.mobile-menu nav a {

    font-family: var(--serif);

    font-size: 48px;
    color: var(--pure-white);

}

.mobile-menu-close {

    position: absolute;

    top: 22px;
    right: 25px;

    border: 0;

    background: none;

    color: var(--pure-white);

    font-size: 38px;

    cursor: pointer;

}


/* ==========================================================
   BRAND TYPOGRAPHY
========================================================== */

.logo,
.hero-title,
.hero-subtitle,
.intro-content h2,
.zahie-content h2,
.section-heading h2,
.kitchen-copy p,
.menu-intro h2,
.menu-category h3,
.menu-image-caption strong,
.dish-content h2,
.space-heading h2,
.experience-content h2,
.instagram-header h2,
.reservation-content h2,
.footer-logo,
.mobile-menu nav a {

    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.045em;

}

.logo {

    font-weight: 800;
    letter-spacing: .08em;

}

.hero-title,
.footer-logo {

    font-weight: 800;

}


/* ==========================================================
   INNER PAGES
========================================================== */

.inner-page {

    background: var(--warm-cream);

}

.story-hero {

    display: grid;
    grid-template-columns: .85fr 1.15fr;
    min-height: 100svh;
    padding-top: var(--header-height);
    background: var(--vera-teal);

}

.story-hero-content {

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;

}

.story-hero-content h1,
.booking-heading h1 {

    margin: 28px 0 35px;
    font-family: var(--serif);
    font-size: clamp(70px, 9vw, 145px);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.06em;

}

.story-hero-content h1 {

    color: var(--pure-white);

}

.story-hero-content p,
.booking-heading > p {

    max-width: 420px;
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.75);

}

.story-hero-image {

    min-height: 650px;

}

.story-intro {

    padding: 12vw 9vw;

}

.story-intro-grid {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 10vw;
    align-items: start;
    margin-top: 55px;

}

.story-intro h2,
.story-values-content h2 {

    margin: 0;
    font-family: var(--serif);
    font-size: clamp(48px, 6vw, 90px);
    font-weight: 700;
    line-height: .88;
    letter-spacing: -.05em;

}

.story-intro-grid p,
.story-values-content p {

    max-width: 470px;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--charcoal);

}

.story-values {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;

}

.story-values-image {

    height: min(760px, 62vw);

}

.story-values-content {

    padding: 8vw;

}

.story-values-content h2 {

    margin: 30px 0;

}

.story-quote {

    display: flex;
    justify-content: center;
    padding: 13vw 9vw;
    text-align: center;

}

.story-quote p {

    max-width: 880px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 75px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.05em;

}

.booking-page {

    min-height: 100svh;
    padding: calc(var(--header-height) + 10vw) 9vw 12vw;

}

.booking-heading {

    max-width: 780px;
    margin-bottom: 8vw;

}

.booking-heading h1 {

    color: var(--deep-black);

}

.booking-heading > p {

    color: var(--charcoal);

}

.booking-layout {

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: clamp(64px, 9vw, 150px);
    align-items: start;

}

.booking-widget {

    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 280px;
    max-width: 100%;
    min-height: 377px;
    margin-inline: auto;

}

.booking-widget iframe {

    display: block;
    width: 224px !important;
    height: 301px !important;
    max-width: none;
    transform: scale(1.25);
    transform-origin: top left;

}

.booking-widget > div {

    width: 280px !important;
    height: 377px;
    max-width: 100%;
    margin: 0;

}

.booking-form {

    display: grid;
    gap: 26px;
    max-width: 760px;

}

.form-row {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

}

.form-field {

    display: grid;
    gap: 9px;

}

.form-field label {

    color: var(--deep-black);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;

}

.form-field label span {

    color: var(--charcoal);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;

}

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

    width: 100%;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid var(--stone-beige);
    border-radius: 0;
    background: transparent;
    color: var(--deep-black);
    font: inherit;
    outline: none;

}

.form-field textarea {

    resize: vertical;

}

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

    border-bottom-color: var(--vera-teal);
    box-shadow: 0 1px 0 var(--vera-teal);

}

.booking-form .reservation-button {

    justify-self: start;
    margin-top: 12px;
    border: 1px solid var(--deep-black);
    background: var(--deep-black);
    color: var(--pure-white);
    cursor: pointer;

}

.booking-form .reservation-button:hover {

    border-color: var(--pasta-gold);
    background: var(--pasta-gold);
    color: var(--deep-black);

}

.form-note {

    max-width: 530px;
    margin: -10px 0 0;
    color: var(--charcoal);
    font-size: 12px;
    line-height: 1.6;

}

.form-status {

    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid var(--pesto-green);
    background: rgba(74,124,89,.12);
    color: var(--deep-black);
    font-size: 13px;
    line-height: 1.6;

}

.booking-details {

    display: grid;
    gap: 42px;
    padding-top: 8px;
    border-top: 1px solid var(--stone-beige);

}

.booking-detail {

    padding-top: 25px;
    border-top: 1px solid var(--stone-beige);

}

.booking-detail:first-child {

    border-top: 0;

}

.booking-detail .section-label {

    color: var(--deep-black);

}

.booking-detail p {

    margin: 18px 0 0;
    color: var(--charcoal);
    font-size: 15px;
    line-height: 1.8;

}

@media (max-width: 900px) {

    .story-hero,
    .story-values,
    .story-intro-grid,
    .booking-layout {

        grid-template-columns: 1fr;

    }

    .story-hero-image {

        min-height: 75vw;
        order: -1;

    }

    .story-hero-content {

        padding: 14vw 8vw;

    }

    .story-values-image {

        height: 75vw;

    }

    .story-values-content {

        padding: 14vw 8vw;

    }

    .booking-details {

        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        padding-top: 0;
        border-top: 0;

    }

    .booking-detail:first-child {

        border-top: 1px solid var(--stone-beige);

    }

}

@media (max-width: 600px) {

    .story-hero-content h1,
    .booking-heading h1 {

        font-size: 58px;
        overflow-wrap: break-word;

    }

    .story-intro,
    .booking-page {

        padding: 90px 25px 110px;

    }

    .story-intro-grid {

        gap: 50px;
        margin-top: 45px;

    }

    .story-values-content {

        padding: 90px 25px 110px;

    }

    .form-row,
    .booking-details {

        grid-template-columns: 1fr;

    }

    .booking-heading {

        margin-bottom: 65px;

    }

}