/* font-imposto-dal-brand: Garet (brand book BORDO - Strategia) */
/* palette-dal-brand: brand book BORDO - Strategia (#f9f7f0 #800f2f #ffa56d) */
@import url("brand-palette.css");
@import url("../fonts/brand-fonts.css");

/* ── 0. Misure ─────────────────────────────────────────────────────────── */
:root {
  --margine: 6px;                  /* fascia di carta fuori dalla cornice */
  --filo: 2px;                     /* il filetto vino della cornice */
  --gutter: calc(var(--margine) + var(--filo) + clamp(14px, 4vw, 48px));
  --header-h: calc(3.4rem + var(--margine));
  --max: 1320px;
  --sezione: clamp(3.75rem, 8vw, 7.5rem);

  --f-titolo: 'Garet', system-ui, sans-serif;
  --f-corpo: 'Garet', system-ui, sans-serif;
  --f-corsivo: 'Libre Baskerville', Georgia, serif;

  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-molla: cubic-bezier(.32, .72, 0, 1);
  --curva-timbro: cubic-bezier(.2, .9, .25, 1.12);

  --vino-15: rgba(128, 15, 47, .15);
  --vino-35: rgba(128, 15, 47, .35);
  --carta-35: rgba(249, 247, 240, .35);

  --stella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.1l-5.69 3 1.09-6.33-4.6-4.49 6.36-.92z'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
  :root { --margine: 12px; }
}

/* ── 1. Base ───────────────────────────────────────────────────────────── */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-carta);
  color: var(--c-vino);
  font-family: var(--f-corpo);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  font-kerning: normal;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) {
  body { font-size: 1.125rem; }
}
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
::selection { background: var(--c-pesca); color: var(--c-vino); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.piede a, .nota a, .legale a {
  text-decoration: underline; text-decoration-color: var(--vino-35);
  transition: text-decoration-color .3s var(--curva);
}
.piede a:hover, .nota a:hover, .legale a:hover { text-decoration-color: currentColor; }
.occhiello, .dateline, .titoletto, .murale__testo p, .foto figcaption { text-wrap: balance; }
.sommario, .articolo p, .manifesto p, .faq-dentro p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--c-vino); outline-offset: 3px; }
.pagina-vino :focus-visible { outline-color: var(--c-pesca); }
p { margin: 0 0 1em; }

.salta {
  position: absolute; left: var(--gutter); top: -6rem; z-index: 80;
  padding: .75rem 1.2rem; border-radius: 999px;
  background: var(--c-vino); color: var(--c-carta);
  font-weight: 850; text-decoration: none;
}
.salta:focus { top: calc(var(--margine) + .75rem); }

/* La cornice: fascia di carta ai bordi dello schermo e filetto vino dentro.
   Sopra le pagine vino il filetto si fonde col fondo e la pagina resta
   incorniciata dalla carta. */
.cornice {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  border: var(--margine) solid var(--c-carta);
  box-shadow: inset 0 0 0 var(--filo) var(--c-vino);
}

.gabbia {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sezione { padding-block: var(--sezione); }
/* Due pagine di carta di fila: un solo respiro, la rubrica fa da filetto */
.cifre + .sezione, .sezione + .sezione { padding-top: 0; }
.pagina-vino { background: var(--c-vino); color: var(--c-carta); }
.pagina-pesca { background: var(--c-pesca); color: var(--c-vino); }

/* ── 2. Grammatica del giornale ────────────────────────────────────────── */
.rubrica {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  padding-top: .85rem;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .78rem; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase;
}
.rubrica::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: currentColor; transform-origin: left center;
}
.rubrica::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .4;
  transform-origin: left center;
}

