/* Salotto 19 — impaginato come un quotidiano: carta, inchiostro, filetti e il verde dell'insegna.
   Il verde #163C3F è preso col contagocce dal logo (stesso valore nel PNG e nel JPEG ricevuti). */

:root {
  --carta: #F2EDE3;
  --carta-2: #E8E0D0;
  --inchiostro: #1C1B18;
  --inchiostro-2: #57534A;
  --filetto: #1C1B18;
  --filetto-tenue: rgba(28, 27, 24, .2);
  --verde: #163C3F;
  --verde-buio: #10302F;
  --rosso: #9E2A22;

  --serif: 'Newsreader', 'Newsreader riserva', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* misure in rem: sugli schermi grandi crescono insieme ai caratteri (vedi "Schermi grandi") */
  --maxw: 84rem;
  --pad: clamp(16px, 4vw, 2.5rem);
  --gap: clamp(20px, 2.8vw, 2.5rem);
  --sec-y: clamp(44px, 5vw, 4.5rem);

  /* Due curve sole: una per opacità e colore, una per ciò che si muove. Nessun rimbalzo. */
  --ease-out: cubic-bezier(.25, .8, .25, 1);
  --ease-move: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-contrast: more) {
  :root { --inchiostro-2: var(--inchiostro); --filetto-tenue: var(--filetto); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
html:has(dialog[open]) { overflow: hidden; }
/* Schermi grandi: oltre i 1440 px tutta la pagina cresce in proporzione (caratteri, colonne, spazi), come uno
   zoom: riempie il monitor senza bande vuote ai lati e le righe restano della stessa lunghezza da leggere.
   Chiesto dal committente il 26 ottobre 2026 guardandolo su un monitor grande. */
@media (min-width: 1441px) {
  html { font-size: clamp(16px, calc(16px + (100vw - 1440px) * .0075), 24px); }
}

body {
  position: relative;
  z-index: 0;
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.58 var(--serif);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grana della carta: un rumore fermo sopra tutto, appena percettibile. Sta sopra e non sotto
   perché la barra delle sezioni ha il fondo pieno: sotto, la carta avrebbe due toni. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; text-wrap: balance; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
::selection { background: var(--verde); color: var(--carta); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
/* sul telefono il tocco si vede, nel verde dell'insegna, e non aspetta il doppio tocco */
html { -webkit-tap-highlight-color: rgba(22, 60, 63, .14); }
a, button { touch-action: manipulation; }

.pagina { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }

.salta {
  position: absolute; left: var(--pad); top: -60px; z-index: 50;
  padding: 10px 14px; background: var(--verde); color: var(--carta);
  font: 600 .85rem var(--sans); text-decoration: none;
}
.salta:focus { top: 10px; }

/* ---------- Testata ---------- */
.testata { padding-top: 14px; }

.testata__riga {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--filetto);
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;
}
/* il numero è piccolo da vedere ma non da toccare: 44 px di bersaglio senza spostare la riga */
.testata__riga a { padding: 16px 0; margin: -16px 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .testata__riga a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.testata__corpo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 37.5rem) 1fr;
  align-items: center;
  gap: var(--gap);
  padding: clamp(20px, 3vw, 34px) 0;
}
/* filetto doppio sotto l'insegna: grosso e sottile, come nei quotidiani */
.testata__corpo::before,
.testata__corpo::after {
  content: ''; position: absolute; left: 0; right: 0; background: var(--filetto);
}
.testata__corpo::before { bottom: 0; height: 3px; }
.testata__corpo::after { bottom: -5px; height: 1px; }

.testata__logo { display: block; }
.testata__logo img { width: 100%; }

.orecchio {
  margin: 0;
  max-width: 13rem;
  padding: 12px 14px;
  border: 1px solid var(--filetto);
  font: italic 400 .98rem/1.35 var(--serif);
}
.orecchio--dx { justify-self: end; text-align: right; }

/* ---------- Sezioni (barra che resta in cima) ---------- */
.sezioni {
  position: sticky; top: 0; z-index: 20;
  margin-top: 5px;
  background: var(--carta);
  border-bottom: 1px solid var(--filetto);
  transition: box-shadow .3s var(--ease-out);
}
.sezioni.is-fissa { box-shadow: 0 10px 24px -18px rgba(28, 27, 24, .5); }

.sezioni__in { display: flex; align-items: center; gap: 14px; min-height: 54px; }

/* Lo spazio dell'insegna è sempre riservato: si animano solo opacità e spostamento,
   così le voci non scivolano di lato quando la barra si ferma in cima. */
.sezioni__logo {
  flex: none; width: 7rem; padding-block: 13px; margin-block: -13px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-move);
}
.sezioni__logo img { width: 100%; }
.sezioni.is-fissa .sezioni__logo { opacity: 1; transform: none; pointer-events: auto; }

.sezioni__voci {
  flex: 1; min-width: 0;
  display: flex;
  overflow-x: auto; scrollbar-width: none;
}
.sezioni__voci::-webkit-scrollbar { display: none; }
/* centrate coi margini automatici e non con justify-content: se la riga non ci sta,
   i margini vanno a zero e si scorre dall'inizio invece di perdere la prima voce a sinistra */
.sezioni__voci a:first-child { margin-left: auto; }
.sezioni__voci a:last-child { margin-right: auto; }
.sezioni__voci a {
  position: relative;
  padding: 17px 16px;
  white-space: nowrap;
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .sezioni__voci a:hover { text-decoration-color: currentColor; } }
.sezioni__voci a + a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px; translate: 0 -50%;
  background: var(--filetto-tenue);
}

/* ---------- Bottoni e collegamenti ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 22px;
  border: 1px solid var(--verde);
  background: var(--verde); color: var(--carta);
  font: 600 .9rem/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .bottone:hover { background: var(--inchiostro); border-color: var(--inchiostro); } }
/* alla pressione il bottone cede appena: il dito sente il clic */
.bottone { transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .16s var(--ease-out); }
.bottone:active { transform: scale(.97); }
.bottone--piccolo { flex: none; min-height: 44px; padding: 10px 16px; font-size: .82rem; }

.link {
  display: inline-flex; gap: .4em; align-items: baseline;
  padding-block: 14px; margin-block: -14px;
  font: 600 .9rem/1.2 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link::after { content: '→'; transition: translate .35s var(--ease-move); }
@media (hover: hover) and (pointer: fine) { .link:hover::after { translate: 4px 0; } }

/* ---------- Titoli, sommari, testo ---------- */
h1 {
  font-size: clamp(2.6rem, 1.1rem + 4.3vw, 5.3rem);
  font-weight: 760;
  line-height: .97;
  letter-spacing: -.028em;
}
h2 {
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.022em;
}
h3 { font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; }

.sommario {
  max-width: 44ch;
  margin: .75em 0 0;
  color: var(--inchiostro-2);
  font: italic 400 clamp(1.15rem, 1rem + .5vw, 1.42rem)/1.36 var(--serif);
}
.sommario--apertura { font-size: clamp(1.22rem, 1rem + .8vw, 1.62rem); max-width: 40ch; }

.colonne {
  columns: 2;
  column-gap: var(--gap);
  column-rule: 1px solid var(--filetto-tenue);
  /* niente giustificato: senza sillabazione italiana affidabile le colonne strette si riempiono di buchi */
  text-align: left;
}
.colonne > * { break-inside: avoid; }

/* Capolettera: initial-letter dove c'è, altrimenti la lettera flottante */
.capolettera::first-letter {
  float: left;
  margin: .07em .09em 0 0;
  color: var(--verde);
  font-size: 4.15em;
  font-weight: 700;
  line-height: .78;
}
@supports (initial-letter: 3) {
  .capolettera::first-letter { float: none; margin: 0 .1em 0 0; font-size: inherit; line-height: inherit; initial-letter: 3; }
}

/* ---------- Fotografie ---------- */
.foto__cornice { position: relative; overflow: hidden; background: var(--carta-2); }
.foto__cornice img { width: 100%; height: 100%; object-fit: cover; }
figcaption {
  margin-top: 9px;
  color: var(--inchiostro-2);
  font: 400 .8rem/1.45 var(--sans);
}
figcaption b { color: var(--inchiostro); font-weight: 700; }

/* filetto verticale fra due colonne della griglia, al centro dello spazio */
.regola, .cantina__articolo, .buffet__intro, .rubrica--libri { position: relative; }
.regola::before, .cantina__articolo::before, .buffet__intro::before, .rubrica--libri::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2);
  width: 1px; background: var(--filetto-tenue);
}

/* filetto doppio che apre ogni pagina */
hr.doppio {
  height: 5px;
  margin: 0 0 clamp(24px, 3vw, 38px);
  border: 0;
  border-top: 3px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
  transform-origin: left center;
}

/* ---------- Prima pagina ---------- */
.prima {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-top: clamp(30px, 4vw, 52px);
}
.prima__testa { grid-column: 1 / span 7; }
.prima__foto { grid-column: 8 / -1; grid-row: 1 / span 2; }
.prima__foto { display: flex; flex-direction: column; }
.prima__foto .foto__cornice { flex: 1; min-height: 420px; }
.prima__foto .foto__cornice img { position: absolute; inset: 0; }
.prima__testo {
  grid-column: 1 / span 7;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--filetto);
}

/* il richiamo alle feste chiude la prima pagina come una fascia larga, sotto foto e testo */
.riquadro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: 16px clamp(18px, 2.4vw, 30px) 16px 16px;
  background: var(--carta-2);
  border-top: 3px solid var(--verde);
}
.riquadro img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.riquadro h2 { font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); font-weight: 650; line-height: 1.08; letter-spacing: -.014em; margin-bottom: 6px; }
.riquadro p { font-size: 1.02rem; margin-bottom: 0; max-width: 56ch; }

/* ---------- Formula aperitivo: in cima, prima della prima pagina ---------- */
.aperitivo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: stretch;
  padding: clamp(24px, 3vw, 40px) 0 clamp(26px, 3.2vw, 42px);
  border-bottom: 1px solid var(--filetto);
}
.aperitivo__testo { grid-column: 1 / span 6; align-self: center; }
.aperitivo .sommario { max-width: none; }
.aperitivo h2 { font-size: clamp(2rem, 1.2rem + 2vw, 3.1rem); }
.aperitivo__testo > p:last-child { margin: 1em 0 0; }

/* il conto, nel verde dell'insegna: il prezzo grande, sotto le altre due condizioni */
.conto {
  grid-column: 7 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 1.5rem; align-content: center;
  padding: 1.4rem 1.5rem; background: var(--verde); color: var(--carta);
}
.conto__prezzo { grid-column: 1; grid-row: 1; }
.conto__righe { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-left: 1.5rem; border-left: 1px solid rgba(242, 237, 227, .35); }
.conto__prezzo { margin: 0; font: italic 400 1.15rem/1 var(--serif); }
.conto__prezzo b {
  margin-right: .12em;
  font-style: normal; font-weight: 760; font-size: clamp(2.8rem, 2rem + 2.4vw, 3.8rem);
  letter-spacing: -.03em; font-variant-numeric: lining-nums;
}
.conto__cosa { grid-column: 1; grid-row: 2; align-self: start; margin: 10px 0 0; font: 600 .9rem/1.3 var(--sans); }
.conto__righe { margin: 0; font: 400 .88rem/1.4 var(--sans); }
.conto__righe div { padding: 11px 0 13px; border-bottom: 1px dotted rgba(242, 237, 227, .4); }
.conto__righe div:last-child { border-bottom: 0; }
.conto__righe dt { color: rgba(242, 237, 227, .78); }
.conto__righe dd { margin: 4px 0 0; font: 600 1.05rem/1.3 var(--serif); font-variant-numeric: lining-nums; }

/* ---------- La carta dei vini: un calice che si riempie ---------- */
.carta-vini {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: 14px 22px 14px 16px;
  border: 1px solid var(--inchiostro);
  color: var(--inchiostro);
  text-decoration: none;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .16s var(--ease-out);
}
.carta-vini__calice { flex: none; width: 40px; height: 54px; overflow: visible; transform-origin: 50% 92%; transition: transform .45s var(--ease-move); }
.carta-vini__vetro { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* il vino è un rettangolo ritagliato dalla coppa: scende per svuotarla, sale per riempirla */
.carta-vini__vino { fill: var(--rosso); transform: translateY(18px); transition: transform .55s var(--ease-move); }
.carta-vini__testo { display: grid; gap: 3px; }
.carta-vini__testo b { font: 700 1.22rem/1.15 var(--serif); }
.carta-vini__testo span { max-width: 34ch; color: var(--inchiostro-2); font: 400 .8rem/1.35 var(--sans); transition: color .25s var(--ease-out); }
.carta-vini:active { transform: scale(.98); }
.carta-vini:focus-visible, .carta-vini:active { background: var(--verde); border-color: var(--verde); color: var(--carta); }
.carta-vini:focus-visible .carta-vini__testo span, .carta-vini:active .carta-vini__testo span { color: rgba(242, 237, 227, .8); }
.carta-vini:focus-visible .carta-vini__vino, .carta-vini:active .carta-vini__vino { transform: translateY(7px); transition-delay: 0s; }
.carta-vini:focus-visible .carta-vini__calice, .carta-vini:active .carta-vini__calice { transform: rotate(-9deg); }
@media (hover: hover) and (pointer: fine) {
  .carta-vini:hover { background: var(--verde); border-color: var(--verde); color: var(--carta); }
  .carta-vini:hover .carta-vini__testo span { color: rgba(242, 237, 227, .8); }
  .carta-vini:hover .carta-vini__vino { transform: translateY(7px); transition-delay: 0s; }
  .carta-vini:hover .carta-vini__calice { transform: rotate(-9deg); }
}

/* ---------- La cantina ---------- */
.cantina { padding-top: var(--sec-y); }
.cantina__griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: stretch;
}
.cantina__alta { grid-column: 1 / span 4; display: flex; flex-direction: column; }
.cantina__alta .foto__cornice { flex: 1; min-height: 420px; }
.cantina__alta .foto__cornice img { position: absolute; inset: 0; }
.cantina__articolo { grid-column: 5 / -1; }
.cantina__corpo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: var(--gap); align-items: stretch;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.cantina__testo p:last-child { margin-bottom: 0; }
.cantina__corpo .foto--colonna { position: relative; display: flex; flex-direction: column; margin: 0; }
.cantina__corpo .foto--colonna::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2);
  width: 1px; background: var(--filetto-tenue);
}
.cantina__corpo .foto--colonna .foto__cornice { flex: 1; aspect-ratio: auto; min-height: 260px; }
.cantina__corpo .foto--colonna .foto__cornice img { position: absolute; inset: 0; }
.foto--colonna { margin-bottom: 1.2em; }
.foto--colonna .foto__cornice { aspect-ratio: 4 / 5; }
.foto--colonna figcaption { text-align: left; hyphens: manual; }

/* ---------- Il Negroni: inserto sul verde ---------- */
.negroni {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--sec-y);
  background: var(--verde);
  color: var(--carta);
}
.negroni :focus-visible { outline-color: var(--carta); }
.negroni__foto { display: flex; flex-direction: column; min-height: 100%; }
.negroni__foto .foto__cornice { flex: 1; min-height: 560px; background: var(--verde-buio); }
.negroni__foto .foto__cornice img { position: absolute; inset: 0; }
.negroni__foto figcaption {
  position: absolute; left: 0; bottom: 0; margin: 0;
  padding: 10px var(--pad);
  color: rgba(242, 237, 227, .85);
  background: linear-gradient(transparent, rgba(10, 20, 20, .55));
}
.negroni__foto figcaption b { color: var(--carta); }
.negroni__foto { position: relative; }

.negroni__testo {
  padding: var(--sec-y) var(--pad) var(--sec-y) clamp(28px, 5vw, 5.25rem);
  /* il testo finisce dove finiscono le colonne del resto della pagina, a ogni larghezza di schermo */
  padding-right: max(var(--pad), calc((100vw - var(--maxw)) / 2));
  align-self: center;
}
.negroni h2 { font-size: clamp(2.3rem, 1.2rem + 3.2vw, 4.4rem); }
.negroni .sommario { color: rgba(242, 237, 227, .78); }

.negroni__schede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid rgba(242, 237, 227, .35);
}
.negroni__schede > .ricetta + .ricetta { position: relative; }
.negroni__schede > .ricetta + .ricetta::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2);
  width: 1px; background: rgba(242, 237, 227, .25);
}
.ricetta h3 { margin-bottom: 14px; font-style: italic; font-weight: 500; font-size: 1.35rem; }
.ricetta dl, .ricetta ul { margin: 0; padding: 0; list-style: none; font: 400 .9rem/1.4 var(--sans); }
.ricetta dl div { display: flex; align-items: baseline; gap: .5em; padding: 5px 0; }
/* puntini di guida fra ingrediente e dose, come in un menu stampato */
.ricetta dl div::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(242, 237, 227, .5); translate: 0 -.3em; }
.ricetta dd { order: 2; margin: 0; font-variant-numeric: tabular-nums; }
.ricetta li { padding: 5px 0 9px; border-bottom: 1px dotted rgba(242, 237, 227, .35); }
.ricetta li + li { padding-top: 9px; }

/* ---------- Il buffet ---------- */
.buffet { padding-top: var(--sec-y); }
.buffet__testa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
}
.buffet__testa h2 { grid-column: 1 / span 7; }
.buffet__intro { grid-column: 8 / -1; }
.buffet__intro .sommario { margin-top: 0; margin-bottom: .7em; }
.buffet__intro p:last-child { margin-bottom: 0; }

.reportage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 26px var(--gap);
  margin-top: clamp(34px, 4vw, 56px);
}
.reportage > .foto { grid-column: span 4; }
.reportage > .foto .foto__cornice { aspect-ratio: 4 / 3; }
.reportage > .foto--verticale .foto__cornice { aspect-ratio: 4 / 5; }
.reportage__largo { grid-column: 1 / span 8 !important; grid-row: span 2; display: flex; flex-direction: column; }
.reportage__largo .foto__cornice { flex: 1; aspect-ratio: auto !important; }
.reportage__largo .foto__cornice img { position: absolute; inset: 0; }

/* La domenica mattina: un avviso in fondo alla pagina del buffet, tra un filetto grosso e uno sottile */
.domenica {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 24px 0 26px;
  border-top: 3px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}
.domenica__titolo { grid-column: 1 / span 5; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.08; letter-spacing: -.015em; }
.domenica__testo { grid-column: 6 / -1; margin: 0; font-size: 1.15rem; line-height: 1.5; }

/* ---------- Musica e libri ---------- */
.rubriche { padding-top: var(--sec-y); }
.rubriche__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(var(--gap) * 1.6);
  align-items: stretch;
}
.rubrica { display: flex; flex-direction: column; }
.rubrica .foto { display: flex; flex-direction: column; flex: 1 0 auto; }
.rubrica .foto__cornice { flex: 1 0 auto; }
.rubrica .foto__cornice img { position: absolute; inset: 0; }
.rubrica--libri::before { left: calc(var(--gap) * -.8); }
.rubrica h2 { margin-bottom: .45em; }
.rubrica--disco .foto { margin-bottom: 26px; }
.rubrica--disco .foto__cornice { aspect-ratio: 5 / 4; }
.rubrica--disco .foto__cornice img { object-position: 50% 72%; }
.rubrica--libri .sommario { margin: 0 0 1em; }
.rubrica--libri .foto { margin-top: 26px; }
.rubrica--libri .foto__cornice { aspect-ratio: 4 / 4.6; }

/* Il cartello vero accanto al giradischi, rifatto: fondo scuro e passe-partout rosso */
.cartello {
  margin-top: 26px;
  padding: 26px 28px 20px;
  background: #1F1C19;
  color: var(--carta);
  outline: 1px solid var(--rosso);
  outline-offset: -9px;
}
.cartello blockquote p { margin-bottom: .6em; font: 600 .9rem/1.3 var(--sans); }
.cartello ul { margin: 0; padding: 0; list-style: none; font: italic 400 1.22rem/1.4 var(--serif); }
.cartello li { padding: 2px 0; }
.cartello li::before { content: '– '; }
.cartello figcaption { margin-top: 14px; color: rgba(242, 237, 227, .6); }

/* ---------- Feste private ---------- */
.feste { padding-top: var(--sec-y); }
.feste__griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: stretch;
}
.feste__testo { grid-column: 1 / span 8; align-self: center; }
.feste__testo .capolettera { margin-top: 1.4em; }

.annuncio {
  grid-column: 9 / -1;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 5px double var(--inchiostro);
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.annuncio h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.annuncio p { margin: 10px 0 0; font-size: 1.02rem; font-style: italic; }
.annuncio .annuncio__nota { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filetto); font: 500 .8rem/1.3 var(--sans); }
.annuncio__numero {
  display: block;
  margin: 2px 0 12px;
  padding: 6px 0;
  font: 700 clamp(2rem, 1.5rem + 1.3vw, 2.6rem)/1 var(--serif);
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .annuncio__numero:hover { color: var(--verde); } }
.annuncio .bottone { width: 100%; }

.galleria__invito {
  margin: clamp(28px, 3vw, 42px) 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--filetto);
  color: var(--inchiostro-2);
  font: italic 400 1.1rem/1.4 var(--serif);
}
.galleria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(160px, 19vw, 16.25rem);
  gap: 12px;
}
.galleria__voce { position: relative; display: block; overflow: hidden; background: var(--carta-2); color: var(--carta); }
.galleria__voce--grande { grid-column: span 2; grid-row: span 2; }
.galleria__voce:nth-child(6), .galleria__voce:nth-child(7) { grid-column: span 2; }
.galleria__voce img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-move);
}
.galleria__voce span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(10, 18, 18, .72));
  font: 500 .8rem/1.35 var(--sans);
  opacity: 0; translate: 0 6px;
  transition: opacity .35s var(--ease-out), translate .5s var(--ease-move);
}
.galleria__voce:focus-visible img { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) { .galleria__voce:hover img { transform: scale(1.04); } }
.galleria__voce:hover span, .galleria__voce:focus-visible span { opacity: 1; translate: 0 0; }
@media (hover: none) { .galleria__voce span { opacity: 1; translate: 0 0; } }

/* ---------- Lente della galleria ---------- */
.lente {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--carta);
}
.lente::backdrop { background: rgba(12, 22, 22, .93); }
.lente figure {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 64px 72px 40px;
  pointer-events: none;
}
.lente img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; pointer-events: auto; }
.lente figcaption { margin: 0; color: rgba(242, 237, 227, .8); }
.lente button {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(242, 237, 227, .4);
  background: rgba(12, 22, 22, .4); color: var(--carta);
  font: 300 1.7rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .lente button:hover { background: var(--verde); border-color: var(--carta); } }
.lente :focus-visible { outline-color: var(--carta); }
.lente__chiudi { top: 14px; right: 14px; }
.lente__freccia { top: 50%; translate: 0 -50%; }
.lente__freccia--prima { left: 14px; }
.lente__freccia--dopo { right: 14px; }

/* ---------- Dove siamo ---------- */
.colophon {
  margin-top: var(--sec-y);
  padding-top: clamp(48px, 6vw, 84px);
  background: var(--verde);
  color: var(--carta);
}
.colophon :focus-visible { outline-color: var(--carta); }
.colophon__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px var(--gap);
  align-items: stretch;
}
.colophon__voce { position: relative; padding-top: 4px; }
.colophon__voce + .colophon__voce::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2);
  width: 1px; background: rgba(242, 237, 227, .22);
}
.colophon h2 { margin-bottom: 16px; font-size: 1.55rem; letter-spacing: -.01em; }
.colophon address { margin-bottom: 18px; font-size: 1.15rem; line-height: 1.45; }
.colophon p { color: rgba(242, 237, 227, .78); font-size: 1rem; }
.colophon__numero {
  display: inline-block; margin: -7px 0 3px; padding: 7px 0;
  font: 700 1.75rem/1.1 var(--serif); letter-spacing: -.012em;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .colophon__numero:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } }

.orari { margin: 0; font: 400 .9rem/1.4 var(--sans); }
.orari div { display: flex; align-items: baseline; gap: .5em; padding: 6px 0; }
.orari div::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted rgba(242, 237, 227, .45); translate: 0 -.3em; }
.orari dd { order: 2; margin: 0; font-variant-numeric: tabular-nums; }

/* Mappa al clic: prima un riquadro pieno con il bottone, poi la mappa vera */
.colophon__mappa { margin-top: clamp(40px, 5vw, 64px); }
.mappa, .mappa__cornice {
  display: block; width: 100%; height: clamp(240px, 28vw, 22.5rem);
  border: 1px solid rgba(242, 237, 227, .3);
}
.mappa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--verde-buio);
  color: var(--carta);
  text-decoration: none;
}
.mappa__titolo {
  padding: 14px 22px;
  border: 1px solid var(--carta);
  font: 600 .92rem/1 var(--sans);
  letter-spacing: .01em;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.mappa:focus-visible .mappa__titolo { background: var(--carta); color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .mappa:hover .mappa__titolo { background: var(--carta); color: var(--verde); } }
.mappa__nota { padding: 0 16px; text-align: center; color: rgba(242, 237, 227, .65); font: 400 .8rem/1.4 var(--sans); }
.mappa__cornice { border: 0; background: var(--verde-buio); }

/* prima del clic si vede un'anteprima vera, un'immagine nostra presa da OpenStreetMap nei toni della carta:
   nessuna richiesta a Google finché non si apre la mappa */
.mappa { position: relative; overflow: hidden; justify-content: flex-end; padding-bottom: 26px; }
.mappa__anteprima { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-move); }
.mappa .mappa__titolo { position: relative; background: var(--verde); border-color: var(--verde); color: var(--carta); }
.mappa .mappa__nota { position: relative; padding: 3px 8px; background: rgba(242, 237, 227, .92); color: var(--inchiostro); }
.mappa__fonte { position: absolute; right: 0; bottom: 0; padding: 2px 7px; background: rgba(242, 237, 227, .88); color: var(--inchiostro-2); font: 400 .7rem/1.4 var(--sans); }
.mappa:focus-visible .mappa__titolo { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
@media (hover: hover) and (pointer: fine) {
  .mappa:hover .mappa__titolo { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }
  .mappa:hover .mappa__anteprima { transform: scale(1.03); }
}

.colophon__fondo {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(44px, 5vw, 72px);
  padding: 26px 0 32px;
  border-top: 1px solid rgba(242, 237, 227, .25);
}
.colophon__fondo p { margin: 0; font: 400 .8rem/1.4 var(--sans); color: rgba(242, 237, 227, .7); }
.colophon__segno {
  width: 9.4rem; aspect-ratio: 1400 / 310;
  background: var(--carta);
  -webkit-mask: url(img/logo-segno.webp) center / contain no-repeat;
  mask: url(img/logo-segno.webp) center / contain no-repeat;
}

/* ---------- Pagina non trovata (404.html) ---------- */
.testata__corpo--sola { grid-template-columns: minmax(0, 440px); justify-content: center; }
.errore { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px); text-align: center; }
.errore h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.errore .sommario { margin: .6em auto 1.6em; }

/* ---------- Movimento ----------
   Tutto è acceso solo se il JavaScript c'è (classe .js, messa dalla prima riga di script.js)
   e se chi guarda non ha chiesto meno movimento. Senza, la pagina è ferma e completa. */
@media (prefers-reduced-motion: no-preference) {
  /* la testata si "stampa" all'apertura: l'insegna si mette a fuoco, i filetti si allungano dal centro */
  .testata__logo img { animation: stampa 1.2s var(--ease-move) .1s both; }
  .testata__corpo::before, .testata__corpo::after { animation: filetto 1.2s var(--ease-move) .25s both; }
  .testata__riga, .orecchio { animation: emergi .9s var(--ease-out) .45s both; }
  .sezioni { animation: emergi .9s var(--ease-out) .6s both; }

  .js .rivela { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-move); }
  .js .rivela.is-in { opacity: 1; transform: none; }
  .js .carta-vini:not(.is-in) .carta-vini__vino { transform: translateY(34px); }
  .js .carta-vini.is-in .carta-vini__vino { transition-delay: .45s; }

  .js hr.doppio { transform: scaleX(0); transition: transform 1.2s var(--ease-move); }
  .js hr.doppio.is-in { transform: none; }

  /* le foto si scoprono dall'alto, come un foglio che esce dalla rotativa */
  .js .foto .foto__cornice { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-move); }
  .js .foto .foto__cornice img { transform: scale(1.08); transition: transform 1.8s var(--ease-move); }
  .js .foto figcaption { opacity: 0; transition: opacity .8s var(--ease-out) .55s; }
  .js .foto.is-in .foto__cornice { clip-path: inset(0); }
  .js .foto.is-in .foto__cornice img { transform: none; }
  .js .foto.is-in figcaption { opacity: 1; }
  .js .prima__foto .foto__cornice { clip-path: inset(0); transition: none; animation: scopri 1.25s var(--ease-move) .15s both; }
  .js .prima__foto figcaption { opacity: 1; transition: none; animation: emergi .8s var(--ease-out) .6s both; }

  /* i titoli salgono parola per parola da sotto la riga */
  .js .dividi .parola { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
  .js .dividi .parola > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-move); transition-delay: calc(var(--i, 0) * 38ms); }
  .js .dividi.is-in .parola > span { transform: none; }

  .lente[open] figure { animation: lente .5s var(--ease-move) both; }
  .lente[open]::backdrop { animation: emergi .35s var(--ease-out) both; }
}

/* Parallasse leggera sulle foto grandi, solo CSS: dove il browser non la sa fare, la foto resta ferma. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallasse .foto__cornice > img { animation: parallasse linear both; animation-timeline: view(); animation-range: cover; }
  }
}

@keyframes stampa { from { opacity: 0; filter: blur(6px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@keyframes scopri { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes filetto { from { transform: scaleX(0); } to { transform: none; } }
@keyframes emergi { from { opacity: 0; } to { opacity: 1; } }
@keyframes lente { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes parallasse { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Schermi medi ---------- */
@media (max-width: 1080px) {
  .orecchio { font-size: .9rem; max-width: 180px; }
  .sezioni__voci a { padding-inline: 11px; }
}

/* fra 821 e 940 px la riga delle sezioni sta giusta solo con le voci più strette */
@media (max-width: 940px) {
  .sezioni__voci a { padding-inline: 9px; }
  .cantina__alta { grid-column: 1 / span 5; }
  .cantina__articolo { grid-column: 6 / -1; }
  .feste__testo { grid-column: 1 / span 7; }
  .negroni__schede { grid-template-columns: 1fr; }
  .negroni__schede > .ricetta + .ricetta::before { display: none; }
  .annuncio { grid-column: 8 / -1; }
  .conto { display: block; }
  .conto__cosa { margin-bottom: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(242, 237, 227, .35); }
  .conto__righe { padding-left: 0; border-left: 0; }
}

/* ---------- Telefono ---------- */
@media (max-width: 820px) {
  body { font-size: 1.05rem; }

  .testata__riga > span:first-child { display: none; }
  .testata__corpo { grid-template-columns: 1fr; justify-items: center; }
  .orecchio { display: none; }
  .testata__logo { width: min(100%, 440px); }

  .sezioni__in { gap: 10px; min-height: 50px; }
  .sezioni__voci {
    justify-content: flex-start;
    margin-left: calc(var(--pad) * -1);
    padding-left: calc(var(--pad) - 12px);
    -webkit-mask: linear-gradient(90deg, #000 85%, transparent);
    mask: linear-gradient(90deg, #000 85%, transparent);
  }
  .sezioni__voci a { padding: 17px 12px; }
  /* sul telefono le voci partono da sinistra e scorrono, non si centrano */
  .sezioni__voci a:first-child { margin-left: 0; }
  .sezioni__voci a:last-child { margin-right: 0; }
  /* qui a riposo l'insegna non occupa spazio: la larghezza scatta senza transizione, si anima solo l'opacità */
  .sezioni__logo { width: 0; }
  .sezioni.is-fissa .sezioni__logo { width: 84px; }
  .sezioni.is-fissa .sezioni__voci { margin-left: 0; padding-left: 0; }

  .prima, .cantina__griglia, .buffet__testa, .reportage, .feste__griglia, .rubriche__griglia, .colophon__griglia, .negroni { grid-template-columns: minmax(0, 1fr); }
  .prima > *, .cantina__griglia > *, .buffet__testa > *, .feste__griglia > *, .reportage > *, .colophon__griglia > * { grid-column: 1 / -1 !important; grid-row: auto !important; }

  .regola::before, .cantina__articolo::before, .buffet__intro::before, .rubrica--libri::before, .colophon__voce + .colophon__voce::before { display: none; }

  .aperitivo { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .aperitivo > * { grid-column: 1 / -1; }
  .aperitivo h2 { font-size: 2.1rem; }
  .carta-vini { display: flex; padding-right: 16px; }
  .conto { padding: 18px 18px 4px; }

  .prima__foto { margin-top: 26px; }
  .prima__foto .foto__cornice { flex: none; min-height: 0; aspect-ratio: 4 / 4.6; }
  .colonne { columns: 1; text-align: left; hyphens: manual; }
  .riquadro { grid-template-columns: 110px minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
  .riquadro img { grid-row: span 2; align-self: start; aspect-ratio: 1; }
  .riquadro h2 { font-size: 1.25rem; }
  .riquadro .link { grid-column: 2; justify-self: start; }

  .cantina__alta { position: static; margin-bottom: 30px; }
  .cantina__alta .foto__cornice { flex: none; min-height: 0; aspect-ratio: 4 / 4.4; }
  .cantina__corpo { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .cantina__corpo .foto--colonna::before { display: none; }
  .cantina__corpo .foto--colonna .foto__cornice { flex: none; min-height: 0; aspect-ratio: 4 / 5; }

  .negroni__foto .foto__cornice { min-height: 0; aspect-ratio: 4 / 4.6; flex: none; }
  .negroni__testo { padding: 48px var(--pad) 60px; }

  .buffet__intro { margin-top: 22px; }
  .reportage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .reportage > .foto { grid-column: span 1 !important; }
  .reportage > .reportage__largo { grid-column: 1 / -1 !important; }
  .reportage__largo .foto__cornice { flex: none; aspect-ratio: 4 / 3 !important; }
  .reportage > .foto:last-child { grid-column: 1 / -1 !important; }
  .reportage > .foto:last-child .foto__cornice { aspect-ratio: 4 / 3; }

  .domenica { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .domenica__titolo, .domenica__testo { grid-column: 1 / -1; }

  .rubrica--libri { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--filetto); }

  .annuncio { margin-top: 34px; }

  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; gap: 8px; }
  .galleria__voce:nth-child(6), .galleria__voce:nth-child(7) { grid-column: span 1; }

  .lente figure { padding: 64px 12px 84px; }
  .lente__freccia { top: auto; bottom: 18px; translate: none; }
  .lente__freccia--prima { left: calc(50% - 56px); }
  .lente__freccia--dopo { right: calc(50% - 56px); }

  .colophon__fondo { flex-direction: column; align-items: flex-start; }
}