:root {
  --restaurant-background: #f4f3ef;
  --restaurant-surface: #fff;
  --restaurant-text: #1c211f;
  --restaurant-muted: #5d6662;
  --restaurant-accent: #245f55;
  --restaurant-accent-secondary: #9b6a3c;
  --restaurant-accent-text: #fff;
  --restaurant-border: #d7dbd8;
  --restaurant-dark: #17211e;
  --restaurant-dark-text: #f7f7f3;
  --restaurant-display: Georgia, "Times New Roman", serif;
  --restaurant-editorial: Georgia, "Times New Roman", serif;
  --restaurant-functional: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --restaurant-button-radius: 4px;
  --restaurant-image-radius: 8px;
  --restaurant-card-radius: 8px;
  --restaurant-section-space: clamp(4rem, 7vw, 7rem);
  --restaurant-photo-filter: none;
  --restaurant-transition: 220ms;

  /* Peak hero scrim opacity at the bottom edge. design.md §6.1 caps this at
     .68 so the photograph stays plainly legible behind the headline. */
  --restaurant-scrim: .68;

  --restaurant-ornament-opacity: .07;
  --restaurant-content: min(calc(100% - 2.5rem), 74rem);
  --restaurant-prose: 38rem;

  /* design.md §4.2 — 1.2 at 390px opening to 1.25 at 1440px. */
  --restaurant-step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --restaurant-step-0: clamp(1rem, .97rem + .15vw, 1.125rem);
  --restaurant-step-1: clamp(1.2rem, 1.15rem + .24vw, 1.4rem);
  --restaurant-step-2: clamp(1.44rem, 1.35rem + .4vw, 1.75rem);
  --restaurant-step-3: clamp(1.73rem, 1.56rem + .72vw, 2.44rem);
  --restaurant-step-4: clamp(2.07rem, 1.78rem + 1.25vw, 3.05rem);
  --restaurant-step-5: clamp(2.6rem, 1.7rem + 3.85vw, 5rem);
  --restaurant-hero-header-height: 88px;
  --restaurant-hero-disclosure-space: 0px;
  --restaurant-hero-action-space: 0px;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--restaurant-text);
  background: var(--restaurant-background);
}

.restaurant-site,
.restaurant-site *,
.restaurant-site *::before,
.restaurant-site *::after {
  box-sizing: border-box;
}

.restaurant-site {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  overflow: clip;
  color: var(--restaurant-text);
  background-color: var(--restaurant-background);
  font-family: var(--restaurant-functional);
  font-size: var(--restaurant-step-0);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Ornament — design.md §5. One brand mark and one divider band per profile,
   drawn from the cuisine's own visual tradition. The band is masked rather
   than painted so it always takes the profile's accent colour, and appears at
   most twice per page.
   --------------------------------------------------------------------------- */

.restaurant-divider {
  display: flex;
  width: var(--restaurant-content);
  margin: 0 auto;
  justify-content: center;
}

.restaurant-divider::before {
  width: min(100%, 26rem);
  height: 30px;
  background: color-mix(in srgb, var(--restaurant-accent-secondary), transparent 18%);
  content: "";
  mask-repeat: repeat-x;
  mask-position: center;
}

.restaurant-site[data-divider="botanical-vine"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2012h80%22%2F%3E%3Cpath%20d%3D%22M20%2012c0-3%202.4-5.4%205.4-5.4M20%2012c0%203%202.4%205.4%205.4%205.4M60%2012c0-3-2.4-5.4-5.4-5.4M60%2012c0%203-2.4%205.4-5.4%205.4%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 80px 30px;
}

.restaurant-site[data-divider="plaster-rule"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2012c8%200%208-2.4%2016-2.4S24%2012%2032%2012s8-2.4%2016-2.4S56%2012%2064%2012s8-2.4%2016-2.4%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 80px 30px;
}

.restaurant-site[data-divider="fluted-band"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%206v12M12%204v16M20%206v12%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 24px 30px;
}

.restaurant-site[data-divider="tile-band"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M16%204l6%208-6%208-6-8Z%22%2F%3E%3Cpath%20d%3D%22M0%2012h10M22%2012h10%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 32px 30px;
}

.restaurant-site[data-divider="rope-wave"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2012c6%200%206-5%2012-5s6%2010%2012%2010%206-5%2012-5%206%205%2012%205%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 48px 30px;
}

.restaurant-site[data-divider="stone-rule"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M0%2012h18M30%2012h18%22%2F%3E%3Cpath%20d%3D%22M24%208.6l3.4%203.4L24%2015.4%2020.6%2012Z%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 48px 30px;
}

.restaurant-site[data-divider="candle-hairline"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%2011h26M38%2011h26%22%2F%3E%3Cpath%20d%3D%22M0%2014h26M38%2014h26%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2212.5%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 64px 30px;
}

.restaurant-site[data-divider="deco-rule"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M0%209h64M0%2015h64%22%2F%3E%3Cpath%20d%3D%22M28%206v12M36%206v12%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 64px 30px;
}

.restaurant-site[data-divider="meander-band"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22square%22%3E%3Cpath%20d%3D%22M0%2020h26V4H10v12h10V8%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 32px 30px;
}

.restaurant-site[data-divider="interlace-band"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%3E%3Cpath%20d%3D%22M0%2012l8-8%208%208-8%208Z%22%2F%3E%3Cpath%20d%3D%22M16%2012l8-8%208%208-8%208Z%22%2F%3E%3Cpath%20d%3D%22M8%204v16M24%204v16%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 32px 30px;
}

.restaurant-site[data-divider="scallop-rule"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2016a8%208%200%200%201%2016%200%208%208%200%200%201%2016%200%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 32px 30px;
}

.restaurant-site[data-divider="azulejo-band"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M16%205a5.5%205.5%200%200%201%200%2011%205.5%205.5%200%200%201%200-11Z%22%2F%3E%3Cpath%20d%3D%22M10.5%2010.5a5.5%205.5%200%200%201%2011%200%205.5%205.5%200%200%201-11%200Z%22%2F%3E%3Cpath%20d%3D%22M0%2012h6M26%2012h6%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 32px 30px;
}

.restaurant-site[data-divider="rope-rule"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%208c6%200%206%208%2012%208s6-8%2012-8%22%2F%3E%3Cpath%20d%3D%22M0%2016c6%200%206-8%2012-8s6%208%2012%208%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 24px 30px;
}

.restaurant-site[data-divider="wave-dash"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2015c5%200%205-6%2010-6s5%206%2010%206%205-6%2010-6%205%206%2010%206%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 40px 30px;
}

.restaurant-site[data-divider="deli-awning"] .restaurant-divider::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0%206H48M6%206v12M18%206v12M30%206v12M42%206v12M0%2012a6%206%200%200%200%2012%200%206%206%200%200%200%2012%200%206%206%200%200%200%2012%200%206%206%200%200%200%2012%200%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 48px 30px;
}

.restaurant-wordmark-mark {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  color: var(--restaurant-accent-secondary);
}

/* design.md §5 — jersey-salumeria runs a type-only wordmark by operator
   decision; its badge monogram carries the favicon alone. */
.restaurant-site[data-profile="jersey-salumeria"] .restaurant-wordmark-mark {
  display: none;
}

.restaurant-header .restaurant-wordmark {
  display: flex;
  gap: .6rem;
  align-items: center;
  text-decoration: none;
}

.restaurant-wordmark-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .1rem;
}

.restaurant-site img {
  display: block;
  max-width: 100%;
}

.restaurant-site a {
  color: inherit;
  text-underline-offset: .22em;
}

.restaurant-site :is(a, summary, button):focus-visible {
  outline: 2px solid var(--restaurant-accent-secondary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--restaurant-background), transparent 30%);
}

.restaurant-site .restaurant-skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  min-height: 44px;
  padding: .65rem 1rem;
  color: var(--restaurant-accent-text);
  background: var(--restaurant-accent);
  border-radius: var(--restaurant-button-radius);
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-180%);
}

