/* 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 */
/* Nothing here. The bar is the template's own markup and the template styles
   it, animates it and lifts the back-to-top button out of its way. A second set
   of rules used to sit on top of that and the two disagreed: on a phone the
   panel ended up 173 pixels below the fold, with Accept and Decline out of
   reach. One owner is the fix. */

/* -------------------------------------------------------------- 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. */
    /* A custom property cannot have a space in its name, so this one never
       existed and every rule asking for it fell back to nothing. It is a leftover
       of renaming a font across the project by search and replace. */
    --font-family-base: "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) {
    /* minmax(0, 1fr), not 1fr: a 1fr column never shrinks below its widest
       line, so one long word or button pushed the whole dialog past a phone's
       edge and cut the price off. */
    .dmodal__panel { grid-template-columns: minmax(0, 1fr); max-height: 92vh; }
    .dmodal__img { min-height: 210px; }
    .dmodal__body { padding: 24px 22px 26px; }
    /* On a phone the name, price and stars sit in the middle, as on the card. */
    .dmodal__head { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
    .dmodal__stars { justify-content: center; }
}

/* -- 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; }

/* ================================================== the footer on a phone */
/* The template lays the footer out in four columns and says nothing about what
   happens when they stack. They stack anyway, and the result is one long run of
   links with a heading dropped into the middle of it: "Contact Us" sits directly
   on top of "Discover" with nothing between them, so the reader cannot tell
   where one group ends and the next begins.

   This gives the stacked columns the same rhythm the row has, and rules a
   hairline above each heading so the groups read as groups. Nothing changes at
   the width the template was drawn for. */
@media (max-width: 991px) {
    .main-footer .footer-content {
        margin-bottom: 44px;
    }

    .main-footer .footer-links {
        margin-bottom: 38px;
    }

    .main-footer .footer-links h3 {
        margin-bottom: 18px;
        padding-top: 26px;
        border-top: 1px solid var(--divider-color);
    }

    /* The first column of a stacked pair has the rule from the block above it
       already; a second in the same row would double it. */
    .main-footer .row > [class*="col-"]:first-child .footer-links h3 {
        padding-top: 0;
        border-top: 0;
    }

    .main-footer .footer-links ul li {
        margin-bottom: 12px;
    }

    .main-footer .footer-links ul li:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    /* Full width now, one column each, so every heading gets its own rule. */
    .main-footer .row > [class*="col-"]:first-child .footer-links h3 {
        padding-top: 26px;
        border-top: 1px solid var(--divider-color);
    }

    .main-footer .footer-copyright {
        margin-top: 8px;
        text-align: center;
    }

    .main-footer .footer-copyright-text,
    .main-footer .footer-social-icon,
    .main-footer .footer-payments {
        justify-content: center;
        margin-bottom: 18px;
    }

    .main-footer .footer-social-icon ul,
    .main-footer .footer-payments ul {
        justify-content: center;
    }
}

/* -- the three contact lines ---------------------------------------------- */
/* Two of them carry a drawn icon and the third a font one, which sit on
   different baselines and left the e-mail line half a step out. A fixed box
   puts all three on the same line, at any width. */
