/* The restaurant look: everything here is scoped to .site[data-look="restaurant"]. Appended after base.css (bun run --filter @platform/sections css).

   A restaurant, café or lunchroom, made of what every one of them has by
   the door and on the table: the stoepbord (A-frame chalkboard) on the
   pavement, the printed menu card, the opening hours in white letters on
   the glass of the door and the "Gereserveerd" card on a table. No stock
   photos: until the restaurant uploads its own, these carry its facts. The
   restaurant's colour (--primary, bottle green until it picks one) fills the
   buttons and the menu's rules; text on it is always --on-primary. The page
   is table linen: a cool off-white, never cream. */

.site[data-look="restaurant"] {
  --r-ink: var(--text);
  --r-muted: var(--muted);
  --r-rule: var(--border);
  --r-shadow: 0 1px 1px rgb(20 18 14 / 0.12), 0 18px 34px -22px rgb(20 18 14 / 0.55);
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.32rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 2.7vw, 3.8rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --wrap: 76rem;
  background: var(--bg);
}
@media (max-width: 40rem) { .site[data-look="restaurant"] { --fs-base: 1.0625rem; } }
.site[data-look="restaurant"] main > .s + .s { border-top: 0; }
.site[data-look="restaurant"] :is(h1, h2) { line-height: 1.04; text-wrap: balance; }
.site[data-look="restaurant"] h2 { font-size: var(--fs-h2); margin: 0 0 0.45em; letter-spacing: -0.015em; }
.site[data-look="restaurant"] :is(p, li, dd, figcaption) { hyphens: auto; }

/* Small labels: the printed captions of a menu, small capitals. */
.site[data-look="restaurant"] :is(.r-k, .r-place, .r-lines dt, .r-menu-kind, .r-glass-head) {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
}

/* --- Buttons: the restaurant's colour, square like a printed card. ------- */
.site[data-look="restaurant"] .btn { border-radius: 2px; min-height: 3.2rem; padding-inline: 1.6rem; font-weight: 650; letter-spacing: 0.01em; }
.site[data-look="restaurant"] .cta-alt { text-underline-offset: 0.25em; }
.site[data-look="restaurant"] :is(a, button, .btn, input, textarea):focus-visible { outline: 3px solid var(--r-ink); outline-offset: 3px; }

/* --- Header: the name as a sign-painted line over the linen. ------------- */
.site[data-look="restaurant"] .site-header { background: var(--bg); border-bottom: 1px solid var(--r-rule); }
.site[data-look="restaurant"] .brand { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); letter-spacing: -0.01em; }
.site[data-look="restaurant"] .site-header .btn { min-height: 2.75rem; padding-inline: 1.1rem; font-size: 0.95rem; }

/* --- Hero: the name, and the stoepbord beside it. ------------------------ */
.site[data-look="restaurant"] .r-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.site[data-look="restaurant"] .r-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) {
  .site[data-look="restaurant"] .r-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 1fr); }
  .site[data-look="restaurant"] .r-hero.no-photo .r-hero-grid { min-height: min(40rem, calc(calc(100 * var(--raam-vh)) - 9rem)); }
  .site[data-look="restaurant"] .r-hero.has-photo .r-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.site[data-look="restaurant"] .r-place { margin: 0 0 1rem; color: var(--r-muted); display: flex; align-items: center; gap: 0.8rem; }
