/* ===============================================================
   LA LIBRERIA COME FINESTRA DI UN PROGRAMMA
   La pagina non scorre: scorre il VETRO, cioe' l'area cliente della
   finestra. Barra del titolo e barra dei menu restano inchiodate in
   cima. La barra di stato in fondo e' stata tolta: diceva "16 oggetti"
   e non serviva a niente. Dentro il vetro ci sta il caleidoscopio, e sopra al
   caleidoscopio il foglio bianco con il catalogo.
   Impianto preso da tradition.st; capitale romana, rosso su bianco,
   nero su bianco.
   =============================================================== */
html.prog, html.prog body{height:100%;overflow:hidden}
body.prog{padding:0;display:flex;flex-direction:column;background:var(--ink)}

.programma{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  background:var(--face);
  border:2px solid;border-color:var(--lite) var(--dark) var(--dark) var(--lite);
  border-top:0;border-left:0;border-right:0;
}
.programma > .titlebar{flex:none;padding-top:calc(4px + env(safe-area-inset-top,0px))}
.programma > .menubar{flex:none;font-size:14px;padding:5px 6px}
.programma > .menubar a{padding:4px 13px}

/* ---------- il vetro: qui dentro vive il caleidoscopio ---------- */
.vetro{
  position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  overflow-anchor:none;
  -webkit-overflow-scrolling:touch;
  background:var(--ink);
  border:2px solid;border-color:var(--shadow) var(--lite) var(--lite) var(--shadow);
  padding:clamp(12px,2.2vw,28px) clamp(10px,2.4vw,30px) clamp(26px,5vw,56px);
}
/* la carta da parati e il velo non sono piu' fissi alla pagina: sono
   dipinti sul fondo del vetro e restano fermi mentre il foglio scorre */
.vetro > .desk,
.vetro > .veil{position:sticky;top:0;height:0;overflow:visible;z-index:0;pointer-events:none}
.vetro > .desk::after,
.vetro > .veil::after{content:'';position:absolute;left:calc(-1 * clamp(10px,2.4vw,30px));
  right:calc(-1 * clamp(10px,2.4vw,30px));top:calc(-1 * clamp(12px,2.2vw,28px));height:100vh;display:block}
.vetro > .desk::after{background:var(--wall) repeat center / var(--wall-size);
  animation:tinta 48s ease-in-out infinite alternate}
.vetro > .veil::after{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%)}
@media (prefers-reduced-motion:reduce){ .vetro > .desk::after{animation:none} }

/* ---------- il foglio: rosso su bianco, nero su bianco ---------- */
.foglio{
  position:relative;z-index:2;
  width:min(1040px,100%);margin:0 auto;
  background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 46px rgba(2,10,20,.55);
}
.foglio + .win, .vetro > .win{margin-top:clamp(18px,3vw,34px)}

/* La riga sotto l'insegna. La libreria non ne aveva bisogno - entra subito
   nel sommario - ma collane, avantgarde77 e ultima uscita hanno tutte una
   frase che dice di cosa si tratta, e senza una regola finirebbe in corpo
   testo in mezzo al bianco. Una sola riga, centrata, in capitale romana
   come il resto del foglio. */
.foglio .occhiello{
  max-width:62ch;margin:clamp(6px,1.4vw,14px) auto 0;
  padding:0 clamp(16px,4vw,48px);
  font-size:clamp(14px,1.5vw,16.5px);line-height:1.6;text-align:center;
  color:#3A3A3A;text-wrap:balance;
}
.foglio .occhiello + .capitolo{margin-top:clamp(20px,3vw,36px)}
.foglio .occhiello + .grid{margin-top:clamp(18px,2.6vw,32px)}

