/* ------------------------------------------------------------------
   mauromunzi.com · foglio di stile comune
   19 agosto 2026

   Veste costruttivista. La grammatica viene da due copertine:
   «Il capitale algoritmico» (carta avorio, cuneo rosso obliquo,
   grottesco pesante maiuscolo) e «IT Verde» (cerchi concentrici,
   verde bottiglia, un solo accento caldo).

   Vincoli che questo sito si dà, e che sono il suo argomento:
   nessun carattere scaricato, nessun JavaScript, nessun tracciatore,
   nessuna chiamata a terzi. Ogni pagina sotto i 20 kB.
   ------------------------------------------------------------------ */

:root{
  --carta:      #F2E6CE;
  --carta-cupa: #E5D6B6;
  --inchiostro: #12100E;
  --rosso:      #B3170F;   /* testo e campiture con testo sopra */
  --rosso-pieno:#D01810;   /* solo decorazione */
  --verde:      #234A2F;
  --grigio:     #4A423A;

  --grottesco: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --misura: 34rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  /* la barra e' appiccicata in alto: senza questo, saltando a un'ancora il
     titolo finisce nascosto sotto la barra stessa */
  scroll-padding-top:4.5rem;
}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--grottesco);
  font-size:1.0625rem;
  line-height:1.62;
  background-image:
    radial-gradient(var(--inchiostro) 0.5px, transparent 0.6px),
    radial-gradient(var(--inchiostro) 0.5px, transparent 0.6px);
  background-size:7px 7px, 7px 7px;
  background-position:0 0, 3.5px 3.5px;
}
body::before{
  content:""; position:fixed; inset:0;
  background:var(--carta); opacity:.94; z-index:-1; pointer-events:none;
}

.salta{ position:absolute; left:-9999px; background:var(--inchiostro); color:var(--carta); padding:.6rem 1rem; font-weight:700; text-decoration:none; }
.salta:focus{ left:.5rem; top:.5rem; z-index:99; }

.foglio{ max-width:62rem; margin:0 auto; padding:0 clamp(1.1rem,4vw,3rem) 5rem; }

/* ---------------- testata e navigazione ---------------- */

