/* ==========================================================================
   The Batch House — "Pick your plate" prototype
   Brand: orange #E57A2E, cream #FBF9F2, ink #1D1A16.
   The hero takes each kitchen's colour (--accent / --ink, set by batch.js).
   Industrial details nod to the venue: spiral-duct orbit ring, a pendant lamp
   on an exposed cord, conduit runs between sections, bolted cards, stencil
   labels.
   ========================================================================== */

/* Headlines: Archivo driven wide (font-stretch 125%) and heavy, the fat,
   chunky look without any odd letter shapes. */
@font-face {
    font-family: "Archivo";
    src: url("/assets/batch/fonts/Archivo-var.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage";
    src: url("/assets/batch/fonts/Bricolage-var.woff2") format("woff2");
    font-weight: 300 800;
    font-display: swap;
}

:root {
    --orange: #E57A2E;   /* the primary brand orange (owner, 21 Oct 2026) */
    --cream: #FBF9F2;
    --ink-dark: #1D1A16;
    --steel: #9d968c;
    --display: "Archivo", system-ui, sans-serif;
    --body: "Bricolage", system-ui, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --stretch: 125%;   /* the wide, chunky headline width */
    --gutter: 16px;
    --max: 1320px;
    --spring: cubic-bezier(.34, 1.45, .5, 1);
    --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
/* Phones and tablets: headlines fill far more of the screen, so the full
   width reads as over-stretched; ease it a little. */
@media (max-width: 959px) { :root { --stretch: 118%; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink-dark);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.55;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-stretch: var(--stretch); line-height: 1.05; margin: 0; font-weight: 800; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink-dark); color: var(--cream); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.muted { opacity: .7; }

/* Stencil labels: the plant-room markings on the ducts. */
.stencil, .eyebrow {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1rem; }
.eyebrow--orange { color: var(--orange); }

/* Logo: the owner's redrawn SVGs (built by scripts/batch-logos.mjs) used as a
   mask, so it always takes the current ink. Stacked in the header, all on one
   line in the footer. */
.logo-mark {
    display: block;
    width: 124px;
    aspect-ratio: 464.3 / 364.52;
    background: currentColor;
    -webkit-mask: url("/assets/batch/logo-stacked.svg") center / contain no-repeat;
            mask: url("/assets/batch/logo-stacked.svg") center / contain no-repeat;
}

.btn {
    display: inline-flex; align-items: center; gap: .55em;
    font: inherit; font-weight: 700; border: 0; cursor: pointer;
    padding: .85em 1.35em;
    border-radius: 999px;
    background: var(--ink, var(--ink-dark));
    color: var(--accent, var(--cream));
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s var(--spring), background-color .7s var(--ease), color .7s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.lbl-short { display: none; }   /* phones swap in the short button label */
.btn--light { background: var(--cream); color: var(--orange); }   /* matches the hero's cream button on orange */

/* --------------------------------------------------------------------------
   Top: header + hero share the live kitchen colour
   -------------------------------------------------------------------------- */
.top {
    --accent: var(--orange);
    --ink: var(--cream);
    background-color: var(--accent);
    color: var(--ink);
    transition: background-color .7s var(--ease), color .7s var(--ease);
    position: relative;
    overflow: hidden;
}

.hdr { position: relative; z-index: 30; }   /* above the hero cards, so the Menus dropdown sits on top */
.hdr__inner { display: flex; align-items: center; gap: 16px; padding-block: 26px 16px; }   /* extra 10px above the logo */
.hdr__logo { flex: none; text-decoration: none; }
.hdr__open {
    margin: 0;
    display: inline-flex; align-items: center; gap: .55em;
    font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .45em .85em; border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 999px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7CF29A; box-shadow: 0 0 0 0 #7CF29A88; animation: ping 2.4s infinite; }
.dot.is-closed { background: #FF5A4F; box-shadow: 0 0 0 0 #FF5A4FDD; animation-name: ping-red; }   /* closed: the same pulse, in red */
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 #FF6A5FDD; } 70%, 100% { box-shadow: 0 0 0 8px #FF5A4F00; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #7CF29A88; } 70%, 100% { box-shadow: 0 0 0 8px #7CF29A00; } }
.hdr__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-weight: 600; }
.hdr__nav a { text-decoration: none; }
.hdr__nav a:not(.hdr__cta):hover { text-decoration: underline; text-underline-offset: 5px; }
.hdr__cta { padding: .55em 1.05em; border-radius: 999px; border: 2px solid currentColor; }

/* Desktop "Menus" dropdown: every kitchen's menu. */
.hdr__menus { position: relative; }
.hdr__menus-btn {
    display: inline-flex; align-items: center; gap: .35em;
    padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.hdr__menus-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.hdr__menus.is-open .hdr__menus-btn svg { transform: rotate(180deg); }
.hdr__menus-btn:hover { text-decoration: underline; text-underline-offset: 5px; }
.menus-pop {
    position: absolute; top: calc(100% + 16px); left: 50%; z-index: 10;
    width: 580px; padding: 18px 18px 14px;
    background: var(--cream); color: var(--ink-dark);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 26px 50px -18px rgb(0 0 0 / .5);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.menus-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }   /* hover bridge */
.hdr__menus.is-open .menus-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) {
    .hdr__menus:hover .menus-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
    .hdr__menus:hover .hdr__menus-btn svg { transform: rotate(180deg); }
}
.menus-pop__label { margin: 0 0 10px 10px; font-family: var(--mono); font-size: .7rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgb(29 26 22 / .6); }
.menus-pop__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menus-pop__list a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px;
    text-decoration: none !important;
    transition: background-color .2s var(--ease);
}
.menus-pop__list a:hover, .menus-pop__list a[aria-current] { background: color-mix(in srgb, var(--k) 14%, transparent); }
/* Kitchen logo before each name in the Menus dropdown and the sheet's list
   (a monogram where there's no logo). */
.navlogo { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1.5px var(--k); }
.navlogo--mono { display: grid; place-items: center; background: var(--k); color: var(--k-ink); font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: .5rem; letter-spacing: 0; }
.menus-pop__list b { display: block; font-size: .95rem; line-height: 1.2; }
.menus-pop__list small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; font-weight: 400; color: rgb(29 26 22 / .6); }

/* Menu button: a serving cloche, food without favouring any one kitchen.
   On hover the lid lifts for a peek. In the sheet the
   close button is a knife and fork that swing into a cross. */
.navbtn {
    display: none;
    position: relative; width: 48px; height: 48px; margin-right: -8px;
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.navbtn svg { position: absolute; left: 7px; top: 7px; width: 34px; height: 34px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cloche__lid { transform-origin: 5px 22px; transition: transform .45s var(--spring); }
.navbtn:hover .cloche__lid, .navbtn:focus-visible .cloche__lid { transform: translate(1px, -3px) rotate(-14deg); }
/* Knife and fork: laid side by side, then crossed as the shutter lands. */
.cutlery__fork, .cutlery__knife { transform-origin: 16px 16px; transition: transform .55s var(--spring) .2s; }
.cutlery__fork { transform: translateX(-5px); }
.cutlery__knife { transform: translateX(5px); }
.sheet.is-open .cutlery__fork { transform: rotate(-45deg); }
.sheet.is-open .cutlery__knife { transform: rotate(45deg); }

/* Phones and tablets: logo centred, menu button on the right, nav in the sheet. */
@media (max-width: 899px) {
    .hdr__nav { display: none; }
    .hdr__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .hdr__logo { grid-column: 2; }
    .navbtn { display: block; grid-column: 3; justify-self: end; }
    .logo-mark { width: 76px; }
}

/* The sheet: drops down over the page like a roller shutter, gauge ticks
   along its top bar, big links that settle in one after another. */
.sheet {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    background: var(--ink-dark); color: var(--cream);
    --accent: var(--ink-dark); --ink: var(--cream);
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s;
}
.sheet.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
html.sheet-lock { overflow: hidden; }
.sheet__bar {
    position: relative;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-block: 26px 36px;   /* gauge sits 20px clear of the logo */
}
.sheet__bar .hdr__logo { grid-column: 2; color: var(--orange); }
.sheet__bar .navbtn { display: block; grid-column: 3; justify-self: end; }
.sheet__bar::after {
    content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 14px;
    /* Exact 96px/16px tiles, offset so a long tick lands under the middle
       of the logo (50% of a tile's free space, plus half a tile). */
    background:
        repeating-linear-gradient(90deg, var(--orange) 0 1px, transparent 1px 96px) calc(50% + 47.5px) 100% / 96px 14px repeat-x,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--orange) 60%, transparent) 0 1px, transparent 1px 16px) calc(50% + 7.5px) 100% / 16px 7px repeat-x;
    border-bottom: 1px solid var(--orange);
    opacity: .5;
}
.sheet__nav { flex: 1; display: flex; flex-direction: column; padding-block: 28px 32px; }
.sheet__list { list-style: none; margin: 0; padding: 0; }
.sheet__list > li { border-bottom: 1px solid rgb(251 249 242 / .14); }
.sheet__list > li > a, .sheet__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 16px 0;
    border: 0; background: none; color: inherit; cursor: pointer; text-align: left; text-decoration: none;
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 800;
    font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1; letter-spacing: -.015em;
    transition: color .2s var(--ease);
}
.sheet__list > li > a:hover, .sheet__toggle:hover { color: var(--orange); }
.sheet__ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* arrow and plus: same size and weight */
.sheet__ico .v { transform-origin: 10px 10px; transition: transform .35s var(--spring); }
.sheet__toggle[aria-expanded="true"] .sheet__ico .v { transform: rotate(90deg); }
/* Kitchen menus fold open under "Menus". */
.sheet__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.sheet__fold.is-open .sheet__panel { grid-template-rows: 1fr; }
.sheet__panel > * { min-height: 0; overflow: hidden; }
.sheet__menus > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 24px; }
@media (min-width: 600px) { .sheet__menus > ul { grid-template-columns: 1fr 1fr; } }
.sheet__menus li:last-child, .sheet__menus li:nth-last-child(2) { margin-bottom: 0; }
.sheet__menus > ul::after { content: ""; grid-column: 1 / -1; height: 14px; }
.sheet__menus a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 0 9px 10px; font-weight: 600; font-size: 1.05rem; text-decoration: none;   /* inset 10px under "Menus" */
}
.sheet__menus a:hover, .sheet__menus a[aria-current] { color: var(--orange); }
.sheet__menus a { position: relative; }
.sheet__menus a[aria-current]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.1em; margin-top: -.55em; border-radius: 2px; background: var(--orange); }   /* the page you're on */
.sheet__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* Opening hours sits apart from the page links: a small outlined panel
   with body-size type, folding out its details. */