.site[data-look="restaurant"] .r-place::after { content: ''; flex: 0 0 3rem; height: 1px; background: currentColor; }
.site[data-look="restaurant"] .r-name {
  font-family: var(--font-heading); font-weight: 400; line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 1.1rem;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.site[data-look="restaurant"] .r-name-l { font-size: clamp(3.3rem, 1.2rem + 7.4vw, 7.8rem); }
.site[data-look="restaurant"] .r-name-m { font-size: clamp(2.7rem, 1.2rem + 5vw, 5.6rem); }
.site[data-look="restaurant"] .r-name-s { font-size: clamp(2.1rem, 1.1rem + 3.3vw, 4rem); line-height: 1.04; }
@media (max-width: 30rem) { .site[data-look="restaurant"] .r-name-s { font-size: 1.95rem; } }
@media (min-width: 52rem) {
  .site[data-look="restaurant"] .r-hero.has-photo .r-name-l { font-size: clamp(2.9rem, 0.8rem + 4.8vw, 5.6rem); }
  .site[data-look="restaurant"] .r-hero.has-photo .r-name-m { font-size: clamp(2.4rem, 0.9rem + 3.3vw, 4.2rem); }
  .site[data-look="restaurant"] .r-hero.has-photo .r-name-s { font-size: clamp(1.9rem, 0.9rem + 2.2vw, 3.1rem); }
}
.site[data-look="restaurant"] .r-headline { font-family: var(--font-body); font-weight: 650; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.01em; text-transform: none; max-width: 24ch; margin: 0 0 0.6em; }
.site[data-look="restaurant"] .r-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 34rem; margin: 0; color: var(--r-muted); hyphens: manual; }
.site[data-look="restaurant"] .r-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="restaurant"] .r-hero-art { position: relative; display: flex; justify-content: center; }
.site[data-look="restaurant"] .r-hero.has-photo .r-hero-art { display: block; }
.site[data-look="restaurant"] .r-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 52rem) {
  /* The board stands on the pavement in front of the restaurant's own photo. */
  .site[data-look="restaurant"] .r-hero.has-photo .r-hero-art { padding-bottom: 3rem; }
  .site[data-look="restaurant"] .r-hero.has-photo .r-board { position: absolute; left: -2.5rem; bottom: 0; }
  .site[data-look="restaurant"] .r-hero.has-photo .r-hero-photo { aspect-ratio: 5 / 6; max-height: 40rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="restaurant"] .r-hero.has-photo .r-hero-art { display: grid; }
  .site[data-look="restaurant"] .r-hero.has-photo .r-board { margin: -3.5rem 0 0 1rem; position: relative; }
  .site[data-look="restaurant"] .r-hero-photo { aspect-ratio: 4 / 3; }
}

/* The stoepbord: a tall black-green slate in a wooden A-frame, a handle
   cut into the top rail, the side rails running on down to the pavement.
   Chalk is the body face in capitals with a little dust around it. */