.testa { container-type: inline-size; }
.occhiello {
  margin: 0 0 .9rem;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .74rem; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase;
}
.titolo {
  margin: 0;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(2.1rem, 10vw, 6rem);
  font-size: clamp(2.1rem, 13.5cqi, 7.25rem);
  line-height: .9; letter-spacing: -.012em;
  text-transform: uppercase;
}
.titolo .riga { display: block; }
.titolo em {
  font-family: var(--f-corsivo); font-style: italic; font-weight: 400;
  font-size: 1.1em; line-height: 1; letter-spacing: -.01em;
  text-transform: none;
}
/* Il puntino della i corsiva sale oltre la sua riga: in «torni» cadeva sotto
   la C di «per cui» e si leggeva «ÇUI» (misurato il 01/10). Un filo d'aria
   sopra la riga in corsivo. La prima pagina ne resta fuori: la sua altezza è
   tarata sul bottone Chiama da telefono. */
.titolo em.riga { padding-top: .12em; }
.prima .titolo em.riga { padding-top: 0; }
.titolo--medio { font-size: clamp(2rem, 9vw, 4.4rem); font-size: clamp(2rem, 12cqi, 4.6rem); }

.sommario {
  margin: 1.35rem 0 0; max-width: 34ch;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.45;
}
.titoletto {
  margin: 0 0 1rem;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.05;
  letter-spacing: .02em; text-transform: uppercase;
}
.firma {
  margin: 2rem 0 0; padding-top: .8rem; max-width: 14rem;
  border-top: 1px solid currentColor;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.nota { margin: 1.1rem 0 0; font-family: var(--f-corsivo); font-style: italic; font-size: .95rem; }

.articolo p { margin: 0 0 1em; }
.articolo p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .articolo--colonne { columns: 2; column-gap: 2.5rem; column-rule: 1px solid var(--vino-35); }
}
.capolettera > p:first-child::first-letter,
p.capolettera::first-letter {
  float: left;
  margin: .06em .16em 0 0; padding: .14em .16em .08em;
  background: var(--c-vino); color: var(--c-carta);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: 3.4em; line-height: .8;
}
.pagina-vino .capolettera::first-letter,
.pagina-vino .capolettera > p:first-child::first-letter {
  background: var(--c-pesca); color: var(--c-vino);
}

/* ── 3. Bottoni: pillola con l'icona nel suo cerchio ───────────────────── */
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.bottone {
  display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.25rem; padding: .4rem .4rem .4rem 1.4rem;
  border: 1.5px solid var(--c-vino); border-radius: 999px;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .8rem; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s var(--curva), color .4s var(--curva), transform .4s var(--curva-molla);
}
.bottone__icona {
  display: grid; place-items: center; flex: none;
  width: 2.45rem; height: 2.45rem; border-radius: 50%;
  transition: transform .5s var(--curva-molla);
}
.bottone__icona svg { width: 1.05rem; height: 1.05rem; }
.bottone--pieno { background: var(--c-vino); color: var(--c-carta); }
.bottone--pieno .bottone__icona { background: var(--c-carta); color: var(--c-vino); }
.bottone--filo { color: var(--c-vino); }
.bottone--filo .bottone__icona { background: var(--c-vino); color: var(--c-carta); }
.bottone--filo:hover { background: var(--c-vino); color: var(--c-carta); }
.bottone--filo:hover .bottone__icona { background: var(--c-carta); color: var(--c-vino); }
.bottone:hover .bottone__icona { transform: translate(2px, -2px) scale(1.06); }
.bottone:active { transform: scale(.98); }
.bottone--piccolo { min-height: 2.6rem; padding: .3rem .3rem .3rem 1rem; gap: .6rem; font-size: .7rem; }
.bottone--piccolo .bottone__icona { width: 1.9rem; height: 1.9rem; }
.bottone--piccolo .bottone__icona svg { width: .85rem; height: .85rem; }

/* ── 4. Testata ────────────────────────────────────────────────────────── */
.testata {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--margine) + clamp(1rem, 2.6vw, 1.9rem)) var(--gutter) 0;
}
.testata__riga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "menu sopra timbro" "lettering lettering lettering";
  align-items: center; column-gap: .75rem; row-gap: .6rem;
}
.tondo { grid-area: menu; }
.nome__sopra { grid-area: sopra; }
.nome__lettering { grid-area: lettering; }
.timbro { grid-area: timbro; }
.orecchio { display: none; }

