/* =========================================================
   Sapori d'Africa – Il Pescatore
   Un solo foglio di stile. Nessuna dipendenza.
   Nelle animazioni si toccano solo transform e opacity.
   ========================================================= */

/* ---------- token ---------- */
:root{
  --crema:        #F1E9D9;
  --crema-2:      #E5DBC6;
  --inchiostro:   #1C1A16;
  --inchiostro-2: #57534A;
  --filetto:      rgba(28,26,22,.16);

  --max: 1260px;
  --pad: 34px;
  --gap: 26px;
}

@media (max-width: 899px){
  :root{ --pad: 20px; --gap: 16px; }
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--crema);
  color:var(--inchiostro);
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-weight:300;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

h1,h2,p,figure,figcaption,address{ margin:0; }
address{ font-style:normal; }
img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

/* focus visibile ovunque */
:focus-visible{
  outline:2px solid var(--inchiostro);
  outline-offset:3px;
}
.pieno :focus-visible,
.diviso :focus-visible{ outline-color:var(--crema); }

/* ---------- griglia di pagina ---------- */
.griglia{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gap);
  align-items:start;
}

@media (max-width: 899px){
  .griglia{ grid-template-columns:repeat(6, 1fr); }
}

/* Display del marchio, servito in locale: sottoinsieme latino in woff2,
   SIL Open Font License 1.1. Il resto della pagina resta in Newsreader. */
