/* =========================================================
   MOLTO MARKETING PER NULLA
   Sistema visivo allineato a mkmw.boutique:
   bianco, un solo carattere, testo piccolo, nessuna decorazione.
   Una sola immagine in tutto il sito: la hero della homepage.
   ========================================================= */

/* ---------- 0. Carattere (ospitato sul tuo server) ---------- */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/inter-normal.woff2") format("woff2-variations");
}
@font-face{
  font-family:"Inter"; font-style:italic; font-weight:400 600; font-display:swap;
  src:url("fonts/inter-italic.woff2") format("woff2-variations");
}

/* ---------- 1. Token ---------- */
:root{
  --bianco:      #ffffff;
  --inchiostro:  #333a43;
  --nero:        #14181d;
  --grigio:      #9b9b9b;
  --linea:       #e9e9e9;
  --tenue:       #fbfbfb;

  --ui:"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max: 1320px;
  --gutter: clamp(22px, 6vw, 90px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bianco);
  color:var(--inchiostro);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gutter); }

/* ---------- 3. Testata ---------- */
.testata{
  padding:clamp(30px, 4.5vw, 54px) var(--gutter) clamp(26px, 3.5vw, 44px);
  text-align:center;
}
.testata .logo{ display:inline-block; }
.testata .logo img{
  /* mobile: il logo è quasi quadrato, quindi serve altezza vera per leggerlo
     (circa 112 px a 375 px di schermo, fino a 162 px come su desktop) */
  height:clamp(104px, 30vw, 162px);
  width:auto;
  max-width:100%;
  margin-inline:auto;
}
/* su desktop il logo è tre volte più grande */
@media (min-width:900px){
  .testata .logo img{ height:162px; }
}
.testata .sigla{
  margin:.9em 0 0;
  font-size:13px;
  color:var(--grigio);
  letter-spacing:-.005em;
}

/* ---------- 4. Hero (solo homepage) ---------- */
.hero{
  margin-inline:auto;
  margin-block:0 clamp(40px, 5vw, 70px);
}
.hero .telaio{
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--tenue);
}
@media (max-width:700px){ .hero .telaio{ aspect-ratio:4/3; } }
.hero .sfondo{ height:116%; margin-top:-8%; will-change:transform; }
.hero .sfondo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 5. Da dove nasce ---------- */
.origine{ padding-block:0; }
.origine .griglia-due{ padding-bottom:clamp(52px, 7vw, 96px); border-bottom:1px solid var(--linea); }
.origine .griglia-due{
  display:grid;
  gap:clamp(24px, 3vw, 56px);
}
@media (min-width:900px){
  .origine .griglia-due{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,5vw,90px); }
}
.origine h1{
  margin:0;
  font-size:clamp(24px, 1.9vw + 16px, 36px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.022em;
  color:var(--nero);
  max-width:18ch;
}
.origine .testo p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  max-width:60ch;
}
.origine .testo p + p{ margin-top:1.15em; }
.origine .testo strong{ font-weight:500; color:var(--nero); }
.origine .testo a{ border-bottom:1px solid var(--linea); }
.origine .testo a:hover{ border-color:var(--nero); }

/* ---------- 6. Indice dei numeri ---------- */
.archivio{ padding-block:clamp(44px, 6vw, 84px) clamp(50px, 7vw, 100px); }

.riga-sezione{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; flex-wrap:wrap;
  margin-bottom:clamp(20px, 3vw, 32px);
  font-size:13px; color:var(--grigio);
}
.riga-sezione span:first-child{ color:var(--inchiostro); }

.indice{ border-top:1px solid var(--linea); }
.voce{ border-bottom:1px solid var(--linea); }
.voce > a{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:clamp(26px, 3vw, 38px) 0;
  transition:opacity .5s var(--ease);
}
@media (min-width:860px){
  .voce > a{
    grid-template-columns:46px minmax(0,1fr) 190px;
    gap:clamp(24px, 3vw, 46px);
    align-items:start;
  }
}
.voce .num{
  font-size:13px; color:var(--grigio); padding-top:6px;
}
.voce h2{
  margin:0;
  font-size:clamp(19px, 1vw + 15px, 26px);
  font-weight:400;
  line-height:1.26;
  letter-spacing:-.02em;
  color:var(--nero);
  max-width:26ch;
}
.voce p{
  margin:.55em 0 0;
  font-size:15px; line-height:1.7;
  max-width:64ch;
}
.voce .quando{
  font-size:13px; color:var(--grigio);
  padding-top:6px;
}
@media (min-width:860px){ .voce .quando{ text-align:right; } }
.voce .quando .sep{ margin:0 7px; }
@media (min-width:860px){
  .voce .quando .sep{ display:none; }
  .voce .quando .tema{ display:block; margin-top:3px; }
}
.voce > a:hover h2{
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
}

/* ---------- 7. Piede ---------- */
.piede{ text-align:center; }
.piede .dentro{
  border-top:1px solid var(--linea);
  padding-block:clamp(40px, 5vw, 66px);
}
.piede .firma{ font-size:15px; color:var(--inchiostro); }
.piede .firma span{
  border-bottom:1px solid var(--linea);
  padding-bottom:2px;
  transition:border-color .5s var(--ease);
}
.piede .firma:hover span{ border-color:var(--nero); }
.piede .nota{
  margin:1.3em 0 0;
  font-size:13px; color:var(--grigio);
}

