/* =====================================================================
   Anthemon Fellowship — HOME, parte alta — hero e i mondi
   ---------------------------------------------------------------------
   Mobile-first: le regole base valgono per gli schermi piccoli, i blocchi
   @media (min-width: …) aggiungono quelle per i grandi.

   Contenuto:
     5. Hero col video
     6. I mondi: i due pannelli-manifesto, la fascia Epteka con le batterie
        elfiche, i quattro volumi (sospesi) e le tile con didascalia

   L'ORDINE DEI FILE CONTA. Questo foglio era uno solo e la cascata ne
   dipende: piu' di una regola vince per posizione, non per specificita'.
   I file vanno caricati nell'ordine del numero in testa al nome, ed e'
   quello che fa includes/header.php. Vedi css/README.md prima di
   aggiungerne, rinominarne o riordinarne uno.
   ===================================================================== */
/* ---------- 5. HERO (video) ---------- */
.hero {
  position: relative;
  min-height: 100vh;  /* fallback for browsers without svh units */
  min-height: 100svh; /* svh = real mobile viewport height, browser bars excluded */
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--warm-white);

  /* Rete di sicurezza sotto al poster e al video: un gradiente nei colori di
     Epteka. Il poster c'e' e si vede; il video no (TODO(asset):
     assets/video/hero-epteka.mp4), quindi oggi questo gradiente non lo vede
     nessuno — resta per il caso in cui un'immagine non si carichi. */
  background-image:
    radial-gradient(ellipse at 75% 15%, rgba(127, 184, 216, 0.28), transparent 55%),
    linear-gradient(160deg, #16262e, var(--epteka) 50%, var(--epteka-steel));
}

/* The looping video fills the section like a cover image.
   js/main.js injects the <source> only on desktop + no reduced-motion,
   so phones never download the video (they get the poster instead). */
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Velo scuro da sinistra, quanto basta a leggere — e non bastava (rev. 12 §D).
   MISURATO, non deciso. La riga dell'anteprima cade nel punto piu' chiaro del
   dipinto, il cumulo di neve sotto i pulsanti: campionando il fondo con la
   riga nascosta, col velo vecchio esce rgb(101,113,117) a 1440 e
   rgb(109,118,121) a 390. Su quel grigio il bianco caldo non arriva a 4,5:1
   nemmeno a opacita' piena — 3,72:1 nel pixel peggiore a 1440, 3,08:1 a 390.
   Non era un problema della riga nuova: la sottolineatura del lockup stava
   gia' a 3,19:1 nel pixel peggiore, ma con una media di 6,92 e per questo non
   si era mai vista.

   I NUMERI NUOVI. 0,80 al bordo (era 0,65), 0,42 a meta' (era 0,15), e il velo
   finisce all'88% invece che all'80%. Il salto vero e' quello di mezzo: e' li'
   che stanno i pulsanti e la riga, ed e' li' che 0,15 non copriva niente.
   Con questi valori la riga passa a 6,29:1 nel pixel peggiore a 1440 e 5,17:1
   a 390. Scartata una versione intermedia (0,72 / 0,32 / 85%): a 1440 bastava,
   a 390 si fermava a 4,23:1, cioe' passava su un solo schermo su due.

   COSA NON CAMBIA. Il velo resta un gradiente orizzontale e resta trasparente
   sulla destra, dove c'e' il cavaliere: l'immagine non diventa uno sfondo
   velato — sarebbe contro il vocabolario della pagina — si scurisce solo la
   colonna dove vivono le parole, che e' l'unico posto in cui serve. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(18, 28, 34, 0.80), rgba(18, 28, 34, 0.42) 55%, transparent 88%);
}

/* z-index lifts the text above video (0) and scrim (1) */
.hero .container { position: relative; z-index: 2; }

.hero-content {
  max-width: 36rem;
  padding-block: calc(var(--header-h) + 2rem); /* never ends up under the navbar */
}

.hero-eyebrow { color: var(--epteka-azure); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.25rem, 10vw, 5.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}

/* Epteka logo-style lockup (rifatto in rev. 15):
       EPTEKA
   ◆ ELVEN HIGH TECHNOLOGY FOR 5E ◆

   COM'ERA E PERCHE' NON FUNZIONAVA. Prima ai due lati c'erano anche due righe
   orizzontali (── ◆ TESTO ◆ ──) con "flex: 1 1 0; min-width: 12px", e il
   commento diceva che si allungavano a riempire lo spazio lasciato dal titolo,
   "so the whole lockup spans EXACTLY the width of the EPTEKA wordmark, at
   every screen size".

   MISURATO, e non era vero quasi mai: le righe stavano ferme al loro minimo di
   12px a OGNI larghezza provata — 461, 560, 700, 900, 1150, 1440 — in tutte e
   due le lingue. L'unica eccezione era l'italiano a 900px esatti, dove
   arrivavano a 21px. Il motivo e' che il sottotitolo maiuscolo e spaziato e'
   gia' piu' largo del wordmark: a 1440 EPTEKA misura 407px e la riga
   dell'ornamento ne chiede 413 in italiano e 442 in inglese, quindi da
   riempire non resta niente e il wrapper lo dimensiona il lockup, non il
   titolo. Due trattini da 12px alle estremita', non un fregio che abbraccia il
   nome.

   Tolte del tutto (vedi .hero-lockup .ornament-line qui sotto): resta
   "◆ TESTO ◆", che e' la stessa grammatica dei rombi sotto i titoli di
   sezione, e in piu' risolve il contrasto sull'hero a telefono. */
.hero-lockup-wrap {
  display: inline-block; /* shrink-wrap: no wider than the title */
  margin: 0 0 2.5rem;
}
/* The whole lockup is white — subtitle AND filigree — so it reads as one
   engraved line under the wordmark rather than a gold frame around a label.
   (The ornaments inherit this via currentColor.) */