.restaurant-skip-link:focus {
  transform: translateY(0);
}

.restaurant-disclosure {
  position: relative;
  z-index: 60;
  color: var(--restaurant-dark-text);
  background: var(--restaurant-dark);
  font-family: var(--restaurant-functional);
  font-size: var(--restaurant-step--1);
}

/* One line, always visible; the full notice is one tap away and needs no
   script. design.md §6.2 — the disclosure never occupies the fold. */
.restaurant-disclosure > summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .3rem 1.25rem;
  cursor: pointer;
  list-style: none;
  text-align: center;
}

.restaurant-disclosure > summary::-webkit-details-marker {
  display: none;
}

.restaurant-disclosure > summary::after {
  flex: none;
  content: "＋";
  opacity: .7;
}

.restaurant-disclosure[open] > summary::after {
  content: "－";
}

.restaurant-disclosure strong {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.restaurant-disclosure > summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restaurant-disclosure p {
  width: var(--restaurant-content);
  margin: 0 auto;
  padding: 0 0 .9rem;
  opacity: .86;
  text-align: center;
}


.restaurant-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  display: grid;
  min-height: 88px;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: 1rem max(1.25rem, calc((100vw - 80rem) / 2));
  border-bottom: 1px solid var(--restaurant-border);
  background: color-mix(in srgb, var(--restaurant-background), transparent 3%);
}

.restaurant-wordmark {
  /* Layout is set by the .restaurant-header rule above; this carries the
     typography only. */
  min-height: 44px;
  justify-self: start;
  font-family: var(--restaurant-display);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: .09em;
  line-height: 1.05;
  text-decoration: none;
  text-transform: uppercase;
}

.restaurant-wordmark small {
  margin-top: .45rem;
  color: var(--restaurant-muted);
  font-family: var(--restaurant-functional);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .11em;
}

/* A tenant logo replaces the motif-and-wordmark lockup. The header keeps its
   88px / 72px height, which the hero offset depends on, so the logo is sized to
   what is left inside a tighter padding rather than the header growing to fit. */
.restaurant-header:has(.restaurant-wordmark--logo) {
  padding-block: .5rem;
}

.restaurant-wordmark--logo {
  min-height: 0;
}

.restaurant-logo {
  display: block;
}

.restaurant-logo img {
  display: block;
  width: auto;
  height: 4.5rem;
  max-width: 100%;
  object-fit: contain;
}

.restaurant-desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.6vw, 1.45rem);
}

.restaurant-desktop-nav a,
.restaurant-header-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .6rem .2rem;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.restaurant-desktop-nav a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--restaurant-transition) ease;
}

.restaurant-desktop-nav a:hover {
  border-color: currentColor;
}

.restaurant-desktop-nav a[aria-current="page"],
.restaurant-mobile-nav a[aria-current="page"] {
	border-color: var(--restaurant-accent);
	color: var(--restaurant-text);
}

.restaurant-site .restaurant-header-cta {
  justify-self: end;
  padding-inline: 1.15rem;
  color: var(--restaurant-accent-text);
  background: var(--restaurant-accent);
  border-radius: var(--restaurant-button-radius);
}

.restaurant-mobile-nav {
  display: none;
}

.restaurant-hero {
  /* Height lives with the home-route rule further down; a hero is only ever
     emitted on that route, so declaring it here as well is unreachable. */
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  color: var(--restaurant-dark-text);
  background: var(--restaurant-dark);
}

.restaurant-hero-media,
.restaurant-hero-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.restaurant-hero-overlay {
  --restaurant-scrim-text: calc(var(--restaurant-scrim) * .92);

  z-index: -1;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 100%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 82%), transparent) 30%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 52%), transparent) 56%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 20%), transparent) 78%,
      transparent 95%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 46%), transparent) 0%,
      transparent 26%
    );
}

/* The wash tracks where the copy actually sits, which the layout decides. */
.restaurant-site[data-layout="editorial"] .restaurant-hero-overlay,
.restaurant-site[data-layout="contemporary"] .restaurant-hero-overlay,
.restaurant-site[data-layout="rustic"] .restaurant-hero-overlay,
.restaurant-site[data-layout="neighborhood"] .restaurant-hero-overlay,
.restaurant-site[data-layout="minimal"] .restaurant-hero-overlay {
  background-image:
    radial-gradient(
      118% 104% at 8% 78%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 100%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 66%), transparent) 30%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 34%), transparent) 52%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 12%), transparent) 72%,
      transparent 92%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 92%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 46%), transparent) 48%,
      transparent 90%
    );
}

.restaurant-site[data-layout="classic"] .restaurant-hero-overlay,
.restaurant-site[data-layout="luxury"] .restaurant-hero-overlay {
  background-image:
    radial-gradient(
      120% 90% at 50% 82%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 100%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim-text) * 54%), transparent) 46%,
      transparent 78%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 88%), transparent) 0%,
      transparent 72%
    );
}

.restaurant-hero-picture,
.restaurant-hero-picture img {
  width: 100%;
  height: 100%;
}

.restaurant-hero-picture img {
  object-fit: cover;
  filter: var(--restaurant-photo-filter);
}

/* On a light hero the ink is --restaurant-dark and the veil is
   --restaurant-dark-text. Those two are the dark band and its type, so every
   profile guarantees they contrast — including the dark moods, whose
   --restaurant-text is itself a pale cream and would vanish here. */
.restaurant-hero[data-hero-tone="light"] {
  color: var(--restaurant-dark);
  background: var(--restaurant-dark-text);
}

.restaurant-hero[data-hero-tone="light"] .restaurant-hero-overlay,
.restaurant-site[data-layout] .restaurant-hero[data-hero-tone="light"] .restaurant-hero-overlay {
  background-image:
    radial-gradient(
      118% 104% at 8% 78%,
      color-mix(in srgb, var(--restaurant-dark-text) 66%, transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark-text) 44%, transparent) 30%,
      color-mix(in srgb, var(--restaurant-dark-text) 22%, transparent) 52%,
      color-mix(in srgb, var(--restaurant-dark-text) 8%, transparent) 72%,
      transparent 92%
    );
}

.restaurant-hero[data-hero-tone="light"] .restaurant-eyebrow {
  color: var(--restaurant-accent);
}

.restaurant-hero[data-hero-tone="light"] .restaurant-hero-body {
  color: color-mix(in srgb, var(--restaurant-dark), transparent 12%);
}

.restaurant-hero[data-hero-tone="light"] .restaurant-text-link {
  color: var(--restaurant-dark);
  border-bottom-color: var(--restaurant-accent);
}

.restaurant-hero[data-hero-tone="light"] .restaurant-service-chip {
  border-color: color-mix(in srgb, var(--restaurant-dark), transparent 72%);
  color: var(--restaurant-dark);
}

.restaurant-hero-content {
  position: relative;
  z-index: 1;
  width: var(--restaurant-content);
  align-self: end;
  /* Inline only: `margin: auto` also sets margin-block, which overrides
     align-self and lifts the copy off the bottom of the hero. */
  margin-inline: auto;
  padding: clamp(6rem, 12vw, 11rem) 0 clamp(5rem, 9vw, 8rem);
}

/* design.md §4 — the editorial face carries long-form prose. */
.restaurant-section-copy p,
.restaurant-page-intro > p {
  font-family: var(--restaurant-editorial);
}

/* design.md §6.1 — the hero's last line answers "when are they open" without a
   clock, because public releases carry no JavaScript. */
.restaurant-service-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 1.25rem 0 0;
  padding: .45rem .95rem;
  border: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 74%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 8%);
  font-family: var(--restaurant-functional);
  font-size: var(--restaurant-step--1);
  letter-spacing: .02em;
}

.restaurant-service-chip > span {
  width: .5rem;
  height: .5rem;
  flex: none;
  border-radius: 50%;
  background: var(--restaurant-accent-secondary);
}