/* ---------- l'insegna ---------- */
.insegna{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,3vw,40px);
  padding:clamp(24px,4.4vw,46px) clamp(14px,3vw,30px) clamp(18px,2.8vw,28px);
}
.insegna .araldo{flex:0 0 auto;width:clamp(48px,8.5vw,116px)}
.insegna .araldo img{width:100%;height:auto;aspect-ratio:500/199}
.insegna .araldo.dx img{transform:scaleX(-1)}
@media (max-width:640px){ .insegna{gap:10px} .insegna .araldo{width:clamp(34px,11vw,54px)} }
.insegna .nome{
  margin:0;min-width:0;text-align:center;
  font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;
  font-size:clamp(18px,3.4vw,36px);line-height:1.1;
  letter-spacing:.05em;text-indent:.05em;text-transform:uppercase;
  color:var(--rosso);text-wrap:balance;
}

/* `avantgarde77` e' un marchio in minuscolo: l'insegna va in maiuscolo per
   tutti tranne che per lui, e il nome di un marchio non si riscrive. */
.insegna .nome.minuscolo{text-transform:none;letter-spacing:.02em;text-indent:.02em}

/* ---------- il sommario ---------- */
/* `space-between` qui non va: funziona con quattro voci che stanno su una
   riga sola (e' cosi' che lo usa il riferimento), ma con sei che vanno a capo
   allarga la prima riga da bordo a bordo e lascia l'ultima voce orfana a
   sinistra. Centrato, un ritorno a capo sembra voluto invece che un errore. */
.sommario{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px clamp(14px,2.4vw,30px);
  border-top:1.5px solid var(--ink);
  padding:clamp(11px,1.8vw,16px) clamp(16px,4vw,46px);
}
.sommario a{
  font-size:clamp(9.5px,1.7vw,13.5px);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;text-indent:.15em;text-decoration:none;
  color:var(--rosso);padding:3px 2px;
}

/* Il sommario non si accende a blocchi di colore: si comporta come una lettera
   incisa. Al passaggio il rosso si incupisce, sotto si tira un filo che cresce
   dal centro verso i lati, e ai fianchi compaiono due interpuncta — i punti
   romboidali che nelle iscrizioni romane separavano le parole. Il filo e' un
   gradiente sullo sfondo e non uno pseudo-elemento, cosi' ::before e ::after
   restano liberi per i due punti. Nessuna misura cambia in hover: se si
   muovesse la spaziatura, le voci accanto ballerebbero a ogni passaggio. */
.sommario a{
  position:relative;
  background-color:transparent;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:50% calc(100% - 1px);
  background-size:0% 1.5px;
  transition:color .22s ease, background-size .3s cubic-bezier(.2,.84,.3,1);
}
.sommario a::before,.sommario a::after{
  content:'\25C6';
  position:absolute;top:50%;font-size:.46em;line-height:0;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .3s cubic-bezier(.2,.84,.3,1);
}
.sommario a::before{left:-.70em;  transform:translate(5px,-50%)}
.sommario a::after {right:-.70em; transform:translate(-5px,-50%)}

.sommario a:hover,.sommario a:focus-visible{
  background-color:transparent;
  color:var(--rosso-cupo);
  background-size:100% 1.5px;
}
.sommario a:hover::before,.sommario a:focus-visible::before,
.sommario a:hover::after, .sommario a:focus-visible::after{
  opacity:1;transform:translate(0,-50%)
}
@media (prefers-reduced-motion:reduce){
  .sommario a,.sommario a::before,.sommario a::after{transition:none}
}
/* sul telefono le voci si sfiorano: restano il filo e il colore, via i punti */
@media (max-width:560px){
  .sommario a::before,.sommario a::after{display:none}
}
/* Sul telefono anche il centrato lascia una voce sola in fondo. Tre colonne
   fisse: sei voci fanno due righe esatte, sempre, a qualunque larghezza. */
@media (max-width:560px){
  .sommario{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 4px;justify-items:center;text-align:center}
}

