/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--bone);
    --btn-border: var(--ash-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0.95rem 1.9rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-1);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

/* Brass wipes up from the bottom on hover. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--brass);
    transform: translateY(101%);
    transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }

.btn:hover,
.btn:focus-visible { color: var(--smoke); border-color: var(--brass); }

.btn:active { transform: translateY(1px); }

.btn--primary {
    --btn-bg: var(--brass);
    --btn-fg: var(--smoke);
    --btn-border: var(--brass);
}

.btn--primary::before { background: var(--brass-light); transform: translateY(0); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.btn--primary:hover::before,
.btn--primary:focus-visible::before { opacity: 1; }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--smoke); }

.btn--ghost { --btn-border: var(--ash-line); }

.btn--ember { --btn-bg: var(--ember); --btn-fg: var(--bone); --btn-border: var(--ember); }
.btn--ember::before { background: var(--ember-light); transform: translateY(0); opacity: 0; }
.btn--ember:hover::before { opacity: 1; }
.btn--ember:hover, .btn--ember:focus-visible { color: var(--bone); border-color: var(--ember-light); }

.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.7rem; }
.btn--lg { padding: 1.15rem 2.6rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text button with a brass arrow. */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--brass);
    text-decoration: none;
}

.btn-text:hover { color: var(--brass-light); }
.btn-text:hover .btn__arrow { transform: translateX(4px); }

/* --- Header ------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--smoke) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base), background var(--dur-base);
}

.site-header.is-stuck {
    border-bottom-color: var(--ash-line);
    background: color-mix(in srgb, var(--smoke) 96%, transparent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 4.75rem;
}

/* The header is allowed to run wider than the body copy, because it has to
   hold seven nav items, a venue switcher and a booking button on one line. */
.site-header .shell { max-width: 1560px; }

.site-header__logo img {
    height: clamp(1.35rem, 1rem + 1vw, 1.75rem);
    width: auto;
}

.site-nav { display: none; }

@media (min-width: 1280px) {
    .site-header__inner { gap: var(--space-6); }

    .site-nav {
        display: flex;
        align-items: center;
        gap: clamp(0.7rem, 0.05rem + 1.1vw, 1.9rem);
        /* No min-width: 0 here. The nav must never be squeezed narrower than
           its own content, because nowrap links would then spill over the
           booking button instead of the box simply being too small. */
    }

    .site-nav__link { letter-spacing: 0.07em; }
}

@media (min-width: 1560px) {
    .site-nav__link { letter-spacing: 0.1em; }
}

.site-nav__link {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bone-dim);
    transition: color var(--dur-fast);
    position: relative;
    padding-block: 0.35rem;
    /* A two word item must stay on one line. Termina is wide, so without this
       What's On and Private Hire stack. */
    white-space: nowrap;
}

.site-nav__link:hover { color: var(--bone); }

.site-nav__link[aria-current="page"] { color: var(--brass); }

.site-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.15rem;
    height: 1px;
    background: var(--brass);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Never compress. The booking button and venue switcher keep their natural
       width, and the nav takes what is left, which is verified to be enough at
       the breakpoint where the nav appears. */
    flex: none;
}

.site-header__logo { flex: none; }
.loc-switch { flex: none; }

/* --- Location switcher -------------------------------------------------- */

.loc-switch { position: relative; }

.loc-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    padding: 0.55rem 0.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

/* A long venue name truncates rather than pushing the nav out of the row. */
/* A small brass dot shows a venue is selected, without the label changing
   width and moving the whole header with it. */
.loc-switch__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brass);
    flex: none;
}

.loc-switch__option.is-active strong { color: var(--brass); }

.loc-switch__option.is-active::after {
    content: "Viewing";
    font-family: var(--font-display);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass);
}

.loc-switch__toggle:hover { border-color: var(--brass); color: var(--brass); }

.loc-switch__pin { color: var(--brass); flex: none; }

.loc-switch__chev { transition: transform var(--dur-fast); flex: none; }
.loc-switch__toggle[aria-expanded="true"] .loc-switch__chev { transform: rotate(180deg); }

