/* ==========================================================================
   Anin Dvor — site design system
   Built from the 30.07 design handoff (Handoffs/Anin Dvor/30.07/_extracted/),
   whose inline styles are tokenised here per the repo convention.

   Parchment + oxblood maroon; alternating #EFD9A4 / #E8D097 bands separated by
   #DEC382 hairlines; photos sit in a 5px paper mount; the order section and the
   footer are dark #25110a.
   Type: Cinzel (numerals/display) · Cormorant Garamond (headings + body)
         · Mulish (kickers, buttons, meta).

   © Ante Sorić / Sorich 2026 — Made by sorich.hr (https://sorich.hr/#top)
   ========================================================================== */

:root {
  /* Surfaces */
  --parchment: #efd9a4;
  --band: #e8d097;
  --hairline: #dec382;
  --line: rgba(67, 32, 26, 0.14);
  --line-2: rgba(67, 32, 26, 0.26);
  --mount: #fbf6e9;

  /* Brand */
  --oxblood: #5a1e16;
  --oxblood-deep: #43140e;
  --ink: #43201a;
  --muted: #7a4a33;
  --clay: #8a3a22;
  /* --gold is a RULE colour: hairlines, dividers, ghost-button borders. At 2.99:1 on
     parchment it is below the AA text floor, so anything that carries words uses
     --gold-text (4.92:1 on parchment, 4.52:1 on the band) instead. */
  --gold: #9c7634;
  --gold-text: #75551f;

  /* Dark sections — the red of the wax seal on the logo, sampled from it.
     11.84:1 with --cream and 8.8:1 with --dark-gold, so every pairing already used on
     these sections still clears AA comfortably. */
  --dark: #521414;
  --dark-deep: #3d0f0f;
  --dark-cream: #f0deb6;
  --cream: #f4e9ce;
  --dark-gold: #e9c77e;
  --dark-gold-2: #c08a4a;
  --dark-line: rgba(233, 199, 126, 0.18);
  --dark-line-2: rgba(233, 199, 126, 0.4);

  /* WhatsApp + open-now */
  --wa: #1f6b4a;
  --wa-hover: #18543a;
  --open: #557a4e;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --display: Cinzel, "Cormorant Garamond", Georgia, serif;
  --sans: Mulish, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics */
  --maxw: 1280px;
  --maxw-narrow: 900px;
  --gutter: 48px;
  --sec-y: 96px;
  --sec-y-sm: 72px;
  --hdr-h: 78px;
  --radius: 2px;
  --grade: sepia(0.12) saturate(1.02);
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  background: var(--dark-deep);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: var(--oxblood);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--clay);
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
p {
  margin: 0;
  text-wrap: pretty;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  text-wrap: balance;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
::selection {
  background: var(--clay);
  color: var(--cream);
}
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}
/* Clay scores 2.33:1 on the dark sections — invisible where it matters most (the
   wizard, the footer, the mobile bar, the lightbox). */
.sec-dark :focus-visible,
.wizard :focus-visible,
.foot :focus-visible,
.mbar :focus-visible,
.photoband :focus-visible,
.lb :focus-visible {
  outline-color: var(--dark-gold);
}
[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: -64px;
  left: 24px;
  z-index: 300;
  padding: 13px 24px;
  background: var(--oxblood);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top 0.25s ease;
}
.skip-link:focus-visible {
  top: 0;
  color: var(--cream);
  outline-offset: -3px;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-narrow {
  max-width: var(--maxw-narrow);
}
.sec {
  padding: var(--sec-y) 0;
}
.sec-sm {
  padding: var(--sec-y-sm) 0;
}
.sec-band {
  background: var(--band);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sec-rule {
  border-top: 1px solid var(--hairline);
}
.sec-dark {
  background: var(--dark);
  color: var(--dark-cream);
}
/* `main[id]` as well as `main [id]` — <main> is not its own descendant, so the skip
   link's target was the one anchor the sticky header could still cover. */
main[id],
main [id],
section[id] {
  scroll-margin-top: calc(var(--hdr-h) + 12px);
}
main:focus {
  outline: none;
}
.center {
  text-align: center;
}
.measure {
  max-width: 640px;
}
/* BOTH forms: several elements carry `class="center measure"` / `class="center btns"`
   themselves, with no `.center` ancestor, so the descendant selector alone silently
   missed them and those blocks stayed left-aligned. */
.center.measure,
.center .measure {
  margin-inline: auto;
}

/* ---------- type ---------- */

.kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
}
.sec-dark .kicker,
.photoband .kicker {
  color: var(--dark-gold-2);
}
h1,
.h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(46px, 5.5vw, 74px);
  line-height: 1;
  color: var(--oxblood);
}
h2,
.h2 {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.05;
  color: var(--oxblood);
}
h3,
.h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.15;
  color: var(--oxblood);
}
.sec-dark h1,
.sec-dark h2,
.sec-dark h3,
.photoband h2 {
  color: var(--dark-cream);
}
.lead {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
.sec-dark .lead {
  color: rgba(240, 222, 182, 0.72);
}
.prose p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}
.prose p:first-child {
  margin-top: 0;
}
.prose em {
  color: var(--oxblood);
}
.small {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

/* gold hairline + diamond divider */
.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  margin: 24px 0 18px;
}
.rule::before {
  content: "";
  height: 1px;
  width: 64px;
  background: currentColor;
  opacity: 0.45;
}
.rule::after {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: rotate(45deg);
}
.center .rule,
.page-hd .rule,
.wizard-hd .rule {
  justify-content: center;
}

