/* ===========================================================
   Marea Ristorante Italiano
   Palette sampled from the official logo file.
   =========================================================== */

:root {
  --paper:      #FBFAF8;
  --tide:       #DCEAEC;
  --menu-ink:   #4A4132;
  --teal:       #1A727E;
  --teal-deep:  #166670;
  --teal-dark:  #0F4D55;
  --teal-ink:   #123F46;
  --teal-soft:  #4A6469;
  --gold:       #F8BD59;
  --gold-soft:  #FBD894;
  --ink:        #171717;
  --cream:      #FBF9F6;
  --sand:       #F4EFE7;
  --line:       #E7DFD3;
  --wa:         #12833F;   /* deeper than WhatsApp's own green: white on it reads */
  --price:      #726856;   /* quieter than the dish name, still 5.2:1 on cream */

  --wrap: 1180px;
  --narrow: 900px;

  --display: "Lora", "Iowan Old Style", Georgia, serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--narrow); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0 0 .45em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.05rem, 4.8vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.25rem); text-wrap: balance; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1.1rem; }

/* the logo's own lettering style: light geometric caps, wide tracking */
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 1.2rem;
}
.eyebrow.on-teal { color: var(--gold); }
.tagline-type {
  font-family: var(--sans); font-weight: 400;
  letter-spacing: .14em; text-transform: none;
  font-size: clamp(.72rem, 1.5vw, .84rem);
}

.rule { width: 46px; height: 2px; background: var(--gold); border: 0; margin: 0 0 1.6rem; }
.rule.center { margin-left: auto; margin-right: auto; }

/* ---------------- header ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,249,246,.93);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 68px; }
.brand-link { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.brand-link img { width: 42px; height: 42px; object-fit: contain; }
.brand-link span { font-family: var(--display); font-size: 1.45rem; letter-spacing: .04em; }
.nav { display: none; gap: 1.7rem; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
/* The nav was set at opacity .8 over teal-ink, which lands just under 4.5:1 and
   also shrinks the hit area to 22 px. Full opacity with a slightly lighter ink
   reads the same and passes; the padding gives the 24 px target WCAG 2.2 asks for. */
