/* ============================================================================
   Le 2 Sicilie — Lounge Bar & Bistro
   Design system. Hand-authored: no Tailwind CDN, no framework.

   Every colour below is SAMPLED from the client's own assets, not invented:
     gold      — from le2sicilielogoupdated.png (the Trinacria mark)
     pistachio — from yummy.jpeg, the marzipan on their cassata
   Do not substitute "close enough" values.

   Concept: "Le Due". The name means the Two Sicilies. The business is two
   businesses at one address — a pastry counter from 6am, a pizzeria and bar
   until 11. The layout carries that pairing throughout.
   ========================================================================= */

:root {
  /* ---- ground -------------------------------------------------------- */
  --pece:        #100E0C;   /* warm near-black. dominant */
  --pece-soft:   #1A1613;   /* raised surface */
  --pece-lift:   #241E19;   /* floating surface, card hover */
  --pece-line:   #2E2721;   /* hairline on dark */

  /* ---- gold, sampled from the logo ----------------------------------- */
  --oro:         #E0B870;   /* highlight, sampled from the mark. 10.3:1 on --pece */
  /* the two below are contrast-tuned derivatives, not samples. The updated
     mark's gold runs brighter (#E0B058–#F0C870) than the original bronze, but
     these darker steps are what clear WCAG on near-black — do not "correct"
     them toward the artwork or the text fails AA. */
  --oro-deep:    #A87838;   /* mid tone. rules, borders. 4.96:1 on --pece */
  --oro-dim:     #8A6430;   /* recessed. 3.38:1 on --pece-soft — large text only */

  /* ---- pistachio, sampled from their cassata ------------------------- */
  --pistacchio:  #78A050;
  --pistacchio-d:#5C7A3E;

  /* ---- warm light ---------------------------------------------------- */
  --crema:       #F2E7CE;   /* warm paper. light panels */
  --crema-dim:   #D9CBAC;
  --amarena:     #8E2230;   /* the glace cherry. used once or twice, never as decoration */

  /* ---- ink ----------------------------------------------------------- */
  --ink-hi:      #F6EFE2;   /* on dark */
  --ink:         #D8CDBB;
  --ink-dim:     #9E9384;
  --ink-dark:    #2A211A;   /* on crema */
  --ink-dark-dim:#6B5D4E;

  /* ---- type ---------------------------------------------------------- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- structure ----------------------------------------------------- */
  --rail:    92px;          /* the left rail. echoes the counter tray rails */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --measure: 1240px;
  --radius:  2px;           /* almost none. uniform rounding is an AI tell */

  /* ---- motion -------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--pece);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
  margin: 0;
  /* Fraunces variable axes: slight optical softness and a touch of wonk.
     This is what stops it reading as generic Playfair. */
  font-variation-settings: 'SOFT' 18, 'WONK' 1;
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

::selection { background: var(--oro); color: var(--pece); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--oro); color: var(--pece);
  padding: 0.7rem 1.1rem; font-weight: 600; font-size: 0.9rem;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0.6rem; }

/* ============================================================================
   type scale
   ========================================================================= */

.t-display {
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 6.2rem);
  letter-spacing: -0.035em;
}
.t-h2 {
  font-size: clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem);
  letter-spacing: -0.028em;
}
.t-h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.75rem);
  letter-spacing: -0.02em;
}

/* the small-caps gold label. used for eyebrows and rail labels only. */
.t-label {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
  line-height: 1;
}

.t-lede {
  font-size: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 54ch;
}

.t-it { font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1; }

/* prices are monospace — like the printed tags propped in a pastry case */
.t-price {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* ============================================================================
   layout — the rail
   The persistent left rail carries section labels vertically, echoing the
   steel tray rails in the counter. It is structural, not decorative: it is
   also what makes the grid asymmetric rather than centred.
   ========================================================================= */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}

.section__grid {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.section__grid > * { min-width: 0; }

@media (min-width: 900px) {
  /* The rail element is display:none since 2 Sept 2026, so this is a single
     column. The old rail width is added as padding instead, which keeps every
     section's content exactly where it sat when the layout was signed off. */
  .section__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-start: calc(var(--gutter) + var(--rail));
    gap: 0;
  }
}

/* The vertical gold rail and its rotated label were removed 2 Sept 2026 at
   Adam's request — he did not like them on desktop. The grid keeps its first
   column so every section holds the indent the rest of the page was composed
   against; only the line and the label are gone. The hero keeps its own
   scroll cue, which is a different element. */
.rail { display: none; }

.section--on-crema { background: var(--crema); color: var(--ink-dark); }
.section--on-crema h2, .section--on-crema h3 { color: var(--ink-dark); }
.section--on-crema .t-lede { color: var(--ink-dark-dim); }

/* ============================================================================
   the gold hairline — the one repeated ornament, borrowed from the logo's rule
   ========================================================================= */

.hair {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    var(--oro-deep) 0%,
    var(--oro-dim) 34%,
    transparent 100%);
}
.hair--center {
  background: linear-gradient(90deg, transparent, var(--oro-deep), transparent);
}

/* ============================================================================
   buttons
   ========================================================================= */

.btn {
  --btn-bg: var(--oro);
  --btn-fg: var(--pece);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  /* animate transform and opacity only — never the `all` keyword */
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              color 200ms var(--ease),
              transform 200ms var(--ease-out);
}
.btn:hover  { background: var(--crema); border-color: var(--crema); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--oro);
  border-color: var(--oro-deep);
}
.btn--ghost:hover {
  background: rgba(224, 184, 112, 0.1);
  border-color: var(--oro);
  color: var(--oro);
}