/* ---------- 8. Articolo ---------- */
.testa-articolo{ padding-block:clamp(24px, 4vw, 56px) 0; margin-bottom:clamp(30px, 4vw, 52px); }
.testa-articolo .dentro{
  max-width:720px;
  margin-inline:auto;
  padding-bottom:clamp(26px, 3.5vw, 44px);
  border-bottom:1px solid var(--linea);
}
.testa-articolo .meta{
  margin:0 0 clamp(18px, 2.4vw, 28px);
  font-size:13px; color:var(--grigio);
}
.testa-articolo .meta .sep{ margin:0 8px; }
h1.titolo{
  margin:0 0 .5em;
  max-width:none;
  font-size:clamp(28px, 2.6vw + 16px, 46px);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.026em;
  color:var(--nero);
  max-width:20ch;
}
.sottotitolo{
  margin:0;
  max-width:62ch;
  font-size:clamp(16px, .4vw + 15px, 18px);
  line-height:1.65;
  color:var(--inchiostro);
}

.corpo{
  max-width:calc(720px + var(--gutter) * 2);
  margin-inline:auto;
  padding-bottom:clamp(46px, 6vw, 84px);
}
.corpo > *{ max-width:none; }
.corpo p{
  margin:0 0 1.5em;
  font-size:17px; line-height:1.78;
}
.corpo h2{
  margin:2.6em 0 .9em;
  font-size:clamp(19px, .8vw + 16px, 23px);
  font-weight:500;
  line-height:1.32;
  letter-spacing:-.016em;
  color:var(--nero);
  max-width:26ch;
}
.corpo strong{ font-weight:600; color:var(--nero); }
.corpo em{ font-style:italic; }
.corpo a{ border-bottom:1px solid var(--linea); }
.corpo a:hover{ border-color:var(--nero); }

.corpo ul{ margin:0 0 1.6em; padding-left:0; list-style:none; }
.corpo ul li{
  position:relative; padding-left:22px; margin-bottom:1em;
  font-size:17px; line-height:1.72;
}
.corpo ul li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:9px; height:1px; background:var(--grigio);
}

/* riquadro "in breve" in apertura d'articolo */
.inbreve{
  margin:0 0 2.6em;
  padding-left:20px;
  border-left:1px solid var(--linea);
}
.inbreve .etichetta{
  margin:0 0 .55em;
  font-size:15px; font-weight:500; line-height:1.5;
  color:var(--nero);
}
.inbreve p{
  margin:0;
  font-size:15px; line-height:1.7;
}

blockquote.stacco{
  margin:2.4em 0; padding:0;
  max-width:34ch;
  font-size:clamp(19px, 1vw + 15px, 25px);
  font-weight:400; line-height:1.34; letter-spacing:-.018em;
  color:var(--nero);
}

.dati{
  margin:2.6em 0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding-block:clamp(22px, 3vw, 32px);
}
.dati .etichetta{
  margin:0 0 1.4em;
  font-size:13px; color:var(--grigio);
}
.dati dl{ margin:0; display:grid; gap:1.2em 28px; }
@media (min-width:620px){ .dati dl{ grid-template-columns:110px 1fr; gap:1.5em 32px; } }
.dati dt{
  font-size:clamp(22px, 1.4vw + 15px, 28px);
  font-weight:400; line-height:1.1; letter-spacing:-.03em;
  color:var(--nero);
}
.dati dd{ margin:0; font-size:15px; line-height:1.65; }

/* bibliografia */
.bibliografia{
  border-top:1px solid var(--linea);
  padding-top:clamp(34px, 4vw, 54px);
  margin-top:clamp(34px, 4vw, 54px);
  max-width:none;
}
.bibliografia h2{
  margin:0 0 1.8em;
  font-size:13px; font-weight:400; color:var(--grigio); letter-spacing:0;
  max-width:none;
}
.bibliografia ol{ margin:0; padding:0; list-style:none; counter-reset:fonte; }
.bibliografia li{
  counter-increment:fonte;
  display:grid; grid-template-columns:30px 1fr; gap:12px;
  padding:6px 0;
  font-size:15px; line-height:1.5;
}
.bibliografia li::before{
  content:counter(fonte, decimal-leading-zero);
  color:var(--grigio); font-size:13px; padding-top:2px;
}
.bibliografia a{ border-bottom:none; }
.bibliografia a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

.ritorno{ text-align:center; }
.ritorno .dentro{
  border-top:1px solid var(--linea);
  padding-block:clamp(34px, 4vw, 56px);
}
.ritorno a{
  font-size:13px; color:var(--nero);
  display:inline-flex; align-items:center; gap:8px;
}
.ritorno a::before{ content:"←"; transition:transform .5s var(--ease); }
.ritorno a:hover::before{ transform:translateX(-4px); }

/* ---------- 9. Animazioni (discrete) ---------- */
.sale{
  opacity:0; transform:translateY(14px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.sale.in{ opacity:1; transform:none; }
.parallasse{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .sale{ transform:none !important; opacity:1 !important; transition:none !important; }
  .parallasse{ transform:none !important; }
}