.nav a { text-decoration: none; color: #2C555C; padding-block: 4px; }
.nav a:hover { opacity: 1; color: var(--teal); }
.langs { display: flex; gap: .2rem; font-size: .72rem; letter-spacing: .06em; font-weight: 500; }
.langs a { text-decoration: none; text-transform: uppercase; color: var(--teal-soft); padding: .25rem .45rem; border-radius: 2px; }
.langs a[aria-current="true"] { color: #fff; background: var(--teal); }
.site-head .head-cta { display: none; }
@media (min-width: 900px) { .nav { display: flex; } .site-head .head-cta { display: inline-flex; } }
@media (max-width: 430px) { .brand-link span { display: none; } }

/* mobile menu — a <details>, so it opens with JavaScript switched off */
.m-nav { position: relative; }
.m-nav > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.m-nav > summary::-webkit-details-marker { display: none; }
.m-nav > summary > span, .m-nav > summary > span::before, .m-nav > summary > span::after {
  display: block; width: 22px; height: 2px; background: var(--teal-ink); border-radius: 2px;
}
.m-nav > summary > span { position: relative; }
.m-nav > summary > span::before, .m-nav > summary > span::after { content: ""; position: absolute; left: 0; }
.m-nav > summary > span::before { top: -7px; }
.m-nav > summary > span::after { top: 7px; }
.m-nav[open] > summary > span { background: transparent; }
.m-nav[open] > summary > span::before { top: 0; transform: rotate(45deg); }
.m-nav[open] > summary > span::after { top: 0; transform: rotate(-45deg); }
.m-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 70;
  min-width: 210px; display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--cream); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
}
.m-panel a {
  text-decoration: none; color: var(--teal-ink); padding: .6rem .7rem; border-radius: 4px;
  font-size: .92rem;
}
.m-panel a:hover { background: var(--sand); }
.m-panel .btn { margin-top: .35rem; justify-content: center; }
/* the panel colours its links, which was also repainting the button's own text */
.m-panel .btn-teal, .m-panel .btn-wa { color: #fff; }
.m-panel .btn-gold { color: var(--ink); }
.m-panel .btn-out { color: var(--teal); }
@media (min-width: 900px) { .m-nav { display: none; } }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.6rem; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn-gold  { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-teal  { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); }
.btn-wa    { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #17903f; }
.btn-out   { border-color: var(--teal); color: var(--teal); }
.btn-out:hover { background: var(--teal); color: #fff; }
.btn-out-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-out-light:hover { background: #fff; color: var(--teal-ink); }
.btn-sm { padding: .6rem 1.1rem; font-size: .7rem; }

/* ---------------- hero ----------------
   Phone: one full-bleed layer — the photograph from the stylesheet, the film on
   top of it when it loads, a veil over both so the words read.
   Desktop: split down the middle. Brand colour and words on the left, the film
   on the right with nothing laid over it at all. */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: 4.5rem 0 4rem;
  /* anchored to the bottom: the photograph is square and a screen is not, so
     something has to go, and it is the ceiling rather than the table */
  background: var(--teal-dark) url("/assets/img/hero-fallback-900.webp") 58% bottom / cover no-repeat;
}
.hero .wrap { display: grid; gap: 2.8rem; align-items: center; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy h1, .hero-copy .lead, .hero-copy .eyebrow { text-shadow: 0 2px 22px rgba(8,42,47,.75); }
.hero-logo { width: 150px; height: auto; margin-bottom: 1.6rem; }
.hero h1 { color: #fff; text-wrap: balance; margin-bottom: .5em; }
.hero p.lead { max-width: 46ch; color: rgba(255,255,255,.92); font-size: 1.03rem; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero-figure { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  opacity: 0; transition: opacity .7s ease;
}
.hero-vid.is-on { opacity: 1; }

/* light enough that it still reads as a photograph */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;   /* above the film too */
  background:
    linear-gradient(90deg, rgba(11,56,62,.5) 0%, rgba(11,56,62,.24) 46%, rgba(11,56,62,0) 76%),
    linear-gradient(180deg, rgba(11,56,62,.24) 0%, rgba(11,56,62,.08) 38%, rgba(9,48,53,.6) 100%);
}
/* the still is dark and constant; the film swings from a black kitchen to a bright
   orange wall, so it gets a second veil, and only while it is actually playing */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .7s ease;
  background:
    linear-gradient(90deg, rgba(9,48,53,.5) 0%, rgba(9,48,53,.28) 55%, rgba(9,48,53,.1) 100%),
    linear-gradient(180deg, rgba(9,48,53,.3) 0%, rgba(9,48,53,.2) 45%, rgba(8,42,47,.55) 100%);
}
.hero-vid.is-on ~ .hero-scrim { opacity: 1; }

@media (max-width: 939px) {
  .hero { min-height: 86svh; display: flex; align-items: center; padding: 3.5rem 0 4rem; }
  .hero .wrap { width: 100%; }
}

@media (min-width: 940px) {
  /* Half and half. The film owns the right side outright — no veil, no fade —
     because nothing has to be read on top of it there. Half a photograph on the
     left just looked like a crop, so the left is the brand colour instead. */
  .hero {
    min-height: 76svh; display: flex; align-items: center; padding: 5rem 0;
    background-image: none;
    /* teal-dark, not teal: the eyebrow and the lead sit on this panel, and brand
       gold on mid teal is 3.3:1. One step deeper and everything on it reads. */
    background-color: var(--teal-dark);
  }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-copy { padding-right: 2.4rem; }
  .hero::before {
    right: 50%;
    background:
      radial-gradient(75% 65% at 20% 15%, rgba(248,189,89,.16), transparent 70%),
      radial-gradient(80% 70% at 10% 95%, rgba(15,77,85,.6), transparent 72%);
  }
  /* the photograph travels with the film, so the right half still shows
     something if the film never loads */
  .hero-figure {
    inset: 0 0 0 50%; z-index: 2;
    background: var(--teal-dark) url("/assets/img/hero-fallback-1640.webp") center / cover no-repeat;
  }
  .hero-scrim { display: none; }
}

/* ---------------- sections ---------------- */
section { padding: 5rem 0; position: relative; overflow: hidden; }
.sect-mark { position: absolute; left: -30px; top: 46px; height: 300px; width: auto;
  opacity: .085; pointer-events: none; user-select: none; }
.sect-mark.right { left: auto; right: -20px; top: 60px; height: 340px; }
@media (max-width: 900px) { .sect-mark { display: none; } }
.alt { background: var(--sand); }
.section-head { max-width: 52ch; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--teal-soft); margin: 0; }

/* ---------------- pillars ---------------- */
.pillars { display: grid; gap: 2.6rem; }
@media (min-width: 780px) { .pillars { grid-template-columns: repeat(3,1fr); gap: 3rem; } }
.pillar { text-align: center; }
.pillar .ico { height: 66px; margin: 0 auto 1.2rem; display: flex; align-items: flex-end; justify-content: center; }
.pillar .ico img { height: 74px; width: auto; opacity: .9; }
.pillar .ico svg { width: 62px; height: 62px; }
.pillar h3 { font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: .7rem; }
.pillar p { color: var(--teal-soft); font-size: 1rem; margin: 0; }

/* ---------------- menu ---------------- */
.menu-cols { column-gap: 5.5rem; }
@media (min-width: 860px) { .menu-cols { columns: 2; } }
.course { break-inside: avoid-column; margin: 0 0 3.4rem; display: flow-root; }
.course:first-child > h3 { margin-top: 0; }
.course-head { margin: 0 0 1.6rem; }
.course-head h3 {
  font-family: var(--sans); font-weight: 500; color: var(--teal);
  font-size: clamp(1.05rem, 3.4vw, 1.45rem); letter-spacing: -.01em; text-transform: none;
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
}
.course-ico { width: 30px; height: 30px; flex: none; color: var(--teal); }
/* hairline with a dot at each end — lifted straight from the printed menu */
.course-rule { display: block; height: 1px; background: var(--line); position: relative; margin: 0 6px; }
.course-rule::before, .course-rule::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
}
.course-rule::before { left: -6px; } .course-rule::after { right: -6px; }
.course > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* one dish = a grid row. The price owns its own column, so a wrapping
   description can never end up sitting underneath the price. */
/* Name and price share one baseline, so the price is unmistakably the name's.
   Everything else runs full width beneath it. No photo column any more — the
   dishes are shown in the homepage carousel and reels instead. */
.dish { margin: 0 0 2.2rem; }
.dish-head { display: flex; align-items: baseline; gap: 1.2rem; }
.dish-name {
  font-family: var(--sans); font-size: 1.12rem; font-weight: 500;
  line-height: 1.4; margin: 0; color: var(--menu-ink); flex: 1;
}
.dish-price {
  margin: 0; font-family: var(--sans); font-size: .88rem; font-weight: 400;
  color: var(--price); white-space: nowrap; text-align: right; max-width: 8.5rem;
  font-variant-numeric: tabular-nums;
}
/* qualifies the price ("min. 2 people"), so it belongs in the price column —
   but it must be allowed to wrap, or it drags the whole column wide and squeezes
   the dish name into three lines */
.dish-note { display: block; font-size: .8rem; font-weight: 400; color: #756954;
  white-space: normal; line-height: 1.35; margin-top: .1rem; }
.dish-desc { margin: .3rem 0 0; font-family: var(--display); font-size: 1.06rem;
  line-height: 1.5; color: #62584b; }
.dish-pair { margin: .45rem 0 0; font-size: .9rem; }
.dish-pair a {
  display: inline-flex; align-items: center; gap: .38rem;
  color: var(--teal); text-decoration: none;
  border-bottom: 1px solid rgba(30,126,139,.28); padding-bottom: 1px;
}
.dish-pair a:hover { border-bottom-color: var(--teal); }
.dish-pair svg { width: 14px; height: 14px; flex: none; }
.dish-price.wine { display: flex; gap: 2rem; }
.dish-price.wine span { width: 66px; text-align: right; }
.dish-price.wine span.empty { color: #79705F; font-weight: 400; }

.allergen-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--teal-soft); }

/* wine */
.wine-cols { column-gap: 5.5rem; }
@media (min-width: 860px) { .wine-cols { columns: 2; } }
.course.wine > h3::after { content: none; }
.course.wine > h3 .ln { flex: 1; height: 1px; background: var(--line); }
.wine-labels { display: flex; gap: 2.2rem; font-size: .66rem; letter-spacing: .08em; color: var(--teal-soft); font-weight: 400; }
.wine-labels span { width: 62px; text-align: right; }
.wine-prices { display: flex; gap: 2.2rem; }
.wine-prices span { width: 62px; text-align: right; font-size: .95rem; font-weight: 500; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.wine-prices span.empty { color: #79705F; }

/* ---------------- about ---------------- */
.about { display: grid; gap: 2.8rem; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: .95fr 1.05fr; gap: 4.5rem; } }
.about p { color: var(--teal-soft); }
.about .chef { font-family: var(--display); font-size: 1.3rem; color: var(--teal); margin-top: 1.8rem; }
.about-figs img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 220px 220px 3px 3px;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.55);
}
/* the room, sitting with the sentence about the room */
.about-inline { margin: 1.6rem 0 1.5rem; }
.about-inline img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 3px; }