.loc-switch__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 15rem;
    background: var(--ash);
    border: 1px solid var(--ash-line);
    box-shadow: var(--shadow-3);
    padding: var(--space-2);
    display: grid;
    gap: 2px;
    z-index: var(--z-drawer);
}

.loc-switch__menu[hidden] { display: none; }

.loc-switch__option {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-1);
    transition: background var(--dur-fast);
}

.loc-switch__option:hover { background: var(--ash-soft); }

.loc-switch__option strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}

.loc-switch__option span { font-size: var(--step--1); color: var(--bone-dim); }

/* --- Mobile drawer ------------------------------------------------------ */

.burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.6rem;
    background: transparent;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    cursor: pointer;
}

@media (min-width: 1280px) { .burger { display: none; } }

.burger span {
    display: block;
    height: 1.5px;
    background: var(--bone);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
    position: fixed;
    inset: 4.75rem 0 0 0;
    z-index: var(--z-drawer);
    background: var(--smoke-deep);
    padding: var(--space-7) var(--gutter) var(--space-9);
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    translate: 0 -100%;
    opacity: 0;
    visibility: hidden;
    transition:
        translate var(--dur-slow) var(--ease-out),
        opacity var(--dur-base) var(--ease-out),
        visibility var(--dur-slow);
}

.drawer.is-open { translate: 0; opacity: 1; visibility: visible; }

.drawer__link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-3);
    letter-spacing: var(--track-display);
    text-transform: uppercase;
    text-decoration: none;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--ash-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer__link .marker { opacity: 0.6; }
.drawer__foot { margin-top: var(--space-6); display: grid; gap: var(--space-4); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(92svh, 940px);
    display: grid;
    align-items: end;
    padding-block: var(--space-9) var(--space-8);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__media img,
.hero__media .media-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05) brightness(0.72);
}

/* Warm grade plus a floor to hold the type. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--smoke) 2%, rgb(18 16 14 / 0.55) 38%, rgb(18 16 14 / 0.25) 70%),
        linear-gradient(105deg, rgb(192 52 31 / 0.12), transparent 55%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__title { max-width: 16ch; }

.hero__title em {
    font-style: normal;
    color: var(--brass);
    display: block;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    align-items: center;
    margin-top: var(--space-6);
}

.hero__scroll {
    position: absolute;
    bottom: var(--space-6);
    right: var(--gutter);
    z-index: 2;
    display: none;
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--bone-faint);
}

@media (min-width: 960px) { .hero__scroll { display: block; } }

/* --- Marquee. Slow brass ticker. --------------------------------------- */

.marquee {
    overflow: hidden;
    border-block: 1px solid var(--ash-line);
    padding-block: var(--space-4);
    background: var(--smoke-deep);
    display: flex;
    user-select: none;
}

.marquee__track {
    display: flex;
    flex: none;
    gap: var(--space-6);
    padding-right: var(--space-6);
    align-items: center;
    animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bone-dim);
}

.marquee__item:nth-child(even) { color: var(--brass); }

.marquee__dot { color: var(--ember); font-size: 0.7em; }

@keyframes marquee {
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { overflow-x: auto; }
}

/* --- Location split. Two sites, equal billing. -------------------------- */

.locsplit {
    display: grid;
    gap: 1px;
    background: var(--ash-line);
}

@media (min-width: 900px) {
    .locsplit { grid-template-columns: 1fr 1fr; }
}

.locsplit__panel {
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--space-4);
    min-height: clamp(24rem, 45vh, 34rem);
    padding: var(--space-7) var(--space-6);
    background: var(--smoke);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

.locsplit__panel img,
.locsplit__panel > .media-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    filter: brightness(0.5) saturate(0.9);
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.locsplit__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(10 9 8 / 0.92) 8%, rgb(10 9 8 / 0.35) 55%, transparent 85%);
    transition: background var(--dur-slow);
}

.locsplit__panel:hover img,
.locsplit__panel:focus-visible img,
.locsplit__panel:hover > .media-placeholder,
.locsplit__panel:focus-visible > .media-placeholder {
    transform: scale(1.05);
    filter: brightness(0.62) saturate(1.05);
}

.locsplit__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-4);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: var(--track-display);
}

.locsplit__addr { color: var(--bone-dim); font-size: var(--step--1); }

