/* stile.css — il vestito di cyberboomer.ninja, UNO per tutta la casa.

   Fino all'08/09 questo CSS viveva in TRE copie: dentro index.html, dentro 404.html e
   come costante `CSS` nel generatore delle lezioni di allora (genera-lezione.py, tolto
   lo stesso giorno: oggi c'e' genera-tutto.py). Non erano identiche — misurato
   prima di unirle, perché un'unificazione a occhio perde pezzi:

     comune alle tre    reset · :root (stessi valori, il 404 li scriveva compatti) ·
                        body con la luce 2077 · la grana 16mm (body::after)
     quasi comune       la vignettatura (body::before): c'era in due su tre, il 404 ne
                        era senza. Da oggi ce l'ha anche lui — è la stessa luce.
                        line-height: 1.7 in due su tre, 1.6 nell'index, che se la
                        tiene in pagina.
     di pagina          .wrap (680 qui, 760 nell'index) · h1 · footer · tutto il resto

   COME SI LEGGE. Due strati, in quest'ordine:
     ① IL TRONCO — quello che ogni pagina della casa ha addosso, a mano o generata.
     ② LE SCHEDE — il vestito delle pagine GENERATE (le lezioni, l'indice del dojo, e
        i tipi che verranno). I due selettori che qui erano nudi, `h1` e `footer`,
        sono ancorati alla scheda (`header.lesson h1`, `footer.firma`) per non
        sconfinare nelle pagine scritte a mano, che hanno h1 e footer propri.

   Le pagine a mano (index, 404) lo linkano in assoluto e tengono in un <style> solo
   ciò che è loro. Il guardiano legge anche questo file: colori, lessico, movimento.

   — creato da JUDY, 2026-09-08 */

/* ══════════════════ ① IL TRONCO — ogni pagina della casa ══════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root{
  /* La voce è BLU LINK su nero — direzione JUDY (AD), DA-JUDY-ninja-blu-link.md, 08/08.
     Il blu dei collegamenti ipertestuali portato al 2077: è internet-che-fu, il posto
     da cui il Boomer parla. */
  --bg-deep:    #0C0A0C;
  --bg-surface: #161216;
  --voice:      #5C7CFF;
  --voice-soft: rgba(92,124,255,.09);
  --text-hi:    #EFE6EB;
  --text-lo:    #A89DA4;
  --line:       #3B2E36;
  --font-mono:  'Courier Prime','Courier New','Lucida Console',monospace;
  --font-body:  -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
body{
  background:var(--bg-deep); color:var(--text-hi);
  font-family:var(--font-body); line-height:1.7; min-height:100vh; overflow-x:hidden;
  /* la luce 2077 (JUDY, 05/09): riga al neon in cima e alba blu dal bordo alto. Ferma. */
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg, var(--voice) 0%, rgba(92,124,255,.35) 55%, transparent 100%) 1;
  background-image:radial-gradient(60% 38% at 50% 0%, rgba(92,124,255,.10), transparent 70%);
  background-repeat:no-repeat;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══════════════════ ② LE SCHEDE — le pagine generate ══════════════════════ */
