/* ============================================================
   I TOPI — il libro dei topi
   Tema unico "di carta". Font: controfigure in attesa dei woff2
   di Eames Century Modern (display) e Louize (testo).
   Per lo swap definitivo basta cambiare le due variabili qui sotto
   e aggiungere i @font-face.
   ============================================================ */
:root{
  --font-display:"Domine",Georgia,serif;        /* → Eames Century Modern */
  --font-body:"Source Serif 4",Georgia,serif;   /* → Louize */

  --panna:#f4efdd;
  --carta:#ececea;
  --charcoal:#38352f;
  --navy:#242b42;
  --ink:#2b2822;
  --ink-panna:#e9e3d2;   /* testo sui fondi scuri */
  --kraft:#c9ad7c;
  --grigio:#7a756a;

  --col:720px;           /* colonna di lettura */
  --barra:52px;          /* altezza riga prenota fissa */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--panna);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:19px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--barra);
}
::selection{background:var(--kraft);color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}

/* grana di carta, leggerissima, su tutta la pagina */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ---------- indice ---------- */
.indice{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;gap:20px;
  padding:14px 22px;
  font-family:var(--font-display);font-size:14.5px;letter-spacing:.02em;
  mix-blend-mode:multiply; /* sparisce elegantemente sui fondi scuri: vedi sotto */
}
.indice-lista{list-style:none;display:flex;gap:18px;flex-wrap:wrap}
.indice-lista a{text-decoration:none;position:relative}
.indice-lista a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right .2s ease;
}
.indice-lista a:hover::after,.indice-lista a:focus-visible::after{right:0}
.orologio{margin-left:auto;font-variant-numeric:tabular-nums}
.lingue b{font-weight:500}
.lingue span{color:var(--grigio)}
.indice-toggle{display:none}

/* su schermi stretti: bottone "indice" + overlay */
@media (max-width:820px){
  .indice{mix-blend-mode:normal;background:transparent;padding:12px 16px}
  .indice-toggle{
    display:block;font:inherit;background:var(--panna);color:var(--ink);
    border:1px solid var(--ink);padding:6px 14px;cursor:pointer;
  }
  .indice-lista{
    display:none;position:fixed;inset:0;z-index:20;
    background:var(--charcoal);color:var(--ink-panna);
    flex-direction:column;justify-content:center;align-items:center;gap:22px;
    font-size:26px;
  }
  .indice.aperto .indice-lista{display:flex}
  .orologio{display:none}
  .lingue{margin-left:auto}
}

/* ---------- capitoli ---------- */
.cap{
  min-height:88vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:96px 24px;
  position:relative;
}
.cap.corta{min-height:60vh}
.cap-panna{background:var(--panna);color:var(--ink)}
.cap-crema{background:#eae3cf;color:var(--ink)}
.cap-scuro{background:var(--charcoal);color:var(--ink-panna)}
.cap-navy{background:var(--navy);color:var(--ink-panna)}
.colonna{width:100%;max-width:var(--col)}
/* Nick² — il sous chef si chiama Nicolò anche lui */
.potenza{font-size:.34em;line-height:0;vertical-align:baseline;position:relative;top:-1.1em;margin-left:1px}

/* litania di palindromi: corsivo, l'ultimo verso dritto */
.litania{font-style:italic;line-height:1.45}
.litania .finale{font-style:normal}

/* testata "i topi": nomi a sinistra, topolini piccoli subito a destra */
.topi-testata{display:flex;align-items:flex-start;gap:32px;margin-bottom:24px}
.topi-testata .testo.grande{margin-bottom:0}
.tre-topi{width:150px;flex:none;mix-blend-mode:multiply;margin-top:-14px}
@media (max-width:760px){.topi-testata{gap:20px}.tre-topi{width:110px}}

.occhiello{
  font-family:var(--font-display);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:26px;
}
.cap-scuro .occhiello,.cap-navy .occhiello{color:var(--kraft)}
.titolone{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,7vw,84px);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:34px;text-wrap:balance;
}
.testo{max-width:34em;margin-bottom:18px}
.testo.grande{
  font-size:clamp(22px,3vw,30px);line-height:1.45;
  font-family:var(--font-display);font-weight:400;margin-bottom:24px;
}
.timbro{
  font-family:var(--font-display);color:var(--kraft);
  font-size:15px;letter-spacing:.14em;margin-bottom:10px;
  transform:rotate(-2deg);transform-origin:left;
}
.vignaioli{font-size:17px;color:inherit;opacity:.75;max-width:38em}
.nota{font-size:13.5px;color:var(--grigio);max-width:38em}
.nota-telefono{color:var(--grigio)}

