@charset "utf-8";
/* ==========================================================================
   MYTHOS CUCINA GRECA — core.css
   Direction: Minoan, not Mykonos. The palette is sampled from the client's own
   dolphin roundel (Knossos-fresco iconography, Bronze Age Crete) and the gold
   from the printed menu masthead. Ultramarine is used at full strength as a
   structural field, not as an accent.

   TYPE PAIRING — Archivo (display + UI) over Newsreader (body).
   Archivo is a variable grotesque with a real width axis; set in caps at
   wdth 112 it reads like a carved museum label — the vocabulary of a Heraklion
   vitrine — which lets the page speak Greek without a single faux-Greek
   letterform, the one thing the logo already does and must not be repeated.
   Newsreader carries the prose because inverting the usual serif-display /
   sans-body pairing keeps the headings architectural and the copy spoken.
   Martian Mono appears exactly once, on the booking code, because that is the
   only string on the page a person has to read aloud down a phone line.
   ========================================================================== */

/* ------------------------------------------------------------- tokens -- */

:root {
  /* Brand — sampled from the roundel (harvest/logo/gm-006.jpg) */
  --blue:        #0B14A0;   /* ultramarine — dominant structural colour      */
  --blue-deep:   #131851;   /* shadow navy — depth on blue, text on light    */
  --plaster:     #F5F6F8;   /* cool plaster white — the page ground          */
  --ink:         #0B0D14;   /* near-black — headings on light                */
  --gold:        #C4922E;   /* menu-masthead gold — rules, small caps only   */

  /* Derived working values. Not brand colours; mixes of the five above.     */
  --plaster-2:   #E7EAF1;   /* plaster pushed a step toward the navy         */
  --gold-lift:   #E6C77E;   /* the gold lifted for text ON ultramarine (8:1) */
  --rule:        rgba(19, 24, 81, .16);
  --rule-soft:   rgba(19, 24, 81, .09);
  --on-blue:     var(--plaster);
  --on-blue-dim: rgba(245, 246, 248, .74);
  --on-blue-faint: rgba(245, 246, 248, .30);

  --btn-bg: var(--blue);
  --btn-fg: var(--plaster);
  --focus:  var(--blue);

  --wrap: 1160px;
  --gut:  clamp(1.15rem, 4.5vw, 3rem);

  --ease: cubic-bezier(.22, .72, .2, 1);

  --f-disp: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One meander unit: a mirrored pair of square spirals on a rail, traced from
     the restaurant's own printed menu border (harvest/menu/gm-007.jpg). It is
     used in exactly one role site-wide — to close the bottom edge of an
     ultramarine field — never as a repeating trim along arbitrary sections. */
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23F5F6F8' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M0 21h44'/%3E%3Cpath d='M2 21V3h18v12H8V9h6'/%3E%3Cpath d='M42 21V3H24v12h12V9h-6'/%3E%3C/g%3E%3C/svg%3E");
  /* The same unit drawn in gold, for the one place the ornament sits on the
     plaster ground rather than on ultramarine: the tab above the hero kicker. */
  --meander-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23C4922E' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M0 21h44'/%3E%3Cpath d='M2 21V3h18v12H8V9h6'/%3E%3Cpath d='M42 21V3H24v12h12V9h-6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sections on the ultramarine ground flip the button and focus variables so
   nothing inside them has to be styled twice. */
.on-blue {
  --btn-bg: var(--plaster);
  --btn-fg: var(--blue);
  --focus:  var(--gold-lift);
  color: var(--on-blue);
  background: var(--blue);
}

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

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

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

body {
  margin: 0;
  /* clip, not hidden: `hidden` on body would make it a scroll container and
     break the sticky header. */
  overflow-x: clip;
  background: var(--plaster);
  color: var(--blue-deep);
  font: 300 clamp(1rem, .96rem + .2vw, 1.075rem)/1.66 var(--f-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

img, picture, iframe { max-width: 100%; }
img { height: auto; border: 0; }
iframe { border: 0; display: block; }

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:where(h1, h2, h3) { margin: 0; font-weight: 600; }

[id] { scroll-margin-top: calc(var(--bar-h, 64px) + 18px); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--blue); color: var(--plaster); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0; top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--blue); color: var(--plaster);
  padding: 1.05rem 1.2rem; text-decoration: none;
  font: 600 .8rem/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { transform: none; }

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

.h2 {
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.6rem, 1.05rem + 2.3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.on-blue .h2 { color: var(--plaster); }

.eyebrow {
  margin: 0 0 .85rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 100%;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::after {
  content: '';
  flex: 1 1 auto;
  max-width: 5.5rem;
  height: 1px;
  background: var(--gold);
}
.on-blue .eyebrow { color: var(--gold-lift); }
.on-blue .eyebrow::after { background: var(--gold-lift); opacity: .55; }

.lede {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.24rem);
  line-height: 1.55;
  color: var(--blue-deep);
}
.on-blue .lede { color: var(--on-blue-dim); }

.fine { font-size: .92rem; color: rgba(19, 24, 81, .72); }

.u-blue { color: var(--blue); }
.on-blue .u-blue { color: var(--gold-lift); }

.tel {
  /* phone numbers are a primary action wherever they appear, so they carry a
     44px target even when they sit inside a sentence */
  display: inline-block;
  padding: .65rem .12rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  white-space: nowrap;
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 20, 160, .22);
}
.btn:active { transform: none; }
/* The outer ring can share a colour with the button it surrounds (a blue CTA on
   plaster), so buttons also carry an inner ring in their own foreground. */
.btn:focus-visible { box-shadow: inset 0 0 0 3px var(--btn-fg); }

.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: .74rem; }


.btn-ghost {
  background: transparent;
  color: var(--btn-bg);
  border-color: currentColor;
}
.btn-ghost:hover { box-shadow: none; }

.linkish {
  background: none;
  border: 0;
  padding: .6rem 0;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .06em;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: var(--gold);
}
.on-blue .linkish { text-decoration-color: var(--gold-lift); }

/* ---------------------------------------------------------------- nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--plaster);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 22px rgba(19, 24, 81, .07);
}

.nav__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .6rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__disc { width: 34px; height: 34px; display: block; }
.brand__name {
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 118%;
  font-size: 1.02rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}

.nav__act {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
}

.langbtn {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--blue-deep);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.langbtn:hover { border-color: var(--blue); color: var(--blue); }

.burger {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 2px;
  background: var(--blue);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Under ~420px the bar has to carry brand + language + CTA + burger, so the
   whole row tightens rather than dropping the primary action. */
@media (max-width: 420px) {
  .nav__in { gap: .5rem; padding-inline: 1rem; }
  .brand { gap: .45rem; }
  .brand { padding: .5rem 0; }
  .brand__disc { width: 30px; height: 30px; }
  .brand__name { font-size: .9rem; letter-spacing: .06em; }
  .nav__act { gap: .3rem; }
  .langbtn { width: 42px; height: 42px; font-size: .7rem; }
  .btn-sm { min-height: 42px; padding: 0 .75rem; font-size: .69rem; letter-spacing: .08em; }
  .burger { width: 42px; height: 42px; }
}

/* Drawer — one list, an overlay under 900px and an inline row above it. */
.drawer {
  position: fixed;
  left: 0; right: 0;
  top: var(--bar-h, 60px);
  bottom: 0;
  z-index: 40;
  background: var(--blue);
  padding: 1.6rem var(--gut) 3rem;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.drawer.is-open { visibility: visible; opacity: 1; transform: none; }

.drawer__list {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.drawer__list a {
  display: block;
  padding: .95rem 0;
  min-height: 44px;
  border-bottom: 1px solid rgba(245, 246, 248, .18);
  text-decoration: none;
  color: var(--plaster);
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 108%;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.drawer .drawer__list a:focus-visible { outline-color: var(--gold-lift); }
.drawer__call a { color: var(--gold-lift); }

@media (min-width: 900px) {
  .drawer {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
    overflow: visible;
    margin-left: 1.4rem;
  }
  .drawer__list { flex-direction: row; gap: 1.6rem; align-items: center; }
  /* inline-flex + min-height keeps the pointer target at 44px without growing
     the bar: the tallest thing in the row is already the 44px CTA */
  .drawer__list a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    min-height: 44px;
    border: 0;
    color: var(--blue-deep);
    font-size: .78rem;
    font-stretch: 100%;
    letter-spacing: .13em;
    position: relative;
  }
  .drawer__list a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 10px;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .drawer__list a:hover::after { transform: scaleX(1); }
  .drawer__call { display: none; }
  .burger { display: none; }
}

/* ====================================================================== */
/*  THE VETRINA — the first screen.                                        */
/*                                                                         */
/*  No cinematic room shot. The only photographs of this restaurant that   */
/*  exist are the ones its own customers took, and the honest ones are     */
/*  plates, not interiors — so the first screen is laid the way a good     */
/*  taverna lays a table: plaster ground, one dish shot straight down, and */
/*  the Greek carried by ornament instead of by scenery.                   */
/*                                                                         */
/*  The photograph is set into an ultramarine frame, and the meander keeps */
/*  its single documented job — closing the bottom edge of an ultramarine  */
/*  field, here that frame. The roundel straddles the frame's top-left     */
/*  corner exactly as it straddles the actions band further down the page. */
/*                                                                         */
/*  The three publishable facts are folded into this section rather than   */
/*  standing as a band of their own, which is one whole block less to      */
/*  scroll past on a phone.                                                */
/* ====================================================================== */

.hero {
  position: relative;
  background: var(--plaster);
  padding-block: clamp(1.5rem, 4.5vw, 3.2rem) clamp(1.9rem, 5vw, 3.6rem);
}

.hero__in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  gap: clamp(1.4rem, 4.5vw, 2.4rem);
  align-items: center;
}

/* copy ------------------------------------------------------------------- */

/* A short length of meander used as a tab, not as a trim: three units, gold,
   sitting above the kicker the way a stamped rule sits above a museum label. */
.hero__tab {
  width: 96px;
  height: 16px;
  margin: 0 0 clamp(.8rem, 2.2vw, 1.1rem);
  background: var(--meander-gold) repeat-x left center / 32px 16px;
}

.hero__kicker {
  margin: 0 0 clamp(.5rem, 1.6vw, .75rem);
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(.66rem, .6rem + .2vw, .74rem);
  line-height: 1.35;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__h {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 114%;
  font-size: clamp(1.72rem, 1.06rem + 2.6vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
/* the street gets its own line at every width rather than trailing off the end
   of whichever line the balancer happened to pick */
.hero__h span { display: block; color: var(--blue); }

.hero__p {
  margin: clamp(.75rem, 2vw, 1.05rem) 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.1rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--blue-deep) 84%, transparent);
}

.hero__act {
  margin: clamp(1.05rem, 2.4vw, 1.45rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.hero__act .btn { flex: 1 1 auto; justify-content: center; }

.hero__or {
  margin: .75rem 0 0;
  font-size: .95rem;
  color: color-mix(in srgb, var(--blue-deep) 70%, transparent);
}
.hero__or .tel { font-weight: 500; color: var(--blue); }

/* the three facts we are actually allowed to publish ---------------------- */
.hero__facts {
  margin: clamp(1.1rem, 2.8vw, 1.5rem) 0 0;
  padding-top: clamp(.95rem, 2.4vw, 1.25rem);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .67rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--blue-deep) 74%, transparent);
}
.hero__facts li { display: flex; align-items: center; gap: .55rem; }
/* a gold pip in front of every item — a separator drawn between items instead
   reads as a trailing dash on the item before it once the rail wraps */
.hero__facts li::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* the photograph --------------------------------------------------------- */

.hero__shot {
  position: relative;
  margin: 0;
  background: var(--blue);
  padding: clamp(.5rem, 1.6vw, .7rem);
  /* room under the picture for the meander to run in */
  padding-bottom: clamp(1.45rem, 3.2vw, 1.85rem);
  box-shadow: 0 16px 40px rgba(11, 13, 20, .16);
}

.hero__pic {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/* the meander closing the frame's bottom edge */
.hero__shot::after {
  content: '';
  position: absolute;
  left: clamp(.5rem, 1.6vw, .7rem);
  right: clamp(.5rem, 1.6vw, .7rem);
  bottom: clamp(.26rem, .75vw, .4rem);
  height: 15px;
  background: var(--meander) repeat-x center / 30px 15px;
  transform: scaleY(-1);
  opacity: .92;
  pointer-events: none;
}

/* the wax seal, straddling the frame's top-left corner */
.hero__seal {
  position: absolute;
  top: 0;
  left: clamp(.9rem, 3vw, 1.4rem);
  width: clamp(50px, 10vw, 66px);
  height: auto;
  transform: translateY(-46%);
  filter: drop-shadow(0 8px 20px rgba(11, 13, 20, .35));
}

/* On a phone the picture leads — a plate is the fastest way to say what this
   place is — and the copy follows straight under it. */
@media (max-width: 767px) {
  .hero__shot { order: -1; }
  .hero__pic { aspect-ratio: 16 / 10; }
}

/* Below the width where both labels fit on one line they go full-bleed and
   stack, at full size. A button that has been squeezed to fit reads as a
   different, lesser control than the one making the same offer further down. */
@media (max-width: 559px) {
  .hero__act .btn { flex: 1 0 100%; }
}

@media (min-width: 560px) {
  .hero__act .btn { flex: 0 0 auto; }
}

@media (min-width: 768px) {
  .hero__in {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.8rem, 4vw, 3.2rem);
  }
  .hero__pic { aspect-ratio: 1 / 1; }
}

@media (min-width: 1040px) {
  .hero__pic { aspect-ratio: 5 / 4; }
}

/* A restrained arrival: nothing here is driven by scroll position. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *, .hero__shot { animation: heroIn .55s var(--ease) both; }
  .hero__copy > *:nth-child(2) { animation-delay: .04s; }
  .hero__copy > *:nth-child(3) { animation-delay: .08s; }
  .hero__copy > *:nth-child(4) { animation-delay: .12s; }
  .hero__copy > *:nth-child(5) { animation-delay: .16s; }
  .hero__copy > *:nth-child(6) { animation-delay: .2s; }
  .hero__seal { animation: sealIn .7s var(--ease) .12s both; }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes sealIn {
  from { opacity: 0; transform: translateY(-46%) scale(.88); }
}

/* ----------------------------------------------------------- sections -- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.sec { padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.sec__head { max-width: 58ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.sec__head .lede { margin-top: .9rem; }

.sec__grid { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); }
.sec__lead .lede { margin-top: 1rem; }
.sec__lead > p:last-child { margin-top: 1rem; }

@media (min-width: 860px) {
  .sec__grid { grid-template-columns: 1.35fr .95fr; align-items: start; }
  .sec__grid--even { grid-template-columns: 1.1fr .9fr; }
}

.card {
  background: var(--plaster-2);
  border-top: 3px solid var(--blue);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.card--quiet { background: transparent; border-top-color: var(--gold); border-top-width: 2px; }
.card--quiet .lede { margin-bottom: .9rem; }

.facts { margin: 0; }
.facts__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .5rem 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.facts__row:first-child { padding-top: 0; }
.facts__row:last-child { border-bottom: 0; }
.facts dt {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  align-self: center;
}
.facts dd { margin: 0; align-self: center; }

.facts__note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gold);
  font-size: .9rem;
  font-style: italic;
  color: rgba(19, 24, 81, .78);
}

@media (max-width: 400px) {
  .facts__row { grid-template-columns: 1fr; gap: .2rem; }
}

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

.dishes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.dish { min-width: 0; }
.dish--wide { grid-column: span 2; }

.dish__box {
  position: relative;
  overflow: hidden;
  background: var(--plaster-2);
  aspect-ratio: 4 / 5;
}
.dish--wide .dish__box { aspect-ratio: 3 / 2; }
.dish__box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.dish:hover .dish__box img { transform: scale(1.035); }

.dish__n {
  margin: .7rem 0 0;
  padding-top: .55rem;
  position: relative;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
.dish__n::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 18px; height: 1px;
  background: var(--gold);
}

@media (min-width: 720px) {
  .dishes { grid-template-columns: repeat(6, 1fr); }
  .dish { grid-column: span 2; }
  .dish--wide { grid-column: span 3; }
}

/* ================================================================== */
/*  THE ACTIONS BAND — where the landing page spends its boldness now  */
/*  that the booking form has moved to a URL of its own. Two doors,    */
/*  side by side, on a full-strength ultramarine field: the booking    */
/*  page (the one that goes in the Google Business Profile reservation */
/*  field) and the menu.                                               */
/* ================================================================== */

.acts {
  position: relative;
  isolation: isolate;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.acts::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: var(--meander) repeat-x center / 30px 15px;
  transform: scaleY(-1);
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}

/* the roundel seated on the top edge like a wax seal */
.acts__seal {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: clamp(80px, 14vw, 116px);
  height: clamp(80px, 14vw, 116px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 22px rgba(11, 13, 20, .4));
}

.acts__in {
  padding-block: clamp(3.8rem, 8vw, 5.6rem) clamp(3.2rem, 7vw, 4.8rem);
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.4rem);
}
.acts__card > .lede { margin: .9rem 0 0; }
.acts__card > .btn  { margin-top: clamp(1.2rem, 2.6vw, 1.6rem); }
.acts__card .fine {
  margin: 1rem 0 0;
  color: var(--on-blue-dim);
  font-size: .9rem;
}
.acts__card .fine .tel { color: var(--plaster); text-decoration-color: var(--gold-lift); }

@media (min-width: 800px) {
  .acts__in { grid-template-columns: 1fr 1fr; }
  /* a hairline between the two doors rather than a box around each */
  .acts__card + .acts__card {
    padding-left: clamp(2.2rem, 5vw, 3.4rem);
    border-left: 1px solid var(--on-blue-faint);
  }
}

/* ================================================================== */
/*  THE BOOKING PAGE HEAD — prenota.html                               */
/*  A cold arrival from Google has to see, without scrolling: whose     */
/*  table this is, that a table is what is being booked, and the first  */
/*  control of the widget. So this block is deliberately short.         */
/* ================================================================== */

.pren {
  position: relative;
  isolation: isolate;
}
.pren::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15px;
  background: var(--meander) repeat-x center / 30px 15px;
  transform: scaleY(-1);
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}

/* The roundel-plus-label lockup that opens the booking and cancel pages. The
   disc is a 512px asset: without an explicit size it renders at the full
   column width and pushes the first control of the widget a screen and a half
   down, which is exactly what this page is built not to do. */
.mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 clamp(.9rem, 2.6vw, 1.2rem);
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(.66rem, .6rem + .2vw, .74rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.mark img {
  flex: 0 0 auto;
  width: clamp(44px, 9vw, 58px);
  height: auto;
}

.pren__in {
  padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(3rem, 6vw, 4.4rem);
}

.pren__head {
  max-width: 48rem;
  margin: 0 auto clamp(1.6rem, 3.4vw, 2.2rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 1.7rem);
  border-bottom: 1px solid var(--on-blue-faint);
}
.pren__h {
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--plaster);
}
.pren__where {
  margin: .8rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--on-blue-dim);
}
.pren__how { margin: .5rem 0 0; font-size: .95rem; color: var(--on-blue-dim); }