.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ============================================================================
   header
   ========================================================================= */

.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: transparent;
  transition: background-color 300ms var(--ease),
              border-color 300ms var(--ease),
              backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head[data-stuck='true'] {
  background: rgba(16, 14, 12, 0.93);
  backdrop-filter: blur(9px) saturate(1.1);
  border-bottom-color: var(--pece-line);
}

.site-head__logo img { height: clamp(40px, 5.4vw, 56px); width: auto; }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: 1.9rem; }
}
.nav a {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  position: relative; padding-block: 0.35rem;
  transition: color 180ms var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--ease-out);
}
.nav a:hover { color: var(--oro); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* mobile: a single WhatsApp action, always reachable */
.head-cta { padding: 0.62rem 1rem; font-size: 0.7rem; }

/* ============================================================================
   HERO
   Rebuilt. Three things were wrong with the first pass:

   1. The mark carried its own "LOUNGE BAR & BISTRO" strapline, which is ~85%
      black and vanished on the dark ground, leaving a band of dead space that
      read as unfinished. The hero now uses logo-mark.webp — the wordmark cut
      above that line — and the strapline is set as live type.
   2. The copy block sat in the WEAKEST part of the scrim, so gold outlines
      floated over moving video. The scrim now carries a solid plinth.
   3. The hero ignored the left rail the rest of the site is built on, so it
      read as a stock hero bolted to a designed page. The rail is now here too.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pece);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video,
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* two stacked layers crossfade so the hero never cuts or goes blank */
.hero__layer { opacity: 0; transition: opacity 1200ms var(--ease); }
.hero__layer[data-active='true'] { opacity: 1; }

/* The plinth. The bottom 46% is effectively solid, so the mark and the type
   sit on ground rather than on moving imagery. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(16,14,12,1)    0%,
      rgba(16,14,12,0.99) 26%,
      rgba(16,14,12,0.94) 40%,
      rgba(16,14,12,0.74) 56%,
      rgba(16,14,12,0.42) 74%,
      rgba(16,14,12,0.34) 88%,
      rgba(16,14,12,0.62) 100%),
    radial-gradient(130% 74% at 8% 104%, rgba(138,100,48,0.30) 0%, transparent 62%);
}

/* No rail in the hero. It was tried and cut: a vertical line beside the copy
   fought the mark rather than framing it. The rail stays a section device. */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.4rem, 8vw, 6rem);
}

.hero__mark {
  width: clamp(268px, 33vw, 452px);
  height: auto;
  margin-bottom: 0.95rem;
}
@media (max-width: 699px) {
  .hero__mark { width: min(88vw, 420px); margin-bottom: 0.85rem; }
}
@media (max-width: 699px) {
  /* the state strip sits right under the hero, so the hero doesn't need its
     own full run-out of space before it — that space is what read as "too
     far from the buttons" */
  .hero__inner { padding-bottom: 2.1rem; }
}

/* the strapline, set live because the artwork's own version is invisible here.
   Hairlines either side rhyme with the gold rule inside the mark. */
.hero__strap {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 clamp(1.5rem, 3.4vw, 2.3rem);
  font-family: var(--body);
  font-size: clamp(0.62rem, 0.56rem + 0.2vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--oro);
}
.hero__strap::after {
  content: ''; height: 1px; flex: 1; max-width: 190px;
  background: linear-gradient(90deg, var(--oro-deep), transparent);
}

/* Smaller than .t-display was. An ornate mark and a 99px serif were both
   trying to be the primary element, and the hero looked crowded. */
.t-hero {
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3.45rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
  max-width: 15ch;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
}

.hero__lede {
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.14rem);
  line-height: 1.72;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: clamp(1.7rem, 3.2vw, 2.4rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 560px) {
  .hero__actions { flex-wrap: nowrap; gap: 0.55rem; }
  .hero__actions .btn {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 0.72rem 0.6rem; font-size: 0.68rem; letter-spacing: 0.07em; gap: 0.4rem;
  }
}

/* scroll cue — a hairline that drains downward, not a bouncing chevron */
.hero__scroll {
  position: absolute; z-index: 3;
  right: var(--gutter); bottom: clamp(3.4rem, 8vw, 6rem);
  display: none;
  align-items: center; gap: 0.7rem;
  writing-mode: vertical-rl;
  font-family: var(--body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  transition: color 200ms var(--ease);
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll:hover { color: var(--oro); }
.hero__scroll i {
  display: block; width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--oro-deep));
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; inset-inline: 0; top: -60%;
  height: 60%; background: var(--oro);
  animation: drain 2.6s var(--ease) infinite;
}
@keyframes drain {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i::after { animation: none; opacity: 0.6; top: 0; }
}

/* ---- the state strip -------------------------------------------------
   Says what is actually happening right now, from their real 6am–11pm span.
   Useful information, not decoration. Computed in Malta time, never the
   visitor's — most of their trade is tourists on foreign clocks.          */

/* Was a full-width band, which spent a lot of vertical space on one short
   line. It is now a single centred chip: same information, a third of the
   height, and it reads as a live status rather than a page section. */