/* ---------------- gallery ---------------- */
.gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(4,1fr); } }
.gallery img { aspect-ratio: 1/1; object-fit: cover; border-radius: 3px; }

/* ---------------- reviews ---------------- */
.rating { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 2.6rem; font-size: .9rem; color: var(--teal-soft); }
.rating strong { font-family: var(--display); font-size: 2rem; color: var(--teal-ink); line-height: 1; }
.stars { color: var(--gold); letter-spacing: .12em; }
.quotes { display: grid; gap: 1.4rem; }
@media (min-width: 780px) { .quotes { grid-template-columns: repeat(3,1fr); } }
.quote { background: var(--cream); border: 1px solid var(--line); border-radius: 3px; padding: 2rem 1.7rem; text-align: center; }
.alt .quote { background: #fff; }
.quote blockquote { margin: 0 0 1rem; font-family: var(--display); font-size: 1.3rem; line-height: 1.35; color: var(--teal-ink); }
.quote cite { font-style: normal; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-soft); }

/* ---------------- visit ---------------- */
.visit { display: grid; gap: 2.8rem; }
@media (min-width: 860px) { .visit { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.info { margin: 0 0 1.7rem; }
.info dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: .3rem; }
.info dd { margin: 0; color: var(--teal-ink); }
.info a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { padding: .6rem 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; color: var(--teal-ink); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-closed th, .hours tr.is-closed td { color: #6E5F4B; }

/* ---------------- book ---------------- */
.book { background: var(--teal); color: #fff; text-align: center; padding: 5.5rem 0; position: relative; overflow: hidden; }
.book::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 0%, rgba(248,189,89,.18), transparent 70%); }
.book .wrap { position: relative; z-index: 2; }
.book h2 { color: #fff; }
.book p { max-width: 46ch; margin: 0 auto 2.2rem; color: rgba(255,255,255,.9); }
.book-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---------------- footer ---------------- */
.site-foot { background: var(--teal-dark); color: rgba(255,255,255,.72); padding: 3rem 0 6.5rem; font-size: .85rem; }
.site-foot .wrap { display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.site-foot img { width: 68px; opacity: .95; }
.site-foot a { color: rgba(255,255,255,.9); }
.site-foot .fine { font-size: .78rem; color: rgba(255,255,255,.72); }
@media (min-width: 860px) { .site-foot { padding-bottom: 3rem; } }

/* ---------------- sticky mobile bar ---------------- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: 1px; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bar a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 1rem .4rem; text-decoration: none; background: var(--cream); color: var(--teal-ink);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.bar a.wa { background: var(--wa); color: #fff; flex: 1.6 1 0; }
.bar a.icon-only { flex: 0 0 58px; }
.bar svg { width: 17px; height: 17px; fill: currentColor; }
@media (min-width: 860px) { .bar { display: none; } }

/* ---------------- build warning ---------------- */
.build-warning { background: #8a2b12; color: #fff; text-align: center; padding: .6rem 1rem; font-size: .78rem; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------------- homepage teaser ---------------- */
.teaser { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.teaser li {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line); text-align: center;
}
.t-ico { color: var(--teal); line-height: 0; margin-bottom: .3rem; }
.t-ico .course-ico { width: 48px; height: 48px; opacity: 1; stroke-width: 1.9; }
.teaser li:first-child { border-top: 1px solid var(--line); }
.t-name { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.t-desc { font-size: .97rem; color: var(--teal-soft); }
.center-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 2.6rem 0 0; }

/* ---------------- menu pages ---------------- */
.nav a.on { opacity: 1; color: var(--teal); }
.menu-page .menu-hero { padding: 3.6rem 0 2.4rem; }
.menu-page .menu-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: .25em; }
.menu-page .menu-hero .lead { color: var(--teal-soft); max-width: 54ch; margin: 0; }
.menu-page .season {
  margin: 1rem 0 0; font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: #8A6716;
}
.menu-foot {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .dish-lead { display: none; }
  .dish-top { gap: 1rem; }
  .menu-foot .btn { flex: 1 1 auto; }
}

/* ---------------- bigger, clearer calls to action ---------------- */
.btn-lg { padding: 1.05rem 2.1rem; font-size: .88rem; }
.menu-book { padding: 4.5rem 0; }
.menu-book h2 { margin-bottom: .3em; }
.menu-foot {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
  .dish { gap: .3rem 1.1rem; margin-bottom: 1.9rem; }
  .book-cta .btn { flex: 1 1 100%; }
}

/* ---------------- map ---------------- */
.map { margin-top: 3.2rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); background: var(--sand); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; filter: saturate(.9); }

/* On a phone three columns squeeze the name to nothing. Stack the price under the
   text and let the photo span both rows instead. */
@media (max-width: 700px) {
  .dish { margin-bottom: 1.9rem; }
  .dish-head { gap: .8rem; }
}

@media (max-width: 620px) {
  .map iframe { height: 240px; }
}

/* ---------------- reels ---------------- */
/* three across on a desktop, two on a phone. Nine cards is odd, so on a phone
   the last one takes the full width and closes the block instead of leaving a
   gap next to it. */
.reels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 939px) {
  .reels > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 940px) { .reels { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.reel {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  text-decoration: none; background: var(--teal-dark);
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.55);
}
.reel img, .reel video { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.reel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(15,77,85,.55) 62%, rgba(12,62,68,.94) 100%);
}
.reel-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.05rem .95rem; color: #fff; font-weight: 500; line-height: 1.25;
  font-family: var(--display); letter-spacing: 0;
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.reel:hover img, .reel:hover video { transform: scale(1.03); transition: transform .4s ease; }

/* ---------------- carousel ---------------- */
.carousel { position: relative; margin-top: .5rem; }
#gallery .section-head { margin-top: 2.6rem; }
@media (min-width: 780px) { #gallery .section-head { margin-top: 3.6rem; } }
.cs-track {
  display: flex; gap: 18px; list-style: none; margin: 0; padding: 2.2rem 0 2.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-padding-inline: 50%;
}
.cs-track::-webkit-scrollbar { display: none; }
.cs-track::before, .cs-track::after { content: ""; flex: 0 0 calc(50vw - 190px); }
.cs-item {
  flex: 0 0 300px; scroll-snap-align: center;
  transform: scale(.86); opacity: .55;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.cs-item.is-mid { transform: scale(1); opacity: 1; }
/* a strip that rolls on its own cannot also snap — the two fight every frame */
[data-autoscroll] .cs-track { scroll-snap-type: none; }
[data-autoscroll] .cs-item { scroll-snap-align: none; }
.cs-item img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px;
  box-shadow: 0 22px 44px -26px rgba(0,0,0,.5);
}
.cs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(251,249,246,.92); color: var(--teal-ink);
  font-size: 1.5rem; line-height: 1; display: none;
}
.cs-nav.prev { left: 18px; } .cs-nav.next { right: 18px; }
.cs-nav:hover { background: #fff; }
@media (min-width: 900px) {
  .cs-nav { display: block; }
  .cs-item { flex: 0 0 380px; }
  .cs-track::before, .cs-track::after { flex: 0 0 calc(50vw - 230px); }
}

/* ---------------- dish meta line ---------------- */
.dish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; }
.badge {
  font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap;
}
.badge-pick { background: transparent; color: #87661A; border: 1px solid #e2c78d; }
.badge-veg { background: transparent; color: #476837; border: 1px solid #bcd4ad; }

/* ---------------- allergens, per dish ----------------
   Deliberately the quietest thing in the row: it is there for the one guest in
   twenty who needs it, and invisible to the other nineteen. Faded, but 4.56:1 on
   the paper — "a bit faded" cannot mean "unreadable by the person who needs it
   most", and at 12px AA wants 4.5:1. */
.alg { position: relative; display: inline-block; }
.alg > summary {
  display: inline-flex; align-items: center; gap: 0;
  list-style: none; cursor: pointer; user-select: none;
  font-size: .76rem; letter-spacing: .02em; color: #7A7263;
  padding: .28rem .1rem; margin: -.28rem 0;      /* keeps the 24px tap target */
  min-height: 24px; border-radius: 4px;
  transition: color .15s ease;
}
.alg > summary::-webkit-details-marker { display: none; }
.alg > summary:hover { color: var(--teal); }
.alg[open] > summary { color: var(--teal); }
.alg-star { opacity: .75; }

.alg-pop {
  position: absolute; z-index: 40; top: calc(100% + .45rem); left: -.55rem;
  min-width: 11.5rem; max-width: min(17rem, 74vw);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 22, 10, .13), 0 2px 6px rgba(30, 22, 10, .06);
  padding: .6rem .75rem;
  animation: alg-in .13s ease-out;
}
.alg.is-right .alg-pop { left: auto; right: -.55rem; }
@keyframes alg-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .alg-pop { animation: none; } }
.alg-pop::before {
  content: ""; position: absolute; top: -5px; left: 1rem; width: 8px; height: 8px;
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.alg.is-right .alg-pop::before { left: auto; right: 1rem; }
.alg-pop ul { list-style: none; margin: 0; padding: 0; }
.alg-pop li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; line-height: 1.3; color: var(--menu-ink);
  padding: .2rem 0;
}
.alg-ico { width: 17px; height: 17px; flex: none; color: var(--teal); opacity: .72; }

/* ---------------- wine rows + profile card ---------------- */
.wine-open {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.wine-open .dish-head { display: flex; align-items: baseline; gap: 1.2rem; }
.wine-open .dish-name { flex: 1; }
.wine-open .dish-desc { display: block; }
.wine-more {
  display: inline-block; margin-top: .4rem; font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal);
  border-bottom: 1px solid rgba(30,126,139,.3); padding-bottom: 1px;
}
.wine-open:hover .wine-more { border-bottom-color: var(--teal); }

dialog.wine-card {
  width: min(440px, calc(100vw - 2rem)); border: 0; border-radius: 12px; padding: 1.9rem 1.6rem 1.7rem;
  background: var(--cream); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0,0,0,.45);
}
dialog.wine-card::backdrop { background: rgba(15,45,50,.55); backdrop-filter: blur(2px); }
.wc-x {
  position: absolute; top: .6rem; right: .7rem; width: 34px; height: 34px;
  border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--teal-soft);
}
.wc-kicker { margin: 0 0 .2rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); }
dialog.wine-card h3 { font-size: 1.5rem; margin: 0 0 .5rem; }
.wc-desc { margin: 0 0 1.2rem; font-size: .93rem; line-height: 1.55; color: var(--teal-soft); }
.wc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: 0 0 1.2rem;
  padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wc-facts dt { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .15rem; }