.sheet__hoursbox { align-self: stretch; padding: 14px 16px 0; border: 1px solid rgb(251 249 242 / .16); border-radius: 14px; }
.sheet__hoursbox .sheet__toggle { padding: 0 0 6px; font-family: var(--body); font-stretch: normal; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.sheet__hoursbox .sheet__ico { width: 16px; height: 16px; }
.sheet__hoursbox .sheet__open { margin: 0 0 14px; }
.sheet__hoursbox .sheet__hours > div { padding-left: 0; }
@media (min-width: 600px) {
    .sheet__hoursbox { padding: 18px 20px 0; }
    .sheet__hoursbox .sheet__toggle { font-size: 1.2rem; padding-bottom: 8px; }
    .sheet__hoursbox .sheet__ico { width: 20px; height: 20px; }
    .sheet__hoursbox .sheet__open { font-size: .74rem; margin-bottom: 18px; }
    .sheet__hoursbox .sheet__open .dot { width: 8px; height: 8px; }
}
.sheet__cta { background: var(--orange); color: var(--ink-dark); }   /* dark text on the orange, like the dark-on-colour buttons elsewhere */
.sheet__open { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(251 249 242 / .75); }
.sheet__open .dot { width: 6px; height: 6px; }
/* Opening hours, folded out: the desktop tab's content on the dark sheet. */
.sheet__hours > div { padding-left: 10px; }
.sheet__ico--chev { transition: transform .35s var(--spring); }
.sheet__toggle[aria-expanded="true"] .sheet__ico--chev { transform: rotate(180deg); }
.sheet__hours > div::after { content: ""; display: block; height: 18px; }
.sheet__hours .drawer__hours { margin: 0 0 10px; border-color: rgb(251 249 242 / .14); }
.sheet__hours .drawer__hours div { border-color: rgb(251 249 242 / .14); }
.sheet__note { margin: 0 0 12px; font-size: .88rem; color: rgb(251 249 242 / .6); }
.sheet__addr { margin: 0 0 10px; font-size: .95rem; }
.sheet__visit { font-weight: 700; text-decoration: none; color: var(--orange); }
.sheet__visit:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Links settle in one after another once the shutter is down. */
.sheet__list > li, .sheet__foot { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.sheet.is-open .sheet__list > li, .sheet.is-open .sheet__foot { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .06s); }
@media (prefers-reduced-motion: reduce) {
    .sheet, .sheet__list > li, .sheet__foot, .navbtn * { transition: none !important; }
}

/* Opening-hours drawer: a tab fixed to the right edge; the panel slides out
   from behind it. Neutral cream so it sits on any kitchen colour. */
.drawer {
    position: fixed; right: 0; top: 132px; z-index: 40;
    display: flex; align-items: flex-start;
    transform: translateX(var(--drawer-w));
    --drawer-w: 360px;   /* wide enough for "Closed · opens today at 08:30" on one line */
    transition: transform .45s var(--ease);
}
.drawer.is-open { transform: none; }
/* Phones and tablets: no tab; today's hours are at the foot of the menu sheet. */
@media (max-width: 899px) { .drawer { display: none; } }
/* Hidden while scrolling down (layout JS): tab and panel slide off the edge. */
.drawer.is-hidden { transform: translateX(calc(100% + 24px)); }
.drawer__tab {
    display: block;
    padding: 18px 11px;
    border: 0; border-radius: 10px 0 0 10px;
    background: var(--ink-dark); color: #FBF9F2;
    font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 24px -10px rgb(0 0 0 / .45);
}
/* Vertical text lives on an inner span: older Chromium builds (Electron apps
   such as Responsively, Chrome before 124) ignore writing-mode on buttons. */
.drawer__tabin {
    display: flex; align-items: center; gap: 10px;
    writing-mode: vertical-rl; transform: rotate(180deg);
}
.drawer__tab .dot { margin-bottom: 2px; }
.drawer__panel {
    width: var(--drawer-w);
    padding: 22px 24px 24px;
    background: #FBF9F2; color: var(--ink-dark);
    border-radius: 0 0 0 14px;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .45);
}
.drawer__label { margin: 0 0 10px; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(29 26 22 / .6); }
.drawer__today { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 14px; white-space: nowrap; }
.drawer__links, .sheet__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.drawer__hours { margin: 0 0 8px; border-top: 1px solid rgb(29 26 22 / .14); }
.drawer__hours div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(29 26 22 / .14); font-size: .95rem; }
.drawer__hours dd { margin: 0; font-family: var(--mono); font-size: .85rem; }
.drawer__hours .is-today { font-weight: 700; }
.drawer__note { font-size: .85rem; color: rgb(29 26 22 / .6); margin-bottom: 14px; }
.drawer__addr { font-size: .92rem; margin-bottom: 14px; }
.drawer__link { font-weight: 700; text-decoration: none; color: var(--orange); }
.drawer__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-bottom: clamp(32px, 6vw, 64px); }