.locsplit__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--brass);
}

.locsplit__panel:hover .btn__arrow { transform: translateX(5px); }

/* --- Cards ---------------------------------------------------------------- */

.card {
    background: var(--ash);
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}

.card--link:hover {
    border-color: var(--brass-deep);
    transform: translateY(-3px);
}

.card__media {
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
}

.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.card--link:hover .card__media img,
.card--link:hover .card__media .media-placeholder { transform: scale(1.04); }
.card__media .media-placeholder { transition: transform var(--dur-slow) var(--ease-out); }

.card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: var(--track-heading);
    text-transform: uppercase;
    line-height: 1.1;
}

/* --- Event card ------------------------------------------------------------ */

.event {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--ash-line);
    align-items: start;
}

.event__date {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    min-width: 4.25rem;
    padding: var(--space-3);
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-2);
    background: var(--ash);
}

.event__day {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-3);
    line-height: 1;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
}

.event__month {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--bone-dim);
}

.event__body { display: grid; gap: var(--space-2); }

.event__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-2);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: var(--track-heading);
}

.event__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--step--1);
    color: var(--bone-dim);
}

/* --- Menu items --------------------------------------------------------- */

.menu-section { margin-bottom: var(--space-8); }

.menu-section__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.menu-section__head h3 { flex: none; }
.menu-section__head .rule { flex: 1; }

.dish {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem var(--space-5);
    padding-block: var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--ash-line) 55%, transparent);
    align-items: baseline;
}

.dish:last-child { border-bottom: 0; }

.dish__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: var(--track-heading);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    line-height: 1.25;
}

.dish__price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--brass);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dish__desc {
    grid-column: 1 / -1;
    color: var(--bone-dim);
    font-size: var(--step--1);
    font-style: italic;
    max-width: 58ch;
}

/* --- Badges -------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-1);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
}

.badge--veg    { color: var(--sage-light); }
.badge--vegan  { color: var(--sage-light); }
.badge--gf     { color: var(--bone-dim); }
.badge--signature { color: var(--brass); border-color: var(--brass); }
.badge--new { color: var(--ember-light); }

/* Spice level as filled chillies, not a number. */
.spice { display: inline-flex; gap: 1px; color: var(--ember); }
.spice svg { width: 0.78em; height: 0.78em; }
.spice [data-off] { color: var(--bone-faint); opacity: 0.45; }

/* --- Status pills (admin and public) ------------------------------------ */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.pill--pending, .pill--new      { color: var(--brass-light); }
.pill--confirmed, .pill--booked, .pill--resolved { color: var(--sage-light); }
.pill--seated, .pill--in_progress, .pill--quoted { color: #6FA8C8; }
.pill--completed                 { color: var(--bone-dim); }
.pill--cancelled, .pill--no_show, .pill--lost, .pill--spam { color: var(--ember-light); }

/* --- Forms ---------------------------------------------------------------- */

.field { display: grid; gap: var(--space-2); }

.field__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--bone-dim);
}

.field__label .req { color: var(--ember-light); }

.field__hint { font-size: var(--step--1); color: var(--bone-faint); }

.field__error {
    font-size: var(--step--1);
    color: var(--ember-light);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--smoke-deep);
    color: var(--bone);
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    font-family: var(--font-body);
    font-size: var(--step-0);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.input::placeholder, .textarea::placeholder { color: var(--bone-faint); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--ash-soft); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brass);
    background: var(--smoke);
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--ember); }

.textarea { min-height: 8rem; resize: vertical; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C8912F' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
}

.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    cursor: pointer;
    font-size: var(--step--1);
    color: var(--bone-dim);
}

.checkbox input {
    appearance: none;
    width: 1.15rem; height: 1.15rem;
    margin-top: 0.15rem;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    background: var(--smoke-deep);
    cursor: pointer;
    display: grid;
    place-content: center;
    flex: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.checkbox input::after {
    content: "";
    width: 0.6rem; height: 0.35rem;
    border-left: 2px solid var(--smoke);
    border-bottom: 2px solid var(--smoke);
    rotate: -45deg;
    translate: 0 -1px;
    opacity: 0;
    transition: opacity var(--dur-fast);
}

.checkbox input:checked { background: var(--brass); border-color: var(--brass); }
.checkbox input:checked::after { opacity: 1; }

/* Honeypot. Hidden from people, reachable by bots. */
.trap {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Slot picker for the booking flow. */
.slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
    gap: var(--space-2);
}

.slot {
    padding: 0.7rem 0.4rem;
    background: var(--smoke-deep);
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--bone);
    cursor: pointer;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: all var(--dur-fast);
}