/* design.md §7 — the three questions, one tap each, directly under the hero. */
.restaurant-quick-actions {
  display: grid;
  width: var(--restaurant-content);
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border: 1px solid var(--restaurant-border);
  border-radius: var(--restaurant-card-radius);
  background: var(--restaurant-surface);
  transform: translateY(-2.25rem);
}

.restaurant-quick-actions > a {
  display: flex;
  min-height: 5.5rem;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 1.4rem 1.6rem;
  border-right: 1px solid var(--restaurant-border);
  text-decoration: none;
  transition: background var(--restaurant-transition) ease;
}

.restaurant-quick-actions > a:last-child {
  border-right: 0;
}

.restaurant-quick-actions > a:hover {
  background: color-mix(in srgb, var(--restaurant-accent), transparent 94%);
}

.restaurant-quick-actions strong {
  font-family: var(--restaurant-functional);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.restaurant-quick-actions span {
  overflow: hidden;
  color: var(--restaurant-muted);
  font-size: var(--restaurant-step--1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restaurant-hero-body {
  font-family: var(--restaurant-editorial);
}

.restaurant-section-copy p {
  max-width: var(--restaurant-prose);
}

.restaurant-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--restaurant-functional);
  color: var(--restaurant-accent-secondary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Over photography the eyebrow must stay legible whatever the frame contains,
   so it keeps the dark-band text colour rather than mixing toward the accent. */
.restaurant-hero .restaurant-eyebrow {
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 12%);
}

.restaurant-hero h1 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-5);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.05;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}

.restaurant-hero[data-headline-size="medium"] h1 {
  max-width: 26ch;
  font-size: clamp(2.3rem, 1.55rem + 3.1vw, 4.1rem);
}

.restaurant-hero[data-headline-size="long"] h1 {
  max-width: 30ch;
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.4rem);
}

.restaurant-site[data-layout="editorial"] .restaurant-hero-content {
  margin-left: max(1.25rem, calc((100vw - 80rem) / 2));
}

.restaurant-site[data-layout="contemporary"] .restaurant-hero h1 {
  max-width: 10ch;
}

.restaurant-site[data-layout="contemporary"] .restaurant-hero-content::before {
  display: block;
  width: 4.5rem;
  height: 2px;
  margin-bottom: 1.6rem;
  background: var(--restaurant-accent-secondary);
  content: "";
}

.restaurant-site[data-layout="classic"] .restaurant-hero-content {
  text-align: center;
}

.restaurant-site[data-layout="classic"] .restaurant-hero h1,
.restaurant-site[data-layout="classic"] .restaurant-hero-body {
  margin-right: auto;
  margin-left: auto;
}

.restaurant-site[data-layout="classic"] .restaurant-hero .restaurant-actions {
  justify-content: center;
}

.restaurant-hero-body {
  max-width: 34rem;
  margin: 1.15rem 0 0;
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 12%);
  font-size: var(--restaurant-step-1);
  line-height: 1.6;
}

.restaurant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.3rem;
  margin-top: 1.75rem;
}

.restaurant-button,
.restaurant-text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.restaurant-site .restaurant-button {
  padding: .75rem 1.25rem;
  color: var(--restaurant-accent-text);
  background: var(--restaurant-accent);
  border: 1px solid var(--restaurant-accent);
  border-radius: var(--restaurant-button-radius);
  transition: filter var(--restaurant-transition) ease, transform var(--restaurant-transition) ease;
}

.restaurant-hero .restaurant-button {
  min-height: 48px;
  padding: .85rem 1.4rem;
}

.restaurant-button:hover {
  filter: brightness(.9);
  transform: translateY(-1px);
}

.restaurant-text-link {
  border-bottom: 1px solid currentColor;
}

.restaurant-hero .restaurant-text-link {
  padding: 0 0 .35rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 55%);
  background: none;
  color: inherit;
}

.restaurant-hero .restaurant-text-link:hover {
  border-bottom-color: currentcolor;
}


.restaurant-hero--editorial .restaurant-hero-overlay {
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 100%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 76%), transparent) 34%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 40%), transparent) 62%,
      transparent 90%
    ),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 52%), transparent) 0%,
      transparent 54%
    );
}

.restaurant-hero--fullscreen .restaurant-hero-overlay,
.restaurant-hero--stacked .restaurant-hero-overlay {
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 100%), transparent) 0%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 70%), transparent) 40%,
      color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 30%), transparent) 70%,
      transparent 94%
    );
}

.restaurant-hero--split .restaurant-hero-media {
  inset: 0;
  mask-image: linear-gradient(
    to right,
    transparent 4%,
    color-mix(in srgb, #000 32%, transparent) 26%,
    color-mix(in srgb, #000 78%, transparent) 42%,
    #000 56%
  );
}

.restaurant-hero--split .restaurant-hero-content {
  padding-right: 48%;
}

.restaurant-hero--split .restaurant-hero-overlay {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 100%), transparent) 0%,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 58%), transparent) 46%,
    transparent 76%
  );
}

.restaurant-hero--framed .restaurant-hero-media {
  inset: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  border-radius: var(--restaurant-image-radius);
}

.restaurant-hero--framed .restaurant-hero-overlay {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 92%), transparent) 0%,
    transparent 58%
  );
}

/* The quietest treatment: the photograph runs full-bleed and slightly desaturated,
   so the restraint comes from the grade and the light rather than from a crop.
   Clipping the media to a fraction of the frame left a hard horizontal edge with
   a band of flat --restaurant-dark above it. */
.restaurant-hero--minimal .restaurant-hero-media {
  inset: 0;
  filter: saturate(.93);
}

.restaurant-hero--minimal .restaurant-hero-overlay {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 86%), transparent) 0%,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 46%), transparent) 40%,
    color-mix(in srgb, var(--restaurant-dark) calc(var(--restaurant-scrim) * 14%), transparent) 68%,
    transparent 90%
  );
}

.restaurant-hero--no-image {
  background-image:
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--restaurant-accent-secondary), transparent 82%), transparent 32%),
    linear-gradient(135deg, var(--restaurant-dark), color-mix(in srgb, var(--restaurant-dark), var(--restaurant-accent) 18%));
}

.restaurant-section {
  position: relative;
  z-index: 1;
  width: var(--restaurant-content);
  margin: 0 auto;
  padding: var(--restaurant-section-space) 0;
}

.restaurant-section h2,
.restaurant-section h1,
.restaurant-page-intro h1 {
  margin: 0;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-3);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}

.restaurant-section p,
.restaurant-page-intro > p {
  color: var(--restaurant-muted);
}

.restaurant-section-copy {
  max-width: 45rem;
}

.restaurant-section-copy > p:not(.restaurant-eyebrow) {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  line-height: 1.82;
}

.restaurant-section-copy :is(h1, h2) {
  margin-bottom: 1.8rem;
}

/* A single-section page has no page-intro above it (see PageData.SectionOwnsHeading),
   so the section itself opens the page and carries the intro's top spacing. */
.restaurant-section-copy h1 {
  padding-top: clamp(1rem, 3vw, 3rem);
}

.restaurant-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.restaurant-section-heading > div {
  max-width: 47rem;
}

.restaurant-section-heading p:not(.restaurant-eyebrow) {
  max-width: 42rem;
}

.restaurant-introduction {
  display: grid;
  place-items: center;
  text-align: center;
}

.restaurant-introduction .restaurant-section-copy {
  max-width: 64rem;
}

.restaurant-site[data-layout="editorial"] .restaurant-introduction {
  place-items: start;
  text-align: left;
}

.restaurant-site[data-layout="editorial"] .restaurant-introduction .restaurant-section-copy {
  max-width: 70rem;
}

.restaurant-site[data-layout="editorial"] .restaurant-introduction h2 {
	max-width: 13ch;
}

.restaurant-section:not(.restaurant-service):not(.restaurant-menu-preview):not(.restaurant-story--immersive) .restaurant-eyebrow,
.restaurant-page-intro .restaurant-eyebrow {
	color: color-mix(in srgb, var(--restaurant-text) 72%, var(--restaurant-accent-secondary));
}