.site[data-look="restaurant"] .r-board { position: relative; width: min(100%, 22rem); padding-bottom: 3.2rem; }
.site[data-look="restaurant"] .r-board::before, .site[data-look="restaurant"] .r-board::after {
  content: ''; position: absolute; bottom: 0.15rem; width: 13px; height: 4rem; z-index: 0;
  background: linear-gradient(to right, #57391f, var(--board-frame) 45%, #84603f); border-radius: 0 0 2px 2px;
}
.site[data-look="restaurant"] .r-board::before { left: 0; }
.site[data-look="restaurant"] .r-board::after { right: 0; }
/* The pavement under the legs. */
.site[data-look="restaurant"] .r-hero.no-photo .r-board { filter: drop-shadow(0 26px 18px rgb(20 14 8 / 0.22)); }
.site[data-look="restaurant"] .r-board-face {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 27rem;
  padding: clamp(2.3rem, 3vw, 2.8rem) clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.6rem, 2.4vw, 2rem);
  background-color: var(--board); color: var(--chalk);
  background-image:
    radial-gradient(ellipse at 30% 18%, rgb(255 255 255 / 0.08), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgb(255 255 255 / 0.05), transparent 50%),
    linear-gradient(112deg, transparent 30%, rgb(255 255 255 / 0.035) 42%, transparent 52%, transparent 68%, rgb(255 255 255 / 0.03) 76%, transparent 84%);
  border: 13px solid var(--board-frame); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), inset 0 3px 12px rgb(0 0 0 / 0.55);
}
.site[data-look="restaurant"] .r-board-face::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 3.6rem; height: 7px; margin-left: -1.8rem; border-radius: 4px;
  background: #2b1d10; box-shadow: inset 0 2px 2px rgb(0 0 0 / 0.5);
}
/* Chalk: soft-edged, a little dust round every letter. */
.site[data-look="restaurant"] :is(.r-chalk-name, .r-chalk-today, .r-chalk-head, .r-chalk-list) {
  color: var(--chalk); text-shadow: 0 0 1px rgb(243 241 234 / 0.75), 0 0 7px rgb(243 241 234 / 0.16);
}
.site[data-look="restaurant"] .r-chalk-name { text-wrap: balance; font-family: var(--font-heading); font-size: clamp(1.7rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.08; text-align: center; margin: 0 0 1rem; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="restaurant"] .r-chalk-name.is-long { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.site[data-look="restaurant"] .r-chalk-today { margin: 0 0 1.4rem; text-align: center; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.95rem; line-height: 1.35; }
.site[data-look="restaurant"] .r-chalk-today span { display: none; }
:root[data-today="mon"] .site[data-look="restaurant"] .r-chalk-today [data-day="mon"],
:root[data-today="tue"] .site[data-look="restaurant"] .r-chalk-today [data-day="tue"],
:root[data-today="wed"] .site[data-look="restaurant"] .r-chalk-today [data-day="wed"],
:root[data-today="thu"] .site[data-look="restaurant"] .r-chalk-today [data-day="thu"],
:root[data-today="fri"] .site[data-look="restaurant"] .r-chalk-today [data-day="fri"],
:root[data-today="sat"] .site[data-look="restaurant"] .r-chalk-today [data-day="sat"],
:root[data-today="sun"] .site[data-look="restaurant"] .r-chalk-today [data-day="sun"] { display: inline; }
/* A chalk rule above the dishes, drawn a little unevenly. */
.site[data-look="restaurant"] .r-chalk-head { position: relative; margin: 0 0 1rem; padding-top: 1.2rem; text-align: center; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.82rem; }
.site[data-look="restaurant"] .r-chalk-head::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(243 241 234 / 0.7) 10%, rgb(243 241 234 / 0.45) 50%, rgb(243 241 234 / 0.75) 88%, transparent); transform: rotate(-0.7deg); }
.site[data-look="restaurant"] .r-chalk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.95rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; font-size: 1.05rem; line-height: 1.25; }
.site[data-look="restaurant"] .r-chalk-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.site[data-look="restaurant"] .r-chalk-dish { min-width: 0; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site[data-look="restaurant"] .r-chalk-price { flex: none; font-variant-numeric: tabular-nums; }
.site[data-look="restaurant"] .r-board-compact { width: min(100%, 17rem); padding-bottom: 2.6rem; }
.site[data-look="restaurant"] .r-board-compact .r-board-face { border-width: 10px; padding: 1.8rem 1.1rem 1.3rem; min-height: 0; }
.site[data-look="restaurant"] .r-board-compact .r-chalk-name { font-size: 1.35rem; }
.site[data-look="restaurant"] .r-board-compact .r-chalk-list { font-size: 0.92rem; gap: 0.6rem; }
.site[data-look="restaurant"] .r-board-compact::before, .site[data-look="restaurant"] .r-board-compact::after { width: 10px; height: 3.2rem; }
@media (max-width: 51.99rem) {
  .site[data-look="restaurant"] .r-hero.no-photo .r-hero-art { justify-content: flex-start; }
  .site[data-look="restaurant"] .r-hero.no-photo .r-board { width: min(100%, 20rem); }
  .site[data-look="restaurant"] .r-hero.no-photo .r-board-face { min-height: 0; }
}

/* --- The menu card: white card, a double rule set in from the edge, the
   courses centred as on a printed carte; two pages with a fold. --------- */
.site[data-look="restaurant"] .r-menu-band { background: var(--surface); }
.site[data-look="restaurant"] .r-menu-head { display: grid; gap: 0.75rem 4rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.site[data-look="restaurant"] .r-menu-head h2 { margin: 0; max-width: 14ch; }
.site[data-look="restaurant"] .r-intro { font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; margin: 0; color: var(--r-muted); }
@media (min-width: 52rem) { .site[data-look="restaurant"] .r-menu-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="restaurant"] .r-menu {
  --pad: clamp(1.5rem, 4.5vw, 4.25rem);
  position: relative; margin-inline: auto; background: var(--menu); color: var(--on-menu);
  padding: calc(var(--pad) + 0.5rem) var(--pad) var(--pad); box-shadow: var(--r-shadow);
}
/* The double rule, set in from the card's edge. */
.site[data-look="restaurant"] .r-menu::before {
  content: ''; position: absolute; inset: clamp(0.6rem, 1.3vw, 1rem); pointer-events: none;
  border: 1px solid var(--menu-rule); box-shadow: inset 0 0 0 3px var(--menu), inset 0 0 0 4px var(--menu-rule);
}
.site[data-look="restaurant"] .r-menu.is-single { max-width: 40rem; }
.site[data-look="restaurant"] .r-menu-title { position: relative; display: grid; justify-items: center; gap: 0.35rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.site[data-look="restaurant"] .r-menu-name { font-family: var(--font-heading); font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; max-width: 26ch; overflow-wrap: break-word; }
.site[data-look="restaurant"] .r-menu-kind { color: var(--menu-muted); display: flex; align-items: center; gap: 0.9rem; }
.site[data-look="restaurant"] .r-menu-kind::before, .site[data-look="restaurant"] .r-menu-kind::after { content: ''; width: 2.25rem; height: 1px; background: var(--primary); }
.site[data-look="restaurant"] .r-menu-pages { position: relative; display: grid; gap: 0; }
@media (min-width: 56rem) {
  .site[data-look="restaurant"] .r-menu.is-spread .r-menu-pages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--pad) * 2); }
  /* The fold down the middle of the opened carte. */
  .site[data-look="restaurant"] .r-menu.is-spread {
    background-image: linear-gradient(to right, transparent calc(50% - 2.2rem), rgb(0 0 0 / 0.035) calc(50% - 0.4rem), rgb(0 0 0 / 0.09) 50%, rgb(255 255 255 / 0) calc(50% + 0.1rem), rgb(0 0 0 / 0.03) calc(50% + 1.5rem), transparent calc(50% + 2.6rem));
  }
}
.site[data-look="restaurant"] .r-course { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 55.99rem) {
  .site[data-look="restaurant"] .r-course.is-cont { margin-top: calc(-1 * clamp(1.5rem, 3vw, 2.25rem) + 0.95rem); }
  .site[data-look="restaurant"] .r-course.is-cont .r-course-name { display: none; }
  .site[data-look="restaurant"] .r-course.is-plain.is-cont { border-top: 0; padding-top: 0; }
}
.site[data-look="restaurant"] .r-course.is-plain:not(:first-child) { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--menu-rule); }
.site[data-look="restaurant"] .r-course-name {
  font-family: var(--font-heading); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--on-menu);
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); text-align: center; margin: 0 0 1rem; break-after: avoid;
}
.site[data-look="restaurant"] .r-dishes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.95rem; }
.site[data-look="restaurant"] .r-dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: baseline; break-inside: avoid; }
.site[data-look="restaurant"] .r-dish-name { font-weight: 650; font-size: 1.08rem; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="restaurant"] .r-dish-price { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.site[data-look="restaurant"] .r-dish-note { grid-column: 1 / -1; color: var(--menu-muted); font-size: 0.98rem; line-height: 1.45; margin-top: 0.15rem; max-width: 36rem; }
.site[data-look="restaurant"] .r-menu-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2rem; margin: clamp(0.5rem, 2vw, 1.25rem) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--menu-rule); color: var(--menu-muted); font-size: 0.92rem; text-align: center; }
.site[data-look="restaurant"] .r-menu-foot a { color: var(--on-menu); font-weight: 650; white-space: nowrap; }
@media (max-width: 40rem) {
  .site[data-look="restaurant"] .r-menu { margin-inline: calc(var(--gap) * -0.5); }
  .site[data-look="restaurant"] .r-dish { column-gap: 0.9rem; }
}