.hero-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0.85rem 0 0; /* air between wordmark and ornament */
  color: var(--warm-white);
}
/* NIENTE RIGHE AI LATI, A NESSUNA LARGHEZZA (rev. 15).
   Le due ragioni, nell'ordine in cui contano:

   1. IL CONTRASTO, misurato. Con le righe la riga dell'ornamento inglese e'
      larga 309px a 360px e la sua coda arriva a x=286: cioe' sul bordo
      illuminato della spada nel dipinto dell'hero. Tre pixel scendevano a
      4,45:1 contro i 4,5 che l'AA chiede. Senza, la riga scende a 265px, la
      coda si ferma a x=264 e il peggiore risale a 5,21:1. L'italiano, che non
      aveva problemi, va da 5,21 a 6,39.
   2. NON FACEVANO IL LORO LAVORO. Vedi il blocco qui sopra: erano ferme a
      12px a ogni larghezza, quindi non "abbracciavano" un bel niente.

   PERCHE' LE RIGHE E NON I ROMBI: i rombi sono l'ornamento del sito e stanno
   anche sotto i titoli di sezione; le righe erano solo il riempimento laterale.

   COSA HO SCARTATO. (a) Accorciare la stringa inglese a "Elven technology for
   5e": risolveva il contrasto, ma "Elven High Technology" e' il nome del
   manuale e il titolo della campagna Kickstarter, e la home avrebbe detto una
   frase diversa dal resto del sito. (b) Ritoccare il velo dell'hero: e'
   calibrato sul dipinto. (c) Una regola legata a html[lang="en"] per lasciare
   intatto l'italiano: biforcava il layout fra le due lingue, che e' proprio
   quello che l'impianto di lingua.php evita.

   Il markup NON e' stato toccato: i due <span class="ornament-line"> restano
   in index.php ed epteka.php. Per riavere le righe basta togliere questa
   regola e rimettere "flex: 1 1 0; min-width: 12px". */
.hero-lockup .ornament-line {
  display: none;
}
.hero-lockup-text {
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 1.6vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  white-space: nowrap; /* the lockup line never breaks */
}
/* Tighten the lockup on very small phones */
@media (max-width: 460px) {
  .hero-lockup { gap: 0.6rem; }
  .hero-lockup-text { font-size: 0.75rem; letter-spacing: 0.18em; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
/* Revision 2: CTAs stacked vertically, left-aligned, ghost on top.
   Removing .is-stacked from the markup in index.php restores the old
   side-by-side row — a one-class change. */
.hero-actions.is-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* La riga dell'anteprima gratuita, sotto i due pulsanti (rev. 12 §D).
   NON e' una .arrow-link: quella e' maiuscoletta spaziata a 0.18em, cioe' ha
   il peso di un'etichetta di comando e da li' a sembrare un terzo pulsante c'e'
   pochissimo. Qui serve una frase detta a mezza voce, quindi corpo del testo,
   iniziale maiuscola sola, e il bianco tenuto indietro con l'opacita'.
   BIANCO PIENO, NON "a opacita' ridotta" come chiedeva il brief. Provato e
   misurato: a 0,78 sul dipinto la riga stava a 2,93:1 a 1440 e 2,49:1 a 390,
   cioe' molto sotto il 4,5 di casa — su un fondo fotografico l'opacita' non e'
   un modo di abbassare la voce, e' un modo di rendere illeggibili le parole.
   La riga resta un sussurro per misura e per famiglia: 15px del corpo del
   testo accanto a due pulsanti in maiuscoletto spaziato. A tenerla indietro
   adesso e' il velo dell'hero, ritarato qui sopra.
   ALLINEAMENTO: a sinistra come i pulsanti sopra. Il brief la voleva centrata
   da telefono "come i pulsanti", ma i pulsanti non sono centrati — .is-stacked
   li tiene su align-items: flex-start a ogni misura, e l'hero ha un asse
   sinistro solo (occhiello, lockup, pulsanti). Centrarla avrebbe creato la
   sola riga fuori asse della schermata.
   MISURA: margine di 1.1rem sopra e nessuno sotto. L'hero e' un min-height:
   100svh con il contenuto centrato, quindi finche' il contenuto ci sta dentro
   la sezione non cresce di un pixel; misurato con `check.py heights`, resta
   900px a 1440x900. */
.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--warm-white);
  text-decoration: none;
  transition: color 0.3s var(--ease-soft);
}
.hero-note:hover { color: var(--gold); }
.hero-note .arrow {
  color: var(--gold);
  transition: transform 0.3s var(--ease-soft);
}
.hero-note:hover .arrow { transform: translateX(6px); }

/* ---------- 6. I MONDI (i tre pannelli-manifesto) ---------- */
/* La sezione 2 della home. Titolo inciso, sottotitolo, due pannelli
   colorati per i libri pubblicati e una fascia per Epteka che arriva.
   I PANNELLI sono montati anche dalle sezioni "Continua a esplorare" in
   fondo a dasos.php e mosses.php, li' senza didascalia e con un pannello
   Epteka in piu' che qui non esiste (vedi 06-libri.css): se cambi qualcosa
   qui, guarda anche li'. LA FASCIA invece e' solo di questa sezione.
   Le vecchie .project-tile che reggevano quelle sezioni sono uscite dal
   foglio, non le usava piu' nessuno. */
.projects {
  position: relative;
  background: var(--ivory);
  padding-block: var(--section-pad);
  text-align: center;
}

/* Subtle seamless texture over the ivory. The file is pending: a lone url()
   that 404s simply paints nothing, so this ships inert until the texture
   exists. Tune the strength with --texture-opacity in :root.
   TODO(asset): assets/img/texture-parchment.png pending from Francesco. */
.projects::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("../assets/img/texture-parchment.png") repeat;
  opacity: var(--texture-opacity);
  pointer-events: none;
}

/* Content above the texture layer */
.projects .container { position: relative; z-index: 1; }

/* The section's one and only piece of text, so it carries weight: Cinzel in
   caps, wide engraved letter-spacing, and an ink→gold→ink gradient that reads
   like light raking across an inscription. The plain ink colour is declared
   first and the gradient only inside @supports, so browsers without
   background-clip:text still show a solid, readable title. */