/* ---------- buttons & chips ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 32px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.btn-sm {
  height: 46px;
  padding: 0 24px;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.btn-primary {
  background: var(--oxblood);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--oxblood-deep);
  color: var(--cream);
}
.btn-ghost {
  border: 1.5px solid var(--gold);
  color: var(--oxblood);
}
.btn-ghost:hover {
  background: var(--band);
  color: var(--oxblood);
}
.sec-band .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  background: var(--parchment);
}
.btn-wa {
  background: var(--wa);
  color: var(--cream);
}
.btn-wa:hover {
  background: var(--wa-hover);
  color: var(--cream);
}
.btn-outline {
  border: 1.5px solid var(--oxblood);
  color: var(--oxblood);
}
.btn-outline:hover {
  background: var(--band);
  color: var(--oxblood);
}
.btn-dark {
  border: 1px solid var(--dark-line-2);
  color: var(--dark-gold);
}
.btn-dark:hover {
  background: rgba(233, 199, 126, 0.1);
  color: var(--dark-gold);
}
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.center.btns,
.center .btns {
  justify-content: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.chip[aria-pressed="true"] {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--cream);
}
.audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--clay);
}
.audience .sep {
  color: var(--gold);
  font-weight: 400;
}

/* ---------- photo mount ---------- */

.frame {
  overflow: hidden;
  border: 5px solid var(--mount);
  outline: 1px solid var(--hairline);
  background: var(--band);
}
.frame-sm {
  border-width: 3px;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade);
  transition: transform 1s ease;
}
a.frame:hover img,
button.frame:hover img {
  transform: scale(1.04);
}
/* Photo slot with no file yet — a quiet parchment weave, never "PHOTO NEEDED".
   Drop the real file into public/uploads/anin-dvor/ and remove `empty`. */
.frame.empty {
  background-image: repeating-linear-gradient(
    45deg,
    var(--band) 0 6px,
    var(--parchment) 6px 12px
  );
}

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--parchment);
  border-bottom: 1px solid var(--hairline);
}
.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter);
}
.hdr .brand {
  flex: none;
}
.hdr .brand img {
  height: 46px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The gap gives way before the header does. Five nav labels + a call button + the CTA
     are ~90px wider in French than in English, and every one of them is nowrap, so a
     fixed gap put the CTA past the right edge at several widths in HR, DE and FR. */
  gap: clamp(15px, 2vw, 26px);
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
}
/* Cinzel — the engraved capitals of the wax seal itself, so the navigation belongs to
   the mark rather than to a generic sans. It carries no lowercase, which is why the
   size and tracking are tuned here rather than inherited. */
.nav-links a {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--oxblood);
  border-bottom-color: var(--gold);
}
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* Language menu — a <details> that holds five languages without crowding the header.
   No JavaScript: the switch keeps working even if site.js never loads. */
.lang {
  position: relative;
}
.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(67, 32, 26, 0.28);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.lang > summary::-webkit-details-marker {
  display: none;
}
.lang > summary:hover {
  border-color: var(--gold);
}
.lang[open] > summary svg {
  transform: rotate(180deg);
}
.lang > summary svg {
  transition: transform 0.2s ease;
}
.lang-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  display: grid;
  padding: 6px;
  background: var(--mount);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.45);
}
.lang-pop a,
.lang-pop .lang-cur {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.lang-pop a:hover {
  background: var(--band);
  color: var(--oxblood);
}
.lang-pop .lang-cur {
  color: var(--oxblood);
  font-weight: 700;
}
.lang-ab,
.lang-pop .lang-cur {
  font-weight: 700;
}
.lang-ab {
  min-width: 22px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}
.lang-full {
  font-weight: 400;
}
.hdr .btn {
  height: 44px;
  padding: 0 20px;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.hamburger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  flex: none;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--oxblood);
}

.drawer {
  display: none;
  position: sticky;
  top: 66px;
  z-index: 39;
  background: var(--band);
  border-bottom: 1px solid var(--hairline);
  padding: 10px var(--gutter) 16px;
}
.drawer[data-open] {
  display: grid;
  gap: 2px;
}
.drawer a {
  padding: 12px 0;
  border-bottom: 1px dotted var(--line-2);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.drawer a:last-child {
  border-bottom: none;
}

/* open-now status pill (Europe/Zagreb, computed in site.js) */
.open-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.open-pill .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.6;
}
.open-pill.is-open {
  color: var(--oxblood);
}
.open-pill.is-open .dot {
  background: var(--open);
  opacity: 1;
  animation: openPulse 2.4s ease-out infinite;
}
@keyframes openPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(85, 122, 78, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(85, 122, 78, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 122, 78, 0);
  }
}

/* ---------- hero (home) ---------- */

/* `.hero` and `.page-hd` are applied to the SAME element as `.wrap`, so they must
   only ever set block padding — a shorthand here would wipe out the gutter. */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
  padding-block: 72px 96px;
}
/* The seal leads, centred in its half of the hero — it is the mark the whole design is
   built from, so the eye should land on it before the words. The column centres with
   it; a big centred mark over left-aligned text reads as a misalignment. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-logo {
  height: 190px;
  width: auto;
  margin-bottom: 22px;
}
.hero .lead {
  max-width: 480px;
  font-size: 19px;
}
.hero .chips {
  margin-top: 24px;
  justify-content: center;
}
.hero .btns,
.hero .audience {
  justify-content: center;
}
.hero .open-pill {
  justify-content: center;
}
.hero-media {
  position: relative;
}
.hero-media .frame {
  height: min(64vh, 560px);
}
.score {
  position: absolute;
  left: -28px;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.4);
}
.score-n {
  font-family: var(--display);
  font-size: 30px;
  color: var(--oxblood);
  line-height: 1;
}
.stars {
  color: var(--gold-text);
  font-size: 14px;
  letter-spacing: 2px;
}
.score-meta {
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---------- page header (inner pages) ---------- */

.page-hd {
  padding-block: 84px 64px;
  text-align: center;
}
.page-hd img.seal {
  height: 92px;
  width: auto;
  margin: 0 auto 22px;
}
.page-hd .lead {
  max-width: 620px;
  margin-inline: auto;
  font-size: 18px;
}

