/* ═══════════════════════════════════════════════════════════════════
   BONTÀ DEL FORNO DI PAOLO E CHIARA — Via Padova 268, Milano
   Struttura: IL DIALOGO. Ogni scambio è una coppia — la voce del
   cliente, e sotto, rientrata, la risposta vera di Paolo e Chiara.
   Scorrendo si legge una conversazione lunga mesi.
   Palette dalle LORO foto: il legno chiaro della parete col logo,
   l'oro del loro corsivo, il crema della carta del sacchetto, il
   rosso dei cuori sulla torta.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --carta:#FBF6EC;
  --carta-2:#F3EADB;
  --inchiostro:#2C241B;
  --inchiostro-soft:#6B5C4A;
  --legno:#C39A5F;
  --legno-scuro:#8C6634;
  --oro:#A87F35;
  --rosso:#C0392F;
  --linea:#DFD1BB;

  --display:'Rosarivo', Georgia, serif;
  --testo:'Quattrocento Sans', system-ui, sans-serif;

  --gutter:clamp(1.15rem, 4vw, 3.5rem);
  --max:1120px;
  --colonna:min(64ch, 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
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(--oro);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.js .reveal{opacity:0}
.js .reveal.in-view{opacity:1}
html:not(.js) .reveal{opacity:1}

/* la firma anima SOLO [data-scritta]; senza JS il testo è pieno */
html:not(.js) .risp__t{opacity:1}

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

body{
  font-family:var(--testo);font-size:clamp(1rem,.96rem + .22vw,1.09rem);line-height:1.72;
  color:var(--inchiostro);background:var(--carta);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0}
p{margin:0 0 1em}
a{color:inherit}

.occhiello{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--legno-scuro);margin:0 0 .9rem}
.occhiello--chiaro{color:var(--legno)}

.bottone{
  display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-decoration:none;
  padding:.6rem 1.25rem;border:1.5px solid var(--legno-scuro);color:var(--legno-scuro);border-radius:999px;
  transition:background .22s,color .22s;
}
.bottone:hover{background:var(--legno-scuro);color:var(--carta)}
.bottone--pieno{background:var(--legno-scuro);color:var(--carta)}
.bottone--pieno:hover{background:var(--inchiostro);border-color:var(--inchiostro)}

/* ── INTRO ── */
.intro{position:fixed;inset:0;z-index:200;background:var(--carta);display:grid;place-items:center;transition:opacity .55s ease}
.intro.is-out{opacity:0;pointer-events:none}
.intro__n{font-family:var(--display);font-style:italic;font-size:clamp(2rem,7.5vw,4rem);color:var(--legno-scuro);opacity:0;animation:sali .75s ease .15s forwards}
@keyframes sali{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.intro__skip{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);background:none;border:0;color:var(--inchiostro-soft);cursor:pointer;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}

/* ── TESTATA ── */
.testata{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:1.2rem;padding:.6rem var(--gutter);background:rgba(251,246,236,.97);border-bottom:1px solid var(--linea)}
.marchio{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--legno-scuro);flex:0 0 auto;font-family:var(--display)}
.marchio__b{font-size:1.15rem}
.marchio__f{font-style:italic;font-size:1.05rem;margin-left:.9rem;margin-top:-.15rem}
.nav{display:flex;gap:1.5rem;margin-left:auto}
.nav a{font-size:.85rem;text-decoration:none;color:var(--inchiostro-soft);padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--inchiostro);border-color:var(--legno)}
.testata__coda{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.nav + .testata__coda{margin-left:1.4rem}
.lingue{display:flex;font-size:.74rem;font-weight:700}
.lingue button{background:none;border:0;padding:.3rem .35rem;cursor:pointer;color:var(--inchiostro-soft)}
.lingue button.is-on{color:var(--legno-scuro);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:4.5px 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(78vw,300px);z-index:95;background:var(--carta-2);border-left:1px solid var(--linea);display:flex;flex-direction:column;padding:5rem 1.6rem 2rem}
.drawer a{font-size:1rem;text-decoration:none;padding:.8rem 0;border-bottom:1px solid var(--linea)}
.drawer__cta{margin-top:1.2rem;border:1.5px solid var(--legno-scuro);border-bottom:1.5px solid var(--legno-scuro);color:var(--legno-scuro);text-align:center;border-radius:999px;font-weight:700}

/* ═══ APERTURA ═══ */
.apertura{max-width:var(--max);margin:0 auto;padding:clamp(3rem,9vw,6.5rem) var(--gutter) clamp(2rem,4vw,3rem);text-align:center}
.apertura__eti{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--inchiostro-soft);margin:0 0 clamp(1.8rem,4vw,3rem)}
.apertura__h{font-size:clamp(4rem,2rem + 12vw,11rem);line-height:.9;color:var(--legno-scuro);font-style:italic}
.apertura__p{max-width:52ch;margin:clamp(1.8rem,4vw,2.6rem) auto 0;color:var(--inchiostro-soft)}
.apertura__p b{color:var(--inchiostro);font-weight:700}
.apertura__giu{margin-top:1.6rem;font-size:.84rem;letter-spacing:.06em;color:var(--legno-scuro)}

/* ═══ GLI SCAMBI — il dialogo ═══ */
.scambi{max-width:var(--max);margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--gutter) clamp(3rem,7vw,5rem)}
.scambio{margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.dice{margin:0;max-width:var(--colonna)}
.dice p{font-family:var(--display);font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.44;margin:0 0 .6rem}
.dice cite{font-style:normal;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--inchiostro-soft)}
.dice cite em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.02em}

