/* ===============================================================
   AGARTHA PUBLISHING — foglio unico per galleria e scheda.
   Desktop di fine anni Novanta: la leggenda della Terra Cava e'
   vissuta li', sui siti a sfondo piastrellato.
   Due font: Archivo per cio' che si legge, Silkscreen solo per la
   cornice di sistema. Mai Cinzel.
   =============================================================== */
:root{
  --face:#C0C0C0; --face-dim:#B0B0B0;
  --lite:#FFFFFF; --shadow:#808080; --dark:#0A0A0A; --ink:#0A0A0A;
  --title-a:#06256B; --title-b:#2E7FD4;
  --title-off-a:#6E6E7A; --title-off-b:#A9A9B6;
  --brand-lite:#8FBEE4;
  /* Rosso imperiale: il cinabro dei muri pompeiani, non uno scarlatto
     da insegna. Sta su bianco, mai come fondo di una pagina intera. */
  --rosso:#9D1E14; --rosso-cupo:#6E1209;
  --amber:var(--rosso); --paper:#FFFFFF;
  --wall:url('img/wall-gallery.jpg'); --wall-size:170px;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.56;color:var(--ink);
  background:#0B1726; overflow-x:hidden;overflow-wrap:break-word;
  padding:0 16px 34px;
}
/* due strati: la piastrella, e sopra righe da tubo catodico + velo */
.desk{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--wall) repeat center / var(--wall-size);
  animation:tinta 48s ease-in-out infinite alternate;
}
/* la carta da parati e' alzata di un paio di punti: sotto lo schermo
   centrale resta comunque coperta, ma le fasce laterali adesso vivono */
@keyframes tinta{
  from{filter:hue-rotate(-14deg) saturate(1.06) brightness(1.08)}
  to  {filter:hue-rotate(16deg)  saturate(1.24) brightness(1.16)}
}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 90% at 50% 16%, rgba(7,52,88,.24) 0%, rgba(4,12,22,.74) 100%);
}
/* La scia del cursore. Sta SOPRA tutto (tranne il carrello): deve passare
   anche sopra lo schermo, perche' e' li' che vive il cursore — relegata
   sotto si vedeva solo nelle fasce laterali, cioe' quasi mai, e quel poco
   che si vedeva sembrava comparire a caso lontano dal mouse. `screen`
   perche' la scia somma luce invece di coprire. */
/* width/height espliciti: `inset:0` NON allarga un canvas. E' un elemento
   rimpiazzato, e con width:auto vince la sua dimensione intrinseca (300x150).
   Finche' misura() leggeva innerWidth la cosa non si notava — era il JS a
   portare l'intrinseca a tutto schermo. Passando a getBoundingClientRect il
   canvas leggeva 300x150, si riconfermava, e restava un francobollo. */
.scia{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .desk{animation:none} .scia{display:none} }
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px dotted var(--ink);outline-offset:2px}

/* ---------- rilievi ---------- */
.out{border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);box-shadow:inset 1px 1px 0 var(--face),inset -1px -1px 0 var(--shadow)}
.in {border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow);box-shadow:inset 1px 1px 0 var(--dark),inset -1px -1px 0 var(--face)}

/* ---------- insegna scorrevole ---------- */
.marquee{position:relative;z-index:2;margin:0 -16px 18px;background:#060B13;
  border-bottom:2px solid #3570A7;overflow:hidden;padding:9px 0}
.marquee span{display:inline-block;white-space:nowrap;
  font-family:'Silkscreen','Archivo',monospace;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brand-lite);animation:slide 26s linear infinite}