/* ---------- five steps ---------- */

/* Flex, not grid: five never divides evenly into a tablet's column count, and
   justify-content:center centres the trailing row instead of leaving it hanging
   against the left edge. */
.steps5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 30px;
  margin-top: 56px;
  text-align: left;
  list-style: none;
}
.steps5 > li {
  flex: 1 1 200px;
  max-width: 264px;
}
/* Not a numbered step — the fire is ours, not a sixth thing for the guest to do. */
.steps-outro {
  margin: 38px auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.sec-dark .steps-outro {
  color: rgba(240, 222, 182, 0.66);
}
.step-n {
  font-family: var(--display);
  font-size: 26px;
  color: var(--gold-text);
}
.step-t {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 600;
  color: var(--oxblood);
}
.steps5 p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.sec-dark .step-n {
  color: var(--dark-gold-2);
}
.sec-dark .step-t {
  color: var(--dark-cream);
}
.sec-dark .steps5 p {
  color: rgba(240, 222, 182, 0.66);
}

/* the peka ritual — four numbered steps in a column */
.steps4 {
  margin-top: 44px;
  list-style: none;
}
.steps4 li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px dotted var(--line-2);
}
.steps4 li:first-child {
  border-top: 1px dotted var(--line-2);
}
.steps4 .rn {
  font-family: var(--display);
  font-size: 28px;
  color: var(--gold-text);
  line-height: 1;
}
.steps4 h3 {
  font-size: 23px;
}
.steps4 p {
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- split (photo pair + prose) ---------- */

.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.split-rev {
  grid-template-columns: 1.1fr 0.9fr;
}
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.photo-pair .frame:first-child {
  height: 260px;
  align-self: end;
}
.photo-pair .frame:last-child {
  height: 320px;
}
.pull {
  margin: 0;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--oxblood);
}
.attrib {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---------- signature dishes ---------- */

.sig {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.sig .frame {
  height: 210px;
}
.sig-name {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 600;
  color: var(--oxblood);
}
.sig p {
  margin: 6px 0 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.sig-meta {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ---------- from our land (4 columns) ---------- */

.land {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.land > div {
  padding: 0 28px;
  border-left: 1px solid var(--line);
}
.land > div:first-child {
  padding-left: 0;
  border-left: none;
}
.land > div:last-child {
  padding-right: 0;
}
.land h3 {
  margin-top: 8px;
  font-size: 24px;
}
.land p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- feature row (photo + copy) ---------- */

.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feat + .feat {
  margin-top: 96px;
}
.feat-rev .feat-media {
  order: 2;
}
.feat-media {
  height: 420px;
}
.feat .tag {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.feat .note {
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* full-bleed photo band */
.photoband {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--dark);
}
.photoband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(30, 14, 8, 0.8),
    rgba(30, 14, 8, 0.34)
  );
}
.photoband .wrap {
  position: relative;
  padding-top: 72px;
  padding-bottom: 72px;
}
.photoband .measure {
  max-width: 560px;
}
.photoband .lead {
  color: rgba(240, 222, 182, 0.78);
}

/* two photos side by side */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 44px;
}
.duo .frame {
  height: 330px;
}

/* ---------- menu page ---------- */

.included {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}
.included span {
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.center .included {
  justify-content: center;
}
.menu-cat {
  margin-top: 56px;
}
/* A section that is a sentence, not a list — the desserts change every day, so the page
   says so instead of printing dishes the kitchen may not have that evening. */
.menu-cat-note .cat-note {
  max-width: 60ch;
  font-family: var(--serif) !important;
  font-size: 17px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.6;
  color: var(--muted) !important;
}
.menu-cat > h2 {
  margin: 0;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--oxblood);
}
.menu-cat .cat-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}
.menu-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dotted var(--line-2);
}
/* Dishes we have a real photograph of get one, in the paper mount the rest of the site
   uses; the rest get an empty well so every name starts at the same x. */
.menu-pic:empty {
  border: none;
  box-shadow: none;
}
.menu-pic {
  width: 116px;
  height: 86px;
  overflow: hidden;
  border: 4px solid var(--mount);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.5);
}
.menu-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade);
}
.menu-name {
  font-size: 21px;
  font-weight: 600;
  color: var(--oxblood);
}
.menu-alt {
  margin-top: 2px;
  font-style: italic;
  font-size: 15.5px;
  color: var(--muted);
}
.menu-incl {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.menu-price {
  font-family: var(--display);
  font-size: 22px;
  color: var(--oxblood);
  white-space: nowrap;
  text-align: right;
}
.menu-min {
  margin-top: 3px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
  text-align: right;
}
.menu-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  white-space: nowrap;
}
.menu-order:hover {
  background: var(--band);
  color: var(--oxblood);
}
.note-card {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--band);
  border: 1px solid var(--hairline);
}
.sec-band .note-card {
  background: var(--parchment);
}
.note-card h3 {
  font-size: 22px;
}
.note-card p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- gallery ---------- */

.gal-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 36px 0 28px;
}
.gal-group + .gal-group {
  margin-top: 44px;
}
.gal-group[hidden] {
  display: none;
}
/* A real <h2> so the photo archive is reachable by heading navigation, styled as the
   quiet caption the design calls for. */
.gal-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-weight: 700;
  color: var(--clay);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}
.gal-cap::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.gal-item {
  height: 190px;
  padding: 0;
  cursor: zoom-in;
}
.gal-item.wide {
  grid-column: span 2;
}

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 8, 5, 0.94);
}
.lb[data-open] {
  display: flex;
}
.lb img {
  max-width: 92vw;
  max-height: 78vh;
  border: 5px solid var(--mount);
}
.lb .x,
.lb .arr {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 233, 206, 0.3);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
}
.lb .x:hover,
.lb .arr:hover {
  background: rgba(244, 233, 206, 0.14);
}
.lb .x {
  top: 20px;
  right: 20px;
}
.lb .arr {
  top: 50%;
  transform: translateY(-50%);
}
.lb .prev {
  left: 18px;
}
.lb .next {
  right: 18px;
}
.lb-cap {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  padding: 0 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 233, 206, 0.75);
}
.lb-cap .n {
  display: block;
  margin-bottom: 4px;
  color: var(--dark-gold-2);
}