.restaurant-introduction::before {
	display: block;
	width: 4rem;
	height: 2px;
	margin-bottom: 2rem;
	background: var(--restaurant-accent);
	content: "";
}

.restaurant-introduction--band {
	width: 100%;
	max-width: none;
	place-items: start;
	padding-right: max(1.25rem, calc((100vw - 80rem) / 2));
	padding-left: max(1.25rem, calc((100vw - 80rem) / 2));
	border-block: 1px solid var(--restaurant-border);
	background: color-mix(in srgb, var(--restaurant-surface), var(--restaurant-background) 38%);
	text-align: left;
}

.restaurant-introduction--split {
	place-items: start;
	text-align: left;
}

.restaurant-introduction--split .restaurant-section-copy {
	display: grid;
	max-width: none;
	grid-template-columns: minmax(16rem, .86fr) minmax(20rem, 1.14fr);
	column-gap: clamp(3rem, 8vw, 8rem);
}

.restaurant-introduction--split .restaurant-section-copy :is(.restaurant-eyebrow, h2) {
	grid-column: 1;
}

.restaurant-introduction--split .restaurant-section-copy > :not(.restaurant-eyebrow):not(h2) {
	grid-column: 2;
}

.restaurant-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .95fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.restaurant-section-picture,
.restaurant-section-picture img {
  width: 100%;
  height: 100%;
}

.restaurant-section-picture {
  overflow: hidden;
  border-radius: var(--restaurant-image-radius);
}

.restaurant-section-picture img {
  min-height: 28rem;
  max-height: 44rem;
  object-fit: cover;
  filter: var(--restaurant-photo-filter);
}

/* The image side follows the declared variant, not the section's position among
   its siblings: those siblings include presentational dividers, so a layout
   change elsewhere on the page used to mirror this one. `editorial-left` keeps
   DOM order (image first); every other variant places the image second. */
.restaurant-story:not(.restaurant-story--editorial-left) .restaurant-section-picture {
	order: 2;
}

.restaurant-story {
	isolation: isolate;
}

.restaurant-story::before {
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	border-block: 1px solid var(--restaurant-border);
	background: color-mix(in srgb, var(--restaurant-surface), var(--restaurant-background) 45%);
	content: "";
	pointer-events: none;
	transform: translateX(-50%);
}

.restaurant-story--full-image,
.restaurant-story--immersive {
	width: 100%;
	max-width: none;
	padding-right: max(1.25rem, calc((100vw - 80rem) / 2));
	padding-left: max(1.25rem, calc((100vw - 80rem) / 2));
}

.restaurant-story--immersive {
	color: var(--restaurant-dark-text);
	background: var(--restaurant-dark);
}

.restaurant-story--immersive::before {
	display: none;
}

.restaurant-story--immersive .restaurant-section-copy > p:not(.restaurant-eyebrow) {
	color: color-mix(in srgb, var(--restaurant-dark-text), transparent 18%);
}

.restaurant-story--immersive .restaurant-eyebrow {
	color: color-mix(in srgb, var(--restaurant-dark-text), var(--restaurant-accent-secondary) 38%);
}

.restaurant-service {
  width: 100%;
  max-width: none;
  padding-right: max(1.25rem, calc((100vw - 80rem) / 2));
  padding-left: max(1.25rem, calc((100vw - 80rem) / 2));
  color: var(--restaurant-dark-text);
  background: var(--restaurant-dark);
}

.restaurant-service .restaurant-section-copy > p {
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 18%);
}

.restaurant-service .restaurant-section-copy > p.restaurant-eyebrow {
	color: color-mix(in srgb, var(--restaurant-dark-text), var(--restaurant-accent-secondary) 38%);
}

.restaurant-service {
	--restaurant-section-space: clamp(4rem, 6vw, 6.5rem);
}

.restaurant-service--restrained {
	color: var(--restaurant-text);
	border-block: 1px solid var(--restaurant-border);
	background: color-mix(in srgb, var(--restaurant-surface), var(--restaurant-background) 36%);
}

.restaurant-service--restrained .restaurant-section-copy > p:not(.restaurant-eyebrow) {
	color: var(--restaurant-muted);
}

.restaurant-service--restrained .restaurant-section-copy > p.restaurant-eyebrow {
	color: color-mix(in srgb, var(--restaurant-text) 72%, var(--restaurant-accent-secondary));
}

.restaurant-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.restaurant-featured-grid .restaurant-menu-item {
  display: block;
  padding: 0;
  overflow: hidden;
}

/* The child combinator is load-bearing. `.restaurant-menu-item > .restaurant-picture img`
   further down sets height: 100% for menu thumbnails at the same specificity as the
   plain descendant form of this rule, and being later it won: the photograph took the
   whole card and pushed the dish name and price out of it, where overflow: hidden cut
   them off. Every featured card on every site shipped as an unlabelled photograph. */
.restaurant-featured-grid .restaurant-menu-item > .restaurant-picture,
.restaurant-featured-grid .restaurant-menu-item > .restaurant-picture img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: .9;
  object-fit: cover;
}

.restaurant-featured-grid .restaurant-menu-item-copy {
  padding: 1.2rem;
}

.restaurant-menu-preview {
	--restaurant-section-space: clamp(4rem, 6vw, 6.5rem);
	width: 100%;
  max-width: none;
  padding-right: max(1.25rem, calc((100vw - 80rem) / 2));
  padding-left: max(1.25rem, calc((100vw - 80rem) / 2));
  color: var(--restaurant-dark-text);
  background: var(--restaurant-dark);
}

.restaurant-menu-preview :is(h2, h3, h4, a) {
  color: var(--restaurant-dark-text);
}

.restaurant-menu-preview p {
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 24%);
}

.restaurant-menu-preview .restaurant-eyebrow {
  color: color-mix(in srgb, var(--restaurant-dark-text), var(--restaurant-accent-secondary) 35%);
}

.restaurant-menu-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 7rem);
}

.restaurant-menu-preview-grid h3 {
  margin: 0 0 1.25rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 72%);
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-2);
  font-weight: 500;
}

.restaurant-menu-preview-grid article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 84%);
}

.restaurant-menu-preview-grid article.restaurant-menu-preview-item--detailed-price {
	grid-template-columns: minmax(0, 1fr);
}

.restaurant-menu-preview-price--detail {
	max-width: 38rem;
	color: color-mix(in srgb, var(--restaurant-dark-text), transparent 22%);
	font-size: .78rem;
	line-height: 1.5;
}

.restaurant-menu-preview--minimal-list .restaurant-menu-preview-price--detail {
	color: var(--restaurant-muted);
}

.restaurant-menu-preview-grid h4 {
  margin: 0;
  font-size: 1rem;
}

.restaurant-menu-preview-grid article p {
	margin: .3rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
}

.restaurant-menu-preview--cards .restaurant-menu-preview-grid {
	gap: clamp(1rem, 2vw, 1.75rem);
}

.restaurant-menu-preview--cards .restaurant-menu-preview-grid > section {
	padding: clamp(1.4rem, 3vw, 2.3rem);
	border: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 80%);
	border-radius: var(--restaurant-card-radius);
	background: color-mix(in srgb, var(--restaurant-dark-text), transparent 95%);
}

.restaurant-menu-preview--editorial .restaurant-menu-preview-grid {
	grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
}

.restaurant-menu-preview--minimal-list {
	color: var(--restaurant-text);
	border-block: 1px solid var(--restaurant-border);
	background: color-mix(in srgb, var(--restaurant-surface), var(--restaurant-background) 52%);
}

.restaurant-menu-preview--minimal-list :is(h2, h3, h4, a) {
	color: var(--restaurant-text);
}

.restaurant-menu-preview--minimal-list p {
	color: var(--restaurant-muted);
}