@keyframes slide{from{transform:translateX(8%)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){ .marquee span{animation:none;transform:none;padding-left:16px} }

/* ---------- finestre ---------- */
.win{position:relative;z-index:2;max-width:1060px;margin:0 auto 26px;background:var(--face);padding:3px}
.titlebar{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 7px;
  background:linear-gradient(90deg,var(--title-a),var(--title-b));color:#fff}
.titlebar.off{background:linear-gradient(90deg,var(--title-off-a),var(--title-off-b))}
.titlebar h1,.titlebar h2{margin:0;font-family:'Silkscreen','Archivo',monospace;
  font-size:clamp(10px,2.4vw,13px);font-weight:700;line-height:1.5;text-transform:uppercase;
  letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titlebar .grip{flex:1}
.btns{display:flex;gap:3px;flex:none}
.sq{width:19px;height:17px;background:var(--face);padding:0;cursor:default;
  border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);
  display:grid;place-items:center;font-family:'Silkscreen',monospace;font-size:9px;color:var(--ink);line-height:1}

/* ---------- la barra dei menu E' la navigazione del sito ---------- */
.menubar{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding:3px 4px;
  border-bottom:1px solid var(--shadow);background:var(--face)}
.menubar a{display:inline-block;padding:3px 10px;font-size:13px;text-decoration:none;color:var(--ink)}
.menubar a:hover,.menubar a:focus-visible{background:var(--title-a);color:#fff}
.menubar a u{text-decoration:underline}
.menubar .right{margin-left:auto;font-weight:600}
.menubar .back{font-family:'Silkscreen','Archivo',monospace;font-size:11px}

.body-area{background:var(--face);padding:clamp(14px,2.6vw,22px)}
.statusbar{display:flex;gap:6px;flex-wrap:wrap;padding:4px;background:var(--face)}
.statusbar .cell{flex:1;min-width:92px;padding:3px 8px;font-size:11px;color:#2B2B2B;
  font-family:'Silkscreen','Archivo',monospace;
  border:1px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow)}

/* ---------- bottoni ---------- */
.btn{font-family:'Silkscreen','Archivo',monospace;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--face);
  padding:11px 22px;cursor:pointer;display:inline-block;text-align:center;
  border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);
  box-shadow:inset 1px 1px 0 #EAEAEA, inset -1px -1px 0 var(--shadow)}
.btn:active{border-color:var(--dark) var(--lite) var(--lite) var(--dark);box-shadow:none}
.btn.primary{outline:2px solid var(--ink);outline-offset:1px;font-weight:700}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--shadow);text-shadow:1px 1px 0 var(--lite);cursor:default}

