/*
 * The looks a restaurant's website can wear (api/lib/templates.php).
 * Loaded on guest pages only. A look is made of pieces that can be mixed:
 *   colours — on <html data-template="…">, so the ordering and booking pages
 *             match the home page. The built-in looks' are below; a look made
 *             in the panel has its own worked out by look_css() and put in a
 *             <style> on the page;
 *   font    — <html data-font="…">: the headline typeface and how it's set;
 *   shape   — <html data-shape="…">: how buttons and cards are cut;
 *   hero    — .hx-split, .hx-bold, .hx-cover, .hx-plates (and Ember's own .hero);
 *   menu    — .m-printed, .m-centered, .m-cards, .m-shelves (and Ember's two columns)
 * on the home page, drawn by customer-home.js.
 * "classic" (Ember) is app.css as it stands; nothing here touches .tpl-classic.
 * Buttons carry white text, so every look's --primary stays dark enough for it.
 */

/* ------------------------------------------------------------- colours */
:root[data-template='bistro'] {
  --background: 150 18% 7%; --surface-2: 150 12% 14%; --card: 150 15% 10%;
  --foreground: 42 40% 94%; --muted-foreground: 60 10% 68%; --faint: 60 8% 56%;
  --accent: 150 12% 17%; --border: 150 10% 19%; --border-strong: 150 8% 30%;
  --primary: 152 44% 30%; --ember: 145 42% 60%; --amber: 40 80% 60%;
  --canvas-wash: radial-gradient(70rem 40rem at 80% -10rem, hsl(150 40% 30% / 0.14), transparent 65%);
  --shadow-ember: 0 10px 28px -12px hsl(152 50% 10% / 0.7), 0 2px 6px -2px hsl(150 30% 3% / 0.6);
}
:root[data-template='bistro'][data-theme='light'] {
  --background: 42 42% 95%; --surface-2: 40 28% 90%; --card: 44 52% 98%;
  --foreground: 150 24% 12%; --muted-foreground: 150 8% 33%; --faint: 150 6% 40%;
  --accent: 40 24% 86%; --border: 40 22% 83%; --border-strong: 40 14% 62%;
  --primary: 152 46% 22%; --ember: 152 44% 24%; --amber: 30 80% 32%;
  --canvas-wash: radial-gradient(70rem 40rem at 80% -10rem, hsl(40 70% 70% / 0.22), transparent 65%);
  --shadow-ember: 0 10px 28px -14px hsl(152 40% 16% / 0.35), 0 2px 6px -3px hsl(150 20% 14% / 0.16);
}

:root[data-template='street'] {
  --background: 0 0% 6%; --surface-2: 0 0% 13%; --card: 0 0% 9%;
  --foreground: 48 60% 96%; --muted-foreground: 45 8% 70%; --faint: 45 6% 58%;
  --accent: 0 0% 16%; --border: 0 0% 20%; --border-strong: 0 0% 34%;
  --primary: 14 92% 48%; --ember: 18 96% 62%; --amber: 48 100% 58%;
  --pop: 48 100% 56%; --ink: 0 0% 7%; --run-star: 14 92% 46%;
  --canvas-wash: none;
  --shadow-ember: 0 10px 28px -12px hsl(14 92% 30% / 0.6), 0 2px 6px -2px hsl(0 0% 0% / 0.6);
}
:root[data-template='street'][data-theme='light'] {
  --background: 48 60% 97%; --surface-2: 46 40% 91%; --card: 0 0% 100%;
  --foreground: 0 0% 7%; --muted-foreground: 0 0% 30%; --faint: 0 0% 40%;
  --accent: 46 34% 86%; --border: 44 24% 82%; --border-strong: 0 0% 20%;
  --primary: 14 92% 44%; --ember: 14 92% 40%; --amber: 36 96% 32%;
  --shadow-ember: 0 10px 28px -14px hsl(14 80% 36% / 0.35), 0 2px 6px -3px hsl(0 0% 0% / 0.16);
}

:root[data-template='noir'] {
  --background: 30 8% 5%; --surface-2: 30 6% 12%; --card: 30 7% 8%;
  --foreground: 40 30% 92%; --muted-foreground: 38 10% 66%; --faint: 36 8% 54%;
  --accent: 30 6% 15%; --border: 30 6% 17%; --border-strong: 32 8% 28%;
  --primary: 36 52% 36%; --ember: 40 58% 64%; --amber: 40 70% 60%; --on-photo: 40 58% 68%;
  --canvas-wash: radial-gradient(60rem 30rem at 50% -8rem, hsl(40 50% 40% / 0.1), transparent 70%);
  --shadow-ember: 0 10px 28px -14px hsl(36 60% 14% / 0.8), 0 2px 6px -2px hsl(30 20% 2% / 0.6);
}
:root[data-template='noir'][data-theme='light'] {
  --background: 40 30% 96%; --surface-2: 38 20% 91%; --card: 40 40% 99%;
  --foreground: 30 16% 10%; --muted-foreground: 30 8% 35%; --faint: 30 6% 42%;
  --accent: 38 18% 87%; --border: 36 16% 84%; --border-strong: 34 12% 60%;
  --primary: 34 56% 29%; --ember: 34 60% 28%; --amber: 30 80% 30%;
  --canvas-wash: none;
  --shadow-ember: 0 10px 28px -14px hsl(34 50% 20% / 0.3), 0 2px 6px -3px hsl(30 20% 12% / 0.14);
}

