/* The parts of the site the template does not draw.

   The site is built on the Chef Javad template, which covers the pages a guest
   reads: the home page, the story, the branches, the diary, the gallery. It has
   nothing to say about the parts that only exist because there is a working
   restaurant behind it, and those are here: the notice shown when the runtime is
   held back, the cookie bar, the one-line confirmation at the foot of the page,
   validation messages, the order drawer, and the six pages whose markup is their
   logic rather than their decoration.

   Those six pages ask for a palette by name. The names came from a theme that is
   no longer loaded, so the first block below answers them in the template's own
   colours. Nothing on those pages had to be touched to change how they look: the
   names resolve here, and the page comes out the colour of the rest of the site.

   The template's own tokens are the source. If the template changes colour, this
   file follows it by changing the seven lines at the top, not by being rewritten.
*/

:root {
    /* The template's palette, under the names the working pages ask for. */
    --night:      #0e110d;            /* the ground the whole site sits on */
    --panel:      #1f2120;            /* a raised surface */
    --panel-2:    #262827;
    --panel-3:    #2f322f;

    --gold:       #a6a182;            /* the accent, and every call to action */
    --gold-hi:    #cbc7ae;
    --gold-deep:  #7d795f;
    --rose:       #c6c2a9;
    --brass:      linear-gradient(120deg, #7d795f 0%, #cbc7ae 46%, #a6a182 100%);

    --cream:      #ffffff;            /* headings and anything on the accent */
    --body:       #aeb0b4;            /* body copy */
    --muted:      #8b8d90;
    --faint:      #63666a;

    --line:       rgba(166, 161, 130, .28);
    --line-2:     rgba(255, 255, 255, .10);

    /* One face across the site, the template's own. */
    --serif:      "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    --sc:         "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    --sans:       "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

    /* The template's container, so a page written here lines up with a page
       written in the template's own markup. */
    --shell:      1300px;
    --gut:        12px;
    --sec-y:      clamp(60px, 8vw, 120px);
    --util-h:     40px;
    --hdr-h:      92px;
    --hdr-h-sm:   68px;

    --ease:       cubic-bezier(.22, .61, .36, 1);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);
    --lift:       0 26px 60px -34px rgba(0, 0, 0, .95);
    --glow:       0 18px 46px -24px rgba(166, 161, 130, .45);
}

/* ==========================================================================
   Chef Javad — the app's own surfaces, in the template's language.

   main.css is the template as delivered and stays untouched, so it can be
   re-copied when the template is updated. This file covers the four things the
   static template has no equivalent for — the operational runtime notice, the
   cookie bar, the toast and the server cart's basket lines — plus the basket
   line markup the template's own JS emits but its CSS never styled.

   Every value here is a token from main.css. Nothing invents a new colour.
   ========================================================================== */

/* --------------------------------------------------------- basket lines */
/* main.js writes .bline / .basket__empty into the drawer, but main.css only
   styles .basket__mt. The server cart reuses the same class names, so these
   fill the gap for both. */

.basket__empty {
    text-align: center;
    padding: 70px 10px;
    color: var(--muted);
}

.basket__empty svg {
    width: 46px;
    height: 46px;
    color: var(--gold-deep);
    margin: 0 auto 20px;
    display: block;
}

.basket__empty p {
    margin: 0 0 6px;
}

.bline {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-2);
}

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

.bline__img {
    width: 62px;
    height: 62px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    position: relative;
    overflow: hidden;
}

/* The brass corner mark the template uses on every square thumbnail. */
.bline__img::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: var(--brass);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.bline__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bline__name {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--cream);
    line-height: 1.3;
}

.bline__sub {
    font-size: .78rem;
    color: var(--muted);
}

.bline__rm {
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--faint);
    font-family: var(--sc);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s;
}

.bline__rm:hover {
    color: var(--rose);
}

.bline__price {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--gold-hi);
    white-space: nowrap;
}

/* ------------------------------------------------- operational notice */
/* Shown above the whole site when the runtime is in safe mode or preview. */

.runtime-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px var(--gut);
    position: relative;
    z-index: 1200;
    font-family: var(--sans);
    font-size: .88rem;
    border-bottom: 1px solid var(--line);
}

.runtime-notice--safe_mode {
    background: #3a1a17;
    color: #f2cec7;
    border-bottom-color: rgba(198, 194, 169, .3);
}

.runtime-notice--demo {
    background: var(--panel-2);
    color: var(--gold-hi);
}

.runtime-notice__icon {
    font-size: 19px;
    line-height: 1.3;
}

.runtime-notice__headline {
    margin: 0 0 3px;
    font-family: var(--sc);
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.runtime-notice__message {
    margin: 0;
    color: inherit;
    opacity: .85;
}

/* ------------------------------------------------------- cookie notice */

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    padding: 0 var(--gut) calc(18px + env(safe-area-inset-bottom));
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent__panel {
    max-width: var(--shell);
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 22px 26px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: var(--lift);
}

.cookie-consent__title {
    margin: 0 0 5px;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--cream);
}