.wc-facts dd { margin: 0; font-size: .95rem; }
.wc-price { display: flex; gap: 1.4rem; margin: 0; font-size: .86rem; color: var(--teal-soft); }
.wc-price b { font-size: 1.05rem; color: var(--teal); font-variant-numeric: tabular-nums; }
.wc-pairs { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.wc-pairs h4 { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 .5rem; }
.wc-pairs ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--teal-soft); }
.wc-pairs li { padding: .2rem 0 .2rem .9rem; position: relative; }
.wc-pairs li::before { content: "·"; position: absolute; left: .15rem; color: var(--gold); font-weight: 700; }

@media (max-width: 560px) {
  dialog.wine-card {
    width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0;
    padding: 1.7rem 1.3rem 2rem;
  }
  .wc-facts { grid-template-columns: 1fr 1fr; }
}
.wc-cta { display: flex; margin-top: 1.5rem; width: 100%; }

/* ---------------- menu pages: the printed menu, reflowed ---------------- */
.menu-page { background: var(--paper); }
.menu-page .menu-hero, .menu-page .menu-body { background: transparent; }
/* The printed menu's own background, taken out of the PDF itself: the watercolour
   wash and the pencil drawings from four pages, with the words, the rules and the
   tide band stripped out at the PDF level so nothing had to be painted over.
   Four printed pages tall, so it tiles down the page the way the menu turns. */