/* A working path out of every widget state — including the one where the
   Edge Functions are not wired up yet. */
.pren__phone {
  max-width: 48rem;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
  padding-top: clamp(1.2rem, 3vw, 1.7rem);
  border-top: 1px solid var(--on-blue-faint);
  text-align: center;
  font-size: .95rem;
  color: var(--on-blue-dim);
}
.pren__phone .tel { color: var(--plaster); text-decoration-color: var(--gold-lift); }

/* ==================================================================== */
/*  BOOKING WIDGET — every state checked against --blue, not white.      */
/* ==================================================================== */

.bk {
  position: relative;          /* anchors the off-screen honeypot          */
  /* A single centred column, not a form stretched across the field — the
     panel should read as an inscribed tablet, and the controls need a
     measure, not the full 1440. */
  max-width: 48rem;
  margin: 0 auto;
  min-width: 0;
}
.bk [hidden] { display: none !important; }

.bk a {
  color: var(--plaster);
  text-decoration-color: var(--gold-lift);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.bk-loading {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--on-blue-dim);
  font-family: var(--f-disp);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Errors are a plaster block with a navy bar — legible on ultramarine and
   never dependent on hue alone. */
.bk-error {
  display: flex;
  gap: .7rem;
  margin: 1.1rem 0;
  padding: .85rem 1rem;
  background: var(--plaster);
  color: var(--blue-deep);
  border-left: 4px solid var(--blue-deep);
  font-size: .95rem;
}
.bk-error::before {
  content: '!';
  flex: 0 0 auto;
  font-family: var(--f-disp);
  font-weight: 700;
  color: var(--blue);
}
/* A direct child of .bk is the widget's whole content — the availability call
   failed — so it needs to look like a deliberate notice, not a stray strip. */
.bk > .bk-error {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.5rem);
  font-size: 1rem;
}