@font-face{
  font-family:"Marchio";
  src:url("assets/font/archivo-black.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Testo delle sezioni sotto la hero, servito in locale: file variabile,
   un solo download per tutti i pesi. SIL Open Font License 1.1. */
@font-face{
  font-family:"Outfit";
  src:url("assets/Outfit/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   HERO
   Composizione assiale: marchio al centro geometrico, quattro
   blocchi negli angoli, indicatore di scorrimento al centro basso.
   Palette propria: la carta e' piu' calda del resto della pagina e
   il bordeaux e' lo stesso del pannello di "Ricette che arrivano da casa".
   ========================================================= */
.hero{
  /* carta calda: il crema precedente su schermi luminosi leggeva bianco */
  --carta:      #EADCBE;
  /* secondo livello dei testi piccoli: un colore pieno, non opacita' ridotta,
     cosi' il contrasto resta misurabile invece di dipendere dal fondo */
  --nero-tenue: #6B5540;
  --nero-caldo: #2A1D14;
  --bordeaux:   #5A171C;

  /* un solo valore di margine per i quattro angoli, mai sovrascritto */
  --margine: clamp(30px, 4.2vw, 62px);
  /* rientro della cornice in px: in percentuale, su schermi larghi il
     passe-partout diventa sbilenco */
  --cornice: clamp(14px, 1.6vw, 26px);

  position:relative;
  height:100svh;
  min-height:540px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--carta);
  color:var(--nero-caldo);
  isolation:isolate;
}

.hero :focus-visible{ outline-color:var(--nero-caldo); }

.solo-lettori{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- scritte sparse (riempite dal JS al passaggio 2) ---------- */
.hero__sparse{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* ---------- marchio ---------- */
/* Centrato dalla griglia della sezione, non da un transform: il JS della
   sequenza scrive scale() su questo elemento e cancellerebbe la traslazione. */
.marchio{
  position:relative;
  z-index:2;
  margin:0;
  /* colonna di righe centrate, non blocchi a piena larghezza: fitMark()
     giustifica misurando la larghezza di ogni riga, e un blocco
     restituirebbe quella del contenitore invece che quella del testo. */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* VARIANTE A - Archivo Black: grottesco neutro molto largo, spessore
     uniforme. Nessun filetto sottile, quindi ogni parte del glifo ha
     spessore da tenere la fotografia, e piu' larghezza significa piu'
     immagine visibile. */
  font-family:"Marchio", "Archivo Black", Impact, sans-serif;
  font-weight:400;
  line-height:1;
  color:var(--bordeaux);
}

.marchio__riga{
  display:block;
  white-space:nowrap;
  /* Crenatura stretta: fra le lettere passava troppa carta e la fotografia
     si frammentava. Va dichiarata qui e non sul marchio, perche' em si
     risolve sul corpo dell'elemento in cui e' scritta e il marchio eredita
     16px dal corpo pagina: sul marchio valeva mezzo pixel. */
  --crenatura:-.04em;
  letter-spacing:var(--crenatura);
}

/* La crenatura vale anche dopo l'ultimo glifo, e lascerebbe la scatola della
   riga fuori squadra rispetto all'inchiostro. Con crenatura negativa il
   compenso e' positivo. */
.marchio__riga > .marchio__lettera:last-child{
  margin-right:calc(-1 * var(--crenatura));
}

/* Nessun corpo fisso sulle righe: lo calcola fitMark(), diverso per riga,
   per giustificarle alla stessa misura. Questo vale solo quando il modulo
   non c'e' proprio (niente JS, pagina aperta da file://): appena parte
   marca data-hero-state e la regola smette di valere. */
.hero:not([data-hero-state]) .marchio__riga{
  font-size:clamp(34px, 10.4vw, 360px);
}

.marchio__lettera{
  position:relative;
  display:inline-block;
}

.marchio__ink{
  display:block;
  line-height:1;
  color:var(--bordeaux);
}

/* copia riempita di fotografia: stesso glifo, stessa metrica, sovrapposta.
   Una sola fotografia per riga, continua sotto tutte le lettere come se
   fossero finestre ritagliate sulla stessa immagine. Lo scatto arriva per
   eredita' dalla riga; scala e origine di ciascuna lettera le calcola
   layoutPhotos() nel modulo, qui non vanno impostate. */
.marchio__foto{
  position:absolute;
  left:0; top:0;
  display:block;
  line-height:1;
  background-image:var(--scatto);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Ogni gruppo e' una colonna verticale che attraversa entrambe le righe:
   la lettera in basso continua l'immagine di quella che ha sopra, non solo
   della lettera che ha accanto. Tre gruppi, tre fotografie, nessuna
   ripetizione. Qui va solo l'immagine: scala, origine e ripetizione le
   calcola layoutPhotos(). */
[data-hero-group="g1"]{ --scatto:url(assets/hero/g1.webp); }
[data-hero-group="g2"]{ --scatto:url(assets/hero/g2.webp); }
[data-hero-group="g3"]{ --scatto:url(assets/hero/g3.webp); }

/* senza background-clip:text resta il glifo pieno sotto */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .marchio__foto{ display:none; }
}

/* ---------- i quattro angoli ---------- */
/* Stesso corpo per tutti: le prime righe in alto condividono la linea di
   base, e cosi' le ultime righe in basso. */
.angolo{
  position:absolute;
  z-index:3;
  font-size:13px;
  line-height:1.55;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:400;
}

.angolo p{ margin:0; }

.angolo--tl{ left:var(--margine);  top:var(--margine); }
/* voci e bottone sulla stessa riga di base: quella linea condivisa con
   l'angolo in alto a sinistra e' meta' del lavoro della composizione
   assiale, e il bottone che andava a capo la rompeva. */
.angolo--tr{
  right:var(--margine);
  top:var(--margine);
  text-align:right;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:0 20px;
}
.angolo--bl{ left:var(--margine);  bottom:var(--margine); }
.angolo--br{ right:var(--margine); bottom:var(--margine); text-align:right; }

.angolo__voci{
  display:flex;
  gap:0 18px;
  justify-content:flex-end;
}

.angolo a{
  color:inherit;
  text-decoration:none;
}

/* La sottolineatura al passaggio vale per le voci, non per il bottone.
   Va esclusa esplicitamente: .angolo a ha un peso di (0,1,1) e batte
   .prenota, che e' (0,1,0), quindi il suo border-bottom trasparente
   cancellava il lato inferiore del bordo del bottone, e la regola di hover
   glielo ricolorava di currentColor, che li' e' il crema. */
.angolo a:not(.prenota){
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.angolo a:not(.prenota):hover{ border-bottom-color:currentColor; }

.prenota{
  display:inline-block;
  flex:0 0 auto;
  padding:7px 16px;
  min-height:32px;
  border:1px solid var(--bordeaux);
  color:var(--bordeaux);
}
.prenota:hover{
  background:var(--bordeaux);
  color:var(--carta);
}

/* Unica eccezione della periferia: le altre tre voci sono etichette, questa
   e' una frase e deve leggersi come tale. Tondo minuscolo, corpo piu'
   grande, spaziatura normale, due righe. */
.frase{
  text-transform:none;
  letter-spacing:normal;
  font-size:19px;
  line-height:1.35;
  font-weight:300;
  /* Righe lunghe e poche: a 34ch la frase sta su tre righe da 45, 50 e 46
     caratteri invece che su quattro corte, e "Africa Orientale" resta
     intero grazie allo spazio unificatore nel markup.

     Due righe non sono praticabili: servirebbero 70ch, cioe' 733px, e da
     1440 in giu' il blocco finisce sopra l'indicatore di scorrimento, che
     e' centrato in basso.

     Il tetto in vw serve proprio a quello: sotto i mille pixel di finestra
     34ch non ci starebbero senza toccare l'indicatore, quindi il blocco si
     stringe e torna a quattro righe. Misurato: nessuna sovrapposizione a
     1920, 1440, 1024, 900 e 820.

     Il blocco e' position:absolute, quindi tutto questo resta fuori dal
     flusso della hero e non entra nella misura che fitMark fa sulle righe
     del marchio: verificato, non si spostano di un decimo di pixel.
     Senza text-wrap:balance il testo va a capo in modo avido: stesso
     numero di righe, solo meno pari. */
  max-width:min(34ch, 40vw);
  text-wrap:balance;
}

/* Secondo livello degli angoli: seconda riga in alto a sinistra, indirizzo e
   telefono in basso a destra. Colore pieno e mai opacity: a 11-13px su carta
   calda l'opacita' ridotta scende sotto la soglia di contrasto. */
.tenue{ color:var(--nero-tenue); }

.stato__pallino{
  display:inline-block;
  width:7px; height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#8A7A63;
  vertical-align:middle;
}
.stato--aperto .stato__pallino{ background:#4A6B2E; }

/* ---------- indicatore di scorrimento ---------- */
.cue{
  position:absolute;
  left:50%;
  bottom:var(--margine);
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.6;
}

.cue__filo{
  width:1px;
  height:34px;
  background:currentColor;
}

/* ---------- cornice e passe-partout ---------- */
/* Le quattro fasce si sovrappongono negli spigoli: alto e basso a tutta
   larghezza, destro e sinistro a tutta altezza. Nessuna fessura di un pixel. */
.fascia{
  position:absolute;
  z-index:4;
  background:var(--bordeaux);
}
.fascia--top   { left:0;  top:0;    width:100%;          height:var(--cornice); transform-origin:left center; }
.fascia--right { right:0; top:0;    width:var(--cornice); height:100%;          transform-origin:center top; }
.fascia--bottom{ left:0;  bottom:0; width:100%;          height:var(--cornice); transform-origin:right center; }
.fascia--left  { left:0;  top:0;    width:var(--cornice); height:100%;          transform-origin:center bottom; }

/* Il filetto disegna il bordo interno della fascia prima che la fascia
   arrivi a riempirlo: a sequenza finita e' la fascia stessa a fare cornice,
   e il filetto resta invisibile. */
.filo{
  position:absolute;
  z-index:5;
  background:var(--nero-caldo);
  opacity:0;
}
.filo--top   { left:0;  top:var(--cornice);    width:100%; height:1px; transform-origin:left center; }
.filo--right { right:var(--cornice); top:0;    width:1px; height:100%; transform-origin:center top; }
.filo--bottom{ left:0;  bottom:var(--cornice); width:100%; height:1px; transform-origin:right center; }
.filo--left  { left:var(--cornice);  top:0;    width:1px; height:100%; transform-origin:center bottom; }

/* ---------- grana di carta ---------- */
.grana{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:9;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.12;
}

/* ---------- sotto 768px: quattro angoli diventano due ---------- */
@media (max-width: 767px){
  .hero{
    --margine:clamp(20px, 5.4vw, 30px);
    --cornice:9px;
  }

  /* corpo un filo piu' piccolo: a 375px la cucina arrivava a toccare Prenota */
  .angolo{ font-size:11.5px; letter-spacing:.08em; }

  .angolo--tl{ max-width:46%; }
  .angolo--tr{
    top:var(--margine);
    right:var(--margine);
  }
  /* da telefono resta comunque una via per il menu: Menu e Prenota,
     le altre due voci si tolgono */
  .angolo--tr{ gap:0 14px; }
  .angolo__voci a + a{ display:none; }
  .prenota{ padding:6px 12px; }

  .angolo--bl{ display:none; }
  .angolo--br__via{ display:none; }

  .cue{ display:none; }
}

/* Sotto i 380px la cucina e il gruppo Menu+Prenota arrivavano a scavallarsi:
   un gradino in meno di corpo e un blocco a sinistra piu' stretto. */
@media (max-width: 379px){
  .angolo{ font-size:11px; letter-spacing:.06em; }
  .angolo--tl{ max-width:42%; }
  .angolo--tr{ gap:0 10px; }
  .prenota{ padding:5px 9px; }
}


/* =========================================================
   HERO — stato iniziale della sequenza di ingresso

   Vive in CSS e non solo nel JS: se lo stato di partenza arrivasse col
   primo fotogramma, si vedrebbe la hero completa e poi sparire.
   Vale solo quando la sequenza andra' davvero in scena: senza JS, con
   movimento ridotto o se la sequenza e' gia' stata vista in questa
   sessione, la hero resta quella a riposo del passaggio 1.
   ========================================================= */

.hero__ghost{
  position:absolute;
  transform:translate(-50%, -50%);
  white-space:nowrap;
  letter-spacing:.16em;
  color:var(--nero-caldo);
  opacity:0;
}

/* Nessun blocco sull'immagine: layoutPhotos() legge l'URL da
   getComputedStyle per ricavare le dimensioni native, e con background-image
   a none non troverebbe niente e non verrebbe piu' richiamata. Il ripiego
   regge lo stesso: finche' il file non e' decodificato lo strato fotografico
   non dipinge nulla e sotto resta il glifo bordeaux. */

/* will-change solo su cio' che si muove, e via a sequenza finita */
html.js .fascia,
html.js .filo,
html.js .marchio{ will-change:transform; }

html.js [data-hero-state="done"] .fascia,
html.js [data-hero-state="done"] .filo,
html.js [data-hero-state="done"] .marchio{ will-change:auto; }

@media (prefers-reduced-motion: no-preference){
  html.js:not(.hero-vista) .marchio{
    opacity:0;
    transform:scale(.28);
  }
  html.js:not(.hero-vista) .marchio__ink{ color:var(--nero-caldo); }
  html.js:not(.hero-vista) .marchio__foto{ opacity:0; }

  html.js:not(.hero-vista) .angolo,
  html.js:not(.hero-vista) .cue{ opacity:0; }

  html.js:not(.hero-vista) .fascia--top,
  html.js:not(.hero-vista) .fascia--bottom,
  html.js:not(.hero-vista) .filo--top,
  html.js:not(.hero-vista) .filo--bottom{ transform:scaleX(0); }

  html.js:not(.hero-vista) .fascia--right,
  html.js:not(.hero-vista) .fascia--left,
  html.js:not(.hero-vista) .filo--right,
  html.js:not(.hero-vista) .filo--left{ transform:scaleY(0); }

  /* il filetto parte visibile: e' lo scaleX/Y a zero a tenerlo nascosto */
  html.js:not(.hero-vista) .filo{ opacity:1; }
}

/* =========================================================
   SEZIONI A PIENA FINESTRA
   Quattro sezioni in flusso normale, adiacenti, alte 100svh.
   Nessun position:sticky, nessun margine fra le sezioni.
   ========================================================= */
.pieno,
.diviso{
  position:relative;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  background:var(--crema-2);
}

/* --- fotografie: piano di fondo della parallasse ---
   Il 30% di altezza in piu' e' la corsa entro cui l'immagine puo'
   scorrere (q * 11% = 14,3% dell'altezza di sezione per lato). */
.pieno .sfondo{ position:absolute; inset:0; }

.pieno .sfondo img,
.diviso .mezzo-foto img{
  position:absolute;
  left:0;
  top:-15%;
  width:100%;
  height:130%;
  object-fit:cover;
}

/* --- TIPO PIENO --- */
/* VELATURE D'ANGOLO
   Nessun filtro sull'immagine e nessuna velatura a tutta area: due
   gradienti radiali ancorati agli angoli dove sta il testo, che si
   spengono muovendosi verso l'angolo opposto. La zona piu' chiara resta
   la diagonale fra i due, dove non c'e' scritto niente.

   I riquadri sono grandi perche' devono contenere il testo intero, non
   solo il suo inizio: sono tarati misurando riga per riga il contrasto del
   crema sul rendering vero, a quindici larghezze fra 320 e 1902. Con
   riquadri piu' piccoli le ultime righe del paragrafo e le sopralinee
   uscivano dalla velatura e scendevano fino a 1.2:1. Se si cambia il
   testo, o il suo corpo, vanno ritarati.

   Sono pseudo-elementi di .sfondo, non nodi nel markup: stanno sopra
   l'immagine (che e' in position:absolute dentro lo stesso contenitore) e
   sotto il testo, che ha z-index 2. */
.pieno .sfondo::before,
.pieno .sfondo::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
}

/* In alto a sinistra: dietro occhiello e titolo.

   Il gradiente e' radiale, non lineare. Un lineare in diagonale si spegne
   lungo la diagonale ma non sui lati del rettangolo, e i due spigoli
   restano pieni: sulla fotografia si vedono due tagli netti, uno
   orizzontale e uno verticale. Un radiale ancorato all'angolo si spegne in
   ogni direzione e il rettangolo sparisce. Le tre tappe restano quelle
   volute - piena all'angolo, 0.40 a meta' corsa, trasparente prima del
   bordo - solo lette lungo il raggio invece che lungo la diagonale. */
.pieno .sfondo::before{
  top:0;
  left:0;
  width:80%;
  height:74%;
  background:radial-gradient(120% 120% at 0% 0%,
    rgba(18, 11, 5, 0.86) 0%,
    rgba(18, 11, 5, 0.58) 50%,
    rgba(18, 11, 5, 0) 88%);
}

/* in basso a destra: dietro il paragrafo e il link */
.pieno .sfondo::after{
  right:0;
  bottom:0;
  width:94%;
  height:66%;
  background:radial-gradient(120% 120% at 100% 100%,
    rgba(18, 11, 5, 0.86) 0%,
    rgba(18, 11, 5, 0.68) 50%,
    rgba(18, 11, 5, 0) 88%);
}

.pieno .testo-alto{
  position:absolute;
  top:104px;
  left:56px;
  z-index:2;
}

.pieno .testo-basso{
  position:absolute;
  bottom:64px;
  right:56px;
  width:min(38ch, 34vw);
  z-index:2;
}

/* --- TIPO DIVISO --- */
.diviso{ display:flex; }

.diviso .mezzo-foto{
  position:relative;
  flex:0 0 auto;
  width:50vw;
  height:100svh;
  overflow:hidden;
}

/* flex:1 1 0 porta il bordo destro del pannello esattamente sul viewport
   anche quando 100vw supera la larghezza utile per via della barra. */
.diviso .mezzo-tinta{
  flex:1 1 0;
  min-width:0;
  width:50vw;
  height:100svh;
  padding:104px 56px 64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--crema);
}

.diviso--rosso .mezzo-tinta{ background:#601518; }
.diviso--ocra  .mezzo-tinta{ background:#7B5012; }

/* --- testo delle nuove sezioni --- */
/* Le sezioni fotografiche e la galleria orizzontale sono in Outfit;
   hero e piede restano come sono. */
.pieno,
.diviso,
#orizzontale{
  font-family:"Outfit", system-ui, sans-serif;
}

.etichetta{
  font-size:13px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--crema);
  opacity:.85;
  margin-bottom:18px;
}

.pieno h2,
.diviso h2{
  margin:0;
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.04;
  color:var(--crema);
}

.pieno h2{ font-size:clamp(34px, 5vw, 76px); max-width:16ch; }
.diviso h2{ font-size:clamp(30px, 3.4vw, 52px); max-width:18ch; }

.pieno p,
.diviso p{
  margin:0;
  font-size:17px;
  line-height:1.55;
  font-weight:300;
  color:var(--crema);
  opacity:.9;
}

.azione{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  min-height:44px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--crema);
}

.azione .cerchio{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid currentColor;
  border-radius:50%;
}

@media (max-width: 899px){
  /* DIVISO si impila: niente 50/50 */
  .diviso{ flex-direction:column; height:auto; }
  .diviso .mezzo-foto{ width:100%; height:52svh; }
  .diviso .mezzo-tinta{ width:100%; height:auto; padding:56px 24px; }

  /* PIENO resta a 100svh, ma il testo diventa una colonna sola */
  .pieno{
    display:flex;
    flex-direction:column;
    /* Il testo sta in fondo, non in cima: nelle fotografie di queste due
       sezioni il soggetto e' nella meta' alta, e la velatura che rende
       leggibile il testo va messa dove la foto conta di meno. In alto
       resta lo scatto pieno. */
    justify-content:flex-end;
    padding:104px 24px 64px;
  }

  .pieno .testo-alto,
  .pieno .testo-basso{
    position:static;
    width:auto;
    max-width:38ch;
    text-align:left;
  }

  .pieno .testo-basso{ margin-top:32px; }

  /* Qui il testo non e' piu' in due angoli opposti: diventa una colonna
     sola, ancorata in basso e larga quanto la sezione. Le velature
     d'angolo del desktop coprirebbero il posto sbagliato, quindi si
     spostano invece di allargarsi: una sola velatura in basso, verticale,
     che si spegne salendo. Sopra resta la fotografia piena.

     Il gradiente e' verticale e occupa tutta la larghezza, quindi non ha
     spigoli laterali da smorzare come il radiale del desktop: si spegne
     sul proprio bordo alto e basta. */
  .pieno .sfondo::before{
    top:auto;
    bottom:0;
    width:100%;
    height:80%;
    background:linear-gradient(to top,
      rgba(18, 11, 5, 0.86) 0%,
      rgba(18, 11, 5, 0.68) 70%,
      rgba(18, 11, 5, 0) 100%);
  }

  .pieno .sfondo::after{ display:none; }

  /* parallasse dimezzata */
  .pieno .sfondo img,
  .diviso .mezzo-foto img{ top:-9%; height:118%; }
}

/* =========================================================
   MENU
   Apertura divisa, barra delle categorie ancorata, poi le
   dodici categorie in ordine fisso. Tutto statico: nessun
   filtro, nessuna animazione. Viene subito dopo la sezione
   orizzontale e subito prima del piede.
   ========================================================= */
.carta{
  --bordeaux-carta: #601518;
  --ocra:           #7B5012;
  --verde:          #4A6B2E;
  --rosso:          #A1231F;
  --filetto-crema:  rgba(241,233,217,.35);

  position:relative;
  font-family:"Outfit", system-ui, sans-serif;
  font-weight:300;
}
/* riceve il focus da "Salta la galleria", come il piede */
.carta:focus{ outline:none; }

.carta ul{ list-style:none; margin:0; padding:0; }
.carta h3,
.carta h4{ margin:0; }

/* Lo stesso occhiello di .etichetta, senza il colore fisso: qui sta
   sia sul bordeaux sia sull'ocra. */
.carta__occhiello{
  margin:0 0 18px;
  font-size:13px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  opacity:.85;
}

/* --- apertura: pannello bordeaux + foto, 50/50 --- */
/* Le due meta' vanno a capo da sole sotto i 840px (due basi da 420):
   prima il pannello, poi la foto. */
.carta__apertura{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  min-height:78svh;
  background:var(--crema-2);
}

.carta__firma{
  position:absolute;
  top:clamp(20px, 4.2vw, 62px);
  right:clamp(20px, 4.2vw, 62px);
  z-index:3;
  max-width:46%;
  text-align:right;
  font-size:13px;
  line-height:1.55;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--crema);
}
.carta__firma span{ opacity:.85; }

.carta__foto{
  position:relative;
  flex:1 1 420px;
  min-height:52svh;
  overflow:hidden;
}

.carta__foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* velatura in alto: tiene leggibile la firma sopra la foto */
.carta__foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(18,11,5,.72) 0%, rgba(18,11,5,0) 40%);
  pointer-events:none;
}

.carta__pannello{
  order:-1;
  flex:1 1 420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:clamp(104px, 12vw, 140px) clamp(24px, 4vw, 56px) clamp(48px, 5vw, 64px);
  background:var(--bordeaux-carta);
  color:var(--crema);
}

.carta__titolo{
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.04;
  font-size:clamp(44px, 6vw, 92px);
}

.carta__frase{
  font-size:17px;
  line-height:1.55;
  opacity:.9;
  max-width:38ch;
}

/* --- barra delle categorie ---
   Ancorata solo dentro il menu: finita la lista, se ne va con lui. */
.carta__barra{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--crema);
  border-bottom:1px solid var(--filetto);
}

