/* apertura.css — l'apertura «Vento» di Breaking News gamma97 (canone integrale,
   16/08/2026 sera). Il campo di filamenti (wind.js) legge --hi e --mid dalla
   RADICE: oro su blu notte (adattamento di palette al brand, dichiarato).
   Composizione Vento: testo in basso a sinistra, titolo Fraunces leggero con
   corsivo oro, striscia dati sul filo dell'apertura. Questo file carica DOPO
   podcast.css: qui l'apertura comanda. */

:root { --hi: #e8c476; --mid: #8a6f2f; }

.apertura {
  position: relative; min-height: min(92vh, 820px); overflow: hidden;
  background: #001830;
  --hi: #e8c476; --mid: #8a6f2f;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: stretch;
}
.apertura canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura-testo {
  position: relative; z-index: 2; text-align: left; align-self: flex-start;
  max-width: 980px; padding: 60px var(--gutter) clamp(30px, 5vh, 60px);
}
.occhiello {
  font: 700 12px/1 var(--narrow); letter-spacing: .34em;
  text-transform: uppercase; color: var(--hi); margin: 0 0 20px;
}
.apertura h1 {
  font-family: var(--serif); font-weight: 320;
  font-size: clamp(46px, 8.6vw, 118px); line-height: .98;
  letter-spacing: -.015em; color: #faf8f4; margin: 0 0 20px;
  text-wrap: balance;
}
.apertura h1 em { font-style: italic; color: var(--hi); }
.apertura .lede {
  font: 400 clamp(16px, 1.4vw, 19px)/1.6 var(--sans);
  color: rgba(250, 248, 244, .82); max-width: 560px; margin: 0 0 30px;
}
/* il tasto dell'apertura vive TUTTO in podcast.css — qui niente, o questo
   foglio (caricato dopo) vincerebbe a parità di specificità (20/08/2026) */
/* il tasto in rilievo e i suoi stati vivono in podcast.css (20/08/2026) */

/* l'apertura RIDOTTA delle pagine dei numeri: accompagna, non domina */
.apertura.apertura-numero { min-height: min(52vh, 540px); }
.apertura.apertura-numero h1 {
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.04;
}
.apertura.apertura-numero .lede { margin-bottom: 6px; }

/* archivio */
body.archivio main { max-width: 860px; margin: 0 auto; padding: 10px 20px 60px; }
.arch-titolo { margin: 46px 0 18px; color: var(--blu); }
.arch-vuoto { color: var(--grigio); }
.numeri-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.numeri-griglia:has(> :last-child:nth-child(odd)) > :first-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .numeri-griglia { grid-template-columns: 1fr; } }
a.num-carta { display: block; text-decoration: none; color: inherit; }
.num-carta .quando {
  font: 700 11px/1 var(--narrow); color: var(--grigio);
  text-transform: uppercase; letter-spacing: .22em;
}
.num-carta h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.14; color: var(--blu); margin: 10px 0 8px; }
.num-carta p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--grigio); }
.num-carta .lingue { display: block; margin-top: 12px; font: 700 11px/1.6 var(--narrow); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }

/* iscrizione */
.iscriviti {
  background: #fff; border: 1px solid var(--velo);
  padding: 26px 28px; margin-top: 52px; border-top: 1px solid var(--blu);
}
.iscriviti h2 { color: var(--blu); margin: 0 0 8px; }
.iscriviti form { display: grid; gap: 14px; max-width: 460px; }
.iscriviti label { font: 600 14px/1.3 var(--sans); color: var(--blu); }
.iscriviti input[type="email"] {
  font: 400 16px/1 var(--sans); padding: 12px 14px;
  border: 1px solid var(--grigio); width: 100%;
}
.iscriviti fieldset { border: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.iscriviti legend { font: 600 14px/1.3 var(--sans); color: var(--blu); margin-bottom: 6px; }
.iscriviti fieldset label { font-weight: 400; }
.consenso { font-weight: 400 !important; font-size: 13px; }
.iscriviti button {
  font: 700 14px/1 var(--narrow); letter-spacing: .2em; text-transform: uppercase;
  background: var(--blu); color: #fff; border: none; padding: 15px 28px;
  cursor: pointer; min-height: 48px; justify-self: start;
}
.iscriviti button:hover { background: #003a7a; }
.ape { position: absolute; left: -9999px; }
.esito { font: 600 13px/1.4 var(--sans); min-height: 1.4em; }
.esito.bene { color: var(--si); } .esito.male { color: var(--no); }