/* la risposta: rientrata, su carta più calda, col filo a sinistra */
.risp{
  margin:1rem 0 0 clamp(1.2rem,5vw,5rem);max-width:calc(var(--colonna) - 1rem);
  background:var(--carta-2);border-left:3px solid var(--legno);border-radius:0 4px 4px 0;
  padding:1rem 1.2rem .85rem;
}
.risp__t{margin:0 0 .45rem;font-size:1.02rem;color:var(--inchiostro);min-height:1.6em}
.risp__f{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--legno-scuro);font-weight:700}
.scambi__coda{max-width:var(--colonna);margin:clamp(2rem,4vw,3rem) 0 0;padding-top:1.4rem;border-top:1px solid var(--linea);color:var(--inchiostro-soft);font-size:.98rem}
.scambi__coda b{color:var(--inchiostro);font-weight:700}

/* ═══ IL BANCO ═══ */
.banco{background:var(--carta-2);padding:clamp(2.8rem,6vw,5rem) var(--gutter)}
.banco__testa{max-width:46rem;margin:0 auto clamp(1.8rem,4vw,2.8rem);text-align:center}
.banco__testa h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem);margin-bottom:.8rem}
.banco__testa p{color:var(--inchiostro-soft)}
.banco__testa b{color:var(--inchiostro);font-weight:700}
.banco__griglia{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.banco__f{margin:0}
.banco__f--larga{grid-column:1 / -1}
.shot{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;display:block;width:100%;border-radius:3px;line-height:0}
.shot img{width:100%;transition:transform .55s ease}
.shot:hover img{transform:scale(1.04)}
.banco__f .shot img{aspect-ratio:4/5;object-fit:cover}
.banco__f--larga .shot img{aspect-ratio:21/9;object-fit:cover}
.banco__f figcaption{font-size:.86rem;color:var(--inchiostro-soft);margin-top:.6rem;line-height:1.5}
.banco__f figcaption b{color:var(--inchiostro);font-weight:700}

/* ═══ SU ORDINAZIONE ═══ */
.ordini{max-width:var(--max);margin:0 auto;padding:clamp(2.8rem,6vw,5rem) var(--gutter);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.ordini__t h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem);margin-bottom:.8rem}
.ordini__t p{color:var(--inchiostro-soft)}
.ordini__t b{color:var(--inchiostro);font-weight:700}
.ordini__tel{margin:1.4rem 0 .3rem !important}
.ordini__tel a{font-family:var(--display);font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);color:var(--rosso);text-decoration:none;border-bottom:2px solid rgba(192,57,47,.3)}
.ordini__tel a:hover{border-bottom-color:var(--rosso)}
.ordini__n{font-size:.9rem}
.ordini__foto img{aspect-ratio:1/1;object-fit:cover;border-radius:3px}

/* ═══ DOVE ═══ */
.dove{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.dove__c h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem);margin-bottom:.6rem}
.dove__i{color:var(--inchiostro-soft)}
.dove__stato{font-weight:700;color:var(--legno-scuro);margin:1.2rem 0 .8rem;min-height:1.4em}
.orari{width:100%;border-collapse:collapse;font-size:.93rem;margin-bottom:1.2rem}
.orari th,.orari td{text-align:left;padding:.4rem 0;border-bottom:1px solid var(--linea);font-weight:400;color:var(--inchiostro-soft)}
.orari td{text-align:right;font-variant-numeric:tabular-nums}
.orari tr.is-today th,.orari tr.is-today td{color:var(--legno-scuro);font-weight:700}
.dove__t{margin:0 0 1.6rem}
.dove__t a{font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);color:var(--legno-scuro);text-decoration:none;border-bottom:1px solid var(--linea)}
.dove__sac{margin:0}
.dove__sac .shot img{aspect-ratio:4/3;object-fit:cover}
.dove__sac figcaption{font-size:.84rem;color:var(--inchiostro-soft);margin-top:.5rem}
.dove__m{border:1px solid var(--linea);border-radius:3px;overflow:hidden;line-height:0}
.dove__m iframe{width:100%;height:clamp(320px,46vw,520px);filter:grayscale(.3) sepia(.12)}

/* ── PIEDE ── */
.piede{background:var(--carta-2);border-top:1px solid var(--linea);padding:clamp(2rem,4vw,3rem) var(--gutter) clamp(5rem,8vw,3rem);text-align:center}
.piede__n{font-family:var(--display);font-size:1.5rem;color:var(--legno-scuro);margin-bottom:.3rem}
.piede__n em{font-style:italic;font-size:1.1rem}
.piede__d{color:var(--inchiostro-soft);font-size:.94rem}
.piede__b{font-size:.78rem;color:var(--inchiostro-soft);opacity:.75;margin:1.2rem 0 0}
.piede__b a{color:var(--legno-scuro)}

/* ── BARRA MOBILE ── */
.barra{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(251,246,236,.98);border-top:1px solid var(--linea)}
.barra a{flex:1;text-align:center;padding:.8rem .3rem;font-size:.82rem;text-decoration:none;color:var(--inchiostro)}
.barra a:first-child{color:var(--legno-scuro);font-weight:700}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:210;background:rgba(30,24,18,.94);display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:3px}
.lightbox__x{position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:var(--carta);font-size:2.2rem;line-height:1;cursor:pointer}

/* ── RESPONSIVE ── */
@media (max-width:960px){
  .nav{display:none}
  .burger{display:block}
  .barra{display:flex}
  .ordini,.dove{grid-template-columns:1fr}
  .banco__griglia{grid-template-columns:1fr 1fr}
  .testata .bottone{display:none}
}
@media (max-width:640px){
  .banco__griglia{grid-template-columns:1fr}
  .banco__f--larga .shot img{aspect-ratio:16/10}
  .risp{margin-left:1rem}
}