/* ==========================================================================
   Anatolia Restaurant: draft one-page site
   Visual language is taken from the printed menu and the logo: ivory paper,
   Iznik tile, navy ink, gold rules and scrollwork, and the tulip medallion,
   with watercolor scenes painted onto the page.
   ========================================================================== */

:root {
  /* Palette */
  --paper: #f9efdc;
  --paper-deep: #f1e2c4;
  --ink: #14284b;
  --ink-soft: #46506a;
  --cobalt: #1d4396;
  --tulip: #a92e28;
  --gold: #a9853a;
  --gold-soft: #c9a961;

  /* Type */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --font-script: "Ephesis", "Snell Roundhand", cursive;

  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 2.9vw, 4rem);

  /* Layout */
  --container: 75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --header-height: 4.75rem;

  --tile: url("../assets/img/patterns/iznik-tile.webp");
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  top: 1rem;
}

.script {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--cobalt);
}

.text-link {
  color: var(--cobalt);
  text-decoration-color: var(--gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.text-link[href^="tel:"] {
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

/* The inner gold hairline echoes the double rules of the printed menu. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 0.9375rem/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--btn-bg), inset 0 0 0 4px var(--gold-soft);
  transition: background-color 160ms ease, color 160ms ease;
}

.btn--solid {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
}

.btn--solid:hover {
  --btn-bg: var(--cobalt);
  border-color: var(--cobalt);
}

.btn--ghost {
  --btn-bg: var(--paper);
}

.btn--ghost:hover {
  --btn-bg: var(--paper-deep);
}

.btn--large {
  min-height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: calc(var(--container) + 2 * var(--gutter));
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__logo img {
  width: auto;
  height: 3.5rem;
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}

.site-nav a {
  padding-block: 0.5rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 0.35em;
}

.site-header__actions {
  display: flex;
  gap: 0.75rem;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [text-start] minmax(0, 32rem) [text-end]
    clamp(2rem, 5vw, 5rem)
    [visual-start] minmax(0, 34rem) [visual-end]
    minmax(var(--gutter), 1fr) [full-end];
  align-items: center;
  min-height: calc(100svh - var(--header-height));
}

.hero__text {
  grid-column: text;
  grid-row: 1;
  padding-block: 3rem;
}

.hero__script {
  font-size: clamp(2rem, 1.6rem + 1vw, 2.625rem);
}

.hero__title {
  margin-top: 0.25rem;
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
}

.hero__lead {
  max-width: 34em;
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

.hero__meta {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  color: var(--ink-soft);
}

.hero__meta strong {
  color: var(--tulip);
  font-weight: 600;
}

.hero__visual {
  grid-column: visual;
  grid-row: 1;
  display: grid;
  justify-items: center;
  padding-block: 2rem;
}

/* The arched window, crowned with the full logo */
.arch {
  display: grid;
  justify-items: center;
  width: min(100%, 21rem);
  margin: 0;
}

.arch__body {
  position: relative;
  width: 100%;
}

.arch__logo {
  width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
}

.arch__shape {
  filter: drop-shadow(0 22px 28px rgb(20 40 75 / 0.28));
}

/* Gold line > paper gap > gold molding > navy reveal > window */
.arch__outline,
.arch__gap,
.arch__frame,
.arch__mat,
.arch__window {
  clip-path: url(#arch-clip);
}

.arch__outline {
  aspect-ratio: 3 / 4;
  padding: 1.5px;
  background: var(--gold);
}

.arch__gap {
  height: 100%;
  padding: 7px;
  background: var(--paper);
}

.arch__frame {
  height: 100%;
  padding: 4px;
  background: linear-gradient(160deg, #ead08a, var(--gold) 45%, #7d5f22);
}

.arch__mat {
  height: 100%;
  padding: 9px;
  background: var(--ink);
}

.arch__window {
  position: relative;
  height: 100%;
  background: var(--paper-deep);
}

/* A soft shade at the top of the window gives the opening some depth. */
.arch__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(20 40 75 / 0.28), transparent 22%);
  pointer-events: none;
}

.arch__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scene captions share one grid cell and cross-fade with the video */
.arch__caption {
  display: grid;
  margin-top: 1rem;
  font-size: 1.625rem;
  text-align: center;
}

.arch__scene {
  grid-area: 1 / 1;
}

.arch__caption.is-cycling .arch__scene {
  opacity: 0;
  transition: opacity 500ms ease;
}

.arch__caption.is-cycling .arch__scene.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .arch__caption.is-cycling .arch__scene {
    transition: none;
  }
}

.arch__toggle {
  position: absolute;
  right: 1.75rem;
  bottom: 1.75rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgb(249 239 220 / 0.6);
  border-radius: 2px;
  background: rgb(20 40 75 / 0.72);
  color: var(--paper);
  font: 500 0.75rem/1.2 var(--font-body);
  cursor: pointer;
}

.arch__toggle:hover {
  background: var(--ink);
}

/* Passport-style seal pressed onto the lower corner of the window */
.stamp {
  position: absolute;
  left: -3.25rem;
  bottom: 2.5rem;
  width: 8rem;
  color: var(--tulip);
  transform: rotate(-10deg);
  filter: drop-shadow(0 8px 12px rgb(10 20 45 / 0.35));
  pointer-events: none;
}

.stamp__disc {
  fill: var(--paper);
}

.stamp > g {
  opacity: 0.92;
}

.stamp__ring {
  font: 600 11px var(--font-body);
  fill: currentColor;
}

.stamp__month {
  font: 30px var(--font-display);
  fill: currentColor;
}

.stamp__year {
  font: 600 13px var(--font-body);
  letter-spacing: 0.2em;
  fill: currentColor;
}

/* One orchestrated load moment: the window opens onto Cappadocia. */
@media (prefers-reduced-motion: no-preference) {
  .arch__shape {
    animation: arch-open 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .arch__logo {
    animation: logo-in 900ms 150ms ease-out both;
  }

  .hero__text > * {
    animation: rise 700ms ease-out both;
  }

  .hero__text > :nth-child(2) { animation-delay: 80ms; }
  .hero__text > :nth-child(3) { animation-delay: 160ms; }
  .hero__text > :nth-child(4) { animation-delay: 240ms; }
  .hero__text > :nth-child(5) { animation-delay: 320ms; }

  .stamp {
    animation: stamp-in 500ms 900ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
  }
}

@keyframes arch-open {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.96);
  }
}

@keyframes logo-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(1.35);
  }
}