.hero__bgname {
    position: absolute; inset: auto 0 2% 0;
    pointer-events: none; user-select: none;
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 900; text-transform: uppercase;
    font-size: clamp(4.5rem, 17vw, 17rem); line-height: .85; letter-spacing: -.03em;
    white-space: nowrap; text-align: center;
    color: color-mix(in srgb, var(--ink) 9%, transparent);
}
.hero__bgname span { display: inline-block; transition: transform .5s var(--ease), opacity .35s var(--ease); }
.hero__bgname.is-swapping span { transform: translateY(18%); opacity: 0; }

.hero__grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; }

.hero__title { font-size: clamp(2.6rem, 9vw, 5.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .3em; }
@media (min-width: 960px) { .hero__title { font-size: clamp(3rem, 4.6vw, 4.6rem); } }
.hero__title-em { font-weight: 300; font-style: normal; }
.hero__lede { max-width: 34ch; font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 0; }

/* Stage: a stack of photo cards ------------------------------------------ */
.stage {
    --card-w: min(76vw, 340px);
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    margin-top: 28px;
    user-select: none;
}

/* Card stack: the selected kitchen's photo card in front, the next few
   peeking out above it. batch.js sets --d (0 = front) on each card. */
.stack {
    position: relative;
    width: var(--card-w); aspect-ratio: 4 / 5;
    touch-action: pan-y;
}
.card {
    --d: 0;
    position: absolute; inset: 0; margin: 0;
    display: flex; flex-direction: column;
    padding: 10px 10px 0;
    border-radius: 20px;
    background: #FBF9F2; color: var(--ink-dark);
    box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 22px 44px -18px rgb(0 0 0 / .45);
    transform-origin: 50% 0;
    transform: translateY(calc(var(--d) * -16px)) scale(calc(1 - var(--d) * .055));
    z-index: calc(20 - var(--d));
    transition: transform .6s var(--ease), opacity .45s var(--ease), filter .6s var(--ease);
}
.card[data-depth="1"] { filter: brightness(.94); }
.card[data-depth="2"] { filter: brightness(.88); }
.card[data-depth="hidden"] { opacity: 0; }
/* The card just passed drops away below the stack. */
.card.is-gone { opacity: 0; transform: translateY(40%) rotate(-5deg) scale(.96); z-index: 30; }
.card__photo { flex: 1; min-height: 0; border-radius: 13px; overflow: hidden; background: #e9e5dc; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; }
.card__mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4px; background: none; }
.card__mosaic picture { min-height: 0; overflow: hidden; border-radius: 6px; }
.card__cap {
    display: flex; align-items: baseline; gap: 10px;
    padding: 12px 6px 14px;
    font-size: .95rem; font-weight: 600;
}
.card__price { margin-left: auto; font-family: var(--mono); font-size: .85rem; font-weight: 400; }

.stage__navs { display: flex; gap: 10px; }
.stage__nav {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent);
    background: none; color: inherit; cursor: pointer;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.stage__nav:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.stage__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .stage__nav { display: none; }

/* Dial: a horizontal hairline gauge across the top of the hero, carrying
   every kitchen's name. The strip slides so the selected kitchen sits over
   the marker, its name opened out large. Three copies let it loop round. */
.dial {
    position: relative;
    height: 84px;
    overflow: hidden;
    overflow: clip;   /* not scrollable even by focus, so the strip can't drift */
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    touch-action: pan-y; cursor: grab;
    user-select: none;
}
.dial::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 28%, transparent) 0 1px, transparent 1px 16px);
    background-size: 96px 14px, 16px 7px;   /* exact periods, so the long ticks can be lined up with the marker */
    background-repeat: repeat-x;
    background-position: var(--tick-x, 0px) 100%, var(--tick-x, 0px) 100%;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    transition: background-position .55s var(--ease);
}
.dial__marker {
    position: absolute; left: 50%; bottom: 0; width: 2px; height: 24px; margin-left: -1px;
    background: var(--ink);
}
.dial__marker::after {
    content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
}
.dial__list {
    list-style: none; margin: 0; padding: 0;
    position: absolute; left: 0; bottom: 30px;
    display: flex; align-items: flex-end; gap: 168px;
    white-space: nowrap;
    transform: translateX(var(--dial-x, 0px));
    transition: transform .55s var(--ease);
}
.dial__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
    text-decoration: none;
}
.dial__num { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; opacity: .6; }
.dial__name {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: .6; transition: opacity .3s var(--ease);
}
.dial__item.is-on .dial__name {
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 800;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1; letter-spacing: -.01em; text-transform: none;
    opacity: 1;
    animation: dial-in .45s var(--ease);
}
@keyframes dial-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dial__item:hover .dial__name { opacity: 1; }
.dial.no-anim .dial__list, .dial.no-anim::before { transition: none; }
.dial.is-dragging { cursor: grabbing; }
.dial.is-dragging .dial__list, .dial.is-dragging::before { transition: none; }

/* Selected-kitchen panel ---------------------------------------------------- */
.panel[hidden] { display: none; }
/* Slides crossfade in place: all panels share one grid cell, the old one
   fades out over the new one fading in. Opacity only, nothing moves. */
.panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__detail { min-width: 0; }
.panel { grid-area: 1 / 1; }
.panel.is-active { animation: panel-fade-in .35s var(--ease) both; }
.panel.is-leaving { animation: panel-fade-out .2s var(--ease) both; pointer-events: none; }
@keyframes panel-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* The kitchen's logo: a badge overlapping the photo card's top-left corner
   (like the line-up cards), so it travels with the card. */
