/* La carta — il quaderno è un album, e questa è la sua forma.
 *
 * Non c'è più un interruttore: questo foglio vale sempre, per tutt'e due le signore. Quello
 * che si può alleggerire — la grana, il velo, la serif, gli angolini — sta in ornamenti.css,
 * sotto `[data-ornamenti="pieni"]`, e non muove mai né la barra né i comandi.
 *
 * I COLORI SONO QUELLI DI SEMPRE. Il verde del quaderno è quello che piace a mamma: qui si
 * cambia la FORMA delle superfici — spigoli di foglio, ombre secche, filetti incisi, fotografie
 * montate — non la tavolozza. La prima versione di questo vestito virava tutto al marrone: era
 * troppo scuro, e il marrone non è mai stato il punto.
 *
 * Quello che non si tocca, qui dentro e in qualunque revisione futura:
 *   · le quattro voci della barra, il loro ordine, la loro posizione e le loro misure;
 *   · «Racconta un ricordo», nemmeno nel colore: mamma quel pulsante lo trova dal colore
 *     prima che dalle parole;
 *   · i bersagli del dito (min-height, padding) e il testo mai sotto 17 px;
 *   · il pulsantone della registrazione, che resta tondo: è un gesto, non un foglio.
 */

/* ---------- i fogli ---------- */

/* Carte e pannelli diventano FOGLI: un filo di bordo, l'ombra secca di un foglio appoggiato
   e una riga di luce in alto, come l'intestazione di una pagina d'album. */
.carta,
.archive-chapters,
.menu-voce,
.story-reading,
.book-index,
.home-collection {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .75) inset,
    0 0 0 1px rgba(var(--velo), .04),
    2px 3px 0 rgba(var(--velo), .04),
    0 6px 16px rgba(var(--velo), .10);
}

/* I titoli di sezione diventano intestazioni incise: filetto doppio sotto, come in un indice. */
h2.sezione,
.menu-sezione .sezione {
  font-family: var(--titoli);
  letter-spacing: .01em;
  border-bottom: 3px double var(--filetto);
  padding-bottom: var(--sp-2);
}

/* Le etichette e gli occhielli: caratteri piccoli incisi sulla carta, non testo d'interfaccia. */
.etichetta,
.eyebrow {
  font-family: var(--titoli);
  letter-spacing: .12em;
  font-variant-caps: small-caps;
  text-transform: none;
}

/* Le righe di elenco diventano voci d'indice: un filo di luce sopra, niente scheda. */
.storia-riga,
a.storia-riga,
.spunto-riga { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; }
.storia-riga > div > div:first-child { font-family: var(--titoli); }

/* Le miniature e le fotografie dell'elenco: stampe montate, col filo scuro attorno. */
.crono-thumb,
.tema-copertina,
.griglia-foto img,
.foto-storia { box-shadow: 0 0 0 1px rgba(var(--velo), .18), 0 2px 6px rgba(var(--velo), .12); }
.griglia-foto button {
  padding: 6px 6px 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 12px rgba(var(--velo), .12);
}

/* La barra in basso (e il rail): resta esattamente dov'è, con le stesse quattro voci e le
   stesse misure, ma poggia sulla pagina come un bordo di carta invece di galleggiare. */
.barra-menu {
  border-top: 1px solid var(--filetto);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .7) inset, 0 -6px 18px rgba(var(--velo), .08);
}
.barra-menu button.attiva { box-shadow: inset 0 2px 0 var(--filetto); }
.family-navigation {
  border-right: 1px solid var(--filetto);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .7) inset;
}

/* I campi di scrittura: righe di quaderno, non caselle d'app. */
.scrivi-testo,
textarea.scrivi-testo,
.input {
  border-color: var(--filetto);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}

/* I bottoni secondari: carta col filetto, non pillole. */
.btn-secondario,
a.btn-secondario {
  border-color: var(--filetto);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(var(--velo), .08);
}

/* ---------- la copertina del capitolo ---------- */

.album { display: flex; flex-direction: column; gap: var(--sp-5); }

/* La foto sta SOPRA, montata come sulla copertina di un album vero, e il titolo su una
   fascia di carta piena: niente testo sopra l'immagine, dove la leggibilità dipenderebbe
   da che foto è capitata lì. */
