/* ═══════════════════════════════════════════════════════════════════
   IL PAPIRO — Precotto, Milano
   Palette presa dall'insegna reale (foto facciata): bordeaux del fondo,
   crema delle lettere, travertino del rivestimento. Il carbone viene
   dalla foto dell'impasto scuro.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --inchiostro:#241C18;
  --bordeaux:#5E251F;
  --bordeaux-scuro:#42170F;
  --papiro:#F0E7D6;
  --papiro-chiaro:#F7F1E5;
  --travertino:#D8CDB9;
  --grano:#C08A3E;
  --carbone:#3A3A38;
  --fumo:#6E645A;

  --serif:'Andada Pro', Georgia, serif;
  --mono:'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter:clamp(1.15rem, 4vw, 3.5rem);
  --max:1180px;
}

/* ─────────── reset tecnico (plumbing.css) ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--grano);outline-offset:3px}

/* stato iniziale dei reveal — le tre righe che non devono mancare mai */
.js .reveal{opacity:0}
.js .reveal.in-view{opacity:1}
html:not(.js) .reveal{opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
  .intro{display:none !important}
  .v-raggio,.v-stelo{stroke-dashoffset:0 !important}
  .impasto{opacity:1 !important;transform:none !important}
}

/* ─────────── base ─────────── */
body{
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  color:var(--inchiostro);
  background:var(--papiro);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.08;margin:0;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:inherit}

.occhiello{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bordeaux);
  margin:0 0 1.1rem;
}
.nowrap{white-space:nowrap}

.bottone{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.07em;
  text-decoration:none;
  padding:.72rem 1.25rem;
  border:1.5px solid var(--bordeaux);
  color:var(--bordeaux);
  border-radius:2px;
  transition:background .25s,color .25s;
}
.bottone:hover{background:var(--bordeaux);color:var(--papiro)}
.bottone--pieno{background:var(--bordeaux);color:var(--papiro-chiaro)}
.bottone--pieno:hover{background:var(--bordeaux-scuro);border-color:var(--bordeaux-scuro)}

/* ─────────── INTRO ─────────── */
.intro{
  position:fixed;inset:0;z-index:200;
  background:var(--bordeaux);color:var(--papiro);
  display:grid;place-items:center;
  transition:opacity .6s ease;
}
.intro.is-out{opacity:0;pointer-events:none}
.intro__glifo{width:min(24vw,150px);height:auto;color:var(--papiro)}
.intro__stelo,.intro__raggio{stroke-dasharray:200;stroke-dashoffset:200;animation:tratto 1.1s ease forwards}
.intro__stelo{animation-delay:.05s}
.intro__raggio:nth-of-type(2){animation-delay:.34s}
.intro__raggio:nth-of-type(3){animation-delay:.42s}
.intro__raggio:nth-of-type(4){animation-delay:.50s}
.intro__raggio:nth-of-type(5){animation-delay:.58s}
.intro__raggio:nth-of-type(6){animation-delay:.66s}
.intro__raggio:nth-of-type(7){animation-delay:.74s}
.intro__raggio:nth-of-type(8){animation-delay:.82s}
@keyframes tratto{to{stroke-dashoffset:0}}
.intro__skip{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  background:none;border:0;color:var(--papiro);opacity:.75;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ─────────── TESTATA ─────────── */
.testata{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:center;gap:1.2rem;
  padding:.75rem var(--gutter);
  /* NIENTE backdrop-filter: rende l'header containing block dei fixed figli */
  background:rgba(240,231,214,.97);
  border-bottom:1px solid var(--travertino);
}
.testata__marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bordeaux);flex:0 0 auto}
.marchio__glifo{width:20px;height:23px}
.marchio__nome{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}