.menu-page .menu-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("/assets/img/page-bg.jpg") repeat-y top center;
  background-size: 100% auto;
  opacity: .5;    /* texture, never competition for the dish names */
}
@media (min-width: 860px) {
  /* on a wide screen one page of wash would stretch to a smear — hold it to
     roughly the proportions of the printed page and centre it */
  .menu-page .menu-body::before { background-size: 860px auto; }
}
.menu-page .wrap { position: relative; z-index: 1; }

/* the tide that closes each printed page */
.tide { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; pointer-events: none; }
.tide svg { width: 100%; height: 78px; display: block; }
.tide path { fill: var(--tide); }

/* sticky section chips — the main scanning aid on a phone */
.sec-nav {
  position: sticky; top: 68px; z-index: 40;
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  padding: .7rem 24px; margin-bottom: 1.6rem;
  background: rgba(251,250,248,.94); backdrop-filter: saturate(150%) blur(8px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav a {
  flex: none; text-decoration: none; white-space: nowrap;
  font-size: .78rem; font-weight: 500; color: var(--teal);
  padding: .38rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
}
.sec-nav a:hover { border-color: var(--teal); }
.course { scroll-margin-top: 138px; }

.wine-labels { display: flex; justify-content: flex-end; margin: -.4rem 0 1.1rem; }

/* ---------------- phone ----------------
   Everything here is sized to be read at arm's length without pinching. 16px is
   the floor for anything that is a sentence; iOS also stops offering to zoom the
   page at that size. Fitting more dishes on a screen is not worth a squint. */
@media (max-width: 700px) {
  .menu-page .menu-hero { padding: 2rem 0 1.2rem; }
  .menu-page .menu-hero h1 { font-size: 2rem; }
  .menu-page .menu-hero .lead { font-size: 1.02rem; line-height: 1.5; }
  .sec-nav { top: 62px; padding-left: 20px; padding-right: 20px; }
  .sec-nav a { font-size: .88rem; padding: .42rem .9rem; }
  .course { margin-bottom: 2.6rem; scroll-margin-top: 126px; }
  .course-head { margin-bottom: 1.2rem; }
  .course-head h3 { font-size: 1.28rem; }
  .dish { margin-bottom: 1.7rem; }
  .dish-name { font-size: 1.08rem; line-height: 1.34; }
  .dish-price { font-size: .92rem; }
  .dish-desc { font-size: 1rem; line-height: 1.46; margin-top: .22rem; }
  .dish-pair { margin-top: .34rem; font-size: .92rem; }
  .dish-meta { margin-top: .38rem; gap: .35rem; }
  .badge { font-size: .72rem; padding: .2rem .55rem; }
  .alg > summary { font-size: .8rem; }
  .alg-pop li { font-size: .86rem; }
  .dish-note { font-size: .84rem; }
  .allergen-note { font-size: .96rem; }
  .tide svg { height: 52px; }
}

/* ---------------- questions people actually ask ---------------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2rem 1.15rem 0;
  position: relative; display: block;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary :is(h2, h3, h4) {
  display: inline; font-family: var(--sans); font-size: 1.02rem; font-weight: 500;
  color: var(--teal-ink); margin: 0; letter-spacing: 0;
}
.faq-item summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 9px; height: 9px;
  margin-top: -6px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item p { margin: -.2rem 0 1.3rem; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.6; color: #55504a; max-width: 62ch; }
@media (max-width: 700px) {
  .faq-item summary :is(h2, h3, h4) { font-size: 1.02rem; }
  .faq-item p { font-size: 1rem; }
}

/* ---------------- the journal ---------------- */
.blog-hero { padding: 3.8rem 0 2.2rem; }
.blog-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); margin-bottom: .3em; }
.blog-hero .lead { color: var(--teal-soft); font-size: 1.06rem; max-width: 56ch; margin: 0; }

