/* ══════════════════════════════════════════════════════════════════════════
   DA NAPOLI — pizzeria di strada a Via dei Tribunali
   Nero di fuliggine, bianco di calce, un rosso pomodoro. Tipografia da
   insegna (Bebas), testo stretto (Archivo), numeri da comanda (Space Mono).
   ══════════════════════════════════════════════════════════════════════════ */

@property --brace {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --salsa {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  --nero: #0b0b0b;
  --nero-2: #141312;
  --nero-3: #1e1b19;
  --fuliggine: #2a2624;
  --calce: #f2efe6;
  --calce-2: #e3ded0;
  --calce-3: #cfc9b8;
  --pomodoro: #f0321f;
  --pomodoro-cupo: #c81e12;
  --brace-alta: #ff8a2b;
  --grigio: #9a938a;
  --grigio-scuro: #57514b;

  --display: "Bebas Neue", "Archivo", system-ui, sans-serif;
  --testo: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --margine: clamp(1.1rem, 4.2vw, 4.5rem);
  --largo: 1500px;
  --h-barra: 52px;
  --h-dock: 62px;
  --bordo: 1px solid rgba(242, 239, 230, 0.14);
  --bordo-carta: 1px solid rgba(11, 11, 11, 0.16);
}

@media (min-width: 1100px) {
  :root {
    --h-barra: 80px;
    --h-dock: 0px;
  }
}

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

html {
  scroll-padding-top: calc(var(--h-barra) + 14px);
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--calce);
  font-family: var(--testo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--h-dock);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  line-height: 0.92;
}

p {
  margin: 0 0 1.05em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

b,
strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--pomodoro);
  outline-offset: 3px;
}

.carta :focus-visible,
.comanda :focus-visible,
.sala :focus-visible,
.orari :focus-visible,
.dove :focus-visible,
.bottega :focus-visible {
  outline-color: var(--pomodoro-cupo);
}

/* ── skip link ─────────────────────────────────────────────────────────── */

.salta {
  position: absolute;
  z-index: 90;
  top: 0;
  left: 0;
  transform: translateY(-140%);
  display: inline-block;
  padding: 0.7rem 1.2rem;
  min-height: 40px;
  background: var(--pomodoro);
  color: #fff;
  font: 700 0.9rem/1.4 var(--mono);
  text-decoration: none;
}

.salta:focus-visible {
  transform: translateY(0);
}

/* ── nastro di finzione ────────────────────────────────────────────────── */

.nastro {
  margin: 0;
  background: var(--pomodoro-cupo);
  color: #fff9f4;
  font: 400 0.78rem/1.35 var(--mono);
}

.nastro a {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 34px;
  padding: 0.5rem var(--margine);
  text-decoration: none;
  text-align: center;
}

.nastro a:hover .nastro__testo {
  text-decoration: underline;
}

.nastro__eti {
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ══ BARRA DEL FORNO ═══════════════════════════════════════════════════════
   Fascia sempre visibile: temperatura, cottura, e l'indice numerato come una
   comanda. Sotto i 1100 px resta la sola lettura del forno e la navigazione
   passa al dock in basso.
   ═══════════════════════════════════════════════════════════════════════ */

.barra {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 11, 11, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(242, 239, 230, 0.16);
}

.barra__testa {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 2rem);
  padding: 0 var(--margine);
  min-height: 52px;
}

.barra__marchio {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.35rem 0;
  min-height: 26px;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.045em;
  text-decoration: none;
  white-space: nowrap;
}

.barra__marchio-n {
  color: var(--pomodoro);
}

.barra__forno {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.5rem);
  margin: 0 auto 0 0;
  padding-left: clamp(0.6rem, 2vw, 1.6rem);
  border-left: 1px solid rgba(242, 239, 230, 0.18);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.1;
}

.barra__spia {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pomodoro);
  box-shadow: 0 0 0 0 rgba(240, 50, 31, 0.55);
  flex: none;
}

.barra__dato {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  white-space: nowrap;
}

.barra__dato--largo {
  display: none;
}

