/* ============================================================
   fortunacriminale.it — foglio di stile unico
   Palette e tipografia: avorio / inchiostro / terracotta
   ============================================================ */

:root{
  --avorio:      #F4F1E9;
  --avorio-alt:  #EDE8DD;
  --carta:       #FBFAF6;
  --inchiostro:  #17140F;
  --terracotta:  #CB611A;
  --terracotta-scuro: #A94D12;

  --testo:   rgba(23,20,15,.88);
  --tenue:   rgba(23,20,15,.56);
  --debole:  rgba(23,20,15,.38);
  --riga:    rgba(23,20,15,.14);
  --riga-tenue: rgba(23,20,15,.08);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* titoli: stessa famiglia, asse di larghezza stretto */
  --display: "Archivo", "Archivo Narrow", "Helvetica Neue Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max:    76rem;
  --max-testo: 38rem;

  --t: 240ms cubic-bezier(.2,.6,.2,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--avorio);
  color:var(--testo);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--terracotta); color:var(--carta); }

:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; border-radius:2px; }

.contenitore{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.stretto{ max-width:var(--max-testo); }

.salta{ position:absolute; left:-9999px; }
.salta:focus{ left:var(--gutter); top:.6rem; z-index:100; background:var(--inchiostro); color:var(--carta);
  padding:.5rem .9rem; border-radius:2px; font-size:.8rem; }

/* ---------- Testata ---------- */

.testata{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--avorio) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--riga-tenue);
}
.testata__riga{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:4.25rem;
}
.marchio{
  font-family:var(--sans); font-weight:600; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta); text-decoration:none; white-space:nowrap;
}
.marchio span{ color:var(--inchiostro); }

.nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); }
.nav a{
  font-size:.78rem; letter-spacing:.085em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:var(--tenue); padding-block:.35rem;
  border-bottom:1px solid transparent; transition:color var(--t), border-color var(--t);
}
.nav a:hover{ color:var(--inchiostro); }
.nav a[aria-current="page"]{ color:var(--inchiostro); border-bottom-color:var(--terracotta); }

.menu-btn{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  color:var(--inchiostro);
}
.menu-btn svg{ display:block; }

@media (max-width:34rem){ .marchio span{ display:none; } }

@media (max-width:56rem){
  .menu-btn{ display:block; }
  .nav{
    position:fixed; inset:4.25rem 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--avorio); border-bottom:1px solid var(--riga);
    padding:.5rem var(--gutter) 1.75rem;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--t), transform var(--t), visibility var(--t);
    box-shadow:0 24px 40px -28px rgba(23,20,15,.35);
  }
  .nav[data-aperto="true"]{ transform:none; opacity:1; visibility:visible; }
  .nav a{ width:100%; font-size:1rem; letter-spacing:.02em; text-transform:none;
    padding-block:.85rem; border-bottom:1px solid var(--riga-tenue); color:var(--inchiostro); }
  .nav a[aria-current="page"]{ color:var(--terracotta); border-bottom-color:var(--riga-tenue); }
}

/* ---------- Tipografia ---------- */

h1,h2,h3{ margin:0; font-weight:400; text-wrap:balance; }

.titolone{
  font-family:var(--display); font-weight:800; font-stretch:80%;
  font-size:clamp(3rem, 1.2rem + 7.4vw, 7rem);
  line-height:.88; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--inchiostro);
}
.titolone em{ font-style:normal; color:var(--terracotta); }

.titolo-pagina{
  font-family:var(--display); font-weight:700; font-stretch:82%;
  font-size:clamp(2.2rem, 1.2rem + 4vw, 4rem);
  line-height:.98; letter-spacing:-.015em; text-transform:uppercase;
  color:var(--inchiostro);
}

.titolo-pagina--frase{ text-transform:none; font-stretch:90%; font-weight:600;
  font-size:clamp(1.9rem,1.2rem + 2.8vw,3rem); line-height:1.12; }

.occhiello{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta); margin:0 0 1.1rem;
}
.occhiello--tenue{ color:var(--debole); }

.sommario{
  font-size:clamp(1.1rem, 1rem + .5vw, 1.3rem);
  font-weight:400; line-height:1.55; color:var(--inchiostro); margin:0;
}

.corpo p{ margin:0 0 1.15em; }
.corpo p:last-child{ margin-bottom:0; }
.corpo a{ color:var(--terracotta); text-decoration-thickness:1px; text-underline-offset:.18em; }
.corpo a:hover{ color:var(--terracotta-scuro); }

.tagline{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1.05rem,.95rem + .6vw,1.4rem);
  line-height:1.32; letter-spacing:-.005em; text-transform:uppercase;
  color:var(--inchiostro); margin:0 0 1.6rem;
}

/* ---------- Bottoni e link freccia ---------- */