.projects-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5.4vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .projects-title {
    background-image: linear-gradient(100deg,
      var(--ink) 0%, var(--bronze) 38%, var(--gold) 52%, var(--bronze) 66%, var(--ink) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* The title is the whole header now: pull the ornament a little closer */
.projects .section-head .ornament { margin-bottom: 0; }

/* --- I tre blocchi-mondo -------------------------------------------------
   Due pannelli affiancati per i libri pubblicati, sotto una cornice per
   Epteka, e sotto ancora la riga dei quattro volumi. La sezione resta avorio.

   COSA E' CAMBIATO DALLA REVISIONE 3, e perche'.

   1. I pannelli sembravano bottoni. L'illustrazione sfumava e moriva dentro
      un campo di tinta unita che occupava mezza scheda, e un rettangolo pieno
      con angoli tondi e ombra portata E' la forma di un bottone: il cervello
      la legge cosi' prima ancora di guardare cosa c'e' dentro. Adesso
      l'illustrazione riempie il pannello da bordo a bordo e il colore del
      mondo non e' piu' un campo ma una LUCE che sale dal bordo basso, alta al
      massimo il 42%, che serve solo a rendere leggibile il logo.

   2. Il nome del progetto era scritto tre volte per scheda: il logo, la
      copertina del mockup a cinque centimetri, e la didascalia. La vittima
      era il logo, che e' la cosa migliore della sezione. I mockup sono usciti
      dai pannelli (e con loro tutta la macchineria dello sbordo) e si sono
      riuniti nella riga dei quattro volumi qui sotto; la didascalia e' scesa
      da cinque elementi a tre.

   3. La fascia Epteka era un rettangolo petrolio pieno appoggiato due
      centimetri sopra la sezione Aetheria, che e' anch'essa petrolio: due
      blocchi quasi dello stesso colore attaccati, e il primo sembrava un
      bottone disabilitato. Adesso e' una cornice d'oro sull'avorio, e il
      petrolio ci resta come parola e non come blocco.

   IL COLORE. Nessun token nuovo: --mosses / --dasos / --epteka esistono gia'
   in cima al foglio e sono gli stessi delle sezioni "luogo", quindi mondi e
   luoghi restano un sistema solo. La classe modificatrice li travasa in
   variabili locali che tutto il resto legge. Accanto al token serve pero'
   anche la tripletta RGB grezza: un gradiente a opacita' variabile non puo'
   nascere da un colore gia' impacchettato, gli servono i tre numeri.

   L'ORO resta il marchio di casa e sta FUORI dai pannelli: filo della
   didascalia, freccia, e adesso la cornice di Epteka. */
/* Ogni mondo dichiara due cose. --world-block e' il colore, e serve dove il
   colore va usato tale e quale (lo stato della cornice Epteka).
   --world-block-rgb e' lo STESSO colore come tripletta grezza, e serve allo
   scrim: un gradiente a opacita' variabile non puo' nascere da un colore
   gia' impacchettato, gli servono i tre numeri separati. Non e' un doppione
   della tavolozza — i valori veri restano --mosses / --dasos / --epteka in
   cima al foglio, questi sono solo il travaso.

   --scrim-k e' il moltiplicatore di forza dello scrim, tarato sull'immagine
   che ci sta sotto: 1 sui Muschi, dove il fondo e' acqua chiara; meno su
   Dasos, dove il sottobosco e' gia' scuro e velarlo oltre spegnerebbe la
   foresta senza guadagnare leggibilita'.

   Un --world-accent c'era e l'ho tolto: dopo questa revisione non lo leggeva
   piu' nessuno (l'occhiello della cornice e' bronzo, lo stato e' petrolio), e
   una variabile dichiarata che nessuno usa e' una trappola — si cambia
   aspettandosi un effetto e non succede niente. */
.world--mosses { --world-block: var(--mosses); --world-block-rgb: 49 57 110; --scrim-k: 1; }
.world--dasos  { --world-block: var(--dasos);  --world-block-rgb: 21 48 42;  --scrim-k: 0.72; }
/* --world-block-rgb torna su epteka: la revisione 4 l'aveva tolto perche'
   nessuno lo leggeva piu', adesso lo legge la velatura della fascia. */
.world--epteka { --world-block: var(--epteka); --world-block-rgb: 46 70 80; }

/* Sottotitolo di sezione: una riga sola sotto l'ornamento. Misura corta e
   colore attenuato perche' accompagni il titolo inciso senza competerci.
   L'ornamento della sezione ha margin-bottom: 0 (regola piu' su): era giusto
   quando il titolo era tutto l'header, ma con una riga sotto le finiva
   addosso, quindi l'aria la rimette il sottotitolo. */
.projects-lead {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(31, 46, 53, 0.72);
}

.worlds-grid {
  display: grid;
  gap: 3.25rem;
  margin-top: 3rem;
  text-align: left;      /* la sezione e' centrata; le schede no */
  /* In colonna singola il pannello non deve prendersi tutta la larghezza: su
     un tablet in verticale diventerebbe enorme con la didascalia sperduta in
     un angolo. Sotto i 560 il limite non morde e sul telefono il pannello
     resta a tutta larghezza. */
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .worlds-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    max-width: none;
    /* senza questo la griglia stira le due schede alla stessa altezza e il
       link si allunga sotto la didascalia piu' corta, diventando cliccabile
       nel vuoto. */
    align-items: start;
  }
}

.world {
  display: block;
  text-decoration: none;
  color: var(--ink);
  /* Larghezza e tetto d'altezza del logo, PER MONDO. I due lockup hanno
     rapporti molto diversi (2,36:1 Dasos contro 1,23:1 Mosses): con la stessa
     regola uno schiaccia l'altro. Si cerca il pari peso ottico, non il pari
     numero — vedi .world-logo. */
  --logo-w: 27%;
  --logo-max-h: 33%;
  --logo-pad: 2rem;
}
.world--dasos {
  /* Dasos e' largo piu' del doppio a parita' d'altezza, quindi prende meno
     altezza e piu' larghezza. Il vincolo vero e' la riga piccola "CHRONICLES
     OF PHALIA": sotto una certa dimensione resa smette di leggersi, ed e' lei
     a fissare il minimo. */
  --logo-w: 44%;
  --logo-max-h: 27%;
}

/* --- Il pannello: illustrazione a tutta superficie --- */
/* overflow:hidden adesso si puo': non sborda piu' niente, e ritagliare
   l'immagine con gli angoli del pannello e' piu' semplice che arrotondare
   l'immagine per conto suo.
   L'ombra e' circa un terzo piu' leggera di prima (era 0 20px 40px /.16):
   un'immagine a tutta superficie e' gia' un oggetto, non le serve tanta
   ombra per esserlo — e l'ombra pesante era parte di cio' che la faceva
   leggere come un bottone. */
.world-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: 0 14px 28px rgba(31, 46, 53, 0.11);
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
.world-art {
  display: block;
  width: 100%;
  /* height:auto non e' di contorno: width/height sull'<img> arrivano nel
     foglio come stile vero, non come suggerimento, e senza questa riga
     l'immagine resterebbe alta quanto il file e aspect-ratio non entrerebbe
     mai in gioco. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.9s var(--ease-soft);
}
/* Quale porzione si vede. La Mosses e' quasi gia' 3:2 (1,45:1) e perde solo
   una briciola sopra e sotto. La Dasos e' un dipinto 2,53:1 col druido sulla
   destra: in una finestra 3:2 se ne vede il 59%, e questo numero decide
   quale 59%. */
.wa-mosses { object-position: center; }
.wa-dasos  { object-position: 80% center; }

/* LO SCRIM: e' qui che vive il colore del mondo. Sale dal bordo basso e
   finisce completamente trasparente. Ha un lavoro solo, rendere leggibile il
   logo, e non deve mai diventare una fascia piatta.

   QUATTRO STOP e non due: con due, su un'immagine scura, la rampa e' cosi'
   lunga e cosi' poco contrastata che si vede il banding a fasce. Verificato
   a schermo con un forte boost di contrasto: con quattro non banda.

   ALTEZZA 52% E NON 42%, e stop ridistribuiti. Coi numeri di partenza lo
   scrim non faceva il suo lavoro, ed e' un problema di geometria, non di
   opacita': il logo e' alto fino al 33% del pannello e sta appoggiato a 2rem
   dal fondo, quindi occupava lo scrim dal 21% al 100% — cioe' quasi tutto
   nella sua meta' trasparente. Misurato: dietro il logo dei Muschi l'alpha
   effettiva era 0,20, e su Dasos lo scrim alzava la luminanza di un punto
   invece di abbassarla. Alzando la rampa e spostando gli stop il logo entra
   nella parte che lavora. Piu' alta ma piu' dolce non e' piu' "campo": la
   piattezza viene dall'opacita' alta su tanta superficie, non dall'altezza.

   FORZA PER MONDO (--scrim-k). Un'opacita' sola non puo' servire due
   illustrazioni con fondi cosi' diversi: sotto il logo dei Muschi c'e' acqua
   chiara (luminanza 46), sotto quello di Dasos sottobosco scuro (21). Stessa
   logica gia' usata nel foglio per le ombre di contatto, tarate per
   contesto. Quello che resta costante e' l'obiettivo — il logo si legge —
   non il numero. */
.world-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--world-block-rgb) / calc(0.92 * var(--scrim-k)))   0%,
    rgba(var(--world-block-rgb) / calc(0.76 * var(--scrim-k)))  38%,
    rgba(var(--world-block-rgb) / calc(0.34 * var(--scrim-k)))  72%,
    rgba(var(--world-block-rgb) / 0)                           100%);
}
/* Filo interno di 1px, bianco all'8%: da' al pannello un bordo netto
   sull'avorio senza introdurre colore. Su uno pseudo-elemento e non come
   box-shadow inset sul pannello perche' l'inset verrebbe coperto
   dall'<img>, che e' contenuto e sta sopra lo sfondo. */
