:root {
    --primary-color: #151a1e;
    /*--secondary-color: #ffffffaa;*/
    --secondary-color: #e9e0d2;
    --header-font: Argesta;
    --content-font: Poppins, sans-serif;
    --transition: 0.2s ease-in-out all;
    --default-border: 1px solid rgba(255,255,255,0.3);
    --line-soft: rgba(232, 222, 207, .63);
    --brass: #b89a65;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-weight: initial;
    padding: 0;
    margin: 0;
}

html, body {
    font-size: 16px;
    overflow-x: hidden;
}

html, body { scrollbar-width: thin; scrollbar-color: rgba(184, 154, 101, .4) #0b0d0d; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #0b0d0d; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
    border: 2px solid #0b0d0d;
    border-radius: 8px;
    background: rgba(184, 154, 101, .5);
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgba(184, 154, 101, .76); }
#pageNavigation { scrollbar-width: thin; scrollbar-color: rgba(184, 154, 101, .35) transparent; }
#pageNavigation::-webkit-scrollbar { width: 5px; }
#pageNavigation::-webkit-scrollbar-track { background: transparent; }
#pageNavigation::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(184, 154, 101, .4); }

body {
    margin: 0;
    padding: 0;
    font-family: var(--content-font);
    min-height: 100dvh;
    line-height: 1.5;
    background: #151a1e;
}

/* layout */

#pageNavigation {
    position: fixed;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: 0;
    width: 25vw;
    display: flex;
    align-items: center;
    padding-left: 4vw;
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(10px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.19, .8, .25, 1), filter 1.6s ease;
}

    #pageNavigation.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

video {
    width: 1920px;
}

.hero {
    position: fixed;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.heroImage {
    display: block;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.08);
    filter: blur(20px);
    transition: opacity 2.4s ease, transform 8s cubic-bezier(.19,.8,.25,1), filter 3.2s ease;
}

    .heroImage[data-overlay="on"]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.48) 45%, rgba(0,0,0,0.82) 100% ), linear-gradient( 90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.65) 100% ), radial-gradient( circle at center, rgba(255,220,180,0.05) 0%, transparent 45% );
        pointer-events: none;
        opacity: 0.75;
    }

    .heroImage.is-visible {
        opacity: 1;
        transform: scale(1.00);
        filter: blur(0);
    }

    .heroImage.giftHeroImage.is-visible {
        filter: blur(0) brightness(1.42) sepia(.12) saturate(1.14);
    }

    .heroImage.pairingsHeroImage.is-visible {
        filter: blur(0) brightness(1.62) saturate(1.12);
    }

.nextChapter {
    width: min(100%, 980px);
    position: relative;
    margin-top: clamp(8px, 2vw, 28px);
    border-top: 1px solid rgba(232, 222, 207, .32);
}

.nextChapter::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: clamp(48px, 5vw, 84px);
    height: 1px;
    background: var(--brass);
    pointer-events: none;
}
.nextChapter a {
    display: block;
    padding: clamp(34px, 3.5vw, 58px) 0 clamp(38px, 4vw, 66px);
    color: var(--secondary-color);
    font-family: var(--header-font);
    font-size: clamp(1.7rem, 2.1vw, 2.6rem);
    line-height: 1.08;
    text-decoration: none;
    transition: color .45s ease;
}
.nextChapter a:hover, .nextChapter a:focus-visible { color: #fff; }
.nextChapter a:focus-visible { outline: 1px solid var(--brass); outline-offset: 9px; }

.chapter-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 1.5vw, 22px);
    transition: transform .65s cubic-bezier(.19,.8,.25,1);
}
.nextChapter a:hover .chapter-title, .nextChapter a:focus-visible .chapter-title { transform: translateX(8px); }

.chapter-title label {
    color: var(--brass);
    font-family: var(--content-font);
    font-size: .64rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: inherit;
}
.chapter-preview {
    display: block;
    max-width: 36rem;
    margin-top: clamp(18px, 1.8vw, 26px);
    color: rgba(233, 224, 210, .72);
    font: 300 clamp(.85rem, .84vw, .98rem)/1.7 var(--content-font);
    letter-spacing: .015em;
    transition: color .45s ease;
}
.nextChapter a:hover .chapter-preview, .nextChapter a:focus-visible .chapter-preview {
    color: rgba(233, 224, 210, .9);
}


.reservation {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 0 16px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,0.72);
    background: transparent;
    border: none;
    overflow: hidden;
    transition: color 0.45s ease, opacity 0.45s ease, letter-spacing 0.45s ease;
    opacity: 0.88;
    cursor: pointer;
    margin-top: 5vh;
}

    .reservation::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.18) 20%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.02) 100% );
        opacity: 0.45;
        transform: scaleX(0.92);
        transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    }

    .reservation::before {
        content: "";
        position: absolute;
        bottom: -1px;
        left: -35%;
        width: 30%;
        height: 3px;
        background: radial-gradient( ellipse at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0) 100% );
        filter: blur(4px);
        opacity: 0;
        transition: left 1.2s cubic-bezier(.19,.8,.25,1), opacity 0.6s ease;
    }

    .reservation:hover {
        color: rgba(255,255,255,0.96);
        letter-spacing: 0.34em;
        opacity: 1;
    }

        .reservation:hover::after {
            opacity: 0.75;
            transform: scaleX(1);
            filter: blur(0.2px);
        }

        .reservation:hover::before {
            left: 105%;
            opacity: 1;
        }

