/* --- Caratteri tipografici serviti dal sito, non da Google (25 agosto 2026) ---
   Sottoinsieme latino. Cormorant Garamond: due file statici, ciascuno dichiarato
   per l'intervallo di pesi che copre, così il browser non ne ingrassa nessuno.
   Manrope: un solo file variabile, che copre da 200 a 800. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400 600;
  src:url('./fonts/cormorant-garamond-500.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:601 800;
  src:url('./fonts/cormorant-garamond-700.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  src:url('./fonts/manrope-variable.woff2') format('woff2-variations');
  font-display:swap;
}

:root,
[data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --color-bg: #f1e8d6;
  --color-surface: #faf5ea;
  --color-surface-2: #f6efe0;
  --color-surface-offset: #efe4cd;
  --color-surface-dynamic: #e7dac0;
  --color-border: rgba(6, 20, 45, 0.14);
  --color-divider: rgba(6, 20, 45, 0.10);
  --color-text: #06142d;
  --color-text-muted: #3b4a66;
  --color-text-faint: #6c7a95;
  --color-text-inverse: #08111f;
  --color-primary: #8a5c17;
  --color-primary-hover: #6f4910;
  --color-primary-active: #5a3a0a;
  --color-gold: #c9973c;
  --color-gold-light: #dcae57;
  --color-gold-hover: #e8bf74;
  --color-gold-deep: #a5761f;
  --shadow-sm: 0 1px 2px rgba(6,20,45,.08);
  --shadow-md: 0 14px 34px rgba(6,20,45,.10);
  --shadow-lg: 0 22px 56px rgba(6,20,45,.14);
  --content-default: 1120px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #f1e8d6;
}

*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:var(--space-16)}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:
radial-gradient(circle at 20% 20%, rgba(201,151,60,.16), transparent 30%),
radial-gradient(circle at 80% 10%, rgba(255,255,255,.55), transparent 22%),
radial-gradient(circle at 85% 75%, rgba(201,151,60,.10), transparent 22%),
linear-gradient(135deg, #f4ecdc 0%, #efe5d1 40%, #f5eddd 100%);background-attachment:fixed}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
a,button,input,textarea,select{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3{text-wrap:balance;line-height:1.08}
p,li{text-wrap:pretty}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.skip-link{position:absolute;left:var(--space-4);top:-100px;background:var(--color-gold);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);z-index:20}
.skip-link:focus-visible{top:var(--space-4)}
.container{width:min(calc(100% - 2rem),var(--content-default));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:10;background:rgba(244,236,220,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--color-divider)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand-mark{width:42px;height:42px;color:var(--color-gold-deep)}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.08em;text-transform:uppercase}
.brand-subtitle{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint)}
.nav-links{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.nav-links a{font-size:var(--text-sm);color:var(--color-text-muted)}
.nav-links a:hover{color:var(--color-text)}
.hero{padding:clamp(var(--space-12),10vw,var(--space-24)) 0 var(--space-16)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
.kicker{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);background:rgba(255,255,255,.62)}
.kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-gold-deep);box-shadow:0 0 22px rgba(165,118,31,.35)}
.hero h1{margin-top:var(--space-5);font-family:var(--font-display);font-size:clamp(3rem,4vw,5.2rem);font-weight:600;max-width:12ch}
.hero p{margin-top:var(--space-5);max-width:62ch;color:var(--color-text-muted)}
.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-weight:600;padding:0 var(--space-5);border-radius:var(--radius-full);border:1px solid transparent;transition:transform var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),color var(--transition-interactive)}
.button:hover{transform:translateY(-1px)}
/* PULSANTE PRIMARIO. Due misure, e tirano in direzioni opposte: schiarire l'oro alza il contrasto
   della scritta (7,18 -> 9,22:1) e abbassa quello del pulsante sul fondo della pagina (2,16 -> 1,69:1),
   sotto il 3:1 che serve perche' una forma si legga come comando. Il bordo #a5761f rende 3,31:1 sul
   fondo pagina e ridefinisce il contorno: si tengono l'una e l'altro. */