.wrap{ max-width:680px; margin:0 auto; padding:0 1.5rem; }
.scena, ol.moves li, .fonte, ul.elenco a, .referto, .scheda-file, .ascolto{ border-radius:2px; }
.masthead{ padding:2.2rem 0 0; font-family:var(--font-mono); text-align:center; }
.masthead a{
  color:var(--text-lo); text-decoration:none; font-size:.7rem;
  letter-spacing:.28em; text-transform:uppercase;
}
.masthead a:hover, .masthead a:focus-visible{ color:var(--voice); }
header.lesson{ padding:3.2rem 0 2.4rem; text-align:center; border-bottom:1px solid var(--line); }
.serial{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--voice); margin-bottom:1rem;
}
header.lesson h1{ font-size:clamp(1.6rem,5vw,2.4rem); line-height:1.25; font-weight:600; }
.standfirst{ margin-top:1rem; color:var(--text-lo); font-size:1.02rem; }
section.beat{ padding:2.6rem 0 0; }
.beat-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--voice); margin-bottom:1.1rem;
}
.beat-label .num{ opacity:.65; margin-right:.7em; }
.prose{ color:var(--text-lo); }
.prose p + p{ margin-top:1em; }
.prose strong{ color:var(--text-hi); font-weight:600; }
.prose em{ color:var(--text-hi); }
.prose a{ color:var(--voice); text-decoration:none; border-bottom:1px solid var(--line); }
.prose a:hover, .prose a:focus-visible{ border-color:var(--voice); }
/* la scena ricostruita: un SMS, una schermata, un pulsante */
.scena{
  margin:1.4rem 0 0; background:var(--bg-surface);
  border:1px solid var(--line); border-left:3px solid var(--voice);
  padding:1.1rem 1.3rem; font-family:var(--font-mono); font-size:.9rem;
  color:var(--text-hi); line-height:1.6;
}
.scena .from{
  display:block; font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-lo); margin-bottom:.5rem;
}
.scena .falso{ text-decoration:underline; }
ol.moves{ list-style:none; counter-reset:mossa; margin-top:1.4rem; }
ol.moves li{
  counter-increment:mossa; position:relative;
  background:var(--bg-surface); border:1px solid var(--line);
  padding:1.1rem 1.3rem 1.1rem 3.7rem; margin-bottom:.8rem; color:var(--text-lo);
}
ol.moves li::before{
  content:counter(mossa); position:absolute; left:1.1rem; top:.85rem;
  font-family:var(--font-mono); font-weight:700; font-size:1.8rem; color:var(--voice);
}
ol.moves li strong{ color:var(--text-hi); }
ol.moves li a{ color:var(--voice); text-decoration:none; border-bottom:1px solid var(--line); }
ol.moves li a:hover, ol.moves li a:focus-visible{ border-color:var(--voice); }
.proverbio{
  margin:3rem 0 0; padding:2rem 1.6rem; text-align:center; position:relative;
  border-top:1px solid var(--voice); border-bottom:1px solid var(--voice);
  background:var(--voice-soft);
}
.proverbio::before{
  content:'«'; position:absolute; top:.2rem; left:50%; transform:translateX(-50%);
  font-size:4rem; line-height:1; color:var(--voice); opacity:.18; font-style:normal;
}
.proverbio .q{
  position:relative; font-size:clamp(1.15rem,3.4vw,1.5rem); line-height:1.5; font-style:italic;
}
.proverbio .who{
  margin-top:1rem; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--text-lo);
}
/* la fonte: senza questa non si pubblica */
.fonte{
  margin:2.6rem 0 0; border:1px solid var(--line); background:var(--bg-surface);
  padding:1.2rem 1.3rem;
}
.fonte .et{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--voice); display:block; margin-bottom:.6rem;
}
.fonte a{ color:var(--text-hi); text-decoration:none; border-bottom:1px solid var(--voice); }
.fonte a:hover, .fonte a:focus-visible{ color:var(--voice); }
.fonte .chi{ display:block; margin-top:.5rem; font-size:.85rem; color:var(--text-lo); }
.share{ margin-top:1.6rem; text-align:center; font-family:var(--font-mono); font-size:.8rem; }
.share a{ color:var(--voice); text-decoration:none; border-bottom:1px solid var(--line); }
.share a:hover, .share a:focus-visible{ border-color:var(--voice); }
footer.firma{
  margin-top:3.5rem; border-top:1px solid var(--line);
  padding:2.2rem 1.5rem 3rem; text-align:center;
  font-family:var(--font-mono); color:var(--text-lo); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
}
footer.firma a{ color:var(--voice); text-decoration:none; }
footer.firma a:hover, footer.firma a:focus-visible{ border-bottom:1px solid var(--voice); }