.cookie-consent__message {
    margin: 0;
    color: var(--body);
    font-size: .86rem;
    max-width: 720px;
    line-height: 1.6;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .cookie-consent__panel {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent__actions {
        justify-content: stretch;
    }

    .cookie-consent__actions .btn {
        flex: 1;
    }
}

/* Above the mobile dock, which owns the bottom of the screen under 860px. */
@media (max-width: 860px) {
    .cookie-consent {
        bottom: 74px;
    }
}

/* -------------------------------------------------------------- toast */
/* One short confirmation at the foot of the page. Matches the template's own
   .toast, but is a single fixed element the whole site can call. */

.site-toast {
    position: fixed;
    inset-inline: var(--gut);
    bottom: 28px;
    z-index: 4000;
    margin-inline: auto;
    width: fit-content;
    max-width: min(430px, 92vw);
    padding: 15px 20px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    color: var(--cream);
    font-family: var(--sans);
    font-size: .89rem;
    box-shadow: var(--lift);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s var(--ease), transform .4s var(--ease);
}

.site-toast.is-on {
    opacity: 1;
    transform: translateY(0);
}

.site-toast.is-bad {
    border-left-color: var(--rose);
}

.site-toast[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .site-toast {
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-toast {
        transition: none;
    }
}

/* ------------------------------------------------------ form feedback */
/* Laravel validation errors and flash messages, styled like the template's
   own inline notes so a failed booking reads as part of the page. */

.formnote {
    padding: 15px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--panel);
    color: var(--body);
    font-size: .88rem;
    margin-bottom: 24px;
}

.formnote--bad {
    border-left-color: var(--rose);
}

.formnote ul {
    margin: 8px 0 0;
    padding-inline-start: 18px;
}

.formnote li + li {
    margin-top: 4px;
}

/* -------------------------------------------- bridge for the working pages */
/* Five pages keep their original markup because their logic is the product,
   not the decoration: the event ticket flow, the branch page, the two booking
   flows and checkout. Each already carries its own dark-and-gold styling; the
   only thing they borrowed from the retired theme was its container. This maps
   it onto the template's shell so they line up with every other page. */

.auto-container {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* The three order pages (cart, order status, order tracking) still open with the
   retired theme's banner markup. Rather than rewrite flows that work, the old
   class names are given the template's page-opener look, so they match the
   `.phead` every other page uses. */

.inner-banner {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-bottom: 1px solid var(--line-2);
    padding: clamp(90px, 12vw, 150px) 0 clamp(48px, 7vw, 84px);
}

.inner-banner .image-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .3;
}

.inner-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 17, 13, .5) 0%, rgba(14, 17, 13, .85) 100%);
}

.inner-banner .auto-container {
    position: relative;
    z-index: 2;
}