.restaurant-menu-preview--minimal-list .restaurant-eyebrow {
	color: color-mix(in srgb, var(--restaurant-text) 72%, var(--restaurant-accent-secondary));
}

.restaurant-menu-preview--minimal-list .restaurant-menu-preview-grid h3,
.restaurant-menu-preview--minimal-list .restaurant-menu-preview-grid article {
	border-color: var(--restaurant-border);
}

.restaurant-gallery {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-auto-rows: 15rem;
  gap: 1rem;
}

.restaurant-gallery figure,
.restaurant-gallery-page figure {
  min-width: 0;
  margin: 0;
}

.restaurant-gallery figure:first-child {
  grid-row: span 2;
}

.restaurant-gallery figure:nth-child(3) {
  grid-row: span 2;
}

.restaurant-gallery figure:nth-child(4) {
	grid-column: span 2;
}

/* Exactly four: the fourth drops into the cell under the second instead of
   spanning, which would leave that cell and the bottom-right corner empty. */
.restaurant-gallery figure:nth-child(4):last-child {
	grid-column: auto;
}

.restaurant-gallery figure:only-child {
	grid-column: 1 / -1;
	grid-row: span 2;
}

/* Exactly three: the second figure rises to full height too, so the band is three
   tall pictures side by side instead of a short one with an empty cell below it. */
.restaurant-gallery figure:nth-child(2):nth-last-child(2) {
	grid-row: span 2;
}

.restaurant-gallery figure:first-child:nth-last-child(2),
.restaurant-gallery figure:first-child:nth-last-child(2) ~ figure {
	grid-column: auto;
	grid-row: span 2;
}

.restaurant-gallery .restaurant-section-picture,
.restaurant-gallery .restaurant-section-picture img {
  height: 100%;
}

.restaurant-gallery .restaurant-section-picture img {
  min-height: 0;
}

.restaurant-location {
	display: grid;
  grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr);
  align-items: center;
	gap: clamp(2.5rem, 7vw, 7rem);
}

.restaurant-location--text-only {
	grid-template-columns: minmax(0, 46rem);
}

.restaurant-location--minimal.restaurant-location--text-only {
	justify-content: center;
	text-align: center;
}

.restaurant-location--minimal.restaurant-location--text-only :is(.restaurant-hours, .restaurant-fact-note) {
	margin-right: auto;
	margin-left: auto;
}

.restaurant-location--minimal.restaurant-location--text-only .restaurant-actions {
	justify-content: center;
}

.restaurant-location--band {
	width: 100%;
	max-width: none;
	padding-right: max(1.25rem, calc((100vw - 80rem) / 2));
	padding-left: max(1.25rem, calc((100vw - 80rem) / 2));
	border-block: 1px solid var(--restaurant-border);
	background: color-mix(in srgb, var(--restaurant-surface), var(--restaurant-background) 42%);
}

.restaurant-location--map-led::after {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 2vw;
	width: min(34vw, 30rem);
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--restaurant-accent-secondary), transparent 76%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
}

.restaurant-location address {
  display: grid;
  margin: 1.5rem 0;
  font-style: normal;
}

.restaurant-hours {
  max-width: 34rem;
  margin: 2rem 0;
  border-top: 1px solid var(--restaurant-border);
}

.restaurant-hours > div {
  display: grid;
  grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--restaurant-border);
}

.restaurant-hours dt {
  font-weight: 700;
}

.restaurant-hours dd {
  margin: 0;
  color: var(--restaurant-muted);
  text-align: right;
}

.restaurant-fact-note {
  max-width: 38rem;
  font-size: .875rem;
}

.restaurant-page-intro {
  width: var(--restaurant-content);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 6rem);
}

.restaurant-page-intro > p:not(.restaurant-eyebrow) {
  max-width: 48rem;
  margin-top: 1.5rem;
  font-size: 1.05rem;
}

.restaurant-menu-index {
  position: sticky;
  z-index: 35;
  /* Sit below the sticky site header, not behind it. The header is 88px here,
     72px at or below 760px (the override lives in that media query). */
  top: 88px;
  display: flex;
  width: var(--restaurant-content);
  margin: 0 auto var(--restaurant-section-space);
  overflow-x: auto;
  border-top: 1px solid var(--restaurant-border);
  border-bottom: 1px solid var(--restaurant-border);
  background: color-mix(in srgb, var(--restaurant-background), transparent 3%);
  scrollbar-width: thin;
}

.restaurant-menu-index a {
  display: inline-flex;
  min-height: 48px;
  flex: none;
  align-items: center;
  padding: .65rem 1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.restaurant-full-menus {
  display: grid;
  width: var(--restaurant-content);
  gap: var(--restaurant-section-space);
  margin: 0 auto;
  padding-bottom: var(--restaurant-section-space);
}

.restaurant-full-menu {
  /* Jump-link landings clear the sticky header and menu strip. */
  scroll-margin-top: calc(88px + 4rem);
}

.restaurant-full-menu > header {
  max-width: 48rem;
  margin-bottom: 3rem;
}

.restaurant-full-menu > header h2 {
  margin: 0;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-4);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

.restaurant-full-menu > header > p {
  color: var(--restaurant-muted);
}

.restaurant-menu-availability,
.restaurant-page-intro > .restaurant-menu-availability {
  font-size: .875rem;
}

.restaurant-menu-availability strong {
  margin-right: .5rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.restaurant-menu-category {
  display: grid;
  grid-template-columns: minmax(11rem, .25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: 2.6rem 0;
  border-top: 1px solid var(--restaurant-border);
  /* Jump-link landings clear the sticky header and section strip. */
  scroll-margin-top: calc(var(--restaurant-hero-header-height) + 4rem);
  /* No content-visibility here: these sections are anchor targets now, and a
     skipped estimate that disagrees with the rendered height makes a far jump
     clamp to the page bottom and miss (measured on garlic-rose-bistro: the
     page shrank 2.9K px after the jump and the target landed 558px above the
     viewport). Per-item lazy images still defer the fetches. */
}

.restaurant-menu-category > header h2,
.restaurant-menu-category > header h3 {
  margin: 0;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-2);
  font-weight: 600;
  line-height: 1.1;
}

.restaurant-menu-category > header p {
  color: var(--restaurant-muted);
  font-size: .875rem;
}

.restaurant-menu-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.restaurant-menu-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--restaurant-border);
  border-radius: var(--restaurant-card-radius);
  background: var(--restaurant-surface);
}

.restaurant-menu-item--text-only {
  grid-template-columns: 1fr;
}

.restaurant-menu-item > .restaurant-picture,
.restaurant-menu-item > .restaurant-picture img {
  width: 100%;
  height: 100%;
}

.restaurant-menu-item > .restaurant-picture img {
  min-height: 8.75rem;
  object-fit: cover;
  filter: var(--restaurant-photo-filter);
}

.restaurant-menu-item-copy {
  min-width: 0;
  padding: 1rem;
}

.restaurant-menu-item-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: start;
}

.restaurant-menu-item-heading--detailed-price {
	grid-template-columns: minmax(0, 1fr);
}

.restaurant-menu-item h3,
.restaurant-menu-item h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.restaurant-menu-price {
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.restaurant-menu-price--detail {
	max-width: 38rem;
	color: var(--restaurant-muted);
	font-size: .8rem;
	font-weight: 650;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
}

.restaurant-menu-item-copy > p {
  margin: .45rem 0 0;
  color: var(--restaurant-muted);
  font-size: .8125rem;
  line-height: 1.55;
}

.restaurant-dietary {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
}

.restaurant-dietary li {
  padding: .2rem .45rem;
  border: 1px solid var(--restaurant-border);
  border-radius: 999px;
  color: var(--restaurant-muted);
  font-size: .75rem;
  font-weight: 700;
}

.restaurant-gallery-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.restaurant-gallery-page figure:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.restaurant-gallery-page .restaurant-section-picture img {
  aspect-ratio: 1.15;
}

.restaurant-gallery-page figure:nth-child(3n + 1) img {
  aspect-ratio: 1.8;
}

.restaurant-gallery-page figcaption {
  margin-top: .55rem;
  color: var(--restaurant-muted);
  font-size: .875rem;
}

.restaurant-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--restaurant-border);
  border-left: 1px solid var(--restaurant-border);
}