.button-primary{background:var(--color-gold-light);border-color:var(--color-gold-deep);color:var(--color-text-inverse);box-shadow:0 12px 30px rgba(165,118,31,.22)}
.button-primary:hover{background:var(--color-gold-hover)}
.button-secondary{border-color:var(--color-border);background:rgba(255,255,255,.62)}
.button-secondary:hover{border-color:rgba(165,118,31,.5);color:var(--color-primary)}
.hero-card{position:relative;padding:var(--space-5);border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 8px);background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));box-shadow:var(--shadow-lg);overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:auto -20% -20% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(201,151,60,.30), transparent 68%)}
.author-photo{aspect-ratio:4/5;object-fit:cover;object-position:40% center;border-radius:calc(var(--radius-xl) + 2px)}
.author-caption{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
main section{padding:var(--space-16) 0}
.section-head{display:flex;justify-content:space-between;gap:var(--space-6);align-items:end;margin-bottom:var(--space-8)}
.section-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600}
.section-head h2 .sottotitolo-collana{display:block;margin-top:.30em;font-size:.513em;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.30em;color:var(--color-primary)}
.section-head p{max-width:56ch;color:var(--color-text-muted)}
.grid-two{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-8);align-items:start}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60));border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 4px);padding:clamp(var(--space-5),3vw,var(--space-8));box-shadow:var(--shadow-md)}
.book-highlight{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-6);align-items:start}
.book-cover{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.eyebrow{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary)}
.book-title{margin-top:var(--space-3);font-family:var(--font-display);font-size:clamp(2.2rem,3vw,3.6rem);font-weight:600;line-height:1}
.book-subtitle{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--color-text-muted);font-style:italic;max-width:28ch}
.meta-list{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.meta-item{display:flex;gap:var(--space-3);align-items:flex-start;padding-top:var(--space-3);border-top:1px solid var(--color-divider)}
.meta-item strong{min-width:112px;font-size:var(--text-sm);color:var(--color-text)}
.meta-item span{color:var(--color-text-muted)}
.quote-card{position:relative;overflow:hidden}
.quote-card p{font-family:var(--font-display);font-size:clamp(1.35rem,1.7vw,1.9rem);line-height:1.25}
.quote-card small{display:block;margin-top:var(--space-4);font-size:var(--text-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.card{padding:var(--space-6);border-radius:calc(var(--radius-xl) + 2px);border:1px solid var(--color-border);background:rgba(255,255,255,.66)}
.card h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}
.card p{margin-top:var(--space-4);color:var(--color-text-muted)}

.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5)}
.series-card{position:relative;padding:var(--space-5);border-radius:calc(var(--radius-xl) + 2px);border:1px solid var(--color-border);background:rgba(255,255,255,.66)}
.series-cover-wrap{position:relative;display:block;margin-bottom:var(--space-5);overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.series-cover{width:100%;aspect-ratio:5/8;object-fit:cover;border-radius:var(--radius-lg)}
a.series-cover-wrap{overflow:visible}a.series-cover-wrap .series-cover{transition:transform .35s ease}a.series-cover-wrap:hover,a.series-cover-wrap:focus-visible{z-index:3}a.series-cover-wrap:hover .series-cover,a.series-cover-wrap:focus-visible .series-cover{transform:scale(1.05)}
.series-nastro{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius-lg);pointer-events:none;transition:opacity .35s ease}a.series-cover-wrap:hover .series-nastro,a.series-cover-wrap:focus-visible .series-nastro{opacity:0}
.series-date{position:absolute;right:-66px;bottom:41px;width:240px;padding:.36rem 1.1rem;transform:rotate(-45deg);background:linear-gradient(180deg,#e2ac4c,#a86e17);color:#150f04;text-align:center;font-size:.70rem;line-height:1.25;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.30);box-shadow:0 8px 20px rgba(6,20,45,.30);pointer-events:none}
.series-card h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}
.series-card p{margin-top:var(--space-3);color:var(--color-text-muted)}

.formats-showcase{padding:clamp(var(--space-4),2vw,var(--space-6))}
.formats-image{width:100%;border-radius:var(--radius-lg)}

.timeline{display:grid;gap:var(--space-5)}
.timeline-item{display:grid;grid-template-columns:110px 1fr;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:rgba(255,255,255,.66)}
.timeline-phase{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary)}
.timeline-item h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}
.timeline-item p{margin-top:var(--space-3);color:var(--color-text-muted)}
.contact-box{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-8);border-radius:calc(var(--radius-xl) + 6px);border:1px solid rgba(165,118,31,.34);background:linear-gradient(135deg, rgba(201,151,60,.20), rgba(255,255,255,.62))}
.contact-box p{color:var(--color-text-muted);max-width:58ch}
.contact-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch}
.site-footer{padding:var(--space-10) 0 var(--space-12);border-top:1px solid var(--color-divider);color:var(--color-text-faint)}
.footer-grid{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.page-hero{padding:var(--space-16) 0 var(--space-12)}
/* La colonna di destra si distende per tutta l'altezza della copertina e spinge il riquadro d'acquisto
   in fondo: le due basi si allineano da se', senza numeri da tenere aggiornati. */
.page-hero-grid{display:grid;grid-template-columns:.75fr 1fr;gap:var(--space-16);align-items:stretch}
.book-cover{align-self:start}
.page-hero-testo{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6)}
.longform{display:grid;gap:var(--space-8)}
.longform .panel p + p{margin-top:var(--space-4)}
.inline-list{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
/* RIQUADRO D'ACQUISTO, sotto la copertina: titolo, badge a sinistra, un pulsante per formato a destra.
   Lo spazio libero che Amazon richiede e' misurato sulla lettera "o" del marchio: larga 47 px su un
   disegno largo 340, cioe' il 13,8% della larghezza sui lati e la meta' sopra e sotto. A 150 px resi
   fanno 20,7 e 10,4 px: il padding di 24 px del collegamento li copre entrambi, e tiene lontani sia il
   titolo del riquadro sia i pulsanti. */
/* Il riquadro si stringe sul proprio contenuto invece di riempire la colonna: allargando lo stacco
   fra le due colonne la colonna del testo si e' accorciata di 19 px soli, e non bastavano. */
/* Il riquadro non riempie la colonna, si ferma alla misura del suo contenuto: badge 198 px + 8 di
   stacco + 240 dei pulsanti + 40 di respiro interno = 486, arrotondati a 31rem. Allargare lo stacco
   fra le colonne, da solo, aveva accorciato la colonna di 19 px e non bastava. */
.acquisto{padding:var(--space-5);margin:0;width:100%;max-width:31rem;align-self:flex-start}
.acquisto-corpo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.badge-amazon{display:inline-block;padding:var(--space-6);line-height:0;border-radius:var(--radius-lg);transition:background var(--transition-interactive)}
.badge-amazon:hover,.badge-amazon:focus-visible{background:rgba(22,35,63,.05)}
.badge-amazon img{display:block;width:150px;height:auto}
/* I PULSANTI D'ACQUISTO. Tutti secondari e nessuno primario: sono lo stesso libro in tre confezioni,
   e un pulsante d'oro fra tre direbbe «prendi questo». */
.acquisto-lista{list-style:none;display:grid;gap:var(--space-2);flex:0 1 15rem;min-width:0}
.acquisto-lista .button{width:100%;min-height:42px;font-size:var(--text-sm)}
/* PASTIGLIE STATICHE. Non sono collegamenti e non devono sembrarlo: niente ocra, che su questo
   sito e' il colore di cio' che si clicca, e nessuna reazione al passaggio del mouse. */
.tag{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:rgba(22,35,63,.055);border:1px solid rgba(22,35,63,.12);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);cursor:default}
.anchor-link{color:var(--color-primary)}
.anchor-link:hover{color:var(--color-primary-hover)}
/* --- Collana: schema visivo e approfondimento --- */
.collana-intro{display:grid;gap:var(--space-4);max-width:74ch}
.collana-intro p{color:var(--color-text-muted)}
.collana-figure{margin-top:var(--space-8);padding:clamp(var(--space-4),2.5vw,var(--space-6));border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 4px);background:#f1e8d6;box-shadow:var(--shadow-md)}
.collana-figure img{width:100%;max-width:860px;margin-inline:auto;border-radius:var(--radius-lg);background:#f1e8d6;box-shadow:none}
.collana-mappa{position:relative;display:block;max-width:860px;margin-inline:auto}.collana-mappa img{display:block}.collana-mappa .collana-copertina{position:absolute;display:block;width:20.5%;height:32.8%;top:55.7%;max-width:none;margin:0;border-radius:0;box-shadow:none;object-fit:fill}.collana-mappa .collana-punto .collana-copertina{left:0;top:0;width:100%;height:100%;transition:transform .35s ease}.collana-mappa .collana-punto:hover .collana-copertina,.collana-mappa .collana-punto:focus-visible .collana-copertina{transform:scale(1.05)}
.collana-mappa .collana-punto{position:absolute;display:block;width:20.5%;height:32.8%;top:55.7%}.collana-mappa .collana-punto:hover,.collana-mappa .collana-punto:focus-visible{z-index:3}
.collana-figure figcaption{margin-top:var(--space-5);text-align:center;font-family:var(--font-display);font-size:var(--text-lg);font-style:italic;color:var(--color-text-muted)}
.approfondimento{margin-top:var(--space-6);border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 2px);background:rgba(255,255,255,.66)}
.approfondimento>summary{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) clamp(var(--space-5),3vw,var(--space-8));cursor:pointer;list-style:none;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary)}
.approfondimento>summary::-webkit-details-marker{display:none}
.approfondimento>summary::marker{content:''}
.approfondimento>summary:after{content:'+';margin-left:auto;font-family:var(--font-display);font-size:var(--text-xl);line-height:1;color:var(--color-text-faint)}
.approfondimento[open]>summary:after{content:'\2013'}
.approfondimento>summary:hover{color:var(--color-primary-hover)}
.approfondimento-body{padding:var(--space-6) clamp(var(--space-5),3vw,var(--space-8)) clamp(var(--space-6),3vw,var(--space-8));border-top:1px solid var(--color-divider)}
.approfondimento-body p{color:var(--color-text-muted);max-width:74ch}
.approfondimento-body p + p{margin-top:var(--space-4)}
.approfondimento-body .lead{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text)}
.approfondimento-body strong{color:var(--color-text)}
.approfondimento-body .firma{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-faint)}