.azioni{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.5rem; border-radius:999px;
  background:var(--terracotta); color:var(--carta);
  border:1px solid var(--terracotta);
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.btn:hover{ background:var(--terracotta-scuro); border-color:var(--terracotta-scuro); transform:translateY(-1px); }
.btn--fantasma{ background:transparent; color:var(--inchiostro); border-color:var(--riga); }
.btn--fantasma:hover{ background:transparent; border-color:var(--inchiostro); color:var(--inchiostro); }

.freccia{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.82rem; font-weight:500; letter-spacing:.04em;
  color:var(--terracotta); text-decoration:none;
}
.freccia::after{ content:"→"; transition:transform var(--t); }
.freccia:hover::after{ transform:translateX(3px); }
.freccia--tenue{ color:var(--tenue); }
.freccia--tenue:hover{ color:var(--inchiostro); }

/* ---------- Sezioni ---------- */

.sezione{ padding-block:clamp(3.5rem, 8vw, 7rem); }
.sezione--filo{ border-top:1px solid var(--riga-tenue); }
.sezione--alt{ background:var(--avorio-alt); }
.sezione__testa{ margin-bottom:clamp(2rem,4vw,3rem); }

/* ---------- Hero ---------- */

.hero{ padding-block:clamp(3rem,7vw,6.5rem) clamp(3rem,7vw,6rem); }
.hero__griglia{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;
}
.hero__griglia--alto{ align-items:start; }
@media (max-width:56rem){ .hero__griglia{ grid-template-columns:1fr; } }

.copertina{
  position:relative; max-width:24rem; width:100%; margin-inline:auto;
  filter:drop-shadow(0 28px 40px rgba(23,20,15,.22)) drop-shadow(0 4px 10px rgba(23,20,15,.10));
}
@media (max-width:56rem){ .copertina{ max-width:15rem; margin-inline:0; } }

.hero__meta{
  margin:1.9rem 0 0; padding-top:1.4rem; border-top:1px solid var(--riga-tenue);
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:.78rem; letter-spacing:.05em; color:var(--tenue);
}
.hero__meta b{ font-weight:600; color:var(--inchiostro); }

/* ---------- Citazioni stampa ---------- */

.citazioni{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:56rem){ .citazioni{ grid-template-columns:1fr; } }

.citazione{ border-top:2px solid var(--inchiostro); padding-top:1.1rem;
  display:flex; flex-direction:column; }
.citazione blockquote{ flex:1 1 auto; }
.citazione blockquote{
  margin:0 0 1rem; font-size:1.05rem; line-height:1.5; color:var(--inchiostro);
}
.citazione cite{
  font-style:normal; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta);
}

/* ---------- Rassegna stampa ---------- */

.rassegna{ display:grid; gap:0; }
.articolo{
  display:grid; gap:clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--riga-tenue);
}
.articolo:first-child{ border-top:0; padding-top:0; }
.articolo--pieno{ grid-template-columns:1fr; }
.articolo--pieno .articolo__figura{ display:none; }
@media (max-width:46rem){ .articolo{ grid-template-columns:1fr; } }

.articolo__figura{ margin:0; }
.articolo__figura img{
  width:auto; max-width:100%; max-height:22rem;
  background:var(--carta); border:1px solid var(--riga-tenue);
}
@media (max-width:46rem){ .articolo__figura img{ max-height:18rem; } }
.articolo__fonte{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .7rem; margin-bottom:.7rem;
}
.articolo__testata{
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--terracotta);
}
.articolo__data{ font-size:.74rem; letter-spacing:.06em; color:var(--debole); }
.articolo__titolo{
  font-family:var(--display); font-weight:600; font-stretch:92%;
  font-size:clamp(1.25rem,1.1rem + .65vw,1.6rem);
  line-height:1.2; letter-spacing:-.01em; color:var(--inchiostro); margin:0 0 .3rem;
}
.articolo__firma{ font-size:.82rem; color:var(--tenue); margin:0 0 1rem; }
.articolo__estratto{
  font-size:1rem; line-height:1.6; color:var(--testo); margin:0 0 1.1rem;
}
.articolo__nota{ font-size:.72rem; color:var(--debole); letter-spacing:.04em; }

/* ---------- Eventi ---------- */

.eventi{ display:grid; gap:0; }
.evento{
  display:grid; gap:clamp(1rem,3vw,2.5rem);
  grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--riga-tenue);
}
.evento:first-child{ border-top:0; padding-top:0; }
@media (max-width:46rem){ .evento{ grid-template-columns:1fr; gap:.6rem; } }

.evento__quando{
  font-size:.78rem; letter-spacing:.06em; color:var(--debole); padding-top:.35rem;
}
.evento__quando b{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--terracotta); margin-bottom:.25rem; }
.evento__luogo{
  font-family:var(--display); font-weight:600; font-stretch:92%;
  font-size:clamp(1.2rem,1.1rem + .55vw,1.5rem); letter-spacing:-.01em;
  line-height:1.2; color:var(--inchiostro); margin:0 0 .45rem;
}
.evento__luogo a{ text-decoration:none; box-shadow:inset 0 -1px var(--riga);
  transition:color var(--t), box-shadow var(--t); }
