/* ============================================================
   07 — MINIMALE
   Fondo quasi nero, testo quasi bianco, qualche accento.
   Niente riquadri, niente ombre, niente sfumature: la pagina e'
   una colonna di testo su un fondo unico, e le separazioni sono
   filetti da 1px.

   Questo foglio arriva per ultimo e spegne tutto il vestito
   precedente (carta, penna, cornici).
   ============================================================ */

:root{
  /* ---- i due colori ---- */
  --sfondo:      #0a0a0a;
  --sfondo-2:    #101010;   /* blocchi appena staccati          */
  --sfondo-3:    #161616;   /* passaggio del mouse              */
  --testo:       #e9e9e9;

  /* ---- la scala del grigio ---- */
  --linea:       #232323;   /* filetti                          */
  --linea-forte: #343434;

  /* ---- gli accenti ---- */
  --ocra:        #d9a441;   /* numeri di sezione, insegna       */
  --blu:         #7fa7d4;   /* collegamenti                     */
  --rosa:        #d16a5e;   /* enfasi, capolettera, distintivi  */
  --verde:       #7fb08a;   /* codice, esiti                    */

  /* ---- rimappatura dei vecchi nomi ---- */
  --inchiostro:  var(--testo);
  --inchiostro-2:#a3a3a3;
  --grigio:      #6b6b6b;
  --grigio-lieve:#4a4a4a;
  --carta:       var(--testo);
  --carta-2:     var(--sfondo-2);
  --carta-3:     var(--linea);
  --rosso:       var(--rosa);
  --rosso-vivo:  #e8837a;
  --oro:         var(--ocra);
  --viola:       #9b8bd0;

  --colonna:     720px;
  --aria:        24px;

  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;
}


/* ------------------------------------------------------------
   FONDO E TESTO
   ------------------------------------------------------------ */

.buio{ display:none; }

html{
  background:var(--sfondo);
  scrollbar-color:var(--linea-forte) var(--sfondo);
}

body{
  background:var(--sfondo);
  color:var(--testo);
  font-family:var(--serif);
  font-size:16.5px;
  line-height:1.7;
}

p{ text-align:left; margin:0 0 18px; }

::selection{ background:var(--testo); color:var(--sfondo); }
:focus-visible{ outline:2px solid var(--ocra); outline-offset:3px; }

a{
  color:var(--blu);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:visited{ color:var(--viola); }
a:hover{ color:var(--testo); }


/* ------------------------------------------------------------
   LA COLONNA
   Nessun foglio, nessuna cornice: solo la colonna centrata.
   ------------------------------------------------------------ */

.foglio{ margin:0 auto; padding-bottom:0; }
.foglio__fondo{
  background:none;
  border:0;
  box-shadow:none;
}
.foglio__contenuto{ padding:0; }
.sezione{ padding:0; }


/* ------------------------------------------------------------
   LA RIGA IN CIMA
   ------------------------------------------------------------ */

.barra-alta{
  margin:0;
  padding:18px 0 14px;
  gap:14px;
  background:none;
  border:0;
}

.lingua,
.ritorno,
.su a,
.bottone,
.webring a{
  display:inline-block;
  padding:4px 9px;
  background:none;
  border:1px solid var(--linea) !important;
  box-shadow:none;
  color:var(--inchiostro-2) !important;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:lowercase;
  text-decoration:none;
}
.lingua:hover,
.ritorno:hover,
.su a:hover,
.bottone:hover,
.webring a:hover{
  border-color:var(--linea-forte) !important;
  background:var(--sfondo-2);
  color:var(--testo) !important;
  text-decoration:none;
}
.lingua:active,
.ritorno:active,
.su a:active,
.bottone:active{ transform:none; }


/* ------------------------------------------------------------
   L'INSEGNA
   ------------------------------------------------------------ */

.testata,
.testata--solo-titolo,
.testata--pensiero{
  margin:0;
  padding:56px 0 30px;
  background:none;
  border:0 !important;
  text-align:left;
}

.logo{
  transform:none;
  font-size:clamp(30px, 7vw, 46px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--testo);
  text-shadow:none;
}
.logo .zero{ color:var(--ocra); font-style:normal; text-shadow:none; }

.testata__sotto{
  margin-top:12px;
  color:var(--grigio);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:none;
}

.titolo-pensiero{
  transform:none;
  font-size:clamp(26px, 6vw, 40px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--testo);
  text-shadow:none;
}


/* ------------------------------------------------------------
   NAVIGAZIONE
   ------------------------------------------------------------ */

.nav{
  gap:8px;
  padding:14px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--linea);
  justify-content:flex-start;
}
.nav a{
  transform:none !important;
  min-height:0;
  padding:4px 9px;
  background:none;
  border:1px solid var(--linea) !important;
  box-shadow:none;
  color:var(--inchiostro-2);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:lowercase;
}
.nav a:hover,
.nav a:focus-visible{
  background:var(--sfondo-2);
  border-color:var(--linea-forte) !important;
  color:var(--testo);
}