.barra__eti {
  color: var(--grigio);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.barra__forno b {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.barra__tel {
  display: none;
  padding: 0.3rem 0;
  text-align: right;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.barra__tel-eti {
  display: block;
  color: var(--grigio);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.barra__tel b {
  font-size: 0.92rem;
}

.barra__tel:hover b {
  color: var(--pomodoro);
}

.barra__indice {
  display: none;
  border-top: 1px solid rgba(242, 239, 230, 0.12);
}

.barra__indice ol {
  display: flex;
  align-items: stretch;
  gap: clamp(0.1rem, 0.5vw, 0.5rem);
  padding: 0 calc(var(--margine) - 0.4rem);
}

.barra__indice a {
  display: flex;
  align-items: baseline;
  gap: 0.34rem;
  padding: 0.42rem 0.4rem 0.46rem;
  min-height: 27px;
  text-decoration: none;
  color: var(--calce);
  position: relative;
  transition: color 0.22s ease;
}

.barra__indice em {
  font: 400 0.62rem/1 var(--mono);
  font-style: normal;
  color: var(--grigio);
  transition: color 0.22s ease;
}

.barra__indice span {
  font-family: var(--display);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.barra__indice a::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0;
  height: 2px;
  background: var(--pomodoro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.barra__indice a:hover em,
.barra__indice a.attiva em {
  color: var(--pomodoro);
}

.barra__indice a:hover::after,
.barra__indice a.attiva::after {
  transform: scaleX(1);
}

.barra__cottura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}

.barra__cottura i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pomodoro-cupo), var(--pomodoro) 60%, var(--brace-alta));
  transform: scaleX(0);
  transform-origin: left;
}

@media (min-width: 640px) {
  .barra__dato--largo {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .barra__testa {
    min-height: 46px;
  }
  .barra__marchio {
    font-size: 1.7rem;
  }
  .barra__tel {
    display: block;
  }
  .barra__indice {
    display: block;
  }
}

/* ══ FOGLIO DELL'INDICE (mobile) ═══════════════════════════════════════════ */

.foglio {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  background: rgba(5, 5, 5, 0.62);
  visibility: hidden;
  opacity: 0;
}

.foglio.aperto {
  visibility: visible;
  opacity: 1;
}

.foglio__carta {
  position: relative;
  width: 100%;
  max-height: min(84vh, 640px);
  overflow-y: auto;
  padding: 0.8rem var(--margine) calc(1.4rem + var(--h-dock));
  background: var(--calce);
  color: var(--nero);
  transform: translateY(101%);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55);
}

.foglio__maniglia {
  width: 46px;
  height: 4px;
  margin: 0 auto 0.9rem;
  background: rgba(11, 11, 11, 0.28);
  border-radius: 2px;
}

.foglio__intestazione {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--nero);
  font: 400 0.72rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.foglio__intestazione b {
  color: var(--pomodoro-cupo);
}

.foglio__lista li + li {
  border-top: 1px dashed rgba(11, 11, 11, 0.24);
}

.foglio__lista a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.72rem 0.2rem;
  min-height: 46px;
  text-decoration: none;
}

.foglio__lista em {
  font: 400 0.78rem/1 var(--mono);
  font-style: normal;
  color: var(--pomodoro-cupo);
}

.foglio__lista span {
  font-family: var(--display);
  font-size: 1.42rem;
  letter-spacing: 0.045em;
}

.foglio__piede {
  margin: 0.9rem 0 0.8rem;
  font: 400 0.74rem/1.4 var(--mono);
  color: var(--grigio-scuro);
}

.foglio__chiudi {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.7rem;
  border: 2px solid var(--nero);
  background: transparent;
  color: var(--nero);
  font: 700 0.76rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.foglio__chiudi:hover {
  background: var(--nero);
  color: var(--calce);
}

@media (min-width: 1100px) {
  .foglio {
    display: none;
  }
}

/* ══ DOCK (mobile) ═════════════════════════════════════════════════════════ */

.dock {
  position: fixed;
  z-index: 85;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--nero-2);
  border-top: 2px solid var(--pomodoro);
  padding-bottom: env(safe-area-inset-bottom);
}

.dock__voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  min-height: var(--h-dock);
  padding: 0.5rem 0.2rem;
  border: 0;
  border-right: 1px solid rgba(242, 239, 230, 0.1);
  background: transparent;
  color: var(--calce);
  font-family: var(--mono);
  text-decoration: none;
  cursor: pointer;
}

.dock__voce:last-child {
  border-right: 0;
}

.dock__segno svg {
  width: 21px;
  height: 21px;
  display: block;
}