.slot:hover { border-color: var(--brass); color: var(--brass); }

.slot[aria-pressed="true"] {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--smoke);
}

.slot[disabled] { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

/* Booking stepper. */
.stepper {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
    counter-reset: step;
}

.stepper__item {
    flex: 1;
    display: grid;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--bone-faint);
}

.stepper__item::before {
    content: "";
    height: 2px;
    background: var(--ash-line);
    transition: background var(--dur-base);
}

.stepper__item.is-active { color: var(--brass); }
.stepper__item.is-active::before,
.stepper__item.is-done::before { background: var(--brass); }
.stepper__item.is-done { color: var(--bone-dim); }

/* --- Alerts and toasts ---------------------------------------------------- */

.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid;
    border-radius: var(--radius-2);
    font-size: var(--step--1);
    align-items: flex-start;
}

.alert--success { color: var(--sage-light); border-color: color-mix(in srgb, var(--sage) 45%, transparent); background: color-mix(in srgb, var(--sage) 10%, transparent); }
.alert--error   { color: var(--ember-light); border-color: color-mix(in srgb, var(--ember) 45%, transparent); background: color-mix(in srgb, var(--ember) 10%, transparent); }
.alert--info    { color: var(--brass-light); border-color: color-mix(in srgb, var(--brass) 40%, transparent); background: color-mix(in srgb, var(--brass) 8%, transparent); }

/* --- Gallery ---------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-3);
}

.gallery__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--ash);
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

.gallery__item:nth-child(4n + 1) { aspect-ratio: 4 / 3; }

.gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base);
    filter: brightness(0.85);
}

.gallery__item:hover img,
.gallery__item:hover .media-placeholder { transform: scale(1.05); filter: brightness(1); }
.gallery__item .media-placeholder { transition: transform var(--dur-slow) var(--ease-out); }

/* --- Filters ------------------------------------------------------------------ */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 1.15rem;
    min-height: 2.5rem;
    background: transparent;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1.2;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--bone-dim);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--dur-fast);
}

/* The dietary row sits below the sections, so it reads as secondary. */
.filter--sm {
    font-size: 0.6rem;
    padding: 0.5rem 0.95rem;
    min-height: 2.25rem;
    letter-spacing: 0.12em;
}

.filter:hover { color: var(--bone); border-color: var(--bone-faint); }

.filter[aria-pressed="true"], .filter.is-active {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--smoke);
}

/* --- Footer -------------------------------------------------------------------- */

.site-footer {
    background: var(--smoke-deep);
    border-top: 1px solid var(--ash-line);
    padding-block: var(--space-8) var(--space-6);
    margin-top: var(--space-9);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.site-footer__logo img { height: 1.5rem; width: auto; margin-bottom: var(--space-4); }

.footer-head {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: var(--space-4);
}

.footer-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer-list a { color: var(--bone-dim); text-decoration: none; font-size: var(--step--1); }
.footer-list a:hover { color: var(--bone); }

.site-footer__base {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--ash-line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--step--2);
    color: var(--bone-faint);
}

.social { display: flex; gap: var(--space-3); }

.social a {
    width: 2.35rem; height: 2.35rem;
    display: grid;
    place-content: center;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    color: var(--bone-dim);
    transition: all var(--dur-fast);
}

.social a:hover { color: var(--brass); border-color: var(--brass); }

/* --- Booking band, the closing call to action ----------------------------- */

.band {
    position: relative;
    padding-block: var(--space-9);
    text-align: center;
    border-block: 1px solid var(--ash-line);
    overflow: hidden;
}

.band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-5); justify-items: center; }

/* --- Opening hours table ---------------------------------------------------- */

.hours { display: grid; gap: 0; width: 100%; }