.state {
  position: relative; z-index: 3;
  background: transparent;
  display: flex; justify-content: center;
  padding: 0.5rem var(--gutter) 1.6rem;
}
.state__inner {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  background: var(--pece-soft);
  font-size: 0.78rem;
}
.state__sep { color: var(--oro-deep); }

/* On a phone this was wrapping to three ragged lines — status, detail and the
   hours range each landing on their own row. The hours are already in Find Us,
   so mobile drops them and keeps one clean line. */
@media (max-width: 720px) {
  .state { padding: 0.3rem var(--gutter) 1.5rem; }
  .state__inner { font-size: 0.74rem; padding: 0.38rem 0.75rem; }
  .state__hours { display: none; }
  /* the hours are hidden here, so the separator in front of them would dangle */
  .state__detail + .state__sep { display: none; }
}
.state__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pistacchio); flex: none;
  box-shadow: 0 0 0 3px rgba(120,160,80,0.18);
}
.state[data-open='false'] .state__dot {
  background: var(--amarena);
  box-shadow: 0 0 0 3px rgba(142,34,48,0.2);
}
.state__now { color: var(--ink-hi); font-weight: 600; }
.state__detail { color: var(--ink-dim); }
.state__hours { color: var(--ink-dim); font-family: var(--mono); font-size: 0.72rem; letter-spacing: -0.03em; }

/* ============================================================================
   IL BANCO — the signature.
   A sideways-scrolling pastry counter, browsed the way you browse the real
   glass case. Card widths are DELIBERATELY UNEVEN, sized to their contents:
   a tray of cannoli is not the width of a tray of zeppole. Uniform card
   sizing is one of the clearest tells of a generated layout.
   ========================================================================= */

.banco { background: var(--pece); position: relative; }

/* warm light spilling out of the case, the way it looks at six in the morning */
.banco::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 55% at 50% 62%, rgba(224,184,112,0.11) 0%, transparent 68%);
}

.banco__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}

.banco__scroller {
  position: relative;
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 2.4rem;
  /* bleed past the gutter so the case runs off the edge of the screen —
     it should feel longer than the viewport, because it is */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--oro-dim) transparent;
}
.banco__scroller::-webkit-scrollbar { height: 3px; }
.banco__scroller::-webkit-scrollbar-track { background: var(--pece-line); }
.banco__scroller::-webkit-scrollbar-thumb { background: var(--oro-dim); }

.tray {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  background: var(--pece-soft);
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 260ms var(--ease), transform 320ms var(--ease-out);
}
.tray:hover { border-color: var(--oro-dim); transform: translateY(-4px); }
.tray:focus-within { border-color: var(--oro); }

/* the uneven widths. each is sized to what it holds. */
.tray--wide   { width: min(78vw, 420px); }
.tray--mid    { width: min(62vw, 310px); }
.tray--narrow { width: min(52vw, 236px); }

.tray__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pece-lift); }
.tray--wide .tray__img { aspect-ratio: 16 / 10; }
.tray__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.tray:hover .tray__img img { transform: scale(1.045); }
/* warm the photography so the mixed phone-camera lighting reads as one set */
.tray__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,14,12,0.55), transparent 55%);
  mix-blend-mode: multiply;
}

.tray__body { padding: 1rem 1.15rem 1.25rem; }
.tray__name {
  font-family: var(--display); font-size: 1.16rem;
  color: var(--ink-hi); margin-bottom: 0.3rem;
  font-variation-settings: 'SOFT' 22, 'WONK' 1;
}
.tray__desc { font-size: 0.86rem; color: var(--ink-dim); line-height: 1.55; margin: 0; }

/* the steel rail the trays sit on */
.banco__rail {
  height: 3px;
  margin-inline: calc(var(--gutter) * -1);
  background:
    linear-gradient(to bottom,
      #6E6862 0%, #C8C4BC 38%, #8A847C 62%, #43403C 100%);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.9);
}

.banco__note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
  max-width: 62ch;
}
.banco__note strong { color: var(--oro); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .tray, .tray:hover, .tray__img img, .tray:hover .tray__img img {
    transition: none; transform: none;
  }
}

/* ============================================================================
   LE DUE — the two halves. the pairing the name promises.
   ========================================================================= */

.due { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--pece-line); }
@media (min-width: 860px) { .due { grid-template-columns: 1fr 1fr; } }

.due__half {
  position: relative;
  padding: clamp(2rem, 4.4vw, 3.4rem);
  background: var(--pece);
  min-height: 100%;
  display: flex; flex-direction: column;
}
.due__half--sera { background: var(--pece-soft); }

.due__num {
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.8;
  color: var(--oro-dim);
  margin-bottom: 0.9rem;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.due__hours {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--oro); letter-spacing: -0.03em; margin-bottom: 0.5rem;
}
.due__list { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.due__list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--pece-line);
  font-size: 0.92rem;
  display: flex; justify-content: space-between; gap: 1rem;
}
.due__list li:last-child { border-bottom: 1px solid var(--pece-line); }

/* ============================================================================
   reviews — see "platform review cards" further down
   ========================================================================= */

.scoreboard {
  display: flex; flex-wrap: wrap; gap: 0 2.4rem;
  align-items: baseline;
  margin-bottom: 2.6rem;
}
.score__n {
  font-family: var(--display); font-size: 2.1rem; color: var(--oro);
  font-variation-settings: 'SOFT' 10, 'WONK' 0;
}
.score__src { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }

/* On a phone the three scores were wrapping to three full rows and pushing the
   reviews themselves below the fold. They fit across in one. */
@media (max-width: 620px) {
  .scoreboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 1.8rem; }
  .score__n { font-size: 1.6rem; }
  .score__src { font-size: 0.58rem; letter-spacing: 0.11em; line-height: 1.35; display: inline-block; }
}

/* ============================================================================
   find us
   ========================================================================= */

.visit { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }

.map-frame {
  position: relative;
  border: 1px solid var(--oro-dim);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  background: var(--pece-soft);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.35) contrast(1.05) brightness(0.86); }
.map-frame__cta {
  width: 100%; height: 100%; min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--pece-soft); color: var(--oro);
  border: 0; cursor: pointer;
  font-family: var(--body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
  transition: background-color 200ms var(--ease);
}
.map-frame__cta:hover { background: var(--pece-line); }
.map-frame__cta small { color: var(--ink-dim); font-weight: 400; font-size: 0.72rem; letter-spacing: 0; }
.map-frame[data-loaded='true'] .map-frame__cta { display: none; }

.facts { list-style: none; padding: 0; margin: 0; }
.facts li { padding: 0.9rem 0; border-bottom: 1px solid var(--pece-line); display: grid; gap: 0.15rem; }
.facts dt, .facts .k {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro);
}
.facts .v { color: var(--ink-hi); }
.facts a { color: var(--ink-hi); text-decoration: none; border-bottom: 1px solid var(--oro-dim); transition: border-color 180ms var(--ease), color 180ms var(--ease); }
.facts a:hover { color: var(--oro); border-bottom-color: var(--oro); }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid var(--pece-line); font-weight: 400; }
.hours-table td:last-child { text-align: right; font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.03em; color: var(--oro); }
.hours-table tr[data-today='true'] th,
.hours-table tr[data-today='true'] td { color: var(--ink-hi); }
.hours-table tr[data-today='true'] th::after {
  content: ' · today'; color: var(--pistacchio); font-size: 0.72rem; letter-spacing: 0.1em;
}

/* ============================================================================
   contact — composes a WhatsApp message. no backend, nothing to break.
   ========================================================================= */

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--pece-soft);
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  color: var(--ink-hi);
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--oro-dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--oro); background: var(--pece-lift);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); opacity: 0.65; }

.form__note { font-size: 0.82rem; color: var(--ink-dim); }

/* ============================================================================
   FAQ — visible, and the source of the FAQPage markup.
   Real questions people type, answered in plain words.
   ========================================================================= */

.faq { border-top: 1px solid var(--pece-line); }
.faq details {
  border-bottom: 1px solid var(--pece-line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
  color: var(--ink-hi);
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  transition: color 180ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro); }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
  transform: translateY(-60%) rotate(45deg);
  transition: transform 240ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 2.5rem 1.35rem 0; color: var(--ink-dim); max-width: 68ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================================
   footer
   ========================================================================= */

.site-foot { background: #0A0908; border-top: 1px solid var(--pece-line); padding-block: clamp(2.6rem, 5vw, 4rem); }
.foot__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.foot__logo img { width: 210px; height: auto; margin-bottom: 1rem; }
.foot h3 { font-family: var(--body); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin-bottom: 0.9rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; transition: color 180ms var(--ease); }
.foot a:hover { color: var(--oro); }
.foot address { font-style: normal; color: var(--ink-dim); font-size: 0.9rem; line-height: 1.75; }
.foot__base {
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--pece-line);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.76rem; color: var(--ink-dim);
}

/* ============================================================================
   sticky WhatsApp pill — mobile only. their trade runs through WhatsApp.
   ========================================================================= */

.pill {
  position: fixed; z-index: 90;
  left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  background: var(--oro); color: var(--pece);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(224,184,112,0.35);
  transition: transform 220ms var(--ease-out), background-color 200ms var(--ease);
}
.pill:hover { background: var(--crema); transform: translateX(-50%) translateY(-2px); }
.pill { opacity: 1; transition: opacity 220ms var(--ease), transform 220ms var(--ease-out), background-color 200ms var(--ease); }
.pill[data-hidden='true'] { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }
@media (min-width: 900px) { .pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .pill, .pill:hover { transition: none; } }

/* ============================================================================
   SCROLL REVEAL
   Everything rises slightly into place as you reach it. Two things make the
   difference between this and content that "pops":

   1. The observer fires the moment an element touches the viewport, not once
      it is already well inside it — so the motion has finished by the time you
      are looking at it.
   2. Stagger only applies where items sit SIDE BY SIDE. On a phone the review
      cards are a single column, and a per-card delay on top of each card
      entering separately is what made them pop one at a time.
   ========================================================================= */

