/* Menu page ---------------------------------------------------------------- */

.mp-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 60vh;
    height: 60svh;
    min-height: 60vh;
    min-height: 60svh;
    overflow: hidden;
    background: var(--ink);
    color: var(--cream);
}

.mp-hero__media,
.mp-hero__scrim {
    position: absolute;
    inset: 0;
}

.mp-hero__media { z-index: 0; }

.mp-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% 48%;
}

.mp-hero__scrim {
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(8, 5, 4, .88) 0%, rgba(8, 5, 4, .55) 38%, rgba(8, 5, 4, .18) 68%, rgba(8, 5, 4, .5) 100%),
        linear-gradient(to bottom, rgba(8, 5, 4, .55) 0%, transparent 42%, rgba(8, 5, 4, .72) 100%);
}

.mp-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 38rem;
    padding: calc(var(--header-h, 88px) + 8px) var(--gutter) 28px;
}

.mp-hero__eyebrow { color: #c5a07f; }

.mp-hero__title {
    margin-top: 8px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.12;
    color: var(--cream);
}

.mp-hero__title em {
    font-style: italic;
    color: #c5a07f;
}

.mp-hero__text {
    margin-top: 10px;
    max-width: 38ch;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.55;
    color: var(--cream-70);
}

.mp-cats-wrap {
    position: sticky;
    top: var(--header-h, 88px);
    z-index: 20;
    margin-top: -28px;
    padding-inline: var(--gutter);
    transition: top .45s var(--ease);
}

.mp-cats {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 10px 8px;
    overflow-x: auto;
    background: var(--sand);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(12, 8, 6, .12);
}

.mp-cats ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: max-content;
}

.mp-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 88px;
    padding: 8px 12px 10px;
    color: var(--brown);
    opacity: .62;
    transition: opacity .3s var(--ease);
}

.mp-cat .mp-icon {
    width: 28px;
    height: 28px;
}

.mp-cat span {
    font-size: clamp(10px, .78vw, 12px);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mp-cat.is-active,
.mp-cat:hover { opacity: 1; }

.mp-cat.is-active span {
    box-shadow: 0 1px 0 0 #c5a07f;
}

.mp-board {
    background: #f7f3ea;
    color: var(--brown);
    padding: clamp(48px, 6vw, 88px) 0 clamp(28px, 4vw, 48px);
}

.mp-board__inner {
    width: min(100% - (var(--gutter) * 2), 1180px);
    margin-inline: auto;
}

.mp-grid {
    display: grid;
    gap: clamp(36px, 5vw, 72px);
}

.mp-grid + .mp-grid { margin-top: clamp(48px, 6vw, 88px); }

.mp-grid--2 { grid-template-columns: 1fr 1fr; }

.mp-grid--3 { grid-template-columns: repeat(3, 1fr); }

.mp-col__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--brown);
}

.mp-col__head .mp-icon {
    width: 34px;
    height: 34px;
    color: #c5a07f;
}

.mp-col__head h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 2.1vw, 32px);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mp-col__sub {
    margin: 18px 0 8px;
    font-size: clamp(11px, .85vw, 13px);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c5a07f;
}

.mp-list { display: grid; }

.mp-item {
    padding-block: 9px;
    border-bottom: 1px solid rgba(62, 22, 20, .1);
}

.mp-item__name {
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 400;
}

.mp-photo {
    margin: 22px 0 0;
    overflow: hidden;
    border-radius: 12px;
    background: #2b1e16;
    aspect-ratio: 4 / 3;
}

.mp-photo__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-photo__media.is-placeholder {
    height: 100%;
    min-height: 180px;
    background: linear-gradient(155deg, #3d2a1e 0%, #1a0f0a 72%);
}

.mp-values {
    background: #f7f3ea;
    color: var(--cream);
    padding: 0 var(--gutter) clamp(16px, 2vw, 24px);
}

.mp-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: clamp(28px, 3.6vh, 42px) clamp(12px, 1.6vw, 20px);
    border-radius: 20px;
    background: #1a120b;
}

.mp-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-inline: clamp(12px, 1.8vw, 28px);
}

.mp-value + .mp-value {
    border-left: 1px solid rgba(197, 160, 127, .22);
}

.mp-value__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    mix-blend-mode: screen;
}

.mp-value__icon.is-placeholder {
    color: #c5a07f;
    mix-blend-mode: normal;
}

.mp-value h3 {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(11px, .9vw, 13px);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c5a07f;
}

.mp-value p {
    max-width: 26ch;
    font-size: clamp(12px, .92vw, 13.5px);
    font-weight: 300;
    line-height: 1.55;
    color: var(--cream-70);
}

#v60,
#espresso,
#other,
#desserts,
#brownies,
#tiramisu,
#cake,
#coffee {
    scroll-margin-top: calc(var(--header-h, 88px) + 92px);
}

@media (max-width: 980px) {
    .mp-grid--2,
    .mp-grid--3 { grid-template-columns: 1fr 1fr; }

    .mp-values__grid { grid-template-columns: 1fr 1fr; }

    .mp-value + .mp-value { border-left: 0; }

    .mp-value:nth-child(even) {
        border-left: 1px solid rgba(197, 160, 127, .22);
    }

    .mp-value:nth-child(n+3) {
        border-top: 1px solid rgba(197, 160, 127, .22);
        padding-top: 22px;
        margin-top: 8px;
    }
}

@media (max-width: 720px) {
    .mp-hero {
        height: auto;
        min-height: 72svh;
        overflow: hidden;
    }

    .mp-hero__copy {
        width: 100%;
        padding-top: calc(var(--header-h, 64px) + 20px);
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    .mp-hero__title { font-size: clamp(26px, 8vw, 36px); }

    .mp-hero__media img { object-position: 86% 44%; }

    .mp-grid--2,
    .mp-grid--3 { grid-template-columns: 1fr; }

    .mp-values__grid { grid-template-columns: 1fr; }

    .mp-value:nth-child(even) { border-left: 0; }

    .mp-value + .mp-value {
        border-top: 1px solid rgba(197, 160, 127, .22);
        padding-top: 22px;
        margin-top: 8px;
    }

    .mp-cats {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mp-cats::-webkit-scrollbar { display: none; }

    .mp-cats ul {
        justify-content: flex-start;
        padding-right: 8px;
    }

    .mp-cat { min-width: 76px; padding-inline: 8px; }

    .mp-photo { aspect-ratio: 16 / 11; }
}