.inner-banner .subtitle {
    font-family: var(--sc);
    font-size: .76rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.inner-banner h1 {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.04;
    color: var(--cream);
    margin: 0;
}

/* ------------------------------------- the retired theme's colour variables */
/* Five pages keep their original markup, and that markup asks for the old
   theme's variables — a green ground and a warmer gold. The stylesheet that
   defined them is gone, so each usage was falling back to the green written
   beside it. Pointing the old names at the template's own tokens turns those
   pages the right colour without touching their markup. */

:root {
    --main-color: var(--gold);
    --main-color-hi: var(--gold-hi);
    --color-one: var(--panel-2);
    --color-two: var(--night);
    --color-three: var(--panel-3);
    --text-color: var(--body);
    --title-color: var(--cream);

    /* The old theme's display face. It was never defined here, so every heading
       that asked for it fell through to the browser's default serif — Georgia
       beside Hanken Grotesk on the same page. Pointing it at the template's own serif
       settles those headings without hunting them down one at a time. */
    --font-family-Hanken Grotesk: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* ============================ website front-end fixes ==================== */

/* -- icons ---------------------------------------------------------------- */
/* The pages that kept their own markup asked for an icon font the theme does
   not load; their icons are inline SVG now. An SVG with a viewBox and no size
   fills whatever box it is in, which is why they came out enormous.
 *
 * The fix follows how those pages already thought about icons: they sized them
 * with `font-size` on the container. So an icon is one em square by default and
 * inherits that font-size. The selector is a bare attribute — the weakest thing
 * that can match — so every explicit `.something svg { width: … }` in the
 * theme still wins. */

[stroke-width="1.4"],
[stroke-width="1.6"],
[stroke-width="1.1"],
[stroke-width="2.2"] {
    width: 1em;
    height: 1em;
    flex: none;
}

/* The boxes that hold an icon centre it, now that it is an element rather than
   a font glyph. */
.bx-fact__ic, .bx-act__ic, .stat-icon, .detail-icon, .contact-icon, .accepts-icon {
    display: grid;
    place-items: center;
}

/* -- the hero ------------------------------------------------------------- */
/* The opener is a tall picture; its words belong in the middle of it, across
   and down, rather than pushed to the bottom edge. */

.hero {
    justify-content: center;
}

.hero__in {
    padding-block: clamp(96px, 14vh, 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
}

/* -- the menu's own state class ------------------------------------------- */
/* main.js switches panes by toggling `is-active`, while the stylesheet that
   came with it dresses `.on`. The markup now writes `is-active` so the script
   and the page agree; these rules give that class the same dress. */

.kpane.is-active { display: block; }
.cpane.is-active { display: block; animation: fadeup .5s var(--ease) both; }
.mbar__k button.is-active { background: var(--brass); border-color: transparent; color: #0e110d; }
.mbar__c button.is-active { color: var(--gold-hi); }
.mbar__c button.is-active::after { transform: scaleX(1); }

/* -- the map -------------------------------------------------------------- */
/* Worth more of the page than a letterbox, and the pin should read as a pin. */

.map-shell #map, #map {
    min-height: clamp(420px, 56vh, 620px);
}

.cjavad-pin {
    width: 34px;
    height: 44px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}

.cjavad-pin svg {
    width: 34px;
    height: 44px;
}

.cjavad-pin__body { fill: var(--panel); stroke: var(--gold); stroke-width: 1.6; }
.cjavad-pin--main .cjavad-pin__body { fill: var(--gold); stroke: var(--gold-hi); }
.cjavad-pin__dot { fill: var(--gold); }
.cjavad-pin--main .cjavad-pin__dot { fill: #0e110d; }

/* Leaflet's own popup, in the template's colours. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--panel);
    color: var(--cream);
    border-radius: 0;
    border: 1px solid var(--line);
}

.leaflet-popup-content { font-family: var(--sans); font-size: .88rem; margin: 14px 16px; }
.leaflet-popup-content a { color: var(--gold-hi); }
.leaflet-container { background: var(--night); }

/* -- the basket ----------------------------------------------------------- */
/* A dish photo fills its square instead of sitting letterboxed inside it. */

.bline__img {
    display: grid;
    place-items: center;
}

.bline__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* -- ordering from the carte ---------------------------------------------- */
/* A guest at a table orders from the printed carte, so each row grows a
   quantity and an Add without losing the dotted-leader look. */

.carte__o {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.carte__o .qty { transform: scale(.92); transform-origin: left center; }

@media (max-width: 560px) {
    .carte__o { gap: 10px; }
}

/* -- one by one / side by side -------------------------------------------- */
/* A segmented control: one track, two segments, each a single line of mark and
   word. The active half is filled; the other stays quiet. */

.vsw {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-2);
    background: var(--panel);
    flex: 0 0 auto;
    overflow: hidden;
}

/* Icon only: the two marks say "a row each" and "side by side" plainly enough,
   and a square button reads as one of a pair rather than two labelled options
   competing with the filters beside them. */
.vsw__b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 46px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.vsw__b + .vsw__b { border-left: 1px solid var(--line-2); }
.vsw__b svg { width: 17px; height: 17px; flex: none; }
.vsw__b:hover { color: var(--cream); background: rgba(166, 161, 130, .07); }
.vsw__b.is-active { background: var(--brass); color: #0e110d; }
.vsw__b:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -2px; }


/* -- set menus ------------------------------------------------------------ */
/* Every package is drawn the same: a wide plate with the photograph on one
   side and the offer on the other, stacked down the page. Side by side turns
   the same card into a column. No package is given a bigger frame than the
   others. */

.oset-list {
    display: grid;
    gap: 28px;
}

.oset {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    background: linear-gradient(180deg, var(--panel) 0%, var(--night) 100%);
    border: 1px solid var(--line-2);
    overflow: hidden;
    transition: border-color .35s var(--ease), transform .45s var(--ease);
}

.oset:hover { border-color: var(--line); transform: translateY(-3px); }

.oset__ph {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

.oset__img, .oset__img img {
    display: block;
    width: 100%;
    height: 100%;
}

.oset__img img {
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.oset:hover .oset__img img { transform: scale(1.05); }

/* A hairline of the page's ground washes the picture into the card. */
.oset__ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(14, 17, 13, .55) 100%);
    pointer-events: none;
}

.oset__badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    background: var(--brass);
    color: #0e110d;
    font-family: var(--sc);
    font-size: .64rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 12px;
}

.oset__no {
    position: absolute;
    right: 20px;
    bottom: 14px;
    z-index: 2;
    font-family: var(--serif);
    font-size: 3.4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(166, 161, 130, .34);
}

.oset__b {
    padding: 38px 40px 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.oset__b h3 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    line-height: 1.15;
    margin: 0;
    color: var(--cream);
}

.oset__d { color: var(--body); font-size: .95rem; line-height: 1.7; margin: 0; max-width: 56ch; }
.oset__note { color: var(--muted); font-size: .82rem; margin: 0; }

.oset__plate {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
}

.oset__plate .was { color: var(--faint); text-decoration: line-through; font-size: .95rem; }
.oset__plate .now { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--gold-hi); line-height: 1; }
.oset__plate .save {
    font-family: var(--sc);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--line);
    padding: 6px 10px;
}

.oset__b .fx { margin-top: 4px; }
.oset__b .btn { min-height: 46px; }

/* Side by side: the same card as a column. */
.oset-list.is-cards {
    grid-template-columns: repeat(auto-fill, minmax(330px, 460px));
    justify-content: center;
    align-items: stretch;
}

.oset-list.is-cards .oset { grid-template-columns: 1fr; }
.oset-list.is-cards .oset__ph { min-height: 0; aspect-ratio: 16 / 10; }
.oset-list.is-cards .oset__ph::after { background: linear-gradient(180deg, transparent 55%, rgba(14, 17, 13, .6) 100%); }
.oset-list.is-cards .oset__b { padding: 28px 26px 26px; }

@media (max-width: 900px) {
    .oset { grid-template-columns: 1fr; }
    .oset__ph { min-height: 0; aspect-ratio: 16 / 10; }
    .oset__ph::after { background: linear-gradient(180deg, transparent 55%, rgba(14, 17, 13, .6) 100%); }
    .oset__b { padding: 26px 24px 24px; }
    .oset-list.is-cards { display: grid; grid-template-columns: 1fr; }
}

/* -- the diary's filters -------------------------------------------------- */
/* One panel, one grid. Each control keeps its own label above it so nothing has
   to be guessed from a placeholder, and the row folds to two columns and then
   to one instead of stacking into a pile. */

.efilter {
    background: var(--panel);
    border: 1px solid var(--line-2);
    padding: 24px 26px;
}

.efilter__row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 18px;
    align-items: end;
}