.carta__barra-dentro{
  max-width:var(--max);
  margin:0 auto;
  padding:18px clamp(20px, 3vw, 34px);
  display:flex;
  gap:22px;
  overflow-x:auto;
  scrollbar-width:none;
}
.carta__barra-dentro::-webkit-scrollbar{ display:none; }

.carta__barra a{
  flex:none;
  font-size:13px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.12em;
  white-space:nowrap;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.carta__barra a:hover{ border-bottom-color:var(--inchiostro); }

/* da telefono la barra scorre di lato: le sfumature ai bordi dicono che
   continua (le classi le mette main.js), la voce attiva e' sottolineata */
@media (max-width: 899px){
  .carta__barra-dentro{
    --sfuma-sx:0px;
    --sfuma-dx:0px;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--sfuma-sx), #000 calc(100% - var(--sfuma-dx)), transparent);
            mask-image:linear-gradient(to right, transparent, #000 var(--sfuma-sx), #000 calc(100% - var(--sfuma-dx)), transparent);
  }
  .carta__barra-dentro.ha-prima{ --sfuma-sx:32px; }
  .carta__barra-dentro.ha-dopo{ --sfuma-dx:56px; }

  .carta__barra a{ color:var(--inchiostro-2); }
  .carta__barra a[aria-current]{
    color:var(--inchiostro);
    border-bottom-color:var(--inchiostro);
  }
}

/* --- corpo --- */
.carta__corpo{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(20px, 3vw, 34px) clamp(90px, 12vw, 150px);
}

/* --- riquadro "Un unico vassoio al centro" --- */
.carta__vassoio{
  margin-top:clamp(56px, 8vw, 110px);
  display:flex;
  flex-wrap:wrap;
  background:var(--ocra);
  color:var(--crema);
}

.carta__vassoio-foto{
  position:relative;
  flex:1 1 360px;
  min-height:360px;
  overflow:hidden;
}

.carta__vassoio-foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.carta__vassoio-testo{
  flex:1 1 360px;
  padding:clamp(32px, 5vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
}

.carta__vassoio h3{
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.04;
  font-size:clamp(30px, 3.4vw, 52px);
}

.carta__vassoio-voci li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--filetto-crema);
}
.carta__vassoio-voci li:last-child{ border-bottom:1px solid var(--filetto-crema); }