.rv { opacity: 0; transform: translateY(26px); }
.rv--in {
  opacity: 1;
  transform: none;
  /* transition-delay is kept OUT of the shorthand on purpose. Safari has
     long-standing trouble parsing a custom property inside a `transition`
     shorthand, and a dropped declaration there would mean no animation at all. */
  transition-property: opacity, transform;
  transition-duration: 780ms, 780ms;
  transition-timing-function: var(--ease-out), var(--ease-out);
  transition-delay: var(--rv-d, 0ms), var(--rv-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv--in { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   MENU PAGE
   The dotted leader between dish and price is the oldest device in menu
   typesetting. It is here because it reads instantly as "menu" — not as a
   card grid, which is what every generated restaurant page reaches for.
   ========================================================================= */

.page-menu { padding-top: 4.6rem; }

.menu-hero {
  padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--pece-line);
}

.menu-nav {
  position: sticky; top: 3.9rem; z-index: 80;
  background: rgba(16,14,12,0.95);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--pece-line);
}
.menu-nav__inner {
  max-width: var(--measure); margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex; gap: 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-nav__inner::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: none;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.menu-nav a:hover { color: var(--oro); border-bottom-color: var(--oro-deep); }

.menu-body { padding-block: clamp(2.4rem, 5vw, 4rem) 0; }

.ms { margin-bottom: clamp(2.6rem, 5vw, 4.2rem); scroll-margin-top: 7.5rem; }
.ms__head { margin-bottom: 1.4rem; }
.ms__title { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.ms__it {
  font-family: var(--body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro-deep);
}
.ms__note {
  margin: 0.55rem 0 0; font-size: 0.86rem; color: var(--ink-dim); max-width: 62ch;
}

.ms__list { list-style: none; margin: 0; padding: 0; }

.mi {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: baseline;
  gap: 0 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--pece-line);
}
.mi__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  color: var(--ink-hi); margin: 0;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.mi__desc {
  margin: 0.2rem 0 0; font-size: 0.845rem; line-height: 1.5;
  color: var(--ink-dim); max-width: 58ch;
}
/* the leader. sits on the baseline of the name row. */
.mi__lead {
  align-self: baseline;
  border-bottom: 1px dotted var(--pece-line);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}
.mi__price { text-align: right; display: grid; gap: 0.15rem; justify-items: end; }
.mi--nop { grid-template-columns: 1fr; }
.mi--nop .mi__lead { display: none; }

.tag {
  font-family: var(--body); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.16rem 0.4rem; border-radius: 1px; line-height: 1;
  transform: translateY(-0.15em);
}
.tag--sig { border: 1px solid var(--oro-deep); color: var(--oro); }
.tag--veg { border: 1px solid var(--pistacchio-d); color: var(--pistacchio); }

.ms--counter .ms__list {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 720px) {
  .ms--counter .ms__list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.menu-foot {
  font-size: 0.82rem; color: var(--ink-dim);
  border-top: 1px solid var(--oro-dim); padding-top: 1.1rem; margin-top: 2rem;
}

.menu-cta {
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  padding-top: 2.2rem; border-top: 1px solid var(--pece-line);
}

/* ============================================================================
   MOBILE NAVIGATION
   Below 900px the inline nav is hidden, which left no way to reach the counter,
   Le Due, the menu or Find us without scrolling the whole page. This is the fix.
   A real <button> driving a real overlay — keyboard operable, Escape closes it.
   ========================================================================= */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;      /* full touch target */
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav-toggle:hover { border-color: var(--oro-deep); background: rgba(224,184,112,0.07); }
.nav-toggle__bar {
  display: block; height: 1.5px; width: 100%;
  background: var(--oro);
  transition: transform 260ms var(--ease-out), opacity 180ms var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(138,100,48,0.16) 0%, transparent 60%),
    rgba(16,14,12,0.985);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  padding: 1.4rem var(--gutter) 2.2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
}
.nav-overlay[data-open='true'] {
  opacity: 1; visibility: visible;
  transition: opacity 280ms var(--ease), visibility 0s;
}
.nav-overlay__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--pece-line);
}
.nav-overlay__mark {
  font-family: var(--display); font-size: 1.05rem; color: var(--oro);
  letter-spacing: 0.02em; font-variation-settings: 'SOFT' 22, 'WONK' 1;
}
.nav-overlay__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; color: var(--oro);
  border: 1px solid var(--pece-line); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav-overlay__close:hover { border-color: var(--oro-deep); background: rgba(224,184,112,0.07); }
.nav-overlay__list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.nav-overlay__list li { border-bottom: 1px solid var(--pece-line); }
.nav-overlay__list li:first-child { border-top: 1px solid var(--pece-line); }
.nav-overlay a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  color: var(--ink-hi); text-decoration: none;
  font-variation-settings: 'SOFT' 22, 'WONK' 1;
  transition: color 180ms var(--ease);
}
.nav-overlay a:hover, .nav-overlay a:active { color: var(--oro); }
.nav-overlay a .n {
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--oro-deep); letter-spacing: -0.04em;
}
.nav-overlay__foot {
  margin-top: auto; padding-top: 1.4rem;
  border-top: 1px solid var(--pece-line);
  display: grid; gap: 1rem;
}
.nav-overlay__actions { display: flex; gap: 0.55rem; }
.nav-overlay__actions .btn {
  flex: 1 1 0; min-width: 0; justify-content: center;
  padding: 0.72rem 0.5rem; font-size: 0.68rem; letter-spacing: 0.06em; gap: 0.4rem;
  white-space: nowrap;
}
.nav-overlay__hours {
  margin: 0; text-align: center;
  color: var(--ink-dim); font-family: var(--mono); font-size: 0.72rem; letter-spacing: -0.02em;
}
body[data-nav='open'] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar, .nav-overlay { transition: none; }
}

