/* ============================================================
   05 — COMPONENTI
   Ogni blocco della pagina, nell'ordine in cui compare.
   Le cornici non sono qui: sono attaccate nell'HTML con
   data-penna e disegnate da js/scarabocchio.js.
   ============================================================ */

/* ---------- testata ---------- */
.testata{
  margin:24px 14px 0;
  padding:clamp(34px, 8vw, 56px) clamp(16px, 5vw, 44px) clamp(28px, 6vw, 40px);
  text-align:center;
}

.logo{
  margin:0;
  font-size:clamp(38px, 12vw, 100px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.035em;
  text-transform:uppercase;
  transform:rotate(-1.1deg);
  text-shadow:2px 3px 0 var(--carta-3);
}
.logo .zero{
  color:var(--rosso);
  font-style:italic;
}

.testata__sotto{
  margin:26px 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--grigio);
}


/* ---------- navigazione ---------- */
.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px 20px;
  padding:26px var(--passo) 30px;
}
.nav a{
  padding:11px 15px;              /* bersaglio comodo anche col dito */
  min-height:44px;
  display:flex;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--inchiostro);
}
.nav a:nth-child(odd) { transform:rotate(-.8deg); }
.nav a:nth-child(even){ transform:rotate(.7deg); }
.nav a:hover,
.nav a:focus-visible{ color:var(--rosso); }


/* ---------- fascia a tratteggio ---------- */
.fascia{
  height:26px;
  margin:0 var(--passo);
}


/* ---------- riquadro avviso ---------- */
.avviso{
  display:flex;
  margin:40px 0;
  background:var(--carta-2);
}
.avviso__etichetta{
  flex:none;
  padding:16px 10px;
  background:var(--inchiostro);
  color:var(--carta);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  text-align:center;
}
.avviso__corpo{
  padding:18px 20px;
  font-size:15.5px;
}
.avviso__corpo p:last-child{ margin-bottom:0; }

.nuovo{
  display:inline-block;
  padding:1px 6px;
  background:var(--rosso);
  color:var(--carta);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  animation:lampeggia 1.2s steps(1) infinite;
}
@keyframes lampeggia{ 50%{ opacity:.15; } }


/* ---------- registro ---------- */
.registro{
  list-style:none;
  margin:0;
  padding:0;
}
.registro li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:11px 2px 13px;
}
.registro li + li{
  border-top:1px solid var(--carta-3);
}
.registro__data{
  flex:none;
  width:78px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--grigio);
}
.registro__voce{ flex:1; }
.registro__peso{
  flex:none;
  font-family:var(--mono);
  font-size:10px;
  color:var(--grigio);
}
.registro__altro{
  margin-top:22px;
  text-align:center;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grigio);
}

@media (max-width:560px){
  .registro li{ flex-wrap:wrap; gap:4px 10px; }
  .registro__voce{ flex:1 1 100%; order:3; }
  .registro__peso{ margin-left:auto; }
}


/* ---------- figure ---------- */
.galleria{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
  margin:32px 0;
}
.figura{
  margin:0;
  padding:10px;
}
.figura__lastra{
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  text-align:center;
  background:var(--carta-3);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--inchiostro);
}
.figura__lastra span{
  background:var(--carta-2);
  padding:4px 7px;
}
.figura__didascalia{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grigio);
}
@media (max-width:560px){
  .galleria{ grid-template-columns:1fr; gap:22px; }
}


/* ---------- citazione ---------- */
.citazione{
  margin:38px 0;
  padding:28px 22px;
  font-size:clamp(19px, 5vw, 23px);
  font-style:italic;
  line-height:1.36;
  text-align:center;
}
.citazione cite{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:9.5px;
  font-style:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grigio);
}


/* ---------- nota a margine ---------- */
.nota{
  float:right;
  width:190px;
  margin:8px -10px 18px 24px;
  padding:15px;
  background:var(--carta-2);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.6;
  text-align:left;
  transform:rotate(1.5deg);
}
@media (max-width:640px){
  .nota{
    float:none;
    width:auto;
    margin:22px 0;
    transform:rotate(.5deg);
  }
}


/* ---------- diario ---------- */
.diario{
  margin:28px 0;
  padding:24px 24px 20px;
  background:var(--carta-2);
}
.diario__voce{
  margin:0 0 18px;
  font-style:italic;
  font-size:16px;
  text-align:left;
}
.diario__voce:last-child{ margin-bottom:0; }
.diario__quando{
  display:block;
  margin-bottom:3px;
  font-family:var(--mono);
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grigio);
}
.diario__mano{
  font-size:19px;
  letter-spacing:.02em;
}


/* ---------- tavola ---------- */
.tavola{
  margin:30px 0;
  padding:12px;
}
.tavola__scorre{
  overflow-x:auto;               /* sul telefono la tabella scorre da sola */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; /* scorrendola non si torna indietro */
}
.tabella{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
  font-family:var(--mono);
  font-size:11.5px;
}
.tabella caption{
  padding:0 0 10px;
  text-align:left;
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grigio);
}
.tabella th,
.tabella td{
  padding:9px 11px;
  text-align:left;
  border-bottom:1px solid var(--carta-3);
}
.tabella thead th{
  border-bottom:1.5px solid var(--inchiostro-2);
  font-weight:400;
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grigio);
}
.tabella tbody tr:last-child td{ border-bottom:0; }
.tabella .spenta{ color:var(--grigio); }


