/* ============================================================
   06 — PAGINE
   Quello che serve solo alle pagine generate da ./update.sh:
   l'indice con la ricerca e la pagina del singolo pensiero.
   ============================================================ */

[hidden]{ display:none !important; }


/* ------------------------------------------------------------
   INDICE — la ricerca
   ------------------------------------------------------------ */

.cerca{
  margin:26px 0 32px;
}
.cerca__eti{
  display:block;
  margin-bottom:6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grigio);
}
.cerca .campo__cornice{
  display:block;
  background:var(--carta-2);
}
.cerca input{
  display:block;
  width:100%;
  padding:12px;
  background:transparent;
  color:var(--inchiostro);
  font-family:var(--mono);
  font-size:16px;      /* sotto i 16px iOS ingrandisce la pagina da solo */
  border:0;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.cerca input::-webkit-search-cancel-button{ display:none; }
.cerca__esito{
  margin:9px 0 0;
  min-height:1.2em;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grigio);
  text-align:right;
}


/* ------------------------------------------------------------
   INDICE — l'elenco
   Riusa .registro, con in piu' una riga di assaggio sotto al
   titolo.
   ------------------------------------------------------------ */

.registro__voce a{
  font-size:18px;
  text-decoration-thickness:1px;
}
.registro__stralcio{
  display:block;
  margin-top:3px;
  font-size:14px;
  line-height:1.45;
  color:var(--inchiostro-2);
}
.registro li{ align-items:flex-start; }
.registro__data,
.registro__peso{ padding-top:5px; }


/* ------------------------------------------------------------
   INDICE — la testata
   Senza sottotitolo il titolo galleggerebbe in alto nel suo
   riquadro: piu' aria sopra che sotto lo rimette in mezzo.
   ------------------------------------------------------------ */

.testata--solo-titolo{
  padding-top:clamp(48px, 12vw, 84px);
  padding-bottom:clamp(30px, 7vw, 50px);
}


/* ------------------------------------------------------------
   LA BARRA IN ALTO
   A sinistra il ritorno all'indice, a destra il cambio lingua.
   Sull'indice il ritorno non c'e' e resta solo la lingua, a
   destra lo stesso: cosi' il tasto sta sempre nello stesso
   posto in tutte le pagine del sito.
   ------------------------------------------------------------ */

.barra-alta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 14px 0;
}
.barra-alta--sola{ justify-content:flex-end; }

.ritorno{
  display:inline-block;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.ritorno:hover{ text-decoration:underline; }

/* il tasto dice il nome della lingua in cui si va, scritto in
   quella lingua: chi non capisce questa pagina deve comunque
   capire il tasto */
.lingua{
  flex:none;
  padding:9px 13px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--inchiostro);
  white-space:nowrap;
}
.lingua:hover,
.lingua:focus-visible{ color:var(--rosso); }

/* nell'elenco: questa voce in questa lingua non c'e', si va
   in quella in cui esiste */
.registro__lingua{
  margin-left:7px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--rosso);
  vertical-align:2px;
}
.registro__lingua::before{ content:"["; }
.registro__lingua::after { content:"]"; }

.testata--pensiero{
  margin:8px 14px 0;
  padding:clamp(26px, 6vw, 44px) clamp(16px, 5vw, 40px) clamp(22px, 5vw, 34px);
}
.titolo-pensiero{
  margin:0;
  font-size:clamp(29px, 8vw, 56px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.025em;
  transform:rotate(-.5deg);
  text-shadow:1px 2px 0 var(--carta-3);
}


/* ------------------------------------------------------------
   PENSIERO — la colonna di lettura
   La carta resta larga, il testo no: oltre i 70-75 caratteri per
   riga l'occhio fatica a ritrovare l'inizio della riga dopo.
   Le tavole invece restano larghe quanto il foglio.
   ------------------------------------------------------------ */

.pensiero{
  max-width:38rem;
  margin:0 auto;
}
.pensiero > p:first-child{ margin-top:6px; }

.sottotitolo{
  margin:32px 0 10px;
  font-size:19px;
  font-weight:700;
  letter-spacing:.01em;
}

.elenco{
  margin:0 0 18px;
  padding-left:1.1em;
  list-style:none;
}
.elenco li{
  position:relative;
  margin-bottom:7px;
}
.elenco li::before{
  content:"—";
  position:absolute;
  left:-1.1em;
  color:var(--rosso);
}

.pensiero code{
  padding:1px 5px;
  background:var(--carta-2);
  font-family:var(--mono);
  font-size:.86em;
}

/* la prima intestazione non deve staccarsi dal titolo della pagina */
.pensiero > .intestazione:first-child{ margin-top:26px; }


/* ------------------------------------------------------------
   TAVOLE — le immagini in fondo
   Cornice a penna attorno, immagine al centro, nome del file in
   basso a sinistra.
   ------------------------------------------------------------ */

.tavole{
  margin:52px 0 10px;
  display:grid;
  gap:34px;
}
.figura--tavola{
  padding:12px;
}
.figura__lastra--foto{
  aspect-ratio:auto;
  display:block;
  padding:0;
  background:transparent;
}
.figura__lastra--foto img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
}
.figura--tavola .figura__didascalia{
  margin-top:12px;
}
.figura--tavola .figura__didascalia span:first-child{
  color:var(--inchiostro-2);
  letter-spacing:.08em;
}