/* ================= FOTOGRAFIE — «Materia che guarda» (1 settembre 2026) =================
   L'omaggio ai lettori: una sezione a tre temi e una sottopagina per tema.
   Il fondo su cui posano le fotografie e' il blu notte #06142d, che fino alla v5 era il fondo
   di tutto il sito: non e' un colore nuovo, e' quello vecchio rimasto a fare da cornice al cielo. */
.omaggio{border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 2px);background:rgba(255,255,255,.66);padding:clamp(var(--space-5),3vw,var(--space-8))}
.omaggio p{color:var(--color-text-muted);max-width:74ch}
.omaggio p + p{margin-top:var(--space-4)}
.omaggio .avviso{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-faint)}

.temi{display:grid;gap:var(--space-8)}
.tema{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(var(--space-5),3vw,var(--space-8));align-items:center;padding:clamp(var(--space-4),2.5vw,var(--space-6));border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 4px);background:rgba(255,255,255,.66);box-shadow:var(--shadow-md)}
.tema-figura{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;background:#06142d}
/* ⭐ Le fotografie non si ritagliano MAI, in nessun riquadro del sito: se sbordano si
   rimpiccioliscono, e lo spazio che avanza e' blu notte come nella vetrina. Fino al
   1 settembre 2026, sera, l'anteprima era `cover` e tagliava sopra e sotto — su un 16:9
   dentro un riquadro 3:2 se ne perdeva il 16% dell'altezza, cioe' quasi sempre il cielo. */
.tema-figura img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#06142d;transition:transform .35s ease}
a.tema-figura:hover img,a.tema-figura:focus-visible img{transform:scale(1.04)}
/* Riquadro di un tema non ancora popolato: nessuna immagine da mostrare, e non se ne inventa una. */
.tema-vuota{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 30% 25%, rgba(201,151,60,.20), transparent 55%),
  linear-gradient(160deg, #0b1c39 0%, #06142d 100%)}
.tema-arrivo{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.45);color:rgba(255,255,255,.92);font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase}
.tema-corpo h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;margin-top:var(--space-2)}
.tema-corpo p{margin-top:var(--space-4);color:var(--color-text-muted)}
.tema-corpo .anchor-link,.tema-corpo .tema-attesa{display:inline-block;margin-top:var(--space-5)}
.tema-corpo .tema-attesa{font-size:var(--text-sm);color:var(--color-text-faint);cursor:default}
.tema.spenta .tema-corpo h3{color:var(--color-text-muted)}