.efilter__f { display: grid; gap: 8px; min-width: 0; }

.efilter__f label {
    font-family: var(--sc);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

.efilter__q { position: relative; display: block; }

.efilter__q svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--gold-deep);
    pointer-events: none;
}

.efilter__q input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    background: var(--night);
    border: 1px solid var(--line-2);
    color: var(--cream);
    font-family: var(--sans);
    font-size: .94rem;
}

.efilter__q input::placeholder { color: var(--faint); }
.efilter__q input:focus { outline: none; border-color: var(--gold); }

.efilter .select {
    height: 48px;
    width: 100%;
    background-color: var(--night);
    border: 1px solid var(--line-2);
}

.efilter .select:focus { outline: none; border-color: var(--gold); }

.efilter__go { display: flex; align-items: center; gap: 14px; }
.efilter__go .btn { height: 48px; }

.efilter__clear {
    font-family: var(--sc);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.efilter__clear:hover { color: var(--gold-hi); }

@media (max-width: 1080px) {
    .efilter__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .efilter__f--q { grid-column: 1 / -1; }
    .efilter__go { grid-column: 1 / -1; }
    .efilter__go .btn { flex: 1; }
}

@media (max-width: 560px) {
    .efilter { padding: 20px 18px; }
    .efilter__row { grid-template-columns: 1fr; gap: 14px; }
}

/* The bar under it: quick filters on one side, count and view on the other. */
.ebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 6px;
}

.ebar__end { display: flex; align-items: center; gap: 20px; }

.ebar__n {
    font-family: var(--sc);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .ebar { gap: 14px; }
    .ebar__end { width: 100%; justify-content: space-between; }
}

/* ===================== booking, redesigned ===============================
   The reservation was a single column of four tall panels — pick a day, pick a
   room, pick a table, say who you are — with the confirm bar riding the bottom
   of the screen. It read as a long form and the choices already made scrolled
   out of sight.

   It is a two-column booking desk now: the questions run down the left in a
   quieter frame, and a rail on the right holds what has been chosen so far and
   the button to confirm it. That rail is the page's existing summary bar,
   moved by layout alone — no behaviour is touched, so every step still works
   exactly as it did. Under 1080px it returns to one column with the bar back
   at the foot of the screen, where a thumb expects it.
   ========================================================================= */

@media (min-width: 1081px) {
    .bkpage [data-bkt-form] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 30px;
        align-items: start;
    }

    .bkpage [data-bkt-form] > .bkcard { grid-column: 1; }

    .bkpage .bkbar {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: 104px;
        bottom: auto;
        margin: 0;
        display: block;
        padding: 26px 24px;
        background: var(--panel);
        border: 1px solid var(--line);
        box-shadow: var(--lift);
    }

    /* The rail names itself, so the column is not a floating button. */
    .bkpage .bkbar::before {
        content: "Your reservation";
        display: block;
        font-family: var(--sc);
        font-size: .68rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--gold);
        padding-bottom: 14px;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--line-2);
    }

    .bkpage .bkbar__l {
        display: block;
        min-width: 0;
        margin-bottom: 22px;
        color: var(--body);
        font-size: .9rem;
    }

    .bkpage .bkbar__l b {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 1.3;
        color: var(--cream);
        margin-bottom: 8px;
    }

    .bkpage .bkbar__go { width: 100%; }
}

/* The panels themselves: quieter frames, more air, square to match the site. */
.bkpage .bkcard {
    background: linear-gradient(180deg, var(--panel) 0%, rgba(14, 17, 13, .6) 100%);
    border: 1px solid var(--line-2);
    border-radius: 0;
    padding: 30px 30px 28px;
}

.bkpage .bkcard + .bkcard { margin-top: 22px; }

.bkpage .bkcard__h {
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line-2);
}

.bkpage .bkcard__n {
    width: 30px;
    height: 30px;
    border-radius: 0;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--gold);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
}

.bkpage .bkcard__t {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--cream);
}

.bkpage .bkcard__s {
    font-family: var(--sans);
    color: var(--muted);
    font-size: .86rem;
    margin-top: 5px;
}

.bkpage .bkbar__go {
    border-radius: 0;
    min-height: 52px;
    background: var(--brass);
    color: #0e110d;
    font-family: var(--sc);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.bkpage .bkbar__go:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1080px) {
    .bkpage .bkbar {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 0;
        padding: 16px 18px;
    }

    .bkpage .bkcard { padding: 24px 20px 22px; }
}

@media (max-width: 560px) {
    .bkpage .bkcard { padding: 20px 16px 18px; }
    .bkpage .bkcard__t { font-size: 1.2rem; }
    .bkpage .bkbar__go { width: 100%; }
}

/* The day and time rails scroll rather than spill past the panel's edge, and a
   soft fade on the right says there is more to reach. */
.bkpage .bwn__rail {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
}

.bkpage .bwn__rail::-webkit-scrollbar { display: none; }

/* Grid gap already separates the panels; the old margin doubled it. */
@media (min-width: 1081px) {
    .bkpage .bkcard + .bkcard { margin-top: 0; }
}

/* -- no sideways scroll --------------------------------------------------- */
/* The off-canvas drawer is parked past the right edge. The theme clips the body,
   but a fixed element is positioned against the viewport, so the body's clip
   never contained it and every page could be dragged sideways. Clipping the root
   as well contains it. `clip` rather than `hidden`, because `hidden` would turn
   the root into a scroll container and break every position:sticky on the site. */