.dock__eti {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dock__voce[aria-expanded="true"] {
  background: var(--pomodoro);
  color: #fff;
}

@media (min-width: 1100px) {
  .dock {
    display: none;
  }
}

/* ══ ELEMENTI CONDIVISI ════════════════════════════════════════════════════ */

main {
  display: block;
}

section {
  position: relative;
  padding: clamp(3.4rem, 8vw, 7rem) var(--margine);
}

.bottega,
.comanda,
.sala,
.orari,
.dove {
  background: var(--calce);
  color: var(--nero);
  --perfo-alto: var(--nero);
  --perfo-basso: var(--nero);
}

.bottega {
  --perfo-alto: var(--pomodoro);
}

.sala {
  --perfo-basso: var(--pomodoro-cupo);
}

.orari {
  --perfo-alto: var(--pomodoro-cupo);
}

.bottega::before,
.comanda::before,
.sala::before,
.orari::before,
.dove::before,
.bottega::after,
.comanda::after,
.sala::after,
.orari::after,
.dove::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 15px;
  pointer-events: none;
}

.bottega::before,
.comanda::before,
.sala::before,
.orari::before,
.dove::before {
  top: 0;
  background: radial-gradient(circle 8px at 8px 0, var(--perfo-alto) 98%, transparent 100%) repeat-x
    top left / 16px 16px;
}

.bottega::after,
.comanda::after,
.sala::after,
.orari::after,
.dove::after {
  bottom: 0;
  background: radial-gradient(circle 8px at 8px 16px, var(--perfo-basso) 98%, transparent 100%)
    repeat-x bottom left / 16px 16px;
}

.sezione__testa {
  max-width: var(--largo);
  margin: 0 auto clamp(2rem, 4vw, 3.4rem);
  display: grid;
  gap: 0.5rem;
}

.sezione__numero {
  margin: 0;
  font: 400 0.76rem/1 var(--mono);
  letter-spacing: 0.3em;
  color: var(--pomodoro-cupo);
}

.sezione__testa--scura .sezione__numero {
  color: var(--pomodoro);
}

.sezione__numero--chiaro {
  color: rgba(255, 255, 255, 0.82);
}

.sezione__titolo {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7.4vw, 5.4rem);
  letter-spacing: 0.012em;
  text-wrap: balance;
  max-width: 20ch;
}

.sezione__occhiello {
  margin: 0;
  font: 400 0.76rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--grigio);
}

.sezione__testa--carta .sezione__occhiello {
  color: var(--grigio-scuro);
}

.testo-guida {
  font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.34rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--pomodoro);
  background: var(--pomodoro);
  color: #fff;
  font: 700 0.82rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bottone:hover {
  transform: translateY(-2px);
  background: var(--brace-alta);
  border-color: var(--brace-alta);
  color: var(--nero);
}

.bottone--vuoto {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.bottone--vuoto:hover {
  background: var(--pomodoro);
  border-color: var(--pomodoro);
  color: #fff;
}

.bottone--nero {
  background: var(--nero);
  border-color: var(--nero);
  color: var(--calce);
}

.bottone--nero:hover {
  background: var(--calce);
  border-color: var(--calce);
  color: var(--nero);
}

.bottone--stretto {
  min-height: 44px;
  padding: 0.65rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

main p a:not([class]),
figcaption a:not([class]),
.piede a:not([class]) {
  display: inline-block;
  padding-block: 0.16em;
  color: inherit;
  text-decoration-color: var(--pomodoro);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

main p a:not([class]):hover {
  color: var(--pomodoro);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.65rem;
  font: 400 0.78rem/1.45 var(--mono);
  color: var(--grigio);
}

.bottega figcaption,
.sala figcaption,
.dove figcaption {
  color: var(--grigio-scuro);
}

/* ══ 01 · STRADA ═══════════════════════════════════════════════════════════ */

.strada {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0;
  min-height: calc(100dvh - var(--h-barra));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.strada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 80% 0%, rgba(240, 50, 31, 0.16), transparent 60%);
  pointer-events: none;
}

.strada__griglia {
  position: relative;
  width: 100%;
  max-width: var(--largo);
  margin: 0 auto;
  flex: 1;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
  padding-bottom: 2.4rem;
}

.strada__occhio {
  margin: 0 0 0.9rem;
  font: 400 0.76rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio);
}

.strada__occhio span {
  color: var(--pomodoro);
}

.titolo-strada {
  container-type: inline-size;
  margin: 0 0 1.3rem;
  display: grid;
  gap: 0.1rem;
}

.maschera {
  display: block;
  overflow: hidden;
}

.riga-alta {
  display: block;
  font-family: var(--display);
  font-size: clamp(3rem, 21cqi, 8.4rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--pomodoro);
}

.riga-alta--grande {
  font-size: clamp(3.9rem, 26.5cqi, 10.6rem);
  color: var(--calce);
}

.strada__sotto {
  max-width: 46ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  color: var(--calce-2);
}

.fatti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.2rem;
  max-width: 34rem;
  margin: 1.6rem 0;
  padding-top: 1.3rem;
  border-top: var(--bordo);
}