/* ---------- reviews ---------- */

.score-big {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: center;
  margin-top: 14px;
}
.score-big .score-n {
  font-size: 38px;
}
.score-big .stars {
  font-size: 17px;
}
.score-big > div {
  text-align: left;
}
.rev-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.rev-card {
  padding: 26px;
  border: 1px solid rgba(67, 32, 26, 0.15);
}
.rev-card p {
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
}
.rev-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.rev-av {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 14px;
}
.rev-name {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
}
.rev-src {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--muted);
}
.link-more {
  display: inline-block;
  margin-top: 36px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--gold);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
}

/* ---------- order teaser (dark) ---------- */

.order-teaser .steps5 {
  margin-top: 44px;
}
.order-teaser .btns {
  margin-top: 44px;
}
.order-fine {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(240, 222, 182, 0.6);
}
.order-fine a {
  color: var(--dark-gold);
}
.order-fine a:hover {
  color: var(--cream);
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 40px;
}
.faq-item {
  border-bottom: 1px dotted rgba(67, 32, 26, 0.22);
}
/* The question is an <h3> for heading navigation; the button inside stays the control,
   so the heading itself carries no type of its own. */
.faq-h {
  margin: 0;
  font: inherit;
  color: inherit;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 18.5px;
  font-weight: 600;
  color: var(--oxblood);
}
.faq-sign {
  flex: none;
  font-family: var(--display);
  font-size: 18px;
  color: var(--gold-text);
}
.faq-a {
  padding: 0 0 20px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.faq-item:not([data-open]) .faq-a {
  display: none;
}

/* ---------- visit / contact ---------- */

.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Static map linking out to Google Maps — no iframe, so no third-party cookies are set
   and the site needs no consent banner. `.map-wrap` keeps the link and its caption as
   ONE grid child; the caption lives inside the anchor so it is actually clickable. */
.map-wrap {
  min-width: 0;
}
.map-static {
  display: block;
  height: 440px;
  position: relative;
}
.map-cap {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
/* The caption sits inside the framed link, so lift it clear of the 5px mount. */
.map-static .map-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 9px 12px;
  background: var(--parchment);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.map-static:hover .map-cap {
  background: var(--band);
  color: var(--oxblood);
}
.info-rows {
  display: grid;
  gap: 1px;
  margin-top: 24px;
}
.info-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child {
  border-bottom: none;
}
.info-row .k {
  flex: none;
  width: 82px;
  padding-top: 4px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.info-row .v {
  font-size: 17.5px;
  color: var(--ink);
}
.info-row .v small {
  display: block;
  font-size: 14.5px;
  color: var(--muted);
}

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.card {
  padding: 28px;
  background: var(--band);
  border: 1px solid var(--hairline);
}
.sec-band .card {
  background: var(--parchment);
}
.card h3 {
  font-size: 21px;
}
.card p {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--band);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 84px 0;
  text-align: center;
}

/* ---------- reservations: the site's own booking flow ----------
   Five steps down the page rather than a boxed widget, on the seal-red band. Every
   control is built from the tokens the rest of the site already uses (.chip, .btn,
   .frame, the band rhythm) so it reads as part of the page, not as an app dropped
   into it. Markup: pages/reservations.html + buildReserveList(); behaviour:
   assets/reserve.js. */

.resv {
  background: var(--dark);
  color: var(--dark-cream);
}
.resv-hd {
  max-width: 640px;
  margin: 0 auto 44px;
}
.resv-hd h2 {
  color: var(--dark-cream);
}
.resv-hd .kicker {
  color: var(--dark-gold-2);
}
.resv-hd .lead {
  color: rgba(240, 222, 182, 0.72);
}
.rv-nojs {
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 16px 20px;
  border: 1px solid var(--dark-line-2);
  text-align: center;
  font-size: 15px;
  color: var(--cream);
}

/* the step markers — a ribbon of five, the current one lit */
.rv-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  max-width: 860px;
  margin: 0 auto 34px;
  padding: 0;
  list-style: none;
}
.rv-marks li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 222, 182, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rv-marks li span {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.rv-marks li[data-done] {
  color: var(--dark-gold-2);
  border-color: var(--dark-line-2);
}
.rv-marks li[data-on] {
  background: var(--dark-gold);
  border-color: var(--dark-gold);
  color: var(--dark-deep);
}

.rv {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 52px;
}
.rv-step {
  display: grid;
  gap: 14px;
}
/* Only the current pane is in the flow once JS runs. Without JS nothing is hidden and
   the whole form reads as one page, which is what a crawler indexes. */
.rv-step[hidden] {
  display: none;
}

/* back / hint / next */
.rv-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
}
.rv-nav .btn {
  flex: none;
}
.rv-nav-hint {
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
.rv-nav-hint[data-warn] {
  color: #f0b6a4;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 13px;
}
.resv .btn-ghost {
  border-color: var(--dark-line-2);
  color: var(--cream);
}
.resv .btn-ghost:hover {
  border-color: var(--dark-gold);
  color: var(--dark-gold);
}
.rv-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.rv-n {
  flex: none;
  min-width: 34px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dark-line-2);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--dark-gold);
}
.rv-sub {
  margin: 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(240, 222, 182, 0.72);
}
.rv-field {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.rv-lab {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
.rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The chips inherit .chip's shape from the light sections and re-state only what the
   dark background changes. */
.resv .chip {
  border-color: var(--dark-line-2);
  color: var(--cream);
  background: transparent;
}
.resv .chip:hover:not(:disabled) {
  border-color: var(--dark-gold);
}
.resv .chip[aria-pressed="true"] {
  background: var(--dark-gold);
  border-color: var(--dark-gold);
  color: var(--dark-deep);
}
.resv .chip:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.rv-otherdate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 222, 182, 0.66);
}
.rv-otherdate input {
  padding: 7px 10px;
  border: 1px solid var(--dark-line-2);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
  color: var(--cream);
  font: inherit;
  font-size: 12px;
  color-scheme: dark;
}