html {
    overflow-x: clip;
    max-width: 100%;
}

/* -- no sideways scroll --------------------------------------------------- */
/* The off-canvas drawer is parked past the right edge. The theme clips the body,
   but a fixed element is positioned against the viewport, so the body's clip
   never contained it and every page could be dragged sideways. Clipping the root
   as well contains it. `clip` rather than `hidden`, because `hidden` would turn
   the root into a scroll container and break every position:sticky on the site. */

html {
    overflow-x: clip;
    max-width: 100%;
}

/* -- carousel dots -------------------------------------------------------- */
/* The dots read as 9px marks, which is right, but a 9px target is not tappable.
   Padding gives each one a finger-sized hit area while the mark itself is
   unchanged, and the row keeps its spacing by pulling the padding back in. */

.bkpage .bkt-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-inline: -11px;
}

.bkpage .bkt-dot {
    padding: 15px 11px;
    background-clip: content-box;
    box-sizing: content-box;
    min-height: 0;
}

@media (max-width: 560px) {
    .bkpage .bkt-dot { padding: 15px 16px; }
    .bkpage .bkt-dots { margin-inline: -16px; }
}

/* -- contact tiles -------------------------------------------------------- */
/* A long e-mail address has to wrap inside its cell rather than push out of it. */

.tiles li { min-width: 0; }

.tiles a, .tiles p, .tiles h4 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tiles a { display: inline-block; }

/* -- the diary's two layouts ---------------------------------------------- */

/* One by one: the picture earns its place, so it is given real width and the
   text beside it room to breathe. */
.agenda .agenda__i {
    padding-block: 34px;
    gap: 30px;
}

.agenda .agenda__p {
    width: clamp(240px, 26vw, 340px);
    height: auto;
    aspect-ratio: 16 / 11;
    align-self: stretch;
}

.agenda .agenda__p img { width: 100%; height: 100%; object-fit: cover; }
.agenda .agenda__t { line-height: 1.18; margin-block: 4px 10px; }
.agenda .agenda__x { line-height: 1.75; max-width: 62ch; }
.agenda .agenda__m { gap: 18px; row-gap: 8px; }

/* Side by side: a proper card — picture on top at a fixed ratio, then a column
   of text with even padding and room between the lines. Cards in a row end
   level because each is a grid that pushes its link to the bottom. */
.agenda.is-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 460px));
    justify-content: center;
    gap: 30px;
    align-items: stretch;
}

.agenda.is-cards .agenda__i {
    display: grid;
    /* The row layout lays its parts out in columns; a card is one column, so the
       column template has to be reset or the picture lands beside the text. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0;
    padding: 0 0 26px;
    border: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, var(--panel) 0%, var(--night) 100%);
    transition: border-color .35s var(--ease), transform .45s var(--ease);
}

.agenda.is-cards .agenda__i:hover { border-color: var(--line); transform: translateY(-3px); }

.agenda.is-cards .agenda__p {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0 0 22px;
    overflow: hidden;
}

.agenda.is-cards .agenda__p img { width: 100%; height: 100%; object-fit: cover; }

.agenda.is-cards .agenda__d {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 26px 14px;
    padding: 0;
    border: 0;
    width: auto;
}

.agenda.is-cards .agenda__d b { font-size: 2rem; line-height: 1; }
.agenda.is-cards .agenda__d span { font-size: .74rem; }

.agenda.is-cards .agenda__c {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 26px;
    min-width: 0;
}

.agenda.is-cards .agenda__m { gap: 14px; row-gap: 6px; font-size: .76rem; }
.agenda.is-cards .agenda__t { font-size: 1.4rem; line-height: 1.24; margin: 0; }
.agenda.is-cards .agenda__x { font-size: .92rem; line-height: 1.7; margin: 0; }
.agenda.is-cards .agenda__go { margin-top: auto; padding-top: 6px; }

@media (max-width: 900px) {
    .agenda .agenda__i { gap: 22px; }
    .agenda .agenda__p { width: clamp(150px, 34vw, 240px); }
}

@media (max-width: 720px) {
    .agenda .agenda__i { padding-block: 26px; }
    .agenda .agenda__p { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* -- choosing a branch ---------------------------------------------------- */
/* One design for every flow: an editorial row with an oversized numeral, the
   branch and its address, then whatever that flow knows about it — whether the
   kitchen is open, how many tables or rooms are free, how many seats. */

.bpick { display: grid; }

.bpick__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 26px;
    padding: 26px 4px;
    border-top: 1px solid var(--line-2);
    color: inherit;
    transition: background .35s var(--ease), padding-inline .35s var(--ease);
}

.bpick__row:last-child { border-bottom: 1px solid var(--line-2); }
.bpick__row:hover { background: rgba(166, 161, 130, .05); padding-inline: 16px 12px; }

.bpick__n {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(166, 161, 130, .38);
}

.bpick__row:hover .bpick__n { -webkit-text-stroke-color: var(--gold); }

.bpick__main { display: grid; gap: 6px; min-width: 0; }

.bpick__name {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.2;
    color: var(--cream);
}

.bpick__row:hover .bpick__name { color: var(--gold-hi); }

.bpick__addr { color: var(--muted); font-size: .88rem; line-height: 1.5; }

.bpick__facts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bpick__fact,
.bpick__state {
    font-family: var(--sc);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-2);
    padding: 6px 10px;
    white-space: nowrap;
}

.bpick__state { display: inline-flex; align-items: center; gap: 7px; }
.bpick__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bpick__state.is-open { color: var(--gold-hi); border-color: var(--line); }
.bpick__state.is-shut { color: var(--faint); }