:root[data-template='garden'] {
  --background: 140 14% 8%; --surface-2: 140 10% 15%; --card: 140 12% 11%;
  --foreground: 80 30% 94%; --muted-foreground: 90 10% 68%; --faint: 90 8% 56%;
  --accent: 140 10% 18%; --border: 140 9% 20%; --border-strong: 130 8% 32%;
  --primary: 16 62% 46%; --ember: 18 72% 66%; --amber: 40 80% 60%;
  --leaf: 120 30% 56%;
  --canvas-wash: radial-gradient(50rem 30rem at 8% -6rem, hsl(120 30% 40% / 0.16), transparent 65%), radial-gradient(40rem 26rem at 96% 20%, hsl(16 62% 46% / 0.1), transparent 65%);
  --shadow-ember: 0 12px 28px -14px hsl(16 60% 20% / 0.7), 0 2px 6px -2px hsl(140 20% 3% / 0.5);
}
:root[data-template='garden'][data-theme='light'] {
  --background: 80 32% 95%; --surface-2: 84 24% 89%; --card: 80 44% 98%;
  --foreground: 150 20% 14%; --muted-foreground: 140 8% 34%; --faint: 140 6% 42%;
  --accent: 84 22% 85%; --border: 84 20% 83%; --border-strong: 90 12% 60%;
  --primary: 16 62% 44%; --ember: 16 64% 38%; --amber: 30 80% 32%;
  --leaf: 130 30% 34%;
  --canvas-wash: radial-gradient(50rem 30rem at 8% -6rem, hsl(110 40% 70% / 0.3), transparent 65%), radial-gradient(40rem 26rem at 96% 20%, hsl(16 70% 70% / 0.2), transparent 65%);
  --shadow-ember: 0 12px 28px -16px hsl(16 50% 30% / 0.35), 0 2px 6px -3px hsl(140 20% 14% / 0.14);
}

/* ---------------------------------------------------------------- fonts */
/* The headline typeface, and how each one likes to be set. --dscale evens out faces that run small or large. */
:root[data-font] { --font-display: 'Bricolage Grotesque', sans-serif; --dw: 800; --dcase: none; --dtrack: -0.035em; --dem-style: normal; --dem-weight: inherit; --dvar: normal; --dscale: 1; --dbold: 1; }
:root[data-font='fraunces'] { --font-display: 'Fraunces', Georgia, serif; --dw: 600; --dtrack: -0.025em; --dem-style: italic; --dem-weight: 400; --dvar: 'opsz' 36; }
:root[data-font='playfair'] { --font-display: 'Playfair Display', Georgia, serif; --dw: 700; --dtrack: -0.02em; --dem-style: italic; --dem-weight: 500; }
:root[data-font='cormorant'] { --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --dw: 500; --dtrack: -0.01em; --dem-style: italic; --dem-weight: 500; --dscale: 1.2; }
:root[data-font='anton'] { --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --dw: 400; --dcase: uppercase; --dtrack: 0.005em; --dscale: 1.08; --dbold: 1.25; }
:root[data-font='outfit'] { --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif; --dw: 700; }
:root[data-font='space'] { --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --dw: 700; --dtrack: -0.04em; }
:root[data-font='poppins'] { --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif; --dw: 700; --dtrack: -0.03em; --dscale: 0.94; --dbold: 0.9; }

/* Headings everywhere on the page take the look's typeface (Ember keeps app.css's own). */
.site:not(.tpl-classic) :is(.sec-head h2, .visit-where h2, .hero h1, .hx h1) { font-family: var(--font-display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dtrack); font-variation-settings: var(--dvar); }
.site:not(.tpl-classic) :is(.site-brand span, .menu-foot p, .visit-addr, .visit-actions b, .menu-tabs [role='tab'], .menu-list .dish h3, .menu-list .dish-price) { font-family: var(--font-display); }
.site:not(.tpl-classic) :is(.menu-foot p, .menu-list .dish h3) { font-weight: var(--dw); text-transform: var(--dcase); }
.site:not(.tpl-classic) .menu-foot p span { font-family: 'Inter Tight', sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; }
.site:not(.tpl-classic) :is(.visit-addr, .visit-actions b, .site-brand span) { font-weight: min(var(--dw), 600); }
.site:not(.tpl-classic) :is(.hero h1 em, .hx h1 em) { font-style: var(--dem-style); font-weight: var(--dem-weight); }

/* ----------------------------------------------- shared by the new heroes */
/* They sit on the page's own colours (Ember's sits on photos, so its words are white). */
.hx { position: relative; padding: calc(env(safe-area-inset-top, 0px) + 5.5rem) 1.25rem 3rem; }
.hx-in { max-width: 76rem; margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; }
.hx .hero-copy { max-width: 40rem; min-width: 0; }
.hx h1 { margin-top: 1rem; text-wrap: balance; }
.hx h1, .hx .hero-lead, .hx .hero-facts { text-shadow: none; }
.hx h1 em { display: block; color: hsl(var(--ember)); }
.hx .hero-status { color: hsl(var(--foreground)); }
.hx .hero-lead { color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.hx .hero-facts { color: hsl(var(--muted-foreground)); }
.hx .hero-actions .btn-outline { color: hsl(var(--foreground)); border-color: hsl(var(--border-strong)); background: transparent; }
.hx .hero-actions .btn-outline:hover { color: hsl(var(--ember)); border-color: hsl(var(--ember)); background: transparent; }
.hx figure { margin: 0; }
.hx figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hx { padding: 8rem 2.5rem 5rem; }
  .hx .hero-actions .btn { flex: 0 0 auto; }
}

/* The owner or the super admin trying a look on: says so, and how to get back. */
.look-bar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 1100; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 2rem); padding: 0.625rem 0.75rem 0.625rem 1rem; border-radius: 1rem; background: hsl(20 12% 10%); color: #fff; font-family: 'Inter Tight', sans-serif; font-size: 0.875rem; line-height: 1.4; box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.look-bar p { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.site .look-bar .btn { flex-shrink: 0; background: #fff; color: hsl(20 12% 10%); box-shadow: none; border: 0; border-radius: 0.625rem; transform: none; }
.site .look-bar .btn:hover { background: hsl(40 30% 90%); }