.card__badge {
    position: absolute; z-index: 2; top: -12px; left: -12px;
    width: clamp(44px, 14%, 66px); height: auto; aspect-ratio: 1; border-radius: 50%;
    object-fit: cover; background: #fff;
    box-shadow: 0 0 0 3px #FBF9F2, 0 8px 18px -8px rgb(0 0 0 / .5);
    pointer-events: none;
}
/* Only the front card of the hero stack shows its badge. */
.card[data-depth] .card__badge { opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .45s var(--spring); }
.card[data-depth="0"] .card__badge { opacity: 1; transform: none; transition-delay: .15s; }
.card__badge--mono {
    display: grid; place-items: center;
    background: var(--k-accent); color: var(--k-ink);
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: clamp(.62rem, 2.6vw, .9rem); letter-spacing: 0;
}
.chip-logo {
    width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 3px var(--ink);
    background: var(--cream);
}
.chip-logo--mono {
    display: grid; place-items: center;
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: 1rem;
    color: var(--accent); background: var(--ink);
}
.panel__cuisine { margin: 0; font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
/* Every slide opens the same way: a one-line strip (where we are / what the
   food is) at a fixed height, then the headline, so the headline never moves
   as the slides change. */
.panel__strip { margin: 0 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Phones and tablets: the "Pick your plate." line is dropped (the dial
   names the kitchen). */
@media (max-width: 959px) {
    .panel:not(.panel--intro) .panel__kicker { display: none; }
}
/* Phones: smaller still, so the strip fits one line and the headline two. */
@media (max-width: 599px) {
    .panel__strip { font-size: clamp(.56rem, 2.66vw, .64rem); letter-spacing: .08em; }
    .hero .hero__grid { --card-w: min(76vw, 340px); --ctl: 38px; }
}
/* Tablets: the same layout as phones, scaled up: bigger titles, a bigger
   card and taller buttons. */
@media (min-width: 600px) and (max-width: 959px) {
    .hero .hero__grid { --card-w: min(56vw, 440px); --ctl: 46px; }
    /* Centred under the centred card and heading. */
    .hero .panel__body > .panel__blurb { max-width: none; text-align: left; }   /* full width, left-aligned */
    section.hero { padding-bottom: clamp(96px, 20vw, 170px); }   /* giant name clear of the chips */
    .hero .hero__grid .stage { margin-top: 46px; }               /* 10px less under the title than phones */
    .menu-hero .menu-hero__grid .menu-hero__card { margin-top: 40px; }
    .menu-hero__body .panel__blurb { max-width: none; text-align: left; }   /* full width, as on the home hero */
}
/* Phones and tablets (layout; sizes above). */
@media (max-width: 959px) {
    .panel__strip { margin-bottom: 12px; }
    /* Under the card, one row: the slide's button at the left edge (smaller,
       "Menu" not "See the menu"), the arrows at the right edge. The slide's
       body steps aside so its button can share the card's area. */
    .hero .hero__grid { grid-template-areas: "dial" "head" "stage" "body" "label" "chips"; }
    .hero .stage { --card-w: inherit; }
    .stage { justify-self: center; width: var(--card-w); align-items: stretch; }
    .hero .stage { margin-top: 56px; }   /* 10px higher than tablet */
    .hero .panel__head { margin-top: 18px; }             /* 10px less above the caps strip than tablet */
    .menu-hero .menu-hero__head .panel__strip { margin-top: 10px; }
    .stage__navs { align-self: flex-end; gap: 8px; }
    .stage__nav { width: var(--ctl); height: var(--ctl); }
    .panel__body { display: contents; }
    .panel__body > .panel__blurb { grid-area: body; margin-top: 26px; }
    .panel__body > .chips { grid-area: chips; }
    .panel__body > .chips__label { grid-area: label; }
    .panel__body > .panel__actions {
        grid-area: stage; align-self: end; justify-self: center; width: var(--card-w);
        margin: 0; height: var(--ctl); flex-wrap: nowrap; pointer-events: none;
    }
    .panel__actions > * { pointer-events: auto; }

    .panel__actions .devtag { display: none; }
    .lbl-long { display: none; }
    .lbl-short { display: inline; }
    .panel.is-active .panel__body > * { animation: panel-fade-in .35s var(--ease) both; }
    .panel.is-leaving .panel__body > * { animation: panel-fade-out .2s var(--ease) both; pointer-events: none; }
    /* Headings centred (hero and menu pages). */
    .panel__head, .menu-hero__head { text-align: center; }
    .menu-hero__head .menu-hero__back { margin-inline: auto; }
}
.panel__kicker {
    margin: 0 0 22px;
    font-family: var(--display); font-stretch: var(--stretch); font-weight: 800;
    font-size: clamp(2.4rem, 4.4vw, 4.3rem); line-height: .98; letter-spacing: -.02em;
}
.panel__kicker span { font-weight: 300; }
.panel--intro .hero__title { font-size: clamp(2.4rem, 4.4vw, 4.3rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 27px; }
.panel--intro .chips { margin-top: 26px; }
.chip--bar { border-style: dashed; }
.panel__name { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 27px; }   /* same gap as the intro headline */
.panel__blurb { max-width: 54ch; }
.panel__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.devtag {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    padding: .35em .7em; border: 1.5px dashed currentColor; border-radius: 6px; opacity: .8;
}

/* Cuisine quick-jump chips (the Kumo fix: no travelling round the wheel). */
.chips { display: flex; gap: 8px; margin-top: 24px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips__label { display: none; }
/* Phones and tablets: the row runs edge to edge under a label with a swipe
   hint, snaps chip by chip, and fades out at whichever end has more chips. */
@media (max-width: 959px) {
    .chips__label {
        display: flex; justify-content: space-between; align-items: center;
        margin: 30px 0 12px;
        font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    }
    .chips__hint { display: inline-flex; gap: .5em; opacity: .75; transition: opacity .4s var(--ease); }
    .chips__hint span { display: inline-block; animation: nudge 1.6s var(--ease) infinite; }
    .chips__label.is-used .chips__hint { opacity: 0; }
    @keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
    .hero .panel--intro .chips {
        margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px;
        scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
        --fade-l: 0px; --fade-r: 44px;
        -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
                mask: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    }
    .hero .panel--intro .chips:not(.is-start) { --fade-l: 44px; }
    .hero .panel--intro .chips.is-end { --fade-r: 0px; }
    .chips .chip { scroll-snap-align: start; }
    /* Room below the row so the giant name sits under it, not behind it. */
    .hero { padding-bottom: clamp(70px, 22vw, 96px); }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { .chips__hint span { animation: none; } }
@media (min-width: 600px) and (max-width: 959px) { .chips__label { font-size: .74rem; } }
@media (min-width: 960px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip {
    flex: none;
    font: 600 .92rem/1 var(--body);
    padding: .65em 1em; border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);
    background: transparent; color: inherit; cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: currentColor; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--accent); border-color: var(--ink); }

/* Phones and tablets: dial, then the slide's heading (strip to name), then
   the cards and arrows, then its words and buttons, so the name you're
   cycling through is always right above the card. The slide wrappers step
   aside (display: contents) so each slide's head and body can sit either
   side of the cards. Every head shares one cell and the hidden ones still
   take up room, invisibly, so the cards never move; bodies are below the
   cards, so they're free to change height. */
@media (max-width: 959px) {
    .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "dial" "head" "stage" "body"; row-gap: 0; }
    .dial { grid-area: dial; }
    .hero__detail, .panels, .panel { display: contents; }
    .panel__head { grid-area: head; margin-top: 28px; }
    .panel__body { grid-area: body; margin-top: 26px; }
    .stage { grid-area: stage; margin-top: 66px; }   /* 20px clear of the title, plus room for the cards peeking out behind */
    .panel--intro .hero__title, .panel__name { margin-bottom: 0; }
    .js .panel[hidden] { display: contents; }
    .js .panel[hidden] .panel__head { visibility: hidden; }
    .js .panel[hidden] .panel__body { display: none; }
    /* The crossfade moves onto the halves (the slide has no box here). */
    .panel.is-active > * { animation: panel-fade-in .35s var(--ease) both; }
    .panel.is-leaving > * { animation: panel-fade-out .2s var(--ease) both; pointer-events: none; }
}

/* Desktop: dial across the top, copy left, cards right ------------------ */
@media (min-width: 960px) {
    .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "dial dial" "detail stage";
        column-gap: clamp(40px, 6vw, 110px);
        row-gap: 8px;
        min-height: calc(100svh - 104px);
        align-content: start;
    }
    .hero { padding-top: 4px; }
    .dial { grid-area: dial; margin-bottom: 4px; }
    .stage__navs { align-self: flex-end; }
    /* Pinned to the top (level with the card stack) so the copy holds still. */
    .hero__detail { grid-area: detail; align-self: start; margin-top: 66px; }
    .chips { flex-wrap: wrap; overflow: visible; max-width: 560px; }
    .stage {
        grid-area: stage; align-self: center; justify-self: end;
        align-items: stretch; gap: 18px;   /* arrows sit under the card, right-aligned */
        margin-top: 94px;   /* clear the dial: cards behind peek up ~32px */
        --card-w: min(34vw, calc((100svh - 420px) * .8), 470px);
    }
}

/* No JS: the first kitchen shows; the dial names link to the line-up below. */
html:not(.js) .panel:not(.is-active) { display: none; }

/* --------------------------------------------------------------------------
   Sections below the fold
   -------------------------------------------------------------------------- */
.section { position: relative; padding-block: clamp(64px, 10vw, 120px); }

/* Section divider: the hero dial's gauge (fine ticks every 16px, taller
   ones every 96px, on a hairline) in the brand orange. */
.section::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
    --gauge: var(--orange);
    background:
        repeating-linear-gradient(90deg, var(--gauge) 0 1px, transparent 1px 96px) 0 0 / 100% 14px repeat-x,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--gauge) 60%, transparent) 0 1px, transparent 1px 16px) 0 0 / 100% 7px repeat-x;
    border-top: 1px solid var(--gauge);
}
.hire::before { --gauge: rgb(251 249 242 / .7); }
.section__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.015em; max-width: 20ch; margin-bottom: .55em; }
.section__lede { max-width: 62ch; font-size: 1.15rem; margin-bottom: 2.5rem; }