.heroContent {
    position: fixed;
    bottom: 10vh;
    left: 15vw;
    right: 30vw;
}

#content {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 100dvh;
    padding: 20vw 50vh;
    padding-left: 18vw;
    padding-right: 47vw;
    gap: 5vh;
    flex-direction: column;
}

@media (min-width: 1181px) {
    #content { padding-bottom: clamp(96px, 10vw, 165px); }
}

    #content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        backdrop-filter: blur(10px) saturate(80%);
        -webkit-backdrop-filter: blur(10px) saturate(80%);
        mask-image: linear-gradient( to bottom, transparent 0, rgba(0,0,0,0.15) 4vh, rgba(0,0,0,0.45) 10vh, rgba(0,0,0,0.75) 18vh, black 25vh, black 100% );
        -webkit-mask-image: linear-gradient( to bottom, transparent 0, rgba(0,0,0,0.15) 4vh, rgba(0,0,0,0.45) 10vh, rgba(0,0,0,0.75) 18vh, black 25vh, black 100% );
        background: rgba(0, 0, 0, 0.45);
    }

    #content p {
        color: var(--secondary-color);
        font-size: 1rem;
        line-height: 1.85;
        margin-top: 5vh;
    }

    #content h2 {
        max-width: 840px;
        color: var(--secondary-color);
        font-family: var(--header-font);
        font-size: clamp(2.35rem, 3.7vw, 4.5rem);
        font-weight: 400;
        letter-spacing: -.025em;
        line-height: .98;
    }

.sectionImage {
    width: 90vw;
    height: 62vh;
    margin-left: -23vw;
    margin-right: -50vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%), linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%), linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    transform: scale(1.04) translateY(40px);
    filter: blur(18px);
    transition: opacity 2s ease, transform 3.5s cubic-bezier(.19,.8,.25,1), filter 3.5s ease;
}

    .sectionImage.is-visible {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }

    .sectionImage::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.52) 85%), rgba(8, 14, 18, 0.16);
        pointer-events: none;
    }

    .sectionImage.detailed {
        /* kitchen / chef / craftsmanship */
        opacity: 0.88;
        filter: brightness(0.85) contrast(1.38) saturate(0.82);
        transform: scale(1.01);
    }

    .sectionImage.atmosphere {
        /* dining room / silence / memory */
        opacity: 0.68;
        filter: brightness(0.58) contrast(1.02) saturate(0.62) blur(0.5px);
    }

    .sectionImage.food {
        /* emotional fragments of dishes */
        opacity: 0.74;
        filter: brightness(0.66) contrast(1.24) saturate(0.78) blur(0.2px);
    }

    .sectionImage.people {
        /* guests / silhouettes / presence */
        opacity: 0.58;
        filter: brightness(0.54) contrast(0.96) saturate(0.52) blur(1.2px);
    }

.sectionCaption {
    position: absolute;
    z-index: 2;
    isolation: isolate;
    left: 23vw;
    max-width: 15vw;
    bottom: 15vh;
    color: rgba(250, 245, 237, 0.94);
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    filter: blur(8px);
    transition: opacity 2.2s ease, transform 2.8s cubic-bezier(.19, .8, .25, 1), filter 2.8s ease;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}

.sectionCaption::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -38px -52px;
    background: radial-gradient(ellipse at 45% 50%, rgba(7, 10, 11, .77) 0%, rgba(7, 10, 11, .58) 48%, transparent 82%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: radial-gradient(ellipse at 45% 50%, #000 0%, #000 40%, transparent 83%);
    mask-image: radial-gradient(ellipse at 45% 50%, #000 0%, #000 40%, transparent 83%);
    pointer-events: none;
}

.sectionImage.is-visible .sectionCaption {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: 0.8s;
}

#experiences {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 5vw;
    color: var(--secondary-color);
}

    #experiences h3 {
        color: var(--secondary-color);
        max-width: 30vw;
        font-size: 1.5rem;
        letter-spacing: 8px;
        text-transform: uppercase;
        color: #ffffffdd;
        margin-bottom: -2px;
    }

.hidden {
    display: none;
}
/* text */

.quietNote {
    position: relative;
}