/* ============================================================ hero: arch */
/* The words on the left, one dish under an arch on the right. */
.hx-split h1 { font-size: calc(clamp(2.5rem, 8.4vw, 4.75rem) * var(--dscale)); line-height: 1.02; }
.hx-split .hero-lead { font-size: 1.125rem; line-height: 1.65; }
.hx-split .hx-art { position: relative; width: min(100%, 24rem); margin: 0 auto; padding-bottom: 0.5rem; }
.hx-split .hx-arch img { aspect-ratio: 4 / 5; height: auto; border-radius: 999px 999px 0.75rem 0.75rem; box-shadow: var(--shadow-lift); }
.hx-split .hx-arch figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border-strong)); font-family: var(--font-display); font-style: var(--dem-style); font-size: 1.0625rem; }
.hx-split .hx-arch figcaption b { font-style: normal; font-weight: 600; }
.hx-split .hx-coin { position: absolute; left: -0.75rem; bottom: 4.5rem; width: 38%; aspect-ratio: 1; border-radius: 999px; overflow: hidden; border: 6px solid hsl(var(--background)); box-shadow: var(--shadow-lift); }
.hx-split .hx-coin figcaption { display: none; }
@media (min-width: 900px) {
  .hx-split .hx-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; }
  .hx-split .hx-art { width: min(100%, 27rem); margin-right: 0; }
  .hx-split .hx-coin { left: -3rem; }
}

/* ======================================================== hero: big type */
/* The headline as tall as it goes, a fan of photo cards, and the menu running past underneath. */
.hx-bold { padding-bottom: 0; overflow: hidden; }
.site .hx-bold h1 { font-size: calc(clamp(2.5rem, 11.5vw, 6rem) * var(--dbold)); line-height: 0.94; text-transform: uppercase; }
.hx-bold h1 em { display: inline-block; margin-top: 0.08em; padding: 0.04em 0.16em 0; background: hsl(var(--pop, var(--primary))); color: hsl(var(--ink, 0 0% 100%)); transform: rotate(-1.5deg); transform-origin: left; }
.hx-bold .hero-lead { font-size: 1.0625rem; font-weight: 500; }
.hx-bold .hx-fan { display: flex; justify-content: center; padding: 0.5rem 0 1rem; }
.hx-bold .hx-card { position: relative; flex: 0 0 auto; width: clamp(7.5rem, 31vw, 15rem); aspect-ratio: 4 / 5; border-radius: 1rem; overflow: hidden; border: 3px solid hsl(var(--foreground)); box-shadow: 6px 6px 0 hsl(var(--foreground)); background: hsl(var(--card)); transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.hx-bold .hx-card:nth-child(1) { transform: rotate(-6deg) translateY(0.5rem); z-index: 1; }
.hx-bold .hx-card:nth-child(2) { transform: rotate(3deg); margin-left: -1.25rem; z-index: 2; }
.hx-bold .hx-card:nth-child(3) { transform: rotate(-2deg) translateY(1rem); margin-left: -1.25rem; z-index: 3; }
.hx-bold .hx-card:hover { transform: rotate(0) translateY(-0.5rem); z-index: 4; }
.hx-bold .hx-card figcaption { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.5rem; background: hsl(var(--pop, var(--primary))); color: hsl(var(--ink, 0 0% 100%)); font-size: 0.75rem; font-weight: 700; line-height: 1.2; }
.hx-bold .hx-card figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-bold .hx-run { margin: 2rem -2.5rem 0; overflow: hidden; border-top: 3px solid hsl(var(--foreground)); border-bottom: 3px solid hsl(var(--foreground)); background: hsl(var(--pop, var(--primary))); color: hsl(var(--ink, 0 0% 100%)); }
.hx-bold .hx-run > div { display: flex; width: max-content; animation: look-run 40s linear infinite; }
.hx-bold .hx-run span { flex-shrink: 0; padding: 0.625rem 0; font-family: var(--font-display); font-weight: var(--dw); font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.hx-bold .hx-run i { font-style: normal; padding: 0 0.75rem; color: hsl(var(--run-star, var(--ink, 0 0% 100%))); }
@keyframes look-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hx-bold .hx-run > div { animation: none; } }
.hx-bold .hx-under { max-width: 76rem; margin: 0 auto; padding: 1.25rem 0 0; }
.hx-bold .hx-under .hero-facts { margin-top: 0; font-weight: 600; color: hsl(var(--foreground)); }
/* With this hero the section headings stand to the left, as tall as the headline's little brother. */
.h-bold .sec-head { text-align: left; }
.h-bold .sec-head p { margin-left: 0; }
.site.h-bold :is(.sec-head h2, .visit-where h2) { text-transform: uppercase; font-size: calc(clamp(2.5rem, 8vw, 4.5rem) * var(--dbold)); line-height: 0.95; }
@media (min-width: 900px) {
  .hx-bold .hx-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; }
  .hx-bold .hx-fan { justify-content: flex-end; padding-right: 1rem; }
  .hx-bold .hx-card { width: clamp(9rem, 13vw, 13rem); }
  .hx-bold .hx-run { margin-top: 3.5rem; }
  .hx-bold .hx-run span { font-size: 1.75rem; }
}