.carta__vassoio-voci li > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.carta__vassoio-nome{ font-size:20px; font-weight:400; }
.carta__vassoio-desc{ font-size:15px; line-height:1.5; opacity:.9; }

/* --- categorie --- */
.carta__categoria{
  position:relative;
  margin-top:clamp(64px, 8vw, 110px);
  /* la barra ancorata non deve coprire il titolo all'arrivo */
  scroll-margin-top:80px;
  display:flex;
  flex-wrap:wrap;
  gap:26px clamp(26px, 5vw, 80px);
  align-items:flex-start;
}

.carta__intestazione{
  flex:1 1 260px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.carta__nome{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.carta__numero{
  font-size:13px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--inchiostro-2);
  font-variant-numeric:tabular-nums;
}

.carta__nome h3{
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.04;
  font-size:clamp(28px, 3vw, 44px);
  text-wrap:balance;
}

.carta__scatto{
  width:100%;
  max-width:360px;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--crema-2);
}

.carta__scatto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.carta__voci{
  flex:2 1 460px;
  min-width:0;
  border-top:1px solid var(--inchiostro);
}

.carta__voce{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:18px 0 17px;
  border-bottom:1px solid var(--filetto);
}

.carta__voce-testo{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.carta__voce-riga{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 14px;
}

.carta__voce h4{
  font-size:20px;
  font-weight:400;
  line-height:1.3;
}

.carta__tag{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.carta__tag--tradizione { color:var(--ocra); }
.carta__tag--vegetariano{ color:var(--verde); }
.carta__tag--piccante   { color:var(--rosso); }

.carta__voce p{
  font-family:"Newsreader", Georgia, serif;
  font-size:17px;
  line-height:1.45;
  font-weight:300;
  color:var(--inchiostro-2);
  max-width:52ch;
  text-wrap:pretty;
}

.carta__prezzo{
  flex:none;
  font-size:18px;
  font-weight:300;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* --- decori laterali, solo dove i margini li contengono --- */
.carta__decoro{ display:none; }

@media (min-width: 1440px){
  .carta__decoro{
    position:absolute;
    top:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    color:var(--bordeaux-carta);
    pointer-events:none;
  }
  /* centrati nel margine fuori dal contenitore da 1260px */
  .carta__decoro--sx{
    left:calc((1260px - 100vw) / 4 - 34px);
    transform:translateX(-50%);
  }
  .carta__decoro--dx{
    right:calc((1260px - 100vw) / 4 - 34px);
    transform:translateX(50%);
  }
}

.carta__decoro-filo{
  width:1px;
  height:56px;
  background:currentColor;
  opacity:.45;
}

.carta__decoro-stella{ font-size:13px; line-height:1; }

.carta__decoro-num{
  writing-mode:vertical-rl;
  font-size:11px;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.carta__decoro--sx .carta__decoro-num{ transform:rotate(180deg); }

/* --- nota finale --- */
.carta__nota{
  margin-top:clamp(64px, 8vw, 110px);
  font-size:14px;
  line-height:1.6;
  color:var(--inchiostro-2);
  max-width:60ch;
}

/* =========================================================
   BLOCCO 3 — SEZIONE ORIZZONTALE ANCORATA
   Base = colonna verticale leggibile senza JS, sotto 900px
   e con prefers-reduced-motion. Il pinning è un'aggiunta.
   ========================================================= */

/* --- link "Salta la galleria": invisibile finché non riceve focus --- */
.guscio-salto{ position:relative; height:0; }

.salta{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.salta:focus{
  width:auto; height:auto;
  margin:0;
  clip:auto;
  overflow:visible;
  left:var(--pad); top:14px;
  z-index:60;
  padding:10px 16px;
  background:var(--crema-2);
  color:var(--inchiostro);
  font-size:14.5px;
  font-style:italic;
  border:1px solid var(--filetto);
}

/* --- impaginazione verticale (fallback e mobile) --- */
#orizzontale{ padding-block:0 clamp(90px, 12vw, 150px); }

.palco{ position:static; height:auto; overflow:visible; }

.capitolo{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.capitolo + .capitolo{ margin-top:clamp(64px, 8vw, 110px); }

#orizzontale .velo{ display:none; }

.foto{
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--crema-2);
}

.foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.testo{ margin-top:24px; }

.testo h2{
  font-weight:200;
  font-size:clamp(34px, 4vw, 58px);
  line-height:1.06;
  letter-spacing:-.022em;
  margin-bottom:18px;
  text-wrap:balance;
}

.testo p{
  font-size:18px;
  line-height:1.55;
  font-weight:300;
  color:var(--inchiostro-2);
  max-width:46ch;
}

.collegamento{
  display:inline-block;
  margin-top:26px;
  font-size:15px;
  /* Outfit non ha corsivo: l'obliquo sintetico deforma le lettere */
  font-style:normal;
  border-bottom:1px solid var(--filetto);
  padding-bottom:2px;
}
.collegamento:hover{ border-bottom-color:var(--inchiostro); }

/* --- pinning: solo con JS, da 900px in su, senza reduced-motion --- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){

  html.js #orizzontale{
    position:relative;
    padding-bottom:0;
    /* height impostata inline da main.js: 100svh + distanzaScroll */
  }

  html.js #orizzontale .palco{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
  }

  html.js #orizzontale .capitolo{
    position:absolute;
    inset:0;
    max-width:none;
    margin:0;
    padding:0;
  }

  html.js #orizzontale .cap-1{ z-index:1; }
  html.js #orizzontale .cap-2{ z-index:2; }

  html.js #orizzontale .velo{
    display:block;
    position:absolute;
    inset:0;
    background:var(--crema);
    z-index:1;
    transform:translateX(100vw);
  }

  html.js #orizzontale .foto{
    position:absolute;
    left:0; top:0;
    width:46vw;
    height:100svh;
    aspect-ratio:auto;
    overflow:hidden;
    transform-origin:0 50%;
    transform:translateX(100vw) scale(.26);
    z-index:2;
  }

  html.js #orizzontale .testo{
    position:absolute;
    left:51vw;
    top:50%;
    width:36vw;
    margin:0;
    transform-origin:0 50%;
    transform:translateX(45vw) translateY(-50%);
    opacity:0;
    z-index:2;
  }
}