/* ---------- Section heads ---------- */

.section-head {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: var(--fs-h2);
}

/* Gold rule with a lozenge, like the dividers on the printed menu */
.section-head h2::after {
  content: "";
  display: block;
  width: 9rem;
  height: 0.875rem;
  margin: 1.25rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 14'%3E%3Cpath d='M0 7h56M88 7h56' stroke='%23c9a961'/%3E%3Ccircle cx='61' cy='7' r='1.6' fill='%23a9853a'/%3E%3Ccircle cx='83' cy='7' r='1.6' fill='%23a9853a'/%3E%3Cpath d='M72 0.5l6.5 6.5-6.5 6.5-6.5-6.5z' fill='%23a9853a'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section-head p {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

/* Watercolor files have pure-white paper, so multiply lets the page color
   through; the feathered mask hides any leftover tone at the image edges. */
.region__scene img,
.visit__scene img,
.menu__landmark img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* ---------- Regions ---------- */

.regions {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section-space) var(--gutter);
}

.region {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.region--flip .region__scene {
  order: 2;
}

.region__scene {
  margin: 0;
  text-align: center;
}

.region__scene figcaption {
  margin-top: -0.5rem;
}

.region__text h3 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  color: var(--ink);
}

.region__text p {
  max-width: 32em;
  margin-top: 1rem;
  color: var(--ink-soft);
}

.plates {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.plates li {
  width: 6.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.25;
  text-align: center;
}

.plates img {
  width: 6.75rem;
  height: 6.75rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 4px var(--gold-soft),
    0 12px 18px -10px rgb(20 40 75 / 0.55);
}

/* ---------- Menu (laid out like the printed menu) ---------- */

.menu {
  --sheet-pad: clamp(0.5rem, 1vw, 0.875rem);
  --card-pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --flourish: clamp(5.5rem, 14vw, 12.5rem);
  padding: var(--section-space) var(--gutter);
  background: var(--paper-deep);
}

.menu__sheet {
  position: relative;
  max-width: 74rem;
  margin-inline: auto;
  padding: var(--sheet-pad) var(--sheet-pad) 0;
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgb(20 40 75 / 0.45);
}

.menu__card {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 5vw, 4rem) var(--card-pad-x) 0;
  background: var(--paper);
  border: 2px solid var(--gold-soft);
  border-bottom: 0;
}