/* ---------- testata della collana ---------- */
.masthead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  background:var(--paper);padding:clamp(22px,4.4vw,38px) clamp(16px,3vw,26px)}
.masthead img{width:clamp(62px,9vw,88px);opacity:.92;aspect-ratio:500/199}
.masthead h2{margin:0;font-size:clamp(21px,4.6vw,38px);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;text-indent:.14em;line-height:1.16;max-width:100%;text-wrap:balance}
.masthead p{margin:0;max-width:56ch;color:#4A403D;font-size:clamp(14px,2.3vw,16px);text-wrap:balance}
/* L'insegna della libreria: solo aquila e nome. Senza il sommario sotto,
   il blocco va stretto, altrimenti resta un campo di carta vuoto fra il
   logo e le icone — che e' esattamente cio' che si voleva togliere. */
.masthead.insegna{gap:10px;padding:clamp(18px,3.2vw,30px) clamp(16px,3vw,26px) clamp(16px,2.8vw,26px)}

/* ---------- griglia della galleria ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2.2vw,18px);background:var(--paper);padding:clamp(14px,2.6vw,20px)}
.card{display:flex;flex-direction:column;gap:9px;background:#fff;padding:12px}
@media (max-width:860px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:500px){ .grid{grid-template-columns:1fr} }
.card .shot{display:block;background:#141414;overflow:hidden;position:relative}
.card .shot img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .3s ease}
.card .shot:hover img{transform:scale(1.035)}
.card .flag{position:absolute;left:0;top:0;padding:4px 9px;background:var(--title-a);color:#fff;
  font-family:'Silkscreen',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.card .flag.soon{background:#5C5C5C}
.card .who{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:#5A5A5A;text-indent:.17em}
.card .what{margin:0;font-size:16px;font-weight:700;line-height:1.24}
.card .what a{text-decoration:none}
.card .what a:hover{text-decoration:underline}
.card .yr{margin:0;font-size:11.5px;color:#7A3E33}
.card .acts{margin-top:auto;padding-top:10px;border-top:1px solid #E4CFC9;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card .pr{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;flex:1 0 auto}
.card .pr.soon{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6A6A6A;font-family:'Silkscreen','Archivo',monospace}
.card .btn{padding:8px 12px;font-size:10px}

/* ---------- scheda del volume ---------- */
.feature{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(16px,3vw,28px);
  background:var(--paper);padding:clamp(14px,2.6vw,22px)}
@media (max-width:820px){ .feature{grid-template-columns:1fr} }
.feature .shot{width:300px;max-width:100%;margin-inline:auto}
.feature .shot img{box-shadow:3px 3px 0 rgba(0,0,0,.42);aspect-ratio:2/3;object-fit:cover}
.tag{display:inline-block;margin:0 0 10px;padding:3px 9px;background:var(--title-a);color:#fff;
  font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.feature .author{margin:0;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#4A4A4A;text-indent:.24em}
.feature h3,.feature .titolone{margin:6px 0 0;font-size:clamp(25px,5vw,40px);font-weight:800;line-height:1.06;text-wrap:balance}
.feature .orig{margin:7px 0 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#7A3E33;text-indent:.14em}
.feature p.body{margin:14px 0 0;max-width:60ch;font-size:14.5px;color:#23201B}
.props{margin:16px 0 0;padding:10px 12px;background:#fff;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px}
.props dt{color:#5A5A5A;font-family:'Silkscreen','Archivo',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;align-self:center}
.props dd{margin:0;font-weight:500}
.purchase{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px}
.amount{font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.vat{font-size:11px;color:#5A5A5A;font-family:'Silkscreen','Archivo',monospace;letter-spacing:.06em}
.purchase .ship{flex-basis:100%;margin:0;font-size:12.5px;color:#4A4A4A}

/* ---------- leggimi ---------- */
.readme .body-area{background:var(--paper);padding:0}
.txt{padding:clamp(16px,3vw,26px);font-size:14.5px;color:#1C1C1C}
.txt h3{margin:0 0 6px;font-family:'Silkscreen','Archivo',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.txt p{margin:0;max-width:72ch;color:#33302B}
.txt .para + .para{margin-top:22px}
.txt hr{border:0;border-top:1px dashed #C79A90;margin:22px 0}
.txt .head{font-family:'Silkscreen','Archivo',monospace;font-size:11px;color:#6A6A6A;letter-spacing:.08em;line-height:1.9;margin:0 0 18px}
/* ---- testi lunghi: informativa, contatti ---- */
.txt h4{margin:18px 0 6px;font-size:14px;font-weight:800;color:#1C1C1C}
.txt .para > h3 + p,
.txt h4 + p{margin-top:0}
.txt p + p{margin-top:9px}
.txt a{color:#06256B;text-underline-offset:2px}
.txt a:hover{background:#06256B;color:#fff;text-decoration:none}
.txt ul{margin:9px 0 0;padding-left:20px;max-width:72ch;color:#33302B}
.txt li{margin:0 0 6px}
.txt li:last-child{margin-bottom:0}
.txt .recapito{margin:0 0 6px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.txt .anagrafica{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:5px 18px;max-width:72ch}
@media (max-width:520px){ .txt .anagrafica{grid-template-columns:1fr;gap:1px 0} }
.txt .anagrafica dt{font-family:'Silkscreen','Archivo',monospace;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:#6A6A6A;align-self:center}
.txt .anagrafica dd{margin:0;color:#1C1C1C;overflow-wrap:anywhere}
@media (max-width:520px){ .txt .anagrafica dd{margin-bottom:10px} }

/* ---------- carrello ---------- */
.cart-rows{background:var(--paper);padding:clamp(12px,2.4vw,18px);display:flex;flex-direction:column;gap:10px}
.empty-note{margin:0;padding:22px 4px;text-align:center;color:#6A6A6A;font-family:'Silkscreen','Archivo',monospace;font-size:11px;letter-spacing:.07em}
.row{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:10px 14px;align-items:center;background:#fff;padding:10px 12px}
@media (max-width:560px){ .row{grid-template-columns:52px minmax(0,1fr);row-gap:10px} .row .qty,.row .line{grid-column:2;justify-self:start} }
.row img{width:52px;height:78px;object-fit:cover}
.row .ttl{margin:0;font-size:15px;font-weight:700;line-height:1.26}
.row .meta{margin:2px 0 0;font-size:11.5px;color:#6A6A6A}
.qty{display:flex;align-items:center}
.qty button{width:28px;height:28px;background:var(--face);color:var(--ink);cursor:pointer;padding:0;
  border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);
  font-family:'Silkscreen',monospace;font-size:12px;line-height:1}
.qty button:active{border-color:var(--dark) var(--lite) var(--lite) var(--dark)}
.qty output{min-width:38px;text-align:center;padding:5px 0;background:#fff;
  border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow);
  font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}
.line{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.totals{background:var(--paper);padding:0 clamp(12px,2.4vw,18px) clamp(12px,2.4vw,18px)}
.totals dl{margin:0;background:#fff;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:7px 16px}
.totals dt{font-size:13.5px;color:#3A3A3A}
.totals dd{margin:0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.totals .big dt,.totals .big dd{font-size:19px;font-weight:800;padding-top:9px;border-top:1px solid #E4CFC9}
.totals dt.hint,.totals dd.hint{color:#7A3E33;font-size:12.5px;font-weight:500}
.nudge{margin:10px 0 0;padding:9px 12px;background:#FCEDE9;border-left:3px solid var(--amber);font-size:13px;color:#4A241C}
.inv{margin:14px 0 0;background:#fff;padding:13px 14px}
.inv legend{padding:0 6px;font-family:'Silkscreen','Archivo',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#3A3A3A}
.check{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.check input{margin:3px 0 0;width:15px;height:15px;flex:none;accent-color:var(--title-a)}
.check span{font-size:14.5px;font-weight:600}
.inv .law{margin:7px 0 0;padding-left:24px;font-size:12.5px;color:#6A6A6A}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px 13px;margin-top:14px}
.fields.hidden{display:none}
.fields label{display:flex;flex-direction:column;gap:4px}
.fields span{font-family:'Silkscreen','Archivo',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A5A5A}
.fields input{font-family:'Archivo',sans-serif;font-size:14px;padding:7px 9px;background:#fff;color:var(--ink);
  border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow)}
.fields .wide{grid-column:1 / -1}
.checkout{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:16px}
.checkout .btn{padding:13px 26px;font-size:12px}
.checkout .safe{margin:0;font-size:12.5px;color:#4A4A4A}

/* ---------- finestra di avviso ---------- */
/* SOPRA il carrello (70), che e' una finestra sovrapposta: a 60 questo
   avviso si apriva DIETRO di esso e sembrava che il bottone «Vai al
   pagamento» non facesse niente. */
.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:16px;background:rgba(4,10,18,.55)}
.modal.show{display:grid}
.dialog{width:min(430px,100%);background:var(--face);padding:3px}
.dialog .msg{display:flex;gap:14px;align-items:flex-start;padding:20px 18px 6px}
.dialog .bang{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--title-a);color:#fff;font-family:'Silkscreen',monospace;font-size:17px}
.dialog p{margin:0;font-size:14px}
.dialog .act{display:flex;justify-content:center;padding:16px}
.dialog .sq{cursor:pointer}

/* ---------- colophon ---------- */
.colophon{position:relative;z-index:2;width:max-content;max-width:min(100%,1100px);margin:18px auto 0;
  padding:10px 20px;text-align:center;background:rgba(6,11,19,.86);border:1px solid rgba(143,190,228,.26);
  font-family:'Silkscreen','Archivo',monospace;font-size:10.5px;line-height:2;color:#CFE2F3}
.colophon a{color:#fff}
.sep{opacity:.5;padding:0 6px}

/* N rovesciata come nel logo: letter-spacing:0 obbligatorio, altrimenti dopo il
   ribaltamento la spaziatura finisce a sinistra e la lettera si stacca */
.n{display:inline-block;font-style:normal;
   transform:scaleX(-1) translateX(var(--ls,0em))}

/* ---------- iscrizione alla newsletter ---------- */
.regalo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3.6vw,40px);align-items:center;background:var(--paper);padding:clamp(16px,3vw,26px)}
@media (max-width:760px){ .regalo{grid-template-columns:1fr;gap:22px} }
.regalo .pila{display:flex;gap:10px;justify-content:center}
.regalo .pila img{width:31%;max-width:124px;box-shadow:3px 3px 0 rgba(0,0,0,.4);aspect-ratio:2/3;object-fit:cover}
.regalo .pila img:nth-child(2){transform:translateY(-10px)}
.regalo h3{margin:0;font-size:clamp(21px,4vw,30px);font-weight:800;line-height:1.1;text-wrap:balance}
.regalo p.dice{margin:9px 0 0;font-size:12.5px;color:#33302B;max-width:48ch}
.regalo form{margin:16px 0 0;display:flex;flex-direction:column;gap:11px}
.riga{display:flex;flex-wrap:wrap;gap:9px}
.riga input[type="email"]{flex:1 1 210px;min-width:0;font-family:'Archivo',sans-serif;font-size:15px;
  padding:11px 12px;background:#fff;color:var(--ink);
  border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow)}
.riga .btn{flex:0 0 auto}
.consenso{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:12.5px;color:#4A4742}
.consenso input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--title-a)}
.consenso a{color:var(--title-a)}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[data-esito]{margin:0;padding:9px 12px;font-size:13px}
[data-esito][data-stato="fatto"] {background:#E7F2E4;border-left:3px solid #3F7D33;color:#20401B}
[data-esito][data-stato="errore"]{background:#FBEDE9;border-left:3px solid #A4341C;color:#4A1A10}

/* ===============================================================
   IL CALEIDOSCOPIO STA AI LATI. AL CENTRO C'E' LO SCHERMO.

   Prima le icone erano appoggiate direttamente sulla carta da parati
   e non si leggevano: troppo rumore sotto. Ora il centro e' una
   superficie unica e calma che corre dalla cima al fondo — lo
   schermo — e il caleidoscopio resta nelle fasce laterali, dove fa
   atmosfera senza disturbare.

   Dentro lo schermo l'ordine e': prima la finestra che si presenta,
   POI il desktop con le icone. Non il contrario.
   =============================================================== */
.schermo{
  position:relative;z-index:2;max-width:1100px;margin:0 auto;
  /* nessun margine in cima e ai lati: le finestre toccano i bordi dello
     schermo, altrimenti resta una cornice blu che non c'entra niente */
  padding:0 0 clamp(18px,2.6vw,28px);
  /* sulle pagine corte — contatti, privacy, grazie — senza questo lo schermo
     finiva a meta' pagina e sotto restava mezzo metro di carta da parati */
  min-height:calc(100vh - 150px);
  background:
    linear-gradient(180deg, rgba(10,34,58,.96) 0%, rgba(5,20,36,.97) 55%, rgba(3,13,24,.98) 100%),
    var(--wall) repeat center / var(--wall-size);
  background-blend-mode:normal, luminosity;
  border-inline:2px solid;
  border-color:transparent rgba(2,10,20,.9) transparent rgba(143,190,228,.14);
  box-shadow:0 0 0 1px rgba(143,190,228,.10), 0 26px 70px rgba(0,0,0,.6);
}
/* righe da tubo catodico: lo schermo e' uno schermo */
.schermo::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px);
}
.schermo > *{position:relative;z-index:1}
/* Sotto una certa larghezza le fasce laterali si riducono a due fili e
   sembrano un errore: meglio che lo schermo corra da bordo a bordo. */
@media (max-width:620px){
  .schermo{margin-inline:-16px;border-inline:0;box-shadow:none}
}
.schermo .win{max-width:none;margin-bottom:clamp(16px,2.4vw,26px)}
.schermo .win:last-of-type{margin-bottom:0}

/* ---------- il desktop, dentro lo schermo ---------- */
/* Il grigio di sistema, come il resto della cornice. I rettiliani stanno
   DENTRO questo pannello, dietro le icone, e il pannello li taglia: per
   questo serve `overflow:hidden`. Sembrano uscire allo scoperto da dietro. */
.desktop{
  position:relative;overflow:hidden;
  --padx:clamp(12px,2vw,22px);
  --iw:clamp(74px,11.5vw,116px);    /* larghezza di un'icona */
  --g:clamp(8px,1.6vw,18px);        /* spazio fra le colonne */
  /* larghezza di una colonna, gap compreso: serve a far cadere il taglio
     dei rettiliani esattamente sul filo della copertina */
  --colw:calc((100% - 3 * var(--g)) / 4);
  padding:clamp(20px,3.2vw,34px) var(--padx) clamp(22px,3.4vw,36px);
  margin:clamp(12px,2vw,20px) 0 0;
  background:var(--face);
  border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow);
  box-shadow:inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face);
}
.desktop > .et{
  position:relative;z-index:2;margin:0 0 clamp(14px,2.2vw,20px);
  font-family:'Archivo',system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:#4A4A4A;text-indent:.28em;
}

/* ---------- i rettiliani, affacciati di fianco alle copertine ----------
   Le misure si contano DENTRO la griglia delle icone, non dentro il pannello:
   sopra la griglia c'e' l'etichetta «Apri una sezione» e non si sa quanto sia
   alta, quindi da li' non si puo' calcolare niente. Con `.abitanti` dentro
   `.icone`, `top:0` e' il filo alto della griglia e tutto torna a conti fatti:

     copertina n — filo sinistro  (n-1)*(colw+g) + (colw-iw)/2
                   filo destro    (n-1)*(colw+g) + (colw+iw)/2
                   filo alto      14px   (il padding di .icona)
                   filo basso     14px + iw * (h/w del suo PNG)

   I rapporti sono quelli veri dei file: ic_rivista 1,378 — ic_catalogo 1,397.
   Ogni creatura sta in una finestrella con `overflow:hidden` il cui bordo cade
   su uno di quei fili: il taglio e' una RETTA. E va spinta SOTTO la copertina,
   perche' accostarla al filo non basta — la sagoma si ritira e resta un vuoto. */
.icone{position:relative}
.icona{position:relative;z-index:1}      /* le copertine coprono chi sta dietro */
.abitanti{position:absolute;inset:0;z-index:0;pointer-events:none}
.posto{position:absolute;overflow:hidden}
/* Nessuna ombra portata: su un fondo piatto si legge come un alone sporco
   dietro la figura, non come profondita'. Il ritaglio deve restare netto. */
.posto img{position:absolute;bottom:0;height:auto;max-width:none}

/* ALLA DESTRA di avantgarde77 (2a): il corpo resta dietro la copertina e la
   testa esce dall'altro lato. Si incastra, invece di affiancarsi. */
/* Qui la faccia esce per META'. Misure prese sul file: la testa occupa da
   44,3% a 98,9% della larghezza, quindi il suo centro sta al 71,6%. E' li' che
   deve cadere il bordo sinistro della finestrella — cioe' il filo destro della
   copertina. Resta in vista il 28,4% del file: mezza faccia, un occhio.
   In basso la finestrella si chiude sul filo basso della copertina. Due rette. */
.posto.p2{
  left:calc(var(--colw) + var(--g) + (var(--colw) + var(--iw)) / 2);
  top:14px;
  width:calc(var(--iw) * 0.42);       /* 28,4% di 1.386, con un dito d'aria */
  height:calc(var(--iw) * 1.378);     /* = altezza di ic_rivista.png */
}
.posto.p2 img{
  top:0;bottom:auto;
  width:calc(var(--iw) * 1.386);
  left:calc(var(--iw) * -0.992);      /* 71,6% di 1.386 */
}

/* ALLA SINISTRA del catalogo (4a). Il fondo della finestrella cade esattamente
   sul filo basso della copertina: prima pescava piu' in basso e sembrava
   appoggiato per aria. */
.posto.p4{
  right:calc(100% - (3 * (var(--colw) + var(--g)) + (var(--colw) - var(--iw)) / 2));
  top:calc(14px + var(--iw) * 1.3974 - var(--iw) * 1.32);
  width:calc(var(--iw) * 0.62);
  height:calc(var(--iw) * 1.32);
}
.posto.p4 img{width:calc(var(--iw) * 0.92);right:calc(var(--iw) * -0.30)}

@media (max-width:560px){      /* due colonne: colw cambia, e di posto ce n'e' uno */
  .desktop{--colw:calc((100% - var(--g)) / 2)}
  .posto.p2{left:calc((var(--colw) + var(--iw)) / 2)}
  .posto.p4{display:none}
}
.icone{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--g);
}
@media (max-width:560px){ .icone{grid-template-columns:repeat(2,minmax(0,1fr))} }
.icona{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:14px 8px 13px;text-decoration:none;color:#111;
  border:1px dotted transparent;border-radius:2px;
  transition:background .2s ease,color .2s ease;
}
.icona:hover,.icona:focus-visible{
  background:var(--title-a);color:#fff;border-color:rgba(255,255,255,.65);
}
.icona:hover span,.icona:focus-visible span{text-shadow:none}
.icona:focus-visible{outline:none}
.icona img{width:var(--iw);height:auto;filter:drop-shadow(0 5px 12px rgba(0,0,0,.8))}
/* Niente pixel font sulle etichette: a quel corpo l'8 bit si legge male e
   invecchia la pagina invece di darle carattere. Ed e' anche piu' fedele —
   le icone del desktop del 1998 avevano il carattere di sistema, non un
   font da videogioco. Archivo in grassetto, maiuscoletto spaziato. */
.icona span{
  margin-top:auto;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:clamp(11px,1.9vw,13px);font-weight:800;
  letter-spacing:.085em;line-height:1.35;text-align:center;
  text-transform:uppercase;text-indent:.085em;
  /* su grigio il testo va scuro, con un alone chiaro che lo stacca dalle
     figure che gli passano dietro */
  text-shadow:0 0 3px var(--face), 0 0 7px var(--face), 0 1px 0 rgba(255,255,255,.7);
}

/* La finestra attacca subito in cima allo schermo: niente fascia vuota.
   Il `padding-top` di prima era lo spiraglio per il personaggio, che ora
   sta dietro le icone — tolto lui, restava un rettangolo azzurro e basta. */
.scrivania{position:relative}

/* ---------- il file lasciato aperto ---------- */
.visore{width:min(372px,100%);margin-inline:auto 0}
@media (max-width:760px){ .visore{margin-inline:auto} }
.visore .body-area{padding:5px}
.visore img{width:100%;display:block}
.visore .didascalia{
  margin:0;padding:6px 8px 4px;background:var(--face);
  font-family:'Silkscreen','Archivo',monospace;font-size:9.5px;letter-spacing:.05em;color:#3A3A3A;
}

/* una riga sola, non un articolo in evidenza: il portale e' un desktop */
.in-evidenza{
  margin:14px 0 0;padding:12px 14px;background:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
}
.in-evidenza .et{
  font-family:'Silkscreen','Archivo',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--title-a);padding:4px 9px;
}
.in-evidenza .ti{font-size:15px;flex:1 1 auto;min-width:0}
.in-evidenza .pz{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.in-evidenza .btn{padding:8px 15px;font-size:10px}

/* ---------- il carrello e' una finestra che si apre ----------
   Prima stava in fondo alla pagina e il click sul contatore ci faceva
   scivolare dentro: controproducente, perche' porta via dal prodotto.
   Ora si apre sopra la pagina e il pagamento parte da li'. */
.overlay{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:flex-start;justify-content:center;overflow:auto;
  padding:clamp(14px,5vh,64px) 16px clamp(24px,6vh,64px);
  background:rgba(2,8,16,.66);
}
.overlay.show{display:flex}
.overlay .win{width:100%;max-width:640px;margin:0}
.sq[data-chiudi-carrello]{cursor:pointer}

/* il contatore fa un lampo quando si aggiunge: conferma senza spostare nulla */
.cart-count{display:inline-block;font-variant-numeric:tabular-nums}
.menubar .right.pulsa{animation:lampo .6s ease-out}
@keyframes lampo{
  0%,100%{background:transparent;color:var(--ink)}
  25%,60%{background:var(--title-a);color:#fff}
}

/* ===============================================================
   L'IMPIANTO DELLA LIBRERIA — testata araldica e capitoli
   Impostazione presa da tradition.st: due figure araldiche ai lati
   del nome, un filo che chiude la testata, un sommario centrato e
   poi TUTTO il catalogo su una pagina sola, diviso in capitoli con
   il titolo in mezzo e un filo sopra. Da loro l'ossatura, da noi il
   vestito: finestra di sistema, carta rossa, caleidoscopio ai lati.
   Le pagine di dettaglio restano dove sono — da qui ci si arriva
   cliccando una copertina, non passando da un indice.
   =============================================================== */
.testata{background:var(--paper)}
.insegna{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,3.4vw,46px);
  padding:clamp(20px,3.6vw,34px) clamp(14px,2.6vw,26px) clamp(15px,2.4vw,24px);
}
/* L'aquila è larga e bassa (500×199), non è un leone rampante: va
   tenuta piccola, altrimenti la testata diventa tutta ali. */
.insegna .araldo{flex:0 0 auto;width:clamp(52px,10vw,132px)}
.insegna .araldo img{width:100%;height:auto}
.insegna .araldo.dx img{transform:scaleX(-1)}
@media (max-width:620px){ .insegna{gap:9px} .insegna .araldo{width:clamp(34px,10vw,52px)} }
.insegna .nome{min-width:0;text-align:center}
.insegna h2{
  margin:0;font-size:clamp(17px,4vw,36px);font-weight:800;line-height:1.14;
  letter-spacing:.12em;text-transform:uppercase;text-indent:.12em;text-wrap:balance;
}
.insegna .ditta{
  margin:8px 0 0;font-family:'Silkscreen','Archivo',monospace;
  font-size:clamp(7.5px,1.4vw,10px);letter-spacing:.3em;text-transform:uppercase;
  text-indent:.3em;color:#7A3E33;
}

/* Il sommario: non è una barra di navigazione del sito — quella è la
   menubar della finestra. Questo porta ai capitoli di questa pagina. */
.sommario{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:7px clamp(10px,2vw,22px);
  border-top:1px solid var(--amber);
  padding:clamp(10px,1.8vw,15px) clamp(14px,4vw,52px);
}
.sommario a{
  font-size:clamp(9.5px,1.7vw,13px);font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;text-indent:.15em;text-decoration:none;
  color:var(--amber);padding:3px 2px;
}
/* l'hover del sommario sta in foglio.css: niente blocchi di colore */

.capitolo{
  margin:0;background:var(--paper);border-top:1px solid var(--amber);
  padding:clamp(24px,4.4vw,46px) 14px clamp(16px,2.8vw,28px);
  text-align:center;font-size:clamp(13px,2.6vw,20px);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;text-indent:.2em;
  scroll-margin-top:12px;
}
/* carta continua: il capitolo e ciò che lo segue sono lo stesso foglio */
.capitolo + .grid,
.capitolo + .feature{padding-top:0}
.capitolo + .feature{align-items:start}

/* ---------- chi si affaccia da dietro le copertine ----------
   Stessa regola di sempre: una finestrella con `overflow:hidden` il cui
   bordo cade sul filo della copertina, e la sagoma spinta SOTTO di essa.
   `--k` è l'unità: tutte le misure sono frazioni dei file veri, quindi
   cambiando `--k` la creatura scala senza scomporsi.
   La finestrella sta sulla CARTA, non dentro `.shot`, perché `.shot`
   ritaglia la copertina e si porterebbe via anche il rettiliano. */
.card{position:relative;--k:clamp(84px,11vw,150px)}
.card .guarda{position:absolute;top:12px;z-index:0;overflow:hidden;pointer-events:none}
.card .guarda img{position:absolute;max-width:none;max-height:none}
.card .shot{position:relative;z-index:1}      /* la copertina copre chi sta dietro */
/* il giallo: testa intera, si affaccia a DESTRA della copertina.
   Testa dal 44,3% al 98,9% del file: tagliando al 17,2% esce tutta. */
.card .guarda.giallo{right:calc(22px - var(--k) * .42);
  width:calc(var(--k) * .42);height:calc(var(--k) * 1.378)}
.card .guarda.giallo img{top:0;width:calc(var(--k) * 1.386);left:calc(var(--k) * -.992)}
/* il verde: mezza faccia, si affaccia a SINISTRA della copertina */
.card .guarda.verde{left:calc(30px - var(--k) * .62);
  width:calc(var(--k) * .62);height:calc(var(--k) * 1.32)}
.card .guarda.verde img{bottom:0;width:calc(var(--k) * .92);right:calc(var(--k) * -.30)}
@media (max-width:860px){ .card .guarda{display:none} }