/* ═══════════════════════════════════════════════════════════════════════
   LE PAGINE EDITORIALI — Manifesto e Chi siamo (25 settembre 2026)

   Due fondi pieni, come una pagina di rivista: il Manifesto su un viola
   notte, Chi siamo su un lilla chiaro. La griglia è dichiarata: filetti
   che dividono il foglio, i puntini della carta, le etichette in mono.
   Titolo a sinistra, testo a destra, come un libro aperto.
   ═══════════════════════════════════════════════════════════════════════ */

body.scuro {
  --fondo: #170843; --fondo-2: #1E0B55;
  --testo: #EDE7FF; --testo-2: #BFB2EA; --testo-3: #8E7DC9;
  --filetto: rgba(214,200,255,.14); --punti: rgba(214,200,255,.10);
  --accento: #C9B6FF;
  background: var(--fondo); color: var(--testo);
}
body.lilla {
  --fondo: #F2EDFF; --fondo-2: #EAE2FF;
  --testo: #24095F; --testo-2: #4E3D86; --testo-3: #7A6AB0;
  --filetto: rgba(79,19,198,.16); --punti: rgba(79,19,198,.10);
  --accento: var(--marchio);
  background: var(--fondo); color: var(--testo);
}

/* ── La testata sul fondo scuro ──────────────────────────────────────── */
.scuro .testata { color: #fff; }
.scuro .testata .marchio { color: #fff; --marchio-nodo: #B79CFF; }
.scuro .menu a { color: var(--testo-2); }
.scuro .menu a:hover, .scuro .menu a[aria-current] { color: #fff; }
.scuro .testata.posata, .scuro.menu-aperto .testata { background: rgba(23,8,67,.84); border-bottom-color: var(--filetto); }
.scuro .apri-menu { background: transparent; border-color: var(--filetto); }
.scuro .apri-menu i { background: #fff; }
.scuro.menu-aperto .menu { background: rgba(23,8,67,.98); border-bottom-color: var(--filetto); }
.scuro.menu-aperto .menu a { color: #fff; border-bottom-color: var(--filetto); }
.lilla .testata.posata { background: rgba(242,237,255,.84); border-bottom-color: var(--filetto); }
.menu a[aria-current] { color: var(--marchio); }

/* La barra di lettura, in cima. */
.lettura { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.lettura i { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--marchio), #A855F7, #C9B6FF); }

/* ── L'impaginato ────────────────────────────────────────────────────── */
.manifesto, .chi {
  border-inline: 1px solid var(--filetto); max-width: 1440px; margin: 0 auto;
}
.dentro-m { padding: 0 clamp(18px, 5vw, 64px); }

.etichetta-m {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--testo-3);
}

.copertina-m, .copertina-c {
  position: relative; min-height: 86vh; min-height: 86svh; display: flex; align-items: center;
  padding: 140px 0 90px; border-bottom: 1px solid var(--filetto);
  background-image: radial-gradient(var(--punti) 1.1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.copertina-c { min-height: 64vh; min-height: 64svh; }
.copertina-m h1, .copertina-c h1 {
  margin-top: 26px; font-weight: 300; letter-spacing: -.035em; line-height: 1.02;
  font-size: clamp(2.6rem, 6.4vw, 5.8rem); max-width: 15ch; color: var(--testo);
}
.acceso-m {
  background: linear-gradient(100deg, #D9CCFF 5%, #A78BFA 55%, #C084FC 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acceso-c { color: var(--marchio); }
.copertina-m .occhiello {
  margin-top: 34px; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--testo-2);
}
.luogo {
  display: inline-block; margin-top: 30px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--testo-3);
}
/* Le tacche d'angolo, anche qui. */
.copertina-m::before, .copertina-m::after, .copertina-c::before, .copertina-c::after {
  content: ''; position: absolute; width: 7px; height: 20px; background: var(--accento); opacity: .45; bottom: 22px;
}
.copertina-m::before, .copertina-c::before { left: 22px; }
.copertina-m::after, .copertina-c::after { right: 22px; }

/* Una parte: titolo a sinistra, che resta mentre si legge; testo a destra. */
.parte {
  display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  border-bottom: 1px solid var(--filetto);
}
.parte-capo {
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 64px);
  border-right: 1px solid var(--filetto);
}
.parte-capo h2 {
  position: sticky; top: 110px; margin-top: 18px;
  font-weight: 300; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(2rem, 3.4vw, 3.1rem);
}
.parte-capo .etichetta-m { position: sticky; top: 90px; }
.parte-testo {
  padding: clamp(48px, 7vw, 96px) clamp(18px, 6vw, 110px) clamp(48px, 7vw, 96px) clamp(18px, 8vw, 150px);
  max-width: 820px;
}
.parte-testo p { font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.65; color: var(--testo-2); }
.parte-testo p + p { margin-top: 1.1em; }
.parte-testo p:first-child { color: var(--testo); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -.01em; }

/* ── Le tesi: si accende quella al centro dello schermo ──────────────── */
.parte-tesi { grid-template-columns: 1fr; }
.parte-tesi .parte-capo { border-right: 0; border-bottom: 1px solid var(--filetto); padding-bottom: 40px; }
.parte-tesi .parte-capo h2, .parte-tesi .parte-capo .etichetta-m { position: static; }
.tesi { list-style: none; margin: 0; padding: 0; }
.tesi li {
  display: grid; grid-template-columns: clamp(56px, 12vw, 180px) minmax(0, 1fr); align-items: baseline;
  padding: clamp(26px, 4vw, 48px) clamp(18px, 5vw, 64px); border-bottom: 1px solid var(--filetto);
  transition: opacity .6s var(--uscita), background .6s var(--uscita);
}
.tesi li:last-child { border-bottom: 0; }
.tesi .n { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--testo-3); transition: color .6s; }
.tesi p {
  font-weight: 300; letter-spacing: -.028em; line-height: 1.12; max-width: 24ch;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem); color: var(--testo);
}
.anima .tesi li { opacity: .28; }
.anima .tesi li.accesa { opacity: 1; background: rgba(201,182,255,.05); }
.tesi li.accesa .n { color: var(--accento); }

/* ── La chiusa ───────────────────────────────────────────────────────── */
.chiusa {
  padding: clamp(90px, 14vw, 180px) 0 clamp(80px, 11vw, 140px); text-align: left;
  background-image: radial-gradient(var(--punti) 1.1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.chiusa-frase {
  font-weight: 300; letter-spacing: -.035em; line-height: 1.04;
  font-size: clamp(2.3rem, 6vw, 5.4rem); max-width: 17ch;
}
.chiusa .gruppo-bottoni { margin-top: 48px; }
.bottone.chiaro-m { background: transparent; color: #fff; border-color: rgba(214,200,255,.35); }
.bottone.chiaro-m:hover { background: rgba(255,255,255,.06); border-color: rgba(214,200,255,.6); }

/* ── Le firme ────────────────────────────────────────────────────────── */
.firme { display: flex; flex-wrap: wrap; gap: 28px 64px; margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--filetto); }
.firme > div { display: grid; gap: 2px; min-width: 190px; }
.firma {
  font-family: 'Mrs Saint Delafield', cursive; font-size: clamp(44px, 5vw, 60px); line-height: 1.1;
  color: var(--accento); margin-bottom: 4px; transform: rotate(-3deg); transform-origin: left bottom;
}
.firme b { font-weight: var(--forte); font-size: 14px; color: var(--testo); }
.firme small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-3); }
.firme-m { margin-top: 64px; }

/* ── Chi siamo ───────────────────────────────────────────────────────── */
.parte-c .parte-testo p.attacco { color: var(--testo); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.parte-link { grid-template-columns: 1fr 1fr; }
.riquadro-link {
  display: grid; gap: 16px; align-content: start; padding: clamp(36px, 5vw, 64px) clamp(18px, 5vw, 64px);
  border-right: 1px solid var(--filetto); transition: background .4s var(--uscita);
}
.riquadro-link:last-child { border-right: 0; }
.riquadro-link:hover { background: var(--fondo-2); }
.riquadro-link b { font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: -.025em; line-height: 1.15; max-width: 22ch; }
.riquadro-link i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--medio); color: var(--marchio); }
.riquadro-link:hover .freccia { transform: translateX(4px); }
.riquadro-link .freccia { transition: transform .35s var(--uscita); }

/* ── Schermi stretti ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .manifesto, .chi { border-inline: 0; }
  .parte { grid-template-columns: 1fr; }
  .parte-capo { border-right: 0; padding-bottom: 0; }
  .parte-capo h2, .parte-capo .etichetta-m { position: static; }
  .parte-testo { padding: 26px 18px 56px; }
  .parte-link { grid-template-columns: 1fr; }
  .riquadro-link { border-right: 0; border-bottom: 1px solid var(--filetto); }
  .riquadro-link:last-child { border-bottom: 0; }
  .copertina-m, .copertina-c { min-height: auto; padding: 120px 0 70px; }
  .tesi li { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
  .copertina-m h1, .copertina-c h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .firme { gap: 26px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tesi li { opacity: 1 !important; }
}

/* Il piede resta chiaro anche sotto le pagine a fondo pieno. */
.piede { color: var(--inchiostro); }

/* La rete del manifesto: il «sistema nervoso» del titolo, disegnato. */
.copertina-m .dentro-m { position: relative; z-index: 1; width: 100%; }
.rete {
  position: absolute; right: clamp(-40px, 2vw, 60px); top: 50%; transform: translateY(-46%);
  width: min(46vw, 620px); height: auto; z-index: 0; pointer-events: none;
}
.rete .archi line { stroke: rgba(201,182,255,.20); stroke-width: 1; }
.rete .nodi circle { fill: rgba(201,182,255,.55); }
.rete .nodi circle.vivo { fill: #C9B6FF; animation: pulsa 3s ease-in-out infinite; animation-delay: var(--r); transform-box: fill-box; transform-origin: center; }
.rete .impulso { fill: #E9DDFF; filter: drop-shadow(0 0 6px rgba(201,182,255,.9)); }
@keyframes pulsa { 50% { transform: scale(1.8); fill: #fff; } }
@media (max-width: 900px) {
  .rete { position: relative; right: auto; top: auto; transform: none; width: min(88vw, 420px); margin: 40px auto 0; display: block; opacity: .9; }
  .copertina-m { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .rete .impulso { display: none; } }

/* Le firme, a mano: tracciati che si disegnano quando entrano in vista,
   un tratto dopo l'altro, come una penna. */
.firma-svg { display: block; height: clamp(62px, 6vw, 80px); width: auto; max-width: 100%; color: var(--accento); margin-bottom: 6px; overflow: visible; }
.firma-svg path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.anima .firma-svg path { stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.55,.1,.35,1); transition-delay: calc(var(--k) * .45s + .3s); }
.anima .rivela.vista .firma-svg path { stroke-dashoffset: 0; }
.firme > div:nth-child(2) .firma-svg path { transition-delay: calc(var(--k) * .45s + 1.9s); }