/* ---------- i capitoli ---------- */
.capitolo{
  margin:0;border-top:1.5px solid var(--ink);
  padding:clamp(30px,5vw,58px) 14px clamp(20px,3.2vw,34px);
  text-align:center;color:var(--ink);
  font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;
  font-size:clamp(15px,2.9vw,25px);
  letter-spacing:.17em;text-transform:uppercase;text-indent:.17em;
  scroll-margin-top:8px;
}
.foglio .grid,.foglio .evidenza{
  background:#FFFFFF;padding:0 clamp(16px,3.2vw,34px) clamp(26px,4.4vw,48px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.6vw,30px);
}
@media (max-width:820px){ .foglio .grid,.foglio .evidenza{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* «Tutto il catalogo» è una tessera sola e larga: con la griglia a tre
   colonne e il ritaglio 2:3 delle altre diventerebbe un manifesto alto un
   metro. Una colonna, immagine panoramica, larghezza contenuta. */
.foglio .evidenza.intero{grid-template-columns:1fr;max-width:620px}
.foglio .evidenza.intero .rilievo .quadro img{aspect-ratio:16/7}
@media (max-width:520px){ .foglio .grid,.foglio .evidenza{grid-template-columns:1fr} }

/* ---------- in evidenza: tre riquadri, un'immagine ciascuno ---------- */
.foglio .evidenza{max-width:860px;margin-inline:auto}
.rilievo{display:flex;flex-direction:column;gap:13px;text-decoration:none;color:var(--ink)}
.rilievo .quadro{display:block;overflow:hidden;background:#101010;
  box-shadow:0 2px 0 rgba(0,0,0,.28)}
.rilievo .quadro img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rilievo:hover .quadro img,.rilievo:focus-visible .quadro img{transform:scale(1.04)}
.rilievo .didascalia{
  text-align:center;font-family:'Marcellus','Archivo',Georgia,serif;
  font-size:clamp(13px,1.9vw,17px);letter-spacing:.09em;text-indent:.09em;
  text-transform:uppercase;color:var(--rosso);
}
.rilievo:hover .didascalia,.rilievo:focus-visible .didascalia{color:var(--ink)}

/* ---------- le schede, sul bianco ---------- */
.foglio .card{background:#FFFFFF;border:0;box-shadow:none;padding:0;gap:8px}
.foglio .card .shot{box-shadow:0 2px 0 rgba(0,0,0,.24)}
.foglio .card .who{color:#5A5A5A}
.foglio .card .yr{color:var(--rosso)}
.foglio .card .what a{color:var(--ink)}
.foglio .card .acts{border-top:1px solid #D8D8D8}
.foglio .card .flag{background:var(--rosso)}
.foglio .card .flag.soon{background:#4A4A4A}

/* ---------- la scheda in evidenza, dentro il foglio ----------
   `.feature` arriva da app.css ed e' gia' testo scuro su chiaro, quindi sul
   foglio bianco funziona com'e'. Cambiano solo le due cose che nel foglio
   parlano un'altra lingua: la targhetta era blu come le barre del titolo, qui
   e' rossa come il resto della carta, e il titolo prende la capitale romana
   invece del grottesco. */
.foglio .feature{padding:clamp(18px,3vw,36px) clamp(16px,4vw,48px) clamp(24px,4vw,44px)}
.foglio .feature .tag{background:var(--rosso)}
.foglio .feature h3,.foglio .feature .titolone{
  font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;letter-spacing:.01em;
}
.foglio .feature .orig{color:var(--rosso-cupo)}

/* ---------- le creature escono solo al passaggio del cursore ----------
   Prima stavano sempre fuori e dopo due minuti erano arredamento. La
   finestrella ritaglia, quindi per nasconderle basta spingere la sagoma
   fuori dal suo riquadro: niente opacita', niente sfarfallio. */
.foglio .card .guarda img{
  transform:translateX(-102%);
  transition:transform .32s cubic-bezier(.2,.84,.3,1);
}
.foglio .card .guarda.verde img{transform:translateX(102%)}
.foglio .card:hover .guarda img,
.foglio .card:focus-within .guarda img,
.foglio .card.vista .guarda img{transform:translateX(0);transition-duration:.26s}
@media (prefers-reduced-motion:reduce){ .foglio .card .guarda img{transition:none} }

/* ---------- l'insegna scorrevole adesso chiude la pagina ---------- */
body.prog > .marquee{
  flex:none;margin:0;position:relative;z-index:3;
  border-bottom:0;border-top:2px solid #3570A7;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
}

/* la colofone sta dentro il vetro, sul caleidoscopio */
.vetro > .colophon{position:relative;z-index:2;margin-top:clamp(20px,3.4vw,38px)}

/* ---------- la geometria delle creature, rifatta per il foglio ----------
   Sul foglio le schede non hanno piu' i 12px di imbottitura, quindi il filo
   della copertina coincide col filo della scheda: gli scostamenti vanno
   ricalcolati su quello.
   Soprattutto: la gola fra due colonne e' 30px, e in 30px del file giallo ci
   sta la NUCA, non la faccia. Misurato sul file, la testa occupa dal 44,3%
   al 98,9% della larghezza: per vederla tutta la finestrella deve essere
   larga il 54,6% dell'immagine. Quindi la creatura esce SOPRA la copertina
   accanto — la scheda che si sta guardando sale di piano. Il taglio sul lato
   della propria copertina resta una retta, come sempre. */
.foglio .card{position:relative;z-index:1}
.foglio .card:hover,
.foglio .card:focus-within,
.foglio .card.vista{z-index:5}

.foglio .card .guarda.giallo{
  right:calc(10px - var(--k) * .757);
  width:calc(var(--k) * .757);
  height:calc(var(--k) * 1.378);
}
.foglio .card .guarda.giallo img{
  top:0;width:calc(var(--k) * 1.386);left:calc(var(--k) * -.614);   /* 44,3% */
}
.foglio .card .guarda.verde{
  left:calc(10px - var(--k) * .62);
  width:calc(var(--k) * .62);
  height:calc(var(--k) * 1.32);
}
.foglio .card .guarda.verde img{bottom:0;width:calc(var(--k) * .92);right:calc(var(--k) * -.30)}

/* ---------- le creature si affacciano SOPRA le tre tessere in evidenza ----
   Stesso criterio di sempre, ruotato di novanta gradi: la finestrella ha il
   bordo BASSO sul filo alto dell'immagine, e la sagoma viene spinta sotto.
   Al passaggio del cursore sale; a riposo la finestrella la ritaglia via.
   Le frazioni NON si deducono dalla fascia alta del 10%: quella dice dove
   comincia il cranio, non dove finisce il mento — ed e' l'errore che
   tagliava le facce a meta'. Rimisurate sul profilo riga per riga:
     giallo   faccia frontale   y 0–34%   x 44,0–99,5%   h/w 2,104
                               (cranio 1%, occhi 20%, bocca 31%, mento 34%)
     piccolo  testa in alto a dx  y 0–19%  x 71,5–99,7%  h/w 1,450
                               (cranio 1%, occhi 11%, mento 19%)
     verde    figura intera, occhi al 45–55%            h/w 1,442 */
.rilievo{position:relative;--k:clamp(78px,10vw,146px)}
.rilievo .quadro{position:relative;z-index:1}
.rilievo .guarda{position:absolute;bottom:100%;margin-bottom:-9px;
  overflow:hidden;z-index:0;pointer-events:none}
.rilievo .guarda img{position:absolute;top:0;width:var(--k);height:auto;
  max-width:none;max-height:none;
  transform:translateY(102%);
  transition:transform .34s cubic-bezier(.2,.84,.3,1);
}
.rilievo:hover .guarda img,
.rilievo:focus-visible .guarda img,
.rilievo.vista .guarda img{transform:translateY(0);transition-duration:.27s}
@media (prefers-reduced-motion:reduce){ .rilievo .guarda img{transition:none} }

/* Ogni creatura ha la sua scala, perche' la faccia occupa una frazione
   diversa di ciascun file. La finestra vale esattamente la faccia: altezza =
   (mento in % dell'altezza) * (h/w), larghezza = (destra - sinistra) in % .
     giallo   h = 34,7% * 2,104 = .730  w = 99,5-44,0 = .555  img left -.440
     piccolo  h = 19% * 1,450  = .276  w = 99,9-77,8 = .222  img left -.778
   Nel piccolo il bordo sinistro e' 77,8% e non 71,5%: fra il 10% e l'11%
   dell'altezza c'e' un varco di trasparenza a x 71,2-77,5% che separa la
   spalla dalla testa. Sotto il 12% le due sagome si toccano, quindi il taglio
   va preso li' o rientra la spalla. */
.rilievo .guarda.giallo {--k:clamp(44px,5vw,62px);    left:9%}
.rilievo .guarda.giallo {width:calc(var(--k) * .555);height:calc(var(--k) * .730)}
.rilievo .guarda.giallo img{left:calc(var(--k) * -.440)}

/* il verde sta bene com'e': non si tocca */
.rilievo .guarda.verde  {--k:clamp(38px,4.4vw,52px); right:11%}
.rilievo .guarda.verde  {width:calc(var(--k) * .90); height:calc(var(--k) * .86)}
.rilievo .guarda.verde img{left:calc(var(--k) * -.05)}

.rilievo .guarda.piccolo{--k:clamp(116px,13vw,163px); left:30%}
.rilievo .guarda.piccolo{width:calc(var(--k) * .222);height:calc(var(--k) * .276)}
.rilievo .guarda.piccolo img{left:calc(var(--k) * -.778)}

/* Spazio sopra le tessere. Questo padding esiste solo per far stare le teste
   sotto il titolo, quindi e' il loro ingombro a dettarlo: se lo si vuole
   stretto, vanno rimpicciolite le teste, non limato il padding.
   Ora le tre scale sono tarate per sporgere ~35px in pari; con 14px qui piu'
   i 34px di coda del titolo fanno 48px, contro i 34px delle altre sezioni.
   Era 112px (v38), poi 56px (v39): lo stacco si vedeva ancora. */
.foglio .evidenza{padding-top:clamp(8px,1.2vw,14px)}

/* una collana senza ancora un titolo dentro: scheda sola, centrata */
.foglio .grid.sola{grid-template-columns:minmax(0,1fr);max-width:330px;margin-inline:auto}

/* ---------- il sommario da telefono: un menu solo ----------
   Sotto i 620 px le sei voci andavano su due righe, e stringerle fino a
   farcele stare le rendeva illeggibili. Il menu tiene una riga sola a
   prescindere da quante sezioni ci saranno domani.
   E' un controllo di sistema in mezzo a un foglio stampato, quindi va vestito:
   nessun arrotondamento, filetto nero, capitale romana rossa come l'indice,
   e la freccia disegnata a mano perche' quella di sistema e' azzurra. */
.sommario-menu{display:none}
@media (max-width:620px){
  .sommario{display:none}
  .sommario-menu{
    display:block;max-width:420px;margin:0 auto;
    padding:clamp(10px,3vw,16px) clamp(16px,5vw,28px) 0;
  }
  .sommario-menu .etichetta{
    display:block;margin:0 0 6px;text-align:center;
    font-size:10px;font-weight:700;letter-spacing:.18em;text-indent:.18em;
    text-transform:uppercase;color:#6A6A6A;
  }
  .sommario-menu select{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;border-radius:0;cursor:pointer;
    padding:11px 34px 11px 14px;
    background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0h11L5.5 7z' fill='%23A8321E'/%3E%3C/svg%3E") no-repeat right 13px center;
    border:1px solid #1A1A1A;
    font-family:'Marcellus','Archivo',Georgia,serif;
    font-size:15px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--rosso);
  }
  .sommario-menu select:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
}


/* ---------- la griglia dei libri: quattro per riga ----------
   Tre colonne facevano copertine grandi quanto un manifesto: in una pagina
   con diciotto titoli diventava un pugno in un occhio. Quattro per riga, piu'
   piccole, e sotto resta SOLO il nome. Via autore, anno e la riga del prezzo:
   in un catalogo si guardano le copertine, e chi vuole comprare apre la
   scheda del libro, dove il prezzo c'e' per intero.
   Sta in fondo al foglio apposta: la griglia e' definita piu' su, e a parita'
   di specificita' vince l'ultima regola - errore gia' fatto col sommario. */
.foglio .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,26px)}
@media (max-width:980px){ .foglio .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .foglio .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* una collana con un titolo solo non diventa grande il doppio delle altre */
.foglio .grid.sola{grid-template-columns:minmax(0,1fr);max-width:238px;margin-inline:auto}

.foglio .grid .card{gap:7px}
.foglio .grid .card .who,
.foglio .grid .card .yr,
.foglio .grid .card .acts{display:none}
.foglio .grid .card .what{
  margin:0;text-align:center;text-wrap:balance;
  font-size:clamp(11.5px,1.15vw,13px);line-height:1.32;font-weight:600;
}
.foglio .grid .card .what a{text-decoration:none}
.foglio .grid .card .what a:hover,
.foglio .grid .card .what a:focus-visible{text-decoration:underline}
.foglio .grid .card .flag{font-size:8.5px;padding:2px 6px;letter-spacing:.06em}
/* le creature che sbucano fra le schede scalano con le schede */
.foglio .grid .card{--k:clamp(56px,6.6vw,98px)}

/* ---------- da telefono: tre per riga, prezzo accanto al titolo (23/10/2026) ----------
   Richiesta di Francesco: in ogni sezione della libreria una riga da tre,
   anche dove la collana ha un titolo solo (sta nella colonna centrale, non
   si allarga). Il titolo prende la capitale romana dell'insegna e del menu
   delle pagine — vale a ogni larghezza, cosi' telefono e computer parlano
   con la stessa voce. Il prezzo torna SOLO da telefono, accanto al titolo:
   i bottoni restano nella scheda del libro. «Tutto il catalogo» resta largo. */
.foglio .grid .card .what{font-family:'Marcellus','Archivo',Georgia,serif;font-weight:400;letter-spacing:.01em}
@media (max-width:640px){
  .foglio .grid,
  .foglio .evidenza:not(.intero),
  .foglio .grid.sola{
    grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;
    gap:16px 10px;padding-inline:14px;
  }
  .foglio .grid.sola .card{grid-column:2}
  .foglio .grid .card{--k:clamp(40px,12vw,56px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:5px;row-gap:6px;
    align-items:start;align-content:start}
  .foglio .grid .card > .shot{grid-column:1 / -1}
  .foglio .grid .card .what{grid-column:1;text-align:left;font-size:12px;line-height:1.25}
  .foglio .grid .card .acts{grid-column:2;display:flex;margin:0;padding:0;border:0;gap:0}
  .foglio .grid .card .acts .btn,
  .foglio .grid .card .acts .pr.soon{display:none}
  .foglio .grid .card .pr{flex:none;font-size:11px;font-weight:700;line-height:1.36;
    color:var(--rosso);white-space:nowrap}
  .foglio .grid .card .flag{font-size:7px;padding:2px 4px;letter-spacing:.04em}
  .rilievo{gap:8px}
  .rilievo .didascalia{font-size:11px;letter-spacing:.05em;text-indent:.05em}
}

/* Rivista (24/10/2026): i numeri di avantgarde77 hanno il formato della
   rivista (circa 21x27), non quello dei libri. Niente ritaglio a 2:3,
   se no si mangia i lati della testata. */
.foglio .grid.riviste .card .shot img{aspect-ratio:600/777}

/* Marchio AGARTHA PUBLISHING (25/10/2026): la scritta del logo originale con
   PUBLISHING sotto nello stesso carattere (Marcellus allargato come nel logo).
   E' un'immagine usata come maschera, quindi prende il colore dell'insegna. */
.insegna .nome.marchio-ap{
  width:clamp(150px,30vw,330px);aspect-ratio:1600/288;flex:0 1 auto;
  background:var(--rosso);
  -webkit-mask:url(img/agartha-publishing-scritta.png) center/contain no-repeat;
          mask:url(img/agartha-publishing-scritta.png) center/contain no-repeat;
}