.bk-note {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  background: rgba(245, 246, 248, .09);
  border-left: 3px solid var(--gold-lift);
  color: var(--plaster);
  font-style: italic;
}

.bk-hint {
  margin: .7rem 0 0;
  font-size: .86rem;
  color: var(--on-blue-dim);
}
.bk-hint strong { color: var(--gold-lift); font-weight: 600; }
/* the "call us" number in the hint is a real action, so it gets a real target */
.bk-hint a, .bk-consent a { display: inline-block; padding: .7rem .15rem; }

.bk-form {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.4rem);
  min-width: 0;
}

/* fieldsets default to min-width:min-content, which would stop the date strip
   from shrinking and push a scrollbar onto <body>. */
.bk-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bk-step > legend {
  padding: 0 0 .9rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-lift);
}

/* Shared control skin ---------------------------------------------------- */
.bk-chip, .bk-day, .bk-slot, .bk-tab {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--plaster);
  border: 1px solid var(--on-blue-faint);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--f-disp);
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.bk-chip:hover:not(:disabled),
.bk-day:hover:not(:disabled),
.bk-slot:hover:not(:disabled) {
  border-color: var(--plaster);
  background: rgba(245, 246, 248, .1);
  transform: translateY(-2px);
}
.bk-chip.is-on, .bk-day.is-on, .bk-slot.is-on {
  background: var(--plaster);
  border-color: var(--plaster);
  color: var(--blue);
  transform: none;
}