.main-footer .footer-contact-item .icon-box {
    flex: 0 0 22px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-footer .footer-contact-item .icon-box i {
    font-size: 15px;
    line-height: 1;
}

/* ============================================ text that had no line to sit on */
/* The template sets `line-height: 1em` on the body. Anything it styles without
   saying otherwise inherits that, and where the type is larger than the body's
   the line ends up shorter than the letters: a 19px name on a 16px line, which
   clips its descenders and sits hard against whatever follows.
   
   Six places on the site did that. Each is given a line to sit on, in
   proportion rather than as a fixed number, so it stays right when the type
   scale changes at another width. */
.about-sign strong,
.chef-band__sign strong {
    display: block;
    line-height: 1.35;
}

.about-sign span,
.chef-band__sign span {
    display: block;
    margin-top: 2px;
    line-height: 1.45;
}

.breadcrumb li,
.breadcrumb .breadcrumb-item {
    line-height: 1.5;
}

/* The dish card's name, its price and the price it replaced. */
.ocard__h span,
.ocard__p,
.ocard__p s {
    line-height: 1.4;
}

/* The order drawer's subtotal and total rows. */
.basket__r span {
    line-height: 1.4;
}

/* -- headings that wrap ---------------------------------------------------- */
/* A heading at 1.2 is comfortable on one line and tight on two. These three
   wrap at almost every width, so they are given the room. */
.value-item h3,
.timeline__item h3,
.home-menu-item__head h3 {
    line-height: 1.3;
}

.timeline__year {
    line-height: 1.4;
}

/* ==========================================================================
   Reaching things with a thumb
   ==========================================================================

   The template draws its two text links, "read more" and the arrow link on a
   branch card, with no padding at all. On a desktop that is a considered look
   and the pointer is precise enough for it. On a phone the whole target is
   sixteen pixels tall, which is under half what a thumb needs, and the reader
   has to aim.

   The growth is padding on the link itself, cancelled by an equal negative
   margin, so the box a finger can land on is forty six pixels tall while the
   text stays exactly where it was drawn and nothing around it moves.

   This was first tried with a transparent pseudo-element stretched over a
   larger area, which does not work and is worth writing down. Behind the text
   it takes no taps at all, because a negative z-index puts it under its own
   parent and the container gets the hit instead; in front of the text it takes
   taps that belong to whatever it happens to overlap. Padding on the real
   element has neither problem: the element that grows is the element that was
   already the target.
   ========================================================================== */
@media (max-width: 767px) {
    .link-btn,
    .readmore-btn {
        padding-block: 11px;
        margin-block: -11px;
    }
}

/* The breadcrumb sits on the page banner, where the template's line height of
   one leaves the descenders of "gallery" and "private rooms" sitting on the
   line below their own letters. */
.breadcrumb a,
.breadcrumb-item a,
.breadcrumb-item {
    line-height: 1.5;
}

/* ==========================================================================
   The map on the contact page
   ==========================================================================

   The template makes the map full bleed by taking the padding off its
   container. Our markup puts a grid row inside that container, and a row
   carries a negative margin on both sides which the container's padding is
   normally there to cancel. With the padding gone the row hangs fifteen pixels
   off each edge: the map is cut on the right, its left edge starts off screen,
   and the two buttons under it go with it.

   Nothing looked wrong, because the page does not gain a sideways scrollbar.
   The body hides the overflow, so the cut edge is simply not drawn.

   This only appeared once a branch had an address, because that is when the map
   is drawn at all.
   ========================================================================== */
.google-map .container-fluid > .row {
    margin-inline: 0;
}

.google-map .container-fluid > .row > [class*="col-"] {
    padding-inline: 0;
}

/* ==========================================================================
   The picture on an offer card
   ==========================================================================

   The template asks for a sixteen by nine picture and the browser honours it
   right up until the picture disagrees. `aspect-ratio` sets a preferred size,
   not a limit: the figure inside is told `height: 100%`, which resolves against
   a height the aspect ratio has not settled yet, so the browser falls back to
   auto, the figure takes the photograph's own height, and the box grows to
   match. A portrait photograph gave a card six hundred wide and eleven hundred
   tall, and the offers page became a column of towers.

   Taking the figure out of the flow settles it. The box keeps the ratio it asks
   for, the photograph fills it and is cropped rather than followed.
   ========================================================================== */
.offer-card__media {
    overflow: hidden;
}

.offer-card__media > figure {
    position: absolute;
    inset: 0;
    margin: 0;
}

.offer-card__media > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Choosing a branch
   ==========================================================================

   These pages were another restaurant's, name swapped: the same numbered rows
   stacked down the page, the same grey list. Anyone shown both sites together
   would have seen it at once.

   This is the house's own furniture. Cards on the panel colour, a gold hairline
   that warms on approach, the branch numbered in the corner the way the carte
   numbers its courses, and the address in the small spaced capitals the rest of
   the site uses for a label.
   ========================================================================== */
.cj-pick { padding: clamp(56px, 7vw, 96px) 0 clamp(30px, 4vw, 48px); }

.cj-pick__grid { row-gap: 22px; }

.cj-branch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 26px);
    height: 100%;
    padding: clamp(24px, 2.6vw, 34px);
    background: var(--panel, #1f2120);
    border: 1px solid var(--line-2, rgba(255, 255, 255, .10));
    border-radius: 2px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
                transform .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
                box-shadow .45s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

/* A thin gold edge that lights along the top as the card is approached. */
.cj-branch::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold, #a6a182), var(--gold-hi, #cbc7ae), transparent 78%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.cj-branch:hover,
.cj-branch:focus-visible {
    border-color: rgba(166, 161, 130, .45);
    transform: translateY(-4px);
    box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .95);
}