/* steppers — party counters and per-dish quantities share one control */
.rv-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.rv-count {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--dark-line);
  background: rgba(0, 0, 0, 0.12);
}
.rv-step-ctl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.rv-step-ctl button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--dark-line-2);
  background: transparent;
  color: var(--cream);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rv-step-ctl button:hover:not(:disabled) {
  border-color: var(--dark-gold);
  background: rgba(233, 199, 126, 0.08);
}
.rv-step-ctl button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.rv-step-ctl output {
  min-width: 46px;
  text-align: center;
  font-family: var(--display);
  font-size: 18px;
  color: var(--dark-gold);
}

/* ---------------- the month calendar ---------------- */

/* Wide enough: the calendar and the sittings sit side by side, so choosing an evening is
   one screen instead of a scroll. */
@media (min-width: 760px) {
  .rv-step[data-rv-name="when"] {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 40px;
  }
  .rv-step[data-rv-name="when"] > .rv-h,
  .rv-step[data-rv-name="when"] > .rv-sub {
    grid-column: 1 / -1;
  }
}

.rv-cal {
  max-width: 420px;
  padding: 14px 16px 16px;
  border: 1px solid var(--dark-line-2);
  background: rgba(0, 0, 0, 0.14);
}
.rv-cal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.rv-cal-title {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-transform: capitalize;
}
.rv-cal-nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--dark-line-2);
  background: transparent;
  color: var(--dark-gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rv-cal-nav:hover:not(:disabled) {
  background: rgba(233, 199, 126, 0.1);
}
.rv-cal-nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.rv-cal-wd,
.rv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.rv-cal-wd {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
  text-align: center;
}
.rv-cal-day {
  aspect-ratio: 1;
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rv-cal-day:hover:not(:disabled) {
  border-color: var(--dark-gold);
}
.rv-cal-day[aria-pressed="true"] {
  background: var(--dark-gold);
  border-color: var(--dark-gold);
  color: var(--dark-deep);
  font-weight: 700;
}
/* Days the kitchen cannot cook stay VISIBLE but dead — a missing day reads as a bug. */
.rv-cal-day:disabled {
  opacity: 0.22;
  cursor: not-allowed;
}
.rv-cal-pad {
  min-height: 38px;
}

/* ---------------- the dish cards ----------------
   A card, not a table row: only some dishes have a photograph, and a row layout either
   indented some rows and not others or reserved an empty well on every one. */

.rv-cat {
  margin-top: 30px;
}
.rv-cat-h {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dark-line-2);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dark-gold);
}
.rv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dark-line);
  background: rgba(0, 0, 0, 0.12);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rv-card[data-on] {
  border-color: var(--dark-gold);
  background: rgba(233, 199, 126, 0.08);
}
/* The whole upper half is the button that opens the dish. */
.rv-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.rv-card-pic {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-deep);
}
.rv-card-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade);
  transition: transform 0.4s ease;
}
.rv-card-open:hover .rv-card-pic img {
  transform: scale(1.04);
}
/* No photograph of THIS dish → the seal, small and centred, never another dish's food. */
.rv-card-seal {
  object-fit: contain !important;
  padding: 22%;
  opacity: 0.5;
  filter: none !important;
}
.rv-card-body {
  display: block;
  padding: 12px 14px 10px;
}
.rv-card-name {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
  color: var(--cream);
}
.rv-card-incl {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(240, 222, 182, 0.6);
}
.rv-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 0 14px 13px;
}
.rv-card-price {
  display: grid;
  gap: 2px;
}
.rv-it-amt {
  font-family: var(--display);
  font-size: 17px;
  color: var(--dark-gold);
}
.rv-it-unit {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
/* Half sits to the RIGHT of the plus — it is an extra on top of a whole portion. */
.rv-it-ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rv-half {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px dashed var(--dark-line-2);
  background: transparent;
  color: var(--dark-gold);
  font-size: 15px;
  cursor: pointer;
}
.rv-half.is-on {
  border-style: solid;
  background: rgba(233, 199, 126, 0.16);
}

/* ---------------- the dish dialog ---------------- */

.rv-dlg {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 5, 5, 0.82);
  overflow-y: auto;
}
.rv-dlg-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--dark);
  border: 1px solid var(--dark-line-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.rv-dlg-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 5, 5, 0.6);
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.rv-dlg-pic {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dark-deep);
}
.rv-dlg-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade);
}
.rv-dlg-body {
  display: grid;
  gap: 10px;
  padding: 20px 22px 24px;
}
.rv-dlg-body h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--cream);
}
.rv-dlg-incl {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(240, 222, 182, 0.72);
}
.rv-dlg-incl:empty {
  display: none;
}
.rv-dlg-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--dark-line);
}
body.rv-dlg-open {
  overflow: hidden;
}

/* The running tally on the dish step — quiet when the numbers agree, gold when they
   do not. Never red: a mismatch is a choice, not an error. */
.rv-tally {
  margin: -4px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 222, 182, 0.55);
}
.rv-tally[data-off] {
  color: var(--dark-gold);
}

/* ---------------- the portion note ---------------- */

.rv-note {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--dark-gold-2);
  background: rgba(233, 199, 126, 0.08);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dark-cream);
}