/* ---------- guestbook ---------- */
.guestbook{ margin:30px 0; }
.guestbook__barra{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:var(--inchiostro);
  color:var(--carta);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.guestbook__corpo{ padding:22px 20px; }

.campo{ margin-bottom:16px; }
.campo label{
  display:block;
  margin-bottom:6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* input e textarea non possono avere figli: la cornice
   scarabocchiata la ospita un contenitore attorno */
.campo__cornice{
  display:block;
  background:var(--carta-2);
}
.campo input,
.campo textarea{
  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;
}
.campo textarea{ resize:vertical; min-height:96px; }
.campo ::placeholder{ color:var(--grigio); opacity:.75; }

.bottone{
  overflow:visible;
  min-height:44px;
  margin:0 10px 10px 0;
  padding:11px 24px;
  background:transparent;
  color:var(--inchiostro);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.bottone:hover{ color:var(--rosso); }
.bottone:active{ transform:translate(1px,1px); }


/* ---------- contatore ---------- */
.contatore{
  margin:48px 0 30px;
  text-align:center;
}
.contatore__cifre{
  display:inline-flex;
  gap:10px;
  padding:12px 16px;
}
.contatore__cifre span{
  min-width:22px;
  font-size:27px;
  font-weight:700;
  line-height:1;
}
.contatore__cifre span:nth-child(odd) { transform:rotate(-2.5deg); }
.contatore__cifre span:nth-child(even){ transform:rotate(2deg); }
.contatore__etichetta{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grigio);
}


/* ---------- bottoni 88x31 ---------- */
.badge-riga{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:28px 0;
}
.badge{
  width:88px;
  height:31px;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--mono);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.badge:nth-child(odd) { transform:rotate(-1.6deg); }
.badge:nth-child(even){ transform:rotate(1.3deg); }

.badge--carta { background:var(--carta-2); color:var(--inchiostro); }
.badge--scura { background:var(--inchiostro); color:var(--carta); }
.badge--rossa { background:var(--rosso);      color:var(--carta); }
.badge--oro   { background:var(--oro);        color:var(--inchiostro); }


/* ---------- anello ---------- */
.webring{
  margin:30px 0;
  padding:20px 16px;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
}
.webring__nome{
  display:block;
  margin-bottom:12px;
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--grigio);
}
.webring a{
  display:inline-block;
  padding:8px 6px;
}


/* ---------- torna su ---------- */
.su{
  padding:24px 0 8px;
  text-align:center;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.su a{ display:inline-block; padding:10px 14px; }


/* ---------- piede ---------- */
/* il nero sborda fino al bordo vero del foglio (annullando il
   padding di .foglio__contenuto, piu' un filo in piu') cosi' il
   riquadro si salda al taglio stropiciato della carta invece di
   galleggiarci dentro come un rettangolo a parte. Gli angoli
   bassi seguono il raggio della sagoma (data-raggio sul foglio). */
.piede{
  margin:58px -12px -18px;
  padding:32px 22px 40px;
  border-radius:0 0 30px 30px;
  background:var(--inchiostro);
  color:var(--carta-3);
  font-family:var(--mono);
  font-size:10px;
  line-height:2.1;
  letter-spacing:.06em;
  text-align:center;
}
.piede a{ color:var(--oro); }
.piede a:hover{ color:var(--carta); }
.piede__grande{
  display:block;
  margin-bottom:16px;
  font-family:var(--serif);
  font-size:clamp(22px, 6vw, 30px);
  letter-spacing:.3em;
  color:var(--carta);
}
.piede__minuto{ opacity:.5; }


/* ============================================================
   TELEFONO
   Tutto quello che sotto i 700px risultava troppo piccolo per
   leggerlo, o troppo grande per starci dentro.
   Le scritte in Courier erano fra i 9,5 e gli 11px: su carta
   vanno bene, su uno schermo tenuto a mezzo metro no.
   ============================================================ */

@media (max-width:700px){

  /* --- le scritte piccole --- */
  .testata__sotto     { font-size:11.5px; letter-spacing:.2em; }
  .registro__data,
  .registro__peso     { font-size:11.5px; }
  .registro__altro    { font-size:11.5px; }
  .figura__didascalia { font-size:11px; flex-wrap:wrap; }
  .webring            { font-size:12px; }
  .su                 { font-size:11.5px; }
  .piede              {
    font-size:11.5px; line-height:1.95;
    margin:44px -10px -16px;
    border-radius:0 0 26px 26px;
  }
  .contatore__etichetta,
  .diario__quando     { font-size:11px; }
  .campo label        { font-size:11px; }

  /* --- il testo che si legge davvero --- */
  .avviso__corpo      { font-size:16px; padding:16px; }
  .diario             { padding:18px 16px 14px; }
  .diario__voce       { font-size:16.5px; }
  .diario__mano       { font-size:19px; }
  .nota               { font-size:12px; padding:14px; }
  .citazione          { padding:22px 12px; }

  /* --- l'avviso: l'etichetta verticale su 40px di larghezza
         schiacciava il testo contro il bordo --- */
  .avviso{ flex-direction:column; }
  .avviso__etichetta{
    writing-mode:horizontal-tb;
    padding:9px 14px;
    text-align:left;
  }

  /* --- la tavola: scorre lo stesso, ma un po' meno --- */
  .tavola{ padding:8px; }
  .tabella{ font-size:12.5px; min-width:380px; }
  .tabella th,
  .tabella td{ padding:8px 9px; }
  .tabella caption{ font-size:11px; }

  .nav a{ font-size:12px; }
}