.heroContent h1, .statementHeader {
    font-family: var(--header-font);
    color: var(--secondary-color);
    max-width: 35vw;
    /*font-size: 3.5rem;
    line-height: 1;*/
    font-size: clamp(3.4rem, 5.5vw, 6.6rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .92;
    text-wrap: balance;
}

.tastingOptions {
    margin: 28px 0 44px;
    color: var(--secondary-color);
}
.tastingOptionsList { margin-top: 26px; }
.tastingOption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
}
.tastingOption + .tastingOption { border-top: 1px solid rgba(232,222,207,.18); }
.tastingOption h3 {
    margin: 0;
    color: var(--secondary-color);
    font: 400 clamp(1.7rem, 2.5vw, 2.3rem)/1.12 var(--header-font);
    letter-spacing: -.02em;
}
#content .tastingOption .tastingMoments {
    margin: 9px 0 0;
    color: rgba(233,224,210,.7);
    font: 300 .76rem/1.5 var(--content-font);
    letter-spacing: .07em;
}
#content .tastingOption .tastingPrice {
    margin: 0;
    color: var(--secondary-color);
    font: 400 clamp(1.7rem, 2.5vw, 2.3rem)/1.12 var(--header-font);
    text-align: right;
    white-space: nowrap;
}
.tastingPrice span {
    display: block;
    margin-top: 9px;
    color: rgba(233,224,210,.7);
    font: 300 .68rem/1.5 var(--content-font);
    letter-spacing: .04em;
}
#content .tastingOptions .tastingPriceNote {
    margin: 14px 0 0;
    color: rgba(233,224,210,.7);
    font: 300 .76rem/1.6 var(--content-font);
}
.menuExperienceSummary {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--secondary-color);
    font: 300 .82rem/1.65 var(--content-font);
    letter-spacing: .01em;
}
.menuExperienceSummary small {
    margin-top: 3px;
    color: rgba(233,224,210,.7);
    font-size: .7rem;
}
@media (max-width: 600px) {
    .tastingOptions { margin: 12px 0 28px; }
    .tastingOption { gap: 16px; padding: 20px 0; }
}

.hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 13, 12, .98) 0%, rgba(11, 13, 12, .84) 28%, rgba(11, 13, 12, .26) 64%, rgba(11, 13, 12, .16) 100%), linear-gradient(0deg, rgba(11, 13, 12, .88) 0%, transparent 42%, rgba(11, 13, 12, .22) 100%);
    content: "";
}

@media (min-width: 1181px) {
    #header .hero:has(> .giftHeroImage)::after {
        background: linear-gradient(90deg, rgba(11, 13, 12, .82) 0%, rgba(11, 13, 12, .61) 28%, rgba(11, 13, 12, .11) 64%, rgba(11, 13, 12, .28) 100%),
                    linear-gradient(0deg, rgba(11, 13, 12, .64) 0%, transparent 42%, rgba(11, 13, 12, .13) 100%);
    }
    #header .hero:has(> .pairingsHeroImage)::after {
        background: linear-gradient(90deg, rgba(11, 13, 12, .73) 0%, rgba(11, 13, 12, .48) 28%, rgba(11, 13, 12, .08) 64%, rgba(11, 13, 12, .28) 100%),
                    linear-gradient(0deg, rgba(11, 13, 12, .53) 0%, transparent 42%, rgba(11, 13, 12, .10) 100%);
    }
    #header .hero:has(> .teamHeroImage)::after {
        background: linear-gradient(90deg, rgba(11, 13, 12, .88) 0%, rgba(11, 13, 12, .60) 29%, rgba(11, 13, 12, .08) 64%, rgba(11, 13, 12, .24) 100%),
                    linear-gradient(0deg, rgba(11, 13, 12, .70) 0%, transparent 43%, rgba(11, 13, 12, .10) 100%);
    }
}

.sectionImage.teamImage.is-visible {
    filter: brightness(1.27) contrast(1.06) saturate(1.06);
}
.sectionImage.teamImage::after {
    background: radial-gradient(circle at center, transparent 8%, rgba(0,0,0,.26) 100%), rgba(31,19,10,.045);
}

.statementHeader {
    font-size: 3.5rem;
    display: block;
    line-height: initial;
    color: var(--line-soft);
    margin-top: 5vh;
}

.languageSwitch {
    position: absolute;
    right: 3vw;
    bottom: 5vh;
    display: flex;
    gap: 12px;
    color: var(--secondary-color);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
}
.languageSwitch span { color: var(--brass); }
.languageSwitch a { color: var(--secondary-color); opacity: .7; text-decoration: none; }
.languageSwitch a:hover { opacity: 1; }

/* Quiet installation affordance beneath the experience index. */
#pageNavigation .installAppButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 24px;
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid rgba(232, 222, 207, .25);
    background: transparent;
    color: var(--line-soft);
    font-family: var(--content-font);
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease;
}
#pageNavigation .installAppButton[hidden] { display: none; }
#pageNavigation .installAppButton:hover, #pageNavigation .installAppButton:focus-visible { color: #fff; }
.installAppMark { color: var(--brass); font-size: 1rem; line-height: 1; }
.installAppDialog {
    width: min(420px, calc(100vw - 40px));
    margin: auto;
    padding: 35px;
    border: 1px solid rgba(232, 222, 207, .25);
    background: #101313;
    color: var(--secondary-color);
    box-shadow: 0 30px 100px rgba(0,0,0,.6);
}
.installAppDialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.installAppDialog h2 { font-family: var(--header-font); font-size: 2.2rem; font-weight: 400; line-height: 1.08; }
.installAppDialog p { margin: 20px 0 28px; color: var(--line-soft); font: 1rem/1.55 var(--content-font); }
.installAppDialog button { padding: 12px 0; border: 0; border-bottom: 1px solid var(--brass); background: none; color: var(--secondary-color); font: .75rem var(--content-font); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }

@media (min-width: 1181px) {
    #pageNavigation nav { width: min(100%, 300px); }
    #pageNavigation nav::before {
        content: "Discover the evening";
        display: block;
        margin: 4px 0 7px;
        padding-bottom: 9px;
        color: var(--brass);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .17em;
        border-bottom: 1px solid rgba(232, 222, 207, .25);
    }
    html[lang="sl"] #pageNavigation nav::before { content: "Odkrijte večer"; }
    #pageNavigation nav .reservation {
        order: -1;
        display: flex;
        width: 100%;
        min-height: 68px;
        margin: 0 0 28px;
        padding: 0 20px;
        border: 1px solid rgba(184, 154, 101, .7);
        background: linear-gradient(105deg, rgba(184, 154, 101, .23), rgba(184, 154, 101, .07));
        color: #f2e8d8;
        opacity: 1;
        font-family: var(--content-font);
        font-size: .86rem;
        font-weight: 600;
        letter-spacing: .12em;
        box-shadow: 0 12px 36px rgba(0, 0, 0, .2);
        transition: color .25s, background .25s, border-color .25s;
    }
    #pageNavigation nav .reservation::before, #pageNavigation nav .reservation::after { display: none; }
    #pageNavigation nav .reservation:hover, #pageNavigation nav .reservation:focus-within {
        color: #0b0d0d;
        background: #b89a65;
        border-color: #b89a65;
        letter-spacing: .12em;
    }
    #pageNavigation nav .reservation-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
    #pageNavigation nav .reservation-title:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
    #pageNavigation nav .reservation-title::after { content: "↗"; float: right; font-size: 1.05rem; line-height: 1; }
    #pageNavigation nav a {
        padding: 9px 0 11px;
        border-bottom: 1px solid rgba(232, 222, 207, .12);
        line-height: 1.22;
        text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
        transition: color .25s, border-color .25s, transform .25s;
    }
    #pageNavigation nav a:hover {
        color: #f2e8d8;
        border-bottom-color: rgba(184, 154, 101, .75);
        letter-spacing: 1px;
        transform: translateX(3px);
    }
    #pageNavigation nav .link-header { color: #d7c6aa; opacity: .6; font-size: .64rem; letter-spacing: .09em; }
}

.reservation-intro, .reservation-arrow { display: none; }

/* The reservation is an editorial invitation, not a boxed control. */
@media (min-width: 1181px) {
    #pageNavigation nav::before { content: "Explore"; margin: 0 0 8px; padding: 0; border: 0; }
    html[lang="sl"] #pageNavigation nav::before { content: "Odkrijte"; }
    #pageNavigation nav .reservation {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        margin-bottom: clamp(42px, 5vh, 64px);
        padding: 0 0 20px;
        border: 0;
        border-bottom: 1px solid rgba(184, 154, 101, .72);
        background: none;
        color: #e9e0d2;
        box-shadow: none;
        overflow: visible;
        letter-spacing: normal;
        transition: color .25s, border-color .25s;
    }
    #pageNavigation nav .reservation:hover, #pageNavigation nav .reservation:focus-within {
        color: #fff;
        background: none;
        border-color: rgba(232, 222, 207, .8);
        letter-spacing: normal;
    }
    #pageNavigation nav .reservation-intro {
        display: block;
        margin-bottom: 8px;
        color: var(--brass);
        font: 600 .62rem var(--content-font);
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    #pageNavigation nav button.reservation-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        color: inherit;
        font: 400 clamp(1.45rem, 1.55vw, 1.9rem)/1.1 var(--header-font);
        letter-spacing: -.025em;
        text-align: left;
        text-transform: none;
    }
    #pageNavigation nav .reservation-powered {
        display: block;
        margin-top: 10px;
        color: rgba(232, 222, 207, .58);
        font: 300 .62rem/1.3 var(--content-font);
        letter-spacing: .04em;
    }
    #pageNavigation nav .reservation-title::after { content: none; }
    #pageNavigation nav .reservation-title:focus-visible { outline: 1px solid var(--brass); outline-offset: 7px; }
    #pageNavigation nav > a {
        padding: 6px 0 7px;
        border-bottom: 0;
        font-size: .78rem;
        line-height: 1.28;
        letter-spacing: .08em;
    }
    #pageNavigation nav > a:hover { letter-spacing: .08em; }
    #pageNavigation nav a[href$="/gift-certificate"],
    #pageNavigation nav a[href$="/darilni-bon"] { margin-top: 14px; padding-top: 20px; border-top: 1px solid rgba(232, 222, 207, .2); }
}