.world-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* IL LOGO: marchio appoggiato sull'immagine, non titolo. Basso a sinistra,
   allineato al bordo sinistro della didascalia sotto, cosi' la scheda ha un
   asse verticale unico — logo, titolo, dati, freccia, tutti sulla stessa
   riga di sinistra.
   Dimensionato per LARGHEZZA (nel nuovo impaginato e' quella che conta) con
   un tetto d'altezza di sicurezza. Se il tetto morde, object-fit: contain
   rimpicciolisce l'immagine dentro la scatola e object-position la tiene
   incollata in basso a sinistra, dove la vogliamo. */
.world-logo {
  position: absolute;
  left: var(--logo-pad);
  bottom: var(--logo-pad);
  z-index: 2;
  width: var(--logo-w);
  height: auto;
  max-height: var(--logo-max-h);
  object-fit: contain;
  object-position: left bottom;
}

/* --- La didascalia, sull'avorio: tre elementi, non cinque ---------------
   Via l'occhiello (lo diceva gia' il logo), via la frase descrittiva (che
   ripeteva l'apertura della pagina del libro) e via i TODO su pagine e
   formato. Restano titolo italiano, riga dati, freccia.
   Il titolo italiano non si tocca: col logo in inglese dentro il pannello,
   questo e' l'unico punto del sito in cui il libro ha un nome in italiano.

   Il filo d'oro e la sua animazione restano identici alla revisione 3: il
   grigio a riposo e' il border-top, l'oro un gradiente alto 1px largo zero
   che diventa largo tutto. background-origin: border-box e' la riga che fa
   combaciare i due — senza, l'oro comparirebbe un pixel sotto il grigio,
   cioe' due righe invece di una. */
.world-caption {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(31, 46, 53, 0.14);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0;
  background-size: 0 1px;
  transition: background-size 0.6s var(--ease-soft);
}
.world-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0;
}
/* CONTRASTO — CORRETTO IN REVISIONE 12, ed e' una deroga al perimetro:
   questa riga vive anche nelle tessere della home, che la revisione 4 aveva
   dichiarato finite. La 12 le ha portate in fondo a dasos.php e mosses.php
   (§G) e li' e' venuta fuori la misura: a 0.62 di opacita' l'inchiostro
   sull'avorio sta a 4,03:1, misurato sul rendering. Il minimo di casa e' 4,5
   e questo e' testo di 13px, cioe' esattamente il caso in cui il minimo non
   e' negoziabile. Non e' una scelta di stile da rispettare, e' un difetto, e
   valeva gia' in home prima che questa revisione lo scoprisse.
   0.68 e non 0.66: 0.66 da' 4,51:1, cioe' passa per un centesimo, e un valore
   che sta sul filo lo rimette in discussione il primo fondo leggermente
   diverso. 0.68 da' 4,79:1 e non scurisce la riga in modo percepibile.
   Il grigio resta UNO SOLO fra home e pagine libro: due valori per la stessa
   riga sarebbero stati il rimedio peggiore del male. */