/* Inner hairline: with the outer border, the double gold rule of the printed menu */
.menu__card::before {
  content: "";
  position: absolute;
  inset: 6px 6px 0;
  border: 1px solid color-mix(in srgb, var(--gold-soft) 70%, transparent);
  border-bottom: 0;
  pointer-events: none;
}

/* Gold flourishes in the top corners; the right one is the left one mirrored */
.menu__corner {
  position: absolute;
  top: 14px;
  width: var(--flourish);
  height: var(--flourish);
  color: var(--gold);
  pointer-events: none;
}

.menu__corner--start {
  left: 14px;
}

.menu__corner--end {
  right: 14px;
  transform: scaleX(-1);
}

.menu__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}

.menu__motto {
  justify-self: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.375rem);
  line-height: 1.05;
  color: var(--ink);
  transform: rotate(-7deg);
}

.menu__title {
  text-align: center;
}

.menu__crest {
  width: min(100%, 15rem);
  height: auto;
  margin: 0 auto 0.5rem;
}

.menu__title h2 {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  color: var(--ink);
}

.menu__kicker {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.menu__specialties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.875rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.menu__specialties li {
  padding-inline: 0.9rem;
}

.menu__specialties li + li {
  border-left: 1px solid var(--gold-soft);
}

.menu__note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.menu__landmark {
  margin: 0;
  text-align: center;
}

.menu__landmark figcaption {
  margin-top: -0.75rem;
  font-size: 1.5rem;
}

.menu__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.menu__column:first-child {
  padding-right: clamp(1.5rem, 3.5vw, 3.25rem);
}

.menu__column + .menu__column {
  padding-left: clamp(1.5rem, 3.5vw, 3.25rem);
  border-left: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

.menu__column:only-child {
  grid-column: 1 / -1;
  padding-right: 0;
}

/* Loading, empty and error messages in place of the courses */
.menu__status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  min-height: 12rem;
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
}

.course {
  position: relative;
}

/* The logo's gold divider between courses, like the ornaments on the printed menu.
   It sits in the margin, so a plate's offsets are measured from the heading wherever the course lands. */
.course + .course {
  margin-top: 4.85rem;
}

.course + .course::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1.5rem);
  left: 50%;
  width: 10rem;
  height: 1.6rem;
  transform: translateX(-50%);
  background: url("../assets/img/brand/divider.webp") center / contain no-repeat;
}

.course h3 {
  font-size: 1.625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}

.course dl {
  display: flow-root;
  margin: 0.75rem 0 0;
}

/* Keeps the text clear of the plate and its note, then lets it run full width below them */
.course dl::before {
  content: "";
  float: right;
  width: var(--dish-room, 0);
  height: var(--dish-clear, 0);
}

.course dl > div + div {
  margin-top: 0.5rem;
}

/* Run-in items: name, then description on the same line */
.course dt {
  display: inline;
  margin-right: 0.35em;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.course dd {
  display: inline;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Plated dishes sitting on the page, some spilling over the frame.
   Each course sets the plate's size and its spill past the column, and how wide and how deep
   (from the top of the list) the text leaves room for the plate and its note. */
.course__dish {
  position: absolute;
  top: var(--dish-top);
  right: calc(-1 * var(--dish-spill));
  z-index: 2;
  width: var(--dish-width);
  height: auto;
  filter: drop-shadow(0 14px 14px rgb(60 40 10 / 0.28));
  pointer-events: none;
}

.course__note {
  position: absolute;
  z-index: 2;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--ink);
  transform: rotate(-8deg);
  pointer-events: none;
}

.course--soups {
  --dish-width: 13rem;
  --dish-spill: 1.25rem;
  --dish-top: -1.75rem;
  --dish-room: 13rem;
  --dish-clear: 6rem;
}

.course--grill {
  --dish-width: 16.5rem;
  --dish-spill: 6.5rem;
  --dish-top: -0.5rem;
  --dish-room: 10rem;
  --dish-clear: 12rem;
  min-height: 15rem;
}

.course--grill .course__note {
  top: 10.75rem;
  right: 0.5rem;
}

.course--oven {
  --dish-width: 15.5rem;
  --dish-spill: 6.75rem;
  --dish-top: -0.35rem;
  --dish-room: 9rem;
  --dish-clear: 6.25rem;
}

.course--desserts {
  --dish-width: 13rem;
  --dish-spill: 5.5rem;
  --dish-top: -0.1rem;
  --dish-room: 9rem;
  --dish-clear: 11rem;
  min-height: 14.15rem;
}

.course--desserts .course__note {
  top: 9.65rem;
  right: 1.5rem;
}

/* The left column ends at the centre rule, so a plate there stays inside it at the soup's size */
.menu__column:first-child:not(:only-child) :is(.course--grill, .course--oven, .course--desserts) {
  --dish-width: 13rem;
  --dish-spill: 1.25rem;
  --dish-room: 13rem;
}

.course__feature {
  position: relative;
  width: min(82%, 21rem);
  margin: 1.25rem auto 0;
}

.course__feature img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 14px rgb(60 40 10 / 0.28));
}