@media (min-width: 1181px) {
    #pageNavigation {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: clamp(136px, 14vh, 185px);
        padding-bottom: 80px;
        scrollbar-width: thin;
    }
    #pageNavigation nav {
        min-height: calc(100dvh - clamp(136px, 14vh, 185px) - 80px);
    }
    #pageNavigation .languageSwitch {
        top: clamp(65px, 7vh, 90px);
        left: 4vw;
        right: auto;
        bottom: auto;
    }
}

#pageNavigation nav .menuDetails {
    width: 100%;
    order: 6;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(232, 222, 207, .2);
    color: rgba(232, 222, 207, .68);
    font: 400 .76rem/1.42 var(--content-font);
    letter-spacing: .015em;
    text-transform: none;
}
#pageNavigation nav .menuRecognitions { font-size: clamp(.64rem, .62vw, .76rem); line-height: 1.5; }
#pageNavigation nav .menuRecognitions h2 {
    margin: 0 0 7px;
    color: var(--brass);
    font: 600 .68rem/1.3 var(--content-font);
    letter-spacing: .15em;
    text-transform: uppercase;
}
#pageNavigation nav .menuRecognitions ul { padding: 0; margin: 0; list-style: none; }
#pageNavigation nav .menuRecognitions li { margin: 0 0 5px; white-space: nowrap; }
#pageNavigation nav .menuRecognitions li span { color: rgba(232, 222, 207, .55); }
@media (min-width: 1181px) {
    #pageNavigation nav .menuDetails { margin-top: auto; }
}

#content .statementHeader {
    max-width: 35vw;
    font-size: 3.5rem;
    line-height: initial;
    color: var(--line-soft);
}

/* Shared rhythm for the experience pages. */
body[data-type="experience"] .heroContent h1 { margin-bottom: clamp(18px, 2vw, 30px); }
body[data-type="experience"] #content .sectionEyebrow { margin-bottom: 14px; }
body[data-type="experience"] #content h2:not(.statementHeader) { margin-bottom: 18px; }
body[data-type="experience"] #content .menuMovement h3 { margin-bottom: 18px; }

.heroContent h2 {
    color: var(--secondary-color);
    max-width: 30vw;
    font-size: 1rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(12px);
    filter: blur(12px);
    transition: opacity 2.2s ease, transform 2.2s cubic-bezier(.19,.8,.25,1), filter 2.8s ease;
}

    .heroContent h2.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

.benefitsGrid h2 {
    color: var(--secondary-color);
    max-width: 30vw;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.experienceBlock h2 {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

.word-fade .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
    transition: opacity var(--duration) ease, transform var(--duration) ease, filter var(--duration) ease;
    transition-delay: var(--delay);
}

.word-fade.is-visible .word {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reservation-title {
    text-transform: uppercase;
}
#pageNavigation nav button.reservation-title { width: 100%; border: 0; background: none; cursor: pointer; }

/* links */

nav {
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
}

    nav a {
        letter-spacing: 1px;
        padding: 8px 0;
        transition: var(--transition);
    }


        nav a:hover:not(.link-header:hover) {
            letter-spacing: 5px;
            color: #ffffff;
        }

.home-node {
    color: #ffffff;
    margin-top: 5vh;
    letter-spacing: 5px;
    font-size: 1.1rem;
}

.secondary {
    font-size: 0.9rem;
    opacity: 0.5;
    filter: blur(1.5px);
}

    .secondary:hover {
        filter: blur(0);
    }


a {
    text-decoration: none;
    color: var(--secondary-color);
}

h1 {
    margin-bottom: 32px;
}

.link-header {
    opacity: 0.4;
    font-size: 0.7rem;
    margin-bottom: 3px;
    display: block;
}

#logo {
    display: block;
    position: fixed;
    width: clamp(112px, 7.2vw, 142px);
    aspect-ratio: 1567 / 1004;
    top: 12vh;
    left: 7vw;
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(10px);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.19, .8, .25, 1), filter 1.6s ease;
    z-index: 3;
}

    #logo.is-visible {
        opacity: 0.76;
        transform: translateY(0);
        filter: blur(0);
    }

    #logo svg path, #logo svg polygon {
        fill: #e9e0d2;
    }

    #logo svg { display: block; width: 100%; height: auto; }

    #logo svg line {
        stroke: var(--secondary-color);
    }

    #logo.is-away {
        opacity: 0;
        pointer-events: none;
    }

.imageEssay {
    position: relative;
    display: flex;
    width: 90vw;
    min-height: 100vh;
    margin-left: -18vw;
    padding: clamp(120px, 16vh, 180px) 18vw;
    align-items: flex-end;
    /* justify-content: flex-end; */
    overflow: hidden;
}

@media (min-width: 1181px) {
    .imageEssay.fullBleed { width: 100vw; }
}