.testata{ padding:clamp(1.6rem,5vw,3rem) 0 0; }
.firma{ font-size:clamp(.72rem,1.7vw,.86rem); font-weight:700; letter-spacing:.34em; text-transform:uppercase; margin:0 0 .9rem; }
.firma a{ text-decoration:none; }
.testata h1{ font-size:clamp(2.6rem,11vw,6.4rem); line-height:.86; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.riga-spessa{ border:0; height:9px; background:var(--inchiostro); margin:1.4rem 0 0; }
.riga-rossa{ border:0; height:3px; background:var(--rosso-pieno); margin:4px 0 0; width:46%; }

/* ---------------- la barra della pagina unica ----------------
   Sul sito la riga di rimandi non si leggeva come una barra: era testo in
   mezzo alla pagina. Adesso e' una fascia nera piena, appiccicata in alto,
   con il filetto rosso sotto. Si vede per quello che e' anche a chi non la
   sta cercando. */
.barra{
  position:sticky; top:0; z-index:20;
  background:var(--inchiostro);
  border-bottom:4px solid var(--rosso-pieno);
}
.barra-dentro{
  max-width:62rem; margin:0 auto;
  padding:0 clamp(1.1rem,4vw,3rem);
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0 clamp(.9rem,2.4vw,2rem);
}
.barra a{
  display:inline-block; padding:.85rem 0;
  color:var(--carta); text-decoration:none;
  font-size:clamp(.7rem,1.6vw,.82rem); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  border-bottom:4px solid transparent; margin-bottom:-4px;
}
.barra a:hover, .barra a:focus{ background:none; color:#F4A9A2; border-bottom-color:var(--carta); }
.barra a:focus-visible{ outline:3px solid var(--carta); outline-offset:-3px; }
.barra .fuori::after{ content:" \2197"; font-weight:400; letter-spacing:0; }
/* L'altra lingua e' l'unica voce della barra che cambia pagina invece di
   scorrere, quindi sta staccata in fondo e non in mezzo alle altre: spinta a
   destra dove c'e' spazio, e con un filetto che la separa. Sotto i 34rem la
   barra va a capo e il margine automatico non ha effetto, quindi resta
   semplicemente l'ultima. */
.barra .barra-lingua{
  margin-left:auto; padding-left:clamp(.9rem,2.4vw,2rem);
  border-left:1px solid rgba(240,230,209,.34);
  color:#C9C2B4;
}
.barra .barra-lingua:hover, .barra .barra-lingua:focus{ color:#F4A9A2; }
@media (max-width:34rem){
  .barra a{ padding:.6rem 0; letter-spacing:.1em; }
  .barra .barra-lingua{ margin-left:0; padding-left:0; border-left:none; }
}

/* Stacco fra una parte e l'altra del flusso.
   La parte e' il livello alto e va vista da lontano: fascia nera spessa, molta
   aria sopra, numero romano rosso. Le sezioni interne restano in cifre arabe,
   cosi' le due scale non si confondono. */
.parte + .parte{
  margin-top:clamp(5rem,12vw,9rem);
  border-top:14px solid var(--inchiostro);
  padding-top:clamp(1.6rem,4vw,2.6rem);
}
.capo{ border-bottom:3px solid var(--inchiostro); margin-bottom:clamp(2rem,5vw,3rem); }
.capo-numero{
  margin:0; font-size:clamp(1rem,2.6vw,1.3rem); font-weight:800;
  letter-spacing:.3em; color:var(--rosso); line-height:1;
}
.capo-titolo{
  font-size:clamp(2.4rem,7.5vw,4.6rem); line-height:.94; font-weight:800;
  letter-spacing:-.025em; text-transform:uppercase; margin:.5rem 0 1.2rem;
}

.navigazione{ margin:1.1rem 0 0; }
.navigazione ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 1.6rem; }
.navigazione a{
  display:inline-block; padding:.35rem 0;
  font-size:.84rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-bottom:3px solid transparent;
}
.navigazione a:hover, .navigazione a:focus{ background:none; color:var(--rosso); border-bottom-color:var(--rosso); }
.navigazione [aria-current="page"]{ border-bottom-color:var(--inchiostro); }
.navigazione .fuori::after{ content:" \2197"; font-weight:400; }

.cuneo{ display:block; width:100%; height:clamp(110px,20vw,220px); margin-top:1.2rem; }

/* ---------------- corpo ---------------- */

.occhiello{ max-width:var(--misura); margin:2.2rem 0 0; font-size:1.14rem; line-height:1.55; }
.occhiello strong{ font-weight:800; }

.sezione{ margin:clamp(3rem,7vw,5rem) 0 0; border-top:3px solid var(--inchiostro); padding-top:1.6rem; }
.sezione--grossa{ border-top-width:9px; }

.testa{ display:grid; grid-template-columns:auto 1fr; gap:0 clamp(1rem,3vw,2.2rem); align-items:start; }
.numero{ font-size:clamp(2.6rem,8vw,5rem); font-weight:800; line-height:.8; letter-spacing:-.04em; color:var(--rosso); }
.v-verde .numero{ color:var(--verde); }
.v-grigio .numero{ color:var(--grigio); }

h2{ font-size:clamp(1.5rem,4.2vw,2.6rem); line-height:1.02; font-weight:800; letter-spacing:-.015em; text-transform:uppercase; margin:.15rem 0 0; }
h3{ font-size:1.15rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin:1.8rem 0 .5rem; }

.timbro{ display:inline-block; margin-top:.85rem; padding:.28rem .7rem; border:2px solid var(--inchiostro); font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.timbro--rosso{ border-color:var(--rosso); color:var(--rosso); }
.timbro--verde{ border-color:var(--verde); color:var(--verde); }
/* il timbro che rimanda alla testata: tutto il riquadro e' il bersaglio */
.timbro a{ color:inherit; text-decoration:none; }
.timbro:has(a):hover, .timbro:has(a:focus-within){ background:var(--rosso); border-color:var(--rosso); color:var(--carta); }
.timbro--verde:has(a):hover, .timbro--verde:has(a:focus-within){ background:var(--verde); border-color:var(--verde); }
.timbro a:hover, .timbro a:focus{ background:none; color:inherit; }
.timbro a::after{ content:" \2197"; font-weight:400; }

/* elenco delle sedi */
.sedi{ list-style:none; margin:1.6rem 0 0; padding:0; max-width:var(--misura); }
.sedi li{ padding:.9rem 0; border-top:1px solid rgba(18,16,14,.28); }
.sedi li:last-child{ border-bottom:1px solid rgba(18,16,14,.28); }
.sedi .dove{ display:block; font-size:1.06rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.2rem; }
.sedi p{ margin:0; font-size:.95rem; line-height:1.5; }

/* ritratto: fotomontaggio a retino, due soli inchiostri.
   Il cuneo rosso dietro è la citazione di Lisickij che regge tutto il sito. */
/* Il ritratto sta al doppio della misura d'origine: 30rem invece di 15.
   Il testo perde la forcella fissa e prende quello che resta, altrimenti
   le due colonne insieme sfondano la larghezza del foglio. */
.bio{ display:grid; grid-template-columns:minmax(0,30rem) minmax(0,1fr); gap:clamp(1.4rem,4vw,2.6rem); align-items:start; margin-top:1.6rem; }
.bio .corpo{ max-width:none; }
/* Il cuneo rosso sta dentro la fotografia, nella parete dietro la spalla:
   quindi qui niente cuneo in CSS, altrimenti sono due rossi che litigano. */
.ritratto{ position:relative; }
.ritratto img{ display:block; width:100%; height:auto; border:3px solid var(--inchiostro); }
.ritratto figcaption{ position:relative; margin-top:.5rem; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--grigio); }
@media (max-width:64rem){ .bio{ grid-template-columns:1fr; } .ritratto{ max-width:30rem; } }

/* scheda di libro con la copertina a fianco */
.libro{ display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:clamp(1.4rem,4vw,2.6rem); align-items:start; margin-top:1.6rem; }
.copertina{ margin:0; }
.copertina img{ display:block; width:100%; height:auto; border:3px solid var(--inchiostro); }
.copertina figcaption{ margin-top:.5rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grigio); }
.libro .corpo{ margin-top:0; max-width:none; }
@media (max-width:46rem){ .libro{ grid-template-columns:1fr; } .copertina{ max-width:13rem; } }

/* filetto costruttivista fra le sezioni */
.filetto{ display:block; width:100%; height:34px; margin:2rem 0 0; }

.corpo{ max-width:var(--misura); margin-top:1.6rem; }
.corpo p{ margin:0 0 1rem; }
.corpo ol, .corpo ul{ max-width:var(--misura); padding-left:1.2rem; }
.corpo li{ margin:0 0 .7rem; }

.avvertenza{
  max-width:var(--misura); margin:1.6rem 0 0; padding:1rem 1.15rem;
  background:var(--carta-cupa); border-left:6px solid var(--rosso-pieno);
  font-size:.95rem; line-height:1.5; border-radius:0;
}
.v-verde .avvertenza{ border-left-color:var(--verde); }
.avvertenza p{ margin:0; }
.avvertenza p + p{ margin-top:.6rem; }

/* I filetti fra i riquadri li disegnava il fondo nero del contenitore, visto
   attraverso i vuoti fra le celle. Quando le voci non riempiono l'ultima riga,
   pero', quel fondo resta scoperto e diventa un rettangolo nero. Adesso il
   contenitore e' color carta e ogni cella si disegna la propria cornice:
   una cella che manca non lascia niente dietro di se'. */
.capitoli{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:0;
  background:var(--carta); border:3px solid var(--inchiostro);
  margin:2rem 0 0; list-style:none; padding:0;
}
.capitoli li{
  background:var(--carta); padding:1.1rem 1.2rem 1.3rem; margin:0; min-width:0;
  box-shadow:inset 0 0 0 1px var(--inchiostro);
}
.capitoli .cifra{ display:block; font-size:.8rem; font-weight:700; letter-spacing:.24em; color:var(--rosso); margin-bottom:.35rem; }
/* le voci sono parole lunghe e maiuscole: senza questo «LA CONTRADDIZIONE» esce dal riquadro */
.capitoli .voce{
  display:block; font-size:clamp(1.05rem,2.4vw,1.32rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.05; margin-bottom:.45rem;
  overflow-wrap:anywhere; hyphens:auto;
}
.capitoli p{ margin:0; font-size:.94rem; line-height:1.45; }

.dettagli{ margin:1.8rem 0 0; border-top:1px solid var(--inchiostro); max-width:var(--misura); }
.dettagli div{ display:flex; gap:1rem; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid rgba(18,16,14,.22); font-size:.95rem; }
.dettagli dt{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.76rem; margin:0; padding-top:.18rem; color:var(--grigio); }
.dettagli dd{ margin:0; text-align:right; }

/* scheda di uno scritto pubblicato */
.scritto{ max-width:var(--misura); margin:0 0 2.2rem; padding-top:1.2rem; border-top:1px solid rgba(18,16,14,.3); }
.scritto:first-of-type{ border-top:0; padding-top:0; }
.scritto h3{ margin-top:0; text-transform:none; font-size:1.22rem; letter-spacing:-.01em; line-height:1.2; }
.sede{ font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rosso); margin:.2rem 0 .6rem; }
.scritto p{ margin:0 0 .6rem; }

a{ color:var(--inchiostro); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover, a:focus{ background:var(--rosso); color:var(--carta); text-decoration:none; }
a:focus-visible{ outline:3px solid var(--inchiostro); outline-offset:2px; }

.pie{ margin:clamp(3rem,7vw,5rem) 0 0; border-top:3px solid var(--inchiostro); padding-top:1.2rem; font-size:.9rem; color:var(--grigio); }
.pie p{ margin:0 0 .5rem; }

@media (max-width:34rem){
  .testa{ grid-template-columns:1fr; }
  .numero{ margin-bottom:.2rem; }
  .dettagli div{ flex-direction:column; gap:.15rem; }
  .dettagli dd{ text-align:left; }
  .navigazione ul{ gap:0 1.1rem; }
}

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

@media print{
  body{ background:#fff; }
  body::before, .cuneo, .navigazione{ display:none; }
}