.nav{display:flex;gap:1.5rem;margin-left:auto}
.nav a{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  text-decoration:none;color:var(--inchiostro);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav a:hover{border-color:var(--bordeaux)}

.testata__coda{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.nav + .testata__coda{margin-left:1.5rem}
.lingue{display:flex;gap:.15rem;font-family:var(--mono);font-size:.72rem}
.lingue button{background:none;border:0;padding:.3rem .35rem;cursor:pointer;color:var(--fumo);letter-spacing:.05em}
.lingue button.is-on{color:var(--bordeaux);font-weight:700;text-decoration:underline;text-underline-offset:4px}

.burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer;position:relative;z-index:96}
.burger span{display:block;width:22px;height:2px;background:var(--inchiostro);margin:4px 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(78vw,300px);z-index:95;
  background:var(--bordeaux);color:var(--papiro);
  display:flex;flex-direction:column;gap:.4rem;
  padding:5rem 1.6rem 2rem;
}
.drawer a{font-family:var(--mono);font-size:.95rem;text-decoration:none;padding:.7rem 0;border-bottom:1px solid rgba(240,231,214,.18)}
.drawer__cta{margin-top:1rem;border:1.5px solid var(--papiro);border-bottom:1.5px solid var(--papiro);text-align:center;border-radius:2px}

/* ═══════════ APERTURA — l'hero È un elenco ═══════════ */
.apertura{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,7vw,6rem) var(--gutter) clamp(2rem,5vw,4rem);
}
.apertura__intestazione{max-width:46rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.apertura__titolo{display:flex;flex-direction:column;gap:1.4rem}
.apertura__nome{
  font-size:clamp(3.4rem,12vw,8.5rem);
  line-height:.86;
  letter-spacing:-.035em;
  color:var(--bordeaux);
}
.apertura__sotto{
  font-size:clamp(1.15rem,.98rem + .95vw,1.85rem);
  font-weight:400;line-height:1.32;letter-spacing:-.01em;
  max-width:30ch;
}

/* l'indice dei dieci impasti */
.impasti-indice{list-style:none;margin:0;padding:0;border-top:1px solid var(--travertino)}
.impasto{
  display:grid;
  grid-template-columns:3.2rem minmax(0,13rem) 1fr;
  align-items:baseline;gap:1rem;
  padding:.82rem 0;
  border-bottom:1px solid var(--travertino);
}
.impasto__n{font-family:var(--mono);font-size:.72rem;color:var(--grano);letter-spacing:.06em}
.impasto__nome{font-size:clamp(1.15rem,1rem + .6vw,1.6rem);font-weight:600;letter-spacing:-.015em}
.impasto__spec{font-family:var(--mono);font-size:.74rem;line-height:1.5;color:var(--fumo);letter-spacing:.01em}
.impasto__spec b{color:var(--bordeaux);font-weight:400;border-bottom:1px solid var(--grano)}
.impasto--chiave .impasto__nome{color:var(--bordeaux)}

.apertura__nota{
  margin-top:1.6rem;font-family:var(--mono);font-size:.74rem;line-height:1.7;
  color:var(--fumo);max-width:52ch;
}
.apertura__nota a{color:var(--bordeaux)}

/* ═══════════ MANIFESTO ═══════════ */
.manifesto{
  background:var(--bordeaux);color:var(--papiro);
  padding:clamp(3.4rem,8vw,6.5rem) var(--gutter);
}
.manifesto__cit{margin:0 auto;max-width:44rem;text-align:center}
.manifesto__cit p{
  font-size:clamp(1.3rem,1rem + 1.5vw,2.3rem);
  line-height:1.34;font-style:italic;letter-spacing:-.015em;margin-bottom:1.4rem;
}
.manifesto__cit cite{font-family:var(--mono);font-style:normal;font-size:.72rem;letter-spacing:.1em;opacity:.7;text-transform:uppercase}
.manifesto__coda{
  margin:2.6rem auto 0;max-width:38rem;text-align:center;
  font-size:.95rem;opacity:.85;
}

/* ═══════════ OMBRELLA — la firma ═══════════ */
.ombrella{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3.4rem,8vw,6.5rem) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.ombrella__testo h2{font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem);margin-bottom:1.2rem;color:var(--bordeaux)}
.ombrella__mini{font-family:var(--mono);font-size:.76rem;color:var(--fumo);line-height:1.7}
.ombrella__mini b{color:var(--inchiostro);font-weight:400}

.ombrella__disegno{position:relative}
#ventaglio{width:min(100%,300px);height:auto;color:var(--grano);display:block;margin:0 auto -.5rem}
.v-stelo,.v-raggio{stroke-dasharray:1;stroke-dashoffset:1}
html:not(.js) .v-stelo,html:not(.js) .v-raggio{stroke-dasharray:none;stroke-dashoffset:0}
.ombrella__foto{margin:1.4rem 0 0}
.ombrella__foto img{border-radius:2px;filter:saturate(.94)}
.ombrella__foto figcaption{
  font-family:var(--mono);font-size:.7rem;color:var(--fumo);
  letter-spacing:.06em;margin-top:.55rem;text-transform:uppercase;
}