.hours__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ash-line) 60%, transparent);
    font-size: var(--step--1);
}

.hours__row:last-child { border-bottom: 0; }
.hours__row dt { color: var(--bone-dim); text-transform: capitalize; }
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours__row.is-today dt, .hours__row.is-today dd { color: var(--brass); font-weight: 600; }
.hours__row.is-closed dd { color: var(--bone-faint); }

/* --- Lightbox ------------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgb(10 9 8 / 0.94);
    display: grid;
    place-items: center;
    padding: var(--gutter);
    border: 0;
}

.lightbox::backdrop { background: rgb(10 9 8 / 0.9); }
.lightbox img { max-width: min(100%, 1100px); max-height: 85vh; object-fit: contain; }

.lightbox__close {
    position: absolute;
    top: var(--space-5); right: var(--space-5);
    width: 2.75rem; height: 2.75rem;
    background: transparent;
    border: 1px solid var(--ash-line);
    color: var(--bone);
    cursor: pointer;
    display: grid;
    place-content: center;
}

.lightbox__close:hover { border-color: var(--brass); color: var(--brass); }

/* --- Empty state ---------------------------------------------------------------- */

.empty {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--ash-line);
    border-radius: var(--radius-2);
    color: var(--bone-dim);
    display: grid;
    gap: var(--space-3);
    justify-items: center;
}

/* --- Pagination -------------------------------------------------------------- */

.pagination {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-7);
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    border: 1px solid var(--ash-line);
    border-radius: var(--radius-1);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--step--2);
    color: var(--bone-dim);
    font-variant-numeric: tabular-nums;
}

.pagination a:hover { border-color: var(--brass); color: var(--brass); }
.pagination [aria-current="page"] { background: var(--brass); border-color: var(--brass); color: var(--smoke); }

/* --- Media placeholder ---------------------------------------------------
   Stands in until real photography lands. Deliberately abstract rather than
   a grey box with an icon, so pages still read as finished.
   ---------------------------------------------------------------------- */

.media-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 10rem;
    display: grid;
    place-content: center;
    overflow: hidden;
    isolation: isolate;
}

.media-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
}

.hero__media .media-placeholder__mark,
.locsplit__panel > .media-placeholder .media-placeholder__mark {
    display: none;
}

.media-placeholder__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(0.7rem, 0.5rem + 0.6vw, 0.95rem);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--brass);
    opacity: 0.28;
    user-select: none;
}

/* --- FAQ accordion ------------------------------------------------------
   Used on the landing pages, where the markup also feeds FAQ schema.
   ---------------------------------------------------------------------- */

.faq {
    border-bottom: 1px solid var(--ash-line);
    padding-block: var(--space-4);
}

.faq:first-of-type { border-top: 1px solid var(--ash-line); }

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: var(--track-heading);
    text-transform: uppercase;
    line-height: 1.25;
    transition: color var(--dur-fast);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass); }

.faq summary::after {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.35rem;
    border-right: 1.5px solid var(--brass);
    border-bottom: 1.5px solid var(--brass);
    rotate: 45deg;
    transition: rotate var(--dur-base) var(--ease-out);
}

.faq[open] summary::after { rotate: -135deg; }
.faq[open] summary { color: var(--brass); }
.faq > p { margin-top: var(--space-4); max-width: 62ch; }

/* ==========================================================================
   Mobile refinements
   Touch targets and legibility on a phone. Pointer: coarse catches phones and
   tablets regardless of width, which is more reliable than a breakpoint.
   ========================================================================== */