/* ============================================================================
   LE DUE — the wipe
   Two photographs, one slider. Drag from the counter at six in the morning to
   the oven at ten at night. The duality the name promises, made literal and
   operable rather than described in a paragraph.

   The control is a real <input type="range">, laid transparently over the
   image, so it works with a keyboard and a screen reader announces it. The
   visible handle is decoration on top of a genuine control, not a fake one.
   ========================================================================= */

.wipe {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  background: var(--pece-soft);
  cursor: ew-resize;
  /* pan-y keeps vertical page scrolling working while horizontal drags come
     to us as pointer events */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 700px) { .wipe { aspect-ratio: 4 / 5; } }

.wipe__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.wipe__img--left { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.wipe__grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,14,12,0.82), transparent 46%);
}

.wipe__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--oro);
  box-shadow: 0 0 18px rgba(224,184,112,0.55);
  /* The handle is its own drag target, and touch-action:none is the whole
     trick. On the container `pan-y` lets the browser claim the gesture for
     scrolling before a single pointermove arrives, so a finger could never
     slide it — only tap. Here the browser hands us the gesture outright. */
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
/* A 2px line is not a touch target. This gives it a 60px invisible grab zone
   without changing what you see. */
.wipe__handle::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 60px; transform: translateX(-50%);
}
.wipe__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pece); border: 1px solid var(--oro);
  display: grid; place-items: center;
  color: var(--oro); font-family: var(--mono); font-size: 0.7rem;
  box-shadow: 0 6px 22px -6px rgba(0,0,0,0.9);
}

/* The range stays for KEYBOARD use only — Tab to it, then arrow keys. It is
   deliberately pointer-inert: as a full-size transparent overlay its invisible
   thumb never lined up with the visible grip, so dragging the grip did nothing
   and only tapping the picture moved it. Pointer input is handled on the
   container instead, in site.js. */
.wipe__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  pointer-events: none;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.wipe:focus-within .wipe__grip { outline: 2px solid var(--oro); outline-offset: 3px; }

.wipe__tag {
  position: absolute; bottom: 0; padding: 1.1rem 1.3rem;
  pointer-events: none;
}
.wipe__tag--l { left: 0; }
.wipe__tag--r { right: 0; text-align: right; }
.wipe__tag .h {
  font-family: var(--display); font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  color: var(--ink-hi); display: block; line-height: 1.1;
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
}
.wipe__tag .t { font-family: var(--mono); font-size: 0.68rem; color: var(--oro); letter-spacing: -0.03em; }

.due-lists { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.6rem; }
@media (min-width: 760px) { .due-lists { grid-template-columns: 1fr 1fr; gap: 0 3rem; } }
.due-col h3 {
  font-family: var(--body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 0.5rem;
}
.due-col ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.due-col li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--pece-line);
  font-size: 0.92rem;
}
.due-col li:first-child { border-top: 1px solid var(--pece-line); }

/* ============================================================================
   FROM THE OVEN — the pies
   Round tiles, because pizzas are round. Three sizes and an alternating
   vertical offset, so it reads as a counter rather than as a card grid.
   ========================================================================= */

.pies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  padding-block: 1rem 0.5rem;
}
.pie {
  flex: none;
  width: var(--d);
  text-align: center;
  transition: transform 420ms var(--ease-out);
}
.pie--lg { --d: clamp(150px, 22vw, 250px); }
.pie--md { --d: clamp(126px, 18vw, 206px); }
.pie--sm { --d: clamp(108px, 15vw, 172px); }
/* the stagger. not decoration — it stops six circles reading as a grid row. */
.pie:nth-child(even) { margin-top: clamp(1.4rem, 4vw, 3.2rem); }
.pie:hover { transform: translateY(-7px); }

.pie__disc {
  position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--pece-line);
  box-shadow: 0 18px 38px -18px rgba(0,0,0,0.95);
  transition: border-color 300ms var(--ease);
}
.pie:hover .pie__disc { border-color: var(--oro-deep); }
.pie__disc img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.pie:hover .pie__disc img { transform: scale(1.06); }
/* a warm rim, as if lit from the oven mouth */
.pie__disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -14px 30px -12px rgba(16,14,12,0.85),
              inset 0 0 0 1px rgba(224,184,112,0.16);
}
.pie__name {
  margin: 0.8rem 0 0;
  font-family: var(--display); font-size: 0.98rem; color: var(--ink-hi);
  font-variation-settings: 'SOFT' 20, 'WONK' 1; line-height: 1.2;
}
.pie__price { font-family: var(--mono); font-size: 0.72rem; color: var(--oro); letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
  .pie, .pie:hover, .pie__disc img, .pie:hover .pie__disc img { transition: none; transform: none; }
}

/* ============================================================================
   PLATFORM REVIEW CARDS
   White cards on the dark ground, so they read as lifted straight off Google
   and Tripadvisor rather than as our own pull quotes.

   One detail worth keeping: Google rates in STARS, Tripadvisor rates in filled
   CIRCLES. Using the right mark for each platform is the difference between
   looking authentic and looking approximated.
   ========================================================================= */

/* ==========================================================================
   THE REVIEW RIBBON
   --------------------------------------------------------------------------
   Same device as the Suzie Q site: columns of real reviews drifting slowly,
   the middle one against the other two so the eye has something to catch on.
   Each column's cards are rendered twice and the track travels exactly -50%,
   which is what makes the loop seamless.

   Nothing here is hidden by the animation — if it never runs, the first set of
   cards is simply sitting there, readable. Hovering pauses a column so a quote
   can actually be finished, and reduced motion stops all three.
   ========================================================================= */
