/* =============================================================================
   Erbe Magiche 2026 — foglio di stile unico del sito pubblico
   «Un giardino editoriale dopo il tramonto»: apertura verde notte, pagine su
   carta avorio, verde bosco, ottone e luce dorata. Playfair Display + Lato.

   Sostituisce style_new.css e product-page.css. Copre sia il markup nuovo
   (home, catalogo) sia il vocabolario di classi storico delle schede libro e
   delle pagine di servizio, cosi' una pagina non ancora toccata resta leggibile.

   Indice: 1 basi · 2 testata · 3 pulsanti · 4 apertura home · 5 ingressi
   6 libri · 7 percorsi · 8 casa editrice · 9 dono e diario · 10 catalogo
   11 scheda libro · 12 pagine di testo · 13 moduli · 14 blog, musica, modale
   15 piede · 16 movimento e stampa
   ============================================================================= */

/* 1 · Basi ------------------------------------------------------------------ */
:root {
  --paper: #f8f3e8;
  --paper-2: #ede9dc;
  --card: #fffdf7;
  --ink: #153e31;
  --ink-2: #1b4439;
  --text: #33413a;
  --muted: #61665a;
  --line: #d9d5c3;
  --line-strong: #b5beaa;
  --gold: #a47536;
  --gold-deep: #8f672f;
  --moonlight: #e6c589;
  --night: #0b211c;
  --sage: #e4eadb;
  --lavender: #e1deed;
  --terracotta: #e9d4b8;
  --bad: #9c3b2e;
  --ok: #2f6b4a;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Lato', Arial, sans-serif;
  --radius: 4px;
  --shadow-soft: 0 12px 28px #153e3114;
  --garden: url('../img/giardino-notturno.webp');

  /* nomi storici, usati negli stili in linea delle pagine esistenti */
  --primary-color: var(--ink);
  --secondary-color: var(--gold);
  --accent-color: var(--ink);
  --light-accent: var(--sage);
  --bg-color: var(--paper);
  --text-color: var(--text);
  --card-bg: var(--card);
  --product-bg: var(--paper);
  --font-heading: var(--serif);
  --font-body: var(--sans);
  --shadow: var(--shadow-soft);
  --transition: all .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
img { height: auto; }
img[width][height] { height: auto; }
picture { display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(40px, 5vw, 70px); letter-spacing: -.035em; }
h2 { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -.025em; }
h3 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -.015em; }
h1 em, h2 em, h3 em { font-weight: 400; color: var(--gold-deep); }
p { margin: 0 0 1.1em; }

.wrap, .container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 95px; }
.eyebrow {
  font: 700 11px/1.5 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}