.course__feature .course__note {
  right: -3.5rem;
  bottom: -0.5rem;
}

/* Bottom of the menu: closing line, the Bosphorus, and the navy band */
.menu__foot {
  margin: clamp(2.5rem, 5vw, 4rem) calc(-1 * var(--card-pad-x)) 0;
  text-align: center;
}

.menu__foot-divider {
  width: 12rem;
  height: auto;
  margin: 0 auto;
}

.menu__closing {
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
  line-height: 1.05;
  color: var(--ink);
}

/* The closing line sits in the panorama's sky, as on the printed menu */
.menu__panorama {
  margin: clamp(-4rem, -5vw, -1.5rem) 0 0;
}

.menu__panorama img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 16%);
  mask-composite: intersect;
}

.menu__values {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  margin: 0;
  padding: 1.1rem clamp(4rem, 8vw, 6rem);
  background: var(--ink);
  border-top: 2px solid var(--gold);
  color: var(--paper);
  list-style: none;
}

/* The logo's medallion closes each end of the band */
.menu__values::before,
.menu__values::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2.25rem, 5vw, 3.75rem);
  background: url("../assets/img/brand/emblem.webp") center / clamp(1.25rem, 2.6vw, 1.75rem) no-repeat;
}

.menu__values::before {
  left: 0;
  border-right: 2px solid var(--gold);
}

.menu__values::after {
  right: 0;
  border-left: 2px solid var(--gold);
}

.menu__values li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

.menu__values svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---------- Visit ---------- */

.visit {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section-space) var(--gutter);
}

.visit__scene {
  max-width: 54rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.visit__scene figcaption {
  margin-top: -0.5rem;
}

.visit__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 66rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.visit__photo {
  margin: 0;
}

/* Round-topped like a window, with a gold line set just outside it */
.visit__photo img {
  width: 100%;
  height: auto;
  border-radius: 50% 50% 3px 3px / 26% 26% 3px 3px;
  outline: 1px solid var(--gold-soft);
  outline-offset: 7px;
}

.visit__photo figcaption {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}

.visit__details {
  display: grid;
}

.visit__item {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding-block: 1.5rem;
}

.visit__item:first-child {
  padding-top: 0;
}

.visit__item + .visit__item {
  border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

.visit__item h3 {
  font-size: 1.375rem;
  color: var(--cobalt);
}

.visit__item address {
  font-style: normal;
}

.visit__note {
  color: var(--ink-soft);
  font-size: 0.96875rem;
}

.visit__handle {
  font-weight: 500;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  padding-top: 2.75rem;
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  font-size: var(--fs-small);
  text-align: center;
}

/* Tile strip along the top edge, like the band at the foot of the printed menu */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2.75rem;
  background: var(--tile) center / 5.5rem;
  border-bottom: 2px solid var(--gold);
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 3rem var(--gutter) 2.5rem;
}

.site-footer__emblem {
  width: 3.5rem;
  height: auto;
  margin-bottom: 0.5rem;
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--paper);
}

.site-footer__legal {
  margin-top: 1rem;
  opacity: 0.7;
}

/* ---------- Mobile action bar ---------- */

.action-bar {
  display: none;
}