/* who you are */
.rv-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 6px;
}
.rv-inp {
  display: grid;
  gap: 7px;
}
.rv-inp-wide {
  grid-column: 1 / -1;
}
.rv-inp > span {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
.rv-inp em {
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(240, 222, 182, 0.45);
}
.rv-inp input,
.rv-inp textarea {
  padding: 12px 14px;
  border: 1px solid var(--dark-line-2);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.16);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  resize: vertical;
}
.rv-inp input::placeholder,
.rv-inp textarea::placeholder {
  color: rgba(240, 222, 182, 0.38);
}
.rv-inp input:focus,
.rv-inp textarea:focus {
  outline: 2px solid var(--dark-gold);
  outline-offset: 1px;
}
.rv-inp [data-invalid] {
  border-color: #e59a86;
}

/* the message, exactly as the kitchen receives it */
.rv-msg {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--dark-line-2);
  background: rgba(0, 0, 0, 0.2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.rv-err {
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  color: #f0b6a4;
}
.rv-send-step .btns {
  margin-top: 6px;
}
[data-blocked] {
  opacity: 0.55;
}
.rv-fine {
  margin: 4px 0 0;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(240, 222, 182, 0.6);
}
.wizard-fine {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(240, 222, 182, 0.6);
}
.wizard-fine a {
  color: var(--dark-gold);
}
.wizard-fine a:hover {
  color: var(--cream);
}

/* running total — sticky above the mobile bar, so the number follows you down the list */
.rv-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  background: var(--dark-deep);
  border-top: 1px solid var(--dark-line-2);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.rv-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.rv-bar-sum {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rv-bar-k {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
.rv-bar-v {
  font-family: var(--display);
  font-size: 20px;
  color: var(--dark-gold);
}

@media (max-width: 900px) {
  .rv {
    gap: 40px;
  }
  .rv-cal {
    max-width: none;
  }
}
@media (max-width: 640px) {
  /* Cards go single-column and the price/stepper share a row rather than stacking. */
  .rv-cards {
    grid-template-columns: 1fr;
  }
  .rv-card-pic {
    aspect-ratio: 16 / 9;
  }
  .rv-h {
    gap: 10px;
  }
  .rv-n {
    min-width: 26px;
  }
  .rv-bar {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* The ribbon collapses to numerals — five labelled pills wrapped to THREE rows on a
     phone and pushed the actual step off the first screen. The current step keeps its
     words; the others are just their numeral. */
  .rv-marks {
    gap: 5px 6px;
    margin-bottom: 26px;
  }
  .rv-marks li {
    padding: 7px 11px;
  }
  .rv-marks li:not([data-on]) {
    font-size: 0;
    padding: 7px 10px;
  }
  .rv-marks li:not([data-on]) span {
    font-size: 11px;
  }
  .rv-cal {
    padding: 12px 10px 14px;
  }
  .rv-cal-day,
  .rv-cal-pad {
    min-height: 34px;
  }
  .rv-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rv-nav-hint {
    order: -1;
    flex-basis: 100%;
  }
  .rv-dlg {
    padding: 0;
    align-items: flex-end;
  }
  .rv-dlg-card {
    width: 100%;
    max-height: 92vh;
  }
}

/* ---------- legal / impressum ---------- */

.legal {
  max-width: 760px;
  margin: 0 auto;
}
.legal dl {
  margin: 36px 0 0;
}
.legal dt {
  padding-top: 16px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.legal dd {
  margin: 4px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 17.5px;
  color: var(--ink);
}
.legal h3 {
  margin-top: 44px;
  font-size: 24px;
}

/* ---------- footer ---------- */

.foot {
  background: var(--dark);
  color: rgba(240, 222, 182, 0.72);
  padding: 72px 0 40px;
}
/* Three columns around the mark, as the current anindvor.com footer reads: how to
   reach us on the left, the seal and the wordmark in the middle with the social row
   under it, when and where on the right. */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 48px;
}
.foot-col-c {
  text-align: center;
  justify-self: center;
  max-width: 340px;
}
.foot-col-r {
  text-align: right;
  justify-self: end;
}
/* The seal is red wax. On the seal-red band it was red on red and effectively
   disappeared, so it now sits on a parchment disc — a wax seal pressed onto paper,
   which is what it is. */
.foot img.mark {
  height: 84px;
  width: auto;
  padding: 12px;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}
.foot-col-c .mark {
  margin: 0 auto;
}
.foot-word {
  margin: 12px 0 0 !important;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
}
.foot-sub {
  margin: 8px auto 20px !important;
  font-size: 14px !important;
  color: rgba(240, 222, 182, 0.6);
}
.foot-col-c .socials {
  justify-content: center;
  margin-bottom: 0;
}
.foot p {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 280px;
}
.foot-col-r p,
.foot-col-r address {
  margin-left: auto;
}
.foot p.hours {
  margin-top: 0;
  font-size: 15px;
  color: rgba(240, 222, 182, 0.72);
}
.foot-addr {
  margin: 14px 0 0;
  max-width: 280px;
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
}
.foot-dir {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-gold) !important;
}
.foot-col-l .foot-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--dark-line);
}
.foot-head {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-gold-2);
}
.foot-links {
  display: grid;
  gap: 11px;
  list-style: none;
}
.foot a {
  color: rgba(240, 222, 182, 0.8);
}
.foot a:hover {
  color: var(--dark-gold);
}
.foot-links a {
  font-size: 16px;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
  list-style: none;
}
/* Outlined, not filled: an oxblood disc on the seal-red band is 1.1:1 — the buttons
   were there, but you could not see where one ended and the next began. */
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dark-line-2);
  background: rgba(0, 0, 0, 0.16);
  color: var(--dark-gold) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.socials svg {
  width: 17px;
  height: 17px;
  display: block;
}
/* The two-letter mark stays in the DOM for text-only readers and for the case where the
   SVG never paints; it is hidden from sighted users, not removed. */