/* --- Opening hours: white letters on the dark glass of the door. -------- */
.site[data-look="restaurant"] .r-door-band { background: var(--bg); }
.site[data-look="restaurant"] .r-door-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="restaurant"] .r-door-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="restaurant"] .r-door-text h2 { hyphens: manual; }
.site[data-look="restaurant"] .r-lines { margin: 1.5rem 0 0; border-top: 2px solid var(--r-ink); max-width: 28rem; }
.site[data-look="restaurant"] .r-lines > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--r-rule); align-items: baseline; }
.site[data-look="restaurant"] .r-lines dt { color: var(--r-muted); }
.site[data-look="restaurant"] .r-lines dd { hyphens: manual; margin: 0; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
/* The door: painted in the restaurant's colour, the glass, a brass bar. */
.site[data-look="restaurant"] .r-door { position: relative; justify-self: center; width: min(100%, 27rem); padding: 1.1rem 1.1rem 4.5rem; background: var(--primary); background-image: linear-gradient(to right, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0) 7%, rgb(255 255 255 / 0.06) 50%, rgb(0 0 0 / 0) 93%, rgb(0 0 0 / 0.22)); border-radius: 3px 3px 0 0; box-shadow: var(--r-shadow); }
.site[data-look="restaurant"] .r-glass {
  position: relative; padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); color: var(--on-glass);
  background-color: var(--glass);
  background-image: linear-gradient(118deg, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / 0.07) 30%, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / 0.05) 68%, rgb(255 255 255 / 0) 74%);
  box-shadow: inset 0 0 0 4px rgb(0 0 0 / 0.25), inset 0 0 26px rgb(0 0 0 / 0.5);
}
.site[data-look="restaurant"] .r-glass-name { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.1; text-align: center; margin: 0 0 0.4rem; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="restaurant"] .r-glass-head { text-align: center; margin: 0 0 1.25rem; color: var(--glass-muted); }
.site[data-look="restaurant"] .r-glass-table { width: 100%; border-collapse: collapse; }
.site[data-look="restaurant"] .r-glass-table :is(th, td) { padding: 0.42rem 0; font-size: 1.08rem; text-align: left; vertical-align: baseline; }
.site[data-look="restaurant"] .r-glass-table th { font-weight: 600; padding-right: 1rem; }
.site[data-look="restaurant"] .r-glass-table td { text-align: right; font-variant-numeric: tabular-nums; }
.site[data-look="restaurant"] .r-glass-table .r-time { display: block; white-space: nowrap; }
.site[data-look="restaurant"] .r-glass-table tr.is-closed :is(th, td) { color: var(--glass-muted); font-weight: 400; }
/* Today: a strip of white vinyl under the line. */
:root[data-today="mon"] .site[data-look="restaurant"] .r-glass-table tr[data-day="mon"],
:root[data-today="tue"] .site[data-look="restaurant"] .r-glass-table tr[data-day="tue"],
:root[data-today="wed"] .site[data-look="restaurant"] .r-glass-table tr[data-day="wed"],
:root[data-today="thu"] .site[data-look="restaurant"] .r-glass-table tr[data-day="thu"],
:root[data-today="fri"] .site[data-look="restaurant"] .r-glass-table tr[data-day="fri"],
:root[data-today="sat"] .site[data-look="restaurant"] .r-glass-table tr[data-day="sat"],
:root[data-today="sun"] .site[data-look="restaurant"] .r-glass-table tr[data-day="sun"] { box-shadow: inset 0 -2px 0 var(--on-glass); }
.site[data-look="restaurant"] .r-door-handle { position: absolute; right: 1.6rem; bottom: 1rem; width: 7rem; height: 0.7rem; border-radius: 0.35rem; background: linear-gradient(#e2c98c, #a8843f 60%, #7d6230); box-shadow: 0 2px 3px rgb(0 0 0 / 0.4); }

/* --- About: plain, a measure for reading. --------------------------------- */
.site[data-look="restaurant"] .r-about { background: var(--surface); }
.site[data-look="restaurant"] .r-about-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) {
  .site[data-look="restaurant"] .r-about.has-photo .r-about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  /* No photo: the heading on the left, the story beside it, the full width used (not half a page left empty). */
  .site[data-look="restaurant"] .r-about.no-photo .r-about-text { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .site[data-look="restaurant"] .r-about.no-photo .r-about-body { padding-top: 0.4rem; border-top: 2px solid currentColor; }
}
.site[data-look="restaurant"] .r-about-text h2 { max-width: 16ch; }
.site[data-look="restaurant"] .r-about-text .is-long { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); max-width: 22ch; }
.site[data-look="restaurant"] .r-about-body { max-width: 40rem; }
.site[data-look="restaurant"] .r-about-body p { margin: 0 0 1em; font-size: var(--fs-lead); line-height: 1.62; }
.site[data-look="restaurant"] .r-about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* --- Gallery: the restaurant's own photos, plain crops. ------------------- */
.site[data-look="restaurant"] .r-photos-band { background: var(--bg); }
.site[data-look="restaurant"] .r-photos { list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0; display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-look="restaurant"] .r-photos li:first-child { grid-column: 1 / -1; }
.site[data-look="restaurant"] .r-photos figure { margin: 0; }
.site[data-look="restaurant"] .r-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.site[data-look="restaurant"] .r-photos figcaption { color: var(--r-muted); font-size: 0.92rem; margin-top: 0.45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 52rem) {
  .site[data-look="restaurant"] .r-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site[data-look="restaurant"] .r-photos li:first-child { grid-column: span 2; grid-row: span 2; }
  .site[data-look="restaurant"] .r-photos li:first-child figure { height: 100%; display: flex; flex-direction: column; }
  .site[data-look="restaurant"] .r-photos li:first-child .r-photo { aspect-ratio: auto; flex: 1; min-height: 0; height: auto; }
  .site[data-look="restaurant"] :is(.r-n2, .r-n4) .r-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site[data-look="restaurant"] :is(.r-n2, .r-n4) .r-photos li:first-child { grid-column: auto; grid-row: auto; }
  .site[data-look="restaurant"] :is(.r-n2, .r-n4) .r-photos li:first-child .r-photo { aspect-ratio: 4 / 3; height: auto; }
}

/* --- What guests say: one or two, set large in the serif. ---------------- */
.site[data-look="restaurant"] .r-guests { background: var(--bg); border-top: 1px solid var(--r-rule); }
.site[data-look="restaurant"] .r-quotes { list-style: none; margin: clamp(1.25rem, 3vw, 2rem) 0 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) { .site[data-look="restaurant"] .r-guests-2 .r-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site[data-look="restaurant"] .r-quotes figure { margin: 0; }
.site[data-look="restaurant"] .r-quotes blockquote { margin: 0; }
.site[data-look="restaurant"] .r-quotes blockquote p { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); line-height: 1.3; margin: 0; max-width: 32ch; hyphens: manual; }
.site[data-look="restaurant"] .r-guests-1 .r-quotes blockquote p { max-width: 40ch; }
.site[data-look="restaurant"] .r-quotes figcaption { margin-top: 0.9rem; color: var(--r-muted); display: flex; align-items: center; gap: 0.75rem; }
.site[data-look="restaurant"] .r-quotes figcaption::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; }