.fatti li {
  display: grid;
  gap: 0.1rem;
}

.fatti b {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.fatti span {
  font: 400 0.72rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grigio);
}

.strada__foto {
  position: relative;
}

.strada__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% 50% 4px 4px / 26% 26% 4px 4px;
  filter: contrast(1.06) saturate(1.05);
}

.strada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 4px 4px / 26% 26% 4px 4px;
  box-shadow: inset 0 -90px 90px -40px rgba(11, 11, 11, 0.9);
  pointer-events: none;
}

.banda {
  position: relative;
  margin: 0 calc(var(--margine) * -1);
  padding: 0.5rem 0;
  background: var(--pomodoro);
  color: #fff;
  overflow: hidden;
  border-top: 2px solid var(--nero);
}

.banda__nastro {
  display: flex;
  width: max-content;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.banda__nastro span {
  padding-right: 1rem;
}

@media (min-width: 900px) {
  .strada__griglia {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  }
  .fatti {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .strada__foto img {
    aspect-ratio: 3 / 4;
  }
}

/* ══ 02 · BOTTEGA ══════════════════════════════════════════════════════════ */

.bottega__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
}

.bottega__colonna p {
  max-width: 62ch;
}

.bottega__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.scheda-numeri {
  margin: 1.6rem 0 0;
  border-top: 2px solid var(--nero);
}

.scheda-numeri > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed rgba(11, 11, 11, 0.28);
}

.scheda-numeri dt {
  font: 400 0.74rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: var(--grigio-scuro);
}

.scheda-numeri dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--pomodoro-cupo);
}

@media (min-width: 900px) {
  .bottega__corpo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .bottega__colonna--stretta {
    display: grid;
    align-content: start;
  }
}

/* ══ 03 · IMPASTO · le 48 ore ══════════════════════════════════════════════ */

/* overflow: clip e non hidden — hidden creerebbe un contenitore di scorrimento
   e la scena delle 48 ore smetterebbe di restare appesa (sticky) */
.impasto {
  background: #070707;
  overflow: clip;
}

.impasto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 45% at 50% 100%,
    rgba(240, 50, 31, calc(var(--brace) * 0.22)),
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.4s linear;
}

.ore {
  position: relative;
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
}

.ore__scena {
  position: relative;
  display: grid;
  gap: 1rem;
  justify-items: center;
  align-content: start;
}

.ore__quadrante {
  position: relative;
  width: 116px;
  height: 116px;
}

.ore__quadrante svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ore__lettura {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.1rem;
}

.ore__lettura b {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
}

.ore__lettura span {
  font: 400 0.6rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
}

.ore__forno {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1 / 0.86;
}

.ore__volta,
.ore__brace,
.ore__fiamma {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 8px 8px / 62% 62% 8px 8px;
}