.imageFrame {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-height: 100%;
    background-position: center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

    .imageFrame::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(270deg, rgba(11, 13, 12, .92) 0%, rgba(11, 13, 12, .64) 32%, transparent 72%), linear-gradient(180deg, rgba(11, 13, 12, .46) 0%, transparent 22%, transparent 68%, rgba(11, 13, 12, .58) 100%);
        content: "";
    }

.imageEssayCopy {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(43vw, 620px);
    flex-direction: column;
    gap: 26px;
}

    .imageEssayCopy p {
        margin-top: initial !important;
    }

.imageEssay.reverse {
    justify-content: flex-start;
}

    .imageEssay.reverse .imageFrame::after {
        background: linear-gradient(90deg, rgba(11, 13, 12, .92) 0%, rgba(11, 13, 12, .64) 32%, transparent 72%), linear-gradient(180deg, rgba(11, 13, 12, .46) 0%, transparent 22%, transparent 68%, rgba(11, 13, 12, .58) 100%);
    }

@media (min-width: 1181px) {
    .imageEssay.reverse.fullBleed .imageFrame::after {
        background: linear-gradient(270deg, rgba(11, 13, 12, .72), transparent 29%),
                    linear-gradient(90deg, rgba(11, 13, 12, .92), rgba(11, 13, 12, .57) 32%, transparent 72%),
                    linear-gradient(180deg, rgba(11, 13, 12, .46), transparent 22%, transparent 68%, rgba(11, 13, 12, .58));
    }
}

.eyebrow, .sectionEyebrow, .footerEyebrow, .footerHeading, .kicker {
    display: block;
    color: var(--brass);
    font-size: .75rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    font-weight: 600;
}

.storyGrid {
    display: flex;
    width: 90vw;
    margin-left: -18vw;
    flex-direction: column;
    gap: 0;
    background: transparent;
}

.storyCard {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 92vh;
    padding: clamp(110px, 16vh, 180px) 56% clamp(110px, 16vh, 180px) 18vw;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--night);
}

    .storyCard:nth-child(even) {
        padding-right: 15vw;
        padding-left: 25%;
    }

    .storyCard::before {
        position: absolute;
        z-index: -2;
        inset: 0;
        background: var(--story-image) center / cover no-repeat;
        content: "";
        filter: saturate(.78);
        transition: filter .8s ease, transform 1.3s var(--ease-soft);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    }

    .storyCard::after {
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(90deg, rgba(11, 13, 12, .94) 0%, rgba(11, 13, 12, .58) 38%, transparent 72%), linear-gradient(180deg, rgba(11, 13, 12, .58) 0%, transparent 24%, transparent 68%, rgba(11, 13, 12, .72) 100%);
        content: "";
    }

    .storyCard h3 {
        position: relative;
        z-index: 2;
        max-width: 540px;
        margin: 38px 0 18px;
        font-family: var(--header-font);
        font-size: clamp(3rem, 4.4vw, 5.4rem);
        letter-spacing: -.025em;
        line-height: .95;
    }

    .storyCard p {
        position: relative;
        z-index: 2;
        max-width: 500px;
        color: var(--vellum-soft);
        font-size: .98rem;
    }

.storyLink {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-top: 27px;
    color: var(--brass);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.storyNumber {
    position: relative;
    z-index: 2;
    color: var(--brass);
    font-size: .72rem;
    letter-spacing: .2em;
}

.recognition {
    width: min(100%, 1080px);
    padding: 35vh 0;
    background: radial-gradient(circle at 85% 10%, rgba(142, 51, 75, .12), transparent 35%), var(--charcoal);
}

    .essayColumns p, .imageEssayCopy p, .menuPrelude p, .quietNote p, .recognition p, .pairingMethod p, .practicalIntro p, .giftPromise p, .contactPrelude p {
        color: var(--vellum-soft);
        font-size: .98rem;
        line-height: 1.85;
    }

/* witness */

.witnessSection {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 120px 0;
    border-top: 1px solid var(--line);
}

/* oxus form */
#reservations {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
    backdrop-filter: blur(30px);
    padding: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    visibility: hidden;
}

    #reservations.inveeta-modal-open {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
        transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), visibility 0s;
    }

#reservations > [data-app="inveeta"] {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
    filter: blur(5px);
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1),
                transform .8s cubic-bezier(.22, 1, .36, 1),
                filter .8s cubic-bezier(.22, 1, .36, 1);
}

#reservations.inveeta-modal-open > [data-app="inveeta"] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1) .1s,
                transform 1.4s cubic-bezier(.22, 1, .36, 1) .1s,
                filter 1.4s cubic-bezier(.22, 1, .36, 1) .1s;
}

#reservations #closeButton {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .45s ease .15s, transform .55s cubic-bezier(.22, 1, .36, 1) .15s;
}

#reservations.inveeta-modal-open #closeButton {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s ease .45s, transform .85s cubic-bezier(.22, 1, .36, 1) .45s;
}

#closeButton {
    position: fixed;
    color: #ffffff;
    padding: 1rem;
    top: 0;
    right: 35vw;
}

.oxSectionContent ox-p {
    font-size: 1.5rem;
}

