/* Libreria Petruccelli Parisi — famiglia «biblioteca inglese antica».

   CHE COSA FA QUESTO FOGLIO
   I colori del tema inglese stanno in temi.css, come per tutti gli altri
   temi: sono valori di variabili, non regole. Qui ci sono solo le poche
   cose che un cambio di colore non puo' fare da solo, cioe' la FORMA della
   sala di lettura d'epoca:

     · la scaffalatura di legno dietro alla pagina;
     · il foglio di carta su cui sta il contenuto;
     · la vetrina al posto della plancia dell'astronave;
     · angoli vivi, filetti d'ottone, nessun bagliore al neon.

   REGOLE DI MANUTENZIONE
   1. Ogni regola qui dentro parte da «body.inglese»: senza quella classe il
      foglio non tocca niente, quindi i sette temi scuri del 1.1.0 restano
      esattamente come erano.
   2. Nessuna immagine, nessun carattere da scaricare, nessuna risorsa
      esterna: la sala e' disegnata con gradienti.
   3. Niente colori scritti a mano dove esiste una variabile: altrimenti
      l'ambientazione stagionale non riuscirebbe a cambiarli.
   4. Le animazioni si spengono con .quiete e con prefers-reduced-motion. */

/* ===========================================================================
   1 · LA SALA DI LETTURA
   Due strati fissi dietro al contenuto, disegnati sui pseudo-elementi del
   corpo pagina: non serve aggiungere nulla al markup.
     body.inglese::before = parete con scaffalature, ripiani e zoccolatura
     body.inglese::after  = alone caldo della lampada + vignettatura
   Sono dietro a tutto (z-index -2) e non ricevono i clic.
   ========================================================================= */

body.inglese { position: relative; }