/* ====================================================== hero: full photo */
/* One photograph edge to edge and very little said over it. The words are white whatever the theme. */
.site.h-cover .site-nav { background: hsl(30 8% 5% / 0.55); border-bottom-color: hsl(0 0% 100% / 0.12); }
.site.h-cover .site-nav :is(.site-brand span, .site-links a) { color: #fff; }
.site.h-cover .site-nav .icon-btn { color: hsl(0 0% 100% / 0.85); border-color: hsl(0 0% 100% / 0.25); box-shadow: none; }
.hx-cover { display: grid; grid-template-rows: 1fr auto; min-height: 100svh; padding: 0; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, hsl(var(--primary) / 0.5), hsl(30 10% 5%)), hsl(30 10% 8%); color: #fff; text-align: center; }
.hx-cover .hx-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hx-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 45%, hsl(30 14% 5% / 0.62), hsl(30 14% 4% / 0.9)); }
.hx-cover .hx-in { display: grid; place-items: center; width: 100%; padding: calc(env(safe-area-inset-top, 0px) + 6rem) 1.5rem 2.5rem; }
.hx-cover .hero-copy { max-width: 46rem; }
.hx-cover .hx-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: hsl(var(--on-photo, 40 58% 70%)); }
.hx-cover h1 { margin-top: 1.5rem; font-size: calc(clamp(2.25rem, 8.4vw, 4.75rem) * var(--dscale)); line-height: 1; }
.hx-cover h1 em { color: hsl(var(--on-photo, 40 58% 70%)); }
.hx-cover .hero-lead { margin: 1.5rem auto 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.7; color: hsl(0 0% 100% / 0.78); }
.hx-cover .hero-actions { justify-content: center; margin-top: 2.25rem; }
.hx-cover .hero-actions .btn { flex: 0 1 15rem; }
.hx-cover .hero-actions .btn-outline { color: #fff; border-color: hsl(0 0% 100% / 0.45); background: transparent; }
.hx-cover .hero-actions .btn-outline:hover { color: hsl(var(--on-photo, 40 58% 70%)); border-color: currentColor; background: transparent; }
.hx-cover .hx-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 2rem; padding: 1.125rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1.125rem); border-top: 1px solid hsl(0 0% 100% / 0.16); }
.hx-cover .hx-under :is(.hero-status, .hero-facts) { margin: 0; color: hsl(0 0% 100% / 0.8); }
.hx-cover .hx-under .hero-facts { justify-content: center; }
.hx-cover .hx-under .hero-facts svg.i { color: hsl(var(--on-photo, 40 58% 70%)); }

/* ==================================================== hero: round plates */
/* Three round plates of different sizes beside the words, on a soft shape. */
.hx-plates h1 { font-size: calc(clamp(2.5rem, 9vw, 4.75rem) * var(--dscale)); line-height: 1.02; }
.hx-plates h1 em { color: hsl(var(--primary)); }
.hx-plates .hero-status { padding: 0.375rem 0.875rem; border-radius: 999px; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.hx-plates .hero-facts li { padding: 0.375rem 0.75rem; border-radius: 999px; background: hsl(var(--leaf, var(--ember)) / 0.12); color: hsl(var(--foreground)); }
.hx-plates .hero-facts svg.i { color: hsl(var(--leaf, var(--ember))); }
.hx-plates .hx-ring { position: relative; width: min(100%, 26rem); aspect-ratio: 1 / 0.92; margin: 0 auto; }
.hx-plates .hx-ring::before { content: ''; position: absolute; inset: 8% 4% 4% 10%; border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%; background: hsl(var(--leaf, var(--ember)) / 0.16); }
.hx-plates .hx-plate { position: absolute; }
.hx-plates .hx-plate img { aspect-ratio: 1; height: auto; border-radius: 999px; border: 7px solid hsl(var(--card)); box-shadow: 0 18px 40px -18px hsl(0 0% 0% / 0.45); }
.hx-plates .hx-plate figcaption { position: absolute; left: 50%; bottom: -0.25rem; transform: translateX(-50%); display: flex; gap: 0.5rem; max-width: 120%; padding: 0.3125rem 0.75rem; border-radius: 999px; background: hsl(var(--card)); box-shadow: 0 6px 16px -8px hsl(0 0% 0% / 0.4), inset 0 0 0 1px hsl(var(--border)); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.hx-plates .hx-plate figcaption span { overflow: hidden; text-overflow: ellipsis; }
.hx-plates .hx-plate figcaption b { color: hsl(var(--ember)); }
.hx-plates .hx-plate:nth-child(1) { right: 0; top: 0; width: 66%; }
.hx-plates .hx-plate:nth-child(2) { left: 0; bottom: 4%; width: 44%; }
.hx-plates .hx-plate:nth-child(3) { right: 6%; bottom: 0; width: 30%; }
.hx-plates .hx-plate:nth-child(3) figcaption { display: none; }
/* The big plate's label sits at its top, clear of the small plate below it. */
.hx-plates .hx-ring:not(.n1) .hx-plate:nth-child(1) figcaption { bottom: auto; top: 3%; left: 8%; transform: none; }
.hx-plates .hx-ring.n1 .hx-plate { position: static; width: 82%; margin: 0 auto; }
@media (min-width: 900px) {
  .hx-plates .hx-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; }
  .hx-plates .hx-ring { width: min(100%, 32rem); }
  .hx-plates .hx-plate figcaption { font-size: 0.8125rem; }
}

/* ================================================================= menus */
/* Every section in turn (printed, centred, rounded cards), with links along the top to jump to one. */
.menu-jump { justify-content: safe center; }
.menu-jump a { flex-shrink: 0; padding: 1rem 1rem 0.875rem; font-family: var(--font-display); font-weight: min(var(--dw), 600); font-size: 1.0625rem; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 150ms, border-color 150ms; }
.menu-jump a:hover { color: hsl(var(--ember)); border-bottom-color: hsl(var(--ember)); }
.menu-all section { scroll-margin-top: 8rem; padding-top: 3rem; }
.menu-all h3 { font-family: var(--font-display); }
.menu-all ul { margin: 0; padding: 0; list-style: none; }
.menu-all .veg-mark { display: inline-flex; width: 0.75rem; height: 0.75rem; margin-left: 0.375rem; vertical-align: 0.05em; }
.menu-all .out, .menu-grid .out { opacity: 0.5; }
.menu-all .out img, .menu-grid .out img { filter: grayscale(1); }

/* A menu line: name, a row of dots, the price. */
.pl { padding: 0.875rem 0; break-inside: avoid; }
.pl-top { display: flex; align-items: baseline; gap: 0.625rem; }
.pl h4 { font-family: var(--font-display); font-weight: min(var(--dw), 600); text-transform: var(--dcase); font-size: 1.1875rem; line-height: 1.25; }
.pl-dots { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted hsl(var(--border-strong) / 0.8); transform: translateY(-0.25em); }
.pl-price { font-family: var(--font-display); font-weight: min(var(--dw), 600); font-size: 1.125rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pl p { margin-top: 0.25rem; max-width: 30rem; font-size: 0.9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.pl.out .pl-price { font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--danger-text)); }

/* Printed card: two columns of sections on a wide screen, each under a ruled heading. */
.m-printed .menu-all { max-width: 62rem; margin: 0 auto; }
.m-printed .menu-all h3 { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; font-style: var(--dem-style); font-weight: var(--dem-weight); text-transform: var(--dcase); font-size: 1.75rem; letter-spacing: -0.01em; color: hsl(var(--ember)); }
.m-printed .menu-all h3::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border-strong)); }
@media (min-width: 900px) {
  .m-printed .menu-all { columns: 2; column-gap: 4.5rem; column-rule: 1px solid hsl(var(--border)); }
  .m-printed .menu-all section { break-inside: avoid-column; }
  .m-printed .menu-all section:first-child { padding-top: 2rem; }
}