.album-copertina {
  overflow: hidden; display: flex; flex-direction: column;
  border: 2px solid var(--linea); border-radius: var(--r-l);
  background: var(--bianco); box-shadow: 0 10px 26px var(--ombra-carta);
}
.album-copertina-foto {
  width: 100%; height: 230px; object-fit: cover; display: block;
  border-bottom: 1px solid var(--linea); background: var(--carta-calda);
}
.album-copertina-testo { padding: var(--sp-5); color: var(--inchiostro); background: var(--bianco); }
.album-copertina-testo .eyebrow { color: var(--inchiostro-tenue); letter-spacing: .08em; }
.album-copertina-testo h2 {
  font-size: var(--t-2xl); margin: var(--sp-2) 0 var(--sp-1);
  border-bottom: 3px double var(--filetto); padding-bottom: var(--sp-2);
}
.album-emoji { font-size: var(--t-icona); line-height: 1; margin: 0; }
.album-conta { color: var(--inchiostro-tenue); font-size: var(--t-m); margin: var(--sp-2) 0 0; }
.album-introduzione { font-size: var(--t-l); line-height: 1.65; color: var(--inchiostro); }
.album-apri { width: 100%; }

/* ---------- una pagina ---------- */

.album-pagina {
  position: relative;
  background: var(--bianco);
  border: 1px solid var(--linea); border-radius: var(--r-m);
  padding: var(--sp-6) var(--sp-5) 52px;
  color: var(--inchiostro);
  /* Carta piena sotto il testo — mai una macchia sotto un paragrafo: per chi ha la cataratta
     è sporco sullo schermo, e prova a pulirlo — e le ombre della piegatura sui bordi. */
  box-shadow:
    inset 0 0 0 1px rgba(var(--velo), .04),
    inset 14px 0 18px -16px rgba(var(--velo), .22),
    inset -14px 0 18px -16px rgba(var(--velo), .14),
    0 8px 22px var(--ombra-carta);
}
.album-data {
  color: var(--inchiostro-tenue); font-size: var(--t-s); letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 var(--sp-2);
}
.album-titolo {
  font-size: var(--t-2xl); line-height: 1.25; margin: 0 0 var(--sp-5);
  border-bottom: 3px double var(--filetto); padding-bottom: var(--sp-3);
}
.album-testo { font-size: var(--t-xl); line-height: 1.7; }
.album-testo p { margin: 0 0 var(--sp-4); }
.album-testo p:last-child { margin-bottom: 0; }

/* La fotografia nel suo passe-partout: bianco vero, filetto interno. Il passe-partout era
   invisibile finché era dipinto dello stesso colore della pagina. */
.album-figura {
  position: relative;
  margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: #FFFFFF; border: 1px solid var(--linea); border-radius: var(--r-s);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 5px 14px var(--ombra-carta);
}
.album-foto {
  display: block; width: 100%; height: auto; border-radius: var(--r-s);
  background: var(--carta-calda);
  box-shadow: 0 0 0 1px rgba(var(--velo), .16);
}
.album-figura figcaption {
  margin-top: var(--sp-3); font-style: italic; font-size: var(--t-m); line-height: 1.5;
  color: var(--inchiostro-tenue); text-align: center;
}

/* Un video della storia, dopo le fotografie: lo stesso passe-partout, ma DRITTO e senza
   angolini — una stampa si appoggia storta, un lettore coi suoi comandi no. */
.album-video {
  margin: 0 0 var(--sp-5); padding: var(--sp-3);
  background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-s);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 5px 14px var(--ombra-carta);
}
.album-video figcaption {
  margin-top: var(--sp-3); font-style: italic; font-size: var(--t-m); line-height: 1.5;
  color: var(--inchiostro-tenue); text-align: center;
}
/* E nella storia, il video sta sul foglio come una stampa montata. */
.video-figura video { box-shadow: 0 0 0 1px rgba(var(--velo), .18), 0 2px 6px rgba(var(--velo), .12); }
.video-riga-voce { box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 12px rgba(var(--velo), .12); }

/* Il numero di pagina, in basso a destra come su un libro vero. */
.album-numero {
  position: absolute; right: var(--sp-5); bottom: var(--sp-4);
  margin: 0; color: var(--inchiostro-tenue); font-size: var(--t-s); font-variant-numeric: oldstyle-nums;
}
/* «Pagina 3 di 9»: la legge anche lo screen reader, non è solo decorazione. */
.album-dove { text-align: center; color: var(--inchiostro-tenue); font-size: var(--t-m); margin: 0; }

/* ---------- sfogliare ---------- */

.album-sfoglia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.album-passo { width: 100%; }
.album-attrezzi { display: flex; flex-direction: column; gap: var(--sp-2); }

/* La pagina si posa, non gira in 3D: su un iPad vecchio un'animazione a tutto schermo
   fa ricaricare la scheda, e con una registrazione in corso costerebbe una storia. */