.restaurant-contact-grid > div {
  min-height: 13rem;
  padding: 2rem;
  border-right: 1px solid var(--restaurant-border);
  border-bottom: 1px solid var(--restaurant-border);
  background: var(--restaurant-surface);
}

.restaurant-contact-grid h2 {
  margin: 0 0 1rem;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-2);
}

.restaurant-contact-grid a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

.restaurant-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(16rem, 1.4fr) repeat(4, minmax(8rem, .65fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 7vw, 7rem) max(1.25rem, calc((100vw - 80rem) / 2)) 2rem;
  color: var(--restaurant-dark-text);
  background: var(--restaurant-dark);
}

.restaurant-footer-lead > a {
  display: flex;
  min-height: 44px;
  align-items: center;
  font-family: var(--restaurant-display);
  font-size: var(--restaurant-step-3);
  line-height: 1;
  text-decoration: none;
}

.restaurant-footer-lead p {
  max-width: 30rem;
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 28%);
}

.restaurant-footer h2 {
  margin: 0 0 1rem;
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 40%);
  font-family: var(--restaurant-functional);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.restaurant-footer > div:not(.restaurant-footer-lead, .restaurant-footer-meta) > :is(p, a) {
  display: flex;
  align-items: center;
  margin: 0;
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 17%);
  font-size: .875rem;
}

.restaurant-footer > div:not(.restaurant-footer-lead, .restaurant-footer-meta) > p {
  min-height: 32px;
}

.restaurant-footer > div:not(.restaurant-footer-lead, .restaurant-footer-meta) > a {
  min-height: 44px;
}

.restaurant-footer-meta {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--restaurant-dark-text), transparent 80%);
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 40%);
  font-size: .8rem;
}

.restaurant-footer-meta a {
  min-height: 44px;
  align-content: center;
}

.restaurant-action-bar {
  display: none;
}





.restaurant-site[data-route="home"] {
  --restaurant-hero-header-height: 88px;
}

.restaurant-site[data-route="home"][data-preview="true"] {
  --restaurant-hero-disclosure-space: 44px;
}

.restaurant-site[data-route="home"][data-navigation="centered-logo"] {
  --restaurant-hero-header-height: 150px;
}

.restaurant-site[data-route="home"][data-navigation="compact"] {
  --restaurant-hero-header-height: 77px;
}

.restaurant-site[data-route="home"] > .restaurant-header {
  color: var(--restaurant-dark-text);
  border-bottom-color: color-mix(in srgb, var(--restaurant-dark-text), transparent 82%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--restaurant-dark), transparent 5%) 0%, color-mix(in srgb, var(--restaurant-dark), transparent 32%) 72%, transparent 100%);
}

.restaurant-site[data-route="home"] > .restaurant-header .restaurant-wordmark small {
  color: color-mix(in srgb, var(--restaurant-dark-text), transparent 24%);
}

.restaurant-site[data-route="home"] > .restaurant-header .restaurant-desktop-nav a[aria-current="page"] {
  border-color: var(--restaurant-accent-secondary);
  color: inherit;
}

.restaurant-site[data-route="home"] > .restaurant-header .restaurant-mobile-nav summary {
  border-color: color-mix(in srgb, var(--restaurant-dark-text), transparent 58%);
  background: color-mix(in srgb, var(--restaurant-dark), transparent 34%);
}

.restaurant-site[data-route="home"] .restaurant-hero {
	min-height: min(760px, max(42rem, calc(100svh - var(--restaurant-hero-disclosure-space) - var(--restaurant-hero-action-space))));
	min-height: min(760px, max(42rem, calc(100dvh - var(--restaurant-hero-disclosure-space) - var(--restaurant-hero-action-space))));
	margin-top: calc(var(--restaurant-hero-header-height) * -1);
}




/* A section with no image of its own becomes a narrow editorial column rather
   than half a two-column grid with a hole in it. design.md §6, §8. */
.restaurant-split:not(:has(.restaurant-section-picture)) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.restaurant-split:not(:has(.restaurant-section-picture)) .restaurant-section-copy {
  max-width: calc(var(--restaurant-prose) + 6rem);
  text-align: center;
}

.restaurant-split:not(:has(.restaurant-section-picture)) .restaurant-section-copy p {
  max-width: none;
}

.restaurant-split:not(:has(.restaurant-section-picture)) .restaurant-section-copy :is(h1, h2) {
  text-wrap: balance;
}

.restaurant-site[data-image-mode="editorial-sparse"] .restaurant-split:not(.restaurant-story--has-image) {
	grid-template-columns: minmax(0, 1fr);
}

.restaurant-site[data-image-mode="editorial-sparse"] :is(.restaurant-story, .restaurant-about) {
	border-top: 0;
	border-bottom: 0;
}

.restaurant-site[data-image-mode="editorial-sparse"] .restaurant-service .restaurant-section-copy {
  padding-left: clamp(0rem, 7vw, 7rem);
}

.restaurant-site[data-image-mode="editorial-sparse"] .restaurant-gallery,
.restaurant-site[data-image-mode="editorial-sparse"] .restaurant-featured {
  display: none;
}

.restaurant-site[data-navigation="centered-logo"] .restaurant-header {
  grid-template-rows: auto auto;
}

.restaurant-site[data-navigation="centered-logo"] .restaurant-wordmark {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}

.restaurant-site[data-navigation="centered-logo"] .restaurant-desktop-nav {
  grid-column: 1 / -1;
  grid-row: 2;
}

.restaurant-site[data-navigation="centered-logo"] .restaurant-header-cta {
  grid-column: 3;
  grid-row: 1;
}

.restaurant-site[data-navigation="compact"] .restaurant-header {
  min-height: 72px;
}

@media (max-width: 1080px) {
  .restaurant-site[data-route="home"][data-navigation] {
    --restaurant-hero-header-height: 88px;
  }

  .restaurant-site[data-route="home"][data-navigation="compact"] {
    --restaurant-hero-header-height: 77px;
  }

  .restaurant-header {
    grid-template-columns: minmax(9rem, 1fr) auto;
  }

  .restaurant-desktop-nav,
  .restaurant-header-cta {
    display: none;
  }

  .restaurant-site[data-navigation="centered-logo"] .restaurant-header {
    grid-template-rows: auto;
  }

  .restaurant-site[data-navigation="centered-logo"] .restaurant-wordmark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .restaurant-site[data-navigation="centered-logo"] .restaurant-mobile-nav {
    grid-column: 2;
    grid-row: 1;
  }

  .restaurant-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .restaurant-mobile-nav {
    position: relative;
    display: block;
    justify-self: end;
  }

  .restaurant-mobile-nav summary {
    display: grid;
    min-width: 112px;
    min-height: 44px;
    place-items: center;
    padding: .65rem .8rem;
    border: 1px solid var(--restaurant-border);
    border-radius: var(--restaurant-button-radius);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .07em;
    list-style: none;
    text-transform: uppercase;
  }

  .restaurant-mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .restaurant-mobile-nav[open] nav {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    display: grid;
    width: min(20rem, calc(100vw - 2rem));
    padding: .65rem;
    border: 1px solid var(--restaurant-border);
    color: var(--restaurant-text);
    background: var(--restaurant-surface);
    box-shadow: 0 1.2rem 2.8rem rgba(18, 21, 19, .16);
  }

  .restaurant-mobile-nav nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: .65rem .8rem;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
  }

  .restaurant-menu-category {
    grid-template-columns: 1fr;
    scroll-margin-top: calc(72px + 4rem);
  }

  .restaurant-full-menu {
    scroll-margin-top: calc(72px + 4rem);
  }

  .restaurant-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .restaurant-footer {
    grid-template-columns: 1.5fr repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .restaurant-hero--split .restaurant-hero-media {
    inset: 0;
  }

  .restaurant-hero--split .restaurant-hero-content {
    padding-right: 0;
  }

	.restaurant-hero--split .restaurant-hero-overlay {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--restaurant-dark), transparent 5%) 0%, color-mix(in srgb, var(--restaurant-dark), transparent 34%) 66%, transparent 100%),
			linear-gradient(0deg, color-mix(in srgb, var(--restaurant-dark), transparent 22%), transparent 62%);
	}

	.restaurant-hero--framed .restaurant-hero-overlay {
		background:
			linear-gradient(90deg, color-mix(in srgb, var(--restaurant-dark), transparent 6%) 0%, color-mix(in srgb, var(--restaurant-dark), transparent 34%) 66%, transparent 100%),
			linear-gradient(0deg, color-mix(in srgb, var(--restaurant-dark), transparent 22%), transparent 62%);
	}
}