/* Line-up: steel cards (corner bolts dropped, owner 21 Oct 2026) ---------- */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
/* Two abreast from tablet up, one per row on phones. */
@media (min-width: 600px) { .lineup { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.kcard {
    position: relative; scroll-margin-top: 24px;
    background: #fff;
    border: 1.5px solid rgb(29 26 22 / .14);
    border-radius: 14px;
    padding: 30px 26px 28px;
    transition: transform .3s var(--spring), box-shadow .3s var(--ease);
}
.kcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgb(0 0 0 / .35); }
.kcard:target { box-shadow: 0 0 0 3px var(--k-accent); }
.kcard__logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 2px var(--k-accent); background: #fff; }
.kcard__logo--mono { display: grid; place-items: center; background: var(--k-accent); color: var(--k-ink); font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: .95rem; }
.kcard__img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--k-accent) 25%, transparent); }
.kcard__cuisine { font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k-label, color-mix(in srgb, var(--k-accent) 85%, #000)); margin-bottom: .4em; }   /* --k-label: a darker shade for light accents */
.kcard__name { font-size: 1.45rem; font-weight: 800; margin-bottom: .45em; }
.kcard__blurb { margin: 0; font-size: 1rem; }
.kcard__link {
    display: inline-flex; align-items: center; gap: .45em; margin-top: 16px;
    padding: .6em 1.1em; border-radius: 999px;
    background: var(--k-accent); color: var(--k-ink);
    font-weight: 700; font-size: .92rem; text-decoration: none;
}
/* The whole card opens the menu, not just the button. */
.kcard__link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.kcard:hover .kcard__link { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 30%, transparent); }
/* Desktop: photo on the left, words beside it. */
@media (min-width: 960px) {
    .kcard { display: grid; grid-template-columns: 150px 1fr; column-gap: 28px; align-items: start; }
    /* The kitchen's logo is a badge on the photo's bottom-right edge (as on
       phones and tablets); the words start level with the photo. */
    .kcard { --kc-img: 150px; --kc-pad-x: 26px; --kc-pad-y: 30px; }
    .kcard__logo {
        position: absolute; z-index: 1; margin: 0;
        width: 46px; height: 46px;
        left: calc(var(--kc-pad-x) + var(--kc-img) - 40px);
        top: calc(var(--kc-pad-y) + var(--kc-img) - 40px);
        box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--k-accent);
    }
    .kcard__img { width: 150px; height: 150px; margin: 0; }
    .kcard__body { grid-column: 2; grid-row: 1; }
    .kcard__name { font-size: 1.7rem; }
}
/* Phones and tablets: the kitchen's logo becomes a badge on the photo's
   bottom-right edge. Tablets stack the words under the photo (two cards a
   row is too narrow for side by side); phones keep them beside it. */
@media (max-width: 959px) {
    .kcard { --kc-img: 132px; --kc-pad-x: 26px; --kc-pad-y: 30px; }
    .kcard__logo {
        position: absolute; z-index: 1; margin: 0;
        width: 40px; height: 40px;
        left: calc(var(--kc-pad-x) + var(--kc-img) - 36px);
        top: calc(var(--kc-pad-y) + var(--kc-img) - 36px);
        box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--k-accent);
    }
    .kcard__logo--mono { font-size: .8rem; }
}
/* Phones: the tablet tile, photo and badge on top, words underneath. */
@media (max-width: 599px) {
    .kcard { --kc-img: 120px; --kc-pad-x: 22px; --kc-pad-y: 26px; padding: 26px 22px 24px; }
    .kcard__img { width: 120px; height: 120px; }
    .kcard__name { font-size: 1.3rem; }
}

/* What's on ---------------------------------------------------------------- */
.section--ink { background: var(--ink-dark); color: var(--cream); }
/* What's on: the black-and-white interior behind it, darkened so the
   text still reads. */