/* party ------------------------------------------------------------------ */
.bk-party { display: flex; flex-wrap: wrap; gap: .5rem; }
.bk-chip {
  min-width: 48px;
  min-height: 48px;
  padding: 0 .5rem;
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
/* Groups past the chips: one select instead of twelve more buttons. */
.bk-more select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding: 0 2.2rem 0 .8rem;
  border: 1px solid var(--on-blue-faint);
  border-radius: 2px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5F6F8' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .8rem center;
  color: var(--plaster);
  font: 600 1rem var(--f-disp);
  cursor: pointer;
}
.bk-more select option { color: #131851; }
.bk-more.is-on select { background-color: var(--plaster); color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B14A0' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bk-group-note {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--gold-lift);
  background: rgba(245, 246, 248, .08);
  color: var(--plaster);
  font-size: .92rem;
  line-height: 1.5;
}

/* dates — a 45-day strip that scrolls, and says so ----------------------- */
.bk-dates {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: .1rem;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .95rem;
  scrollbar-color: rgba(245, 246, 248, .55) rgba(245, 246, 248, .14);
  scrollbar-width: thin;
  /* A rail painted on the container itself (background-attachment defaults to
     `scroll`, so it stays put while the days move) — the strip still reads as
     scrollable on platforms that hide overlay scrollbars at rest. */
  background: linear-gradient(rgba(245, 246, 248, .3), rgba(245, 246, 248, .3))
              left bottom / 100% 3px no-repeat;
}
.bk-dates::-webkit-scrollbar { height: 8px; }
.bk-dates::-webkit-scrollbar-track {
  background: rgba(245, 246, 248, .13);
  border-radius: 4px;
}
.bk-dates::-webkit-scrollbar-thumb {
  background: rgba(245, 246, 248, .5);
  border-radius: 4px;
}
.bk-dates::-webkit-scrollbar-thumb:hover { background: rgba(245, 246, 248, .72); }

.bk-day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 60px;
  min-height: 78px;
  padding: .5rem .2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  line-height: 1.15;
}
.bk-day-w {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}
.bk-day-n {
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
}
.bk-day-m {
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}

