/* ============================================================
   «ROTATIVA» — apertura.css: la prima schermata della Home.
   Fascia bordeaux con il retino diagonale e l'alone d'inchiostro,
   griglia asimmetrica testo/ritratto, e sotto la fascia delle
   quattro caselle — che nel tema d'origine portava statistiche
   inventate e qui porta quattro affermazioni vere, senza cifre
   (decisione di Giorgio, 25/7).
   ============================================================ */

.hero{padding-block:0}
.glow{
  position:absolute;bottom:-120px;left:-80px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2.25rem,4vw,3.5rem);
  align-items:center;
  padding-block:clamp(3.5rem,6vw,6rem) clamp(3rem,5vw,4.875rem);
}
.hero-text .kicker{color:var(--ivory-soft)}
.hero-text h1{color:var(--ivory);margin-bottom:1.35rem}
.subtitle{
  font-size:1.1875rem;line-height:1.65;
  color:var(--ivory-body);
  max-width:34rem;
}

.hero-portrait .plate{aspect-ratio:4/5;border-radius:4px}

/* ---------- la fascia delle quattro caselle ---------- */
/* il padding sta sulle CASELLE, non sulla fascia: così i filetti verticali
   corrono da bordo a bordo invece di restare tre trattini a mezz'aria */
.facts-band{position:relative}
/* il filetto corre sulla gabbia, non sul bordo pagina: si allinea al testo
   e lascia alle caselle il loro respiro interno */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(246,239,233,.14)}
.fact{
  display:grid;place-items:center;
  padding-top:1.6rem;padding-bottom:1.6rem;
  padding-left:1.25rem;padding-right:1.25rem;
  text-align:center;
}
.fact + .fact{border-left:1px solid rgba(246,239,233,.14)}
.fact p{
  margin:0;
  font-family:var(--serif);font-size:1.1875rem;line-height:1.4;
  color:var(--ivory);
}

/* ===== RESPONSIVE — apertura ===== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-portrait{max-width:26rem}
  .glow{bottom:-160px;width:280px;height:280px}
}
@media (max-width:720px){
  /* mai in colonna singola: quattro righe centrate su bordeaux sono un elenco triste */
  .facts{grid-template-columns:1fr 1fr}
  .fact{padding-left:.9rem;padding-right:.9rem;padding-top:1.35rem;padding-bottom:1.35rem}
  .fact:nth-child(odd){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid rgba(246,239,233,.14)}
}
@media (max-width:560px){
  .hero-portrait{max-width:none}
  .hero-portrait .plate{aspect-ratio:3/2}
  .fact p{font-size:1.0625rem}
}