@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
    --ink: #1d2b22;
    --forest: #294537;
    --cream: #f6f1e8;
    --paper: #fffdf8;
    --coral: #d15f49;
    --gold: #d59d50
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "DM Sans", sans-serif
}

.shell {
    width: min(1120px, calc(100% - 40px));
    margin: auto
}

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

.topline {
    padding: 10px 0;
    background: var(--forest);
    color: #fffaf0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.topline .shell {
    display: flex;
    justify-content: space-between;
    gap: 16px
}

.top {
    background: rgba(246, 241, 232, .96);
    color: var(--ink);
    border-bottom: 1px solid rgba(29, 43, 34, .14)
}

.nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.logo {
    font: 700 29px/1 "Fraunces", serif;
    letter-spacing: -.08em
}

.logo span {
    color: var(--coral)
}

nav {
    display: flex;
    gap: 27px;
    font-size: 14px;
    font-weight: 700
}

nav a:hover,
nav a.active {
    color: var(--coral)
}

.call {
    padding: 11px 16px;
    border-radius: 99px;
    background: var(--coral);
    color: white;
    font-size: 14px;
    font-weight: 700
}

.page-hero {
    padding: 72px 0 58px;
    background: #efe8db
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--coral);
    font: 700 11px Arial, sans-serif;
    letter-spacing: 1.3px;
    text-transform: uppercase
}

h1 {
    max-width: 720px;
    margin: 0;
    font: 600 clamp(45px, 6vw, 72px)/.98 Georgia, serif;
    letter-spacing: -3px
}

h2 {
    margin: 0;
    font: 600 clamp(34px, 4vw, 52px)/1 Georgia, serif;
    letter-spacing: -2px
}

.lede {
    max-width: 600px;
    color: #536057;
    font-size: 18px;
    line-height: 1.55
}