/* ═══════════ CARTA — due colonne che corrono insieme ═══════════ */
.carta{
  background:var(--papiro-chiaro);
  border-top:1px solid var(--travertino);border-bottom:1px solid var(--travertino);
  padding:clamp(3rem,7vw,5.5rem) var(--gutter);
}
.carta__intro{max-width:var(--max);margin:0 auto clamp(2rem,4vw,3.2rem)}
.carta__intro h2{font-size:clamp(1.9rem,1.35rem + 2vw,3.1rem);margin-bottom:1rem;color:var(--bordeaux)}
.carta__intro p{max-width:52ch}

.carta__colonne{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);
}
.colonna__testa{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bordeaux);font-weight:400;
  padding-bottom:.7rem;margin-bottom:.3rem;border-bottom:2px solid var(--bordeaux);
}
.colonna--vega .colonna__testa{color:var(--carbone);border-bottom-color:var(--carbone)}

.listino{list-style:none;margin:0;padding:0}
.listino li{
  display:grid;grid-template-columns:1fr auto;
  gap:.2rem .9rem;padding:.85rem 0;border-bottom:1px solid var(--travertino);
}
.piatto{font-weight:600;font-size:1.03rem}
.prezzo{font-family:var(--mono);font-size:.85rem;color:var(--bordeaux);white-space:nowrap;align-self:start}
.ingr{grid-column:1/-1;font-size:.85rem;color:var(--fumo);line-height:1.5}

.carta__nota{
  max-width:var(--max);margin:2.4rem auto 0;
  font-family:var(--mono);font-size:.76rem;line-height:1.75;color:var(--fumo);
}
.carta__nota b{color:var(--bordeaux);font-weight:400}

/* ═══════════ FARAONE ═══════════ */
.faraone{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) var(--gutter);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;
}
.faraone__testo h2{font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem);margin-bottom:1.1rem;color:var(--bordeaux)}
.faraone__due{list-style:none;margin:0;padding:0;border-top:2px solid var(--grano)}
.faraone__due li{padding:1.15rem 0;border-bottom:1px solid var(--travertino)}
.faraone__nome{display:block;font-size:1.25rem;font-weight:700;margin-bottom:.3rem}
.faraone__ingr{display:block;font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--fumo)}

/* ═══════════ MARE ═══════════ */
.mare{
  background:var(--carbone);color:var(--papiro);
  padding:clamp(3rem,7vw,5.5rem) var(--gutter);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start;
  max-width:none;
}
.mare > *{max-width:100%}
.mare__testo{max-width:38rem;justify-self:end;width:100%}
.mare .occhiello{color:var(--grano)}
.mare__testo h2{font-size:clamp(1.9rem,1.35rem + 2vw,3rem);margin-bottom:1.1rem}
.mare__lista{list-style:none;margin:2rem 0 0;padding:0}
.mare__lista li{
  display:grid;grid-template-columns:1fr auto;gap:.2rem .9rem;
  padding:.85rem 0;border-bottom:1px solid rgba(240,231,214,.16);
}
.mare__lista .ingr{color:rgba(240,231,214,.6)}
.mare__lista .prezzo{color:var(--grano)}
.mare__nota{margin-top:1.5rem;font-family:var(--mono);font-size:.76rem;color:rgba(240,231,214,.7)}
.mare__nota b{color:var(--papiro);font-weight:400}
.mare__foto{display:grid;gap:1rem;max-width:26rem}
.mare__foto figure{margin:0}
.mare__foto img{border-radius:2px}

/* ═══════════ GALLERIA ═══════════ */
.galleria{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter)}
.galleria__titolo{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);margin-bottom:1.8rem;color:var(--bordeaux)}
.galleria__griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.shot{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:2px}
.shot img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}