.world-meta {
  margin: 0.6rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(31, 46, 53, 0.68);
}
.world-more { margin-top: 1.1rem; }

/* --- Il movimento --------------------------------------------------------
   Tre cose piccole insieme: l'illustrazione si avvicina (0,9s), il pannello
   si solleva di 3px, il filo della didascalia si tira d'oro (0,6s) e la
   freccia fa un passo (0,3s). Niente che compaia, niente che copra. */
.world:hover .world-art,
.world:focus-visible .world-art { transform: scale(1.05); }
.world:hover .world-panel,
.world:focus-visible .world-panel {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px rgba(31, 46, 53, 0.15);
}
.world:hover .world-caption,
.world:focus-visible .world-caption { background-size: 100% 1px; }
.world:hover .world-more .arrow,
.world:focus-visible .world-more .arrow { transform: translateX(6px); }

/* --- La fascia Epteka -----------------------------------------------------
   Cornice d'oro sull'avorio con dentro una velatura petrolio, e le due
   batterie elfiche che sbordano sopra e sotto il filo.

   Il vuoto dentro la cornice resta il messaggio: questo mondo non e' ancora
   stampato. Ma vuoto e bianco sono due cose diverse, e prima era bianca —
   cornice sottile, testo a sinistra, stato e freccia lontanissimi a destra e
   in mezzo niente. Adesso il petrolio torna come CARTA VELATA e non come
   blocco di colore, e l'oggetto riempie il centro.

   Altezza contenuta di proposito: deve leggersi come una nota a pie' di
   pagina dei due pannelli, non come un terzo elemento di pari peso. */
.world-band {
  position: relative;   /* per la velatura in ::before */
  display: block;
  text-align: left;   /* sta fuori dalla griglia, non ne eredita l'allineamento */
  margin-top: 3rem;
  padding: 1.6rem 1.9rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  color: var(--ink);
  text-decoration: none;
  /* NIENTE overflow: hidden. E' la condizione perche' le batterie possano
     sbordare dal filo d'oro. La velatura non scappa lo stesso, perche' sta in
     uno ::before con inset: 0 e il raggio ereditato. */
  /* LA TRANSIZIONE NON PUO' STARE QUI. Ci stava, e non serviva a niente:
     .world-band e' anche un .reveal, e in 07-pagine-e-piede c'e'
     `.js .reveal { transition: opacity .6s, transform .6s }` — stessa
     specificita' (0,2,0), foglio successivo, quindi vinceva lei e questa
     riga veniva cancellata in silenzio. Vedi .js .world-band.reveal piu'
     sotto, dove la lista e' dichiarata con tre classi e vince. */
}

/* LA VELATURA. Gradiente ORIZZONTALE che nasce dal bordo destro e si spegne
   prima di arrivare al testo, cosi' il petrolio non passa mai sotto le
   parole. Quattro stop come per lo scrim dei pannelli: con due, su una rampa
   cosi' lunga e cosi' poco contrastata, si vedrebbe il banding a fasce.

   L'opacita' e' timida apposta, e ha due motivi. Il primo e' che deve
   sembrare avorio velato: appena comincia a sembrare un rettangolo colorato
   siamo oltre. Il secondo e' che subito sotto comincia la sezione Aetheria,
   che e' petrolio pieno: se questa fascia si carica troppo, diventano due
   blocchi di colore attaccati — che e' esattamente il difetto per cui la
   fascia era stata svuotata nella revisione 4. */
.world-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(var(--world-block-rgb) / 0.13)  0%,
    rgba(var(--world-block-rgb) / 0.08) 20%,
    rgba(var(--world-block-rgb) / 0.03) 34%,
    rgba(var(--world-block-rgb) / 0)    48%);
}
/* La velatura e' uno pseudo-elemento posizionato, quindi verrebbe dipinta
   SOPRA il contenuto in flusso: i tre figli si rimettono davanti da soli. */
.band-text,
.band-object,
.band-aside { position: relative; z-index: 1; }

/* IL SOLLEVAMENTO USA translate, NON transform, e non e' un vezzo.
   Con transform questa riga era morta: .js .reveal.is-visible impone
   `transform: none` con tre classi (0,3,0) contro le due di
   .world-band:hover (0,2,0), quindi appena la fascia entrava in pagina il
   sollevamento smetteva di esistere — ed e' esattamente il difetto che
   Francesco ha visto, la fascia Epteka ferma mentre Mosses e Dasos si
   alzano. `translate` e' una proprieta' a se': il reveal non la tocca, non
   c'e' nessuna gara di specificita' da vincere, e i due movimenti possono
   convivere. Stessi 3px dei due pannelli. */
.world-band:hover,
.world-band:focus-visible { translate: 0 -3px; }
.world-band .eyebrow { margin-bottom: 0.7rem; }

/* IL LOCKUP NON RIUSA PIU' QUELLO DELL'HERO.
   Prima .band-lockup montava .hero-lockup con le sue righe d'ornamento e i
   diamanti. Nell'hero quel lockup funziona perche' EPTEKA e' enorme e gli
   ornamenti corrono esattamente per la sua larghezza; qui il titolo era
   piccolo e gli ornamenti finivano PIU' LARGHI della parola, quindi il blocco
   si sbilanciava e la filigrana diventava decorazione per la decorazione.
   Adesso: titolo grande, sottotitolo come riga semplice sotto, e tutti e due
   allineati allo stesso bordo sinistro dell'occhiello e del testo. Un asse
   solo.
   .hero-lockup e .ornament-* restano intatte: sono dell'hero. */