/* Centred: one narrow column, small spaced headings between rules, the price under the name. */
.m-centered .menu-jump a { font-size: 1.1875rem; }
.m-centered .menu-all { max-width: 40rem; margin: 0 auto; }
.m-centered .menu-all section { padding-top: 4rem; }
.m-centered .menu-all h3 { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; font-family: 'Inter Tight', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: hsl(var(--ember)); }
.m-centered .menu-all h3::before, .m-centered .menu-all h3::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border-strong)); }
.m-centered .pl { padding: 1.25rem 0; text-align: center; }
.m-centered .pl-top { flex-direction: column; align-items: center; gap: 0.25rem; }
.m-centered .pl-dots { display: none; }
.m-centered .pl h4 { font-size: calc(1.375rem * var(--dscale)); }
.m-centered .pl p { margin-left: auto; margin-right: auto; }
.m-centered .pl-price { order: 3; margin-top: 0.375rem; color: hsl(var(--ember)); }
.m-centered .pl.out .pl-price { color: hsl(var(--danger-text)); }

/* Photo cards: one section at a time, a big photo for every dish with its price on a tag. */
.m-cards .menu-tabs { justify-content: flex-start; gap: 0.5rem; border-bottom: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site.m-cards .menu-tabs [role='tab'] { padding: 0.5rem 1rem; border: 2px solid hsl(var(--foreground)); border-radius: 999px; margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 0.9375rem; color: hsl(var(--foreground)); background: hsl(var(--card)); }
.site.m-cards .menu-tabs [role='tab'][aria-selected='true'] { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }
.m-cards .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.75rem 1.25rem; padding: 1.25rem 0 0; margin: 0; list-style: none; border: 0; }
.pc-img { position: relative; aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; border: 2px solid hsl(var(--foreground)); background: hsl(var(--surface-2)); }
.pc-img img, .pc-img .dish-ph { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: hsl(var(--faint)); border-radius: 0; }
.pc-price { position: absolute; top: 0.625rem; right: 0.625rem; padding: 0.25rem 0.625rem; border-radius: 0.5rem; border: 2px solid hsl(var(--ink, 0 0% 100%)); background: hsl(var(--pop, var(--primary))); color: hsl(var(--ink, 0 0% 100%)); font-weight: 800; font-size: 0.9375rem; transform: rotate(3deg); }
.pc h4 { margin-top: 0.875rem; font-family: var(--font-display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.25rem * var(--dscale)); line-height: 1.15; letter-spacing: var(--dtrack); }
.pc h4 .veg-mark { display: inline-flex; width: 0.75rem; height: 0.75rem; margin-left: 0.375rem; vertical-align: 0.15em; }
.pc p { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }

/* Rounded cards: every section in turn, a round photo, the words and a price pill. */
.m-shelves .menu-tabs { gap: 0.5rem; border-bottom: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.m-shelves .menu-jump a { padding: 0.5rem 1rem; border: 0; border-radius: 999px; margin: 0; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); font-size: 0.9375rem; color: hsl(var(--foreground)); }
.m-shelves .menu-jump a:hover { background: hsl(var(--leaf, var(--ember)) / 0.16); color: hsl(var(--foreground)); }
.m-shelves .menu-all h3 { display: inline-flex; margin-bottom: 1rem; font-weight: min(var(--dw), 600); text-transform: var(--dcase); font-size: 1.5rem; letter-spacing: var(--dtrack); }
.m-shelves .menu-all h3 span { padding: 0 0.125rem 0.125rem; background: linear-gradient(transparent 62%, hsl(var(--leaf, var(--ember)) / 0.28) 62%); }
.m-shelves .menu-all ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.875rem; }
.ps { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: 1.5rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms; }
.ps:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px hsl(var(--leaf, var(--ember)) / 0.5), 0 14px 28px -18px hsl(0 0% 0% / 0.4); }
.ps img, .ps .dish-ph { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; display: grid; place-items: center; background: hsl(var(--surface-2)); color: hsl(var(--faint)); }
.ps h4 { font-family: var(--font-display); font-weight: min(var(--dw), 600); font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; }
.ps p { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.45; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-price { align-self: start; padding: 0.25rem 0.625rem; border-radius: 999px; background: hsl(var(--primary) / 0.12); color: hsl(var(--ember)); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.ps.out .ps-price { background: hsl(var(--danger-text) / 0.12); color: hsl(var(--danger-text)); font-size: 0.75rem; }

/* ================================================================ shapes */
/* How buttons and the boxes around them are cut. "soft" is app.css as it stands. */
:root[data-shape='pill'] .site :is(.btn, .icon-btn) { border-radius: 999px; }
:root[data-shape='pill'] .site .menu-foot { border-radius: 2rem; }
:root[data-shape='pill'] .site .visit-actions { border-top: 0; display: grid; gap: 0.625rem; }
:root[data-shape='pill'] .site .visit-actions a { padding: 1rem 1.125rem; border: 0; border-radius: 1.25rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }

:root[data-shape='square'] .site .btn { border-radius: 0; font-weight: 500; letter-spacing: 0.04em; }
:root[data-shape='square'] .site .icon-btn { border-radius: 0; }
:root[data-shape='square'] .site .menu-foot { border-radius: 0; background: transparent; color: hsl(var(--foreground)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); justify-content: center; text-align: center; flex-direction: column; padding: 3rem 1.5rem; }
:root[data-shape='square'] .site .menu-foot p span { color: hsl(var(--muted-foreground)); }
:root[data-shape='square'] .site .menu-foot .btn { background: hsl(var(--primary)); }
:root[data-shape='square'] .site .visit-actions { border-top: 1px solid hsl(var(--border-strong)); }
:root[data-shape='square'] .site :is(.pc-img, .ps, .hx-card) { border-radius: 0; }

:root[data-shape='block'] .site .btn { border-radius: 0.625rem; border: 2px solid hsl(var(--foreground)); box-shadow: 4px 4px 0 hsl(var(--foreground)); transition: transform 120ms, box-shadow 120ms, background-color 150ms; }
:root[data-shape='block'] .site .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 hsl(var(--foreground)); }
:root[data-shape='block'] .site .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 hsl(var(--foreground)); }
:root[data-shape='block'] .site .site-order { box-shadow: 3px 3px 0 hsl(var(--foreground)); }
:root[data-shape='block'] .site .hx:not(.hx-cover) .hero-actions .btn-outline { background: hsl(var(--card)); border-color: hsl(var(--foreground)); }
:root[data-shape='block'] .site .hx:not(.hx-cover) .hero-actions .btn-outline:hover { background: hsl(var(--pop, var(--primary))); color: hsl(var(--ink, 0 0% 100%)); border-color: hsl(var(--foreground)); }
:root[data-shape='block'] .site .menu-foot { border: 3px solid hsl(var(--foreground)); border-radius: 1rem; box-shadow: 6px 6px 0 hsl(var(--foreground)); }
:root[data-shape='block'] .site .menu-foot .btn { border-color: #fff; box-shadow: 4px 4px 0 #fff; }
:root[data-shape='block'] .site .visit-actions { border-top-width: 3px; }

/* =============================================================== headers */
/* How the bar on top is laid out. "bar" is app.css as it stands. */
@media (min-width: 768px) {
  /* Centred logo: links on the left, the logo in the middle, buttons on the right. */
  .hd-center .site-nav .site-links { order: -1; margin-right: auto; }
  .hd-center .site-nav .site-brand { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}
/* Floating: a rounded bar a little below the top of the screen. */
.hd-float .site-nav { top: calc(env(safe-area-inset-top, 0px) + 0.625rem); left: 0.625rem; right: 0.625rem; max-width: 74rem; margin: 0 auto; padding: 0.5rem 0.625rem 0.5rem 0.875rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card) / 0.9); box-shadow: var(--shadow-lift); }
:root[data-shape='pill'] .hd-float .site-nav { border-radius: 999px; padding-left: 1rem; }
:root[data-shape='square'] .hd-float .site-nav { border-radius: 0; }
:root[data-shape='block'] .hd-float .site-nav { border: 2px solid hsl(var(--foreground)); box-shadow: 4px 4px 0 hsl(var(--foreground)); }
.hd-float .hx { padding-top: calc(env(safe-area-inset-top, 0px) + 6.5rem); }
@media (min-width: 900px) { .hd-float .hx { padding-top: 9rem; } }
.site.hd-float.h-cover .site-nav { background: hsl(30 8% 5% / 0.6); border-color: hsl(0 0% 100% / 0.16); }
.hd-float .hx-cover { padding-top: 0; }
/* See-through: clear over the top of the page, solid once the guest scrolls. */
.hd-clear .site-nav { transition: background-color 250ms, border-color 250ms, backdrop-filter 250ms; }
.hd-clear .site-nav:not(.scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site.hd-clear.h-collage .site-nav:not(.scrolled) :is(.site-brand span, .site-links a) { color: #fff; }
.site.hd-clear.h-collage .site-nav:not(.scrolled) .icon-btn { color: hsl(0 0% 100% / 0.85); border-color: hsl(0 0% 100% / 0.3); }

/* =============================================================== footers */
/* How the page ends. "line" is app.css as it stands. */
.site-foot :is(.foot-name) { font-family: var(--font-display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dtrack); color: hsl(var(--foreground)); }
.foot-end { font-size: 0.8125rem; color: hsl(var(--faint)); }
.foot-reach { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.site .foot-reach a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); color: hsl(var(--foreground)); transition: color 150ms, box-shadow 150ms, transform 150ms; }
.site .foot-reach a:hover { color: hsl(var(--ember)); box-shadow: inset 0 0 0 1px hsl(var(--ember)); transform: translateY(-2px); }

/* Columns: who you are, where you are, how to reach you. */
.foot-columns { display: block; margin-top: 5rem; padding: 3rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem); border-top: 1px solid hsl(var(--border)); background: hsl(var(--surface-2) / 0.4); font-size: 0.9375rem; text-align: left; }
.foot-columns .foot-in { display: grid; gap: 2rem; max-width: 76rem; margin: 0 auto; }
.foot-columns .foot-name { margin-top: 0.75rem; font-size: 1.25rem; }
.foot-columns h2 { margin-bottom: 0.625rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--faint)); }
.foot-columns p { margin-top: 0.375rem; max-width: 22rem; line-height: 1.55; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.foot-columns .foot-in a { display: inline; color: hsl(var(--foreground)); font-weight: 500; text-decoration: underline; text-decoration-color: hsl(var(--border-strong)); text-underline-offset: 0.25em; }
.foot-columns .foot-in a:hover { color: hsl(var(--ember)); text-decoration-color: currentColor; }
.foot-columns .foot-end { max-width: 76rem; margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { .foot-columns { padding: 4rem 2.5rem 2rem; } .foot-columns .foot-in { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }

/* Centred: the logo, the name and the ways to reach you, in the middle. */
.foot-center { flex-direction: column; gap: 0.625rem; margin-top: 5rem; padding-top: 3.5rem; border-top: 1px solid hsl(var(--border)); text-align: center; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); }
.foot-center .foot-name { font-size: 1.5rem; }
.foot-center .foot-reach { margin-top: 0.875rem; }
.foot-center .foot-end { margin-top: 1.5rem; }

/* Big band: the name as large as it goes on the accent colour. */
.foot-band { display: block; margin-top: 5rem; padding: 0; }
.foot-band .foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3.5rem); background: hsl(var(--primary)); }
.site .foot-band .foot-name { font-size: calc(clamp(2.25rem, 9vw, 6rem) * var(--dscale)); line-height: 0.95; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.site .foot-band .foot-in .btn { background: hsl(20 16% 5%); color: #fff; }
.foot-band .foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem) calc(env(safe-area-inset-bottom, 0px) + 1.5rem); }