#whats-on {
    background:
        linear-gradient(180deg, rgb(29 26 22 / .80), rgb(29 26 22 / .86)),
        url("/assets/batch/img/interior-bw-1110.webp") center 72% / cover no-repeat,
        var(--ink-dark);
    background:
        linear-gradient(180deg, rgb(29 26 22 / .80), rgb(29 26 22 / .86)),
        image-set(url("/assets/batch/img/interior-bw-1110.avif") type("image/avif"), url("/assets/batch/img/interior-bw-1110.webp") type("image/webp")) center calc(72% + var(--py, 0px)) / cover no-repeat,
        var(--ink-dark);
}
.section--ink .eyebrow--orange { color: var(--orange); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.event { border: 1.5px solid rgb(251 249 242 / .2); border-radius: 14px; padding: 26px; }
.event__when { font-family: var(--display); font-stretch: var(--stretch); font-size: 1.5rem; font-weight: 800; color: var(--orange); line-height: 1.1; }
.event__when span { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); opacity: .7; margin-bottom: .4em; }
.event__name { font-size: 1.15rem; margin-bottom: .6em; }
.event p:last-child { margin: 0; opacity: .85; }

/* Visit -------------------------------------------------------------------- */
.visit__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .visit__grid { grid-template-columns: 1fr 1fr; } }
.visit__img img { border-radius: 18px; width: 100%; }
.facts { margin: 0; display: grid; gap: 18px; }
.facts div { border-top: 1.5px solid rgb(29 26 22 / .12); padding-top: 14px; }
.facts dt { font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: .3em; }
.facts dd { margin: 0; }

/* Private hire ------------------------------------------------------------- */
.hire { background: var(--orange); color: var(--cream); }
.hire .eyebrow { color: var(--cream); }
.hire__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.hire__inner > div { max-width: 60ch; }

/* Footer ------------------------------------------------------------------- */
.ftr { background: var(--ink-dark); color: var(--cream); padding-block: 56px 32px; }
.ftr a { color: inherit; }
.ftr__inner { display: grid; gap: 28px; }
.logo-mark--ftr {
    width: min(100%, 380px); aspect-ratio: 1228.8 / 103.02; color: var(--orange);
    -webkit-mask-image: url("/assets/batch/logo-line.svg");
            mask-image: url("/assets/batch/logo-line.svg");
}
.ftr__cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ftr__cols address, .ftr__cols p { font-style: normal; margin: 0; }
.ftr__legal { font-size: .85rem; opacity: .7; margin: 0; border-top: 1px solid rgb(251 249 242 / .15); padding-top: 22px; }

.ftr__cols div > p { margin: 0 0 14px; }
.ftr__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__social a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ftr__social a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.ftr__icon {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid rgb(251 249 242 / .3);
    transition: background-color .25s ease, border-color .25s ease;
}
.ftr__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ftr__icon svg .fill, .ftr__icon svg .dot { fill: currentColor; stroke: none; }
.ftr__social a:hover .ftr__icon { background: var(--orange); border-color: var(--orange); }

.ftr__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .85rem; }
.ftr__links a { opacity: .75; text-underline-offset: 3px; }
.ftr__links a:hover { opacity: 1; }

/* How ordering works: four steps on white cards, orange numbers and icons. */
.ordering { margin-top: clamp(64px, 8vw, 96px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgb(29 26 22 / .14); }
.ordering__head { margin-bottom: 40px; }
.ordering__lede { margin: 0; font-size: 1.15rem; max-width: 62ch; }   /* same as the line-up intro */
.ordering__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .ordering__steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }   /* two abreast, like the line-up */
.ostep {
    position: relative; display: flex; flex-direction: column;
    padding: 26px 24px 28px; border-radius: 16px;
    background: transparent; border: 1.5px solid rgb(29 26 22 / .14);
}
.ostep__num { font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--orange); }
.ostep__icon { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; margin: 0; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ostep__title { font-size: 1.35rem; margin: 22px 0 .5em; }
.ostep p { margin: 0; font-size: .98rem; }

/* FAQs: questions open in place; all answers are in the page for search. */
.faqs__grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .faqs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; } }
.faqs__list { border-top: 1px solid rgb(29 26 22 / .14); }
.faq { border-bottom: 1px solid rgb(29 26 22 / .14); }
.faq__q {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 18px 0; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1.08rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: ""; flex: none; width: 12px; height: 12px;
    border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
    transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease);
}
.faq[open] .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { margin: 0 0 20px; max-width: 62ch; }
.faq__a a { color: var(--orange); text-underline-offset: 3px; }
/* On black, like the footer. */
.faqs { background: var(--ink-dark); color: var(--cream); }
.faqs .faqs__list, .faqs .faq { border-color: rgb(251 249 242 / .16); }
.faqs .faq__a { color: rgb(251 249 242 / .82); }
.faqs .faq__a a { color: var(--orange); }

/* Menu pages ----------------------------------------------------------------
   The whole page wears the kitchen's colour (set as --accent / --ink on .top
   and .menu), with the menu laid out like a printed bill of fare. */
.menu-hero { padding-block: 4px clamp(48px, 6vw, 80px); }
.dial--nav { margin-bottom: clamp(24px, 3vw, 40px); }
/* The caps line sits the same distance under the dial as on the home page. */
.menu-hero .menu-hero__grid .menu-hero__head .panel__strip { margin-top: 42px; }
@media (max-width: 959px) {
    .menu-hero__grid { grid-template-columns: minmax(0, 1fr); }   /* column never wider than the screen */
    .dial--nav { margin-bottom: 0; }
    .menu-hero .menu-hero__grid .menu-hero__head .panel__strip { margin-top: 22px; }
}
@media (max-width: 599px) {
    .menu-hero .menu-hero__grid .menu-hero__head .panel__strip { margin-top: 25px; }
}
.dial--nav .dial__item[aria-current] { cursor: default; }
/* Menu pages load already on their kitchen: no fade-in on the name, which
   read as a flash when stepping between menus. */
.dial--nav .dial__item.is-on .dial__name { animation: none; }
.menu-hero__grid { display: grid; gap: 40px; align-items: start; }
/* Desktop: words on the left (head then body), photo card on the right.
   Phones and tablets: head, then the card, then the body. */
@media (min-width: 960px) {
    .menu-hero__grid { grid-template-columns: minmax(0, 1fr) min(30vw, 400px); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 6vw, 110px); row-gap: 0; }
    .menu-hero__head { grid-column: 1; grid-row: 1; }
    .menu-hero__body { grid-column: 1; grid-row: 2; }
    .menu-hero__navs { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 26px; }   /* under the card's left edge, clear of the description */
    .menu-hero__card { grid-column: 2; grid-row: 1 / span 3; }
}
/* Arrows to the previous / next kitchen's menu (styled as the hero's). */
.menu-hero__navs { display: flex; gap: 10px; }
.menu-hero__navs .stage__nav { text-decoration: none; }
@media (max-width: 959px) {
    .menu-hero__grid { gap: 0; }
    .menu-hero__head .panel__name { margin-bottom: 0; }
    .menu-hero .menu-hero__card { order: 1; margin-top: 40px; }   /* 20px more clear of the name */
    .menu-hero__navs { order: 1; }
    .menu-hero__head .panel__strip { margin-top: 20px; }
    .menu-hero__body { order: 2; margin-top: 36px; }
}
.menu-hero__back { display: flex; width: max-content; gap: .5em; margin-bottom: 28px; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; opacity: .8; }
.menu-hero__back:hover { opacity: 1; }
.menu-hero h1.panel__name { font-size: clamp(2.4rem, 4.4vw, 4.3rem); line-height: .98; }
.menu-hero__card { position: relative; aspect-ratio: 4 / 5; transform: rotate(2deg); margin-top: 20px; }
@media (max-width: 959px) { .menu-hero__card { width: min(78vw, 380px); justify-self: center; } }

