/* ==========================================================
   La massa è bella — cinematic menu
   ========================================================== */
:root {
  --bg: #0a0c10;
  --bg-2: #101319;
  --card: #13161d;
  --line: rgba(223, 183, 108, .18);
  --gold: #dfb76c;
  --gold-soft: #c9a35f;
  --flame: #e2632b;
  --ember: #b8361f;
  --text: #f4efe6;
  --muted: rgba(244, 239, 230, .62);
  --faint: rgba(244, 239, 230, .38);
  --brand: "EB Garamond", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;
  --callbar-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

.eyebrow {
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 46px; padding: 0 1.25rem;
  border-radius: 999px;
  font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--ghost { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { height: 38px; padding: 0 1rem; font-size: .8rem; }
.btn--icon { width: 46px; padding: 0; justify-content: center; border: 1px solid var(--line); }
.btn--icon:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 1.1rem;
  background: var(--bg);
  transition: opacity .9s ease, visibility .9s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark svg { width: 54px; height: 68px; animation: flicker 1.6s ease-in-out infinite; }
.loader__name { font-family: var(--brand); font-style: italic; font-size: 1.6rem; color: var(--text); }
.loader__bar { width: 160px; height: 1px; background: rgba(255,255,255,.08); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .3s ease; }

@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 12px rgba(226,99,43,.5)); }
  50% { transform: scale(1.04, .97) rotate(-1deg); filter: drop-shadow(0 0 22px rgba(226,99,43,.8)); }
}

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: rgba(10, 12, 16, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(223,183,108,.08);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand__mark { width: 30px; height: 38px; flex: none; filter: drop-shadow(0 0 10px rgba(226,99,43,.45)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name { font-family: var(--brand); font-size: 1.25rem; font-weight: 500; white-space: nowrap; }
.brand__tag { font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; white-space: nowrap; }
.header__actions { display: flex; align-items: center; gap: .6rem; }

.lang { position: relative; }
.lang__current {
  display: flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .85rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
}
.lang__current svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 8px);
  list-style: none; margin: 0; padding: .4rem;
  min-width: 160px;
  background: rgba(19, 22, 29, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; }
.lang__list button { width: 100%; text-align: left; padding: .6rem .8rem; border-radius: 9px; font-size: .9rem; }
.lang__list button:hover, .lang__list button.is-active { background: rgba(223,183,108,.1); color: var(--gold); }

/* ==========================================================
   Intro / cinematic stage
   ========================================================== */
.intro { position: relative; height: 700vh; background: #000; }
/* the pizza plays by itself over one still screen, so the intro is one screen tall */
body[data-next] .intro, body[data-short-intro] .intro { height: 100vh; height: 100svh; }
.stage {
  --S: min(92vw, 84vh, 820px);   /* size of the pizza film */
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #000;              /* same black as the video */
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,.8) 100%);
}

/* flames: a glow and fire particles drawn over the video's black, around the pizza.
   The canvas cuts its own hole where the pizza is (cheaper than a CSS mask that
   would re-mask the whole screen every frame), so the pizza's colours stay deep. */
.flame-glow, .flames { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.flames { inset: 0; width: 100%; height: 100%; }
.flame-glow {
  -webkit-mask-image: radial-gradient(ellipse calc(var(--S) * .36) calc(var(--S) * .42) at 50% 52%, transparent 62%, #000 100%);
          mask-image: radial-gradient(ellipse calc(var(--S) * .36) calc(var(--S) * .42) at 50% 52%, transparent 62%, #000 100%);
  left: 50%; top: 52%;
  width: min(130vw, 120vh); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  /* fades out inside its box: its brightest part used to sit at the box's lower edge,
     which showed as a hard-edged haze under the pizza while the glow was small */
  background: radial-gradient(ellipse 60% 42% at 50% 68%, rgba(255,120,30,.55), rgba(226,70,20,.22) 40%, transparent 72%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* the pizza film: video frames on scroll, HD stills at both ends */
.film {
  position: absolute; left: 50%; top: 52%; z-index: 1;
  width: var(--S); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.film > canvas, .film > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none;
}
/* soft round edge: a black fade laid over the square film. The stage behind is black,
   so it looks exactly like a mask, but a mask on the canvas was re-applied on every
   video frame, which phones felt */
.film__fade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 60%, #000 72%); }
.film__video { filter: contrast(1.04) saturate(1.06); }
.film__hd { opacity: 0; }
/* never quite still: the pizza (and its round fade) floats gently up and down */
.film > canvas, .film > img, .film__fade { animation: float 4.4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.6%) rotate(.7deg); } }

/* layer captions, to the right of the opened pizza */
.labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.lbl {
  position: absolute; left: 80%;
  display: flex; align-items: center; gap: .7rem;
  transform: translateY(-50%);
  white-space: nowrap; opacity: 0;
  font-family: var(--sans); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: -.005em;
  color: var(--text);
  text-shadow: 0 2px 14px #000;
}
.lbl::before { content: ""; width: clamp(24px, 4vw, 60px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.lbl b { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .6em; letter-spacing: .2em; color: var(--gold); }
.lbl__short { display: none; }\n/* each caption on its own layer: they move by transform, without redrawing the pizza */\n.lbl { will-change: transform, opacity; }

.hero-copy {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 2vh);
  text-align: center; padding: 0 var(--gutter);
  z-index: 4; pointer-events: none;
}
.hero-title {
  margin: 0;
  font-family: var(--brand); font-weight: 500;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: .95; letter-spacing: -.01em;
  text-shadow: 0 10px 50px rgba(0,0,0,.6);
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-sub { margin: 1.1rem 0 0; font-size: clamp(.8rem, 1.6vw, .95rem); color: var(--muted); letter-spacing: .06em; }

/* text panels that come in left / right while the pizza opens */
.panel {
  position: absolute; top: 50%; z-index: 4;
  width: min(36vw, 500px);
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
}
.panel--l { left: 5vw; }
.panel--r { right: 5vw; text-align: right; }
.panel__title {
  margin: 0;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: .95; letter-spacing: -.02em;
  text-transform: uppercase;
  text-shadow: 0 8px 40px rgba(0,0,0,.9);
}
.panel__text { margin: 1rem 0 0; color: var(--muted); font-size: clamp(.9rem, 1.3vw, 1.05rem); line-height: 1.5; }


/* ==========================================================
   Menu
   ========================================================== */
.menu { position: relative; padding: 4rem 0 2rem; background: linear-gradient(#000, var(--bg) 240px); }
.menu__head { text-align: center; padding: 0 var(--gutter); margin-bottom: 2.2rem; }
.section-title { margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; }
.replay {
  margin-top: 1.4rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--muted); letter-spacing: .04em;
  padding: .5rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
  transition: color .3s, border-color .3s;
}
.replay svg { width: 14px; height: 14px; fill: var(--gold); }
.replay:hover { color: var(--gold); border-color: var(--line); }
.replay.is-loading { color: var(--gold); border-color: var(--line); cursor: progress; }
.replay.is-loading svg { animation: breathe 1.2s ease-in-out infinite; }

/* category chips */
.cats {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; gap: .5rem; justify-content: center;
  padding: .8rem var(--gutter);
  background: rgba(10, 12, 16, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(223,183,108,.08);
  overflow-x: auto; scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: none;
  padding: .55rem 1.05rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  border: 1px solid transparent;
  transition: color .3s, border-color .3s, background .3s;
  white-space: nowrap;
}
.cat:hover { color: var(--text); }
.cat.is-active { color: var(--bg); background: var(--gold); }

.menu__body { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

.category { padding-top: 3.5rem; scroll-margin-top: calc(var(--header-h) + 64px); }
.category__banner {
  position: relative; overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 21 / 9;
  background: var(--card);
}
.category__banner img {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%; object-fit: cover;
  will-change: transform;
}
.category__banner::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,12,16,.95) 0%, rgba(10,12,16,.35) 45%, rgba(10,12,16,.05) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(184,54,31,.25), transparent 60%);
}
/* a category without a photo: just the heading, over a thin gold rule */
.category__banner.category__banner--plain { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.category__banner--plain::after { display: none; }
.category__banner--plain .category__heading { position: static; padding: 0; }
.category__heading { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1.2rem, 3vw, 2.4rem); }
.category__num { font-family: var(--sans); font-weight: 600; color: var(--gold); font-size: 1.05rem; }
.category__title { margin: .2rem 0 .3rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; }
.category__sub { margin: 0; color: var(--muted); font-size: clamp(.85rem, 1.5vw, 1rem); max-width: 40rem; }

.items {
  list-style: none; margin: 0; padding: 1.4rem 0 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem;
}
.item { padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.item__row { display: flex; align-items: baseline; gap: .8rem; }
.item__name { font-family: var(--sans); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.item__dots { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted rgba(223,183,108,.35); transform: translateY(-.3rem); }
.item__price { font-weight: 600; color: var(--gold); font-size: 1.02rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__desc { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.item__sizes { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--faint); }
.item__sizes b { color: var(--gold); font-weight: 600; }

.menu__note { max-width: 1180px; margin: 3rem auto 0; padding: 1.4rem var(--gutter) 0; color: var(--faint); font-size: .78rem; line-height: 1.6; text-align: center; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================
   Our place: all six photos in an editorial grid, normal page scroll
   ========================================================== */
.space { padding: 72px var(--gutter) 64px; background: var(--bg); }
.space__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; max-width: 1400px; margin: 0 auto; }
.space__ph { position: relative; border-radius: 12px; overflow: hidden; }
.space__ph picture { display: contents; }
.space__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.space__ph--room { grid-column: 1 / 8; grid-row: 1 / 3; aspect-ratio: 1 / 1; }
.space__intro { grid-column: 8 / 13; align-self: end; }
.space__ph--table { grid-column: 8 / 13; aspect-ratio: 4 / 3; }
.space__beerT { grid-column: 1 / 5; align-self: center; }
.space__ph--beer { grid-column: 5 / 9; aspect-ratio: 3 / 4; }
.space__ph--fridge { grid-column: 9 / 13; aspect-ratio: 3 / 4; margin-top: 60px; }
.space__ph--spread { grid-column: 1 / 7; aspect-ratio: 4 / 3; }
.space__ph--beef { grid-column: 7 / 10; aspect-ratio: 3 / 4; }
.space__foodT { grid-column: 10 / 13; align-self: end; }
.space__eyebrow { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.space__title { margin: .6rem 0 0; font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: .98; }
.space__title--sm { margin-top: .5rem; font-size: 2rem; line-height: 1; }
.space__title em { color: var(--gold); font-style: normal; }
.space__text { margin: .9rem 0 0; color: var(--muted); line-height: 1.55; }
.space__cta { display: inline-flex; align-items: center; gap: .6rem; margin-top: 20px; padding: .9rem 1.3rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: .92rem; background: linear-gradient(135deg, var(--flame), var(--ember)); }
.space__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ==========================================================
   Info + footer
   ========================================================== */
.info { padding: 5rem var(--gutter) 3rem; }
.info__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.info__card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(223,183,108,.06), rgba(255,255,255,.01));
  border: 1px solid rgba(223,183,108,.12);
}
.status { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6b6f78; }
.status.is-open::before { background: #5ccf8a; box-shadow: 0 0 0 4px rgba(92,207,138,.15); }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--muted); font-size: .95rem; }
.hours li:last-child { border-bottom: 0; }
.hours li.is-today { color: var(--text); }
.hours li.is-today span:first-child { color: var(--gold); font-weight: 600; }
.hours span:last-child { font-variant-numeric: tabular-nums; }
.info__place { margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: 1.75rem; line-height: 1.1; }
.info__muted { margin: .4rem 0 1rem; color: var(--muted); }
.info__phone { display: inline-block; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; font-size: clamp(1.8rem, 4.5vw, 2.5rem); color: var(--gold); line-height: 1; margin-bottom: 1.4rem; }
.info__links { display: flex; flex-wrap: wrap; gap: .6rem; }

.footer { text-align: center; padding: 3rem var(--gutter) calc(var(--callbar-h) + 2.5rem); border-top: 1px solid rgba(255,255,255,.05); }
.footer__mark { width: 34px; height: 42px; margin: 0 auto .8rem; }
.footer__name { margin: 0; font-family: var(--brand); font-size: 1.7rem; font-style: italic; }
.footer__tag { margin: .2rem 0 1.4rem; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.footer__small { margin: 0; color: var(--faint); font-size: .78rem; }

/* ---------- Sticky call bar ---------- */
.callbar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 140%);
  display: flex; gap: .5rem;
  width: min(560px, calc(100% - 24px));
  padding: 6px;
  border-radius: 999px;
  background: rgba(19, 22, 29, .9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.callbar.is-visible { transform: translate(-50%, 0); }
.callbar a { display: flex; align-items: center; gap: .7rem; border-radius: 999px; }
.callbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.callbar__call {
  flex: 1; min-width: 0; padding: .55rem 1.1rem;
  background: linear-gradient(135deg, var(--flame), var(--ember));
  color: #fff;
}
.callbar__call > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.callbar__call b { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phones get the short label (the phone icon and the number already say "call") */
.callbar__short { display: none; }
.callbar__call small { font-size: .78rem; opacity: .85; font-variant-numeric: tabular-nums; }
.callbar__map { padding: 0 1.1rem; font-size: .82rem; font-weight: 600; color: var(--gold); border: 1px solid var(--line); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 860px) {
  .items { grid-template-columns: 1fr; }
  .info__grid { grid-template-columns: 1fr; }
  .category__banner { aspect-ratio: 16 / 10; border-radius: 18px; }
  .cats { justify-content: flex-start; }
}
@media (max-width: 760px) {
  /* phones: panels sit under the pizza, captions become pills on its right edge */
  .panel { width: auto; left: 20px; right: 20px; top: auto; bottom: calc(7vh + env(safe-area-inset-bottom)); transform: none; text-align: left; }
  .panel--r { text-align: left; }
  .panel__title { font-size: 2rem; }
  .film { top: 48%; }
  /* phones: skip the per-frame colour filter and the screen blend of the fire. Over
     the black stage the blend looks the same as plain drawing, and both cost a full
     extra pass on every frame */
  .film__video { filter: none; }
  .flame-glow, .flames { mix-blend-mode: normal; }
  /* the pizza and the masked glow each get their own layer, so moving and scaling them
     is done by the graphics chip instead of repainting them on every step of the scroll */
  .film, .flame-glow { will-change: transform; }
  /* the header's blur had to be redone on every step of the pizza and its fire moving
     under it; a darker plain header looks the same over the black stage */
  .header.is-solid { background: rgba(10, 12, 16, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* next version (pages with <body data-next>) */
  /* captions beside the pizza as on computers (it steps left to make room) and moving with
     their layers, with short names so that they fit; sizes allow for the pizza's 0.86 scale */
  body[data-next] .lbl {
    left: 84%; right: auto; width: 40%;
    align-items: flex-start; gap: .45rem;
    padding: 0; border: 0; border-radius: 0; background: none;
    white-space: normal; line-height: 1.2; font-size: 1.05rem;
  }
  body[data-next] .lbl::before { display: block; flex: none; width: 12px; margin-top: .62em; }
  body[data-next] .lbl b { margin-top: .2em; font-size: .72em; }
  body[data-next] .lbl__long { display: none; }
  body[data-next] .lbl__short { display: inline; }
  /* a tighter menu */
  body[data-next] .category { padding-top: 2.6rem; }
  body[data-next] .category__banner:not(.category__banner--plain) { aspect-ratio: 2 / 1; }
  body[data-next] .items { padding-top: .8rem; }
  body[data-next] .item { padding: .85rem 0; }
  body[data-next] .item__name { font-size: 1.08rem; }
  body[data-next] .item__desc { font-size: .86rem; margin-top: .25rem; }
  .lbl { left: auto; right: 2%; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid var(--line); }
  .lbl::before { display: none; }
  /* our place: six columns, intro and room stacked, photo pairs side by side */
  .space { padding: 48px var(--gutter) 40px; }
  .space__grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .space__intro { grid-column: 1 / 7; grid-row: 1; }
  .space__ph--room { grid-column: 1 / 7; grid-row: 2; }
  .space__ph--table { grid-column: 1 / 4; grid-row: 3; aspect-ratio: 3 / 4; }
  .space__beerT { grid-column: 4 / 7; grid-row: 3; }
  .space__ph--beer { grid-column: 1 / 4; grid-row: 4; }
  .space__ph--fridge { grid-column: 4 / 7; grid-row: 4; margin-top: 40px; }
  .space__ph--spread { grid-column: 1 / 7; }
  .space__ph--beef { grid-column: 1 / 4; }
  .space__foodT { grid-column: 4 / 7; }
  .space__title--sm { font-size: 1.5rem; }
  .space__text { font-size: .9rem; margin-top: .7rem; }
  .space__cta { padding: .75rem 1.05rem; font-size: .85rem; }
}
@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .brand__tag { display: none; }
  .brand__name { font-size: 1.1rem; }
  .header__menu { display: none; }
  .lbl { font-size: .82rem; }
  .hero-copy { top: calc(var(--header-h) + 4vh); }
  .item__name { font-size: 1.3rem; }
  .callbar__map span { display: none; }
  .callbar__long { display: none; }
  .callbar__short { display: inline; }
  .callbar__map { padding: 0 .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loader__mark svg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   Phone tuning, weak phones, scene lock, opening hours
   ========================================================== */
@media (max-width: 760px) {
  /* a blur has to be redone whenever the page moves under it */
  .cats, .callbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cats { background: rgba(10, 12, 16, .97); }
  .callbar { background: rgb(19, 22, 29); }
  /* a phone's real height is short once the browser's bars are in: the pizza is sized by
     the height too */
  .stage { --S: min(94vw, 54svh); }
  /* the glow fades out inside its box: its brightest part used to sit at the box's lower
     edge, which showed as a dark band across the bottom of the screen */
  .flame-glow { background: radial-gradient(ellipse 60% 44% at 50% 56%, rgba(255,120,30,.5), rgba(226,70,20,.2) 45%, transparent 72%); }
  /* the texts come in at the top, where the title was before it faded (at the very
     bottom the browser's own bar, Safari's floating one, covered them), centred both
     ways in the space between the header and the pizza's top, and the pizza sits lower,
     in the middle of the space under them */
  .panel {
    top: var(--header-h); bottom: auto;
    height: calc(var(--film-y) - var(--S) * .38 - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
  }
  .panel--r { text-align: center; }
  /* "Special" comes while the pizza steps aside smaller for the captions: its top is lower */
  .panel:last-child { height: calc(var(--film-y) - var(--S) * .33 - var(--header-h)); }
  .stage { --film-y: calc((var(--header-h) + 160px + 100% - 30px) / 2); }
  .film { top: var(--film-y); }
  .flame-glow { top: calc(var(--film-y) + 2%); }
  .panel__title { font-size: clamp(1.4rem, 4.2svh, 2rem); line-height: 1.05; }
}
/* weak phones: no fire particles, a glow that stands still */
.is-lite .flames { display: none; }
.is-lite .flame-glow { animation: none; opacity: .85; }
.is-lite .film > canvas, .is-lite .film > img, .is-lite .film__fade { animation: none; }
/* the hours, one tap away from anywhere; on narrow screens only the clock, because
   "Öffnungszeiten" and the like don't fit beside the name */
.header__hours { gap: .45rem; }
.header__hours svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .header__hours { width: 38px; padding: 0; justify-content: center; }
  .header__hours span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* the pizza film is one video over the closed still (script.js, chooseFilm) */
.film__spin { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.film > canvas, .film > img, .film__fade, .film__spin { animation: none !important; }

/* ---------- Wi-Fi (header): one tap shows the network and copies the password ---------- */
.wifi { position: relative; }
.header__wifi { gap: .45rem; }
.header__wifi svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.header__wifi svg circle { fill: var(--gold); stroke: none; }
.wifi__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 300px; padding: 1.1rem 1.1rem 1rem;
  background: #13161d;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.wifi.is-open .wifi__panel { opacity: 1; visibility: visible; transform: none; }
.wifi__eyebrow { margin: 0 0 .7rem; font-size: .66rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.wifi__rows { margin: 0 0 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.wifi__rows > div { display: grid; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.wifi__rows dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wifi__rows dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wifi__pass { font-size: 1.08rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }
.wifi__copy {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; height: 48px; border-radius: 12px;
  background: var(--gold); color: #17130b; font-size: .92rem; font-weight: 700;
  transition: background .25s;
}
.wifi__copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wifi__copy .wifi__ok { display: none; }
.wifi__copy.is-done { background: #8fbf7f; }
.wifi__copy.is-done svg { display: none; }
.wifi__copy.is-done .wifi__ok { display: block; }
.wifi__how { margin: .8rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
/* the QR is for another phone (a phone can't scan its own screen): dark on white, for any camera */
.wifi__scan { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.wifi__qr { flex: none; width: 104px; height: 104px; padding: 7px; background: #fff; border-radius: 10px; }
.wifi__qr svg { display: block; width: 100%; height: 100%; }
.wifi__scan p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 760px) {
  .header__wifi { width: 38px; padding: 0; justify-content: center; }
  .header__wifi span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* on phones the panel spans the screen under the header, so it never runs off an edge */
  .wifi__panel { position: fixed; left: 12px; right: 12px; top: calc(var(--header-h) + 8px); width: auto; }
}