.tondo {
  --d: clamp(3.5rem, 8.5vw, 6.2rem);
  display: grid; place-items: center;
  width: var(--d); height: var(--d); border-radius: 50%;
  border: 1.5px solid var(--c-vino);
  box-shadow: inset 0 0 0 4px var(--c-carta), inset 0 0 0 5.5px var(--c-vino);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(.64rem, 1.3vw, .86rem); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s var(--curva), color .4s var(--curva);
}
.tondo:hover { background: var(--c-vino); color: var(--c-carta); }

.nome__sopra {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(.62rem, 1.2vw, .82rem); letter-spacing: .32em; text-transform: uppercase;
  white-space: nowrap;
}
.nome__sopra::before, .nome__sopra::after {
  content: ""; width: clamp(.9rem, 3vw, 2.6rem); height: 1px; background: currentColor;
}
@media (max-width: 379px) {
  .nome__sopra { letter-spacing: .22em; }
  .nome__sopra::before, .nome__sopra::after { display: none; }
}
.nome__lettering {
  justify-self: center;
  width: min(100%, 34rem); height: auto;
}

.timbro {
  --w: clamp(5.4rem, 10.5vw, 8.8rem);
  display: grid; place-items: center;
  width: var(--w); height: calc(var(--w) * .64);
  border-radius: 50%;
  background: var(--c-pesca); color: var(--c-vino);
  border: 1.5px solid var(--c-vino);
  box-shadow: inset 0 0 0 3.5px var(--c-pesca), inset 0 0 0 5px var(--c-vino);
  transform: rotate(-8deg);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(.7rem, 1.4vw, 1rem); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .5s var(--curva-molla);
}
.timbro:hover { transform: rotate(-3deg) scale(1.05); }

.testata__data {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  margin-top: clamp(.9rem, 2vw, 1.4rem);
  padding-block: .6rem .65rem;
  border-top: 1px solid var(--c-vino);
  border-bottom: 4px double var(--c-vino);
  text-align: center;
}
.dateline { margin: 0; font-family: var(--f-corsivo); font-style: italic; font-size: .92rem; line-height: 1.45; }
.testata__orari, .testata__stato {
  margin: 0;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.punto {
  position: relative; display: inline-block;
  width: .6em; height: .6em; margin-right: .55em; vertical-align: .05em;
  border-radius: 50%; border: 1.5px solid var(--c-vino);
}
.aperto .punto { background: var(--c-pesca); }
.sep { white-space: pre; }

/* Da 1024 px la testata sta su una riga sola: MENU, nome, PRENOTA (le
   orecchie arrivano a 1200). Impilata, sui tablet in orizzontale (1024x768,
   1112x834, 1180x820) spingeva Prenota della prima pagina 91-114 px sotto
   la cornice. Misura del giro 2. */
@media (min-width: 1024px) {
  .testata__riga {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu sopra timbro"
      "menu lettering timbro";
    column-gap: clamp(1.25rem, 2.2vw, 2.25rem); row-gap: .8rem;
  }
  .nome__lettering { width: min(clamp(20rem, 34vw, 33rem), 55vh); }
}

@media (min-width: 1200px) {
  .testata__riga {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu osx sopra odx timbro"
      "menu osx lettering odx timbro";
    column-gap: clamp(1.25rem, 2.2vw, 2.25rem); row-gap: .8rem;
  }
  .orecchio--sx { grid-area: osx; }
  .orecchio--dx { grid-area: odx; }
  .orecchio {
    display: block; align-self: center;
    max-width: 13rem; margin: 0; padding: .8rem 1rem;
    border: 1px solid var(--c-vino);
    font-family: var(--f-titolo); font-weight: 850;
    font-size: .68rem; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase;
    text-align: center;
  }
  .orecchio--sx { justify-self: start; }
  .orecchio--dx { justify-self: end; }
  .orecchio .sep { display: block; height: 0; overflow: hidden; }
  .nome__lettering { width: min(clamp(22rem, 34vw, 33rem), 55vh); }
  .testata__data { flex-direction: row; justify-content: space-between; }
  .testata__stato { display: none; }
}

/* La barra sottile che resta quando la testata esce dallo schermo */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--margine) var(--gutter) 0;
  background: var(--c-carta);
  border-bottom: 1px solid var(--c-vino);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .5s var(--curva-molla), visibility 0s .5s;
}
.barra.in-vista { transform: none; visibility: visible; transition: transform .5s var(--curva-molla), visibility 0s; }
.barra__nome { display: block; line-height: 0; }
.barra__nome img { height: 1.7rem; width: auto; }