@media (pointer: coarse), (max-width: 768px) {

    /* The header keeps only what a phone needs: logo, book, menu. The venue
       switcher already appears in full inside the drawer. */
    .loc-switch { display: none; }

    .site-header__inner {
        min-height: 4rem;
        gap: var(--space-3);
    }

    .site-header__actions { gap: var(--space-2); }

    .site-header__actions .btn--sm {
        padding-inline: 1rem;
        font-size: 0.66rem;
    }

    /* Legal links in the footer base get a tap area without breaking the line. */
    .site-footer__base a { display: inline-block; padding-block: var(--space-2); }

    /* Inline links in prose and lists need a real tap area. The padding is
       vertical only, so the text position does not shift. */
    .footer-list a,
    .loc-switch__option,
    .btn-text,
    .link-wipe {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-list { gap: 0; }

    /* Prose links stay inline so paragraphs do not break up. */
    .prose a.link-wipe,
    .dish__desc a,
    p > a.link-wipe {
        display: inline;
        min-height: 0;
    }

    .burger {
        width: 44px;
        height: 44px;
        padding: 0 0.7rem;
    }

    .site-header__logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .social a { width: 44px; height: 44px; }

    .filter { min-height: 44px; padding-inline: 1.1rem; }

    .slot { min-height: 48px; }

    /* Form controls large enough to hit, and 16px so iOS does not zoom on focus. */
    .input,
    .select,
    .textarea {
        min-height: 48px;
        font-size: 16px;
    }

    .checkbox { min-height: 44px; align-items: center; }
    .checkbox input { width: 1.4rem; height: 1.4rem; margin-top: 0; }

    .btn { min-height: 48px; }
    .btn--sm { min-height: 40px; }

    /* Small print stays readable rather than shrinking away. */
    .faint,
    .field__hint,
    .site-footer__base { font-size: 0.8rem; }

    /* The hero gives back some height so the type is not cramped. */
    .hero { min-height: min(88svh, 720px); }

    /* Section markers and rules stack rather than squeeze. */
    .section-head__top { flex-wrap: wrap; }

    /* Menu dish rows read better stacked than as two columns. */
    .dish {
        grid-template-columns: 1fr auto;
        column-gap: var(--space-3);
    }

    /* Tables in the admin scroll inside their own container. */
    .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* Landscape phones get the hero height back. */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: auto; padding-block: var(--space-8); }
    .drawer { inset: 4.75rem 0 0 0; }
}

/* Secondary pricing, for a double measure or a larger glass. */
.dish__price-note {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--step--2);
    font-style: italic;
    color: var(--bone-dim);
    letter-spacing: 0;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* The price column never takes more than its share, so a long measures line
   cannot crush the dish name beside it. */
.dish__price {
    max-width: 11rem;
    justify-self: end;
    text-align: right;
}

/* ==========================================================================
   Menu pages
   ========================================================================== */

.menu-body { max-width: 820px; }

/* When the whole menu is shown, each menu needs its own heading so the page
   stays navigable rather than becoming one long undifferentiated list. */
.menu-group__head {
    margin-block: var(--space-9) var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--ash-line);
}

.menu-group__head:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.menu-group__head h2 { margin-bottom: var(--space-3); }

.menu-section__note {
    font-size: var(--step--1);
    margin-bottom: var(--space-4);
    max-width: 56ch;
}

.menu-allergens {
    font-size: var(--step--2);
    margin-top: var(--space-8);
    max-width: 62ch;
    line-height: 1.6;
}

/* ==========================================================================
   Mobile typography
   The display face is wide, so long headings need more room than the fluid
   scale alone gives them on a narrow screen.
   ========================================================================== */