.contentStatement {
    position: relative;
    margin-top: 14vh;
    padding: 10vh 0 8vh 0;
}

    .contentStatement > p {
        position: relative;
        z-index: 2;
    }

.ghostTitle {
    position: absolute;
    left: -4vw;
    top: 18vh;
    z-index: 1;
    max-width: 760px;
    font-family: 'Argesta', serif;
    font-size: clamp(72px, 8vw, 150px);
    line-height: 0.9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.035);
    pointer-events: none;
    user-select: none;
}

.statementText {
    position: relative;
    z-index: 2;
    margin-top: 14vh;
}

    .statementText h2 {
        max-width: 520px;
    }

    .statementText p {
        max-width: 640px;
    }

#footer {
    --vellum: #e9e0d2;
    --vellum-soft: rgba(233, 224, 210, .78);
    --edge: 15vw;
    --footer-width: 920px;
    position: relative;
    z-index: 2;
    color: var(--vellum-soft);
    background: linear-gradient(110deg, rgba(11, 13, 13, .89), rgba(11, 13, 13, .77));
    -webkit-backdrop-filter: blur(32px) brightness(.45);
    backdrop-filter: blur(32px) brightness(.45);
}

#footer::before {
    position: absolute;
    inset: -88px 0 auto;
    height: 88px;
    background: linear-gradient(to bottom, transparent, rgba(11, 13, 13, .86));
    content: "";
    pointer-events: none;
}

.footerInvitation {
    position: relative;
    display: flex;
    min-height: 215px;
    padding: 38px var(--edge) 30px;
    align-items: center;
    overflow: hidden;
}

.footerInvitationContent {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(600px, 53vw);
}

