/* Carta e ottone, dalla palette di Astrolabio: fondo carta azzurrina, inchiostro blu notte,
   ottone per i dettagli e sei pastelli per distinguere le sezioni. */
:root {
  --carta: #EDF1F6;
  --carta-alta: #F6F8FB;
  --carta-bassa: #E2E8F1;
  --inchiostro: #1B2434;
  --tenue: #5F6E83;
  --ottone: #A98B4F;
  --ottone-scuro: #8A6F3B;
  --ottone-chiaro: #C7AE7C;
  --linea: rgba(169, 139, 79, 0.35);
  --linea-tenue: rgba(95, 110, 131, 0.22);
  --numeri: #BFD3EC;
  --incertezza: #C6DEDF;
  --relazioni: #C4DCCB;
  --spazio: #D6CDE8;
  --periodicita: #EFD8C0;
  --variazione: #F0D2D9;
  --display: "Fraunces", Georgia, serif;
  --testo: "Manrope", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--inchiostro); background-color: var(--carta);
  background-image: radial-gradient(120% 70% at 50% 0%, var(--carta-alta) 0%, var(--carta) 70%);
  background-repeat: no-repeat; background-size: 100% 60rem;
  font-family: var(--testo); font-weight: 400; font-size: 1.02rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { color: var(--ottone-scuro); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ottone); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 600; }

.gutter { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1120px; margin: 0 auto; }
.col { max-width: 40rem; color: var(--tenue); }

/* Intestazione */
.testata { border-bottom: 1px solid var(--linea); background: rgba(246, 248, 251, 0.6); }
.testata .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 2rem; padding-block: 1.3rem; }
.marchio { text-decoration: none; color: var(--inchiostro); display: grid; gap: 0.15rem; }
.marchio b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.marchio span { color: var(--ottone); letter-spacing: 0.06em; font-size: 0.88rem; font-weight: 500; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
nav a { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem; font-weight: 500; color: var(--tenue); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
nav a:hover, nav a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--ottone); }

/* Titoli */
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; color: var(--inchiostro); }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; margin: 0 0 0.6rem; }
.etichetta { color: var(--ottone); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; margin: 0 0 0.7rem; }
.greco { font-family: var(--display); font-style: italic; color: var(--ottone); font-size: 1.4rem; margin: 0; }
.sotto { color: var(--tenue); }

section { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--linea-tenue); }
.apertura { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.4rem, 5vw, 3.5rem); position: relative; overflow: hidden; }
.apertura .wrap { display: grid; gap: 1.2rem; position: relative; }
.apertura p.lead { font-size: 1.15rem; max-width: 34rem; color: var(--tenue); margin: 0.4rem 0 0; }

/* Quadrante decorativo dell'apertura (solo su schermi larghi) */
.quadrante { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 26rem; pointer-events: none; }
.quadrante circle { fill: none; stroke: rgba(169, 139, 79, 0.4); stroke-width: 0.9; }
.quadrante line { stroke: rgba(169, 139, 79, 0.5); stroke-width: 0.9; }
.quadrante line.m { stroke: rgba(169, 139, 79, 0.8); stroke-width: 1.4; }
.quadrante polygon { stroke: rgba(27, 36, 52, 0.18); stroke-width: 1.1; fill-opacity: 0.55; }
@media (max-width: 900px) { .quadrante { display: none; } }

/* Pulsanti */
.btn { display: inline-block; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.76rem; font-weight: 600;
  padding: 0.7rem 1.2rem; border: 1px solid rgba(95, 110, 131, 0.4); color: var(--inchiostro); text-decoration: none; border-radius: 2px;
  transition: border-color .2s ease, color .2s ease, background .2s ease; }
.btn.pieno { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta-alta); }
.btn:hover { border-color: var(--ottone); color: var(--ottone-scuro); background: transparent; }
.btn.pieno:hover { background: var(--ottone); border-color: var(--ottone); color: #fff; }
.azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }

/* Novità in home */
.novita { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
.novita img { box-shadow: 0 18px 40px rgba(27, 36, 52, 0.22); }
.novita > div { min-width: 0; }
@media (max-width: 640px) { .novita { grid-template-columns: minmax(0, 1fr); } .novita img { max-width: 13rem; } }

/* Riquadri pastello (home e pagine interne) */
.due { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 3rem; align-items: start; }
.due > * { min-width: 0; }
.riquadri > div { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--linea-tenue); border-radius: 2px; background: rgba(255,255,255,0.35); }
.riquadri > div:nth-child(1) { background: color-mix(in srgb, var(--numeri) 55%, transparent); }
.riquadri > div:nth-child(2) { background: color-mix(in srgb, var(--periodicita) 55%, transparent); }
.riquadri { gap: 1.4rem; align-items: stretch; }