/* --- La sottopagina di un tema: un soggetto per riquadro --- */
.soggetti{display:grid;gap:clamp(var(--space-10),6vw,var(--space-16))}
.soggetto-testata{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.soggetto-testata h2{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}
.soggetto-testata .conteggio{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint)}
/* La vetrina tiene una forma sola per tutto il soggetto — quella dello scatto piu' alto del gruppo,
   scritta dal generatore in --forma —: cosi' le frecce non fanno saltare la pagina su e giu'. */
/* ⭐ LA CORNICE PRENDE LA FORMA DELLA FOTOGRAFIA, e cambia quando si sfoglia.
   `--forma` e' il rapporto dello scatto in vista, scritto dal generatore su ogni figura e
   spostato sul riquadro da `foto.js`. L'altezza e' quella disponibile — al massimo 760 px o
   il 78% dello schermo — e la larghezza e' quell'altezza moltiplicata per la forma, con il
   tetto del 100%: cosi' il riquadro **si stringe su una verticale e si allarga su una
   panoramica**, e non resta mai una fascia scura ai lati o sopra e sotto.
   *Il bordo superiore non si muove: il riquadro cresce verso il basso, e la fotografia che
   si sta guardando resta dov'e'.* */
.vetrina{position:relative;display:grid;place-items:center;width:min(100%, calc(var(--forma,1.5) * min(78vh, 760px)));aspect-ratio:var(--forma,3/2);max-height:min(78vh,760px);margin-inline:auto;border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 2px);overflow:hidden;background:#06142d;box-shadow:var(--shadow-md);transition:width var(--transition-interactive),aspect-ratio var(--transition-interactive)}
/* 🐞 LO SCATTO NON PUO' SFONDARE IL RIQUADRO — corretto il 1 settembre 2026, sera.
   Prima lo scatto era `width:100%;height:100%` dentro una griglia: su una fotografia VERTICALE
   la riga della griglia cresceva fino all'altezza naturale dell'immagine — 1985 px in un riquadro
   alto 631 — e `overflow:hidden` del riquadro tagliava il resto. `object-fit:contain` faceva il
   suo mestiere, ma dentro un elemento piu' alto del riquadro: la fotografia era intera nell'img
   e ritagliata dalla cornice. Le orizzontali non lo mostravano, perche' non sfondavano mai.
   La cura e' `min-height:0`, che permette alla riga di griglia di stare nella misura del riquadro,
   piu' l'immagine centrata con `max-height` invece che stirata con `height:100%`. */