/* --- Reserving: the phone first, the "Gereserveerd" card on the table. -- */
.site[data-look="restaurant"] .r-reserve { background: var(--surface); }
.site[data-look="restaurant"] .r-reserve-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="restaurant"] .r-reserve-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .site[data-look="restaurant"] .r-reserve.no-form .r-reserve-grid { align-items: center; } }
.site[data-look="restaurant"] .r-reserve-text h2 { max-width: 13ch; }
.site[data-look="restaurant"] .r-reserve-text .r-intro { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.site[data-look="restaurant"] .r-call { display: grid; gap: 0.25rem; margin: 0 0 1.5rem; }
.site[data-look="restaurant"] .r-call .r-k { color: var(--r-muted); }
.site[data-look="restaurant"] .r-call a { font-family: var(--font-heading); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.1; text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums; }
.site[data-look="restaurant"] .r-call a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site[data-look="restaurant"] .r-contact-lines { list-style: none; margin: 0 0 clamp(2rem, 4vw, 2.75rem); padding: 0; border-top: 2px solid var(--r-ink); max-width: 32rem; }
.site[data-look="restaurant"] .r-contact-lines li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--r-rule); }
.site[data-look="restaurant"] .r-contact-lines .r-k { color: var(--r-muted); }
.site[data-look="restaurant"] .r-contact-lines a { font-size: 1.1rem; text-decoration: none; overflow-wrap: anywhere; }
.site[data-look="restaurant"] .r-contact-lines a:hover { text-decoration: underline; }
/* The tent card: a folded card standing on the table, its back face seen
   behind the top edge. */