.band-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
.band-sub {
  margin: 0.5rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.band-line {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(31, 46, 53, 0.78);
}
/* L'unico petrolio pieno della cornice, e arriva dal token del mondo invece
   che a mano: cosi' la classe modificatrice comanda davvero il colore. */
.band-status {
  margin: 0 0 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--world-block);
}
/* .arrow-link nasce per i fondi scuri ed e' bianco caldo: adesso che la
   fascia sta sull'avorio serve .on-light nel markup, se no il link e'
   praticamente invisibile. */
.band-aside { margin-top: 1.2rem; }
.world-band:hover .band-more .arrow,
.world-band:focus-visible .band-more .arrow { transform: translateX(6px); }

/* LE BATTERIE.
   Sono l'unica cosa che esce dal riquadro, ed e' il punto: di Epteka esiste
   ancora solo la tecnologia. Il filo d'oro interrotto dall'oggetto e' cio'
   che rende la cornice viva invece che un campo di form.

   Niente drop-shadow e niente box-shadow: il render si porta gia' il suo
   bagliore, e non ha ombra a terra — per questo galleggia sull'avorio invece
   di sembrarci appoggiato.

   DOVE STA, E PERCHE' NON PIU' IN MEZZO. Prima era la colonna centrale del
   flex, fra il testo e lo stato. In mezzo e' la posizione piu' debole che
   ci sia: l'oggetto non e' ancorato a niente, sborda sopra e sotto in parti
   uguali — quindi sembra trapassare la fascia invece di abitarla — e a 350px
   su una fascia alta 250 pesava piu' della parola EPTEKA, che in una nota a
   pie' di pagina e' il contrario di quello che deve succedere.
   C'era anche un problema di composizione: la velatura petrolio nasce a
   DESTRA, e con l'oggetto al centro colore e luce non si spiegavano a
   vicenda. Adesso l'oggetto e' ancorato al bordo destro (order: 3, dopo lo
   stato) e la velatura diventa la sua luce. Un oggetto attaccato a un bordo
   si legge come voluto; uno al centro sembra un livello lasciato li'.

   COME SBORDA, senza position: absolute. Il margine verticale negativo vale
   meta' dell'altezza: la scatola dei margini viene alta ZERO, la riga flex
   la ignora — quindi la fascia non cresce — e align-self: center la centra
   sulla riga. Lo sbordo verticale che ne esce e' (altezza oggetto - altezza
   contenuto) / 2 - padding, per lato; quello a destra e' il margin-inline
   negativo, che porta l'oggetto oltre il filo d'oro.
   .cutout esiste gia' nel foglio per le sezioni luogo e NON e' stato
   dirottato qui: serve ad altro e si posiziona in un altro modo. */
.band-object {
  display: block;
  height: var(--band-obj-h, 150px);
  width: auto;
  margin-inline: auto;
  margin-block: 1.2rem 0;
}