/* ------------------------------------------------------------
   FILETTI
   Una riga da 1px al posto di ogni decorazione.
   ------------------------------------------------------------ */

.fascia{
  height:1px;
  margin:0;
  border:0;
  background:var(--linea);
}
.tratto{
  height:1px;
  margin:38px 0;
  border:0;
  background:var(--linea);
}
.sottotratto{
  height:1px;
  margin-top:14px;
  border:0;
  background:var(--linea);
}


/* ------------------------------------------------------------
   INTESTAZIONI
   ------------------------------------------------------------ */

.intestazione{ margin:44px 0 18px; }
.intestazione__num{
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ocra);
  opacity:1;
}
.intestazione__titolo{
  font-size:clamp(19px, 4.5vw, 22px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--testo);
}
.intestazione__meta{
  padding:0;
  background:none;
  border:0;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--grigio);
}


/* ------------------------------------------------------------
   RICERCA
   ------------------------------------------------------------ */

.cerca{
  margin:0 0 26px;
  background:none;
  border:0;
  box-shadow:none;
}
.cerca__eti{
  display:block;
  margin:0 0 8px;
  padding:0;
  background:none;
  border:0;
  color:var(--grigio);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:lowercase;
}
.cerca .campo__cornice,
.campo__cornice{
  display:block;
  margin:0;
  background:var(--sfondo-2);
  border:1px solid var(--linea) !important;
  box-shadow:none;
}
.campo__cornice:focus-within{ border-color:var(--linea-forte) !important; }
.cerca input,
.campo input,
.campo textarea{
  padding:9px 11px;
  color:var(--testo);
  font-family:var(--mono);
  font-size:15px;
}
.cerca ::placeholder,
.campo ::placeholder{ color:var(--grigio); opacity:1; }
.cerca__esito{
  margin:8px 0 0;
  color:var(--verde);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:lowercase;
}


/* ------------------------------------------------------------
   IL REGISTRO
   Righe separate da un filetto, niente riquadri.
   ------------------------------------------------------------ */

.registro{
  background:none;
  border:0;
  border-top:1px solid var(--linea);
  box-shadow:none;
}
.registro li{
  padding:14px 0;
  border-bottom:1px solid var(--linea);
  background:none;
}
.registro li + li{ border-top:0; }
.registro li:hover{ background:none; }

.registro__voce a{
  color:var(--testo);
  font-family:var(--serif);
  font-size:16.5px;
  font-weight:500;
  text-decoration:none;
  border:0;
}
.registro__voce a::before{ content:none; }
.registro__voce a:hover{ color:var(--ocra); }
.registro__data,
.registro__peso{
  font-size:11px;
  letter-spacing:.04em;
  color:var(--grigio);
}
.registro__stralcio{
  margin-top:5px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--inchiostro-2);
}
.registro__altro{
  margin-top:20px;
  padding:0;
  background:none;
  border:0;
  color:var(--grigio);
  text-transform:lowercase;
  letter-spacing:.04em;
}
.registro__lingua{ color:var(--ocra); }


/* ------------------------------------------------------------
   TESTO LUNGO
   ------------------------------------------------------------ */

.pensiero{ max-width:none; }
.capolettera::first-letter{ color:var(--rosa); font-family:var(--serif); }
.sottotitolo{ color:var(--testo); font-weight:600; }
.elenco li::before{ content:"·"; color:var(--ocra); }

.pensiero code{
  padding:1px 5px;
  background:var(--sfondo-2);
  border:1px solid var(--linea);
  color:var(--verde);
}

.cancellata{ text-decoration:line-through; color:var(--grigio); }

.cerchiata,
[data-penna="cerchio"]{
  padding:0 3px;
  background:none;
  border:0;
  color:var(--rosa);
}
.cerchiata > span{ color:inherit; }
[data-penna="colature"]{ display:none; }
[data-penna="riquadro"]{ border:0; }