/* A phone gets the swipe strip below instead: three narrow drifting columns
   are unreadable at 390px, and hiding two of them would have shown only three
   of the nine reviews on the device most of this restaurant's trade uses. */
.rev-ribbon { display: none; }
@media (min-width: 700px) {
  .rev-ribbon {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    height: 470px;
    overflow: hidden;
  }
  .rev-col:nth-child(4) { display: none; }   /* two columns until there is room */
}
@media (min-width: 1080px) {
  .rev-ribbon { grid-template-columns: repeat(3, 1fr); height: 520px; }
  .rev-col:nth-child(4) { display: block; }
}

.rev-col { overflow: hidden; }
.rev-col__dup { display: flex; flex-direction: column; gap: 1.1rem; }

.rev-col__inner {
  display: flex; flex-direction: column; gap: 1.1rem;
  animation: rev-up 46s linear infinite;
  will-change: transform;
}
.rev-col--down .rev-col__inner { animation-name: rev-down; }
.rev-col:hover .rev-col__inner,
.rev-col:focus-within .rev-col__inner { animation-play-state: paused; }

@keyframes rev-up   { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes rev-down { from { transform: translateY(-50%); }  to { transform: translateY(0); } }

/* the section behind is --pece-soft, so the fades have to be that exact colour */
.rev-ribbon__fade {
  position: absolute; left: 0; right: 0; height: 90px;
  pointer-events: none; z-index: 2;
}
.rev-ribbon__fade--top { top: 0;    background: linear-gradient(to bottom, #1A1613 0%, rgba(26,22,19,0) 100%); }
.rev-ribbon__fade--bot { bottom: 0; background: linear-gradient(to top,    #1A1613 0%, rgba(26,22,19,0) 100%); }

@media (prefers-reduced-motion: reduce) {
  .rev-col__inner { animation: none; }
  .rev-strip { scroll-behavior: auto; }
}

/* --- the phone version: all nine, swiped by hand rather than drifting ------
   Same gesture as Il Banco, which is already the site's own idiom. */
.rev-strip {
  display: flex; gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  /* no scroll-snap: it fights the drift and jolts the strip back into
     alignment on the lightest touch */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* bleed to the screen edges so a card is clearly cut off and reads as scrollable */
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.4rem var(--gutter) 1.4rem;
}
.rev-strip::-webkit-scrollbar { display: none; }
.rev-strip .rev { flex: 0 0 79%; }
.rev-strip .rev:hover { transform: none; }
@media (min-width: 700px) { .rev-strip { display: none; } }

.rev {
  background: #FFFFFF;
  color: #202124;
  border-radius: 10px;
  padding: 1.15rem 1.2rem 1.05rem;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 34px -20px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease);
}
.rev:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -20px rgba(0,0,0,0.95); }

.rev__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.rev__logo { width: 20px; height: 20px; flex: none; }
.rev__logo--ta { width: 22px; height: 22px; border-radius: var(--radius); object-fit: cover; }
.rev__plat { font-size: 0.72rem; font-weight: 600; color: #5F6368; letter-spacing: 0.02em; }
.rev__marks { margin-left: auto; display: flex; gap: 2px; }

.rev__text {
  font-size: 0.9rem; line-height: 1.55; color: #202124; margin: 0 0 0.95rem;
}
.rev__by {
  margin-top: auto; display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.76rem; color: #5F6368;
}
.rev__av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  font-family: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .rev, .rev:hover { transform: none; transition: none; }
}

/* header right-hand cluster: WhatsApp + the mobile menu toggle */
.head-actions { display: flex; align-items: center; gap: 0.55rem; }

/* a centred button row, used to close the Le Due and From-the-oven sections */
.btn-row { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.btn-row--center { display: flex; justify-content: center; }

/* dragging feedback for the wipe */
.wipe[data-dragging='true'] { cursor: grabbing; }
.wipe[data-dragging='true'] .wipe__grip { transform: translate(-50%, -50%) scale(1.12); background: var(--oro); color: var(--pece); }
@media (prefers-reduced-motion: reduce) { .wipe__grip { transition: none; } }

/* ==========================================================================
   THE OFFER BANNER — a marquee under the state strip
   --------------------------------------------------------------------------
   Prominence comes from scale and motion, not from a gold fill: this site
   uses gold as hairlines and small caps, and a solid gold band would make it
   read like the other two Pulsify sites. Two identical runs sit side by side
   and the track travels exactly -50%, so the loop is seamless.
   The text is fully present with no animation, so nothing here depends on
   the animation actually running.
   ========================================================================= */
.promo {
  overflow: hidden;
  background: var(--pece-soft);
  border-top: 1px solid var(--oro-deep);
  border-bottom: 1px solid var(--oro-deep);
  padding: 0.8rem 0;
}
.promo__track {
  display: flex;
  width: max-content;
  animation: promo-scroll 42s linear infinite;
}
.promo__run { display: flex; }
.promo__item {
  display: inline-flex; align-items: baseline; gap: 0.7rem;
  padding: 0 2rem; white-space: nowrap;
}
.promo__pct {
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 600; line-height: 1;
  color: var(--oro);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
.promo__txt {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink);
}
.promo__sep { color: var(--oro-deep); font-size: 0.8rem; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .promo__track { animation: none; width: 100%; justify-content: center; }
  .promo__run:last-child { display: none; }
}

/* ==========================================================================
   OFFERS — two windows in one evening
   --------------------------------------------------------------------------
   The organising device is TIME, because the customer's real question is what
   time to turn up. The axis runs 4pm (0%) to 10pm (100%) — six hours — with
   each offer drawn as the stretch of evening it actually covers, and a pin at
   6pm where the food discount starts. Cards in a row would have thrown that
   information away.
   ========================================================================= */
.offers__grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; }
@media (max-width: 760px) { .offers__grid { grid-template-columns: 1fr; } }

.offer {
  position: relative;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  background: var(--pece-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: 40% 1fr;
}
/* the two photographs are different shapes — one portrait, one a wide board —
   so the panel fixes the ratio and object-position decides what survives the
   crop, rather than forcing both pictures into one shape */
.offer__media { position: relative; height: 100%; min-height: 250px; overflow: hidden; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer--happy   .offer__media img { object-position: 52% 50%; }
.offer--platter .offer__media img { object-position: 54% 52%; }
/* a hairline of the card ground down the inside edge, so the photograph reads
   as set into the card rather than pasted on top of it */
.offer__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 62%, rgba(26,22,19,0.55));
  pointer-events: none;
}
.offer__body {
  padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  justify-content: center;
}
@media (max-width: 860px) {
  .offer { grid-template-columns: 1fr; }
  .offer__media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .offer__media::after {
    background: linear-gradient(to bottom, transparent 58%, rgba(26,22,19,0.6));
  }
}
.offer__when {
  margin: 0; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--oro);
}
.offer__name {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.15;
  color: var(--crema); font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
.offer__desc { margin: 0; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.55; }
.offer__price {
  margin: 0.45rem 0 0; font-family: var(--display); font-weight: 600;
  font-size: 1.85rem; line-height: 1; color: var(--oro);
}
.offer__price span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); margin-left: 0.55rem;
}
/* "on now" is added by JS from Malta time; absent by default, so nothing is
   hidden behind a script that might not run */
.offer__live {
  display: none; align-self: flex-start; margin: 0.2rem 0 0;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pece);
  background: var(--pistacchio); padding: 0.28rem 0.55rem;
}
.offer[data-live="true"] .offer__live { display: inline-block; }