.ore__volta {
  border: 2px solid rgba(242, 239, 230, 0.24);
  background: linear-gradient(180deg, #16130f 0%, #0c0a09 70%);
  box-shadow: inset 0 -30px 60px rgba(0, 0, 0, 0.9);
}

.ore__brace {
  background: radial-gradient(
    76% 52% at 50% 92%,
    rgba(255, 214, 120, calc(var(--brace) * 0.95)) 0%,
    rgba(255, 122, 24, calc(var(--brace) * 0.85)) 26%,
    rgba(200, 30, 18, calc(var(--brace) * 0.6)) 52%,
    transparent 78%
  );
}

.ore__fiamma {
  background: radial-gradient(
    34% 26% at 28% 88%,
    rgba(255, 176, 60, calc(var(--brace) * 0.75)),
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}

.ore__platea {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 8%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(242, 239, 230, 0.1),
    rgba(242, 239, 230, calc(0.16 + var(--brace) * 0.4)),
    rgba(242, 239, 230, 0.1)
  );
}

.ore__panetto {
  --salsa: 0;
  position: absolute;
  left: 50%;
  bottom: 10.5%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% 0;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 48% 48% / 54% 54% 46% 46%;
  background: radial-gradient(60% 60% at 38% 30%, #fffaf0, #ded4bd 62%, #b9ac91);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6), inset -8px -10px 20px rgba(120, 106, 82, 0.35);
}

.ore__panetto::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #d9331d 0%, #b4200f 70%, transparent 72%);
  opacity: var(--salsa);
}

.ore__panetto i {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset -1px -2px 3px rgba(150, 135, 105, 0.55);
  opacity: 0;
}

.ore__panetto i:nth-child(1) { left: 22%; top: 30%; }
.ore__panetto i:nth-child(2) { left: 58%; top: 22%; }
.ore__panetto i:nth-child(3) { left: 38%; top: 52%; }
.ore__panetto i:nth-child(4) { left: 70%; top: 48%; }
.ore__panetto i:nth-child(5) { left: 14%; top: 58%; }

.ore__didascalia {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font: 400 0.8rem/1.5 var(--mono);
  color: var(--calce-3);
}

.ore__fasi {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.fase {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.4rem;
  border-left: 2px solid rgba(242, 239, 230, 0.16);
  transition: border-color 0.35s ease;
}

.fase.attiva {
  border-left-color: var(--pomodoro);
}

.fase__ora {
  margin: 0 0 0.2rem;
  font: 700 0.74rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pomodoro);
}

.fase__ora span {
  font-weight: 400;
  color: var(--grigio);
}

.fase__titolo {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.fase__testo {
  margin: 0;
  max-width: 56ch;
  color: var(--calce-2);
}

.impasto__coda {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.5rem;
  border-top: var(--bordo);
  font-size: 1.05rem;
  color: var(--calce-2);
}

@media (min-width: 900px) {
  .ore {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .ore__scena {
    position: sticky;
    top: calc(var(--h-barra) + clamp(1rem, 4vh, 3rem));
  }
  .ore__fasi {
    gap: clamp(3rem, 14vh, 9rem);
    padding-block: 4vh 12vh;
  }
  .fase {
    padding-left: 2rem;
  }
}

/* ══ 04 · FORNO ════════════════════════════════════════════════════════════ */

.forno {
  background: linear-gradient(180deg, #070707 0%, var(--nero) 40%);
}

.forno__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}

.forno__testo p {
  max-width: 60ch;
  color: var(--calce-2);
}

.forno__quadro {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(242, 239, 230, 0.16);
  border: 1px solid rgba(242, 239, 230, 0.16);
}

.forno__quadro > div {
  background: var(--nero-2);
  padding: 1.1rem 1rem;
  display: grid;
  gap: 0.3rem;
}

.forno__quadro dt {
  font: 400 0.68rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio);
}

.forno__quadro dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--brace-alta);
}

@media (min-width: 900px) {
  .forno__corpo {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
  .forno__quadro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ══ 05 · COMANDA ══════════════════════════════════════════════════════════ */

/* Gli occhielli restano allineati al titolo anche oltre la larghezza massima:
   margine sinistro = lo stesso scarto che centra il blocco della sezione. */
.comanda__intro,
.prodotti__intro,
.impasto__coda {
  max-width: 64ch;
  margin-inline: max(0px, calc((100% - var(--largo)) / 2)) auto;
}

.comanda__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: 1.05rem;
}

.comanda__intro strong {
  background: var(--pomodoro);
  color: #fff;
  padding: 0.06em 0.3em;
}

.comanda__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}