/* ---------- Coming soon dialog ---------- */

.coming-soon {
  width: min(26rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(10 20 45 / 0.6);
}

.coming-soon::backdrop {
  background: rgb(20 40 75 / 0.55);
  backdrop-filter: blur(3px);
}

.coming-soon__band {
  height: 1.25rem;
  background: var(--tile) center / 5rem;
  border-bottom: 2px solid var(--gold);
}

.coming-soon__body {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  padding: 2rem 2rem 2.25rem;
  text-align: center;
}

.coming-soon__body img {
  width: 3rem;
  height: auto;
}

.coming-soon h2 {
  font-size: 2rem;
}

.coming-soon p {
  color: var(--ink-soft);
}

.coming-soon form {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .coming-soon[open] {
    animation: rise 260ms ease-out;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .site-header__actions {
    display: none;
  }

  .hero {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [text-start] minmax(0, 28rem) [text-end]
      2.5rem
      [visual-start] minmax(0, 30rem) [visual-end]
      minmax(var(--gutter), 1fr) [full-end];
  }
}

/* Menu: one column, dishes float beside their course */
@media (max-width: 980px) {
  .menu__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
  }

  .menu__motto {
    display: none;
  }

  .menu__landmark {
    width: min(70%, 16rem);
    margin-top: 1rem;
  }

  .menu__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu__column:first-child {
    padding-right: 0;
  }

  .menu__column + .menu__column {
    padding-left: 0;
    border-left: 0;
  }

  .menu__column + .menu__column::before {
    content: "";
    display: block;
    width: 10rem;
    height: 1.6rem;
    margin: 1.75rem auto 1.5rem;
    background: url("../assets/img/brand/divider.webp") center / contain no-repeat;
  }

  .course--grill,
  .course--desserts {
    min-height: 0;
  }

  /* The plate floats here; a flow-root list would narrow itself beside it all the way down */
  .course dl {
    display: block;
  }

  .course dl::before {
    content: none;
  }

  .course__dish {
    position: static;
    float: right;
    width: min(40%, 12rem);
    margin: 0.25rem -0.5rem 0.5rem 0.75rem;
  }

  .course > .course__note {
    display: none;
  }

  .course::after {
    content: "";
    display: block;
    clear: both;
  }

  .course__feature .course__note {
    right: -0.5rem;
    font-size: 1.5rem;
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 4rem;
  }

  .site-header__inner {
    justify-content: center;
  }

  .site-header__logo img {
    height: 2.75rem;
  }

  .site-nav {
    display: none;
  }

  .hero {
    grid-template-columns: [full-start] var(--gutter) [text-start visual-start] minmax(0, 1fr) [text-end visual-end] var(--gutter) [full-end];
    min-height: 0;
  }

  .hero__visual {
    grid-row: 1;
    padding-block: 2.5rem 0;
  }

  .arch {
    width: min(68%, 17rem);
  }

  .stamp {
    left: -2.25rem;
    bottom: 1.75rem;
    width: 5.75rem;
  }

  .arch__toggle {
    right: 1.25rem;
    bottom: 1.25rem;
  }

  .arch__caption {
    font-size: 1.375rem;
  }

  .hero__text {
    grid-row: 2;
    padding-block: 2rem 1rem;
  }

  .region,
  .region--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .region--flip .region__scene {
    order: 0;
  }

  .visit__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .visit__details {
    text-align: center;
  }

  .visit__item {
    justify-items: center;
  }

  .visit__item:first-child {
    padding-top: 1.5rem;
  }

  /* Order and reserve stay one tap away */
  .action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  }

  .site-footer {
    padding-bottom: 4.5rem;
  }
}

@media (max-width: 520px) {
  .menu__kicker {
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
  }

  .menu__specialties {
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }

  .menu__specialties li {
    padding-inline: 0.55rem;
  }

  .menu__values {
    flex-direction: column;
    align-items: center;
    padding-inline: 2.75rem;
  }

  .menu__values li {
    font-size: 0.96875rem;
  }
}

@media (max-width: 420px) {
  .plates {
    gap: 1.25rem 1rem;
  }

  .plates li,
  .plates img {
    width: 5.75rem;
  }

  .plates img {
    height: 5.75rem;
  }

  .action-bar .btn {
    padding-inline: 0.5rem;
  }
}