.location-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }
.location-primary,.location-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 99px; font-size: 14px; font-weight: 700 }
.location-primary { background: var(--coral); color: #fff }
.location-secondary { border: 1px solid rgba(29,43,34,.25); color: var(--forest) }

.location-banner-section { padding: 72px 0; background: #efe8db }
.location-banner { max-width: 910px; margin: auto; padding: clamp(38px,6vw,64px); border-radius: 22px; background: var(--forest); color: #fffaf0; box-shadow: 15px 17px 0 rgba(29,43,34,.13) }
.location-banner .eyebrow { color: #e5c273; margin-bottom: 28px }
.location-banner h1 { max-width: 800px; color: #fffaf0; font-family: "Fraunces",serif; font-size: clamp(51px,7vw,88px); letter-spacing: -.07em }
.banner-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 42px; border-top: 1px solid rgba(255,255,255,.27) }
.banner-details div { display: grid; gap: 9px; padding: 22px 18px 0 0 }
.banner-details div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18) }
.banner-details span { color: #e5c273; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.banner-details strong,.banner-details a { color: #fffaf0; font-size: 17px; font-weight: 700 }
.banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px }
.banner-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 21px; border-radius: 99px; font-size: 15px; font-weight: 700 }
.banner-directions { background: #fffaf0; color: var(--forest) }
.banner-call { border: 1px solid rgba(255,255,255,.6); color: #fffaf0 }
.location-map-content { padding-top: 0 }

.content {
    padding: 72px 0
}

.menu-grid,
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.card {
    padding: 28px;
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08)
}

.card.featured {
    background: var(--forest);
    color: #fffaf0
}

.card h2 {
    font-size: 29px;
    color: var(--coral)
}

.featured h2 {
    color: #e5c273
}

.card p {
    line-height: 1.5;
    color: #627066
}

.featured p {
    color: #d5dfd4
}

.price {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-top: 1px solid rgba(29, 43, 34, .14);
    font-size: 14px;
    font-weight: 700
}

.featured .price {
    border-color: rgba(255, 255, 255, .18)
}

.full-menu { display: grid; gap: 18px }
.menu-grid-two { grid-template-columns: repeat(2, 1fr) }
.menu-section { padding: 30px; border-radius: 14px; background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.08) }
.menu-section.featured { background: var(--forest); color: #fffaf0 }
.menu-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 20px }
.menu-section-heading h2 { color: var(--coral); font-size: 32px }
.menu-section.featured h2 { color: #e5c273 }
.menu-section.featured .eyebrow { color: #e5c273 }
.menu-section-heading > span { color: #627066; font-size: 12px; font-weight: 700 }
.price-table > div { display: grid; grid-template-columns: minmax(135px,1.5fr) repeat(3,1fr); gap: 10px; padding: 10px 0; border-top: 1px solid rgba(29,43,34,.14); font-size: 14px; font-weight: 700 }
.price-table .price-table-head { padding-top: 0; border: 0; color: #627066; font-size: 11px; letter-spacing: .06em; text-transform: uppercase }
.option-grid,.tea-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 24px }
.tea-grid { grid-template-columns: repeat(3,1fr); margin-top: 0 }
.option-grid > div,.tea-grid > div { padding: 18px; border-radius: 9px; background: var(--cream) }
.option-grid h3,.tea-grid h3 { margin: 0 0 10px; font: 700 19px/1.1 "Fraunces",serif; letter-spacing: -.04em }
.option-grid h3 small { color: var(--coral); font: 700 12px "DM Sans",sans-serif }
.option-grid p,.tea-grid p { margin: 0; color: #59685d; font-size: 14px; line-height: 1.8 }
.price-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(29,43,34,.14); font-size: 14px; font-weight: 700 }
.price-list > div span:last-child { color: #627066; white-space: nowrap }
.menu-section.featured .price-list > div { border-color: rgba(255,255,255,.18) }
.menu-section.featured .price-list > div span:last-child { color: #d5dfd4 }
.menu-note { margin: 16px 0 0; color: #627066; font-size: 13px; font-weight: 700 }

.photo {
    min-height: 260px;
    border: 0;
    padding: 0;
    background: var(--forest);
    overflow: hidden;
    border-radius: 12px
}

.photo:first-child {
    grid-column: span 2
}

.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s
}

.photo:hover img {
    transform: scale(1.04)
}

.review-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.review {
    min-height: 290px;
    padding: 28px;
    border-radius: 12px;
    background: var(--paper);
    display: flex;
    flex-direction: column
}

.stars {
    color: #d5942a;
    letter-spacing: 2px
}

.review p {
    font: 500 22px/1.35 Georgia, serif
}

.review small {
    margin-top: auto;
    color: #627066;
    font-weight: 700
}

.location {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 30px;
    align-items: stretch
}

.location-card {
    padding: 36px;
    border-radius: 12px;
    background: var(--forest);
    color: #fffaf0
}

.location-card p {
    line-height: 1.65;
    color: #d5dfd4
}

.location-card .location-label { color: #e5c273 }

.location-card a {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 99px;
    background: #fffaf0;
    color: var(--forest);
    font-weight: 700
}

.visit-details {
    display: grid;
    gap: 0;
    margin: 30px 0 10px
}

.visit-details div {
    display: grid;
    gap: 5px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .2)
}

.visit-details span {
    color: #e5c273;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase
}

.visit-details strong,
.phone-link {
    color: #fffaf0;
    font-size: 15px
}

.location-card .phone-link {
    display: inline;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fffaf0;
    font-weight: 700
}

.location-card .directions-button {
    margin-top: 0
}

.location-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px }

.location-card .call-button { margin: 0; padding: 12px 16px; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fffaf0 }

.map-wrap { overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.08) }

.map-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 25px 28px 21px }

.map-heading .eyebrow { margin-bottom: 9px }

.map-heading h2 { font-size: 31px }

.map-heading a { color: var(--coral); font-size: 13px; font-weight: 700; white-space: nowrap }

.map {
    min-height: 450px;
    border: 0;
    border-radius: 0;
    width: 100%;
    display: block
}

footer {
    padding: 26px 0;
    background: #19271f;
    color: #d1dbd0;
    font-size: 13px
}

.accessibility-toggle { position: fixed; z-index: 20; right: 18px; bottom: 18px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--forest); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.22); font: 700 14px/1 "DM Sans",sans-serif; cursor: pointer }
.accessibility-panel { display: none; position: fixed; z-index: 20; right: 18px; bottom: 76px; width: 220px; padding: 14px; border: 1px solid rgba(29,43,34,.14); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 35px rgba(0,0,0,.18) }
.accessibility-panel.open { display: grid; gap: 8px }
.accessibility-panel h2 { margin: 2px 0 7px; font: 700 16px "DM Sans",sans-serif; letter-spacing: 0 }
.accessibility-panel button { border: 1px solid rgba(29,43,34,.14); border-radius: 7px; padding: 10px; background: #fff; color: var(--ink); text-align: left; font: 600 13px "DM Sans",sans-serif; cursor: pointer }
.accessibility-panel button[aria-pressed="true"] { border-color: var(--forest); background: #e6eee2 }
.accessibility-panel button[data-accessibility="reset"] { color: var(--coral) }
.large-text { font-size: 118% }
html.large-text body { zoom: 1.16 }
.high-contrast { --ink:#07140c; --forest:#102b1b; --cream:#fff; --paper:#fff; --coral:#a90000 }
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important }

@media(max-width:800px) {
    .nav {
        height: 66px
    }

    .menu-grid,
    .review-list,
    .location {
        grid-template-columns: 1fr
    }

    .option-grid,
    .tea-grid {
        grid-template-columns: 1fr
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .photo:first-child {
        grid-column: span 2
    }

    .content {
        padding: 55px 0
    }

    .page-hero {
        padding: 55px 0
    }

    .map {
        min-height: 360px
    }

    .map-heading {
        padding: 22px
    }

    .banner-details {
        grid-template-columns: 1fr
    }

    .banner-details div,
    .banner-details div + div {
        padding: 17px 0 0;
        border-left: 0
    }
}

@media(max-width:600px) {
    .topline .shell span:last-child {
        display: none
    }

    .nav {
        height: auto;
        min-height: 0;
        padding: 15px 0;
        flex-wrap: wrap
    }

    .nav nav {
        width: 100%;
        justify-content: space-between;
        gap: 0;
        font-size: 12px
    }

    .map-heading {
        display: block
    }

    .map-heading a {
        display: inline-block;
        margin-top: 12px
    }

    .location-banner-section {
        padding: 48px 0
    }

    .location-banner {
        border-radius: 16px
    }
}

@media(max-width:480px) {
    .shell {
        width: min(100% - 28px, 1120px)
    }

    .photo-grid {
        grid-template-columns: 1fr
    }

    .photo:first-child {
        grid-column: auto
    }

    .call {
        font-size: 12px;
        padding: 10px 13px
    }
}