@media (min-width: 900px) {
  .world-band {
    display: flex;
    align-items: flex-end;
    /* VIA space-between, ed e' una conseguenza del riordino. Con due colonne
       funzionava; con tre, lo spazio avanzato si spartisce in due vuoti
       uguali e la colonna di mezzo — che adesso e' lo stato — finisce a
       galleggiare in mezzo al niente, allineata a destra dentro una scatola
       che non tocca nessun bordo. Con flex-start piu' il margine automatico
       su .band-aside, tutto l'avanzo va in un vuoto solo: il testo resta a
       sinistra, e stato e oggetto si compattano a destra come un gruppo. Che
       e' anche il punto della revisione — mettere peso dove la velatura
       promette qualcosa. */
    justify-content: flex-start;
    /* Con l'oggetto ancorato a destra invece che in mezzo serve meno aria
       fra le colonne: era 2.25rem. */
    gap: 1.5rem;
    padding: 1.8rem 2.2rem;
    /* Era 5.5rem, alzato quando l'oggetto era alto 350 e stava al centro: da
       li' arrivava a sfiorare il box di "Entra nella foresta". A 240 e sul
       bordo destro quel rischio non c'e' piu', quindi si torna al valore che
       la sezione usa altrove per staccare i blocchi. Rimisurato dopo il
       cambio: fra il bordo alto dell'oggetto e i link delle didascalie
       restano fra 88 e 96px a ogni larghezza da 900 in su, molto oltre i 50
       che ci si era dati come minimo. */
    margin-top: 3.5rem;
  }
  /* La colonna destra non si stringe e non va a capo: stato e link sono due
     righe corte e devono restare due righe corte. */
  .band-aside {
    margin-top: 0;
    /* raccoglie tutto lo spazio avanzato: vedi justify-content qui sopra */
    margin-left: auto;
    flex: 0 0 auto;
    text-align: right;
    order: 2;
  }
  .band-object {
    /* 240 e non piu' 350: a 350 l'oggetto pesava piu' del titolo, e in una
       fascia che deve leggersi come nota a pie' di pagina la gerarchia va
       nell'altro verso — prima EPTEKA, poi l'oggetto. */
    --band-obj-h: 240px;
    order: 3;              /* dopo lo stato, non in mezzo */
    flex: 0 0 auto;
    align-self: center;
    /* Il margine destro negativo e' cio' che lo porta fuori dal filo d'oro.
       Vedi anche overflow-x: clip sulla sezione: senza, questo sbordo
       genererebbe una barra di scroll orizzontale alle larghezze in cui il
       padding del .container e' piu' stretto dello sbordo stesso. */
    margin-inline: 0 -3.5rem;
    margin-block: calc(var(--band-obj-h) / -2);
  }

  /* L'ALONE: la luce che l'oggetto getta sull'avorio.
     ::before e' gia' la velatura, quindi l'alone va su ::after, che era
     libero. Ancorato al bordo destro cade esattamente dove sta l'oggetto,
     quindi non serve nessun wrapper nel markup — e un <img> pseudo-elementi
     non ne ha.
     #7FB8D8 e' l'accento Epteka gia' in tavolozza: non entra in pagina
     nessun colore nuovo. L'opacita' e' timida come per la velatura: deve
     sembrare che l'avorio sia illuminato, non che ci sia un cerchio azzurro
     disegnato sopra. Solo da 900 in su: sotto, l'oggetto e' piccolo e in
     float, e l'alone non c'e' — che va benissimo. */
  .world-band::after {
    content: "";
    position: absolute;
    z-index: 0;            /* dietro i figli, che stanno a z-index 1 */
    right: -1rem;
    top: 50%;
    translate: 0 -50%;
    width: 22rem;
    height: 19rem;
    pointer-events: none;
    background: radial-gradient(circle,
      rgba(127, 184, 216, 0.42)  0%,
      rgba(127, 184, 216, 0.16) 42%,
      rgba(127, 184, 216, 0)    70%);
  }
}
/* LA FASCIA SI SVEGLIA SOLO SE INTERROGATA.
   Prima qui c'erano due animazioni infinite: le batterie andavano alla deriva
   e l'alone respirava dal momento in cui la fascia entrava in pagina, per
   sempre. Francesco le ha tolte, e il motivo regge: un oggetto che oscilla da
   solo mentre leggi il paragrafo accanto e' rumore, e in una fascia che deve
   leggersi come nota a pie' di pagina e' rumore due volte. Il movimento
   adesso e' una RISPOSTA: c'e' solo mentre il mouse sta sulla fascia, e
   quando il mouse se ne va sparisce.

   LA FASCIA SI COMPORTA COME I DUE PANNELLI. Mosses e Dasos, passandoci
   sopra, si sollevano di 3px e l'ombra si approfondisce; qui il
   sollevamento c'era gia' ma non si vedeva, perche' la fascia non ha ombra a
   riposo — una cornice piatta che sale di 3px su un fondo piatto non sembra
   salire, sembra spostarsi. Adesso sale con la stessa ombra dei pannelli
   (0 20px 36px / .15, copiata da .world:hover .world-panel), che a riposo
   e' la stessa geometria a opacita' zero: cosi' la transizione ha da dove
   partire e la fascia a riposo resta la cornice piatta di sempre.

   COSA SUCCEDE, in ordine di lettura:
   1. la fascia si alza di 3px e mette l'ombra, come Mosses e Dasos;
   2. EPTEKA cambia colore, dall'inchiostro all'azzurro del mondo;
   3. l'alone azzurro dietro le batterie sale di luce e di 8px;
   4. le batterie si alzano di 18px e cominciano a fluttuare.

   IL BORDO NON FA PIU' NIENTE. Ci sono passate due versioni: una scintilla a
   battute (lampeggiava) e poi un anello d'oro che si accendeva restando
   fermo. Fuori tutte e due su richiesta di Francesco — il filo d'oro e' la
   costante di casa e adesso resta la costante anche nell'hover. Il
   box-shadow che serviva all'anello e' tornato a fare l'ombra del
   sollevamento, che e' il suo mestiere.

   IL GANCIO E' L'INTERA FASCIA, E NON SOLO IL PULSANTE. Il primo tentativo
   agganciava :has(.band-more:hover), cioe' esattamente il link "Scopri
   Epteka": funzionava, ma nessuno lo trovava — quel link e' alto 24px in un
   angolo di una fascia alta 250, e per accendere la cornice bisognava
   indovinare il pixel. Tutta la fascia e' comunque UN SOLO <a> che porta a
   epteka.php, quindi il bersaglio giusto e' tutto il rettangolo.
   :focus-visible sta in coda a ogni selettore perche' da tastiera non esiste
   "passare sopra": il fuoco cade sulla fascia, ed e' li' che la risposta
   deve comparire. */

/* Lo stato a riposo, dichiarato per intero: e' da qui che parte la
   transizione ed e' qui che si torna quando il mouse esce. */
.world-band {
  box-shadow: 0 20px 36px rgba(31, 46, 53, 0);
}
/* TRE CLASSI PER BATTERE .js .reveal (0,2,0), che sta in un foglio
   successivo e altrimenti azzera questa lista. Le prime due righe sono quelle
   del reveal e vanno ripetute qui dentro, se no la fascia entrerebbe in
   pagina di scatto; il ritardo di 0,24s e' quello che .reveal-2 le da' per lo
   sfalsamento, e va scritto per esteso perche' `transition-delay` di
   .js .reveal-2 perde contro questa regola — se lo lasciassi implicito
   partirebbe a zero e la fascia salirebbe insieme al pannello accanto invece
   che dopo. Le tre righe dell'hover NON hanno ritardo: una risposta al mouse
   che parte un quarto di secondo dopo sembra il sito che arranca. */
.js .world-band.reveal {
  transition:
    opacity      0.6s var(--ease-soft) 0.24s,
    transform    0.6s var(--ease-soft) 0.24s,
    translate    0.5s var(--ease-soft),
    box-shadow   0.5s var(--ease-soft),
    border-color 0.5s var(--ease-soft);
}
.world-band:hover,
.world-band:focus-visible {
  box-shadow: 0 20px 36px rgba(31, 46, 53, 0.15);
}

/* IL TITOLO NON CAMBIA COLORE.
   C'era un viraggio della parola EPTEKA verso --epteka-steel all'hover, ed e'
   uscito su richiesta di Francesco: la fascia ha gia' due segnali di
   accensione (l'ombra che si posa e l'alone dietro le batterie che sale a
   piena luce), e un terzo sulla tipografia rendeva il titolo la cosa che si
   muove di piu' invece dell'oggetto. Il testo resta sull'inchiostro, che sul
   fondo avorio e' il contrasto massimo che abbiamo.
   Tolta anche la transizione su color: senza il cambio non aveva piu' nulla
   da animare. */