/* l'indice del dojo */
.intro{ padding:2.6rem 0 0; }
.intro .prose{ color:var(--text-lo); }
/* la ricerca: un campo solo, e compare solo se c'e' JavaScript a farlo funzionare */
.cerca{ margin:2rem 0 0; }
.cerca label{
  display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--voice); margin-bottom:.5rem;
}
.cerca input{
  width:100%; appearance:none; -webkit-appearance:none; border-radius:0;
  background:var(--bg-surface); border:1px solid var(--line); color:var(--text-hi);
  font:inherit; font-size:1rem; padding:.8rem 1rem;
}
.cerca input::placeholder{ color:var(--text-lo); opacity:.7; }
.cerca input:focus{ outline:none; border-color:var(--voice); }
.cerca .esito{ margin-top:.8rem; color:var(--text-lo); font-size:.92rem; }
.cerca button{
  font:inherit; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--voice); background:none; border:1px solid var(--line);
  padding:.4em .8em; cursor:pointer; margin-left:.4em;
}
.cerca button:hover, .cerca button:focus-visible{ border-color:var(--voice); }
/* l'elenco delle schede: lo usano il dojo (ul.lezioni.elenco) e ogni indice che verra' */
ul.elenco{ list-style:none; margin:2rem 0 0; }
ul.elenco li{ margin-bottom:1rem; }
ul.elenco a{
  display:block; text-decoration:none; color:inherit;
  background:var(--bg-surface); border:1px solid var(--line);
  padding:1.3rem 1.4rem; transition:border-color .25s, background .25s, transform .25s;
}
ul.elenco a:hover, ul.elenco a:focus-visible{
  border-color:var(--voice); background:var(--voice-soft); transform:translateY(-2px);
}
ul.elenco .n{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--voice); display:block; margin-bottom:.45rem;
}
ul.elenco .t{ font-size:1.12rem; color:var(--text-hi); display:block; margin-bottom:.4rem; }
ul.elenco .d{ font-size:.92rem; color:var(--text-lo); line-height:1.55; display:block; }
ul.elenco .f{
  display:block; margin-top:.8rem; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-lo);
}
@media (prefers-reduced-motion: reduce){
  ul.elenco a{ transition:none; }
  ul.elenco a:hover, ul.elenco a:focus-visible{ transform:none; }
}

/* reveal allo scroll: le battute della lezione entrano una alla volta */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* il verdetto: un referto, e deve sembrare una macchina che ha misurato */
.referto{
  margin:2.4rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.4rem;
  align-items:baseline; background:var(--bg-surface); border:1px solid var(--line);
  padding:1.3rem 1.5rem;
}
.referto .punteggio{
  grid-row:1 / span 2; font-family:var(--font-mono); font-weight:700;
  font-size:clamp(2.6rem,9vw,4rem); line-height:1; color:var(--voice);
}
.referto .punteggio small{ font-size:.32em; font-weight:400; color:var(--text-lo); margin-left:.15em; }
.referto .etichetta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--text-hi);
}
.referto .oggetto{ font-size:.95rem; color:var(--text-lo); line-height:1.5; }
ul.segnali{ list-style:none; margin-top:.2rem; }
ul.segnali li{
  position:relative; padding:.55rem 0 .55rem 1.7rem; border-bottom:1px dashed var(--line);
  color:var(--text-lo); line-height:1.55;
}
ul.segnali li::before{
  position:absolute; left:0; top:.5rem; font-family:var(--font-mono); font-weight:700;
  font-size:1.05rem; color:var(--voice);
}
ul.segnali.pro li::before{ content:'+'; }
ul.segnali.contro li::before{ content:'−'; }
ul.crono{ list-style:none; margin-top:.2rem; }
ul.crono li{ padding:.45rem 0; border-bottom:1px dashed var(--line); color:var(--text-lo); line-height:1.55; }
ul.crono time{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--voice);
  margin-right:.8em; white-space:nowrap;
}
.fonte ul.fonti{ list-style:none; }
.fonte ul.fonti li + li{ margin-top:.7rem; }
.nota{
  margin:1.6rem 0 0; font-family:var(--font-mono); font-size:.8rem; line-height:1.6;
  color:var(--text-lo); border-left:2px solid var(--voice); padding-left:1rem;
}
.riletto{ margin:2rem 0 0; font-size:.88rem; color:var(--text-lo); line-height:1.6; }

/* la dispensa: una scheda davanti al PDF, il peso prima del clic. E l'ascolto: il
   lettore non parte da solo, la trascrizione sta sotto. Stesso riquadro della fonte. */
.scheda-file, .ascolto{
  margin:2.4rem 0 0; border:1px solid var(--line); background:var(--bg-surface);
  padding:1.2rem 1.3rem;
}
.scheda-file .et, .ascolto .et{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--voice); display:block; margin-bottom:.6rem;
}
.scheda-file a{
  display:inline-block; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-hi); text-decoration:none;
  border:1px solid var(--voice); padding:.7em 1.1em;
}
.scheda-file a:hover, .scheda-file a:focus-visible{ background:var(--voice-soft); color:var(--voice); }
.scheda-file .chi, .ascolto .chi{ display:block; margin-top:.7rem; font-size:.85rem; color:var(--text-lo); }
.ascolto audio{ display:block; width:100%; margin-top:.2rem; }
.ascolto audio a{ color:var(--voice); }
.trascrizione p + p{ margin-top:1em; }