.menu { background: var(--accent); color: var(--ink); padding-bottom: clamp(56px, 8vw, 96px); }
.menu-nav {
    position: sticky; top: 0; z-index: 20;
    background: var(--accent);
    border-block: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.menu-nav__list { list-style: none; margin: 0; padding: 12px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.menu-nav__list::-webkit-scrollbar { display: none; }
.menu-nav__list a {
    display: block; white-space: nowrap; text-decoration: none;
    padding: .55em 1em; border-radius: 999px;
    font-weight: 600; font-size: .92rem;
    border: 1.5px solid transparent;
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.menu-nav__list a:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.menu-nav__list a.is-on { background: var(--ink); color: var(--accent); }
/* Smaller section pills: text and pill on phones, the pill only on tablets. */
@media (max-width: 599px) { .menu-nav__list a { font-size: .82rem; padding: .45em .85em; } .menu-nav__list { padding-block: 10px; gap: 4px; } }
@media (min-width: 600px) and (max-width: 959px) { .menu-nav__list a { padding: .42em .85em; } .menu-nav__list { padding-block: 10px; } }

.menu__body { padding-top: clamp(28px, 4vw, 48px); }
.menu__group {
    font-size: clamp(2rem, 3.6vw, 3.1rem); margin: 56px 0 8px;
    padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.menu__group:first-child { margin-top: 0; }
.menu__section { scroll-margin-top: 80px; padding-top: 36px; }
.menu__heading {
    display: flex; align-items: baseline; gap: 14px;
    font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px;
}
.menu__heading span { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .12em; opacity: .65; }
.menu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; }
@media (min-width: 860px) { .menu__items { grid-template-columns: 1fr 1fr; } }
.mi { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.mi--img { grid-template-columns: 84px 1fr; }
.mi__img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mi__top { display: flex; align-items: baseline; gap: 16px; }
.mi__name { margin: 0; font-family: var(--body); font-stretch: normal; font-size: 1.06rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.mi__price { margin-left: auto; font-family: var(--mono); font-size: .92rem; white-space: nowrap; }
.mi__desc { margin: 6px 0 0; font-size: .93rem; line-height: 1.5; opacity: .85; }
.mi__variants { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.mi__variants li { display: inline-flex; gap: 8px; }
.mi__variants li span:last-child { font-family: var(--mono); font-size: .86rem; }
.menu__note { margin-top: 56px; padding: 18px 20px; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 12px; max-width: 760px; }
.menu__note p { margin: 0; }
.menu__note p + p { margin-top: 10px; }
.mi__price--tbc { opacity: .45; letter-spacing: .08em; }   /* price still to be confirmed */

/* Coming soon badge (a kitchen not open yet): a small outlined pill after
   the cuisine line, the dial label, the menu lists and the quick-jump chip. */
.soon {
    display: inline-flex; align-items: center; margin-left: .9em; padding: .3em .7em .25em;
    border: 1.5px solid currentColor; border-radius: 999px;
    font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    vertical-align: .15em; white-space: nowrap;
}
/* Menu pages: "Menu" / "Drinks" as a filled badge on the caps line. */
.strip-badge {
    display: inline-flex; align-items: center; margin-left: .9em; padding: .35em .75em .3em;
    border-radius: 999px; background: var(--ink); color: var(--accent);
    font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    vertical-align: .15em; white-space: nowrap;
}
.strip-badge + .soon { margin-left: .5em; }
.kcard .soon { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-ink); }
.soon--sm { margin-left: .6em; padding: .25em .55em .2em; font-size: .56rem; vertical-align: .2em; }
.menus-pop__list .soon { border-color: var(--k); background: var(--k); color: var(--ink-dark); }
.chip__soon { margin-left: .5em; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.menu__more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); font-weight: 700; }
.menu__more a { text-decoration: none; }
.menu__more a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Content pages ------------------------------------------------------------ */
.page-hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 72px); }
.page-hero__title { font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: .98; letter-spacing: -.02em; margin-bottom: 18px; }
.page-hero__lede { max-width: 54ch; margin: 0; }
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 2.2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose a { color: var(--orange); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid rgb(29 26 22 / .14); vertical-align: top; }
.prose td { overflow-wrap: anywhere; }   /* long cookie names on small phones */
.prose th { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(29 26 22 / .62); font-weight: 600; }
.prose .tbc { background: #FFF1C2; padding: 0 .3em; border-radius: 3px; }
.prose .draft-note { padding: 14px 16px; border: 1.5px dashed var(--orange); border-radius: 10px; font-size: .95rem; }

/* Scroll reveals (home page, below the hero) ------------------------------------
   batch.js marks <html> .has-reveal (home page only) and adds .is-in as
   things come into view. Hidden states need both that and motion allowed,
   so other pages and no-JS visitors see everything as normal. */
@media (prefers-reduced-motion: no-preference) {
    html.has-reveal .reveal {
        opacity: 0; transform: translateY(18px);
        transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
        transition-delay: var(--rd, 0ms);
    }
    html.has-reveal .reveal.is-in { opacity: 1; transform: none; }

    /* The visit photo eases out of a gentle zoom instead of rising. */
    html.has-reveal .reveal--zoom { transform: none; overflow: hidden; border-radius: 18px; }
    html.has-reveal .reveal--zoom img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
    html.has-reveal .reveal--zoom.is-in img { transform: none; }

    /* Line-up plates turn into place, like a plate set down on the table. */
    html.has-reveal .kcard .kcard__img { transform: rotate(-24deg) scale(.88); transition: transform 1.1s cubic-bezier(.34, 1.35, .5, 1); transition-delay: calc(var(--rd, 0ms) + 120ms); }
    html.has-reveal .kcard.is-in .kcard__img { transform: none; }

    /* Ordering icons draw their strokes. */
    html.has-reveal .ostep .ostep__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--rd, 0ms) + 250ms); }
    html.has-reveal .ostep.is-in .ostep__icon * { stroke-dashoffset: 0; }

    /* Section gauge lines sweep in from the left, like the dial waking up. */
    html.has-reveal .section::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
    html.has-reveal .section.is-in::before { transform: none; }
}

/* Reduced motion: keep the colour/content changes, drop the movement. ------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .plate, .plate.is-leaving { transform: none; }
}

/* Phones and tablets: every pill button at the hero's compact size (hero,
   line-up cards, private hire, the menu sheet's Private hire), scaled up
   for tablets. */