.blocco + .blocco {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.blocco__titolo {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  letter-spacing: 0.05em;
  padding-bottom: 0.3rem;
  border-bottom: 3px solid var(--nero);
}

.blocco__nota {
  margin: 0.6rem 0 0.4rem;
  font: 400 0.78rem/1.5 var(--mono);
  color: var(--grigio-scuro);
}

.voce {
  border-bottom: 1px dashed rgba(11, 11, 11, 0.26);
}

.voce__riga {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.voce__apri {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.75rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.voce__n {
  font: 400 0.76rem/1 var(--mono);
  color: var(--pomodoro-cupo);
  flex: none;
  min-width: 1.6em;
}

.voce__nome {
  font-family: var(--display);
  font-size: 1.42rem;
  letter-spacing: 0.03em;
  line-height: 1.05;
}

.voce__punti {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted rgba(11, 11, 11, 0.4);
  transform: translateY(-0.24em);
}

.voce__prezzo {
  font: 700 0.92rem/1 var(--mono);
  flex: none;
  white-space: nowrap;
}

.voce__apri:hover .voce__nome {
  color: var(--pomodoro-cupo);
}

.voce__apri[aria-expanded="true"] .voce__nome {
  color: var(--pomodoro-cupo);
}

.voce__segna {
  flex: none;
  align-self: center;
  min-width: 68px;
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  border: 1.5px solid rgba(11, 11, 11, 0.5);
  background: transparent;
  color: var(--nero);
  font: 400 0.68rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.voce__segna:hover {
  border-color: var(--pomodoro-cupo);
  color: var(--pomodoro-cupo);
}

.voce__segna[aria-pressed="true"] {
  background: var(--pomodoro-cupo);
  border-color: var(--pomodoro-cupo);
  color: #fff;
}

.voce__segna[aria-pressed="true"]::before {
  content: "✓ ";
}

.voce__dentro {
  overflow: hidden;
  padding-bottom: 0.9rem;
}

.voce__ingr {
  margin: 0 0 0.5rem;
  max-width: 58ch;
  font-size: 0.97rem;
  color: #2b2724;
}

.voce__nota {
  margin: 0;
  max-width: 58ch;
  padding-left: 0.9rem;
  border-left: 3px solid var(--pomodoro);
  font-size: 0.94rem;
  font-style: italic;
  color: #3a3532;
}

.voce__nota b {
  display: block;
  font-style: normal;
  font: 700 0.68rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomodoro-cupo);
}

.conto {
  position: relative;
  padding: 1.3rem 1.2rem 1.4rem;
  background: #fbf9f2;
  border: 2px solid var(--nero);
  box-shadow: 6px 6px 0 rgba(11, 11, 11, 0.14);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 25px,
    rgba(11, 11, 11, 0.07) 25px 26px
  );
}

.conto__titolo {
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.conto__spiega {
  margin: 0 0 0.9rem;
  font: 400 0.76rem/1.5 var(--mono);
  color: var(--grigio-scuro);
}

.conto__lista {
  min-height: 3rem;
  margin: 0 0 0.9rem;
  border-top: 1px solid rgba(11, 11, 11, 0.25);
}

.conto__lista li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted rgba(11, 11, 11, 0.28);
  font: 400 0.88rem/1.35 var(--mono);
}

.conto__lista li b {
  font-weight: 700;
  white-space: nowrap;
}

.conto__vuoto {
  color: var(--grigio-scuro);
  font-style: italic;
}

.conto__totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.5rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--nero);
  font: 400 0.76rem/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.conto__totale b {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--pomodoro-cupo);
}

.conto__coperto {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: var(--grigio-scuro);
}

.conto__azioni {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 1000px) {
  .comanda__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  }
  .conto {
    position: sticky;
    top: calc(var(--h-barra) + 1.5rem);
  }
}

/* ══ 06 · PRODOTTI ═════════════════════════════════════════════════════════ */

.prodotti__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: var(--calce-2);
}

.prodotti__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.bolla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.bolla caption {
  text-align: left;
  padding-bottom: 0.7rem;
  font: 400 0.74rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grigio);
}

.bolla th,
.bolla td {
  text-align: left;
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid rgba(242, 239, 230, 0.14);
  vertical-align: top;
}

.bolla thead th {
  font: 400 0.68rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomodoro);
  border-bottom: 2px solid var(--pomodoro);
}

.bolla tbody th {
  font-weight: 600;
  color: var(--calce);
}

.bolla td {
  color: var(--calce-3);
}

.bolla tbody tr td:last-child {
  font-family: var(--mono);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

.prodotti__campioni {
  display: grid;
  gap: 1.4rem;
}

.campione img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.05);
}

.campione figcaption b {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--pomodoro);
}