.bpick__go {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    color: var(--gold);
    flex: none;
    transition: background .3s var(--ease), border-color .3s var(--ease);
}

.bpick__go svg { width: 16px; height: 16px; }
.bpick__row:hover .bpick__go { background: var(--brass); border-color: transparent; color: #0e110d; }

/* Where you are booking, once a branch is chosen.
   This replaces two boxes that said the same thing: a gold-framed hero holding
   nothing but an open/closed pill, and a line underneath naming the branch. One
   plate now carries the mark, the branch, its address and whether the kitchen is
   open, with the way to change branch on the end. */

.bpick__here {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 20px;
    padding: 18px 22px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, rgba(166, 161, 130, .07), rgba(14, 17, 13, 0) 60%), var(--panel);
    border: 1px solid var(--line-2);
    border-inline-start: 2px solid var(--gold);
    color: var(--body);
}

.bpick__here.is-shut { border-inline-start-color: var(--rose); }

.bpick__here__ic {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--line);
    background: rgba(166, 161, 130, .08);
    color: var(--gold);
}

.bpick__here__ic svg { width: 18px; height: 18px; }
.bpick__here__b { min-width: 0; display: grid; gap: 3px; }

.bpick__here__k {
    font-family: var(--sc);
    font-size: .64rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
}

.bpick__here__n {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--cream);
}

.bpick__here__a { font-size: .84rem; color: var(--muted); line-height: 1.5; }

.bpick__here__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: var(--sc);
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-hi);
    border: 1px solid var(--line);
    padding: 8px 13px;
}

.bpick__here__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bpick__here.is-shut .bpick__here__state { color: var(--rose); border-color: rgba(198, 194, 169, .3); }

.bpick__change {
    font-family: var(--sc);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
    border: 1px solid var(--line);
    padding: 9px 14px;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.bpick__change:hover { background: var(--brass); border-color: transparent; color: #0e110d; }

/* -- choosing a branch on a phone ----------------------------------------- */
/* The row is laid out by name rather than by source order. Without that the
   facts were pushed to their own line and the arrow fell to the row below them,
   under the numeral, on its own — which is what a phone was showing. */

@media (max-width: 860px) {
    .bpick__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "num  main  go"
            ".    facts facts";
        align-items: start;
        gap: 10px 14px;
        padding: 22px 2px;
    }

    /* The name and address already stack inside .bpick__main, so it stays one
       item and only the numeral, the facts and the arrow are placed. */
    .bpick__n { grid-area: num; font-size: 1.5rem; line-height: 1.2; padding-top: 1px; }
    .bpick__main { grid-area: main; }
    .bpick__facts { grid-area: facts; justify-content: flex-start; }
    .bpick__go { grid-area: go; width: 38px; height: 38px; }
    .bpick__row:hover { padding-inline: 8px; }

    .bpick__here {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px 16px;
        padding: 18px;
    }

    .bpick__here__state { grid-column: 1 / -1; justify-self: start; }
    .bpick__change { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 420px) {
    .bpick__n { font-size: 1.25rem; }
    .bpick__facts { gap: 6px; }
}

/* -- the booking rails ---------------------------------------------------- */
/* Days and times run past the panel's edge on purpose: hovering near either end
   glides the rail (see booking_rails). No scrollbar, and a fade says there is
   more to reach. */

/* `scroll-behavior` is deliberately left alone. Setting it to `smooth` here made
   the browser animate towards every one of the small per-frame nudges the edge
   hover applies, so each nudge restarted the animation from a standstill and the
   rail never actually moved. The one place that wants smoothness — revealing a
   day picked from the date field — asks for it on the call itself. */

.bkpage .bwn__rail,
.bkpage .bwn__times,
.bkpage [data-bwn-times] {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 40px), transparent 100%);
}

.bkpage .bwn__rail::-webkit-scrollbar,
.bkpage .bwn__times::-webkit-scrollbar,
.bkpage [data-bwn-times]::-webkit-scrollbar { display: none; }

/* The "another day" field was pressed against the strip above it. */
.bkpage .bwn__other,
.bkpage [data-bwn-pickdate] { margin-block: 4px; }

.bkpage .bwn__pick,
.bkpage .bwn__otherline {
    margin-block: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* The two steppers were wide enough to push "your visit" onto its own line. */
@media (min-width: 861px) {
    .bkpage .bwn__grid,
    .bkpage .bwn__foot {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
        gap: 18px;
    }
}

.bkpage .bwn__sum,
.bkpage [data-bwn-summary] { min-width: 0; overflow-wrap: anywhere; }

/* -- carousel dots -------------------------------------------------------- */
/* The mark stays 9px; the button around it grows to a finger. Drawing the mark
   with a pseudo-element keeps it perfectly round whatever the padding does. */

.bkpage .bkt-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-inline: -12px;
    margin-top: 14px;
}

.bkpage .bkt-dot {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 15px 12px;
    background: none;
    border: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
    line-height: 0;
    transition: none;
}

.bkpage .bkt-dot::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(166, 161, 130, .32);
    transition: width .25s var(--ease), background .25s var(--ease);
}

.bkpage .bkt-dot:hover::before { background: rgba(166, 161, 130, .6); }
.bkpage .bkt-dot.is-on::before { width: 26px; background: var(--gold); }
.bkpage .bkt-dot:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -6px; }

@media (max-width: 560px) {
    .bkpage .bkt-dot { padding: 15px 16px; }
    .bkpage .bkt-dots { margin-inline: -16px; }
}