body.inglese::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--legno-scuro);
  /* Un «palco» di scaffalatura e' alto 168px e si ripete: 0-6px ombra
     dell'asse di sopra, 6-150px dorsi dei libri, 150-164px asse di legno,
     164-168px stacco scuro. Tutti gli strati hanno lo stesso passo, cosi'
     restano allineati. L'ultimo strato e' la zoccolatura in basso. */
  background-image:
    /* ombra sotto l'asse: da' profondita' ai libri */
    repeating-linear-gradient(180deg, #00000085 0 6px, #00000000 6px 168px),
    /* asse del ripiano, con lo spigolo chiaro in alto */
    repeating-linear-gradient(180deg,
      #00000000 0 150px,
      var(--legno-chiaro) 150px 153px,
      var(--legno) 153px 164px,
      var(--legno-scuro) 164px 168px),
    /* filetti di doratura sui dorsi (lacci e titoli impressi) */
    repeating-linear-gradient(180deg,
      #00000000 0 40px,
      var(--ottone) 40px 42px,
      #00000000 42px 96px,
      var(--ottone-tenue) 96px 98px,
      #00000000 98px 168px),
    /* dorsi dei libri: periodo di 461px, larghezze irregolari */
    repeating-linear-gradient(90deg,
      var(--verde-inglese) 0 26px, var(--legno-scuro) 26px 29px,
      var(--bordeaux) 29px 52px, var(--legno-scuro) 52px 55px,
      var(--legno-chiaro) 55px 74px, var(--legno-scuro) 74px 77px,
      var(--verde-inglese-chiaro) 77px 106px, var(--legno-scuro) 106px 109px,
      var(--ottone-tenue) 109px 128px, var(--legno-scuro) 128px 131px,
      var(--bordeaux-chiaro) 131px 158px, var(--legno-scuro) 158px 161px,
      var(--verde-inglese) 161px 182px, var(--legno-scuro) 182px 185px,
      var(--legno-chiaro) 185px 212px, var(--legno-scuro) 212px 215px,
      var(--bordeaux) 215px 240px, var(--legno-scuro) 240px 243px,
      var(--verde-inglese-chiaro) 243px 268px, var(--legno-scuro) 268px 271px,
      var(--ottone-tenue) 271px 296px, var(--legno-scuro) 296px 299px,
      var(--bordeaux-chiaro) 299px 326px, var(--legno-scuro) 326px 329px,
      var(--verde-inglese) 329px 352px, var(--legno-scuro) 352px 355px,
      var(--legno-chiaro) 355px 378px, var(--legno-scuro) 378px 381px,
      var(--bordeaux) 381px 404px, var(--legno-scuro) 404px 407px,
      var(--verde-inglese-chiaro) 407px 430px, var(--legno-scuro) 430px 433px,
      var(--ottone-tenue) 433px 458px, var(--legno-scuro) 458px 461px),
    /* montanti verticali ai due lati della stanza */
    linear-gradient(90deg,
      var(--legno-scuro) 0 34px, var(--legno) 34px 46px,
      #00000000 46px calc(100% - 46px),
      var(--legno) calc(100% - 46px) calc(100% - 34px),
      var(--legno-scuro) calc(100% - 34px) 100%),
    /* zoccolatura a riquadri, appoggiata in fondo */
    repeating-linear-gradient(90deg,
      var(--legno) 0 10px, var(--legno-chiaro) 10px 14px,
      var(--legno-scuro) 14px 136px, var(--legno-chiaro) 136px 140px,
      var(--legno) 140px 150px);
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, repeat-x;
  background-size: auto, auto, auto, auto, auto, auto 120px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%;
  /* con un'ambientazione stagionale attiva la stanza cambia «ora del
     giorno»: un filtro, non gradienti riscritti */
  filter: var(--tinta-sala, none);
}

body.inglese::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    var(--alone-sala, radial-gradient(900px 520px at 50% -6%, #f0d9a51f, #f0d9a500 70%)),
    radial-gradient(1200px 900px at 50% 40%, #00000000 30%, #0b060285 100%);
}

/* ===========================================================================
   2 · IL FOGLIO DI CARTA
   Il contenuto sta su un foglio appoggiato al tavolo: cosi' il testo scuro
   e' sempre su carta chiara, mentre la scaffalatura resta visibile ai lati,
   nell'intestazione e nel fondo pagina.
   ========================================================================= */

body.inglese main {
  background: var(--carta-2);
  border: 1px solid var(--legno-chiaro);
  border-top: 3px solid var(--ottone);
  box-shadow: 0 1px 0 #fffdf6 inset, 0 18px 44px #0b0602a8;
  margin: 26px auto 60px;
  padding: 26px 30px 44px;
  max-width: 1240px;
}

/* ===========================================================================
   3 · TIPOGRAFIA CLASSICA
   Le famiglie arrivano dalle variabili (--carattere, --carattere-titolo):
   qui si sistemano solo spaziature e fregi.
   ========================================================================= */

body.inglese h1 { letter-spacing: 0; font-weight: 600; }
body.inglese h2 {
  letter-spacing: .2px;
  border-bottom: 1px solid var(--bordo-tabella);
  padding-bottom: 6px;
}
body.inglese h3 { letter-spacing: .2px; }
body.inglese .marchio strong { letter-spacing: .6px; font-size: 22px; }
body.inglese .tag { letter-spacing: 2.4px; font-size: 10.5px; }
body.inglese th { letter-spacing: 1.2px; }
/* nella vetrina l'etichettina sta su carta, non sul legno */
body.inglese .plancia-testo .tag { color: var(--accento-tenue); }

/* ===========================================================================
   4 · ANGOLI VIVI, FILETTI D'OTTONE, NIENTE NEON
   ========================================================================= */

body.inglese .scatola,
body.inglese .scheda {
  box-shadow: 0 1px 0 #fffdf6 inset, 0 6px 14px #0b060221;
  border-top-width: 2px;
}
body.inglese .scheda:after {
  /* al posto del trattino al neon: un quadratino d'ottone, come una
     targhetta avvitata nell'angolo */
  width: 10px; height: 10px; border-radius: 1px;
  background: var(--ottone);
  box-shadow: 0 0 0 1px var(--ottone-tenue);
}
body.inglese button:hover,
body.inglese .bottone:hover {
  box-shadow: 0 2px 8px #0b060233;
  border-color: var(--ottone);
}
body.inglese .strumenti {
  border-radius: 3px;
  border-width: 1px;
  border-top: 3px solid var(--ottone);
  box-shadow: 0 6px 14px #0b060221;
}
body.inglese fieldset { border-radius: 3px; }
body.inglese .badge { border-radius: 2px; border: 1px solid var(--bordo-tabella); }
body.inglese .contatore { border-radius: 2px; border-top: 2px solid var(--ottone); }
body.inglese .flusso span { border-radius: 2px; }
body.inglese .tessera { border-radius: 2px; }
body.inglese .campione i { border-radius: 2px; }
body.inglese .messaggio { border-radius: 2px; border-left: 4px solid var(--bordo-messaggio); }

/* La barra di stato sta sul foglio: filetto d'ottone invece della riga al neon. */
body.inglese .barra-stato {
  border-bottom: 1px solid var(--bordo-barra);
  letter-spacing: 1.6px;
}

/* ===========================================================================
   5 · MESSA A FUOCO DA TASTIERA
   Un anello solo non basta: il fuoco deve vedersi sia sulla carta chiara sia
   sul legno scuro. Si usano due anelli concentrici, uno scuro e uno
   d'ottone: qualunque sia il fondo, almeno uno dei due stacca.
   ========================================================================= */

body.inglese button:focus-visible,
body.inglese .bottone:focus-visible,
body.inglese input:focus-visible,
body.inglese select:focus-visible,
body.inglese textarea:focus-visible,
body.inglese a:focus-visible,
body.inglese summary:focus-visible {
  outline: 3px solid var(--fuoco);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ottone-chiaro);
}

/* ===========================================================================
   6 · LA VETRINA (al posto della plancia dell'astronave)
   Lo stesso markup di prima — .plancia, .plancia-testo, .ologramma, .raggio,
   .orbita, .libro-olo, .didascalia — diventa una vetrina di legno con un
   volume rilegato sotto la luce della lampada.
   ========================================================================= */

body.inglese .plancia {
  border: 10px ridge var(--bordo-plancia);
  border-radius: 3px;
  background-size: auto, auto, auto, auto, auto;
  box-shadow: inset 0 0 60px #000000a6, 0 10px 26px #0b0602a8;
  padding: 26px;
}
body.inglese .plancia-testo {
  border-left: 4px solid var(--ottone);
  border-radius: 2px;
  box-shadow: 0 1px 0 #fffdf6 inset, 0 8px 18px #0b060240;
}
body.inglese .ologramma {
  border-radius: 2px;
  border: 2px solid var(--bordo-ologramma);
  box-shadow: inset 0 0 40px #000000a6;
}
body.inglese .ologramma:before {
  /* non piu' la base di proiezione: il piano del leggio, in ottone */
  border-color: var(--ottone);
  box-shadow: 0 0 14px #00000066, inset 0 0 18px var(--alone-accento);
}
body.inglese .raggio {
  /* il cono di luce della lampada da tavolo */
  clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0);
}
body.inglese .orbita {
  border-color: var(--orbita);
  border-radius: 50%;
  transform: rotate(-16deg);
  box-shadow: none;
}
body.inglese .libro-olo {
  /* volume rilegato: dorso d'ottone a sinistra, taglio delle pagine a destra */
  border: 2px solid var(--ottone-tenue);
  border-left: 12px double var(--ottone);
  border-radius: 2px 7px 7px 2px;
  text-shadow: none;
  letter-spacing: 2px;
  box-shadow: 10px 8px 0 -4px #0b060266, inset 0 0 26px #00000055;
  transform: rotateY(-16deg) rotateZ(-5deg);
}
body.inglese .didascalia { color: var(--accento-intestazione); letter-spacing: 1.6px; }

/* ===========================================================================
   7 · SCHERMI PICCOLI E STAMPA
   ========================================================================= */

@media (max-width: 860px) {
  body.inglese main { margin: 14px 10px 40px; padding: 18px 16px 32px; }
  body.inglese .plancia { border-width: 6px; padding: 16px; }
}
@media (max-width: 600px) {
  body.inglese main { margin: 8px 6px 28px; padding: 14px 12px 26px; }
}

@media print {
  /* la sala di lettura non si stampa: carta bianca e inchiostro */
  body.inglese::before, body.inglese::after { display: none; }
  body.inglese main {
    background: #fff; border: 0; box-shadow: none; margin: 0; padding: 0;
  }
}