.soc-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.socials a:hover {
  background: var(--dark-gold);
  border-color: var(--dark-gold);
  color: var(--dark-deep) !important;
}
.foot-contact a {
  display: block;
  font-size: 16px;
}
.foot-contact a + a {
  margin-top: 6px;
}
.foot-bottom {
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding: 28px var(--gutter) 0;
  border-top: 1px solid var(--dark-line);
  text-align: center;
}
.foot-bottom p {
  margin: 0;
  max-width: none;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 222, 182, 0.55);
}
/* The one remaining Impressum link, on the Contact page — deliberately quiet. */
.legal-link {
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal-link a {
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}
.legal-link a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--gold);
}

/* ---------- back to top ---------- */

/* ---------- floating quick actions ----------
   WhatsApp, call, directions — the three things a guest halfway up the hill needs, on
   every page. They replace the old two-button row above the mobile tab bar, so each of
   those actions lives in exactly one place. */

.fabs {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--cream) !important;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}
.fab:hover {
  transform: translateY(-2px);
  background: var(--clay);
}
.fab svg {
  width: 23px;
  height: 23px;
}
.fab-wa {
  background: var(--wa);
}
.fab-wa:hover {
  background: var(--wa-hover);
}
/* The label is for screen readers and for a text-only render, not for the eye. */
.fab-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.to-top {
  position: fixed;
  /* Left, because the quick actions own the right-hand corner now. */
  left: 20px;
  bottom: 20px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oxblood);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.55);
}
.to-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- mobile bottom bar (two tiers) ---------- */

.mbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--dark);
}
.mbar-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 8px 11px;
  background: var(--dark);
  list-style: none;
}
.mbar-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* The Croatian labels are longer; without nowrap+ellipsis the row grows a line and
     the bar starts covering the footer. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: rgba(233, 199, 126, 0.72);
}
.mbar-tabs a.active {
  color: var(--dark-gold);
}
.mbar-tabs svg {
  width: 18px;
  height: 18px;
}

/* ---------- scroll reveal ----------
   Gated behind html.anin-js (set by an inline head script) so with JS off or
   blocked the content is simply visible — never a blank page. */