.intro { font-size: 18px; line-height: 1.8; max-width: 580px; color: var(--muted); }
.text-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.fine-print { font-size: 12px; color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 10px; top: -90px; background: #fff; padding: 12px; z-index: 50; }
.skip:focus { top: 10px; }

/* 2 · Testata --------------------------------------------------------------- */
.em-ribbon {
  background: var(--moonlight);
  color: #15372b;
  padding: 6px 24px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.em-ribbon span { margin-left: 24px; letter-spacing: .5px; text-transform: none; font-size: 11px; }

.em-header {
  background: var(--night);
  color: var(--paper);
  border-bottom: 1px solid #d2c19830;
  padding: 0 max(48px, calc((100% - 1240px) / 2));
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}
.em-brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; }
.em-brand:hover { color: inherit; }
.em-brand > span { font-family: var(--serif); font-size: 34px; letter-spacing: -1.4px; }
.em-brand i { font-style: normal; color: var(--moonlight); }
.em-brand small { font-size: 8px; letter-spacing: 2.3px; margin-top: 12px; color: #cfcbb8; text-transform: uppercase; }

.em-nav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.em-nav a { color: inherit; text-decoration: none; padding-block: 12px; }
.em-nav a:hover, .em-nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; color: inherit; }
.em-nav .nav-gift, .em-nav .nav-guide { padding: 11px 18px; border-radius: 3px; text-decoration: none !important; }
.em-nav .nav-gift { background: var(--moonlight); color: var(--night); font-weight: 700; border: 1px solid var(--moonlight); }
.em-nav .nav-gift:hover { background: #f1dcae; color: var(--night); }
.em-nav .nav-guide { border: 1px solid #d2c19880; }
/* «Entra nel giardino» e' il ritorno di chi c'e' gia', non un'offerta: per questo bordato in oro e non pieno.
   Fino al 02/10/2026 era solo testo, e Leonardo l'ha trovato nascosto: le CTA del sito sono tre (doni gratuiti,
   Erba Guida, giardino) e tutte e tre devono vedersi. Porta a /giardino/, che manda al login chi non e' entrata. */
.em-nav .nav-garden { color: var(--moonlight); border: 1px solid var(--moonlight); padding: 11px 16px; border-radius: 3px; text-decoration: none !important; margin-left: 4px; }
.em-nav .nav-garden:hover { background: #e6c58914; }
/* Sul telefono il menu e' chiuso: il giardino resta a un tocco, accanto a «Menu +». Fuori dal telefono non c'e'. */
.em-garden-quick { display: none; }
.em-garden-quick::before { content: '\2726'; margin-right: 5px; font-size: 9px; opacity: .85; }
/* Era «content: 'º6'», e non era un simbolo: era un carattere rotto, in fondo alla
   barra di ogni pagina, che si leggeva come un refuso.
   La sua storia si ricostruisce: qualcuno ha scritto '\2726' — la stella a quattro
   punte — dentro una stringa di un linguaggio che legge \272 come un numero in
   ottale, cioe' 'º', e si e' ritrovato 'º6'. L'ho rifatto io stesso oggi mentre
   cercavo di correggerlo, il che dice quanto sia facile.
   Scritto cosi', con la fuga del CSS, non puo' piu' succedere. */
.em-nav .nav-garden::before { content: '\2726'; margin-right: 6px; font-size: 10px; opacity: .8; }
.em-nav .nav-guide:hover { background: #ffffff12; }

/* menu mobile senza JavaScript: casella nascosta + etichetta */
.em-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.em-nav-burger {
  display: none;
  cursor: pointer;
  border: 1px solid #d2c19860;
  border-radius: 3px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--paper);
  user-select: none;
}
.em-nav-burger::after { content: 'Menu +'; }
.em-nav-toggle:checked ~ .em-nav-burger::after { content: 'Chiudi \2212'; }
.em-nav-toggle:focus-visible ~ .em-nav-burger { outline: 3px solid var(--gold); outline-offset: 4px; }

/* titolo di pagina sotto la testata (pagine di servizio) */
.em-pagehead {
  background: linear-gradient(90deg, #0b211cf2, #0b211cc4), var(--garden) center 62% / cover;
  color: var(--paper);
  padding: 58px 0 54px;
}
.em-pagehead .eyebrow { color: var(--moonlight); }
.em-pagehead h1 { color: var(--paper); font-size: clamp(38px, 4.6vw, 64px); margin: 0; max-width: 900px; }
.em-pagehead h1 em { color: var(--moonlight); }
.em-pagehead p { color: #dedfd2; max-width: 620px; margin: 20px 0 0; font-size: 18px; }

/* testata storica (pagine non ancora convertite): stessa pelle, niente video */
header.hero, .site-header {
  position: relative;
  background: linear-gradient(90deg, #0b211cf2, #0b211cc4), var(--garden) center 62% / cover;
  color: var(--paper);
  padding: 22px 0 30px;
  text-align: left;
}
.hero-video, .hero-overlay { display: none !important; }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; }
.site-brand img, .site-brand > img[width][height] { height: 34px; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.site-nav a { color: var(--paper); text-decoration: none; padding-block: 8px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; font-size: 24px; color: var(--paper); }
.site-title, header.hero h1 { flex-basis: 100%; color: var(--paper); font-size: clamp(34px, 4.4vw, 58px); margin: 26px 0 0; }
.site-claim, header.hero p { flex-basis: 100%; color: #dedfd2; max-width: 640px; margin: 12px 0 0; }

/* 3 · Pulsanti --------------------------------------------------------------- */
.button, .btn, .cta-button, .cta-split-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 52px;
  padding: 15px 26px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
  font: 700 14px/1.2 var(--sans);
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.button:hover, .btn:hover, .cta-button:hover, .cta-split-btn:hover {
  background: #295b4c;
  color: var(--paper);
  transform: translateY(-2px);
}
.button-gold, .cta-button {
  background: var(--moonlight);
  border-color: var(--moonlight);
  color: var(--night);
  box-shadow: 0 6px 26px #a4753630;
}
.button-gold:hover, .cta-button:hover { background: #f1dcae; color: var(--night); }
.button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button-light:hover { background: #e6e9dd; color: var(--ink); }
.button-guide { background: var(--ink-2); color: #faf0da; border-color: #d6c591; }
.button-guide:hover { background: #295b4c; color: #faf0da; }
.button-ghost, .btn.ghost, .ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.button-ghost:hover, .btn.ghost:hover { background: var(--paper-2); color: var(--ink); }
.cta-button { font-size: 16px; padding: 18px 34px; min-height: 58px; }
button[disabled], .button[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }

/* 4 · Apertura della home ---------------------------------------------------- */
.hero-scene {
  background: linear-gradient(90deg, #071b17e8 0%, #071b17d6 34%, #071b1740 73%, #071b1726), var(--garden) center 54% / cover;
  color: var(--paper);
  position: relative;
  isolation: isolate;
}
.hero-scene::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 145px;
  background: linear-gradient(transparent, #081b17dc);
  z-index: -1;
  pointer-events: none;
}
.hero-scene .hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 15px;
  align-items: center;
  padding-block: 55px 44px;
  min-height: 675px;
  background: none;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { color: var(--moonlight); font-size: 10px; letter-spacing: 1.8px; display: flex; align-items: center; gap: 12px; }
.hero-copy .eyebrow span { font-size: 22px; }
.hero-copy h1 { color: var(--paper); font-size: clamp(52px, 5.55vw, 82px); letter-spacing: -3px; line-height: 1.09; margin: 0; }
.hero-copy h1 em { color: var(--moonlight); }
.hero-copy .intro { color: #dedfd2; font-size: 17px; max-width: 430px; margin: 27px 0 0; }
.hero-invitation { color: var(--moonlight); font-size: 14px; margin: 25px 0 0; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.hero-actions .button { padding: 15px 18px; font-size: 13px; gap: 15px; }
.hero-catalog { display: inline-block; margin-top: 21px; color: #e0dfcf; border-color: #e0dfcf80; font-size: 13px; font-weight: 400; }
.hero-catalog:hover { color: var(--moonlight); }
.hero-garden { display: block; width: fit-content; margin-top: 18px; color: var(--moonlight); border-color: #e6c58980; font-size: 13px; font-weight: 400; }
.hero-garden:hover { color: #f1dcae; }
.hero-garden + .hero-catalog { margin-top: 12px; }
.hero-footnote { margin: 25px 0 0; font-size: 8px; letter-spacing: 1.5px; color: #bbc8b6; }
.hero-footnote span { margin-inline: 9px; }

.hero-art { position: relative; min-height: 560px; background: radial-gradient(ellipse at 55% 45%, #cde4b319, transparent 62%); }
.orbit { position: absolute; inset: 5px -6px 54px 4px; border: 1px solid #e6c58950; border-radius: 50%; transform: rotate(-18deg); }
.orbit::before { content: ''; position: absolute; inset: 16px; border: 1px solid #e6c58925; border-radius: 50%; }
.orbit::after { content: '\2726'; position: absolute; left: 22%; top: -2%; font-size: 30px; color: #efd499; text-shadow: 0 0 20px #e6c589aa; }
.art-note { position: absolute; right: 16px; top: -15px; color: #d6d4bc; font-size: 8px; letter-spacing: 2.6px; }
.hero-book { position: absolute; display: block; box-shadow: -8px 4px 1px #030e0a70, 20px 30px 32px #0008, 0 0 1px 1px #efdca122; }
.hero-book img { display: block; width: 100%; }
.hero-book::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fff3, transparent 3%, #0003 5%, transparent 9%); pointer-events: none; }
.front-book { width: 48%; top: 28px; right: 11%; transform: rotate(9deg); z-index: 1; }
.back-book { width: 42%; top: 100px; left: 5%; transform: rotate(-13deg); }

.book-seal {
  position: absolute; right: 0; bottom: 88px; z-index: 2;
  width: 106px; height: 106px; border-radius: 50%;
  background: var(--moonlight); color: #153529;
  box-shadow: 0 8px 25px #0004; outline: 1px solid #15352977; outline-offset: -7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(11deg); text-decoration: none;
}
.book-seal:hover { color: #153529; }
.book-seal span { font-size: 7px; letter-spacing: 1px; line-height: 1.4; text-align: center; }
.book-seal strong { font: 36px/1.1 var(--serif); }
.art-caption { position: absolute; left: 13%; right: 6%; bottom: 0; padding-top: 18px; border-top: 1px solid #d2c19855; display: flex; flex-direction: column; gap: 7px; }
.art-caption > span { font-size: 8px; color: #c5cbb8; letter-spacing: 2px; }
.art-caption a { font-family: var(--serif); font-size: 23px; color: #f5ebd8; display: flex; justify-content: space-between; text-decoration: none; }
.manifesto-line { position: relative; border-top: 1px solid #b6bf9c40; padding-block: 23px; display: flex; justify-content: space-between; gap: 20px; }
.manifesto-line > span:first-child { font-family: var(--serif); font-size: 18px; font-style: italic; color: #e5e5d6; }
.manifesto-line span + span { color: #d8d1b7; font-size: 9px; letter-spacing: 1.8px; align-self: center; }
.manifesto-line i { color: var(--moonlight); font-style: normal; padding-inline: 12px; }

/* 5 · I due ingressi --------------------------------------------------------- */
.entry-section { padding-top: 65px; }
.entry-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.entry-heading h2 { font-size: clamp(32px, 3.2vw, 46px); margin: 0; }
.entry-heading .eyebrow { margin-bottom: 12px; }
.entry-heading > p { font-size: 14px; color: var(--muted); margin: 0; }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.entry-card { display: flex; flex-direction: column; align-items: start; padding: 32px 38px; border: 1px solid #c5b98f; border-radius: var(--radius); }
.entry-pdf { background: linear-gradient(135deg, #f1e7cd, #e8d7ad); }
.entry-guide { background: linear-gradient(125deg, #13392fee, #13392fcd), var(--garden) right bottom / cover; color: #f6eedc; border-color: #54765a; }
.entry-card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 15px; margin-bottom: 14px; }
.entry-kicker { font-size: 10px; letter-spacing: 1.6px; font-weight: 700; }
.entry-mark { font: 39px/1 Georgia, serif; color: #8c6d36; }
.entry-guide .entry-mark, .entry-guide .entry-kicker { color: var(--moonlight); }
.entry-card h3 { font-size: clamp(31px, 3vw, 43px); margin: 0; }
.entry-guide h3 { color: #f6eedc; }
.entry-guide h3 em { color: var(--moonlight); }
.entry-card > p:not(.entry-note) { margin: 19px 0 25px; max-width: 440px; font-size: 15px; }
.entry-pdf > p { color: #435343; }
.entry-guide > p { color: #dbe3cf; }
.entry-card .button { margin-top: auto; font-size: 13px; }
.entry-guide .button { background: var(--moonlight); border-color: var(--moonlight); color: #123327; }
.entry-guide .button:hover { background: #f3dfb7; }
.entry-card .entry-note { margin: 13px 0 0; font-size: 11px; }

/* 6 · Libri: scaffale e card -------------------------------------------------- */
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 45px; }
.section-heading h2 { margin: 0; }
.section-heading .eyebrow { margin-bottom: 12px; }
.shelf-intro p { font-size: 14px; color: var(--muted); margin: 0 0 16px; }

.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.book-grid .book-card { display: flex; flex-direction: column; align-items: start; background: none; box-shadow: none; border-radius: 0; }
.book-card > a:not(.text-link) { text-decoration: none; color: inherit; display: block; width: 100%; }
/* Le copertine stanno dritte sulla carta, senza nicchia e senza movimento:
   allineate in basso, così i formati diversi poggiano sulla stessa riga. */
.book-cover {
  position: relative;
  height: 340px;
  padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: none;
  border-radius: 0;
}
.book-cover picture { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.book-cover img { max-height: 100%; width: auto; max-width: 100%; box-shadow: 10px 14px 22px #2738271f; }
.book-flag {
  display: inline-block;
  background: var(--night); color: var(--moonlight);
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; margin-left: 6px; vertical-align: 1px;
}
.book-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 20px 0 10px; color: #7b602f; }
.book-card h3 { font-size: 27px; line-height: 1.2; margin: 0; }
.book-author { font-size: 12px; margin: 12px 0 0; line-height: 1.6; color: var(--muted); }
.book-format { font-size: 12px; margin: 7px 0 0; color: var(--muted); }
.book-cost { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 12px 0 0; }
.book-card .text-link { margin-top: 17px; }

/* 7 · Percorsi tematici ------------------------------------------------------- */
.paths { background: var(--paper-2); border-block: 1px solid #d4ccba; }
.paths > .wrap > .eyebrow, .paths > .wrap > h2 { text-align: center; }
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 42px; }
.path-grid > a {
  position: relative; min-height: 390px; padding: 30px;
  border: 1px solid #89947640; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; align-items: start;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.path-grid > a:hover { transform: translateY(-7px); box-shadow: 0 20px 28px #153e3115; }
.path-grid > div { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.path-earth { background: linear-gradient(#0c2c21d9, #0c2c21e8), var(--garden) left bottom / auto 100%; color: #f0ecdc; }
.path-moon { background: var(--lavender); color: #403950; }
.path-kitchen { background: var(--terracotta); color: #523c23; }
.path-grid > a:hover { color: inherit; }
.path-number { font-size: 9px; letter-spacing: 1.5px; }
.path-symbol { font: 95px/1 Georgia, serif; margin: 22px 0 6px; }
.path-earth .path-symbol { color: #d2d9aa; }
.path-moon .path-symbol { color: #675575; }
.path-kitchen .path-symbol { color: #a76b33; }
.path-grid h3 { font-size: 34px; margin: 10px 0 0; color: inherit; }
.path-grid p { color: inherit; opacity: .88; font-size: 14px; margin: 15px 0 27px; max-width: 290px; }
.path-grid .text-link { margin-top: auto; font-size: 13px; }

/* 8 · Casa editrice ----------------------------------------------------------- */
.publisher { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.publisher-photo { position: relative; padding: 0 30px 0 0; }
.publisher-photo img { display: block; width: 100%; max-height: 470px; object-fit: cover; border-radius: 48% 48% 3px 3px; filter: saturate(.82); }
.publisher-photo::after { content: '\2767'; position: absolute; right: -8px; bottom: 26px; font: 100px/1 Georgia, serif; color: var(--gold); transform: rotate(-35deg); }
.publisher-photo > span { display: block; font-size: 8px; letter-spacing: 2px; margin-top: 15px; }
.publisher h2 { margin-bottom: 30px; }
.publisher h3 { margin: 25px 0 12px; }
.publisher p { color: var(--muted); }
.publisher .text-link { margin-top: 12px; }

/* 9 · Richiamo ai due ingressi e diario ---------------------------------------- */
.gift {
  background: linear-gradient(90deg, #0b211ced, #0b211cc9), var(--garden) center 70% / cover;
  color: var(--paper);
  padding: 65px;
  border: 1px solid #c7ac72;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.gift h2 { color: var(--paper); font-size: clamp(36px, 4vw, 56px); margin: 0 0 15px; }
.gift h2 em { color: var(--moonlight); }
.gift p { color: #dae1d1; margin: 0; }
.gift .eyebrow { color: var(--moonlight); font-size: 9px; }
.gift-entry-actions { display: flex; flex-direction: column; gap: 13px; flex-shrink: 0; }
.gift-entry-actions .button { justify-content: space-between; }
.gift .button-light { background: var(--moonlight); border-color: var(--moonlight); color: var(--night); }
.gift .button-light:hover { background: #f0dba7; }

.journal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 35px; }
.journal-links > a { padding: 30px; background: var(--paper-2); border-top: 2px solid #b59b69; text-decoration: none; color: inherit; display: block; }
.journal-links > a:hover { background: #e7e5d5; }
.journal-links h3 { margin: 0; }
.journal-links p { margin: 14px 0 16px; color: var(--muted); }

/* 10 · Catalogo --------------------------------------------------------------- */
.catalog-heading > .eyebrow { color: #82612d; }
.catalog-heading h1 { font-size: clamp(44px, 5.7vw, 78px); max-width: 900px; margin: 0; }
.catalog-heading .intro { margin-top: 26px; }
.catalog-tools { display: flex; justify-content: space-between; align-items: end; gap: 30px; border-block: 1px solid var(--line); padding-block: 25px; margin-top: 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { background: transparent; border: 1px solid var(--line); padding: 10px 15px; color: var(--ink); font-size: 13px; cursor: pointer; border-radius: 2px; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.search { font-size: 11px; display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.search input[type=search] { width: 100%; box-shadow: none; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 9px 0; color: var(--ink); font-size: 14px; }
.count { font-size: 12px; margin: 24px 0; color: var(--muted); }
.archive { padding-bottom: 80px; }
.archive > p { margin-top: 15px; color: var(--muted); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 35px; }
.archive-grid a { display: flex; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 24px; text-decoration: none; color: inherit; }
.archive-grid img { width: 70px; height: 105px; object-fit: contain; }
.archive-grid h3 { font-size: 21px; margin: 0; }
.archive-grid p { font-size: 11px; margin: 10px 0 0; color: var(--muted); }
.breadcrumb { font-size: 12px; margin: 0; padding-top: 34px; color: var(--muted); }
.breadcrumb a { color: inherit; }

/* 11 · Scheda libro (vocabolario storico) --------------------------------------- */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: min(1240px, calc(100% - 96px));
  max-width: none;
  margin-inline: auto;
  padding: 48px 0 88px;
  min-height: 0;
}
.product-image {
  max-width: none !important;
  display: flex; justify-content: center;
  background: none;
  border-radius: 0;
  padding: 0 0 10px;
  perspective: none;
}
.product-image picture { display: flex; justify-content: center; }
.product-image img {
  width: auto; max-height: 560px; border-radius: 0;
  box-shadow: 12px 18px 30px #27382733;
}
.product-info { max-width: 560px; }
.product-tag {
  display: inline-block;
  font: 700 11px/1.5 var(--sans);
  letter-spacing: 2px; text-transform: uppercase;
  color: #82612d;
  background: none; padding: 0; border-radius: 0;
  margin-bottom: 18px;
}
.product-title { font-size: clamp(40px, 4vw, 60px); margin: 0 0 14px; color: var(--ink); }
.product-autori { color: var(--muted) !important; font-size: 16px !important; margin: 0 0 18px !important; }
.product-subtitle { font-size: 18px; line-height: 1.8; color: var(--muted); font-style: normal; margin: 0 0 26px; }
.social-proof { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.stars { color: var(--gold); letter-spacing: 2px; }
.price-container { display: flex; align-items: baseline; gap: 15px; border-block: 1px solid var(--line); padding-block: 20px; margin: 0 0 28px; }
.current-price { font-family: var(--serif); font-size: 38px; font-weight: 400; color: var(--ink); }
.original-price { text-decoration: line-through; color: #9a9c8e; font-size: 18px; }
.luna-chips span, .chips span { border-radius: 2px !important; background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--line); font-size: 12px !important; letter-spacing: .5px; }
.luna-nota-cta { color: var(--muted) !important; font-size: 13px !important; }

.section-container { max-width: 1040px; margin: 0 auto; }
.section-container.series-section-container { max-width: 1240px; }
.section-title { text-align: center; font-size: clamp(32px, 3.4vw, 48px); margin: 0 0 56px; color: var(--ink); }
.section-intro { color: var(--muted) !important; }
.features-section, .bullet-section, .faq-section { background: var(--card) !important; padding: 95px 24px; border-block: 1px solid var(--line); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.feature-item {
  text-align: left; padding: 30px;
  background: var(--paper); border: 1px solid var(--line); border-top: 2px solid #b59b69;
  border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s;
}
.feature-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.feature-icon { font-size: 34px; margin-bottom: 16px; color: var(--gold); line-height: 1; }
.feature-title { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 10px; }
.feature-item p { font-size: 15px; color: var(--muted); margin: 0; }
.parte-num { color: #82612d !important; }
.bullet-card { background: var(--paper) !important; border: 1px solid var(--line); border-radius: var(--radius) !important; box-shadow: none !important; }
.bullet-card ul { color: var(--muted) !important; }

.preview-section { padding: 95px 24px; background: var(--paper-2); text-align: center; overflow: hidden; border-block: 1px solid #d4ccba; }
.carousel-container { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 20px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 auto; width: 220px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: #fff; box-shadow: 8px 12px 18px #27382720; transition: transform .25s; }
.carousel-item img { width: 100%; height: auto; display: block; }
.carousel-item:hover { transform: translateY(-6px); }

.narrative-section { padding: 105px 24px; background: linear-gradient(#0b211ce8, #0b211cf2), var(--garden) center / cover; color: #e9e6d6; }
.narrative-section .section-title { color: var(--paper); }
.narrative-content { max-width: 720px; margin: 0 auto; text-align: center; font-family: var(--serif); font-size: 21px; line-height: 1.75; color: #e9e6d6; }
.narrative-content strong, .narrative-content em { color: var(--moonlight); }
.luna-epigrafe { color: #d8d9c8 !important; }
.luna-epigrafe cite { color: #b9c2ae !important; }

.faq-container { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-question { font-family: var(--serif); font-size: 21px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-answer { margin-top: 14px; color: var(--muted); display: none; line-height: 1.75; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-question { color: var(--gold-deep); }

/* «Altri libri della collana» in fondo alle schede */
.features-grid.series-books-grid, .series-books-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.series-books-grid .book-card { background: none; box-shadow: none; text-align: left; }
.series-books-grid .book-card img { box-shadow: 8px 12px 16px #2738271f; border-radius: 0; }

.sticky-mobile-cta { position: fixed; inset: auto 0 0; background: var(--night); padding: 12px 20px; box-shadow: 0 -6px 18px #0003; display: none; z-index: 1000; text-align: center; }
.sticky-mobile-cta .cta-button { width: 100%; min-height: 50px; padding-block: 14px; font-size: 15px; }
.editorial-note { background: #f1e7cd; border: 1px solid #c5b98f; border-radius: var(--radius); padding: 18px 22px; color: #435343; font-size: 15px; }

/* 12 · Pagine di testo (chi siamo, legali, servizio) ----------------------------- */
.prose, main.container, .about-section { max-width: 820px; margin-inline: auto; padding-block: 70px 90px; }
main.container { width: min(820px, calc(100% - 96px)); }
.prose h1, main.container > h1 { font-size: clamp(36px, 4vw, 54px); }
.prose h2, main.container h2, .about-section h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 2em 0 .6em; }
.prose h3, main.container h3 { font-size: 21px; margin: 1.8em 0 .5em; }
.prose ul, main.container ul, .prose ol, main.container ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li + li, main.container li + li { margin-top: 8px; }
.prose table, main.container table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 1.6em; display: block; overflow-x: auto; }
.prose th, .prose td, main.container th, main.container td { border-bottom: 1px solid var(--line); padding: 11px 12px; text-align: left; vertical-align: top; }
.prose th, main.container th { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.about-image img { border-radius: 48% 48% 3px 3px; filter: saturate(.85); }
.mission-statement { font-family: var(--serif); font-size: 24px; line-height: 1.5; color: var(--ink); border-left: 2px solid #b59b69; padding-left: 24px; }
.authors-accordion .author-item { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: none !important; margin-bottom: 14px; overflow: hidden; }
.author-header { cursor: pointer; }
.author-bio { border-top-color: var(--line) !important; }

/* 13 · Moduli e riquadri --------------------------------------------------------- */
.card, .em-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-soft); }
label { font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #153e3122; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--ink); }
.form-group { margin-bottom: 18px; }
.form-group input[type="checkbox"] { width: auto; padding: 0; flex: 0 0 auto; }
.contact-section { padding-block: 95px; border-top: 1px solid var(--line); }
.contact-form { max-width: 600px; margin: 0 auto; }
.contact-form .btn { width: 100%; }
.error, .err, .error-message { color: var(--bad); }
.ok, .success-message { color: var(--ok); }
.muted { color: var(--muted); }
.lead { font-size: 18px; color: var(--muted); }

/* 14 · Blog, musica, finestra ------------------------------------------------------ */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 45px; }
.section-header h2 { margin: 0 0 12px; }
.section-header p { color: var(--muted); margin: 0; }
.blog-section { padding-block: 95px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blog-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.blog-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.blog-image img, .blog-image img[width][height] { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-content { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #7b602f; margin-bottom: 10px; }
.blog-title { font-size: 22px; margin: 0 0 10px; }
.blog-card a { text-decoration: none; color: inherit; }
.blog-excerpt { font-size: 14px; color: var(--muted); margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-link { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--ink) !important; border-bottom: 1px solid currentColor; align-self: start; padding-bottom: 3px; }

.spotify-section { background: var(--night); color: var(--paper); border-radius: var(--radius); padding: 50px; text-align: center; }
.spotify-section h2 { color: var(--paper) !important; }
.spotify-embed-container { max-width: 820px; margin: 28px auto 0; }

.modal-overlay { position: fixed; inset: 0; background: #0b211ccc; display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.modal-content { position: relative; background: var(--paper); border: 1px solid #c7ac72; border-radius: var(--radius); padding: 46px 40px 40px; max-width: 480px; text-align: center; box-shadow: 0 30px 60px #0006; }
.modal-content h2 { font-size: 34px; }
.modal-content p { color: var(--muted); }
.close-btn { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; }

/* 15 · Piede ------------------------------------------------------------------------ */
.em-footer { border-top: 1px solid var(--line); padding: 50px 0 28px; margin-top: 95px; }
.em-footer .footer-top { display: flex; justify-content: space-between; gap: 40px; }
.em-footer .em-brand > span { font-size: 42px; color: var(--ink); }
.em-footer .em-brand i { color: var(--gold); }
.em-footer .em-brand small { color: var(--muted); }
.em-footer .footer-top p { font-size: 14px; color: var(--muted); margin: 0; }
.em-footer .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 25px; font-size: 13px; align-content: start; }
.em-footer a { text-decoration: none; }
.em-footer a:hover { text-decoration: underline; }
.em-footer .footer-bottom { border-top: 1px solid var(--line); margin-top: 45px; padding-top: 20px; font-size: 11px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; color: var(--muted); }
.em-footer .footer-bottom div { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.em-footer .fine-print { font-size: 11px; margin: 16px 0 0; max-width: 760px; }
/* piede storico */
body > footer:not(.em-footer) { border-top: 1px solid var(--line); margin-top: 80px; padding: 40px 0 30px; text-align: center; font-size: 13px; color: var(--muted); background: none; }

/* 17 · Aggiunte dalla conversione delle pagine ------------------------------------------ */
.em-pagehead .eyebrow { font-size: 11px; margin: 0 0 20px; }
.breadcrumb.wrap { margin-inline: auto; }

/* (28/09/2026: tolte le regole em-senza-menu. Le pagine del funnel email hanno la stessa testata
   col menu di tutto il sito, per scelta di Leonardo.) */

/* riquadro delle pagine di servizio */
.em-service { padding-block: 70px 20px; }
.em-service .card, .em-service .em-card { max-width: 620px; margin-inline: auto; padding: 40px; }
.em-service h1 { font-size: clamp(28px, 3.2vw, 38px); }
.ok.box, .error.box { padding: 11px 15px; border-left: 2px solid currentColor; background: var(--sage); }
.error.box { background: #f6e1dc; }

/* schede libro */
.feature-icon { font-family: var(--serif); letter-spacing: 1px; }
.carousel-container { align-items: flex-start; }
.section-intro { max-width: 680px; margin: -36px auto 50px; text-align: center; font-size: 17px; line-height: 1.7; }
.faq-gruppo { font: 700 11px/1.5 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #82612d; margin: 46px 0 4px; }
.nota-cta { margin: 15px 0 0; font-size: 13px; color: var(--muted); }
.narrative-section.narrative-chiara { background: var(--sage); color: var(--text); border-block: 1px solid var(--line); }
.narrative-chiara .section-title { color: var(--ink); }
.narrative-chiara .narrative-content { color: var(--text); }
.narrative-chiara .narrative-content strong, .narrative-chiara .narrative-content em { color: var(--gold-deep); }
@media (max-width: 560px) {
  .em-service { padding-top: 40px; }
  .em-service .card, .em-service .em-card { padding: 28px 20px; }
  .section-intro { margin-top: -18px; margin-bottom: 36px; }
}

/* 16 · Movimento, adattamenti, stampa --------------------------------------------------- */
@keyframes em-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fade-in-up { animation: em-rise .7s ease both; }
.delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; } .delay-300 { animation-delay: .3s; }

@media (max-width: 1100px) {
  .wrap, .container, .product-hero { width: calc(100% - 56px); }
  main.container { width: min(820px, calc(100% - 56px)); }
  .em-header { padding-inline: 28px; flex-wrap: wrap; justify-content: center; gap: 18px; padding-block: 22px; }
  .em-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .hero-scene .hero { min-height: 600px; }
  .hero-copy h1 { font-size: 62px; }
  .hero-art { min-height: 485px; }
  .front-book { top: 35px; } .back-book { top: 105px; }
  .book-seal { width: 92px; height: 92px; bottom: 85px; } .book-seal strong { font-size: 30px; }
  .book-grid { gap: 20px; }
  .book-cover { height: 300px; }
  .path-grid > a { padding: 24px; } .path-grid h3 { font-size: 29px; }
  .publisher { gap: 50px; }
  .product-hero { gap: 50px; }
  .features-grid.series-books-grid, .series-books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .em-header { min-height: 92px; flex-wrap: wrap; justify-content: space-between; gap: 0; padding-block: 18px; }
  .em-brand > span { font-size: 29px; } .em-brand small { font-size: 7px; }
  .em-nav-burger { display: block; }
  .em-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 18px; }
  .em-nav-toggle:checked ~ .em-nav { display: flex; }
  .em-nav .nav-gift, .em-nav .nav-guide, .em-nav .nav-garden { margin-top: 10px; text-align: center; }
  .em-nav .nav-garden { margin-left: 0; }
  .em-garden-quick {
    display: inline-flex; align-items: center; margin-left: auto; margin-right: 6px;
    padding: 10px 9px; border: 1px solid var(--moonlight); border-radius: 3px;
    color: var(--moonlight); font-size: 12px; line-height: 1; text-decoration: none; white-space: nowrap;
  }
  .em-nav-burger { padding-inline: 10px; }
  .nav-burger { display: block; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .section { padding-block: 70px; }
  .hero-scene .hero { padding-block: 46px 35px; }
  .hero-copy h1 { font-size: 52px; letter-spacing: -2px; }
  .hero-copy .intro { font-size: 15px; } .hero-copy .intro br { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { justify-content: space-between; }
  .hero-art { min-height: 430px; }
  .front-book { top: 75px; width: 51%; right: 8%; } .back-book { top: 133px; width: 45%; left: 0; }
  .orbit { inset: 48px -3px 60px; }
  .book-seal { bottom: 87px; right: -5px; width: 80px; height: 80px; } .book-seal span { font-size: 6px; } .book-seal strong { font-size: 25px; }
  .art-note { font-size: 7px; letter-spacing: 1.5px; top: 25px; }
  .art-caption { left: 4%; right: 0; } .art-caption a { font-size: 20px; }
  .manifesto-line span + span { display: none; }
  .entry-section { padding-top: 48px; }
  .entry-heading, .section-heading { flex-direction: column; align-items: start; gap: 15px; }
  .entry-card { padding: 25px; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .book-cover { height: 340px; }
  .path-grid { gap: 14px; } .path-grid > a { padding: 21px 18px; } .path-grid h3 { font-size: 25px; } .path-symbol { font-size: 80px; }
  .publisher { gap: 35px; } .publisher-photo { padding-right: 15px; } .publisher-photo::after { font-size: 76px; }
  .gift { flex-direction: column; align-items: start; gap: 26px; padding: 45px; }
  .catalog-tools { align-items: stretch; flex-direction: column; gap: 20px; } .search { max-width: 340px; }
  .archive-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-hero { grid-template-columns: 1fr; gap: 35px; padding-top: 30px; text-align: center; }
  .product-info { margin-inline: auto; }
  .product-image img { max-height: 420px; }
  .price-container, .social-proof, .luna-chips { justify-content: center; }
  .sticky-mobile-cta { display: block; }
  body:has(.sticky-mobile-cta) .em-footer, body:has(.sticky-mobile-cta) > footer { padding-bottom: 100px; }
  .em-footer .footer-top { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .container, .product-hero { width: calc(100% - 40px); }
  main.container { width: calc(100% - 40px); }
  .em-ribbon span { display: none; }
  .em-header { padding-inline: 20px; min-height: 88px; }
  .section { padding-block: 52px; }
  h2 { font-size: 39px; }
  .hero-scene { background-position: 62% center; }
  .hero-scene .hero { grid-template-columns: 1fr; padding-block: 39px 25px; gap: 28px; min-height: 0; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1.1px; gap: 8px; margin-bottom: 19px; } .hero-copy .eyebrow span { font-size: 17px; }
  .hero-copy h1 { font-size: clamp(46px, 12.8vw, 69px); }
  .hero-copy .intro { max-width: 360px; margin-top: 22px; }
  .hero-actions .button { padding: 14px 18px; font-size: 14px; }
  .hero-footnote { font-size: 7px; margin-top: 20px; letter-spacing: 1px; }
  .hero-art { min-height: 0; height: 121vw; max-height: 570px; margin: 3px 3px 0; }
  .art-note { top: 0; right: 0; }
  .front-book { top: 32px; width: 49%; right: 10%; } .back-book { top: 91px; width: 43%; left: 3%; }
  .orbit { inset: 22px 0 57px; }
  .book-seal { right: 0; bottom: 85px; width: 87px; height: 87px; } .book-seal strong { font-size: 28px; }
  .art-caption { left: 8%; right: 1%; }
  .manifesto-line > span:first-child { font-size: 15px; }
  .entry-grid { grid-template-columns: 1fr; gap: 18px; }
  .entry-card { padding: 27px; } .entry-card h3 { font-size: 37px; }
  .entry-card .button { width: 100%; justify-content: space-between; font-size: 12px; }
  .book-grid { gap: 28px 16px; }
  .book-cover { height: 240px; }
  .book-card h3 { font-size: 22px; } .book-label { font-size: 8px; letter-spacing: .8px; margin-top: 15px; }
  .book-flag { font-size: 8px; padding: 2px 6px; }
  .path-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .path-grid > a { min-height: 340px; padding: 27px; }
  .path-grid h3 { font-size: 36px; margin-top: 60px; position: relative; }
  .path-grid p { max-width: 245px; }
  .path-symbol { position: absolute; top: 31px; right: 24px; font-size: 98px; margin: 0; opacity: .45; }
  .publisher { grid-template-columns: 1fr; gap: 30px; }
  .publisher-photo { padding-inline: 15px; } .publisher-photo img { max-height: 390px; object-position: center 35%; }
  .gift { padding: 35px 25px; } .gift h2 { font-size: 41px; }
  .gift-entry-actions { width: 100%; } .gift-entry-actions .button { white-space: normal; }
  .journal-links { grid-template-columns: 1fr; gap: 22px; } .journal-links > a { padding: 25px; }
  .catalog-heading h1 { font-size: 43px; letter-spacing: -1.7px; }
  .blog-grid { grid-template-columns: 1fr; }
  .spotify-section { padding: 32px 20px; }
  .features-section, .bullet-section, .faq-section, .preview-section { padding: 60px 20px; }
  .narrative-section { padding: 70px 22px; } .narrative-content { font-size: 18px; }
  .section-title { margin-bottom: 36px; }
  .features-grid.series-books-grid, .series-books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .carousel-item { width: 170px; }
  .em-footer { margin-top: 60px; }
  .em-footer .footer-top { flex-direction: column; gap: 25px; }
  .em-footer .em-brand > span { font-size: 37px; }
  .em-footer .footer-bottom { flex-direction: column; }
  .card, .em-card { padding: 24px 20px; }
}
@media (max-width: 370px) {
  .hero-copy h1 { font-size: 44px; }
  .hero-art { height: 125vw; }
  .book-cover { height: 215px; }
  .book-seal { width: 74px; height: 74px; }
  h2, .publisher h2 { font-size: 35px; }
  .em-brand > span { font-size: 26px; }
}
@media (hover: none) {
  .button:hover, .btn:hover, .cta-button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .em-ribbon, .em-header, .em-footer, .sticky-mobile-cta, .modal-overlay { display: none !important; }
  body { background: #fff; }
}

/* ============================================================================
   IL MARCHIO (20/09/2026)
   Due versioni della stessa cosa: chiara su verde scuro in testata, verde su carta
   avorio nel piede. Cambia solo il file.

   IL DOPPIO SELETTORE NON E' UNA RIPETIZIONE. Piu' in su il foglio ha
   «img[width][height] { height: auto }», messa apposta perche' la pagina non salti
   mentre le immagini arrivano: ha specificita' (0,2,1) contro (0,1,1), e vincerebbe
   lei. Il foglio risolve gia' cosi' per .site-brand.

   LE ALTEZZE SONO BASSE perche' i file sono stati ritagliati sul disegno vero. La
   prima volta erano stati ritagliati includendo un alone quasi trasparente, e il
   marchio portava dentro il 44% di altezza vuota: per leggere la scritta serviva una
   testata di 116px, di cui meta' aria. Adesso il rapporto e' 4,9:1 e a 52px la
   scritta e' alta 31px.
   ========================================================================= */
.em-brand-logo { display: block; }
/* Misure ridotte del 20% il 20/09/2026, su richiesta di Leonardo, viste sul sito
   vero: 58 -> 46, 52 -> 42, 48 -> 38. Il rapporto e' 4,9:1, quindi a 46px il marchio
   e' largo 226px e la scritta resta alta 28px — sopra la soglia della leggibilita',
   che era la ragione per cui era grande. */
.em-brand-logo img,
.em-brand-logo img[width][height] {
  display: block;
  height: 46px;
  width: auto;
}
.em-brand-chiaro { display: inline-flex; flex-direction: column; gap: 10px; }
.em-brand-chiaro img,
.em-brand-chiaro img[width][height] { height: 38px; }

/* SU TELEFONO NON SI RIMPICCIOLISCE QUASI (20/09/2026)
   A 36px il marchio spariva accanto al pulsante «Menu +», che e' alto il doppio
   perche' deve essere un bersaglio per il pollice. Il marchio e' l'unica cosa che
   condivide quello spazio: non c'e' niente per cui fargli posto, e rimpicciolirlo
   per abitudine lo faceva sembrare un dettaglio invece che il nome della casa.
   Il rapporto e' 4,9:1, quindi a 48px il marchio e' largo 236px: su uno schermo da
   390px restano 150px per il menu, che ne chiede un centinaio. */
@media (max-width: 900px) {
  .em-brand-logo img, .em-brand-logo img[width][height] { height: 42px; }
  .em-brand-chiaro img, .em-brand-chiaro img[width][height] { height: 34px; }
}
@media (max-width: 560px) {
  .em-brand-logo img, .em-brand-logo img[width][height] { height: 38px; }
  .em-brand-chiaro img, .em-brand-chiaro img[width][height] { height: 30px; }
}
/* Sotto i 400px il marchio si misura sulla LARGHEZZA dello schermo, non su
   un'altezza fissa. A 48px e' largo 236px: su un telefono stretto, con accanto il
   pulsante del menu, quei 236 non ci stanno e la pagina comincia a scorrere di lato.
   Legandolo a 56vw non puo' traboccare per nessuna misura — a 360px viene largo 202
   e alto 41, a 320px largo 179 e alto 36 — e l'altezza la ricava da sola dal
   rapporto, senza schiacciare niente.
   Serve anche perche' un browser senza finestra non scende sotto i 504px: sotto
   quella misura non lo posso provare qui, e una regola che si adatta da sola e'
   piu' onesta di un numero scelto a occhio. */
@media (max-width: 400px) {
  .em-brand-logo img, .em-brand-logo img[width][height] { width: 45vw; height: auto; }
  .em-brand-chiaro img, .em-brand-chiaro img[width][height] { width: 46vw; height: auto; }
}
/* 02/10/2026: accanto a «Menu +» c'e' anche «Giardino». Fino a 360px stanno su una riga col logo a 45vw;
   sotto i 350 (telefoni rari) il logo scende a 40vw, altrimenti «Menu +» andrebbe a capo. */
@media (max-width: 350px) {
  .em-brand-logo img, .em-brand-logo img[width][height] { width: 40vw; }
}