/* Unavailable never relies on colour alone: struck through and dimmed. */
.bk-day.is-closed,
.bk-day:disabled {
  opacity: .58;
  cursor: not-allowed;
  border-style: dashed;
  border-color: var(--on-blue-faint);
  background: transparent;
}
.bk-day.is-closed .bk-day-n,
.bk-day:disabled .bk-day-n {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* service tabs ----------------------------------------------------------- */
.bk-serv { display: flex; flex-wrap: wrap; gap: .5rem; }
.bk-tab {
  min-height: 46px;
  padding: 0 1.1rem;
  border-color: transparent;
  border-bottom: 2px solid var(--on-blue-faint);
  border-radius: 0;
  color: var(--on-blue-dim);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.bk-tab:hover { color: var(--plaster); border-bottom-color: var(--plaster); }
.bk-tab.is-on {
  color: var(--plaster);
  border-bottom-color: var(--gold-lift);
  border-bottom-width: 3px;
  background: transparent;
}

/* slots ------------------------------------------------------------------ */
.bk-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .5rem;
}
.bk-slot {
  min-height: 58px;
  padding: .5rem .35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
}
.bk-slot-t {
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.bk-slot-s {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}
.bk-slot:disabled {
  opacity: .56;
  cursor: not-allowed;
  border-style: dashed;
  background: transparent;
}
.bk-slot:disabled .bk-slot-t {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.bk-tz { margin-top: .9rem; }

/* your details ----------------------------------------------------------- */
.bk-you { display: grid; gap: 1rem; }

.bk-f { display: grid; gap: .4rem; min-width: 0; }
.bk-f > span {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-blue-dim);
}
.bk-f input,
.bk-f textarea {
  width: 100%;
  min-height: 50px;
  padding: .7rem .85rem;
  background: var(--plaster);
  color: var(--ink);
  border: 1px solid var(--plaster);
  border-radius: 2px;
  font-family: var(--f-body);
  font-size: 1rem;
}
.bk-f textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.bk-f input:focus-visible,
.bk-f textarea:focus-visible { outline-offset: 2px; }
.bk-f input::placeholder,
.bk-f textarea::placeholder { color: rgba(19, 24, 81, .5); }

@media (min-width: 720px) {
  .bk-you { grid-template-columns: 1fr 1fr; }
  .bk-you > legend { grid-column: 1 / -1; }
  /* name + phone share a row; email, notes and everything after run full
     width. nth-of-type counts <label>, which is what .bk-f and .bk-consent
     both are — hence the compound selector rather than nth-child. */
  .bk-you > .bk-f:nth-of-type(n+3),
  .bk-you > .bk-consent,
  .bk-you > .bk-error,
  .bk-you > .cf-turnstile,
  .bk-you > .bk-submit { grid-column: 1 / -1; }
}

/* Honeypot: off-screen, never display:none — some bots skip hidden fields.
   Absolute inside the relative .bk so it cannot extend the scroll width. */
.bk-hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bk-consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 44px;
  padding: .5rem 0;
  cursor: pointer;
  font-size: .95rem;
  color: var(--on-blue-dim);
}
.bk-consent input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  accent-color: var(--gold);
  cursor: pointer;
}

