/* La scala senza attrito, il sito.
   I colori e i caratteri sono quelli della copertina: chi arriva qui dal libro deve riconoscere
   la stessa cosa. Nessun riferimento a Fulcrum, per la stessa ragione per cui non ce ne sono nel
   volume. */

:root {
  --notte:  #012F67;
  --fondo:  #011f45;   /* un gradino sotto il blu della copertina, per staccare i riquadri */
  --crema:  #F4F1EA;
  --oro:    #F9AD22;
  --tenue:  rgba(244, 241, 234, .66);
  --bordo:  rgba(244, 241, 234, .14);
  --lettura: 36rem;    /* la riga di lettura: piu' lunga di cosi' si perde il segno */
}

@font-face {
  font-family: 'Playfair Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('font/playfair-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('font/dmsans-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('font/dmsans-medium.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--notte);
  color: var(--crema);
  font: 400 1.0625rem/1.65 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dentro { width: min(50rem, 100% - 2.5rem); margin-inline: auto; }

/* Le sezioni di testo hanno un contenitore piu' stretto dell'apertura: se tenessero i 50rem, la
   riga resterebbe lunga 36 e il resto sarebbe mezza pagina vuota a destra. Visto su schermo, non
   nel codice. */
section .dentro, footer .dentro { width: min(var(--lettura), 100% - 2.5rem); }

/* ── L'apertura ─────────────────────────────────────────────────────────── */

.apertura { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }

.apertura .dentro {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.copertina {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}

h1 {
  font: 700 clamp(2.1rem, 6vw, 3.4rem)/1.04 'Playfair Display', Georgia, serif;
  margin: 0;
  letter-spacing: -.01em;
}

.sottotitolo {
  margin: 1rem 0 0;
  max-width: 26rem;
  color: var(--tenue);
  font-size: 1.0625rem;
}

.filo { width: 4.5rem; height: 3px; background: var(--oro); border: 0; margin: 1.5rem 0; }

.uscita { margin: 0; }
.uscita p { margin: 0; font-weight: 500; letter-spacing: .01em; }
.uscita strong { color: var(--oro); font-weight: 500; }

/* Il conto alla rovescia. Ogni blocco ha una larghezza minima e le cifre sono tabulari: senza,
   il numero dei secondi cambia larghezza a ogni battito e tutta la riga si muove. */
.conto-titolo {
  margin: 0 0 .7rem !important;
  color: var(--tenue); font-size: .8125rem; font-weight: 400 !important;
  letter-spacing: .06em; text-transform: uppercase;
}
.conto { display: flex; gap: .75rem; }
.conto > div { min-width: 3.9rem; text-align: center; }
.conto .num {
  display: block;
  font: 700 2.15rem/1 'Playfair Display', Georgia, serif;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.conto .eti {
  display: block; margin-top: .35rem;
  color: var(--tenue); font-size: .6875rem;
  letter-spacing: .09em; text-transform: uppercase;
}

@media (max-width: 26rem) {
  .conto { gap: .45rem; }
  .conto > div { min-width: 3.2rem; }
  .conto .num { font-size: 1.8rem; }
}

.compra {
  display: inline-block; margin-top: 1.25rem;
  background: var(--oro); color: var(--notte);
  font-weight: 500; text-decoration: none;
  padding: .7rem 1.6rem; border-radius: 2px;
}
.compra:hover { filter: brightness(1.08); }

.autore { margin: 1.5rem 0 0; color: var(--tenue); font-size: .9375rem; }

/* ── Le sezioni ─────────────────────────────────────────────────────────── */

section { padding: clamp(2.25rem, 6vw, 4rem) 0; border-top: 1px solid var(--bordo); }

h2 {
  font: 700 clamp(1.5rem, 3.4vw, 2rem)/1.15 'Playfair Display', Georgia, serif;
  margin: 0 0 1.5rem;
}

p { margin: 0 0 1.1rem; }
.prosa p:last-child { margin-bottom: 0; }

strong { font-weight: 500; color: #fff; }
em { font-style: italic; }

a { color: var(--oro); }

/* ── Aggiornamenti e dimostrazioni ──────────────────────────────────────── */

.introduzione { color: var(--tenue); }

.voce {
  border-left: 2px solid var(--oro);
  padding: .125rem 0 .125rem 1.5rem;
  margin-top: 2.25rem;
}

.data {
  display: block; margin-bottom: .35rem;
  color: var(--oro); font-weight: 500; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase;
}

h3 { font: 500 1.1875rem/1.35 'DM Sans', sans-serif; margin: 0 0 .85rem; }

.attesa, blockquote {
  margin: 2rem 0 0; padding: 1.5rem;
  background: var(--fondo); border: 1px solid var(--bordo); border-radius: 3px;
  color: var(--tenue);
}
.attesa p, blockquote p { margin: 0; }

footer {
  border-top: 1px solid var(--bordo);
  padding: 2.5rem 0 3.5rem;
  color: var(--tenue); font-size: .9375rem;
}
footer p { margin: 0 0 .5rem; max-width: none; }

/* ── Telefono ───────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .apertura .dentro { grid-template-columns: 1fr; justify-items: start; }
  .copertina { width: min(11rem, 45%); }
}