/* -- where you are, in the phone's chrome ---------------------------------- */
/* The drawer and the dock both used to light one fixed entry — About in the
   drawer, Book in the dock — whatever page you were reading, which said nothing
   and read as a wrong answer. Both now gold the page you are actually on. A
   page none of the dock's three covers simply lights none of them. */

.dock a.is-here { color: var(--gold); }
.dock a.is-here svg { color: var(--gold); }

/* The mark sits above the entry rather than around it, so the row keeps its
   height and the dock stays a quiet strip. */
.dock a { position: relative; }
.dock a.is-here::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--brass);
}

/* Inside an open submenu the current page is gold too, and its rule with it. */
.mnav__sub a.cur {
    color: var(--gold-hi);
    border-left-color: var(--gold);
}

/* ======================= the site's three dialogs ========================= */
/* These were lost when this file was rewritten in "Trim the front page, unify
   branch choice, and finish the theme". Their markup and their scripts stayed,
   so each one still opened and still set `is-on` — it just had nothing to draw
   itself with, and rendered as unstyled blocks at the foot of the page. A test
   that only asks "did it open" reports that as working, which is how it went
   unnoticed. All three are restored as they were.
   ========================================================================== */

/* -- the dish dialog ------------------------------------------------------ */
/* A card or a carte row carries the whole dish in data-dish-* attributes; the
   dialog reads them off whatever was clicked. Photograph on the left, what the
   kitchen put in it on the right. */

.ocard { cursor: pointer; }

.dmodal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: var(--gut);
    opacity: 0;
    transition: opacity .22s var(--ease);
}

.dmodal.is-on { opacity: 1; }
.dmodal[hidden] { display: none; }

.dmodal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(7, 9, 7, .8);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.dmodal__panel {
    position: relative;
    width: min(880px, 100%);
    max-height: min(88vh, 820px);
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--lift);
    display: grid;
    grid-template-columns: 44% 1fr;
    transform: translateY(14px) scale(.99);
    transition: transform .3s var(--ease);
}

.dmodal.is-on .dmodal__panel { transform: none; }

.dmodal__x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    background: rgba(14, 17, 13, .72);
    color: var(--cream);
    cursor: pointer;
    font-size: 15px;
}

.dmodal__x:hover { border-color: var(--gold); color: var(--gold-hi); }

.dmodal__img {
    background: var(--panel-2) center / cover no-repeat;
    min-height: 320px;
}

.dmodal__img.is-empty { background-image: var(--brass); opacity: .25; }

.dmodal__body { padding: 34px 34px 30px; }

.dmodal__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-2);
}

.dmodal__name { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; margin: 0; color: var(--cream); }
.dmodal__price { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-hi); white-space: nowrap; }
.dmodal__desc { color: var(--body); margin: 16px 0 0; line-height: 1.7; font-size: .95rem; }
.dmodal__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dmodal__block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.dmodal__h { font-family: var(--sc); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.dmodal__p { margin: 0; color: var(--body); font-size: .9rem; line-height: 1.65; }

.dmodal__foot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 12px;
    align-items: center;
}

.dmodal__foot .btn { flex: 1; }

.dmodal__stars { display: flex; align-items: center; gap: 3px; margin-top: 12px; }
.dstar { width: 15px; height: 15px; position: relative; display: inline-grid; }
.dstar svg { grid-area: 1 / 1; width: 15px; height: 15px; }
.dstar__b { fill: rgba(166, 161, 130, .22); }
.dstar__f { fill: var(--gold); }
.dmodal__rn { margin-left: 8px; font-size: .82rem; color: var(--muted); }

@media (max-width: 720px) {
    .dmodal__panel { grid-template-columns: 1fr; max-height: 92vh; }
    .dmodal__img { min-height: 210px; }
    .dmodal__body { padding: 24px 22px 26px; }
}

/* -- asking before an order is thrown away -------------------------------- */
/* Used when the basket is cleared, and when a dish belongs to a different
   branch or the other menu than the order already open. */