/* =========================================================
   PIEDE
   ========================================================= */
.pie{
  padding-block:clamp(70px, 9vw, 120px) 48px;
  border-top:1px solid var(--filetto);
  font-size:15px;
  line-height:1.6;
  color:var(--inchiostro-2);
}
.pie:focus{ outline:none; }

.pie__col{ grid-column:span 4; }

.pie__nome{
  font-size:22px;
  font-weight:300;
  color:var(--inchiostro);
  line-height:1.25;
}
.pie__nome em{ font-style:italic; font-weight:200; }

.pie a{ border-bottom:1px solid var(--filetto); }
.pie a:hover{ border-bottom-color:var(--inchiostro); }

@media (max-width: 899px){
  .pie__col{ grid-column:1 / -1; }
  .pie__col + .pie__col{ margin-top:22px; }
}

/* =========================================================
   BOTTONE TORNA-SU
   ========================================================= */
.su{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--crema-2);
  color:var(--inchiostro);
  cursor:pointer;
  opacity:0;
  transform:scale(.86);
  pointer-events:none;
  transition:opacity .32s cubic-bezier(0.16, 1, 0.3, 1),
             transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}

.su.e-visibile{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

@media (max-width: 899px){
  .su{ right:16px; bottom:16px; }
}

/* =========================================================
   RIGHE CHE SALGONO DA SOTTO UNA MASCHERA

   Le righe non sono scritte nel markup: le calcola main.js misurando
   l'offsetTop di ogni parola dopo l'impaginazione, quindi si rifanno a
   ogni cambio di larghezza. Qui c'e' solo il vestito.

   La maschera E' l'effetto: overflow:hidden sul contenitore, la riga che
   sale da translateY(100%) a zero. Nessuna opacita', nessuna sfocatura,
   nessuna scala.
   ========================================================= */

/* Il contenitore riga eredita l'altezza dalla riga di testo: display:block
   con overflow:hidden basta, ma i discendenti (g, p, q) e gli accenti
   verrebbero tagliati quando line-height e' stretto. Il padding sotto
   allarga la finestra e il margine negativo lo riprende, cosi' la
   spaziatura verticale del blocco resta identica a prima. */
.riga-maschera{
  display:block;
  overflow:hidden;
  padding-bottom:.18em;
  margin-bottom:-.18em;
}

.riga-interna{
  display:block;
  transform:translateY(100%);
  transition:transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elemento gia' flex o grid (.azione: etichetta piu' cerchietto della
   freccia): non ha righe da misurare, entra tutto insieme. La maschera
   prende il posto dell'elemento e la riga interna ne eredita il display,
   cosi' l'allineamento resta quello di prima. */
.riga-maschera--piena{ display:block; }
.riga-maschera--piena > .riga-interna{
  display:inherit;
  align-items:inherit;
  gap:inherit;
}
.azione .riga-maschera--piena > .riga-interna{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* Stato finale. Lo assegna main.js riga per riga, sfasando col
   transition-delay inline; ricostruendo un elemento gia' animato la classe
   e' gia' qui e il transition-delay non c'e', quindi non riparte nulla. */
.riga-interna.e-dentro{ transform:none; }

/* L'inline-block sulla parola serve a poterne leggere l'offsetTop: un
   inline normale a cavallo di due righe ne restituirebbe uno solo.
   Lo spazio sta dentro lo span, cosi' il testo si seleziona e si copia con
   le spaziature giuste e lo screen reader legge parole separate; ma alla
   fine di un inline-block lo spazio verrebbe collassato e le parole si
   toccherebbero, quindi qui va preservato esplicitamente. */
.parola{
  display:inline-block;
  white-space:pre-wrap;
}

/* In attesa del primo calcolo il testo va nascosto, altrimenti si vede a
   posto per un istante, poi salta sotto la maschera e risale.
   Si nasconde per selettore, non per la classe che aggiunge il JS: quella
   arriva a calcolo fatto, cioe' troppo tardi per evitare il lampeggio.
   .e-misurato nello stesso selettore lo riaccende: mettere la riaccensione
   in una regola a parte non basterebbe, questa e' piu' specifica e
   vincerebbe comunque.
   Tutto sotto html.js e fuori da .righe-spente: senza JS, o con l'effetto
   spento, la regola non si applica e il testo si vede da subito. */
html.js:not(.righe-spente) .pieno .testo-alto > *:not(.e-misurato),
html.js:not(.righe-spente) .pieno .testo-basso > *:not(.e-misurato),
html.js:not(.righe-spente) .diviso .mezzo-tinta h2:not(.e-misurato),
html.js:not(.righe-spente) .diviso .mezzo-tinta .fondo > *:not(.e-misurato){
  visibility:hidden;
}

/* Con movimento ridotto il testo e' gia' al suo posto: niente maschera,
   niente trasformazione, niente attesa del calcolo. */
@media (prefers-reduced-motion: reduce){
  .riga-maschera{
    overflow:visible;
    padding-bottom:0;
    margin-bottom:0;
  }
  .riga-interna{
    transform:none;
    transition:none;
  }
  html.js .pieno .testo-alto > *,
  html.js .pieno .testo-basso > *,
  html.js .diviso .mezzo-tinta h2,
  html.js .diviso .mezzo-tinta .fondo > *{ visibility:visible !important; }
}

/* =========================================================
   SCORRIMENTO FERMO DURANTE LA SEQUENZA DELLA HERO
   La classe la mette e la toglie main.js, agganciata a
   data-hero-state="done". Gli ascoltatori in JS fermano rotella, touch e
   tasti; questo chiude la barra laterale e le spinte per inerzia, che non
   passano per nessun evento annullabile.
   ========================================================= */
html.scorrimento-fermo,
html.scorrimento-fermo body{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

/* Il bottone torna-su non ha senso mentre la pagina e' ferma in cima. */
html.scorrimento-fermo .su{ display:none; }

/* =========================================================
   MOVIMENTO RIDOTTO
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .su{ transform:none; }

  .pieno .sfondo img,
  .diviso .mezzo-foto img{
    top:0;
    height:100%;
    transform:none;
  }
}