.cf-turnstile { min-height: 68px; margin-top: .3rem; }

.bk-submit { width: 100%; margin-top: .4rem; }
.bk-submit:disabled { opacity: .6; cursor: progress; }

.bk-cancel-link { margin: 1.4rem 0 0; text-align: center; }

/* confirmation ------------------------------------------------------------ */
.bk-done {
  /* a plaster card set into the fresco: the code has to survive being read
     aloud down a phone line, so it gets the strongest ground on the page */
  --btn-bg: var(--blue);
  --btn-fg: var(--plaster);
  --focus:  var(--blue);
  background: var(--plaster);
  color: var(--blue-deep);
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.5rem);
  text-align: center;
}
.bk-done-k {
  margin: 0 0 .5rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 110%;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.bk-done-l { margin: 0 0 .3rem; font-size: 1.06rem; }
.bk-done-tz { margin: 0; font-size: .9rem; color: rgba(19, 24, 81, .7); }

.bk-code-k {
  margin: clamp(1.5rem, 4vw, 2.2rem) 0 .6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--gold);
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
}
.bk-code {
  margin: 0 0 .6rem;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.75rem, 9.5vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--blue);
  overflow-wrap: anywhere;
  user-select: all;
}
.bk-done .bk-hint { color: rgba(19, 24, 81, .74); }
.bk-done a { color: var(--blue); text-decoration-color: var(--gold); }

.bk-done-act {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem 1.4rem;
}
.bk-done .linkish { color: var(--blue); text-decoration-color: var(--gold); }

/* cancel ------------------------------------------------------------------ */
.bk-cancelform { max-width: 30rem; margin: 0 auto; }
.bk-cancelform .bk-f { margin-bottom: 1rem; }
.bk-cancelform .btn { margin-right: .8rem; }
.bk-cancelled { text-align: center; }
.bk.is-cancel { padding-top: .5rem; }

/* pre-deploy / paused state ----------------------------------------------- */
.bk-phoneonly {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  font-style: normal;
  font-size: 1.08rem;
  border-left: 0;
  border-top: 1px solid var(--gold-lift);
  border-bottom: 1px solid var(--gold-lift);
  background: rgba(245, 246, 248, .07);
  padding: clamp(1.6rem, 4vw, 2.4rem) 1.2rem;
}
/* Sits inside a sentence, so it stays inline — but large, gold on ultramarine
   (8:1) and padded out to a 44px target. */
.bk-phoneonly a {
  display: inline-block;
  padding: .35rem .25rem;
  min-height: 44px;
  line-height: 36px;
  color: var(--gold-lift);
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 106%;
  font-size: clamp(1.1rem, 4.6vw, 1.4rem);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gold-lift);
  text-underline-offset: .24em;
}
.bk-phoneonly a:hover { color: var(--plaster); text-decoration-color: var(--plaster); }