.scatto{grid-area:1/1;display:none;width:100%;height:100%;min-width:0;min-height:0;align-items:center;justify-content:center}
.scatto.attivo{display:flex}
.scatto img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
/* L'ORA DELLO SCATTO, in basso a destra e nient'altro. Luogo e data stanno gia' nella riga
   sopra il riquadro: ripeterli sulla fotografia copriva un angolo di cielo per dire una cosa
   che il lettore aveva appena letto. Resta l'ora, che sopra non c'e' — ed e' l'unica cosa che
   cambia da uno scatto all'altro dentro lo stesso soggetto. */
.didascalia{position:absolute;right:var(--space-4);bottom:var(--space-4);max-width:calc(100% - 2rem);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:rgba(6,20,45,.52);backdrop-filter:blur(6px);color:rgba(255,255,255,.90);font-size:var(--text-xs);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.didascalia .sep{margin:0 .5em;opacity:.55}
.freccia{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(6,20,45,.45);border:1px solid rgba(255,255,255,.38);color:#fff;transition:background var(--transition-interactive)}
.freccia:hover{background:rgba(6,20,45,.78)}
.freccia.prima{left:var(--space-4)}
.freccia.dopo{right:var(--space-4)}
.freccia svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Nella pagina del profilo i titoli dei quattro volumi stanno nella colonna di sinistra dell'elenco:
   112 px bastano a «Autore» e «Progetto» della home, non a «Si gioca una volta sola». */
.meta-list.opere .meta-item strong{min-width:15rem}

/* --- LE FOTOGRAFIE SONO DELL'AUTORE, e la pagina lo rende scomodo dimenticarlo ---
   `pointer-events:none` toglie l'immagine da sotto il puntatore: il tasto destro cade sul
   riquadro e il menu' del browser non offre piu' «Salva immagine con nome». Il collegamento
   che avvolge l'anteprima continua a funzionare, perche' l'evento arriva a lui.
   ⚠️ E' un ostacolo, non una serratura: il browser l'immagine deve pur scaricarla per
   mostrarla, e chi sa aprire gli strumenti per sviluppatori la trova comunque. */
.vetrina img,.tema-figura img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.vetrina,.tema-figura{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.diritti{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-divider);font-size:var(--text-sm);color:var(--color-text-muted)}
.diritti strong{color:var(--color-text)}
.soggetto-testata .diritto{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-faint)}

@media (max-width: 980px){.hero-grid,.grid-two,.book-highlight,.cards,.page-hero-grid{grid-template-columns:1fr}.contact-box{grid-template-columns:1fr}.contact-actions{flex-direction:row;flex-wrap:wrap}.section-head{align-items:start;flex-direction:column}.timeline-item{grid-template-columns:1fr}.tema{grid-template-columns:1fr}}
@media (max-width: 640px){.nav{align-items:flex-start;flex-direction:column}.hero h1{max-width:11ch}.acquisto{width:auto;align-self:stretch}.acquisto-corpo{flex-direction:column;align-items:stretch;gap:0}.badge-amazon{align-self:flex-start}.hero-actions,.contact-actions{flex-direction:column;align-items:stretch}.button{width:100%}.author-caption,.footer-grid{flex-direction:column}.page-hero{padding-top:var(--space-12)}.meta-list.opere .meta-item{flex-direction:column;gap:var(--space-1)}.meta-list.opere .meta-item strong{min-width:0}.freccia{width:42px;height:42px}.freccia.prima{left:var(--space-2)}.freccia.dopo{right:var(--space-2)}.didascalia{right:var(--space-2);bottom:var(--space-2)}}
@media (prefers-reduced-motion: reduce){.series-nastro{transition:none}a.series-cover-wrap:hover .series-nastro{opacity:1}a.series-cover-wrap .series-cover,.collana-mappa .collana-punto .collana-copertina{transition:none}a.series-cover-wrap:hover .series-cover,.collana-mappa .collana-punto:hover .collana-copertina{transform:none}a.tema-figura:hover img{transform:none}.tema-figura img{transition:none}.vetrina{transition:none}}