html.anin-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
html.anin-js .reveal.in {
  opacity: 1;
  transform: none;
}
html.anin-js .gal-grid.reveal .gal-item,
html.anin-js .sig.reveal > div,
html.anin-js .steps5.reveal > li,
html.anin-js .rev-cards.reveal > div {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
html.anin-js .gal-grid.reveal.in .gal-item,
html.anin-js .sig.reveal.in > div,
html.anin-js .steps5.reveal.in > li,
html.anin-js .rev-cards.reveal.in > div {
  opacity: 1;
  transform: none;
}
html.anin-js .sig.reveal.in > div:nth-child(2),
html.anin-js .steps5.reveal.in > li:nth-child(2),
html.anin-js .rev-cards.reveal.in > div:nth-child(2),
html.anin-js .gal-grid.reveal.in .gal-item:nth-child(2) {
  transition-delay: 0.08s;
}
html.anin-js .sig.reveal.in > div:nth-child(3),
html.anin-js .steps5.reveal.in > li:nth-child(3),
html.anin-js .rev-cards.reveal.in > div:nth-child(3),
html.anin-js .gal-grid.reveal.in .gal-item:nth-child(3) {
  transition-delay: 0.16s;
}
html.anin-js .rev-cards.reveal.in > div:nth-child(4),
html.anin-js .steps5.reveal.in > li:nth-child(4),
html.anin-js .gal-grid.reveal.in .gal-item:nth-child(4) {
  transition-delay: 0.24s;
}
html.anin-js .rev-cards.reveal.in > div:nth-child(5),
html.anin-js .steps5.reveal.in > li:nth-child(5),
html.anin-js .gal-grid.reveal.in .gal-item:nth-child(5) {
  transition-delay: 0.32s;
}
html.anin-js .gal-grid.reveal.in .gal-item:nth-child(6) {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  html.anin-js .reveal,
  html.anin-js .reveal.in,
  html.anin-js .gal-grid.reveal .gal-item,
  html.anin-js .sig.reveal > div,
  html.anin-js .steps5.reveal > li,
  html.anin-js .rev-cards.reveal > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .frame img {
    transition: none;
  }
  .open-pill.is-open .dot {
    animation: none;
  }
}

/* ==========================================================================
   Responsive — 1080px (tighten), 960px (drawer + single column), 600px (phone)
   ========================================================================== */

@media (max-width: 1080px) {
  :root {
    --gutter: 32px;
    --sec-y: 80px;
    --sec-y-sm: 60px;
  }
  .nav-links {
    gap: 18px;
  }
  .nav-links a {
    font-size: 11.5px;
  }
  .hero {
    gap: 44px;
  }
  .split,
  .feat,
  .visit {
    gap: 44px;
  }
}

/* The "Call" button leaves the header well before the navigation does.
   Measured on the real export: with it present, the CTA runs past the right edge in
   Croatian at 961, German at 961/1000/1100 and French at 961→1024 and 1100→1140 — the
   two danger zones sit either side of the 1080px gutter change, which is why a single
   breakpoint never fixed it. The number is never one tap away: the floating quick
   actions carry Call on every page at these widths, and so does the footer. */
@media (max-width: 1180px) {
  .hdr .btn-call {
    display: none;
  }
}

@media (max-width: 960px) {
  .nav-links,
  .hdr .btn-call {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .hdr-in {
    gap: 12px;
    padding: 12px var(--gutter);
  }
  .hdr .brand img {
    height: 40px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 40px 64px;
  }
  .hero-logo {
    height: 104px;
    margin-bottom: 18px;
  }
  .hero-media .frame {
    height: min(52vh, 400px);
  }
  .score {
    left: 0;
    bottom: -20px;
  }
  .split,
  .split-rev,
  .feat,
  .feat-rev,
  .visit {
    grid-template-columns: 1fr;
  }
  .feat-rev .feat-media {
    order: 0;
  }
  .feat + .feat {
    margin-top: 64px;
  }
  .feat-media {
    height: 320px;
  }
  .sig,
  .cards3 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* One step per row on a phone — two 200px cards side by side is unreadable. */
  .steps5 > li {
    flex: 1 1 100%;
    max-width: none;
  }
  .steps5 {
    gap: 28px;
  }
  .land {
    grid-template-columns: 1fr 1fr;
  }
  .land > div {
    padding: 24px 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .land > div:nth-child(2),
  .land > div:nth-child(4) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }
  /* Stacked: the mark leads, then how to reach us, then when and where — all centred,
     because a right-aligned column reads as a mistake once it is full width. */
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .foot-col-c {
    order: -1;
    justify-self: center;
  }
  .foot-col-r {
    text-align: center;
    justify-self: center;
  }
  .foot p,
  .foot-addr {
    margin-left: auto;
    margin-right: auto;
  }
  .foot .socials {
    justify-content: center;
  }
  .foot-links {
    justify-items: center;
  }
  .map-static {
    height: 300px;
  }
  .mbar {
    display: block;
  }
  /* The bar is one tier now (the CTA row moved to the floating actions), so the page
     needs a lot less clearance — INCLUDING the home-indicator inset. */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* The running total stacks ON TOP of the mobile bar rather than under it, and the
     page gains that much more clearance while it is showing. */
  .rv-bar {
    bottom: calc(76px + env(safe-area-inset-bottom));
    padding-bottom: 10px;
  }
  body.has-rv-bar {
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
  }
  /* Both floating clusters ride above the tab bar. */
  .to-top {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
  /* One band across the bottom, not a three-high tower standing on the content.
     (This override has to live AFTER the base .fabs rule, not in an earlier media
     block — same specificity, so source order decides.) */
  .fabs {
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    flex-direction: row-reverse;
    gap: 8px;
  }
  body.has-rv-bar .fabs,
  body.has-rv-bar .to-top {
    bottom: calc(164px + env(safe-area-inset-bottom));
  }
  .fab {
    width: 48px;
    height: 48px;
  }
  /* The Croatian CTA ("Naručite i rezervirajte") is far wider than the English one and
     everything in the header is flex:none + nowrap, so it pushed the hamburger past the
     right edge, where overflow-x:hidden clipped the only route to the navigation. */
  .hdr .btn-primary {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 44px;
    padding: 0 14px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 22px;
    --sec-y: 64px;
    --sec-y-sm: 48px;
  }
  body {
    font-size: 16px;
  }
  h1,
  .h1 {
    font-size: clamp(38px, 11vw, 52px);
  }
  h2,
  .h2 {
    font-size: clamp(26px, 7vw, 34px);
  }
  .hero .lead {
    font-size: 17px;
  }
  .page-hd {
    padding-block: 56px 44px;
  }
  .page-hd img.seal {
    height: 74px;
  }
  .photo-pair {
    gap: 8px;
  }
  .photo-pair .frame:first-child {
    height: 190px;
  }
  .photo-pair .frame:last-child {
    height: 230px;
  }
  .duo {
    grid-template-columns: 1fr;
  }
  .duo .frame,
  .feat-media {
    height: 240px;
  }
  .land,
  .land > div:nth-child(2),
  .land > div:nth-child(4) {
    grid-template-columns: 1fr;
  }
  .land > div,
  .land > div:nth-child(2),
  .land > div:nth-child(4) {
    padding: 20px 0;
    border-left: none;
  }
  .gal-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .gal-item {
    height: 150px;
  }
  .menu-row {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
  }
  .menu-pic:empty {
    display: none;
  }
  /* Narrow: the photo keeps a column of its own and spans the name and the price;
     the order link drops to its own row underneath. */
  .menu-row[data-haspic] {
    grid-template-columns: auto 1fr;
  }
  .menu-row[data-haspic] .menu-pic {
    grid-row: 1 / span 2;
    align-self: start;
  }
  .menu-pic {
    width: 84px;
    height: 66px;
  }
  .menu-order {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .score-big > div {
    text-align: center;
  }
  .btn {
    height: 50px;
    padding: 0 22px;
    font-size: 10px;
  }
  .btns .btn {
    flex: 1 1 auto;
  }
  .note-card,
  .card,
  .rev-card {
    padding: 22px;
  }
  .steps4 li {
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .steps4 .rn {
    font-size: 22px;
  }
  .info-row {
    flex-direction: column;
    gap: 4px;
  }
  .info-row .k {
    width: auto;
    padding-top: 0;
  }
  .lb img {
    max-width: 94vw;
    max-height: 68vh;
    border-width: 3px;
  }
  /* Below 600px the header keeps the logo, the language switch and the hamburger; the
     order CTA is already the first thing in the fixed bottom bar. */
  .hdr .btn-primary {
    display: none;
  }
  .map-static {
    height: 300px;
  }
  .foot-bottom {
    margin-top: 36px;
  }
}

/* Print — the menu is the page people actually print. */
@media print {
  .hdr,
  .drawer,
  .mbar,
  .to-top,
  .fabs,
  .rv-dlg,
  .lb,
  .cta-band,
  .wizard,
  .btns,
  .menu-order,
  .skip-link {
    display: none !important;
  }
  body {
    padding-bottom: 0;
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .sec,
  .sec-sm {
    padding: 18pt 0;
  }
  .frame {
    border-width: 2px;
  }
  html.anin-js .reveal,
  html.anin-js .gal-grid.reveal .gal-item,
  html.anin-js .sig.reveal > div,
  html.anin-js .steps5.reveal > li {
    opacity: 1 !important;
    transform: none !important;
  }
}