/* ═══════════ RECENSIONI ═══════════ */
.voci{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,5.5rem) var(--gutter)}
.voci h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);margin-bottom:2rem;color:var(--bordeaux)}
.voci__lista{list-style:none;margin:0;padding:0;columns:2;column-gap:2.2rem}
.voce{break-inside:avoid;margin-bottom:1.6rem;padding:1.35rem 1.4rem;background:var(--papiro-chiaro);border-left:3px solid var(--grano);border-radius:2px}
.voce p{font-size:.96rem;line-height:1.6;margin-bottom:.7rem}
.voce__chi{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;color:var(--fumo);text-transform:uppercase}

/* ═══════════ DOVE ═══════════ */
.dove{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;
}
.dove__testo h2{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.7rem);margin-bottom:1rem;color:var(--bordeaux)}
.dove__stato{font-family:var(--mono);font-size:.8rem;color:var(--bordeaux);margin:1.4rem 0}

.orari{width:100%;border-collapse:collapse;margin:1rem 0 1.8rem;font-size:.9rem}
.orari caption{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fumo);text-align:left;padding-bottom:.7rem;
}
.orari th,.orari td{padding:.5rem .4rem;border-bottom:1px solid var(--travertino);text-align:left;font-weight:400}
.orari th{font-weight:600;width:9rem}
.orari td{font-family:var(--mono);font-size:.8rem;color:var(--fumo)}
.orari tr.is-today th,.orari tr.is-today td{color:var(--bordeaux);background:rgba(192,138,62,.09)}
.orari tr.is-today th{font-weight:700}

.dove__contatti{display:flex;flex-wrap:wrap;gap:.7rem}
.dove__mappa{display:grid;gap:1rem}
.dove__facciata{margin:0}
.dove__facciata img{border-radius:2px}
.dove__mappa iframe{width:100%;height:340px;border-radius:2px;display:block}

/* ═══════════ FAQ ═══════════ */
.faq{max-width:52rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) clamp(3.5rem,8vw,6rem)}
.faq h2{font-size:clamp(1.6rem,1.25rem + 1.4vw,2.4rem);margin-bottom:1.6rem;color:var(--bordeaux)}
.faq details{border-bottom:1px solid var(--travertino);padding:.95rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--grano);font-size:1.1rem}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:.8rem 0 .2rem;color:var(--fumo);font-size:.95rem}
.faq details p b{color:var(--inchiostro);font-weight:600}

/* ═══════════ CHIUSA ═══════════ */
.chiusa{background:var(--bordeaux);color:var(--papiro);padding:clamp(2.6rem,6vw,4rem) var(--gutter) 5.5rem}
.chiusa__riga{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between}
.chiusa__nome{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.chiusa p{font-size:.9rem;line-height:1.65;opacity:.88}
.chiusa a{color:var(--papiro)}
.chiusa__nota{max-width:var(--max);margin:2.4rem auto 0;font-family:var(--mono);font-size:.68rem;line-height:1.7;opacity:.55}

/* ═══════════ BARRA MOBILE ═══════════ */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;background:var(--bordeaux-scuro);
  border-top:1px solid rgba(240,231,214,.15);
}
.barra a{
  flex:1;text-align:center;padding:.85rem .4rem;text-decoration:none;color:var(--papiro);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
}
.barra a + a{border-left:1px solid rgba(240,231,214,.15)}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed;inset:0;z-index:150;
  background:rgba(36,28,24,.94);
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
.lightbox[hidden]{display:none !important}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:2px}
.lightbox__x{position:absolute;top:1.1rem;right:1.4rem;background:none;border:0;color:var(--papiro);font-size:2.2rem;line-height:1;cursor:pointer}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .barra{display:flex}
  .ombrella,.faraone,.mare,.dove{grid-template-columns:1fr}
  .mare__testo{justify-self:stretch;max-width:none}
  .mare__foto{max-width:none;grid-template-columns:1fr 1fr}
  .voci__lista{columns:1}
  .galleria__griglia{grid-template-columns:repeat(2,1fr)}
  .chiusa{padding-bottom:5.5rem}
}
@media (max-width:640px){
  .carta__colonne{grid-template-columns:1fr;gap:2.6rem}
  .impasto{grid-template-columns:2.4rem 1fr;row-gap:.25rem}
  .impasto__spec{grid-column:2/-1}
  .mare__foto{grid-template-columns:1fr}
  .testata__coda .bottone{display:none}
  .orari th{width:6.5rem;font-size:.88rem}
  .orari td{font-size:.74rem;padding:.5rem .25rem}
}