@media (max-width: 560px) {

    :root {
        /* Tighter section rhythm so more content is visible per screen. */
        --section-y: clamp(3rem, 1.5rem + 6vw, 5rem);
    }

    /* Display headings sit closer and wrap more comfortably. */
    .display--hero,
    .display--xl,
    .display--lg,
    .display--md,
    h1, h2 {
        letter-spacing: -0.015em;
        line-height: 0.94;
        hyphens: none;
    }

    .hero__title { max-width: 11ch; }

    .lede {
        font-size: var(--step-1);
        line-height: 1.5;
        max-width: none;
    }

    /* Menu rows stack the price under the name when the name is long,
       rather than squeezing both onto one cramped line. */
    .dish {
        grid-template-columns: 1fr auto;
        gap: 0.3rem var(--space-3);
        padding-block: var(--space-4);
    }

    .dish__name {
        font-size: 0.92rem;
        line-height: 1.3;
        gap: 0.3rem 0.45rem;
    }

    .dish__price { font-size: 0.92rem; max-width: 8.5rem; }
    .dish__desc { font-size: 0.82rem; line-height: 1.5; }

    /* On a phone the measures read better under the dish than beside it. */
    .dish:has(.dish__price-note) {
        grid-template-columns: 1fr;
    }

    .dish:has(.dish__price-note) .dish__price {
        max-width: none;
        justify-self: start;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .dish:has(.dish__price-note) .dish__price-note {
        display: inline;
        margin-top: 0;
    }

    .badge { font-size: 0.54rem; padding: 0.15rem 0.4rem; }

    /* Section heads stack, since a rule beside a long title leaves no room
       for either. */
    .menu-section__head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .menu-section__head h3 { font-size: var(--step-2); }
    .menu-section__head .rule { width: 100%; flex: none; }

    .menu-group__head { margin-block: var(--space-8) var(--space-5); }

    /* Filters scroll sideways rather than stacking into a tall block. */
    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-bottom: var(--space-2);
        scroll-snap-type: x proximity;
    }

    .filters::-webkit-scrollbar { display: none; }
    .filter { flex: none; scroll-snap-align: start; }

    /* Event rows give the title more width. */
    .event__date { min-width: 3.5rem; padding: var(--space-2); }
    .event__title { font-size: var(--step-1); }

    /* Cards tighten up. */
    .card { padding: var(--space-5); }
    .card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; }
    .card__title { font-size: var(--step-0); }

    /* Footer columns stack with less air between them. */
    .site-footer__grid { gap: var(--space-6); }
    .site-footer { padding-block: var(--space-7) var(--space-5); }

    /* The deflist on booking confirmations. */
    .hours__row { font-size: var(--step--1); }
}

/* Very narrow phones, 360px and below. */
@media (max-width: 380px) {
    .dish__name { font-size: 0.88rem; }
    .dish__price { font-size: 0.88rem; }
    .filter { font-size: 0.6rem; padding-inline: 0.9rem; }
    .btn { padding-inline: 1.35rem; font-size: 0.66rem; }
    .site-header__actions .btn--sm { padding-inline: 0.8rem; font-size: 0.62rem; }
}

/* A dish or menu available at one venue only. */
.badge--venue {
    color: var(--brass-light);
    border-color: color-mix(in srgb, var(--brass) 45%, transparent);
}

.menu-group__venue {
    font-size: 0.62rem;
    color: var(--brass);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   Eyebrow headings on mobile
   The display face is wide and the tracking is 0.28em, which is right at
   desktop sizes and far too loose on a 375px screen. These rules keep each
   phrase on one line.
   ========================================================================== */

@media (max-width: 560px) {

    .eyebrow,
    .eyebrow--plain {
        font-size: 0.66rem;
        letter-spacing: 0.16em;
        gap: var(--space-2);
        flex-wrap: nowrap;
        min-width: 0;
    }

    /* The marker is a label, never a place to break a line. */
    .marker,
    .eyebrow .marker {
        white-space: nowrap;
        flex: none;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    /* The rule gives up its width first, since it carries no meaning. */
    .eyebrow .rule,
    .section-head__top .rule {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The trailing phrase shrinks rather than wrapping under the rule. */
    .eyebrow > :last-child:not(.rule):not(.marker) {
        min-width: 0;
        overflow-wrap: normal;
    }

    .label,
    .field__label,
    .footer-head,
    .stat__label {
        letter-spacing: 0.12em;
    }

    .section-head__top {
        flex-wrap: nowrap;
        gap: var(--space-3);
    }
}

/* Very narrow phones drop the tracking again. */
@media (max-width: 380px) {
    .eyebrow,
    .eyebrow--plain,
    .marker {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .label, .field__label, .footer-head { letter-spacing: 0.1em; font-size: 0.68rem; }
}

/* An event whose date is not settled yet. */
.event__date--tbc {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass) 12%, var(--ash));
}

.event__tbc {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-0);
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--brass);
}

/* --- Menus without prices ------------------------------------------------
   With the price column gone the row is a single column, so the name and
   description run the full width instead of leaving a gap on the right.
   ---------------------------------------------------------------------- */

.menu-section--no-prices .dish,
.dish--no-price {
    grid-template-columns: 1fr;
    row-gap: 0.3rem;
}

.menu-section--no-prices .dish__desc,
.dish--no-price .dish__desc {
    grid-column: 1;
    max-width: 62ch;
}