.pgrid { display: grid; gap: 26px; }
@media (min-width: 720px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 30px; } }

.pcard > a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard > a:hover { transform: translateY(-3px); border-color: #d8ccb8;
  box-shadow: 0 22px 46px -30px rgba(0,0,0,.45); }
.pcard-fig { background: var(--sand); }
.pcard-fig img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pcard-fig:empty { display: none; }
.pcard-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pcard-meta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: #776D5F; margin: 0 0 .6rem; }
.pcard h2 { font-size: 1.28rem; line-height: 1.25; margin: 0 0 .5rem; color: var(--teal-ink); }
.pcard-desc { font-family: var(--display); font-size: 1rem; line-height: 1.5;
  color: #62584b; margin: 0 0 1.1rem; }
.pcard-more { margin-top: auto; font-size: .76rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal); }
.muted { color: var(--teal-soft); }

/* ---------------- one article ---------------- */
.post { padding-top: 2.6rem; }
.post-crumb { font-size: .82rem; margin-bottom: 1.4rem; }
.post-crumb a { color: var(--teal); text-decoration: none; }
.post h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: .35em; text-wrap: balance; }
.post-standfirst { font-family: var(--display); font-size: 1.2rem; line-height: 1.55;
  color: #5b5348; margin: 0 0 1.2rem; max-width: 60ch; }
.post-meta { font-size: .82rem; letter-spacing: .04em; color: #776D5F; margin: 0 0 2.2rem; }
.post-hero { margin: 0 0 2.6rem; }
.post-hero img { width: 100%; max-height: 62vh; object-fit: cover; }
@media (min-width: 900px) { .post-hero img { border-radius: 6px; } }

/* One column, 66 characters wide, serif. Everything here is in service of a
   person reading nine hundred words on a phone in a queue. */
.post-body { font-family: var(--display); font-size: 1.12rem; line-height: 1.72; color: #33302b; }
.post-body > p { max-width: 66ch; margin: 0 0 1.35rem; }
.post-body h2 {
  font-family: var(--sans); font-weight: 500; font-size: 1.45rem; line-height: 1.3;
  color: var(--teal-ink); margin: 2.8rem 0 .9rem; scroll-margin-top: 96px; max-width: 30ch;
}
.post-body h3 { font-family: var(--sans); font-weight: 500; font-size: 1.15rem;
  color: var(--teal-ink); margin: 2rem 0 .7rem; scroll-margin-top: 96px; }
.post-body ul, .post-body ol { max-width: 64ch; margin: 0 0 1.35rem; padding-left: 1.25rem; }
.post-body li { margin-bottom: .5rem; }
.post-body a { color: var(--teal); text-decoration: none;
  border-bottom: 1px solid rgba(30,126,139,.32); }
.post-body a:hover { border-bottom-color: var(--teal); }
.post-body img { width: 100%; border-radius: 5px; margin: 2rem 0; }
.post-body blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 2px solid var(--gold);
  max-width: 62ch;
}
.post-body blockquote p { font-size: 1.22rem; line-height: 1.6; color: var(--teal-ink); margin: 0; }
.post-body .post-rule { width: 46px; height: 2px; background: var(--line); border: 0; margin: 2.6rem 0; }
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--sand); padding: .1em .35em; border-radius: 3px; }
.post-table { overflow-x: auto; margin: 2rem 0; }
.post-table table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .96rem; }
.post-table th, .post-table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.post-table th { font-weight: 500; color: var(--teal); font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; }

/* A contents list is the cheapest way to let someone — or an assistant quoting
   the page — find the one section they came for. */
.post-toc {
  font-family: var(--sans); font-size: .95rem; background: var(--cream);
  border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.4rem; margin: 0 0 2.4rem;
  max-width: 52ch;
}
.post-toc > p { font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 .6rem; }
.post-toc ol { margin: 0; padding-left: 1.1rem; }
.post-toc li { margin-bottom: .35rem; }
.post-toc a { color: var(--teal-ink); text-decoration: none; }
.post-toc a:hover { color: var(--teal); }

.post-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 3rem 0 0;
  padding-top: 2rem; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  .post-body { font-size: 1.08rem; }
  .post-body h2 { font-size: 1.3rem; margin-top: 2.2rem; }
  .post-standfirst { font-size: 1.1rem; }
}

/* the byline, with a face on it */
.post-author {
  display: grid; gap: 1.2rem; align-items: start; margin: 3rem 0 0;
  padding: 1.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--cream);
}
@media (min-width: 620px) { .post-author { grid-template-columns: 110px 1fr; gap: 1.5rem; } }
.post-author img { width: 110px; height: 138px; object-fit: cover; border-radius: 5px; }
.post-author p { font-family: var(--display); font-size: 1rem; line-height: 1.55;
  color: #5b5348; margin: 0 0 .6rem; max-width: 58ch; }
.post-author-h { font-family: var(--sans) !important; font-size: .74rem !important;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.post-author a { color: var(--teal); text-decoration: none; display: inline-block;
  padding-block: 3px; min-height: 24px; font-family: var(--sans);
  font-size: .9rem; font-weight: 500; }

/* ---------------------------------------------------------------- reservas · FAQ · 404
   Three small pages that carry a lot of the local-SEO weight: a real booking
   destination for the Google Business Profile action link, every operational
   fact as visible text, and a 404 that offers a way back instead of a dead end. */
.prose { font-family: var(--display); font-size: 1.1rem; line-height: 1.72; color: #4c463d; }
.prose h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.42rem; letter-spacing: -.01em;
  color: var(--teal-ink); margin: 2.6rem 0 .8rem; max-width: 34ch;
}
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: 62ch; margin: 0 0 1.25rem; }
.prose p.post-cta { margin: 3rem 0 0; max-width: none; overflow: visible; }
.prose p.note-strong { max-width: 54ch; }
.prose a:not(.btn) { color: var(--teal); text-decoration: none;
  border-bottom: 1px solid rgba(30,126,139,.32); }
.prose a:not(.btn):hover { border-bottom-color: var(--teal); }
.prose .hours { max-width: 34rem; font-family: var(--sans); }

/* the two ways to actually reach the restaurant, side by side under the H1 */
.book-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }

/* the closed days, said once in a place nobody can skim past */
.note-strong {
  font-family: var(--sans); font-size: .96rem; line-height: 1.6; color: var(--teal-ink);
  background: var(--cream); border-left: 3px solid var(--gold); border-radius: 0 5px 5px 0;
  padding: .9rem 1.1rem; margin: 1.2rem 0 0; max-width: 54ch;
}

/* short page, tall screen: without this the footer floats and leaves a bare strip
   of background under it */
main.nf { min-height: 58vh; }
.nf-links { list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: .55rem 1.6rem; font-family: var(--sans); }
.nf-links a { color: var(--teal); text-decoration: none; font-size: 1rem;
  border-bottom: 1px solid rgba(30,126,139,.3); padding-bottom: 2px; }
.nf-links a:hover { border-bottom-color: var(--teal); }

/* the FAQ page opens every answer, so the borders need to breathe a little more */
.faq-open { max-width: none; margin: 0; }
.faq-open .faq-item summary { cursor: default; }
.faq-open .faq-item p { margin-bottom: 1.6rem; }

@media (max-width: 700px) {
  .prose { font-size: 1.06rem; }
  .prose h2 { font-size: 1.26rem; margin-top: 2.2rem; }
  .book-actions .btn, .prose .post-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* <picture> only exists to offer the browser a WebP; it must not become a layout box
   of its own, or every `width: 100%` on the image inside it resolves against a
   shrink-wrapped inline parent instead of the card. */
picture { display: block; }


/* ---------------------------------------------------------------- tap targets
   WCAG 2.2 asks for 24 x 24 CSS px on anything you have to hit. Links inside a
   sentence are explicitly exempt, so this only pads the ones standing on their own:
   the address block, the footer, the journal's back link and its contents list. */
:is(.vcard, .site-foot, .post-toc, .post-crumb, .prose, .nf-links, .post-cta) a:not(.btn) {
  display: inline-block; padding-block: 3px; min-height: 24px;
}
.nf-links a { display: inline-block; min-height: 24px; }

/* ---------------------------------------------------------------- skip link
   The header carries six links and a language switcher before the content starts.
   Anyone on a keyboard or a screen reader would otherwise walk all of it on every
   page. Invisible until focused. */
.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--teal-ink); color: #fff; text-decoration: none;
  font-family: var(--sans); font-size: .9rem; padding: .7rem 1.1rem; border-radius: 0 0 4px 4px;
  transition: top .16s;
}
.skip:focus { top: 0; }

/* A visible focus ring everywhere, because the default one disappears against the
   teal panels. :focus-visible so a mouse click does not draw it. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}

/* ---------------------------------------------------------------- about page
   The video, the questions still waiting on Bruno and Giada, and the notice that
   says so. This whole block is only reachable from /nosotros/ (and its two
   translations), which is noindex and unlinked until the questions are answered. */
.vid-h { font-family: var(--display); font-weight: 500; font-size: 1.5rem;
  color: var(--teal-ink); margin: 0 0 .4rem; }