@media (max-width: 599px) {
    .btn, .kcard__link { height: 38px; padding: 0 1em; font-size: .88rem; gap: .45em; }
    .kcard__link { margin-top: 14px; }
}
@media (min-width: 600px) and (max-width: 959px) {
    .btn, .kcard__link { height: 46px; padding: 0 1.2em; font-size: 1rem; gap: .5em; }
    .kcard__link { margin-top: 16px; }
}

/* One title size on phones and tablets, set by the home hero's kitchen
   name: the hero headline and names, menu-page titles and every section
   title use it. Desktop keeps its own sizes. */
@media (max-width: 599px) { :root { --title-size: clamp(1.6rem, 7.4vw, 2rem); } }
@media (min-width: 600px) and (max-width: 959px) { :root { --title-size: clamp(2.4rem, 7vw, 3.6rem); } }
/* Menu pages: the caps line and title keep fixed heights (one standard
   title line), so the card lands in the same place on every kitchen's
   page, whatever the title size or badges. */
@media (max-width: 959px) {
    .menu-hero__head .panel__strip { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; height: 22px; margin-bottom: 12px; }
    .menu-hero__head .panel__strip .strip-badge, .menu-hero__head .panel__strip .soon { vertical-align: 0; }
    .menu-hero__head .panel__name { min-height: calc(var(--title-size) * 1.02); display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 959px) {
    .hero .panel--intro .hero__title,
    .hero .panel__head .panel__name,
    .menu-hero .menu-hero__head h1.panel__name,
    .section .section__title { font-size: var(--title-size); line-height: 1.02; }
}
/* Phones and tablets: section titles keep desktop's proportion to the hero
   headline (51.2px to 63.4px, about 81%). */
@media (max-width: 959px) {
    .section .section__title { font-size: calc(var(--title-size) * .81); }
}
@media (max-width: 599px) { .section .section__title { font-size: max(24px, calc(var(--title-size) * .81)); } }   /* never below 24px */

/* Menu-page arrows below desktop: under the card's bottom-left corner on
   phones, either side of the card (vertically centred) on tablets. Sized
   like the hero's arrows. */
@media (max-width: 599px) {
    .menu-hero { --ctl: 38px; }
    .menu-hero__navs { justify-self: center; width: min(78vw, 380px); gap: 8px; margin-top: 22px; }
}
@media (min-width: 600px) and (max-width: 959px) {
    .menu-hero { --ctl: 46px; }
    .menu-hero .menu-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "body"; }
    .menu-hero .menu-hero__grid > .menu-hero__head { grid-area: head; }
    .menu-hero .menu-hero__grid > .menu-hero__card { grid-area: card; }
    .menu-hero .menu-hero__grid > .menu-hero__body { grid-area: body; }
    .menu-hero .menu-hero__grid > .menu-hero__navs {
        grid-area: card; align-self: center; justify-self: center; margin-top: 40px;
        width: calc(min(78vw, 380px) + 2 * var(--ctl) + 64px);
        justify-content: space-between; pointer-events: none;
    }
    .menu-hero__navs .stage__nav { pointer-events: auto; }
}

/* Body copy, two sizes only, on every page and screen:
   - section copy (hero and menu-page descriptions, section intros, events,
     visit details, FAQ answers, private hire, menu notes) at the body size;
   - card copy (line-up cards and the ordering steps) a step smaller, like
     the line-up cards. Menu item descriptions keep their own list size. */
:root { --copy: 1.0625rem; --copy-card: 1rem; }
@media (max-width: 599px) { :root { --copy: 1rem; --copy-card: .95rem; } }   /* phones: 16px section copy, between body and card size */
.panel__blurb, .section__lede, .ordering__lede, .event > p:not(.event__when), .facts dd, .faq__a,
.hire__inner p:not(.eyebrow), .menu__note p { font-size: var(--copy); line-height: 1.55; }
.kcard__blurb, .ostep p { font-size: var(--copy-card); line-height: 1.55; }

/* Desktop hero: the kitchen's name leads, "Pick your plate." sits under
   the strip at the smaller size (the two sizes swapped). */
@media (min-width: 960px) {
    .hero .panel:not(.panel--intro) .panel__kicker { font-size: clamp(2rem, 3.6vw, 3.1rem); }
    .hero .panel:not(.panel--intro) .panel__name { font-size: clamp(2.4rem, 4.4vw, 4.3rem); line-height: .98; }
}

/* Legal pages: the last-updated line, and the cookie table scrolling sideways
   on phones rather than breaking words mid-way. */
.prose .updated { font-size: .9rem; opacity: .7; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.prose .table-wrap table { min-width: 640px; margin: 0; }
.prose .table-wrap td { overflow-wrap: normal; }
.prose .table-wrap td:first-child { font-family: var(--mono); font-size: .85em; }

/* Cookie pop-up (partials/consent): a dark bar at the foot of the screen,
   in the footer's ink, with the brand orange for the answer. */
.consent {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 400;
    background: var(--ink-dark); color: var(--cream);
    border-top: 3px solid var(--orange);
    box-shadow: 0 -18px 44px rgb(0 0 0 / .28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(105%); transition: transform .5s var(--ease);
}
.consent.is-in { transform: none; }
.consent__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 22px; }
.consent__body { flex: 1 1 30rem; min-width: 0; }
.consent__title { font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: 1.15rem; margin: 0 0 6px; color: var(--orange); }
.consent__body p { margin: 0; font-size: .95rem; line-height: 1.5; max-width: 62ch; }
.consent__body a { color: inherit; text-underline-offset: 3px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__btn { background: var(--orange); color: var(--cream); }
.consent__btn--line { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(251 249 242 / .6); }
@media (max-width: 599px) { .consent__actions, .consent__btn { width: 100%; justify-content: center; } }

/* 404 page. */
.notfound__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.notfound__line { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgb(251 249 242 / .7); }
.notfound__h { font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 0 0 clamp(24px, 3vw, 36px); }
.nfk { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .nfk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .nfk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.nfk__card {
    height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 14px 18px; border-radius: 18px; background: #fff; color: var(--ink-dark); text-decoration: none;
    border: 1.5px solid rgb(29 26 22 / .1);
    transition: transform .3s var(--spring), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nfk__card:hover, .nfk__card:focus-visible { transform: translateY(-4px); border-color: var(--k-accent); box-shadow: 0 16px 30px -18px rgb(29 26 22 / .45); }
.nfk__photo { position: relative; display: block; width: min(108px, 70%); aspect-ratio: 1; margin-bottom: 16px; }
.nfk__photo > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px color-mix(in srgb, var(--k-accent) 25%, transparent); }
.nfk__logo { position: absolute; right: -6px; bottom: -4px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--k-accent), 0 0 0 4px #fff; }
.nfk__logo--mono { display: grid; place-items: center; background: var(--k-accent); color: var(--k-ink); font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: .62rem; }
.nfk__cuisine { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-label, color-mix(in srgb, var(--k-accent) 85%, #000)); margin-bottom: 6px; }
.nfk__name { font-family: var(--display); font-stretch: var(--stretch); font-weight: 800; font-size: 1.02rem; line-height: 1.15; text-wrap: balance; }
.nfk__go { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: .85rem; color: var(--k-label, color-mix(in srgb, var(--k-accent) 85%, #000)); }
.notfound__more { margin: 0; }