.footerInvitation h2 {
    margin-top: 12px;
    color: var(--vellum);
    font-family: var(--header-font);
    font-size: clamp(2.25rem, 2.8vw, 3.15rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .98;
}

.footerReservation {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 13px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid var(--brass);
    background: transparent;
    color: var(--vellum);
    font: 400 clamp(1.15rem, 1.35vw, 1.45rem)/1.1 var(--header-font);
    cursor: pointer;
    transition: color .25s, border-color .25s;
}
.footerReservation:hover, .footerReservation:focus-visible {
    color: #fff;
    border-color: #fff;
}

.footerClosing {
    position: relative;
    display: grid;
    width: min(calc(100% - 2 * var(--edge)), var(--footer-width));
    margin: 0 0 0 var(--edge);
    padding: 33px 0 30px;
    align-items: start;
    grid-template-columns: 110px minmax(220px, 1fr) minmax(160px, .65fr);
    gap: clamp(24px, 3vw, 48px);
}
.footerIdentity {
    display: inline-flex;
    align-items: flex-start;
    gap: 22px;
    color: var(--vellum);
    text-decoration: none;
}
.footerMark { display: block; flex: none; width: 82px; opacity: .86; }
.footerMark img { display: block; width: 100%; height: auto; }

.footerVisit {
    gap: 12px;
    color: var(--vellum-soft);
    font: 300 .8rem/1.7 var(--content-font);
}
.footerVisit p { margin: 0; }
.footerVisit a, .footerQuietLinks a { color: var(--vellum); text-decoration: none; transition: color .25s; }
.footerVisit a:hover, .footerQuietLinks a:hover { color: var(--brass); }

.footerVisit {
    display: flex;
    flex-direction: column;
}

.footerQuietLinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    font: 300 .78rem/1.4 var(--content-font);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.footerBottom {
    position: relative;
    display: flex;
    width: calc(100% - 2 * var(--edge));
    margin: 0 0 0 var(--edge);
    padding: 16px 0 19px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(233, 224, 210, .48);
    font: 300 .66rem/1.5 var(--content-font);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.footerBackToTop {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 9px;
    color: var(--vellum);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}
.footerBackToTop:hover, .footerBackToTop:focus-visible { color: var(--brass); }
.footerBackToTop span { font-size: 1rem; line-height: 1; }

.visitSequence .menuMovement p { margin-top: 0; }
.visitDirections {
    color: var(--brass);
    border-bottom: 1px solid rgba(184, 154, 101, .55);
    transition: color .25s, border-color .25s;
}
.visitDirections:hover, .visitDirections:focus-visible { color: #f2e8d8; border-color: currentColor; }
.workshopContact { display: inline-block; width: fit-content; margin-top: 26px; padding-bottom: 7px; text-decoration: none; }
.visitReserve {
    display: inline-block;
    margin-top: 28px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid var(--brass);
    background: transparent;
    color: var(--secondary-color);
    font: 400 clamp(1.4rem, 1.8vw, 2rem)/1.15 var(--header-font);
    cursor: pointer;
}
.visitReserve:hover, .visitReserve:focus-visible { color: #fff; border-color: #fff; }

.quoteBlock {
    position: relative;
    max-width: 1020px;
    padding: clamp(90px, 12vw, 170px) 0 clamp(75px, 10vw, 135px) clamp(40px, 8vw, 116px);
    margin-left: -6vw;
}

.quoteBlock.teamQuote {
    margin-left: 0;
    padding: clamp(65px, 7vw, 110px) 0 clamp(70px, 8vw, 115px);
}
.quoteBlock.teamQuote::before { content: none; }

    .quoteBlock::before {
        position: absolute;
        top: 58px;
        left: 0;
        color: rgba(184, 154, 101, .55);
        font-family: var(--header-font);
        font-size: 9rem;
        line-height: 1;
        content: "“";
    }

    .quoteBlock blockquote {
        color: var(--line-soft);
        font-family: var(--header-font);
        font-size: clamp(3rem, 4.8vw, 5.9rem);
        letter-spacing: -.025em;
        line-height: .98;
    }

    .quoteBlock cite {
        display: block;
        margin-top: 28px;
        color: var(--line-soft);
        font-style: normal;
        font-size: .72rem;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

.heroContent .eyebrow {
    margin-bottom: 10vh;
    --eyebrow-spacing: .25em;
    letter-spacing: calc(var(--eyebrow-spacing) + .055em);
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    filter: blur(3px);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 3.1s cubic-bezier(.19, 1, .22, 1),
                opacity 2.4s cubic-bezier(.22, 1, .36, 1),
                transform 2.8s cubic-bezier(.19, 1, .22, 1),
                filter 2.6s cubic-bezier(.22, 1, .36, 1),
                letter-spacing 3s cubic-bezier(.19, 1, .22, 1);
}
.heroContent .eyebrow.is-visible {
    letter-spacing: var(--eyebrow-spacing);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
    .heroContent .eyebrow {
        letter-spacing: var(--eyebrow-spacing);
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }
}

.experienceChapters, .serviceArc, .menuSequence {
    width: min(100%, 1180px);
}

.experienceChapter, .arcMoment, .menuMovement {
    position: relative;
    display: flex;
    padding: clamp(42px, 6vw, 78px) 0;
    grid-template-columns: minmax(90px, .22fr) minmax(220px, .68fr) minmax(280px, 1fr);
    flex-direction: column;
}

    .experienceChapter p, .arcMoment p, .menuMovement p {
        color: var(--line-soft);
        line-height: 1.84;
    }

.movementDishes {
    display: flex;
    margin-top: 18px;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--line-soft);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.experienceChapter h3, .arcMoment h3, .menuMovement h3 {
    font-family: var(--header-font);
    font-size: clamp(2rem, 3vw, 3.7rem);
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--line-soft);
}

#giftCertificateApp {
    width: min(100%, 1040px);
    color: var(--vellum);
}

    #giftCertificateApp .inveeta-box {
        overflow: hidden;
        border: 1px solid var(--line);
        color: var(--vellum);
        background: rgba(18, 20, 17, .96);
        /* box-shadow: 0 40px 120px rgba(0, 0, 0, .35); */
    }

    #giftCertificateApp .inveeta-progress {
        display: grid;
        padding: 17px;
        gap: 1px;
        grid-template-columns: repeat(4, 1fr);
        background: #0d0f0d;
    }

    #giftCertificateApp .inveeta-progress-item {
        display: flex;
        min-height: 68px;
        padding: 12px;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(232, 222, 207, .36);
        background: var(--charcoal);
    }

    #giftCertificateApp .inveeta-progress-number, #giftCertificateApp .gc-kicker, #giftCertificateApp .gc-section-title {
        color: var(--brass);
        font-size: .68rem;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

@media (min-width: 1181px) {
    #header .hero:has(> .rootsHeroImage)::after {
        background: linear-gradient(90deg, rgba(11,13,12,.78), rgba(11,13,12,.35) 28%, rgba(11,13,12,.06) 60%, rgba(11,13,12,.25)),
                    linear-gradient(0deg, rgba(11,13,12,.6), transparent 45%, rgba(11,13,12,.08));
    }
    #header .hero:has(> .stefkaHeroImage)::after {
        background: linear-gradient(90deg, rgba(11,13,12,.5), rgba(11,13,12,.1) 40%, rgba(11,13,12,.18) 65%, rgba(11,13,12,.6)),
                    linear-gradient(0deg, rgba(11,13,12,.84), transparent 66%);
    }
}

/* Preserve the terrace portrait's lighting grade without the team's brightness lift. */
@media (min-width: 1181px) {
    .sectionImage.teamImage.stefkaContentImage.is-visible {
        filter: none;
    }
}
@media (max-width: 1180px) {
    .sectionImage.teamImage.stefkaContentImage::before {
        filter: none;
    }
}

@media (min-width: 1181px) {
    #header .hero:has(> .cryoconcentrationHeroImage)::after {
        background: linear-gradient(90deg, rgba(11,13,12,.74) 0%, rgba(11,13,12,.4) 28%, rgba(11,13,12,.07) 64%, rgba(11,13,12,.3) 100%),
                    linear-gradient(0deg, rgba(11,13,12,.62) 0%, transparent 43%, rgba(11,13,12,.08) 100%);
    }
}