.album-pagina,
.album-copertina { animation: album-posa 140ms ease-out; }
@keyframes album-posa {
  from { opacity: .4; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .album-pagina,
  .album-copertina { animation: none; }
}

/* Da 700 px in su la pagina respira, ma resta UNA pagina: mai due facciate affiancate. */
@media (min-width: 700px) {
  .album-pagina { padding: 44px 48px 56px; }
  .album-copertina-foto { height: 340px; }
  .album-copertina-testo { padding: var(--sp-6); }
  .album-sfoglia { gap: var(--sp-4); }
}

/* ---------- la lastra: sfogliare le fotografie dentro il dialogo ---------- */

/* Due pulsanti grandi e il «dove sono», nello stesso modo in cui si sfoglia un capitolo.
   Sta nel dialogo che esiste già: la griglia e i tre filtri non cambiano. */
.foto-sfoglia {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: 520px; flex-shrink: 0;
}
.foto-sfoglia .foto-passo {
  width: 100%; border-color: var(--filetto);
  background: var(--bianco); color: var(--inchiostro);
}
.foto-dove {
  grid-column: 1 / -1; margin: 0; text-align: center;
  color: var(--carta-su-scuro-tenue); font-size: var(--t-s);
}
/* Guardando la foto ingrandita si guarda e basta: le frecce tornano al secondo tocco. */
.foto-piena.foto-grande .foto-sfoglia { display: none; }

/* ---------- le storie come pagine ---------- */

/* Una storia senza fotografie non ne riceve una finta: una fascia di carta con l'emoji del
   suo capitolo, dove sta nel tempo, e la sua prima frase in grande al posto della didascalia. */
.album-fascia {
  margin: 0 0 var(--sp-5); padding: var(--sp-6) var(--sp-5);
  background: var(--carta-calda); border: 1px solid var(--linea);
  border-radius: var(--r-s); text-align: center;
}
.album-fascia-emoji { font-size: var(--t-icona); line-height: 1; margin: 0; }
.album-fascia-dove {
  margin: var(--sp-2) 0 0; color: var(--inchiostro-tenue);
  font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase;
}
.album-fascia-frase {
  margin: var(--sp-4) 0 0; font-style: italic; font-size: var(--t-xl);
  line-height: 1.5; color: var(--inchiostro);
}
/* Il capolettera: solo sulle pagine senza fotografie, dove il testo comincia da solo. */
.album-pagina.senza-foto .album-testo > p:first-child::first-letter {
  float: left; font-size: 3.2em; line-height: .84; padding: 4px 8px 0 0;
  color: var(--filetto); font-weight: 700;
}

/* I cartellini: un rettangolo di carta incollata col filetto. Niente corsivi inglesi
   (illeggibili per lei) e niente rotazioni su un comando. */
.album-data,
.album-fascia-dove {
  display: inline-block;
  background: var(--carta-calda);
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  padding: 4px 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 5px var(--ombra-carta);
}

/* «Sai dirmi quando?» sta al posto della data, con lo stesso peso: è un invito, non un errore. */
.album-quando {
  display: block; width: auto; min-height: 44px; margin: 0 0 var(--sp-2); padding: 6px 12px 6px 0;
  border: 0; background: none; text-align: left;
  color: var(--inchiostro-tenue); font-size: var(--t-s); letter-spacing: .04em;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
}

/* Sfogliare un decennio dalla cronologia, e una storia dalla sua bottega. */
.album-decennio {
  width: 100%; margin: 0 0 var(--sp-3);
  border-color: var(--filetto); background: var(--bianco); color: var(--inchiostro);
}

/* Le copertine dei capitoli esistevano già: le spegneva una riga di adaptive.css. */
.archive-chapters .tema-copertina { display: block; grid-column: 1 / -1; }
.archive-chapters .tema-carta { grid-template-columns: 26px minmax(0, 1fr); }

/* ---------- la copertina del Libro ---------- */

/* Finta pelle verde di soli gradienti, col filetto d'oro impresso: la stessa che c'era,
   con la grana in più. Il testo sopra un fondo saturo sta a 12:1, non a 4,5: lei legge di sera. */
.book-cover {
  background:
    repeating-linear-gradient(48deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-42deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 30% 20%, #2E6553, #1B3A30 70%);
  box-shadow: inset 0 0 0 2px rgba(214, 178, 106, .40), 6px 6px 0 var(--carta-scura), 12px 12px 0 var(--carta-calda);
}
.book-cover .eyebrow { color: #E4D3A3; }

/* Sul computer di Vincenzo il bordo che si accende al passaggio è il filetto, non il verde vivo. */
@media (hover: hover) {
  .home-collection:hover,
  .storia-riga:hover,
  .menu-voce:hover,
  .tema-carta:hover,
  .volto:hover { border-color: var(--filetto); }
}