/* Griglia libri */
.filtri { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 2rem; }
.filtri button { font: inherit; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; font-weight: 500; background: transparent;
  color: var(--tenue); border: 1px solid rgba(95, 110, 131, 0.35); padding: 0.5rem 0.95rem; border-radius: 2px; cursor: pointer; }
.filtri button:hover { border-color: var(--ottone); color: var(--ottone-scuro); }
.filtri button[aria-pressed="true"] { color: var(--carta-alta); background: var(--inchiostro); border-color: var(--inchiostro); }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 2.4rem 1.6rem; }
.libro { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.libro .cop { display: block; aspect-ratio: 5 / 8; background: var(--carta-bassa); overflow: hidden; box-shadow: 0 10px 24px rgba(27, 36, 52, 0.16); }
.libro .cop img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.libro .cop:hover img { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .libro .cop img, .btn { transition: none; } }
.libro h3 { font-size: 1.15rem; line-height: 1.2; margin: 0.7rem 0 0; }
.libro p { margin: 0; color: var(--tenue); font-size: 0.88rem; line-height: 1.45; flex: 1; }
.libro .amazon { margin-top: 0.55rem; align-self: flex-start; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; font-weight: 600;
  color: var(--ottone-scuro); text-decoration: none; border-bottom: 1px solid var(--ottone); padding-bottom: 2px; }
.libro .amazon:hover { color: var(--inchiostro); }
.conteggio { color: var(--tenue); font-size: 0.9rem; }

/* Testi lunghi */
.prosa p, .prosa li { max-width: 40rem; }
.prosa ul { padding-left: 1.1rem; }
.prosa li::marker { content: "›  "; color: var(--ottone); }
.prosa li { margin-bottom: 0.4rem; }
.schermata { border: 1px solid var(--linea-tenue); box-shadow: 0 14px 30px rgba(27, 36, 52, 0.14); }
.dati { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dati span { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; color: var(--ottone-scuro);
  border: 1px solid var(--linea); border-radius: 2px; padding: 0.35rem 0.7rem; }
.discipline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; }
.discipline li { padding: 0.8rem 1rem; display: grid; gap: 0.1rem; border-radius: 2px; border: 1px solid var(--linea-tenue); }
.discipline li:nth-child(6n+1) { background: color-mix(in srgb, var(--numeri) 60%, transparent); }
.discipline li:nth-child(6n+2) { background: color-mix(in srgb, var(--incertezza) 60%, transparent); }
.discipline li:nth-child(6n+3) { background: color-mix(in srgb, var(--relazioni) 60%, transparent); }
.discipline li:nth-child(6n+4) { background: color-mix(in srgb, var(--spazio) 60%, transparent); }
.discipline li:nth-child(6n+5) { background: color-mix(in srgb, var(--periodicita) 60%, transparent); }
.discipline li:nth-child(6n+6) { background: color-mix(in srgb, var(--variazione) 60%, transparent); }
.discipline b { font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.discipline span { color: var(--tenue); font-size: 0.86rem; font-variant-numeric: tabular-nums; }

/* Approfondimenti */
.schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.6rem; }
.scheda { border: 1px solid var(--linea-tenue); border-radius: 2px; padding: clamp(1.2rem, 3vw, 1.9rem); display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.scheda:nth-child(4n+1) { background: color-mix(in srgb, var(--numeri) 50%, transparent); }
.scheda:nth-child(4n+2) { background: color-mix(in srgb, var(--spazio) 50%, transparent); }
.scheda:nth-child(4n+3) { background: color-mix(in srgb, var(--variazione) 50%, transparent); }
.scheda:nth-child(4n+4) { background: color-mix(in srgb, var(--relazioni) 50%, transparent); }
.scheda h3 { font-size: 1.8rem; margin: 0; line-height: 1.1; }
.scheda .riga { margin: 0; color: var(--ottone-scuro); font-family: var(--display); font-style: italic; font-size: 1.05rem; }
.scheda p { margin: 0; }
.scheda dl { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0.4rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--linea); font-size: 0.9rem; }
.scheda dt { letter-spacing: 0.12em; text-transform: uppercase; color: var(--ottone-scuro); font-size: 0.68rem; font-weight: 600; padding-top: 0.2rem; }
.scheda dd { margin: 0; }
@media (max-width: 480px) { .scheda dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } .scheda dd { margin-bottom: 0.5rem; } }
.scheda .per { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; font-size: 0.92rem; }

/* Piede */
footer { border-top: 1px solid var(--linea); color: var(--tenue); font-size: 0.85rem; }
footer .wrap { padding-block: 2rem 2.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; }
footer a { color: var(--tenue); }