/* ------------------------------------------------------------
   In fondo alla pagina di un pensiero
   ------------------------------------------------------------ */

.su a + a{ margin-left:6px; }

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

@media (max-width:700px){
  .tavole{ margin-top:40px; gap:26px; }
  .figura--tavola{ padding:8px; }

  /* l'elenco dell'indice e' la cosa che si tocca di piu' di tutto
     il sito: il titolo da solo faceva un bersaglio da 26px */
  .registro__voce a{
    display:inline-block;
    padding:8px 0;
    font-size:17px;
  }
  .registro__stralcio{ font-size:14.5px; margin-top:1px; }
  .registro__data,
  .registro__peso{ padding-top:12px; }

  .cerca{ margin:20px 0 26px; }
  .cerca__eti,
  .cerca__esito{ font-size:11.5px; }

  .barra-alta{ margin:8px 6px 0; }
  .ritorno{ font-size:11.5px; padding:10px 8px; }
  .lingua{ font-size:11.5px; padding:9px 11px; }
  .registro__lingua{ font-size:11px; }
  .testata--pensiero{ margin:6px 8px 0; }
  .testata--solo-titolo{ padding-top:clamp(40px, 11vw, 84px); }

  .sottotitolo{ font-size:18px; margin:28px 0 8px; }
  .elenco{ padding-left:1em; }
}


/* ------------------------------------------------------------
   CHI SONO
   Foto quadrata a sinistra, il testo le gira attorno e poi
   continua sotto. Stretto: la foto sta sopra, a tutta riga.
   ------------------------------------------------------------ */

/* .sezione.chi: 07 azzera il padding di .sezione */
.sezione.chi{ padding-top:clamp(28px, 5vw, 44px); }
.chi::after{ content:""; display:block; clear:both; }
/* .chi davanti per vincere su .figura di 07: una cornice sola */
.chi .chi__foto{
  float:left;
  width:min(40%, 280px);
  margin:4px clamp(22px, 4vw, 36px) 16px 0;
  padding:0;
}
/* il disegno ha il fondo trasparente: sotto ci va la carta,
   o il nero dei contorni sparisce nel buio */
.chi .chi__foto .figura__lastra{ aspect-ratio:1; border:0; background:var(--testo, var(--carta)); }
.chi .chi__foto img{ width:100%; height:100%; object-fit:cover; }
.chi .titolo-pensiero{ margin:8px 0 12px; line-height:1; }

.icona{
  width:1.1em; height:1.1em;
  flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* eta', citta', mestiere: una riga in macchina da scrivere */
.chi__dati{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin:0 0 22px; padding:0; list-style:none;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--grigio);
}
.chi__dati li{ display:flex; align-items:center; gap:7px; }
.chi__dati .icona{ color:var(--rosso); }

.chi__faccina{ font-family:var(--mono); color:var(--rosso); white-space:nowrap; }


.chi p{ margin:0 0 14px; }
.chi .sottotitolo{ clear:both; margin:0; padding:clamp(28px, 5vw, 40px) 0 14px; }

.chi__contatti{
  display:grid; gap:4px;
  margin:0; padding:0; list-style:none;
  font-family:var(--mono); font-size:14px;
}
.chi__contatti a{
  display:inline-flex; align-items:center; gap:12px;
  padding:4px 0;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.chi__contatti a:hover span{ text-decoration:underline; }
.chi__contatti .icona{ width:20px; height:20px; }
@media (max-width:520px){
  .chi .chi__foto{ float:none; width:100%; margin:0 0 22px; }
}