.cask { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: var(--gut); opacity: 0; transition: opacity .2s var(--ease); }
.cask.is-on { opacity: 1; }
.cask[hidden] { display: none; }
.cask__scrim { position: absolute; inset: 0; background: rgba(7, 9, 7, .82); }
.cask__panel { position: relative; width: min(430px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 32px 30px 26px; text-align: center; box-shadow: var(--lift); }
.cask__ic { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid var(--line); color: var(--gold); }
.cask__ic svg { width: 22px; height: 22px; }
.cask__t { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 8px; color: var(--cream); }
.cask__m { color: var(--body); font-size: .9rem; margin: 0 0 22px; line-height: 1.6; }
.cask__acts { display: flex; gap: 10px; }
.cask__acts .btn { flex: 1; }

/* -- buying a package ----------------------------------------------------- */

.bmodal { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: var(--gut); opacity: 0; transition: opacity .2s var(--ease); }
.bmodal.is-on { opacity: 1; }
.bmodal[hidden] { display: none; }
.bmodal__scrim { position: absolute; inset: 0; background: rgba(7, 9, 7, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bmodal__panel { position: relative; width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 34px 32px 28px; box-shadow: var(--lift); }
.bmodal__t { font-family: var(--serif); font-size: 1.5rem; margin: 6px 0 22px; color: var(--cream); }
.bmodal__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.bmodal__total b { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-hi); }

/* Counts beside a filter, the way the menu rail numbers its categories. */
.fbtn sup { font-size: .62rem; color: var(--faint); margin-left: 5px; }
.fbtn.is-active sup, .fbtn.on sup { color: currentColor; opacity: .75; }

/* -- the view switch on a phone -------------------------------------------- */
/* One column means there is nothing to put side by side, so there is nothing to
   choose: the list is a stack of cards and the switch has no work to do. It goes
   away rather than sitting there offering a layout the width cannot hold. See
   web/partials/view-switch for the one case that needs a line of script. */

@media (max-width: 720px) {
    .vsw { display: none; }
}


/* -- contact, on a phone --------------------------------------------------- */
/* The branch name is an .eyebrow, which centres itself between its two rules,
   while the address, the phone and the two buttons underneath stayed hard left.
   One block cannot be half centred, so on a phone the whole of it lines up on
   the middle — heading, details and actions together. */

@media (max-width: 720px) {
    .pin__side > div { text-align: center; }
    .pin__side .eyebrow { justify-content: center; }
    .pin__side .fx { justify-content: center; }
    .pin__side .meta { justify-items: center; }
    .pin__side .meta li { justify-content: center; text-align: center; }
    .pin__side .meta svg { margin-top: 3px; }
}

/* ================================================ pieces the template lacks */
/* The template is a restaurant brochure. A working restaurant needs a few
   things it never had to draw: a dish list with real prices on the home page,
   a line under a page title, a message after a form is sent, and a price on a
   pinned offer. Each is written in the template's own vocabulary so it reads as
   part of the same site rather than something bolted on. */

/* -- a few real dishes, on the home page ---------------------------------- */
/* The template showed a picture of a menu. This shows the menu: the dishes the
   owner has marked, at the price the kitchen charges today. */
.home-menu {
    padding: clamp(70px, 8vw, 120px) 0;
    background: var(--night);
}

.home-menu-item {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 16px;
    margin-bottom: 24px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    transition: border-color .4s var(--ease), transform .4s var(--ease);
}

.home-menu-item:hover {
    border-color: var(--line);
    transform: translateY(-4px);
}

.home-menu-item__img {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
}

.home-menu-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-menu-item__body { min-width: 0; }

/* The name and the price sit on one line with the leader between them, the way
   a printed carte sets them, and the price never wraps under the name. */
.home-menu-item__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.home-menu-item__head h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    color: var(--cream);
}

.home-menu-item__price {
    margin-inline-start: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 700;
    color: var(--gold);
}

.home-menu-item__body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--body);
}

/* -- a line under a page title -------------------------------------------- */
.page-header-sub {
    max-width: 60ch;
    margin: 14px auto 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
}

/* -- what happened after a form was sent ---------------------------------- */
/* The template's forms only ever said thank you. These carry a real answer from
   the server, including the unwelcome one, so both are drawn. */
.form-note {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--body);
    font-size: 15px;
    line-height: 1.5;
}

.form-note--ok {
    border-color: rgba(166, 161, 130, .45);
    color: var(--cream);
}

.form-note--bad {
    border-color: rgba(230, 87, 87, .5);
    color: #f2cec7;
    background: #3a1a17;
}

/* -- the price on a pinned package ---------------------------------------- */
.delicious-burger-price {
    margin: 4px 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
}

@media (max-width: 575px) {
    .home-menu-item { gap: 14px; padding: 12px; }
    .home-menu-item__img { flex-basis: 76px; width: 76px; height: 76px; }
    .home-menu-item__head { flex-wrap: wrap; }
    .home-menu-item__price { margin-inline-start: 0; }
}

/* -- what a guest types, on the white booking card ------------------------ */
/* The template sets the value, the placeholder and the border to the same
   grey. On its white card that leaves what somebody has just typed almost as
   faint as the hint it replaced. The colour here is the template's own dark
   tone, the one it already uses for the labels on that card, so the card looks
   exactly as designed and the answer can be read back. */
.reserve-table-form .form-control,
.reserve-table-form .form-select {
    color: var(--secondary-color);
}

.reserve-table-form .form-control::placeholder {
    color: var(--text-color);
}

/* -- the branches map ----------------------------------------------------- */
/* The template put a static picture of a map in an iframe. This is the real
   one, drawn from the branches themselves, so it needs to be told how tall to
   be: an empty div has no height of its own and would collapse to nothing. */
.branches-map__frame > #map,
.branch-sidebar__map > #map {
    width: 100%;
    height: clamp(320px, 46vh, 520px);
}

.branches-map__frame .map-fallback,
.branch-sidebar__map .map-fallback {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 24px;
    text-align: center;
    color: var(--body);
}

/* -- the map on the contact page ------------------------------------------ */
.google-map-iframe > #map {
    width: 100%;
    height: clamp(300px, 42vh, 460px);
}

/* -- every room's own number ---------------------------------------------- */
/* One switchboard number is no use to a guest ringing about a table in a
   particular room. With more than one room the page lists them, which a
   template built for a single address had no reason to. */
.contact-branch-list {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--divider-color);
}

.contact-branch-list h4 {
    margin-bottom: 16px;
    font-size: 17px;
    color: var(--primary-color);
}

.contact-branch-list ul { margin: 0; padding: 0; list-style: none; }

.contact-branch-list li {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider-color);
}

.contact-branch-list li:last-child { border-bottom: 0; }
.contact-branch-list li strong { color: var(--primary-color); font-size: 16px; }
.contact-branch-list li span { color: var(--text-color); font-size: 14px; }
.contact-branch-list li a { color: var(--accent-color); font-size: 14px; }