.site[data-look="restaurant"] .r-tent { position: relative; width: min(100%, 22rem); padding-top: 0.9rem; filter: drop-shadow(0 18px 14px rgb(20 18 14 / 0.25)); }
.site[data-look="restaurant"] .r-reserve-card { display: flex; justify-content: center; }
.site[data-look="restaurant"] .r-reserve-card .r-tent { width: min(100%, 26rem); }
.site[data-look="restaurant"] .r-tent-back { position: absolute; top: 0; left: 0; right: 0; height: 0.95rem; background: linear-gradient(#d6d5ce, #e9e8e2); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.site[data-look="restaurant"] .r-tent-face {
  position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 1.6rem 1.5rem 1.4rem; text-align: center;
  background: var(--menu); color: var(--on-menu); border-top: 1px solid #d9d8d1;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.06), transparent 1.2rem);
}
.site[data-look="restaurant"] .r-tent-word { font-family: var(--font-heading); font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.05; }
.site[data-look="restaurant"] .r-tent-name { color: var(--menu-muted); font-size: 0.95rem; letter-spacing: 0.04em; overflow-wrap: break-word; max-width: 100%; }
.site[data-look="restaurant"] .r-tent-name.is-long { font-size: 0.85rem; }
.site[data-look="restaurant"] .r-tent-call { display: grid; justify-items: center; gap: 0.15rem; width: 100%; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--menu-rule); }
.site[data-look="restaurant"] .r-tent-call > span:first-child { color: var(--menu-muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="restaurant"] .r-tent-phone { font-family: var(--font-heading); font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The form, printed on white card beside it. */
.site[data-look="restaurant"] .r-form { background: var(--menu); color: var(--on-menu); padding: clamp(1.75rem, 3.5vw, 2.5rem); box-shadow: var(--r-shadow); border-top: 4px solid var(--primary); }
.site[data-look="restaurant"] .r-form :is(input, textarea) { border-radius: 2px; border: 1px solid var(--r-rule); background: #fff; }
.site[data-look="restaurant"] .r-form label { font-weight: 600; }

/* --- The rest (FAQ, booking, request form, cta band) on the linen. ------- */
.site[data-look="restaurant"] :is(.s-faq, .s-booking, .s-request) { background: var(--bg); border-top: 1px solid var(--r-rule); }

/* --- Footer: a rule in the restaurant's colour above the colophon. ------- */
.site[data-look="restaurant"] .site-footer { border-top: 4px solid var(--primary); }
.site[data-look="restaurant"] .footer-name { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }