/* jalvisto.com: smalto, cotto, ottone.
   Base di riferimento: campo di colore pieno, raggio zero, nessuna ombra.
   Il colore viene dalle stoviglie e dalle piastrelle, non dal cibo. */

/* ---------- token ---------- */
:root {
  --smalto: #0d5348;
  --fondo: #093c33;
  --cotto: #b8402b;
  --cotto-cupo: #96341f;
  --ottone: #e0a63c;
  --calce: #eef0e9;
  --inchiostro: #12180f;
  --inchiostro-tenue: #465043;

  --display: "Young Serif", Georgia, serif;
  --testo: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "Sometype Mono", ui-monospace, "SF Mono", monospace;

  --uscita: cubic-bezier(0.23, 1, 0.32, 1);

  --margine: clamp(18px, 5.2vw, 96px);
  --ritmo-s: clamp(32px, 5vw, 56px);
  --ritmo-m: clamp(52px, 8vw, 104px);
}

/* ---------- reset misurato ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: clamp(16px, 0.55vw + 15px, 18px);
  line-height: 1.62;
  font-synthesis-weight: none;
}

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

::selection { background: var(--ottone); color: var(--inchiostro); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--ottone);
  outline-offset: 2px;
}

/* ---------- campi di colore ---------- */
.campo { padding-inline: var(--margine); }
.campo--smalto { background: var(--smalto); color: var(--calce); }
.campo--fondo  { background: var(--fondo);  color: var(--calce); }
.campo--cotto  { background: var(--cotto);  color: var(--calce); }
.campo--calce  { background: var(--calce);  color: var(--inchiostro); }

.campo--smalto a, .campo--fondo a, .campo--cotto a { color: var(--calce); }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }

.titolo-insegna {
  font-size: clamp(2.7rem, 11.5vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0;
}

.titolo-sezione {
  font-size: clamp(1.9rem, 5.6vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.titolo-minore {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.occhiello {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 clamp(14px, 2vw, 26px);
  opacity: 0.78;
}

.testo { max-width: 66ch; }
.testo p { margin: 0 0 1.05em; }
.testo p:last-child { margin-bottom: 0; }
.testo--stretto { max-width: 54ch; }

.evidenza { color: var(--cotto); font-weight: 600; }
.campo--smalto .evidenza, .campo--fondo .evidenza { color: var(--ottone); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 40;
  background: var(--fondo); color: var(--calce);
  border-bottom: 1px solid rgba(238, 240, 233, 0.22);
}
.testata__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px;
  padding-inline: var(--margine);
}
.marchio {
  display: inline-flex; align-items: baseline; gap: 9px;
  text-decoration: none; color: inherit;
}
.marchio__nome {
  font-family: var(--display);
  font-size: 1.42rem; letter-spacing: -0.02em;
}
.marchio__coda {
  font-family: var(--mono); font-size: 0.63rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ottone);
}
.navigazione { display: none; }
.navigazione ul {
  display: flex; gap: clamp(16px, 2.1vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
.navigazione a {
  font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.09em; text-decoration: none;
  padding-block: 6px; border-bottom: 1px solid transparent;
  transition: border-color 150ms var(--uscita);
}
@media (hover: hover) and (pointer: fine) {
  .navigazione a:hover { border-bottom-color: var(--ottone); }
}
.navigazione a[aria-current="page"] { border-bottom-color: var(--ottone); }

.interruttore {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgba(238, 240, 233, 0.4);
  color: inherit; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 13px; cursor: pointer; min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .interruttore:hover { border-color: var(--ottone); }
}

.navigazione--aperta {
  display: block; padding: 0 var(--margine) 22px;
  border-top: 1px solid rgba(238, 240, 233, 0.18);
}
.navigazione--aperta ul { flex-direction: column; gap: 0; }
.navigazione--aperta a {
  display: block; padding-block: 13px; font-size: 0.95rem;
  border-bottom: 1px solid rgba(238, 240, 233, 0.14);
}

@media (min-width: 900px) {
  .navigazione { display: block; }
  .interruttore { display: none; }
  .navigazione--aperta { display: block; padding: 0; border-top: 0; }
  .navigazione--aperta ul { flex-direction: row; gap: clamp(16px, 2.1vw, 32px); }
  .navigazione--aperta a { padding-block: 6px; font-size: 0.76rem; border-bottom: 1px solid transparent; }
}

/* ---------- insegna ---------- */
.insegna { padding-block: var(--ritmo-m) var(--ritmo-s); }
.insegna__sommario {
  margin: clamp(20px, 3vw, 34px) 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.45; max-width: 46ch;
}
.insegna__fiducia {
  margin: clamp(20px, 3vw, 32px) 0 0;
  font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.05em; color: var(--ottone);
  max-width: 52ch;
}

/* ---------- la carta ---------- */
.carta { padding-block: var(--ritmo-s) var(--ritmo-m); }

.carta__gruppo + .carta__gruppo { margin-top: clamp(38px, 5.5vw, 66px); }

.carta__intestazione {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ottone);
}
.carta__intestazione h2,
.carta__intestazione h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  letter-spacing: 0.01em;
}
.carta__nota-gruppo {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ottone); margin-left: auto; text-align: right;
}

.voce {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 10px;
  padding-block: clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid rgba(238, 240, 233, 0.17);
}
.voce:last-child { border-bottom: 0; }

.voce__nome {
  transition: color 150ms var(--uscita);
  font-family: var(--display);
  font-size: clamp(1.18rem, 2.6vw, 1.72rem);
  line-height: 1.15; letter-spacing: -0.01em;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .voce__nome:hover { color: var(--ottone); }
}

.voce__guida {
  display: none;
  border-bottom: 1px dotted rgba(238, 240, 233, 0.55);
  transform: translateY(-4px);
}
.voce__prezzo {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.02rem, 1.9vw, 1.3rem);
  font-weight: 500; color: var(--ottone);
  white-space: nowrap; text-align: right;
}
.voce__descrizione {
  grid-column: 1 / -1;
  margin: 7px 0 0; max-width: 62ch;
  font-size: 0.95rem; line-height: 1.5;
  color: rgba(238, 240, 233, 0.88);
}
.voce__postilla {
  grid-column: 1 / -1;
  margin: 9px 0 0;
  font-family: var(--mono); font-size: 0.71rem;
  letter-spacing: 0.05em; color: var(--ottone);
}

@media (min-width: 760px) {
  .voce { grid-template-columns: auto 1fr auto; }
  .voce__guida { display: block; }
  .voce__descrizione { grid-column: 1 / 3; }
  .voce__postilla { grid-column: 1 / -1; }
}

.carta__piede {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 18px;
  border-top: 1px solid rgba(238, 240, 233, 0.24);
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.04em; line-height: 1.7;
  color: rgba(238, 240, 233, 0.82); max-width: 68ch;
}

/* ---------- sezioni di lettura ---------- */
.sezione { padding-block: var(--ritmo-m); }
.sezione--fitta { padding-block: var(--ritmo-s) var(--ritmo-m); }

.due-colonne {
  display: grid; gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 940px) {
  .due-colonne { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.elenco-secco { list-style: none; margin: 0; padding: 0; }
.elenco-secco li {
  padding-block: 13px;
  border-top: 1px solid rgba(18, 24, 15, 0.16);
}
.elenco-secco li:first-child { border-top: 0; }
.campo--smalto .elenco-secco li, .campo--fondo .elenco-secco li { border-top-color: rgba(238, 240, 233, 0.2); }
.elenco-secco strong { font-weight: 600; }

/* ---------- ricetta ---------- */
.ricetta {
  padding-block: var(--ritmo-m);
  border-top: 2px solid var(--inchiostro);
}
.ricetta:first-of-type { border-top: 0; padding-top: var(--ritmo-s); }

.ricetta__testata {
  display: grid; gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vw, 50px);
}
@media (min-width: 940px) {
  .ricetta__testata { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.ricetta__portata {
  font-family: var(--mono); font-size: 0.71rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cotto); margin: 0 0 12px;
}
.ricetta__titolo {
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  line-height: 0.98; letter-spacing: -0.028em;
}
.ricetta__casa {
  margin: 12px 0 0; font-family: var(--mono);
  font-size: 0.79rem; letter-spacing: 0.05em;
  color: var(--inchiostro-tenue);
}
.ricetta__gancio {
  margin: 0; font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.5; max-width: 42ch;
}

.ricetta__corpo { display: grid; gap: clamp(26px, 4vw, 54px); }
@media (min-width: 940px) {
  .ricetta__corpo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.scatto { margin: 0; }
.scatto img { width: 100%; border: 1px solid rgba(18, 24, 15, 0.22); }
.scatto figcaption {
  margin-top: 10px; font-family: var(--mono);
  font-size: 0.7rem; line-height: 1.55; letter-spacing: 0.03em;
  color: var(--inchiostro-tenue);
}

/* passi */
.passi { counter-reset: passo; margin: 0; padding: 0; list-style: none; }
.passo {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 2.2vw, 26px);
  padding-block: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid rgba(18, 24, 15, 0.18);
}
.passo:first-child { border-top: 0; padding-top: 0; }
.passo__numero {
  counter-increment: passo;
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 0.8; color: var(--cotto);
  font-variant-numeric: tabular-nums;
}
.passo__numero::before { content: counter(passo, decimal-leading-zero); }
.passo__titolo {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  margin: 0 0 8px; line-height: 1.2;
}
.passo__testo { margin: 0; max-width: 62ch; }
.passo__testo p { margin: 0 0 0.8em; }
.passo__testo p:last-child { margin-bottom: 0; }

/* scheda ingredienti */
.ingredienti {
  display: grid; gap: 0; margin: 0 0 4px;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(18, 24, 15, 0.18);
}
@media (min-width: 620px) { .ingredienti { grid-template-columns: 1fr 1fr; } }
.ingrediente {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(18, 24, 15, 0.13);
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.4;
}
@media (min-width: 620px) {
  .ingrediente:nth-child(odd) { padding-right: clamp(14px, 2vw, 30px); }
  .ingrediente:nth-child(even) { padding-left: clamp(14px, 2vw, 30px); border-left: 1px solid rgba(18, 24, 15, 0.13); }
}
.ingrediente dt { color: var(--inchiostro-tenue); letter-spacing: 0.04em; }
.ingrediente dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* bottoni negozio */
.negozi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.8vw, 30px); }
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px;
  border: 2px solid currentColor; background: none;
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--uscita), color 150ms var(--uscita), transform 120ms var(--uscita);
}
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--inchiostro); color: var(--calce); }
  .campo--smalto .bottone:hover, .campo--fondo .bottone:hover { background: var(--ottone); color: var(--fondo); }
  .campo--cotto .bottone:hover { background: var(--calce); color: var(--cotto-cupo); }
}
/* Il bottone deve rispondere alla pressione, anche senza puntatore. */
.bottone:active { transform: scale(0.98); }
.bottone--pieno {
  background: var(--cotto); border-color: var(--cotto); color: var(--calce);
}
.bottone--pieno:hover { background: var(--cotto-cupo); border-color: var(--cotto-cupo); color: var(--calce); }

/* ---------- i tempi (grafico) ---------- */
.tempi { display: grid; gap: 0; margin-top: clamp(26px, 4vw, 44px); }
.tempi__scala {
  position: relative; height: 22px;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; color: var(--ottone);
  border-bottom: 1px solid rgba(238, 240, 233, 0.3);
}
/* Le tacche stanno alla loro posizione reale sull'asse, non a distanza uguale:
   fra 2025 e la fine passa un anno, fra le altre ne passano due. */
.tempi__scala span { position: absolute; left: var(--x); transform: translateX(-50%); }
.tempi__scala span:first-child { transform: none; }
.tempi__scala span:last-child { transform: translateX(-100%); }
.riga-tempo { padding-block: clamp(16px, 2.2vw, 22px); border-bottom: 1px solid rgba(238, 240, 233, 0.17); }
.riga-tempo__nome {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 0.79rem; letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.riga-tempo__divario { margin-left: auto; color: var(--ottone); font-weight: 500; }
.barra {
  position: relative; height: 20px;
  background: repeating-linear-gradient(90deg, rgba(238,240,233,0.16) 0 1px, transparent 1px 25%);
}
.barra__tratto {
  position: absolute; top: 6px; height: 8px;
  left: var(--da); right: calc(100% - var(--a));
  background: var(--ottone);
}
.barra__segno {
  position: absolute; top: 0; height: 20px; width: 2px;
  background: var(--calce);
}
.barra__segno[data-lato="ios"] { left: var(--ios); }
.barra__segno[data-lato="android"] { left: var(--android); }
.legenda-tempi {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: clamp(20px, 2.6vw, 28px);
  font-family: var(--mono); font-size: 0.71rem;
  letter-spacing: 0.05em; color: rgba(238, 240, 233, 0.9);
}
.legenda-tempi span { display: inline-flex; align-items: center; gap: 8px; }
.campione { display: inline-block; width: 18px; height: 8px; background: var(--ottone); }
.campione--segno { width: 2px; height: 16px; background: var(--calce); }

/* Su schermi stretti la tabella scorre da sola, la pagina no. */
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella-tempi { width: 100%; min-width: 34rem; border-collapse: collapse; margin-top: clamp(24px, 3vw, 34px); }
.tabella-tempi caption {
  text-align: left; font-family: var(--mono); font-size: 0.71rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 10px; color: var(--ottone);
}
.tabella-tempi th, .tabella-tempi td {
  text-align: left; padding: 10px 12px 10px 0;
  border-bottom: 1px solid rgba(238, 240, 233, 0.18);
  font-family: var(--mono); font-size: 0.76rem; font-variant-numeric: tabular-nums;
}
.tabella-tempi th { font-weight: 500; color: var(--ottone); letter-spacing: 0.06em; }

/* ---------- domande ---------- */
.domanda {
  border-top: 1px solid rgba(238, 240, 233, 0.22);
}
.domanda summary {
  cursor: pointer; list-style: none;
  padding-block: clamp(16px, 2.2vw, 22px);
  font-family: var(--display); font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  line-height: 1.25; display: flex; gap: 14px; align-items: baseline;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono);
  color: var(--ottone); font-size: 1.2rem; line-height: 1;
}
.domanda[open] summary::after { content: "\2212"; }
.domanda__risposta { padding-bottom: clamp(18px, 2.4vw, 26px); max-width: 66ch; }
.domanda__risposta p { margin: 0 0 0.85em; }
.domanda__risposta p:last-child { margin-bottom: 0; }

/* ---------- modulo ---------- */
.modulo { max-width: 46ch; }
.campo-modulo { margin-bottom: clamp(16px, 2.2vw, 22px); }
.campo-modulo label {
  display: block; font-family: var(--mono); font-size: 0.73rem;
  letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 7px;
}
.campo-modulo input[type="text"],
.campo-modulo input[type="email"],
.campo-modulo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--calce); color: var(--inchiostro);
  border: 2px solid var(--inchiostro);
  font-family: var(--testo); font-size: 1rem;
}
.campo-modulo textarea { min-height: 140px; resize: vertical; }
.campo-modulo input::placeholder, .campo-modulo textarea::placeholder { color: #5c6459; }
.campo-modulo input:focus-visible, .campo-modulo textarea:focus-visible {
  outline: 3px solid var(--ottone); outline-offset: 1px;
}
.consenso {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: clamp(18px, 2.4vw, 24px);
}
.consenso input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--cotto); }
.consenso label { font-size: 0.86rem; line-height: 1.5; text-transform: none; letter-spacing: 0; font-family: var(--testo); }
.aiuto { font-size: 0.8rem; line-height: 1.5; margin: 10px 0 0; opacity: 0.86; }
.messaggio {
  margin-top: 16px; padding: 12px 14px;
  border: 2px solid var(--ottone); font-size: 0.9rem;
}
.messaggio[hidden] { display: none; }

/* ---------- piede ---------- */
.piede { padding-block: var(--ritmo-m) var(--ritmo-s); }
.piede__griglia {
  display: grid; gap: clamp(26px, 3.5vw, 46px);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .piede__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); } }
.piede h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; margin-bottom: 12px; }
.piede__titolo-colonna {
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ottone); margin: 0 0 12px;
}
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 9px; }
.piede a { text-decoration: none; border-bottom: 1px solid rgba(238, 240, 233, 0.32); }
@media (hover: hover) and (pointer: fine) {
  .piede a:hover { border-bottom-color: var(--ottone); color: var(--ottone); }
}
.disclaimer {
  margin-top: clamp(34px, 4.5vw, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(238, 240, 233, 0.24);
  font-size: 0.76rem; line-height: 1.62;
  color: rgba(238, 240, 233, 0.8); max-width: 92ch;
}
.disclaimer p { margin: 0 0 0.7em; }
.disclaimer p:last-child { margin-bottom: 0; }

/* ---------- pagine di servizio ---------- */
.documento { padding-block: var(--ritmo-m); }
.documento h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -0.025em; max-width: 20ch; }
.documento h2 {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  margin: clamp(32px, 4vw, 48px) 0 12px; max-width: 34ch;
}
.documento h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.documento p, .documento li { max-width: 74ch; }
.documento ul { padding-left: 1.15em; }
.documento li { margin-bottom: 0.5em; }
.documento .aggiornato {
  font-family: var(--mono); font-size: 0.73rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 18px 0 0; color: var(--inchiostro-tenue);
}

/* ---------- movimento ---------- */
/* Il contenuto resta visibile senza JS. Qui si nasconde solo il blocco di
   apertura, che lo script anima subito senza dipendere dallo scroll: tutto il
   resto della pagina viene animato con fromTo, quindi non può restare fermo
   a opacità zero se un trigger non parte. */
.js [data-anima-entrata] .anima { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-anima-entrata] .anima { opacity: 1; }
}