.link-riga{margin-top:10px}
.link-riga a{line-height:2}
a.segnaposto{color:var(--grigio);pointer-events:none;text-decoration-style:dotted}
.cap-scuro a.segnaposto{color:#96907d}

/* link con sottolineatura che si disegna */
.testo a,.link-riga a{
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease;
}
.testo a:hover,.testo a:focus-visible,.link-riga a:hover,.link-riga a:focus-visible{background-size:100% 1px}

/* ---------- copertina ---------- */
.copertina{min-height:100vh;justify-content:center;gap:40px;text-align:center}
.logotype{width:min(78vw,900px)}
.logotype img{mix-blend-mode:multiply}
.sotto-logotype{font-size:clamp(16px,2vw,19px);line-height:1.9}

/* ---------- foto ---------- */
.dittico{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  max-width:1000px;margin:0 auto;padding:64px 24px;
  background:var(--panna);
}
.dittico .duotono{aspect-ratio:3/4}
.dittico figcaption,.rullino figcaption{
  font-style:italic;font-size:14px;color:var(--grigio);
  padding:10px 0;text-align:right;
}
/* le due foto restano affiancate anche su mobile: metà lunghezza */
@media (max-width:700px){.dittico{gap:14px;padding:40px 20px}}
/* trattamento "carta": b/n + tinta del fondo, grana preservata */
.duotono{overflow:hidden;background:var(--panna)}
.duotono img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04) sepia(.14);
  mix-blend-mode:multiply;
  will-change:transform;
}
.foto-vino{margin-top:40px;max-width:480px}
/* trattamento carta come le altre, ma il rosso del vino resta a colori:
   sotto la versione b/n, sopra la stessa foto con solo i rossi visibili */
.duotono.solo-rosso{position:relative}
/* base meno sepia qui: su questa foto la velatura calda leggeva "giallo" */
.duotono.solo-rosso img:first-child{filter:grayscale(1) contrast(1.06) brightness(1.04) sepia(.05)}
.duotono.solo-rosso img.rosso{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.35) url(#filtro-solo-rosso);
  mix-blend-mode:normal;
}
.foto-vino figcaption{font-style:italic;font-size:14px;color:#b3ac97;padding:8px 0;text-align:right}
.rullino{
  width:100%;max-width:1100px;margin-top:56px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;
}
.rullino figure:nth-child(2){margin-top:64px}
.rullino figure:nth-child(3){margin-top:24px}
.rullino .duotono{aspect-ratio:3/4}
@media (max-width:760px){
  .rullino{grid-template-columns:1fr;gap:8px;max-width:440px}
  .rullino figure:nth-child(2),.rullino figure:nth-child(3){margin-top:24px}
}

/* ---------- CTA ---------- */
.bottone{
  display:inline-block;margin-top:10px;
  font-family:var(--font-display);font-size:clamp(19px,2.4vw,24px);
  color:var(--charcoal);background:var(--panna);
  padding:16px 34px;text-decoration:none;
  border:1px solid var(--panna);
  transition:background .2s ease,color .2s ease;
}
.bottone:hover,.bottone:focus-visible{background:transparent;color:var(--panna)}

/* ---------- newsletter ---------- */
.newsletter{display:flex;gap:0;max-width:420px;margin-bottom:12px}
.newsletter input{
  flex:1;font:inherit;font-size:16px;padding:12px 14px;
  background:transparent;border:1px solid var(--ink);border-right:0;color:inherit;
}
.newsletter input::placeholder{color:var(--grigio)}
.newsletter button{
  font-family:var(--font-display);font-size:16px;cursor:pointer;
  background:var(--ink);color:var(--panna);border:1px solid var(--ink);
  padding:12px 20px;
}
.newsletter button:hover{background:var(--navy);border-color:var(--navy)}

/* ---------- footer ---------- */
footer{
  padding:72px 24px 96px;text-align:center;
  font-family:var(--font-display);font-size:16px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.footer-topo{width:110px;mix-blend-mode:multiply}
footer .fine{font-size:12.5px;letter-spacing:.08em;color:var(--grigio)}
footer a{color:inherit}

/* ---------- riga prenota fissa ---------- */
.barra-prenota{
  position:fixed;left:0;right:0;bottom:0;z-index:15;height:var(--barra);
  display:flex;align-items:center;justify-content:center;
  background:var(--charcoal);color:var(--ink-panna);
  font-family:var(--font-display);font-size:16px;letter-spacing:.04em;
  text-decoration:none;border-top:1px solid rgba(244,239,221,.15);
}
.barra-prenota:hover{background:var(--navy)}

/* ---------- reveal ---------- */
.riv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.riv.visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .riv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .duotono img{transform:none !important}
}

/* focus visibile */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;
}