.evento__luogo a:hover{ color:var(--terracotta); box-shadow:inset 0 -1px var(--terracotta); }
.evento__dove{ font-size:.92rem; color:var(--tenue); margin:0; }
.evento__dove a{ color:var(--terracotta); text-underline-offset:.18em; }
.evento__media{ margin-top:1.25rem; }
.evento__foto{ margin:1.25rem 0 0; max-width:34rem; }
.evento__foto img{ width:auto; max-width:100%; max-height:30rem; border:1px solid var(--riga-tenue); }

/* ---------- Video (facciata senza cookie) ---------- */

.video{
  position:relative; aspect-ratio:16/9; max-width:34rem; width:100%;
  border:0; padding:0; margin:0; cursor:pointer; overflow:hidden;
  background:var(--inchiostro); display:block;
}
.video img{ width:100%; height:100%; object-fit:cover; opacity:.82; transition:opacity var(--t), transform var(--t); }
.video:hover img{ opacity:1; transform:scale(1.02); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__play{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.video__play span{
  width:4rem; height:4rem; border-radius:50%; background:rgba(203,97,26,.94);
  display:grid; place-items:center; transition:transform var(--t);
}
.video:hover .video__play span{ transform:scale(1.08); }
.video__play svg{ margin-left:3px; }
.video__nota{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .75rem;
  font-size:.68rem; letter-spacing:.04em; color:rgba(251,250,246,.8);
  background:linear-gradient(transparent, rgba(23,20,15,.75)); text-align:left; pointer-events:none;
}


/* ---------- Rail recensioni dei lettori ---------- */

.rail{ position:relative; }
.rail__testa{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.rail__frecce{ display:flex; gap:.5rem; flex:0 0 auto; }
.rail__freccia{
  width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--inchiostro);
  background:transparent; border:1px solid var(--riga);
  transition:border-color var(--t), color var(--t), opacity var(--t);
}
.rail__freccia:hover:not(:disabled){ border-color:var(--inchiostro); }
.rail__freccia:disabled{ opacity:.28; cursor:default; }
@media (hover:none){ .rail__frecce{ display:none; } }

.rail__pista{
  display:flex; gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scroll-padding-inline:var(--gutter);   /* lo snap rispetta il margine laterale */
  margin-inline:calc(-1 * var(--gutter));
  padding:.25rem var(--gutter) 1.25rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rail__pista::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion:reduce){ .rail__pista{ scroll-behavior:auto; } }

.recensione{
  flex:0 0 clamp(16.5rem, 72vw, 21rem);
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--carta); border:1px solid var(--riga-tenue);
  padding:clamp(1.25rem,2.5vw,1.75rem);
}
.recensione__voto{ display:flex; gap:.15rem; margin-bottom:.9rem; color:var(--terracotta); }
.recensione__voto svg{ display:block; }
.recensione__titolo{
  font-family:var(--display); font-weight:600; font-stretch:92%;
  font-size:1.05rem; line-height:1.25; letter-spacing:-.005em;
  color:var(--inchiostro); margin:0 0 .55rem;
}
.recensione__testo{ font-size:.95rem; line-height:1.6; margin:0 0 1.25rem; }
.recensione__firma{
  margin:auto 0 0; padding-top:1rem; border-top:1px solid var(--riga-tenue);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--debole);
}
.recensione__firma b{ font-weight:600; color:var(--tenue); }

/* ---------- Ritratto ---------- */

.ritratto{ margin:clamp(2rem,4vw,3rem) 0 0; max-width:22rem; }
.ritratto img{ width:100%; border:1px solid var(--riga-tenue); }
@media (max-width:56rem){ .ritratto{ max-width:17rem; margin-top:2rem; } }

/* ---------- Blocchi vari ---------- */

.pannello{
  background:var(--carta); border:1px solid var(--riga-tenue);
  padding:clamp(1.5rem,4vw,2.75rem);
}

.due-colonne{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start;
}
@media (max-width:56rem){ .due-colonne{ grid-template-columns:1fr; } }

.elenco-nudo{ list-style:none; margin:0; padding:0; }
.elenco-nudo li{ padding-block:.55rem; border-top:1px solid var(--riga-tenue); }
.elenco-nudo li:first-child{ border-top:0; }

/* ---------- Piede ---------- */

.piede{
  border-top:1px solid var(--riga); padding-block:2.5rem 3rem;
  font-size:.76rem; letter-spacing:.04em; color:var(--tenue);
}
.piede__riga{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.piede a{ color:var(--tenue); text-decoration:none; }
.piede a:hover{ color:var(--inchiostro); }
.social{ display:flex; gap:1rem; align-items:center; }
.social a{ display:grid; place-items:center; color:var(--tenue); transition:color var(--t); }
.social a:hover{ color:var(--terracotta); }
.social svg{ display:block; }
.piede__legale{ display:flex; gap:1.25rem; }

/* ---------- Utility ---------- */
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3rem; }
.centro{ text-align:center; }