/* ── 5. Prima pagina ───────────────────────────────────────────────────── */
.prima { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }
.foto-prima { position: relative; margin: 0; }
/* Sui portatili la finestra utile è 700-800 px: la prima pagina si stringe
   in altezza perché il bottone Prenota resti sopra la piega. */
@media (min-width: 1024px) {
  .prima { padding-top: clamp(1.25rem, 3vh, 2.25rem); }
  .prima .rubrica { margin-bottom: clamp(1rem, 2.2vh, 2.25rem); }
  .prima .titolo { font-size: min(clamp(2.1rem, 13.5cqi, 7.25rem), 9vh); }
  .prima .sommario { margin-top: clamp(.75rem, 1.6vh, 1.35rem); font-size: min(clamp(1.15rem, 1.9vw, 1.42rem), 2.6vh); }
  .prima .azioni { margin-top: clamp(1rem, 2.6vh, 2rem); }
}
/* Portatili bassi (1366x660, 1280x720, 1536x730, 1280x600): la finestra utile
   sta sotto gli 820 px. Testata e titolo si stringono ancora, perché Prenota
   e Chiama restino dentro la cornice senza scorrere. */
@media (min-width: 1024px) and (max-height: 820px) {
  .testata { padding-top: calc(var(--margine) + clamp(.6rem, 2.2vh, 1.9rem)); }
  .nome__lettering { width: min(clamp(20rem, 34vw, 33rem), 46vh); }
  .testata__data { margin-top: .55rem; padding-block: .4rem .45rem; }
  .prima { padding-top: clamp(.6rem, 1.6vh, 1.25rem); }
  .prima .titolo { font-size: min(clamp(2.1rem, 13.5cqi, 7.25rem), 8vh); }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .nome__lettering { width: min(clamp(20rem, 34vw, 33rem), 40vh); }
  .prima .titolo { font-size: min(clamp(2.1rem, 13.5cqi, 7.25rem), 7vh); }
}
/* Tablet in orizzontale e finestre fra 1024 e 1199 px: a metà pagina la
   colonna del testo (429-507 px) non teneva Prenota e Chiama sulla stessa
   riga, e Chiama finiva sotto la cornice. Il testo prende 7 colonne su 12. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .prima .testa { grid-column: span 7 / span 7; }
  .prima .foto-prima { grid-column: span 5 / span 5; }
  .prima .bottone { gap: .7rem; padding-left: 1.1rem; letter-spacing: .08em; }
  /* foto più stretta: il bollo si rimpicciolisce e lascia leggere la lavagna */
  .prima .bollo { --d: clamp(6.8rem, 11vw, 9.4rem); }
  .prima .bollo .voto__numero { font-size: clamp(2rem, 3.6vw, 2.8rem); }
}

.foto-prima__cornice { position: relative; padding: .45rem; border: 1px solid var(--c-vino); }
.foto-prima__cornice img { display: block; width: 100%; height: auto; }
.foto-prima__didascalia {
  position: relative; z-index: 1;
  max-width: 21rem; margin: -2.4rem 0 0 1rem;
  padding: .9rem 1.1rem;
  background: var(--c-vino); color: var(--c-carta);
  font-family: var(--f-corsivo); font-style: italic; font-size: .9rem; line-height: 1.45;
}
.bollo {
  --d: clamp(6.8rem, 14vw, 9.4rem);
  position: absolute; z-index: 2; top: -1.5rem; right: -.75rem;
  width: var(--d); height: var(--d); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-pesca); color: var(--c-vino);
  box-shadow: inset 0 0 0 5px var(--c-pesca), inset 0 0 0 6.5px var(--c-vino);
  text-align: center; transform: rotate(9deg);
}
.bollo__sopra, .bollo__sotto {
  margin: 0; font-family: var(--f-titolo); font-weight: 850;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.bollo .voto { margin: .1rem 0; line-height: 1; }
.bollo .voto__stelle, .bollo .voto__conto { display: none; }
.bollo .voto__numero {
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums;
}

/* ── 6. In cifre ───────────────────────────────────────────────────────── */
.cifre { padding-block: 0 var(--sezione); }
.cifre__riga {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--c-vino); border-bottom: 1px solid var(--c-vino);
}
.cifra { padding: clamp(1.3rem, 3vw, 2.3rem) clamp(.9rem, 2vw, 1.8rem); }
.cifra:first-child { padding-left: 0; }
.cifra--voto { grid-column: 1 / -1; border-bottom: 1px solid var(--c-vino); }
.cifra:nth-child(2) { padding-left: 0; }
.cifra:nth-child(3) { border-left: 1px solid var(--c-vino); }
.cifra__numero {
  margin: 0; font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(1.75rem, 4.4vw, 3.4rem); line-height: .95; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.cifra__etichetta { margin: .7rem 0 0; font-family: var(--f-corsivo); font-style: italic; font-size: .95rem; line-height: 1.4; }
.cifra__sopra {
  margin: 0; font-family: var(--f-titolo); font-weight: 850;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
.cifra--voto .voto { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; margin: .5rem 0 0; }
.cifra--voto .voto__numero {
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(3.6rem, 10vw, 7rem); line-height: .9; font-variant-numeric: tabular-nums;
}
.cifra--voto .voto__conto { flex-basis: 100%; margin-top: .6rem; font-family: var(--f-corsivo); font-style: italic; font-size: .95rem; }
.voto__stelle {
  display: inline-block; font-size: 0; line-height: 0;
  width: clamp(1.8rem, 4vw, 3rem); height: clamp(1.8rem, 4vw, 3rem);
  background: currentColor;
  -webkit-mask: var(--stella) center / contain no-repeat;
          mask: var(--stella) center / contain no-repeat;
}
@media (min-width: 1024px) {
  .cifre__riga { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifra--voto { grid-column: span 2; border-bottom: 0; }
  .cifra:nth-child(2) { padding-left: clamp(.9rem, 2vw, 1.8rem); border-left: 1px solid var(--c-vino); }
}

/* ── 7. Foto ───────────────────────────────────────────────────────────── */
.foto { margin: 0; }
.foto__cornice { overflow: hidden; border: 1px solid var(--c-vino); }
.foto__cornice img { display: block; width: 100%; height: auto; }
.foto figcaption, .fascia figcaption {
  margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid var(--vino-35);
  font-family: var(--f-corsivo); font-style: italic; font-size: .88rem; line-height: 1.45;
}
.fascia { margin: 0; }
.fascia img { display: block; width: 100%; height: auto; }
.fascia figcaption {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: .6rem auto 0;
  padding: .5rem var(--gutter) 0; border-top: 0;
}
.illustrazione { display: block; width: 100%; height: auto; }

/* ── 8. Dalla cucina ───────────────────────────────────────────────────── */
.cucina__spaghetti { max-width: 26rem; margin-inline: auto; }
.in-tavola { margin-top: clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--c-vino); }
.in-tavola__testa {
  margin: 0; padding: .85rem 1.25rem;
  background: var(--c-vino); color: var(--c-carta);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
}
.in-tavola__elenco {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem;
  margin: 0; padding: .4rem 1.25rem; list-style: none;
}
.in-tavola__elenco li { padding: .85rem 0; border-bottom: 1px dotted var(--vino-35); }
.in-tavola__elenco li:last-child { border-bottom: 0; }
.piatto { display: block; font-family: var(--f-titolo); font-weight: 850; font-size: 1rem; line-height: 1.3; }
.ingredienti { display: block; margin-top: .2rem; font-family: var(--f-corsivo); font-style: italic; font-size: .9rem; line-height: 1.45; }
.in-tavola__chiusa {
  margin: 0; padding: 1rem 1.25rem 1.15rem;
  border-top: 1px solid var(--c-vino);
  font-family: var(--f-corsivo); font-style: italic;
}
@media (min-width: 768px) {
  .in-tavola__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-tavola__elenco li:nth-last-child(2) { border-bottom: 0; }
}

/* ── 9. L'editoriale (pagina vino) ─────────────────────────────────────── */
.editoriale { padding-block: clamp(4.5rem, 11vw, 10rem); }
.editoriale .occhiello { margin-top: -.6rem; }
.editoriale__calici { width: min(62%, 17rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.manifesto p { max-width: 36ch; margin: 0 0 1.1em; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.5; }
.manifesto .manifesto__forte {
  max-width: 22ch; margin: .1em 0 .8em;
  font-family: var(--f-corsivo); font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.2;
}

/* ── 10. Dal forno, La redazione ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .forno__testo { padding-right: clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--c-vino); }
}

/* ── 11. Cronaca del locale ────────────────────────────────────────────── */
.lettere__testa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 2rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.lettere__testa .titoletto { margin: 0; }
.lettere__sotto { margin: 0; font-family: var(--f-corsivo); font-style: italic; }
.lettere .dentro { display: none; }

/* Il carosello lo scrive sito-recensioni-sync.py: qui la forma di lettera,
   la meccanica (scorre da solo, si trascina, si ferma sotto la mano) in JS. */
.recensioni {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.recensioni::-webkit-scrollbar { display: none; }
.recensioni.si-trascina { cursor: grabbing; scroll-behavior: auto; }
.recensioni__pista { display: flex; width: max-content; padding-block: .5rem; }
.recensioni__gruppo { display: flex; gap: clamp(1rem, 1.8vw, 1.5rem); padding-right: clamp(1rem, 1.8vw, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .recensioni__gruppo[aria-hidden="true"] { display: none; }
}
.recensione {
  flex: 0 0 auto; width: clamp(16rem, 24vw, 20rem);
  display: flex; flex-direction: column; gap: .85rem;
  margin: 0; padding: 1.5rem 1.5rem 1.25rem;
  background: var(--c-carta);
  border: 1px solid var(--c-vino);
  box-shadow: inset 0 0 0 4px var(--c-carta), inset 0 0 0 5px var(--vino-35);
  user-select: none;
}
.recensione__stelle {
  margin: 0; font-size: 0; line-height: 0;
  width: 5.5rem; height: 1rem;
  background: var(--c-vino);
  -webkit-mask: var(--stella) left center / 1.1rem 1rem repeat-x;
          mask: var(--stella) left center / 1.1rem 1rem repeat-x;
}
.recensione blockquote {
  margin: 0;
  font-family: var(--f-corsivo); font-style: italic; font-size: .96rem; line-height: 1.62;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.recensione figcaption {
  margin-top: auto; padding-top: .7rem;
  border-top: 1px solid var(--vino-35);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}

.riquadri { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--c-vino); }
.riquadro { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.riquadro + .riquadro { border-top: 1px solid var(--c-vino); }
@media (min-width: 1024px) {
  .riquadro:first-child { padding-right: clamp(1.5rem, 3vw, 3rem); }
  .riquadro + .riquadro { border-top: 0; border-left: 1px solid var(--c-vino); padding-left: clamp(1.5rem, 3vw, 3rem); }
}
.annunci__elenco { margin: 0; padding: 0; list-style: none; }
.annunci__elenco li { padding: .8rem 0; border-bottom: 1px solid var(--vino-35); line-height: 1.5; }
.annunci__elenco li:last-child { border-bottom: 0; }
.annuncio__voce {
  margin-right: .3rem;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.sala__testo { max-width: 38rem; margin: 1.25rem 0 clamp(1.5rem, 3vw, 2.25rem); }

/* ── 12. Il manifesto, il testo del muro del locale (pagina pesca) ─────── */
.murale { padding-block: clamp(5rem, 12vw, 10.5rem); }
.murale__testo { margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 56rem; text-align: center; }
.murale__testo p {
  margin: 0 0 .6em;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(1.4rem, 3.9vw, 3rem); line-height: 1.08; letter-spacing: -.005em;
  text-transform: uppercase;
}
.murale__testo .murale__chiusa {
  margin: .7em 0 0;
  font-family: var(--f-corsivo); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 4.4rem); line-height: 1.1; text-transform: none;
}
.murale__piede { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.murale__piede .firma { margin: 0; text-align: center; }

/* ── 13. Domande dei lettori ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .domande__testa { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.domanda { border-top: 1px solid var(--c-vino); }
.domanda:last-child { border-bottom: 1px solid var(--c-vino); }
.domanda summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.3;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda__segno {
  position: relative; flex: none;
  width: 2rem; height: 2rem; margin-top: -.2rem;
  border: 1.5px solid var(--c-vino); border-radius: 50%;
  transition: background-color .44s var(--curva);
}
.domanda__segno::before, .domanda__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .8rem; height: 1.5px; background: var(--c-vino);
  transform: translate(-50%, -50%);
  transition: transform .44s var(--curva), background-color .44s var(--curva);
}
.domanda__segno::after { transform: translate(-50%, -50%) rotate(90deg); }
.domanda[open]:not(.si-chiude) .domanda__segno { background: var(--c-vino); }
.domanda[open]:not(.si-chiude) .domanda__segno::before,
.domanda[open]:not(.si-chiude) .domanda__segno::after { background: var(--c-carta); }
.domanda[open]:not(.si-chiude) .domanda__segno::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-slide {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .44s cubic-bezier(.22, .61, .36, 1);
}
.domanda[open] .faq-slide { grid-template-rows: 1fr; }
.domanda[open].si-chiude .faq-slide,
.domanda.si-apre .faq-slide { grid-template-rows: 0fr; }
.faq-dentro { overflow: hidden; min-height: 0; }
.faq-dentro p { margin: 0; padding: 0 3.25rem 1.4rem 0; max-width: 40rem; }

/* ── 14. Dove siamo ────────────────────────────────────────────────────── */
.dove__indirizzo {
  margin: 0 0 1.4rem; font-style: normal;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2;
}
.collegamenti { margin: 0 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--c-vino); }
.collegamenti li { border-bottom: 1px solid var(--c-vino); }
.collegamento {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.collegamento svg { flex: none; width: 1.15rem; height: 1.15rem; transition: transform .5s var(--curva-molla); }
.collegamento:hover svg { transform: translate(3px, -3px); }
.orari { width: 100%; margin: 0 0 2rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.orari th, .orari td { padding: .55rem .55rem; text-align: left; border-bottom: 1px solid var(--vino-35); font-weight: 300; }
.orari thead th {
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 2px solid var(--c-vino);
}
.orari td { white-space: nowrap; }
.testata__orari span { white-space: nowrap; }
@media (max-width: 479px) {
  .orari th, .orari td { padding-inline: .25rem; }
  .orari tbody th, .orari td { font-size: min(.95rem, 4vw); }
}
.orari tr.oggi { background: var(--c-pesca); }
.orari tr.oggi th { font-weight: 850; }
.etichetta-oggi {
  display: inline-block; margin-left: .5rem; padding: .05rem .5rem;
  border: 1px solid var(--c-vino); border-radius: 999px;
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; vertical-align: .15em;
}

/* ── 15. Pagine brevi (privacy, 404) ───────────────────────────────────── */
.legale { max-width: 44rem; }
.legale h2 { margin: 2.25rem 0 .7rem; padding-top: .8rem; border-top: 1px solid var(--c-vino); font-size: 1.05rem; }
.legale .indirizzo-web { font-family: var(--f-corsivo); font-style: italic; overflow-wrap: anywhere; }
.aggiornato { margin: 1.5rem 0 0; font-family: var(--f-corsivo); font-style: italic; font-size: .95rem; }

/* ── 16. Piede ─────────────────────────────────────────────────────────── */
.piede {
  border-top: 4px double var(--c-vino);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) calc(var(--margine) + 1.75rem);
}
.piede p { margin: 0 0 .35rem; }
.piede__marchio { width: 4.2rem; height: auto; }
.piede__nome {
  margin-top: 1rem !important;
  font-family: var(--f-titolo); font-weight: 850;
  letter-spacing: .08em; text-transform: uppercase;
}
.piede__payoff { font-family: var(--f-corsivo); font-style: italic; }
.piede__titolo {
  margin: 0 0 .85rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--c-vino);
  font-family: var(--f-titolo); font-weight: 850;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.piede__fondo {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.2rem;
  border-top: 1px solid var(--c-vino);
  font-size: .86rem;
}

/* ── 17. Movimento: solo per chi non ha chiesto di ridurlo ─────────────── */
@keyframes sale { from { opacity: 0; transform: translateY(1.1rem); } }
@keyframes appare { from { opacity: 0; } }
@keyframes stampa { from { opacity: 0; transform: rotate(-18deg) scale(1.6); } 55% { opacity: 1; } }
@keyframes stampa-bollo { from { opacity: 0; transform: rotate(26deg) scale(1.5); } 55% { opacity: 1; } }
@keyframes pulsa { from { transform: scale(1); opacity: .75; } to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Prima schermata: parte col primo disegno, non aspetta il JS */
  html.js .nome__lettering { animation: appare 1s var(--curva) .05s backwards; }
  html.js .timbro { animation: stampa .75s var(--curva-timbro) .45s backwards; }
  html.js .prima .testa > *, html.js .prima .sommario, html.js .prima .azioni, html.js .prima .nota {
    animation: sale .9s var(--curva-molla) backwards;
  }
  html.js .prima .occhiello { animation-delay: .1s; }
  html.js .prima .titolo { animation-delay: .18s; }
  html.js .prima .sommario { animation-delay: .3s; }
  html.js .prima .azioni { animation-delay: .4s; }
  html.js .prima .nota { animation-delay: .48s; }
  html.js .foto-prima { animation: sale 1.1s var(--curva-molla) .25s backwards; }
  html.js .bollo { animation: stampa-bollo .8s var(--curva-timbro) 1s backwards; }

  .aperto .punto::after {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
    background: var(--c-pesca); animation: pulsa 2.4s var(--curva) infinite;
  }

  /* Comparse sotto la piega (js/animations.js mette .visto) */
  [data-rivela] { transition: opacity .8s var(--curva-molla), transform .9s var(--curva-molla); transition-delay: var(--ritardo, 0s); }
  .foto-griglia > :nth-child(2), .manifesto > :nth-child(2), .murale__testo > :nth-child(2) { --ritardo: .08s; }
  .foto-griglia > :nth-child(3), .murale__testo > :nth-child(3) { --ritardo: .16s; }
  .foto-griglia > :nth-child(4), .murale__testo > :nth-child(4) { --ritardo: .24s; }
  .murale__testo > :nth-child(5) { --ritardo: .32s; }
  html.anima [data-rivela]:not(.visto) { opacity: 0; transform: translateY(1.5rem); }
  html.anima .rubrica[data-rivela]:not(.visto) { opacity: 1; transform: none; }
  .rubrica::before, .rubrica::after { transition: transform 1.1s var(--curva-molla); }
  .rubrica::after { transition-delay: .25s; }
  html.anima .rubrica:not(.visto)::before,
  html.anima .rubrica:not(.visto)::after { transform: scaleX(0); }

  .foto__cornice img { transition: transform 1.1s var(--curva-molla); }
  .foto:hover .foto__cornice img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .barra, .barra.in-vista { transition: none; }
  .faq-slide { transition: none; }
}