.cj-branch:hover::before,
.cj-branch:focus-visible::before { transform: scaleX(1); }

.cj-branch__no {
    flex: none;
    font-family: var(--sc, "Hanken Grotesk", system-ui, sans-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 300;
    line-height: 1;
    color: var(--gold, #a6a182);
    opacity: .5;
    letter-spacing: .04em;
}

.cj-branch__body { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }

.cj-branch__name {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--cream, #ffffff);
}

.cj-branch__addr {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint, #63666a);
    line-height: 1.5;
}

.cj-branch__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }

.cj-branch__fact {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--body, #aeb0b4);
    border: 1px solid var(--line-2, rgba(255, 255, 255, .10));
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1;
}

.cj-branch__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1;
}

.cj-branch__state i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cj-branch__state.is-open { color: #8fbf6a; background: rgba(143, 191, 106, .12); }
.cj-branch__state.is-open i { background: #8fbf6a; }
.cj-branch__state.is-shut { color: var(--faint, #63666a); background: rgba(255, 255, 255, .05); }
.cj-branch__state.is-shut i { background: var(--faint, #63666a); }

.cj-branch__go {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold, #a6a182);
    white-space: nowrap;
}

.cj-branch__go svg { width: 17px; height: 17px; transition: transform .45s var(--ease, cubic-bezier(.22, 1, .36, 1)); }
.cj-branch:hover .cj-branch__go svg { transform: translateX(5px); }

@media (max-width: 767px) {
    .cj-branch { flex-wrap: wrap; padding: 22px; gap: 14px; }
    .cj-branch__go { width: 100%; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line-2, rgba(255, 255, 255, .10)); }
    .cj-branch__go__t { letter-spacing: .16em; }
}

/* ---- Where you are booking, once the branch is chosen ---- */
.cj-here {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    flex-wrap: wrap;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
    background: var(--panel, #1f2120);
    border: 1px solid var(--line-2, rgba(255, 255, 255, .10));
    border-inline-start: 2px solid var(--gold, #a6a182);
    border-radius: 2px;
}

.cj-here__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(166, 161, 130, .14); color: var(--gold, #a6a182); }
.cj-here__ic svg { width: 18px; height: 18px; }

.cj-here__b { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cj-here__k { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint, #63666a); line-height: 1.4; }
.cj-here__n { font-size: 1.02rem; font-weight: 600; color: var(--cream, #ffffff); line-height: 1.35; }
.cj-here__a { font-size: .8rem; color: var(--muted, #8b8d90); line-height: 1.45; }

.cj-here__state { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 6px 13px; line-height: 1; }
.cj-here__state i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cj-here.is-open .cj-here__state { color: #8fbf6a; background: rgba(143, 191, 106, .12); }
.cj-here.is-open .cj-here__state i { background: #8fbf6a; }
.cj-here.is-shut .cj-here__state { color: var(--faint, #63666a); background: rgba(255, 255, 255, .05); }
.cj-here.is-shut .cj-here__state i { background: var(--faint, #63666a); }

.cj-here__change {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold, #a6a182); text-decoration: none; padding-bottom: 2px;
    border-bottom: 1px solid rgba(166, 161, 130, .4);
    transition: color .3s ease, border-color .3s ease;
}
.cj-here__change:hover { color: var(--gold-hi, #cbc7ae); border-color: var(--gold-hi, #cbc7ae); }

@media (max-width: 575px) {
    .cj-here { gap: 12px; }
    .cj-here__change { width: 100%; text-align: center; border: 1px solid rgba(166, 161, 130, .4); border-radius: 2px; padding: 11px; }
}

/* ==========================================================================
   The carte
   ==========================================================================

   Two hundred and thirty nine lines of this page were another restaurant's, to
   within four. The food ran down the page in wide horizontal cards with the
   picture on the left, which is that restaurant's shape, not this one's.

   Here the courses read the way the printed carte does: a rail of course names
   across the top, then a heading in the house's own section style, then the
   dishes in threes with the photograph above and the price carried out to the
   right on a line of dots, the way a menu sets a price.

   The class names are the house's own. The data hooks underneath are the ones
   the carte's script reads, and not one of them moved.
   ========================================================================== */
.cj-rail {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(14, 17, 13, .92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-2, rgba(255, 255, 255, .10));
}

.cj-rail__in { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); min-height: 70px; }

/* Food or drink: one quiet control, the chosen side lit in gold. */
.cj-rail__kind { display: inline-flex; flex: none; padding: 4px; gap: 4px; border: 1px solid var(--line-2, rgba(255, 255, 255, .10)); border-radius: 999px; }

.cj-rail__kind button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font-family: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    line-height: 1; color: var(--muted, #8b8d90);
    transition: color .35s ease, background .35s ease;
}
.cj-rail__kind button svg { width: 16px; height: 16px; flex: none; }
.cj-rail__kind button:hover { color: var(--cream, #ffffff); }
.cj-rail__kind button.is-active { background: var(--gold, #a6a182); color: #0e110d; }

/* The courses. A line of names that slides sideways when the screen is small. */
.cj-rail__cats {
    display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding: 6px 0; margin-inline-start: auto;
}
.cj-rail__cats::-webkit-scrollbar { display: none; }
.cj-rail__cats.is-hidden { display: none; }

.cj-rail__cats button {
    position: relative; flex: none; padding: 8px 2px 10px; border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: .82rem; font-weight: 500; letter-spacing: .04em; line-height: 1.2;
    color: var(--body, #aeb0b4); white-space: nowrap;
    transition: color .35s ease;
}
.cj-rail__cats button sup { font-size: .6rem; margin-inline-start: 4px; color: var(--faint, #63666a); font-weight: 600; }
.cj-rail__cats button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--gold, #a6a182); transform: scaleX(0); transform-origin: center;
    transition: transform .4s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cj-rail__cats button:hover { color: var(--cream, #ffffff); }
.cj-rail__cats button.is-active { color: var(--gold, #a6a182); }
.cj-rail__cats button.is-active sup { color: var(--gold, #a6a182); }
.cj-rail__cats button.is-active::after { transform: scaleX(1); }

@media (max-width: 991px) {
    .cj-rail__in { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 6px; }
    .cj-rail__cats { margin-inline-start: 0; width: 100%; }
}

/* ---- The courses themselves ---- */
.cj-carte { padding: clamp(48px, 6vw, 86px) 0 clamp(36px, 5vw, 70px); }
.cj-carte__kind { display: none; }
.cj-carte__kind.is-active { display: block; }
.cj-course { display: none; }
.cj-course.is-active { display: block; }
.cj-course__head { margin-bottom: clamp(24px, 3vw, 40px); }

.cj-dishes { row-gap: clamp(22px, 2.6vw, 34px); }

.cj-dish {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--panel, #1f2120);
    border: 1px solid var(--line-2, rgba(255, 255, 255, .10));
    border-radius: 2px; overflow: hidden;
    transition: border-color .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
                transform .45s var(--ease, cubic-bezier(.22, 1, .36, 1)),
                box-shadow .45s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cj-dish:hover {
    border-color: rgba(166, 161, 130, .42);
    transform: translateY(-5px);
    box-shadow: 0 28px 64px -36px rgba(0, 0, 0, .95);
}

.cj-dish__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0e110d; }
.cj-dish__media > figure { position: absolute; inset: 0; margin: 0; }
.cj-dish__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cj-dish__gone {
    position: absolute; inset: auto 12px 12px auto; z-index: 2;
    font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
    color: #0e110d; background: var(--gold-hi, #cbc7ae); border-radius: 999px; padding: 7px 12px;
}

.cj-dish__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 24px); flex: 1; }

/* The name, then dots, then the price: how a menu sets out a line. */
.cj-dish__top { display: flex; align-items: baseline; gap: 10px; }
.cj-dish__name { margin: 0; font-size: clamp(1.02rem, 1.35vw, 1.2rem); font-weight: 600; line-height: 1.3; color: var(--cream, #ffffff); }
.cj-dish__dots { flex: 1; height: 1px; align-self: center; background-image: radial-gradient(circle, rgba(166, 161, 130, .5) 1px, transparent 1px); background-size: 6px 1px; background-repeat: repeat-x; }
.cj-dish__price { flex: none; font-size: 1rem; font-weight: 700; color: var(--gold, #a6a182); white-space: nowrap; line-height: 1.3; }
.cj-dish__price s { opacity: .45; font-weight: 500; margin-inline-end: 4px; }

.cj-dish__desc { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted, #8b8d90); }

.cj-dish__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2, rgba(255, 255, 255, .10)); }

.cj-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2, rgba(255, 255, 255, .10)); border-radius: 999px; overflow: hidden; }
.cj-qty button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; color: var(--body, #aeb0b4); cursor: pointer; transition: color .3s ease, background .3s ease; }
.cj-qty button:hover { color: var(--gold, #a6a182); background: rgba(166, 161, 130, .1); }
.cj-qty button svg { width: 15px; height: 15px; }
.cj-qty input { width: 34px; height: 34px; border: 0; background: transparent; text-align: center; color: var(--cream, #ffffff); font: inherit; font-size: .9rem; font-weight: 600; -moz-appearance: textfield; }
.cj-qty input::-webkit-outer-spin-button, .cj-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cj-dish__add { margin-inline-start: auto; }
.cj-dish__off { margin-inline-start: auto; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #63666a); }

@media (max-width: 575px) {
    .cj-dish__foot { flex-wrap: wrap; }
    .cj-dish__add { width: 100%; margin-inline-start: 0; text-align: center; }
}

/* The bar that says which branch you are reading, and its two actions. */
.cj-here__acts { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cj-here__swap { padding: 12px 22px; font-size: .7rem; }

/* Nothing to show: a shut kitchen, or a carte not yet published. Centred on the
   panel rather than left in the corner of an empty page. */
.cj-nothing {
    max-width: 620px; margin: 0 auto; padding: clamp(36px, 5vw, 62px) clamp(24px, 3vw, 44px);
    text-align: center; background: var(--panel, #1f2120);
    border: 1px solid var(--line-2, rgba(255, 255, 255, .10)); border-radius: 2px;
}
.cj-nothing h3 { margin: 0 0 12px; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; color: var(--cream, #ffffff); line-height: 1.3; }
.cj-nothing p { margin: 0 0 24px; color: var(--muted, #8b8d90); font-size: .95rem; line-height: 1.65; }
.cj-nothing__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 575px) {
    .cj-here__acts { width: 100%; }
    .cj-here__swap { width: 100%; text-align: center; }
    .cj-nothing__acts .btn-default { width: 100%; text-align: center; }
}

/* ==========================================================================
   What the working pages say that the brochure never had to
   ==========================================================================
   Every piece below is drawn in the template's own vocabulary: the house panel,
   a gold hairline, the khaki accent and white lettering. Nothing here brings a
   colour of its own beyond the two states a guest must not confuse, which are
   the ok green and the warning red the app sheet already declares. */

/* -- side by side / one by one ------------------------------------------- */
/* The list carries data-view; each item is a full-width column, and side by
   side halves it on a wide screen. Below the breakpoint it is one column
   whatever was chosen, and the switch is hidden. */
.cj-vlist > .cj-vlist__i { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) {
    .cj-vlist[data-view="grid"] > .cj-vlist__i { flex: 0 0 50%; max-width: 50%; }

    .cj-vlist[data-view="grid"] .event-card { grid-template-columns: 1fr; }
    .cj-vlist[data-view="grid"] .event-card__media { min-height: 0; aspect-ratio: 16 / 9; }

    .cj-vlist[data-view="rows"] .offer-card { flex-direction: row; }
    .cj-vlist[data-view="rows"] .offer-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 320px; }
}
.offers-bar { display: flex; justify-content: flex-end; margin: -16px 0 24px; }
.events-toolbar .vsw { margin-left: 4px; }

/* -- a message after a form -------------------------------------------- */
.cj-flash { margin: 0 0 26px; padding: 16px 20px; border-radius: var(--app-radius-sm, 12px); font-size: 15px; line-height: 1.55; border: 1px solid; }
.cj-flash--ok { border-color: rgba(123, 196, 155, .45); background: rgba(123, 196, 155, .10); color: #ffffff; }
.cj-flash--bad { border-color: rgba(224, 107, 91, .55); background: rgba(224, 107, 91, .10); color: #ffffff; }

/* -- offers ------------------------------------------------------------- */
.offer-card__media { position: relative; }
.offer-card__hot {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    padding: 8px 14px; border-radius: 30px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: rgba(14, 17, 13, .78); color: #ffffff; border: 1px solid rgba(166, 161, 130, .6);
}
.about-cta__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 22px; }
.about-cta__ways a { color: var(--text-color, #aeb0b4); font-size: 15px; }
.about-cta__ways a:hover { color: var(--accent-color, #a6a182); }
.about-cta__ways i { color: var(--accent-color, #a6a182); margin-right: 8px; }

/* -- events ------------------------------------------------------------- */
.event-card__how,
.event-card__out {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 30px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    background: rgba(14, 17, 13, .8); color: #ffffff; border: 1px solid rgba(166, 161, 130, .5);
}
.event-card__how { left: 16px; bottom: 16px; }
.event-card__how i { color: var(--accent-color, #a6a182); }
.event-card__out { right: 16px; top: 16px; border-color: rgba(224, 107, 91, .7); }

.event-card__status.is-ongoing { border-color: rgba(123, 196, 155, .55); background: rgba(123, 196, 155, .12); }
.event-card__status.is-ended { background: transparent; color: var(--text-color, #aeb0b4); border-color: rgba(255, 255, 255, .14); }
.event-card.is-ended .event-card__media img { filter: grayscale(.6); opacity: .7; }

.event-card__org { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-color, #a6a182); }
.event-card__org img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.event-card__facts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.event-card__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.event-card__facts i { flex: none; width: 16px; margin-top: 3px; text-align: center; color: var(--accent-color, #a6a182); }

.event-card__stock { margin: 4px 0 18px; }
.event-card__stock-t { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 7px; }
.event-card__stock-t b { color: var(--primary-color, #ffffff); font-weight: 700; }
.event-card__stock-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.event-card__stock-bar span { display: block; height: 100%; border-radius: 5px; background: var(--accent-color, #a6a182); }
.event-card__stock-bar span.is-low { background: #e06b5b; }
.event-card__stock.is-out .event-card__stock-bar span { background: rgba(224, 107, 91, .55); }
.event-card__stock.is-out .event-card__stock-t b { color: #e06b5b; }

/* -- the basket: what is behind it, and a package in it ------------------ */
.cj-scrim {
    position: fixed; inset: 0; z-index: 499;
    background: rgba(7, 9, 7, .62);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.cj-scrim.is-on { opacity: 1; visibility: visible; }
.basket__pkg {
    margin: 14px 0 6px; padding: 12px 14px; font-size: .84rem; line-height: 1.55;
    color: var(--body, #aeb0b4); border: 1px solid rgba(166, 161, 130, .35); background: rgba(166, 161, 130, .08);
}

/* -- a dish: its badge and its stars ------------------------------------ */
.cj-dish__media { position: relative; }
.cj-dish__badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 6px 11px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    background: rgba(14, 17, 13, .8); color: #ffffff; border: 1px solid rgba(166, 161, 130, .55);
}
.cj-dish__stars { display: flex; align-items: center; gap: 3px; margin: 4px 0 8px; }

/* -- a branch that is shut ---------------------------------------------- */
.cj-shut { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 26px; align-items: start; }
@media (max-width: 991px) { .cj-shut { grid-template-columns: 1fr; gap: 20px; } }
.cj-shut__panel,
.cj-shut__hours { padding: clamp(24px, 3vw, 36px); background: var(--secondary-color, #1f2120); border: 1px solid rgba(255, 255, 255, .10); }
.cj-shut__panel { border-top: 2px solid #e06b5b; }
.cj-shut__state { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e06b5b; }
.cj-shut__state i { width: 8px; height: 8px; border-radius: 50%; background: #e06b5b; }
.cj-shut__panel h3 { margin: 14px 0 10px; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; color: var(--primary-color, #ffffff); }
.cj-shut__lede { margin: 0; line-height: 1.7; }
.cj-shut__next { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border: 1px solid rgba(166, 161, 130, .35); background: rgba(166, 161, 130, .08); }
.cj-shut__next i { font-size: 20px; color: var(--accent-color, #a6a182); }
.cj-shut__next span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cj-shut__next b { display: block; margin-top: 2px; font-size: 18px; color: var(--primary-color, #ffffff); }
.cj-shut__where { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.cj-shut__where li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.cj-shut__where i { width: 16px; margin-top: 4px; color: var(--accent-color, #a6a182); text-align: center; }
.cj-shut__where a { color: var(--text-color, #aeb0b4); }
.cj-shut__where a:hover { color: var(--accent-color, #a6a182); }
.cj-shut__acts { justify-content: flex-start; margin-top: 26px; }
.cj-shut__hours h3,
.cj-shut__other h3 { margin: 0 0 4px; font-size: 1.4rem; color: var(--primary-color, #ffffff); }
.cj-shut__hours > p,
.cj-shut__other > p { margin: 0 0 16px; font-size: 14px; }
.cj-shut__week { list-style: none; margin: 0; padding: 0; }
.cj-shut__week li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cj-shut__week li b { font-weight: 600; color: var(--primary-color, #ffffff); font-variant-numeric: tabular-nums; }
.cj-shut__week li.is-off b { color: var(--text-color, #aeb0b4); font-weight: 400; }
.cj-shut__week li.is-today { border: 1px solid rgba(166, 161, 130, .5); background: rgba(166, 161, 130, .1); }
.cj-shut__week em { margin-left: 8px; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color, #a6a182); }
.cj-shut__other { margin-top: 34px; }
.cj-shut__card {
    display: flex; flex-direction: column; gap: 6px; height: 100%; margin-bottom: 20px; padding: 20px;
    background: var(--secondary-color, #1f2120); border: 1px solid rgba(166, 161, 130, .28);
    transition: border-color .25s ease, transform .25s ease;
}
.cj-shut__card:hover { border-color: var(--accent-color, #a6a182); transform: translateY(-3px); }
.cj-shut__open { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7bc49b; }
.cj-shut__open i { width: 8px; height: 8px; border-radius: 50%; background: #7bc49b; }
.cj-shut__card strong { font-size: 19px; color: var(--primary-color, #ffffff); }
.cj-shut__addr { font-size: 14px; color: var(--text-color, #aeb0b4); }
.cj-shut__go { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent-color, #a6a182); }

/* -- a branch's own photographs ---------------------------------------- */
.branch-card__thumbs { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; }
.branch-card__thumbs button { width: 52px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); background: none; overflow: hidden; cursor: pointer; opacity: .75; transition: opacity .2s ease, border-color .2s ease; }
.branch-card__thumbs button.is-active,
.branch-card__thumbs button:hover { opacity: 1; border-color: var(--accent-color, #a6a182); }
.branch-card__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-card__features .chip i { margin-right: 6px; color: var(--accent-color, #a6a182); }

/* The map's little card: the branch's name, where it is, how to ring it. */
.cj-pop { display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.cj-pop b { font-size: 14px; }
.cj-pop__acts { display: flex; gap: 14px; margin-top: 4px; }

/* -- the gallery: films --------------------------------------------------- */
.photo-gallery.is-video a { position: relative; display: block; }
.photo-gallery__ph { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--secondary-color, #1f2120); color: var(--accent-color, #a6a182); font-size: 34px; }
.photo-gallery__play {
    position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
    width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(14, 17, 13, .72); border: 1px solid rgba(166, 161, 130, .7); color: #ffffff; font-size: 18px;
    pointer-events: none;
}
.cj-gvideo { position: relative; width: min(960px, 92vw); margin: 0 auto; }
.cj-gvideo video { display: block; width: 100%; max-height: 82vh; background: #000000; }

/* -- the blog: what is chosen, and the way back ------------------------- */
.blog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.blog-bar .blog-count { margin: 0; }
.blog-bar__clear { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--accent-color, #a6a182); }
.blog-bar__clear:hover { color: var(--primary-color, #ffffff); }
.blog-cats li.is-on a { background: rgba(166, 161, 130, .2); color: var(--primary-color, #ffffff); }
.blog-tags a.is-on { background: var(--accent-color, #a6a182); border-color: var(--accent-color, #a6a182); color: #0e110d; }
a.post-cat:hover { color: var(--primary-color, #ffffff); }

/* -- a name without a stock face ---------------------------------------- */
.author-initials,
.post-author__avatar--initials {
    display: inline-grid; place-items: center; border-radius: 50%;
    background: #262827; color: #cbc7ae; border: 1px solid rgba(166, 161, 130, .5);
    font-weight: 700; letter-spacing: .04em;
}
.author-initials { width: 72px; height: 72px; font-size: 22px; }
.post-author__avatar--initials { width: 72px; height: 72px; font-size: 24px; }