@media (max-width: 760px) {
  :root {
    --restaurant-content: min(calc(100% - 1.5rem), 80rem);
  }

  .restaurant-site[data-route="home"][data-navigation] {
    --restaurant-hero-header-height: 72px;
  }

  .restaurant-site {
    font-size: 16px;
  }

	.restaurant-site[data-mobile-actions="enabled"] {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	.restaurant-site[data-route="home"][data-mobile-actions="enabled"] {
		--restaurant-hero-action-space: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .restaurant-site[data-route="home"][data-preview="true"] {
    --restaurant-hero-disclosure-space: 104px;
  }

  .restaurant-disclosure {
    display: grid;
    grid-template-columns: 1fr;
    gap: .15rem;
    text-align: left;
  }

  .restaurant-header {
    min-height: 72px;
    padding: .75rem;
  }

  .restaurant-wordmark {
    max-width: calc(100vw - 9rem);
    overflow-wrap: anywhere;
    font-size: 1rem;
  }

  .restaurant-wordmark small {
    display: none;
  }

  .restaurant-header:has(.restaurant-wordmark--logo) {
    padding-block: .625rem;
  }

  .restaurant-logo img {
    height: 3.25rem;
  }

  .restaurant-hero {
    min-height: 39rem;
  }

  .restaurant-hero-content {
    padding: 5rem 0 6rem;
  }

  .restaurant-hero h1 {
    max-width: 10ch;
  }

  .restaurant-hero-body {
    margin-top: 1rem;
    font-size: .95rem;
    line-height: 1.58;
  }

  .restaurant-hero--framed .restaurant-hero-media {
    inset: 0;
    border-radius: 0;
  }

  /* design.md §6.1 — the stacked variant. On a phone the copy no longer sits over
     the photograph at all: the picture becomes a band across the top, still tucked
     no longer under the translucent header, and the copy follows on the solid dark ground.
     Chosen by a restaurant whose hero photograph has no calm zone in a portrait
     crop, such as a sandwich that fills the frame. Above 760px it is fullscreen. */
  .restaurant-site[data-route="home"] .restaurant-hero--stacked {
    min-height: 0;
    margin-top: 0;
    grid-template-rows: auto auto;
  }

  .restaurant-hero--stacked .restaurant-hero-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: min(34svh, 17rem);
  }

  .restaurant-hero--stacked .restaurant-hero-overlay {
    display: none;
  }

  .restaurant-hero--stacked .restaurant-hero-content {
    align-self: start;
    padding: 1.6rem 0 2.4rem;
  }

  .restaurant-section-heading {
    display: block;
  }

  .restaurant-section-heading > .restaurant-text-link {
    margin-top: 1.25rem;
  }

  .restaurant-split,
  .restaurant-location {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

	/* One column on a phone, so the desktop image side does not apply: the
	   photograph always sits above the copy. */
	.restaurant-story .restaurant-section-picture {
		order: 0;
	}

	.restaurant-introduction--split .restaurant-section-copy {
		display: block;
	}

  .restaurant-site[data-image-mode="editorial-rich"] .restaurant-story .restaurant-section-picture {
    width: calc(100% + .75rem);
    margin-left: -.75rem;
    border-radius: 0;
  }

  .restaurant-site[data-image-mode="editorial-rich"] .restaurant-story .restaurant-section-picture img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .restaurant-section-picture img {
    min-height: 23rem;
    max-height: 34rem;
  }

  .restaurant-featured-grid,
  .restaurant-gallery {
    display: flex;
    width: 100%;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .restaurant-featured-grid .restaurant-menu-item,
  .restaurant-gallery figure {
    width: 82%;
    min-width: 82%;
    flex: none;
    grid-row: auto;
    scroll-snap-align: start;
  }

  .restaurant-gallery .restaurant-section-picture img {
    height: 28rem;
  }

  .restaurant-menu-preview-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .restaurant-menu-index {
    /* Sticky on phones too — a 15-category menu is twenty screens long, and
       the jump strip is the only way across it. It parks below the sticky
       header, which is 72px at this width. */
    position: sticky;
    top: 72px;
  }

  .restaurant-menu-items {
    grid-template-columns: 1fr;
  }

  .restaurant-menu-item {
    grid-template-columns: minmax(7rem, 32vw) minmax(0, 1fr);
  }

  .restaurant-menu-item--text-only {
    grid-template-columns: 1fr;
  }

  .restaurant-menu-item-copy > p,
  .restaurant-menu-category > header p,
  .restaurant-menu-preview-grid article p {
    font-size: .875rem;
  }

  .restaurant-gallery-page {
    grid-template-columns: 1fr;
  }

  .restaurant-gallery-page figure:nth-child(3n + 1) {
    grid-column: auto;
  }

  .restaurant-gallery-page .restaurant-section-picture img,
  .restaurant-gallery-page figure:nth-child(3n + 1) img {
    aspect-ratio: .9;
  }

  .restaurant-contact-grid,
  .restaurant-footer {
    grid-template-columns: 1fr;
  }

  .restaurant-footer-meta {
    display: grid;
  }

	.restaurant-action-bar {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
		min-height: calc(64px + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--restaurant-border);
    color: var(--restaurant-text);
    background: var(--restaurant-surface);
    box-shadow: 0 -.45rem 1.5rem rgba(18, 21, 19, .1);
  }

	.restaurant-action-bar a {
    display: grid;
    min-width: 0;
    min-height: 44px;
    place-items: center;
    padding: .5rem .3rem;
    border-right: 1px solid var(--restaurant-border);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
		text-transform: uppercase;
	}

	.restaurant-action-bar a:last-child {
		border-right: 0;
	}
}

@media (max-width: 430px) {
  /* design.md §6 — 56px on mobile. The hero variants carry their own
     specificity, so they are named here too. */
  .restaurant-button,
  .restaurant-text-link,
  .restaurant-hero .restaurant-button,
  .restaurant-hero .restaurant-text-link {
    min-height: 56px;
  }

  :root {
    --restaurant-content: calc(100% - 1rem);
  }

  .restaurant-page-intro {
    padding-top: 3.5rem;
  }

  /* The fluid scale in design.md §4.2 already handles small screens; this
     override made headings larger on a phone than on a desktop. */
  .restaurant-section h2,
  .restaurant-section h1,
  .restaurant-page-intro h1 {
    font-size: var(--restaurant-step-3);
  }

  .restaurant-menu-category {
    gap: 1.4rem;
    padding: 2rem 0;
  }

  .restaurant-menu-item {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .restaurant-menu-item--text-only {
    grid-template-columns: 1fr;
  }

  .restaurant-menu-item-copy {
    padding: .85rem;
  }

  .restaurant-menu-item-heading {
    display: block;
  }

  .restaurant-menu-price {
    display: inline-block;
    margin-top: .3rem;
  }

  .restaurant-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  /* The editorial hero offset's 1.25rem floor is wider than the 0.5rem gutter
     this query sets on --restaurant-content, so it pushed the copy 4px past
     the right edge; below 430px the column centres like every other layout. */
  .restaurant-site[data-layout="editorial"] .restaurant-hero-content {
    margin-left: auto;
  }

  .restaurant-hero .restaurant-actions {
    width: min(100%, 20rem);
    gap: .65rem;
    margin-top: 1.25rem;
  }

  .restaurant-site[data-layout="classic"] .restaurant-hero .restaurant-actions {
    align-items: stretch;
  }

  .restaurant-hero .restaurant-button,
  .restaurant-hero .restaurant-text-link {
    width: 100%;
  }

  .restaurant-button,
  .restaurant-text-link {
    max-width: 100%;
  }
}

@media (max-width: 340px) {
  .restaurant-site[data-route="home"][data-preview="true"] {
    --restaurant-hero-disclosure-space: 126px;
  }

  .restaurant-hero-body {
    font-size: .9rem;
  }
}

@media (max-width: 340px) {
  .restaurant-menu-item {
    grid-template-columns: 1fr;
  }

  .restaurant-menu-item > .restaurant-picture img {
    max-height: 13rem;
  }

  .restaurant-action-bar a {
    font-size: .7rem;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .restaurant-site *,
  .restaurant-site *::before,
  .restaurant-site *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
	.restaurant-site[data-route] :is(a, summary):focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 3px;
		box-shadow: none;
	}
}

/* Print-only: the menu page carries a hidden header with the shop's name,
   address and phone, revealed by the print block below — a menu printed and
   pinned up must say whose it is. */
.restaurant-print-header {
  display: none;
}

@media print {
  .restaurant-disclosure,
  .restaurant-header,
  .restaurant-action-bar,
  .restaurant-footer,
  .restaurant-menu-index,
  .restaurant-skip-link,
  .restaurant-mobile-nav,
  .restaurant-menu-item > .restaurant-picture {
    display: none !important;
  }

  .restaurant-site {
    color: #111;
    background: #fff;
  }

  .restaurant-print-header {
    display: block;
    width: var(--restaurant-content);
    margin: 0 auto;
    padding-bottom: 8pt;
    border-bottom: 2pt solid #111;
  }

  .restaurant-print-header strong {
    display: block;
    font-family: var(--restaurant-display);
    font-size: 15pt;
    line-height: 1.2;
  }

  .restaurant-print-header span {
    font-size: 8.5pt;
    letter-spacing: .02em;
  }

  .restaurant-page-intro {
    padding-top: 10pt;
    padding-bottom: 6pt;
  }

  .restaurant-menu-category {
    content-visibility: visible;
    /* A category taller than a page must be allowed to split; what holds is
       the item-level rule below, so a category breaks only between items and
       its header is never stranded at the foot of a page. */
    break-inside: auto;
    padding: 14pt 0;
  }

  .restaurant-menu-category > header {
    break-inside: avoid;
    break-after: avoid;
  }

  .restaurant-menu-items {
    display: block;
  }

  /* Photographs are dropped above; what remains is the pin-up list — name
     left, price right on the tabular figures, one item never split. */
  .restaurant-menu-item {
    display: block;
    break-inside: avoid;
    padding: 4pt 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .restaurant-menu-item-copy {
    padding: 0;
  }

  .restaurant-menu-item-heading {
    align-items: baseline;
  }

  .restaurant-menu-item-copy > p {
    margin-top: 2pt;
  }
}

/* ---------------------------------------------------------------------------
   Spectacular pass — modern-CSS progressive enhancement: cross-document view
   transitions, scroll-driven reveals, text-wrap polish, and menu craft. Every
   rule is inert where unsupported, and all motion is gated behind
   prefers-reduced-motion: no-preference.
   --------------------------------------------------------------------------- */

/* 1. Cross-document view transitions — Home -> Menu cross-fades at the house
   220ms instead of flashing white. The header and mobile action bar are named
   (both singletons) so they hold still during the fade. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .restaurant-header {
    view-transition-name: restaurant-site-header;
  }

  .restaurant-action-bar {
    view-transition-name: restaurant-mobile-action-bar;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--restaurant-transition);
  }
}

/* 2. Scroll-driven reveals — design.md §9's 12px rise and fade, once per
   element, without JavaScript. Never on .restaurant-menu-category itself: its
   content-visibility interacts unreliably with view() timelines, so only its
   children animate. No parallax. */
@supports (animation-timeline: view()) {
  @keyframes restaurant-reveal {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .restaurant-section-heading,
    .restaurant-introduction .restaurant-section-copy,
    .restaurant-story .restaurant-section-copy,
    .restaurant-menu-category > header,
    .restaurant-menu-item {
      animation-name: restaurant-reveal;
      animation-timing-function: ease-out;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* Paged media has no scroll position, so an entry range can hold elements at
   opacity 0 — the printed menu must never come out blank. Covers every rise-on-
   scroll target, including any added by later craft passes. */
@media print {
  .restaurant-page-intro,
  .restaurant-section-heading,
  .restaurant-section-copy,
  .restaurant-section-picture,
  .restaurant-gallery figure,
  .restaurant-menu-category > header,
  .restaurant-menu-item,
  .restaurant-full-menu > header,
  .restaurant-contact-grid > div {
    animation: none;
  }
}

/* 3. Typographic polish — balance the remaining display-face headings (the
   hero H1 has it already), pretty-wrap editorial body copy. Both properties
   are ignored where unsupported. */
.restaurant-page-intro h1,
.restaurant-section-copy h1,
.restaurant-section-heading h2,
.restaurant-full-menu > header h2,
.restaurant-menu-category > header h2,
.restaurant-menu-category > header h3,
.restaurant-menu-preview-grid h3,
.restaurant-contact-grid h2 {
  text-wrap: balance;
}

.restaurant-hero-body,
.restaurant-introduction p,
.restaurant-story p,
.restaurant-page-intro > p:not(.restaurant-eyebrow),
.restaurant-menu-item-copy > p {
  text-wrap: pretty;
}

/* 4a. Menu craft — design.md §4: prices set in tabular numerals, enforced at
   the price elements themselves. */
.restaurant-menu-price,
.restaurant-menu-preview-price {
  font-variant-numeric: tabular-nums;
}

/* 4b. Menu craft — hover jewellery for the cards: a faint lift of the surface
   toward the accent-secondary, the border following it, a whisper of image
   scale. Focus-within mirrors the house focus spec: 2px outline, 2px offset. */
.restaurant-menu-item:focus-within {
  outline: 2px solid var(--restaurant-accent-secondary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .restaurant-menu-item {
    transition: border-color var(--restaurant-transition) ease, background-color var(--restaurant-transition) ease;
  }

  .restaurant-menu-item:hover {
    border-color: color-mix(in srgb, var(--restaurant-accent-secondary), var(--restaurant-border) 45%);
    background-color: color-mix(in srgb, var(--restaurant-accent-secondary) 4%, var(--restaurant-surface));
  }

  .restaurant-menu-item > .restaurant-picture img {
    transition: transform var(--restaurant-transition) ease;
  }

  .restaurant-menu-item:hover > .restaurant-picture img {
    transform: scale(1.03);
  }
}

/* 4c. Menu craft — the card grid answers its container, not only the
   viewport. At viewports above 760px the category is never narrower than
   721px, so this 600px threshold — gated to those same viewports — cannot
   alter today's layout; it serves only narrow containers the viewport rules
   do not govern. */
.restaurant-menu-category {
  container-type: inline-size;
  container-name: menu-category;
}

@media (min-width: 761px) {
  @container menu-category (max-width: 600px) {
    .restaurant-menu-items {
      grid-template-columns: 1fr;
    }
  }
}

/* 4d. Menu craft — desktop sticky category headers: in the two-column
   category grid the header holds below the 88px sticky site header while its
   items scroll. align-self: start keeps the header shorter than its grid area
   so the sticky range exists. */
@media (min-width: 1081px) {
  .restaurant-menu-category > header {
    position: sticky;
    top: calc(88px + 1rem);
    align-self: start;
  }
}