.vid-lead { font-family: var(--display); font-size: 1.06rem; line-height: 1.6;
  color: #4c463d; max-width: 58ch; margin: 0 0 1.6rem; }
.vid-wrap { position: relative; border-radius: 8px; overflow: hidden; background: var(--sand); }
.vid-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* A button, not a div: it is the thing you press, so it should be reachable from a
   keyboard and announced as pressable without any extra ARIA. */
.vid-facade {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; color: #fff;
}
.vid-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,48,53,.1) 0%, rgba(9,48,53,.55) 100%);
}
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%; background: rgba(251,249,246,.94);
  z-index: 2; transition: transform .18s;
}
.vid-play::before {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%,-50%);
  border: 13px solid transparent; border-left: 21px solid var(--teal-ink);
}
.vid-facade:hover .vid-play { transform: translate(-50%,-50%) scale(1.07); }
.vid-label {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 2;
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.vid-wrap iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.vid-pending {
  font-family: var(--sans); font-size: .92rem; line-height: 1.6; color: var(--teal-ink);
  background: var(--cream); border-top: 1px solid var(--line);
  margin: 0; padding: .9rem 1.1rem;
}

/* An unanswered question, rendered so that it can never be mistaken for copy. */
.ask {
  display: block; background: #FFF6E0; border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0; padding: .7rem .95rem; margin: .2rem 0 .9rem;
  font-family: var(--sans); font-size: .92rem; line-height: 1.55; color: #4A3F27;
}
.ask b { display: inline-block; margin-right: .5rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8A6716; }

.draft-note {
  font-family: var(--sans); font-size: .92rem; line-height: 1.6; color: var(--teal-ink);
  background: var(--tide); border-radius: 6px; padding: 1rem 1.2rem; margin: 1.6rem 0 0;
  max-width: 62ch;
}
.draft-note b { display: inline-block; margin-right: .5rem; font-size: .72rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }

/* ---------------------------------------------------------------- live hours
   The grid only appears once Google has answered; before that the block shows the
   handful of times that never move. Neither state may claim a fixed closing day. */
.hours-live { font-family: var(--sans); }
.hours-status { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .8rem; padding: .3rem .7rem; border-radius: 999px; }
.hours-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hours-status.is-open { color: #1F6B3C; background: #E4F2E8; }
.hours-status.is-shut { color: #8A3A2A; background: #F7E7E2; }
.hours-google tr.is-today th, .hours-google tr.is-today td { font-weight: 600; color: var(--teal-ink); }
.hours-lead { font-size: .88rem; color: #6B6154; margin: 0 0 .5rem; }
.hours-known ul { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.hours-known li { padding: .42rem 0; border-bottom: 1px solid var(--line); color: var(--teal-ink); }
.hours-known li:last-child { border-bottom: 0; font-weight: 500; }
.hours-note { font-size: .9rem; line-height: 1.6; color: #5F5A52; margin: 1rem 0 0; max-width: 56ch; }
.hours-src { margin: .7rem 0 0; font-size: .9rem; }
.hours-src a { color: var(--teal); text-decoration: none; }

/* the status pill and the grid are both empty until Google answers; an empty node in
   prose flow still draws a bullet or a blank line */
.hours-live p:empty, .hours-live table:empty { display: none; }
.prose .hours-known ul { list-style: none; padding-left: 0; }




/* ---------------------------------------------------------------- dish rows
   Two columns for every dish: a square slot on the left with the price beneath it,
   and the text on the right. The slot is always there — a photograph when one
   exists, the course's own mark when it does not — because a left edge where some
   rows have an image and some don't reads as broken rather than as work in progress. */
.menu-cols .dish {
  display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start;
}
.dish-media { grid-column: 1; }
.dish-body { grid-column: 2; min-width: 0; }
.menu-cols .dish-head { display: block; }

.dish-shot {
  display: block; width: 96px; padding: 0; border: 0; background: var(--sand);
  border-radius: 8px; overflow: hidden;
}
button.dish-shot { cursor: zoom-in; }
.dish-shot img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  transition: transform .25s; }
button.dish-shot:hover img { transform: scale(1.04); }

/* no photograph yet: the course mark, centred and quiet */
.dish-shot.is-blank {
  aspect-ratio: 1/1; display: grid; place-items: center;
  background: var(--sand); border: 1px solid var(--line);
}
.dish-shot.is-blank svg { width: 38%; height: 38%; opacity: .38; }
.dish-shot.is-blank svg * { stroke: var(--teal); fill: none; }

/* the price sits under the slot, quieter than the dish name — it is confirmation,
   not the headline */
.dish-media .dish-price {
  margin: .5rem 0 0; font-family: var(--sans); font-size: .95rem; font-weight: 500;
  color: var(--price); opacity: .78; text-align: left; white-space: nowrap; max-width: none;
}

.dish-shot[aria-expanded="true"] { width: 100%; cursor: zoom-out; }
.dish-shot[aria-expanded="true"] img { aspect-ratio: 4/3; }
.menu-cols .dish:has(.dish-shot[aria-expanded="true"]) { grid-template-columns: 1fr; }
.menu-cols .dish:has(.dish-shot[aria-expanded="true"]) .dish-body { grid-column: 1; }

@media (min-width: 700px) {
  .menu-cols .dish { grid-template-columns: 128px 1fr; gap: 1.2rem; }
  .dish-shot { width: 128px; }
}


/* the condition of ordering, under the price. Plain text: it is a fact about what you
   are buying, and a pill made it look like a feature */
.dish-media .dish-cond {
  margin: .18rem 0 0; font-family: var(--sans); font-size: .78rem; line-height: 1.35;
  color: #7E7466; max-width: 128px;
}

/* ---------------------------------------------------------------- chef's pick
   A frame around the whole row rather than a badge inside it, so the eye registers the
   dish before it registers the label. Warm off-white and a soft gold edge: present
   enough to notice while scrolling, quiet enough not to shout over the dish beside it. */
.menu-cols .dish.is-pick {
  background: #FDFAF2;
  border: 1px solid #EADFC6;
  border-radius: 10px;
}
.menu-cols .dish.is-pick .dish-body::after { content: ""; display: block; clear: both; }

/* ---------------------------------------------------------------- chef's pick, refined
   The tag sits ON the top border, centred across it like a legend on a fieldset, so it
   takes no width from the text at all — the dish name and description run the full
   measure. Floating it looked tidy but cost every line of the name about a hundred
   pixels, which on a phone is a whole word. */
/* The frame is pulled outward by exactly its own horizontal padding, so the photograph
   and the text inside a framed dish sit on the same vertical lines as every unframed
   dish. Otherwise the card looks narrower and the whole column reads as misaligned. */
.menu-cols .dish.is-pick {
  --pick-pad: .85rem;
  position: relative;
  padding: 1.15rem var(--pick-pad) .9rem;
  margin-left: calc(var(--pick-pad) * -1);
  margin-right: calc(var(--pick-pad) * -1);
}
.pick-tag {
  position: absolute; top: 0; right: .9rem; transform: translateY(-50%);
  font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #8A6716; white-space: nowrap;
  /* the card's own colour, so the tag reads as the border being interrupted
     rather than a chip stuck on top of it */
  background: #FDFAF2; border: 1px solid #E4D2AA; border-radius: 999px;
  padding: .18rem .55rem; line-height: 1.25;
}

/* ---------------------------------------------------------------- vertical rhythm
   One gap between dishes, a larger one between courses, and the framed picks get their
   own margin so a card never touches the row above it. Previously the frame's padding
   was read as extra space and the sections drifted apart unevenly. */
.menu-cols .dish { margin: 0 0 1.9rem; }
/* margin-bottom only: the shorthand here was wiping the negative side margins that
   pull the framed card out to the same width as an unframed one */
.menu-cols .dish.is-pick { margin-bottom: 1.9rem; }
.menu-cols .dish:last-child { margin-bottom: 0; }
.course { margin: 0 0 2.8rem; }
.course:last-child { margin-bottom: 0; }
.course-head { margin: 0 0 1.25rem; }