@media (min-width: 980px) {
  .prodotti__corpo {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

/* ══ 07 · SERA ═════════════════════════════════════════════════════════════ */

.sera {
  background: var(--nero-2);
  overflow: hidden;
}

.pista {
  position: relative;
  max-width: var(--largo);
  margin: 0 auto;
  overflow: hidden;
}

.pista__binario {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-bottom: 0.4rem;
  cursor: grab;
}

.pista__binario:active {
  cursor: grabbing;
}

.tappa {
  width: min(78vw, 330px);
  flex: none;
  padding: 1.3rem 1.2rem 1.5rem;
  border: 1px solid rgba(242, 239, 230, 0.16);
  background: var(--nero);
  display: grid;
  align-content: start;
  gap: 0.3rem;
}

.tappa--foto {
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.tappa--foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tappa--foto figcaption {
  padding: 0.6rem 0.2rem 0;
}

.tappa__ora {
  margin: 0;
  font: 700 0.86rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--pomodoro);
}

.tappa__titolo {
  font-family: var(--display);
  font-size: 1.8rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.tappa__testo {
  margin: 0;
  font-size: 0.96rem;
  color: var(--calce-3);
}

.pista__comandi {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.pista__freccia {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(242, 239, 230, 0.3);
  background: transparent;
  color: var(--calce);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pista__freccia:hover {
  background: var(--pomodoro);
  border-color: var(--pomodoro);
  color: #fff;
}

.pista__freccia[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ══ 08 · SALA ═════════════════════════════════════════════════════════════ */

.sala__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}

.sala__testo p {
  max-width: 62ch;
}

.sala__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.regole {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(11, 11, 11, 0.22);
  border: 1px solid rgba(11, 11, 11, 0.22);
}

.regole li {
  background: var(--calce);
  padding: 1rem;
  display: grid;
  gap: 0.15rem;
}

.regole b {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  color: var(--pomodoro-cupo);
}

.regole span {
  font: 400 0.72rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}

@media (min-width: 900px) {
  .sala__corpo {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .regole {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ══ 09 · ASPORTO ══════════════════════════════════════════════════════════ */

.asporto {
  background: var(--pomodoro-cupo);
  color: #fff8f4;
}

.asporto__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}

.asporto__titolo {
  margin: 0.4rem 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.6vw, 4.6rem);
  letter-spacing: 0.015em;
  max-width: 16ch;
}

.asporto__testo p {
  max-width: 58ch;
}

.asporto__passi {
  display: grid;
  gap: 1rem;
  margin: 1.6rem 0;
  counter-reset: passo;
}

.asporto__passi li {
  display: grid;
  gap: 0.2rem;
  padding-left: 2.6rem;
  position: relative;
  counter-increment: passo;
}

.asporto__passi li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  font: 700 0.78rem/1 var(--mono);
}

.asporto__passi b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.asporto__passi span {
  font-size: 0.96rem;
  color: rgba(255, 248, 244, 0.9);
}

.asporto__avviso {
  padding: 0.9rem 1rem;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.asporto__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
}

.asporto figcaption {
  color: rgba(255, 248, 244, 0.82);
}

@media (min-width: 900px) {
  .asporto__corpo {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  }
}

/* ══ 10 · ORARI ════════════════════════════════════════════════════════════ */

.orari__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}

.tabella-orari {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.92rem;
}

.tabella-orari caption {
  text-align: left;
  padding-bottom: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}

.tabella-orari th,
.tabella-orari td {
  padding: 0.72rem 0.6rem 0.72rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(11, 11, 11, 0.18);
}

.tabella-orari thead th {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--nero);
}

.tabella-orari tbody th {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.tabella-orari .chiuso {
  color: var(--pomodoro-cupo);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.orari__note h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.orari__note h3 + p {
  margin-bottom: 0.8rem;
}

.orari__note p {
  max-width: 52ch;
  font-size: 0.98rem;
}

.orari__chiusure {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.orari__chiusure li {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(11, 11, 11, 0.05);
  border-left: 3px solid var(--pomodoro-cupo);
}

.orari__chiusure b {
  font: 700 0.9rem/1.3 var(--mono);
}

.orari__chiusure span {
  font-size: 0.9rem;
  color: var(--grigio-scuro);
}

@media (min-width: 900px) {
  .orari__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* ══ 11 · DOMANDE ══════════════════════════════════════════════════════════ */

.domande__lista {
  max-width: min(80ch, var(--largo));
  margin: 0 auto;
  border-top: 1px solid rgba(242, 239, 230, 0.2);
}

.domanda {
  border-bottom: 1px solid rgba(242, 239, 230, 0.2);
}

.domanda summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.1rem 0;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: 0.03em;
}

.domanda summary::-webkit-details-marker {
  display: none;
}

.domanda summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(242, 239, 230, 0.4);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--pomodoro);
  transition: background 0.2s ease, color 0.2s ease;
}

.domanda[open] summary::after {
  content: "−";
  background: var(--pomodoro);
  color: #fff;
  border-color: var(--pomodoro);
}

.domanda summary:hover {
  color: var(--pomodoro);
}

.domanda__corpo {
  padding-bottom: 1.2rem;
}

.domanda__corpo p {
  margin: 0;
  max-width: 68ch;
  color: var(--calce-2);
}

/* ══ 12 · DOVE ═════════════════════════════════════════════════════════════ */

.dove__corpo {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}

.dove__testo p {
  max-width: 58ch;
}

.dove__passi {
  display: grid;
  gap: 0.9rem;
  margin: 1.4rem 0;
}

.dove__passi li {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: rgba(11, 11, 11, 0.05);
  border-left: 3px solid var(--pomodoro-cupo);
}

.dove__passi b {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.dove__passi span {
  font-size: 0.95rem;
}

.dove__recapito {
  padding: 1rem 1.1rem;
  border: 2px solid var(--nero);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.7;
}

.dove__recapito b {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.dove__mappa svg {
  width: 100%;
  height: auto;
  display: block;
  background: #ece8dc;
  border: 2px solid var(--nero);
}

.mappa__isolati rect {
  fill: #ddd7c6;
  stroke: rgba(11, 11, 11, 0.25);
  stroke-width: 1.5;
}

.mappa__strade path {
  stroke: #fbf9f2;
  stroke-width: 16;
  fill: none;
}

.mappa__strade .mappa__decumano {
  stroke-width: 26;
}

.mappa__strade .mappa__minore {
  stroke-width: 11;
}

.mappa__percorso {
  stroke: var(--pomodoro-cupo);
  stroke-width: 4;
  stroke-dasharray: 10 9;
  stroke-linecap: round;
}

.mappa__metro {
  fill: var(--nero);
}

.mappa__noi {
  fill: var(--pomodoro-cupo);
  stroke: var(--nero);
  stroke-width: 2;
}

.mappa__alone {
  fill: none;
  stroke: var(--pomodoro-cupo);
  stroke-width: 2;
  opacity: 0.5;
}

.mappa__scritte text {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--nero);
}

.mappa__scritte .mappa__noi-eti {
  font-family: var(--display);
  font-size: 24px;
  fill: var(--pomodoro-cupo);
}

.mappa__scritte .mappa__eti-lato {
  font-size: 13px;
  fill: var(--grigio-scuro);
}

.mappa__scritte .mappa__eti-min {
  font-size: 14px;
  fill: var(--grigio-scuro);
}

@media (min-width: 900px) {
  .dove__corpo {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* ══ PIEDE ═════════════════════════════════════════════════════════════════ */

.piede {
  position: relative;
  background: var(--nero);
  padding: clamp(2.6rem, 6vw, 4.5rem) var(--margine) 2rem;
  border-top: 3px solid var(--pomodoro);
}

.piede__alto {
  max-width: var(--largo);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}

.piede__marchio {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 13vw, 8rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
  color: var(--fuliggine);
}

.piede__recapiti p {
  margin: 0 0 0.3rem;
  font: 400 0.86rem/1.6 var(--mono);
  color: var(--calce-2);
}

.piede__indice ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem 1rem;
}

.piede__indice a {
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 28px;
  font: 400 0.86rem/1.5 var(--mono);
  color: var(--calce-2);
  text-decoration: none;
}

.piede__indice a:hover {
  color: var(--pomodoro);
  text-decoration: underline;
}

.piede__basso {
  max-width: var(--largo);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: 1.4rem;
  border-top: var(--bordo);
  display: grid;
  gap: 0.8rem;
}

.piede__finzione {
  margin: 0;
  max-width: 78ch;
  font-size: 0.9rem;
  color: var(--calce-3);
}

.piede__finzione b {
  color: var(--pomodoro);
}

.piede__firma {
  margin: 0;
  font: 400 0.82rem/1.7 var(--mono);
  color: var(--grigio);
}

@media (min-width: 900px) {
  .piede__alto {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .piede__indice ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ══ STATI INIZIALI (solo con JS attivo) ═══════════════════════════════════ */

.js .maschera > .riga-alta {
  transform: translateY(102%);
}

.js .strada__occhio,
.js .strada__sotto,
.js .fatti,
.js .azioni,
.js .strada__foto {
  opacity: 0;
}

.calma .maschera > .riga-alta {
  transform: none;
}

/* ── senza GSAP: il foglio e le righe funzionano con il solo CSS ────────── */

.senza-gsap .foglio {
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.senza-gsap .foglio__carta {
  transition: transform 0.32s ease;
}

.senza-gsap .foglio.aperto .foglio__carta {
  transform: translateY(0);
}

.calma .strada__occhio,
.calma .strada__sotto,
.calma .fatti,
.calma .azioni,
.calma .strada__foto {
  opacity: 1;
}

/* ══ MOVIMENTO RIDOTTO ═════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .maschera > .riga-alta {
    transform: none !important;
  }

  .strada__occhio,
  .strada__sotto,
  .fatti,
  .azioni,
  .strada__foto,
  .fase,
  .tappa {
    opacity: 1 !important;
  }

  .ore__scena {
    position: static;
  }

  .bottone:hover {
    transform: none;
  }
}