/* --------------------------------------------------------- the figure -- */

/* The room and the veranda belong to the restaurant's story, beside the
   sentence that describes it — not to a map. */
.fig { margin: 0; }
.fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--plaster-2);
}
.fig figcaption {
  margin-top: .6rem;
  padding-top: .5rem;
  position: relative;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
}
.fig figcaption::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 18px; height: 1px;
  background: var(--gold);
}
@media (min-width: 860px) {
  .fig img { aspect-ratio: 3 / 4; }
}

/* ---------------------------------------------------------- location -- */

/* What replaced the map slab. An address, the metro stop, a phone number and
   a link — the four things somebody standing on Via Tuscolana actually needs.
   No embedded map: the map lives in Google Maps, where it is already better,
   and a 420px iframe of it is filler. */
.loc { display: grid; gap: clamp(1.4rem, 3.4vw, 2.4rem); }
.loc__social { margin-top: clamp(1rem, 2.6vw, 1.4rem); }
/* .foot__k is written for the ultramarine footer, where its gold-lift reads at
   8:1. On the plaster ground it is a pale smear, so this label takes the blue —
   two classes deep so it wins wherever the two rules end up in the file. */
.loc__social .foot__k { color: var(--blue); margin-bottom: .35rem; }

.loc__h {
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 112%;
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.2rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--ink);
}
.loc__lead .lede { margin-top: .8rem; }

.loc__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.loc__list li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .3rem 1rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.loc__k {
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
}
.loc__v { min-width: 0; }
.loc__v a:not(.tel) {
  display: inline-flex;
  align-items: center;
  padding: .5rem 0;
  min-height: 44px;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  text-underline-offset: .26em;
  text-decoration-color: var(--gold);
}

@media (max-width: 400px) {
  .loc__list li { grid-template-columns: 1fr; }
}
@media (min-width: 860px) {
  .loc { grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(2rem, 5vw, 3.5rem); }
}


/* ------------------------------------------------------- metro + social -- */

/* The Rome metro mark, drawn rather than described. The network's own signage
   is a white M on red, and the line letter rides in its line colour — A is
   orange. A plain blue disc with an "A" in it was the site's brand colour
   pretending to be wayfinding; this is the thing people actually look for on
   the street. Both parts are text, so the badge scales with the type around it
   instead of being a fixed-size image. */
.metro {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  vertical-align: -.18em;
  margin-right: .45em;
  font-family: var(--f-disp);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.metro__m,
.metro__a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: .82em;
  color: #fff;
}
.metro__m { background: #D9241F; border-radius: 2px; }
.metro__a { background: #F07E26; border-radius: 50%; }

/* The four places this restaurant already exists online. Icon-only, because
   the labels are in the accessible name and four words of "Facebook Instagram
   Google Just Eat" in a footer is noise. */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-blue-faint);
  border-radius: 50%;
  color: var(--plaster);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.social svg { width: 19px; height: 19px; display: block; }
.social a:hover {
  background: var(--plaster);
  border-color: var(--plaster);
  color: var(--blue);
  transform: translateY(-2px);
}

/* On the plaster ground (the location block) the same row inverts. */
.social--light a { border-color: var(--rule); color: var(--blue); }
.social--light a:hover { background: var(--blue); border-color: var(--blue); color: var(--plaster); }

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

.foot {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-block: clamp(2.8rem, 6vw, 4.2rem) clamp(1.6rem, 3vw, 2.2rem);
  font-size: .95rem;
}

.foot__in {
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--on-blue-faint);
}

.foot__disc { width: 54px; height: 54px; display: block; margin-bottom: .7rem; }

.foot__metro { display: inline-flex; align-items: center; }

.foot__name {
  margin: 0;
  font-family: var(--f-disp);
  font-weight: 700;
  font-stretch: 120%;
  font-size: 1.5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--plaster);
}
.foot__sub {
  margin: .3rem 0 0;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--on-blue-dim);
}

.foot__k {
  margin: 0 0 .6rem;
  font-family: var(--f-disp);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.foot__col p { color: var(--on-blue-dim); line-height: 1.7; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; padding: .1rem 0; }
.foot__col a, .foot__list a {
  color: var(--plaster);
  text-decoration-color: rgba(245, 246, 248, .4);
  text-underline-offset: .22em;
}
.foot__col a:hover, .foot__list a:hover { text-decoration-color: var(--gold-lift); }
.foot__list li { line-height: 1.3; }
.foot__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .1rem 0;
}

/* The end bar carries two unrelated things — a caveat about opening times and
   the agency credit. Side by side they competed and the credit lost, so they
   sit on their own rows and the credit gets the lower, terminal one. */
.foot__end {
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  display: grid;
  gap: .9rem;
  font-size: .82rem;
  color: var(--on-blue-dim);
}
.foot__note { margin: 0; }