/* ------------------------------------------------------------
   BLOCCHI
   Al massimo un fondo appena piu' chiaro e un filetto a sinistra.
   ------------------------------------------------------------ */

.avviso,
.diario,
.guestbook,
.nota,
.webring,
.tavola,
.figura{
  background:var(--sfondo-2);
  border:1px solid var(--linea);
  box-shadow:none;
}

.avviso{ border-left:2px solid var(--ocra); }
.avviso__etichetta{
  background:none;
  color:var(--ocra);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:lowercase;
}
.avviso__corpo{ background:none; }

.citazione{
  background:none;
  border:0;
  border-left:2px solid var(--linea-forte);
  box-shadow:none;
  padding:4px 0 4px 20px;
  text-align:left;
  font-size:18px;
  color:var(--inchiostro-2);
}
.citazione cite{ color:var(--grigio); text-transform:lowercase; letter-spacing:.04em; }

.nota{ transform:none !important; }
.diario__quando{ color:var(--ocra); text-transform:lowercase; }

.nuovo{
  padding:0 4px;
  background:none;
  border:1px solid var(--rosa);
  color:var(--rosa);
  font-weight:400;
  animation:none;             /* niente lampeggio */
}

.guestbook__barra{
  background:none;
  border-bottom:1px solid var(--linea);
  color:var(--grigio);
  text-transform:lowercase;
  letter-spacing:.06em;
}


/* ------------------------------------------------------------
   IMMAGINI E TABELLE
   ------------------------------------------------------------ */

.figura{ padding:8px; }
.figura__lastra{
  background:var(--sfondo-3);
  border:0;
  color:var(--grigio);
}
.figura__lastra span{ background:none; }
.figura__lastra--foto{ background:none; }
.figura__didascalia{
  margin:8px 0 0;
  padding:0;
  background:none;
  border:0;
  color:var(--grigio);
  text-transform:lowercase;
  letter-spacing:.04em;
}
.figura--tavola .figura__didascalia span:first-child{ color:var(--inchiostro-2); }

.tabella thead th{
  background:none;
  border-bottom:1px solid var(--linea-forte);
  color:var(--grigio);
  text-transform:lowercase;
  letter-spacing:.06em;
}
.tabella th,
.tabella td{ border-bottom:1px solid var(--linea); color:var(--testo); }
.tabella tbody tr:nth-child(even){ background:none; }
.tabella caption{ color:var(--grigio); text-transform:lowercase; }


/* ------------------------------------------------------------
   CONTATORE E DISTINTIVI
   ------------------------------------------------------------ */

.contatore__cifre{
  gap:6px;
  padding:0;
  background:none;
  border:0;
}
.contatore__cifre span{
  transform:none !important;
  padding:0;
  background:none;
  color:var(--testo);
  font-family:var(--mono);
  font-size:22px;
  font-weight:400;
}
.contatore__etichetta{ color:var(--grigio); text-transform:lowercase; }

.badge{
  transform:none !important;
  border:1px solid var(--linea);
  box-shadow:none;
  text-transform:lowercase;
}
.badge--carta { background:var(--sfondo-2); color:var(--inchiostro-2); }
.badge--scura { background:var(--sfondo-3); color:var(--inchiostro-2); }
.badge--rossa { background:none; color:var(--rosa);  border-color:var(--rosa); }
.badge--oro   { background:none; color:var(--ocra);  border-color:var(--ocra); }

.webring__nome{ color:var(--grigio); letter-spacing:.06em; text-transform:lowercase; }


/* ------------------------------------------------------------
   IL PIEDE
   ------------------------------------------------------------ */

.piede{
  margin:56px 0 0;
  padding:22px 0 40px;
  border-radius:0;
  border:0;
  border-top:1px solid var(--linea);
  border-image:none;
  background:none;
  color:var(--grigio);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.9;
  letter-spacing:.03em;
  text-align:left;
}
.piede__grande{
  margin-bottom:10px;
  color:var(--inchiostro-2);
  font-family:var(--serif);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-shadow:none;
}
.piede a{ color:var(--inchiostro-2); }
.piede a:hover{ color:var(--testo); }
.piede__minuto{ opacity:.7; }

.su{ padding:26px 0 0; text-transform:lowercase; }


/* ------------------------------------------------------------
   TELEFONO
   ------------------------------------------------------------ */

@media (max-width:700px){
  .testata,
  .testata--solo-titolo,
  .testata--pensiero{ padding:36px 0 24px; }
  .intestazione{ margin:34px 0 14px; }
  .piede{ margin:40px 0 0; }
}