@media (min-width: 900px) {
  /* L'alone azzurro non respira piu' da solo: sta fermo, un po' piu' basso di
     prima (0.62 invece di 1), e sale a piena luce solo con l'accensione. Sale
     anche di 8px, per seguire le batterie che si alzano: se restasse fermo si
     vedrebbe l'oggetto staccarsi dalla propria luce. */
  .world-band::after {
    opacity: 0.62;
    transition: opacity 0.5s var(--ease-soft), translate 0.6s var(--ease-soft);
  }
  .world-band:hover::after,
  .world-band:focus-visible::after {
    opacity: 1;
    translate: 0 calc(-50% - 8px);
  }

  /* LE BATTERIE: PRIMA SI ALZANO, POI FLUTTUANO.
     Il salire e il fluttuare sono su DUE PROPRIETA' DIVERSE apposta —
     `translate` per il sollevamento, `transform` per il galleggio — perche'
     sono proprieta' distinte e componibili: se stessero tutte e due dentro
     transform, l'animazione vincerebbe sulla transizione e il ritorno in
     basso sarebbe uno scatto secco invece di una discesa.
     L'animazione c'e' sempre ma e' in pausa: togliendola e rimettendola,
     l'oggetto scatterebbe al fotogramma 0 nel momento in cui il mouse esce.
     In pausa si congela dov'e' — al massimo 6px e 0,4 gradi fuori asse, su un
     oggetto alto 240px non si vede — e riparte da li' al giro dopo.
     3,4 secondi e non 7,5 come la vecchia deriva: quella doveva essere
     impercettibile, questa e' una risposta a un gesto e deve leggersi. */
  .band-object {
    animation: band-object-float 3.4s ease-in-out infinite;
    animation-play-state: paused;
    transition: translate 0.55s var(--ease-soft);
  }
  .world-band:hover .band-object,
  .world-band:focus-visible .band-object {
    animation-play-state: running;
    translate: 0 -18px;
  }
}

@keyframes band-object-float {
  /* Il fotogramma 0 e' l'oggetto FERMO E DRITTO: e' anche il fotogramma su cui
     l'animazione sta in pausa a riposo, quindi il riposo dev'essere il nulla. */
  0%, 100% { transform: none; }
  25%      { transform: translateY(-6px) rotate(-0.4deg); }
  75%      { transform: translateY(6px)  rotate(0.4deg); }
}

/* Sotto i 900 il layout va in colonna e il testo prende tutta la larghezza:
   li' una velatura orizzontale finirebbe sotto le parole, quindi si gira dal
   basso e si tiene piu' bassa. */
@media (max-width: 899px) {
  .world-band::before {
    background: linear-gradient(to top,
      rgba(var(--world-block-rgb) / 0.14)  0%,
      rgba(var(--world-block-rgb) / 0.09) 26%,
      rgba(var(--world-block-rgb) / 0.035) 48%,
      rgba(var(--world-block-rgb) / 0)    66%);
  }
  /* In colonna l'oggetto non sborda: sopra e sotto ci sono le parole, e
     uscire dal filo vorrebbe dire finirci addosso.

     FLOAT E NON UN BLOCCO IN COLONNA. Impilato prendeva una fascia di
     altezza tutta sua e la cornice passava da 309 a 498px — alta quanto un
     pannello, mentre deve leggersi come una nota a pie' di pagina dei due
     pannelli. In float lo stato e la freccia gli scorrono a fianco e
     l'altezza torna contenuta. Non e' un rischio di collisione: un float non
     si sovrappone mai alle righe di testo, sono loro ad accorciarsi. */
  .band-object {
    --band-obj-h: 150px;
    float: right;
    margin: 0 0 0.4rem 1.5rem;
  }
}
/* In colonna stretta non ha lo spazio per esistere senza rubare la riga al
   testo, quindi esce. */
@media (max-width: 699px) {
  .band-object { display: none; }
}

/* --- I quattro volumi ----------------------------------------------------
   SOSPESO — non in uso in pagina dalla revisione 5, vedi index.php.
   Il markup e' li', commentato, con scritto a quali condizioni torna. Queste
   regole restano dove sono e come sono: quando il blocco rientra, rientra
   senza doverle riscrivere.
   I mockup usciti dai pannelli si riuniscono qui, dove essere quattro libri
   affiancati e' l'informazione invece che una ripetizione.

   ALLINEATI PER ALTEZZA e non per larghezza: i quattro render escono tutti
   alti 1000px ma larghi da 598 a 689, quindi a larghezza uguale sembrerebbero
   libri di formati diversi — e non lo sono.

   NIENTE OMBRA AGGIUNTA: i file se la portano gia' dipinta dentro. Un
   box-shadow o un drop-shadow qui darebbe due ombre sfalsate.

   Le coppie sono tenute insieme da un contenitore invece che da un gap
   diverso in una griglia sola: cosi' quando lo spazio finisce la riga va a
   capo TRA le coppie e non dentro, e il 2x2 si forma da solo con i due
   volumi dei Muschi sopra e i due di Dasos sotto. */
.volumes {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(31, 46, 53, 0.1);
}
.volumes-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.volumes-lead {
  max-width: 46ch;
  margin: 0.8rem auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(31, 46, 53, 0.72);
}
.volumes-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 4rem;   /* tra le coppie */
  margin-top: 2.5rem;
}
.volumes-pair {
  display: flex;
  gap: 1.5rem;        /* dentro la coppia */
}
.volume {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 132px;
  text-align: center;
}
.volume img {
  height: 190px;
  width: auto;
  margin: 0 auto;
  transition: transform 0.45s var(--ease-soft);
}
.volume:hover img,
.volume:focus-visible img { transform: translateY(-4px); }
.volume-name {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--bronze);
}

@media (max-width: 899px) {
  .world { --logo-pad: 1.5rem; }
  .volumes-row { gap: 2.25rem 3rem; }
  .volume { width: 118px; }
  .volume img { height: 165px; }
}
@media (max-width: 460px) {
  .world {
    --logo-pad: 1.1rem;
    /* Il pannello e' molto piu' stretto ma il logo deve restare leggibile:
       in percentuale cresce, in pixel resta comunque piu' piccolo. */
    --logo-w: 34%;
    --logo-max-h: 34%;
  }
  .world--dasos { --logo-w: 56%; --logo-max-h: 30%; }
  .volumes-row { gap: 2rem 1.75rem; }
  .volume { width: 100px; }
  .volume img { height: 140px; }
  .volume-name { font-size: 0.6875rem; }
}