@media (min-width: 760px) {
  .foot__end {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem 1.5rem;
  }
}
/* The agency credit. The x3ro mark is metallic blue-grey with a dark navy
   wordmark, so on the ultramarine footer it sinks into the ground and reads as
   a smudge — it gets its own plaster chip instead. The logo is sized by its
   RENDERED HEIGHT against the line of text beside it, never by width: matching
   widths would leave a wide logo towering over the sentence it belongs to. */
.foot__by {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
/* The mark alone is a metallic robot arm at credit size — a smudge, not a
   logo — so it is paired with the name set in the site's own display face.
   The mark is the badge, the words do the reading. */
.byx3ro {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;          /* the tap target, not the visible chip */
  padding: .5rem 0;
  text-decoration: none;
}
.byx3ro img {
  display: block;
  height: 30px;              /* sized by rendered height against the text */
  width: auto;
  padding: .26rem .34rem;
  background: var(--plaster);
  border-radius: 3px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.byx3ro span {
  font-family: var(--f-disp);
  font-weight: 600;
  font-stretch: 104%;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--plaster);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-lift);
  text-underline-offset: .22em;
}
.byx3ro:hover img {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 13, 20, .3);
}
.byx3ro:hover span { text-decoration-color: var(--plaster); }

@media (min-width: 700px) {
  .foot__in { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .foot__in { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ------------------------------------------------------------ reveals -- */

/* Scoped to .js (set by an inline script in <head>). Without scripting the
   content is simply there — no hidden page, no dependency on core.js loading. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }


/* ------------------------------------------------- staggered reveals -- */

/* A container marked data-stagger reveals its children in sequence rather than
   as one block. The delays are CSS-only: the container already receives .in
   from the one IntersectionObserver in core.js, so this adds no JS and no
   second observer. Opacity and transform are used rather than clip-path —
   a clip that collapses the observed element to zero area means it can never
   intersect, so the reveal never fires and lazy images inside it never load. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-stagger].in > * { opacity: 1; transform: none; }
.js [data-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].in > *:nth-child(2) { transition-delay: 60ms; }
.js [data-stagger].in > *:nth-child(3) { transition-delay: 120ms; }
.js [data-stagger].in > *:nth-child(4) { transition-delay: 180ms; }
.js [data-stagger].in > *:nth-child(5) { transition-delay: 240ms; }
.js [data-stagger].in > *:nth-child(6) { transition-delay: 300ms; }
.js [data-stagger].in > *:nth-child(7) { transition-delay: 360ms; }
.js [data-stagger].in > *:nth-child(8) { transition-delay: 420ms; }

/* Pictures settle rather than pop: the frame arrives first and the photograph
   inside it releases from a slight scale. Transform only — no layout work. */
.js [data-reveal] .fig__img,
.js [data-reveal] .dish__box img {
  transform: scale(1.05);
  transition: transform .9s var(--ease);
}
.js [data-reveal].in .fig__img,
.js [data-reveal].in .dish__box img { transform: none; }

.fig { overflow: hidden; }
.fig img { transition: transform .6s var(--ease); }
.fig:hover img { transform: scale(1.03); }

/* ------------------------------------------------ phone: tighten up -- */

/* The page had grown to six and a half phone screens. Everything below is
   vertical only — no type gets smaller, no tap target shrinks under 44px,
   nothing is hidden. It is padding, aspect ratios and column counts. */

@media (max-width: 719px) {
  .hero    { padding-block: 1.15rem 1.8rem; }
  .hero__in { gap: 1.25rem; }
  .sec        { padding-block: 2.6rem; }
  .sec--tight { padding-block: 2.3rem; }
  .sec__head  { margin-bottom: 1.4rem; }
  .sec__grid  { gap: 1.6rem; }

  /* eight plates in a plain 2×4 grid: the two wide cards were spending a full
     screen of height each to say the same thing as their neighbours */
  .dishes { gap: .55rem; }
  .dish--wide { grid-column: span 1; }
  .dish__box, .dish--wide .dish__box { aspect-ratio: 1 / 1; }
  .dish__n { margin-top: .5rem; font-size: .68rem; }

  /* the veranda is a 3:4 portrait; at full column width that is half a screen */
  .fig img { aspect-ratio: 16 / 11; }

  .acts { margin-top: 2.4rem; }
  .acts__in { padding-block: 3rem 2.4rem; gap: 1.9rem; }
  .acts__seal { width: 72px; height: 72px; }

  .loc { gap: 1.2rem; }
  .loc__list li { padding: .35rem 0; }

  .foot { margin-top: 2.6rem; padding-block: 2.2rem 1.4rem; }
  .foot__in { gap: 1.3rem; padding-bottom: 1.4rem; }
  .foot__name { font-size: 1.3rem; }
}

/* Two columns in the footer from the width where a phone can hold them, so the
   four blocks stop being four full-width rows. */
/* Bounded at the top end on purpose: this block sits after the footer's own
   980px four-column rule, so an open-ended min-width here would win the
   cascade and flatten the desktop footer back to two columns. */
@media (min-width: 380px) and (max-width: 699px) {
  .foot__in { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .bk-chip:hover, .bk-day:hover, .bk-slot:hover { transform: none !important; }
  .dish:hover .dish__box img { transform: none !important; }
  .bk-dates { scroll-behavior: auto; }
}