/* --- delivery buttons ------------------------------------------------------
   Wolt's and Bolt's own marks, rebuilt to one size in tools/build-images.py.
   The site rounds them itself so the pair matches; nothing else is applied,
   because a brand colour that has been graded is not a brand colour. */
/* They share the column and fill it, stopping at the gutter — as large as
   they can be without touching the edge of the phone. */
.deliver { display: flex; gap: 0.6rem; }
.deliver__btn {
  flex: 1 1 0; min-width: 0; max-width: 240px;
  display: block; line-height: 0;
  border-radius: 6px; overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease);
}
.deliver__btn img { display: block; width: 100%; height: auto; }
.deliver__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(0,0,0,0.95); }
.deliver__btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .deliver__btn:hover { transform: none; } }

/* The pair under the running offer. Centred, and the same two buttons as the
   Visit panel — one mark, one size, wherever it appears. */
.deliver-band {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.8rem;
  padding: 1.6rem var(--gutter) 0.2rem;
}
.deliver-band .deliver { width: 100%; max-width: 520px; }

/* --- read-the-reviews buttons ----------------------------------------------
   Same idea as the pair on the Suzie Q site. The mark carries the brand; the
   button itself stays in this site's language rather than importing two more
   visual systems into a page that already has enough. The border takes the
   platform's colour on hover, which is as far as the branding needs to go. */
.rev-links {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1.9rem;
}
.rev-link {
  flex: 1 1 160px; max-width: 260px; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.66rem 0.9rem;
  border: 1px solid var(--pece-line); border-radius: var(--radius);
  background: var(--pece-soft);
  color: var(--ink); text-decoration: none;
  font-size: 0.84rem; letter-spacing: 0.01em; line-height: 1.2;
  transition: border-color 260ms var(--ease), transform 260ms var(--ease-out);
}
.rev-link svg { width: 17px; height: 17px; flex: none; }
.rev-link__logo { width: 17px; height: 17px; flex: none; border-radius: var(--radius); object-fit: cover; }
.rev-link span { white-space: nowrap; }
.rev-link:hover { transform: translateY(-2px); }
.rev-link--g:hover  { border-color: #4285F4; }
.rev-link--ta:hover { border-color: #34E0A1; }
.rev-link:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rev-link:hover { transform: none; } }
@media (max-width: 430px) {
  .rev-link { flex-basis: 100%; max-width: none; }
}

.form__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- privacy.html prose --------------------------------------------------- */
.legal-copy { color: var(--ink); font-size: 0.96rem; line-height: 1.7; }
.legal-copy h2 {
  font-family: var(--display); font-size: 1.3rem; color: var(--ink-hi);
  margin: 2.2rem 0 0.8rem; font-variation-settings: 'SOFT' 22, 'WONK' 1;
}
.legal-copy h2:first-of-type { margin-top: 0.5rem; }
.legal-copy p { margin: 0 0 1.1rem; }
.legal-copy a { color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--oro-dim); }
.legal-copy a:hover { border-color: var(--oro); }
.legal-copy code { font-family: var(--mono); font-size: 0.88em; color: var(--ink-dim); }