/* ================================================================ blocks */
/* The parts a page can be made of, beside the top, the menu and Visit us. */
.blk { width: 100%; max-width: 76rem; margin: 0 auto; padding: 5rem 1.25rem 0; }
@media (min-width: 900px) { .blk { padding: 7rem 2.5rem 0; } }

/* Open hours strip: tucked under the top of the page when it comes next, a full gap after any other block. */
.blk.blk-info { padding-top: 5rem; }
:is(.hero, .hx) + .blk.blk-info { padding-top: 1.5rem; }
.blk-info ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem 2rem; margin: 0; padding: 0.875rem 1.25rem; list-style: none; border-radius: 1rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); font-size: 0.9375rem; }
.blk-info li { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.blk-info li svg.i { color: hsl(var(--ember)); }
.blk-info .dot { width: 0.5rem; height: 0.5rem; border-radius: 99px; background: hsl(var(--veg)); }
.blk-info .closed .dot { background: hsl(var(--danger-text)); }

/* Dishes with photos. */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
.feat-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 0.75rem; align-items: baseline; }
.feat-grid img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; background: hsl(var(--surface-2)); transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms; }
.feat-grid a:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feat-name { font-family: var(--font-display); font-weight: min(var(--dw), 600); text-transform: var(--dcase); font-size: 1.0625rem; line-height: 1.25; }
.feat-name .veg-mark { display: inline-flex; width: 0.75rem; height: 0.75rem; margin-left: 0.25rem; vertical-align: 0.05em; }
.feat-price { font-weight: 700; color: hsl(var(--ember)); white-space: nowrap; }

/* Ways to order. */
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.ways-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.5rem; border-radius: 1.25rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.ways-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.5rem; border-radius: 0.75rem; background: hsl(var(--ember) / 0.12); color: hsl(var(--ember)); }
.ways-ic svg.i { width: 1.25rem; height: 1.25rem; }
.ways-grid h3 { font-family: var(--font-display); font-weight: min(var(--dw), 700); text-transform: var(--dcase); font-size: 1.25rem; letter-spacing: -0.015em; }
.ways-grid p { flex: 1; font-size: 0.9375rem; line-height: 1.55; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.ways-grid .btn { margin-top: 0.75rem; }

/* Photo gallery: the first photo twice the size of the rest. */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }
.gal li { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 1rem; background: hsl(var(--surface-2)); }
.gal li:first-child { grid-column: span 2; grid-row: span 2; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.gal li:hover img { transform: scale(1.05); }
.gal button { display: block; width: 100%; height: 100%; text-align: left; cursor: zoom-in; }
.gal button:focus-visible { outline-offset: -3px; border-radius: inherit; }
.gal span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.875rem 0.75rem; background: linear-gradient(transparent, hsl(20 30% 4% / 0.8)); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }

/* The lightbox: a gallery photo large on a dark sheet, its caption under it. The same in every look. */
.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 0.5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0.75rem calc(env(safe-area-inset-bottom, 0px) + 1.25rem); background: hsl(20 30% 4% / 0.97); color: #fff; cursor: zoom-out; animation: lb-in 180ms ease-out; }
@keyframes lb-in { from { opacity: 0; } }
/* The photo is as tall as the screen leaves room for, so its caption sits right under it and the pair is centred. */
.lb figure { grid-column: 2; display: grid; align-content: center; justify-items: center; gap: 0.875rem; height: 100%; min-height: 0; margin: 0; }
.lb img { max-width: 100%; max-height: calc(100vh - 10.5rem); max-height: calc(100dvh - 10.5rem); width: auto; height: auto; object-fit: contain; border-radius: 0.75rem; cursor: default; }
.lb figcaption { cursor: default; display: grid; justify-items: center; gap: 0.25rem; min-height: 2.75rem; text-align: center; }
.lb figcaption span { font-size: 1rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.lb figcaption small { font-size: 0.8125rem; color: hsl(0 0% 100% / 0.65); }
.lb-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: hsl(0 0% 100% / 0.12); color: #fff; cursor: pointer; transition: background-color 150ms; }
.lb-btn:hover { background: hsl(0 0% 100% / 0.24); }
.lb-btn:focus-visible { outline-color: #fff; border-radius: 999px; }
.lb-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.75rem); right: 0.75rem; }
.lb-prev { grid-column: 1; grid-row: 1; justify-self: center; }
.lb-next { grid-column: 3; grid-row: 1; justify-self: center; }
/* Phone: the photo takes the full width, with the arrows over its lower corners. */
@media (max-width: 639px) {
  .lb { grid-template-columns: minmax(0, 1fr); padding-left: 0.5rem; padding-right: 0.5rem; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem); }
  .lb figure { grid-column: 1; }
  .lb img { max-height: calc(100vh - 13.5rem); max-height: calc(100dvh - 13.5rem); }
  .lb-prev, .lb-next { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
  .lb-prev { left: 1rem; }
  .lb-next { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

/* Guest reviews: a card for each, and the whole card opens the review where it was written. */
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .rv-grid:not(.n1) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-grid.n1 { max-width: 36rem; margin-inline: auto; } }
@media (min-width: 1024px) { .rv-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rv-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rv-grid li { display: flex; min-width: 0; }
.rv-grid a { display: flex; flex-direction: column; gap: 0.875rem; width: 100%; padding: 1.5rem; border-radius: 1.25rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms; }
.rv-grid a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)), var(--shadow-lift); }
.rv-stars { display: flex; gap: 0.1875rem; color: hsl(var(--border-strong)); }
.rv-stars svg.i { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke-width: 0; }
.rv-stars svg.i.on { color: hsl(40 96% 50%); }
.rv-text { flex: 1; font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
.rv-text::before { content: '“'; }
.rv-text::after { content: '”'; }
.rv-by { display: grid; gap: 0.125rem; padding-top: 0.875rem; border-top: 1px solid hsl(var(--border)); }
.rv-by b { font-weight: 700; overflow-wrap: anywhere; }
.rv-by small { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--ember)); }
.rv-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 2.5rem; text-align: center; }
.rv-ask p { color: hsl(var(--muted-foreground)); }
.rv-ask b { color: hsl(var(--foreground)); }
/* No reviews added yet: only the ask, centred under its stars. */
.rv-rate { display: grid; justify-items: center; gap: 0.5rem; max-width: 36rem; margin: 0 auto; text-align: center; }
.rv-rate .rv-stars svg.i { width: 1.5rem; height: 1.5rem; }
.rv-rate h2 { margin-top: 0.5rem; font-family: var(--font-display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dtrack); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; }
.rv-rate p:not(.rv-stars) { color: hsl(var(--muted-foreground)); }
.rv-rate .btn { margin-top: 1rem; }

/* A band with one thing to do: book a table. */
.site .blk-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; width: calc(100% - 2.5rem); max-width: 71rem; margin-top: 5rem; padding: 2rem; border-radius: 1.25rem; background: hsl(var(--primary)); color: #fff; box-shadow: var(--shadow-ember); }
.blk-band h2 { font-family: var(--font-display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dtrack); font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.05; }
.blk-band p { margin-top: 0.375rem; color: rgb(255 255 255 / 0.85); }
.site .blk-band .btn { background: hsl(20 16% 5%); color: #fff; }

/* The blocks follow the look's shape. */
:root[data-shape='pill'] .site :is(.blk-band, .ways-grid li, .rv-grid a) { border-radius: 2rem; }
:root[data-shape='pill'] .site :is(.feat-grid img, .gal li) { border-radius: 1.5rem; }
:root[data-shape='pill'] .site .blk-info ul { border-radius: 999px; }
:root[data-shape='square'] .site :is(.blk-band, .ways-grid li, .rv-grid a, .feat-grid img, .gal li, .blk-info ul, .ways-ic, .foot-reach a) { border-radius: 0; }
:root[data-shape='block'] .site :is(.blk-band, .ways-grid li, .rv-grid a, .blk-info ul) { border: 3px solid hsl(var(--foreground)); box-shadow: 6px 6px 0 hsl(var(--foreground)); }
:root[data-shape='block'] .site :is(.feat-grid img, .gal li) { border: 2px solid hsl(var(--foreground)); }
:root[data-shape='block'] .site .blk-band .btn { border-color: #fff; box-shadow: 4px 4px 0 #fff; }

/* ------------------------------------------ the built-in looks' own touches */
.site.tpl-street :is(.visit-addr, .visit-actions b) { font-family: 'Inter Tight', sans-serif; text-transform: none; }
.site.tpl-street .visit-actions b { font-weight: 800; }
.site.tpl-noir .site-brand span { font-size: 1.25rem; letter-spacing: 0.01em; }
.site.tpl-noir :is(.sec-head h2, .visit-where h2) { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.site.tpl-noir .visit-addr { font-size: clamp(1.5rem, 3vw, 2rem); }
.site.tpl-noir .visit-actions b { font-size: 1.375rem; }