/* Gli ornamenti — quello che mamma può alleggerire da sola.
 *
 * REGOLA UNICA E NON NEGOZIABILE: ogni selettore di questo foglio sta sotto
 * `[data-ornamenti="pieni"]` sul root, e ogni ramo della virgola se lo porta dietro.
 * Uno script lo verifica a ogni `npm run check`.
 *
 * Perché esiste. Il vestito dell'album non ha più un interruttore: è il quaderno, e basta.
 * Ma quello che l'interruttore le toglieva non era la reversibilità — quella resta, ed è in
 * mano a chi scrive il codice — era l'unica via d'uscita che alle nove di sera è in mano a
 * LEI, senza telefonare al figlio. Se una sera non ci vede bene, alleggerisce: via la grana,
 * via il velo, via la serif, e il quaderno resta esattamente dov'era.
 *
 * Qui dentro entra solo quello che si può togliere senza spostare la navigazione né i comandi:
 * sfondi, filtri, ombre, decorazioni disegnate con ::before, inclinazioni. Mai un padding, mai
 * un bordo che occupa spazio, mai una misura.
 */

/* ---------- l'album aperto ---------- */
/*
 * Il quaderno è un album aperto sul tavolo: tutto lo schermo è la copertina in tela verde, e
 * quello che si legge sta su UN foglio chiaro, con la cucitura sul dorso, gli angoli in
 * filigrana d'oro e i fogli sotto. Scelto da Vincenzo il 23 settembre («qualcosa di più
 * drastico»), sempre nei verdi.
 *
 * Il foglio NON è un elemento: è dipinto a strati come sfondo di #app, dentro il suo padding.
 * Così nessuna misura cambia, nessun elemento cambia contenitore, e «ridotti» resta identico
 * al pixel (lo verifica `ornamenti.spec.mjs`).
 *
 * Regole che restano:
 * - sotto un paragrafo la carta è PIENA: la fibra sta sulla tela, mai sul foglio;
 * - i titoli nel carattere d'epoca, il testo che si legge a lungo no;
 * - niente corsivi inglesi scritti a mano: per lei sono illeggibili;
 * - le animazioni sono solo transform/opacity, brevi, spente col movimento ridotto e mentre
 *   registra (`body.registrando`): su un iPad vecchio un'animazione pesante costa la scheda,
 *   e con una registrazione in corso costerebbe una storia.
 */

/* I Fell Types (OFL), serviti in locale e in cache: il quaderno funziona anche offline.
   Si scaricano solo quando un titolo li usa, cioè solo con gli ornamenti pieni. */
@font-face { font-family: 'IM Fell English'; src: url('/fonts/im-fell-english.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('/fonts/im-fell-english-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url('/fonts/im-fell-english-sc.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

:root[data-ornamenti="pieni"] {
  --titoli: 'IM Fell English', ui-serif, 'Iowan Old Style', Georgia, serif;
  --tela: #1E3B32;
  --pagina: #F7F8F1;
  --oro-filo: rgba(214, 178, 106, .8);
  /* Dove sta il foglio dentro #app: sopra, ai lati, sotto. Telefono: sotto la testata. */
  --f-su: calc(68px + env(safe-area-inset-top, 0px));
  --f-lato: 4px;
  /* Il foglio finisce appena sopra il dock, così gli angoli di sotto si vedono. */
  --f-giu: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px) + 6px);
  --f-cucitura: 3px;
  --f-angolo: 56px;
  --decoro: linear-gradient(transparent, transparent);
}
@media (min-width: 700px) {
  :root[data-ornamenti="pieni"] { --f-su: 12px; --f-lato: 12px; --f-giu: 20px; --f-cucitura: 10px; --f-angolo: 72px; }
}
@media (min-width: 1200px) {
  :root[data-ornamenti="pieni"] { --f-su: 18px; --f-lato: 14px; --f-cucitura: 14px; }
}

/* La tela della copertina: trama e ordito, e la luce che scende dall'alto. */
:root[data-ornamenti="pieni"] body {
  background-color: var(--tela);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 255, 255, .07), transparent 60%),
    radial-gradient(ellipse 140% 100% at 50% 60%, transparent 55%, rgba(0, 0, 0, .28)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px);
  background-attachment: fixed;
}

/* Il foglio, a strati (il primo sta sopra): angoli d'oro, decoro della schermata, cucitura,
   bordi appena invecchiati, la carta, e sotto due fogli che sporgono. */
:root[data-ornamenti="pieni"] #app {
  background:
    url('/decori/angolo-ao.svg') left calc(var(--f-lato) + 2px) top calc(var(--f-su) + 2px) / var(--f-angolo) var(--f-angolo) no-repeat,
    url('/decori/angolo-ad.svg') right calc(var(--f-lato) + 2px) top calc(var(--f-su) + 2px) / var(--f-angolo) var(--f-angolo) no-repeat,
    url('/decori/angolo-bo.svg') left calc(var(--f-lato) + 2px) bottom calc(var(--f-giu) + 2px) / var(--f-angolo) var(--f-angolo) no-repeat,
    url('/decori/angolo-bd.svg') right calc(var(--f-lato) + 2px) bottom calc(var(--f-giu) + 2px) / var(--f-angolo) var(--f-angolo) no-repeat,
    var(--decoro),
    repeating-linear-gradient(to bottom, rgba(var(--velo), .32) 0 6px, transparent 6px 13px)
      left calc(var(--f-lato) + var(--f-cucitura)) top calc(var(--f-su) + 24px) / 2px calc(100% - var(--f-su) - var(--f-giu) - 48px) no-repeat,
    linear-gradient(to right, rgba(var(--velo), .10), transparent)
      left var(--f-lato) top var(--f-su) / 18px calc(100% - var(--f-su) - var(--f-giu)) no-repeat,
    linear-gradient(to left, rgba(var(--velo), .06), transparent)
      right var(--f-lato) top var(--f-su) / 14px calc(100% - var(--f-su) - var(--f-giu)) no-repeat,
    linear-gradient(var(--pagina), var(--pagina))
      left var(--f-lato) top var(--f-su) / calc(100% - 2 * var(--f-lato)) calc(100% - var(--f-su) - var(--f-giu)) no-repeat,
    linear-gradient(#DCE4D8, #DCE4D8)
      left calc(var(--f-lato) + 3px) top calc(var(--f-su) + 4px) / calc(100% - 2 * var(--f-lato)) calc(100% - var(--f-su) - var(--f-giu)) no-repeat,
    linear-gradient(#C3CFC0, #C3CFC0)
      left calc(var(--f-lato) + 6px) top calc(var(--f-su) + 8px) / calc(100% - 2 * var(--f-lato)) calc(100% - var(--f-su) - var(--f-giu)) no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px),
    linear-gradient(var(--tela), var(--tela));
  /* Il colore vero di #app è la CARTA: è quello su cui sta il testo (e quello che resta se
     uno strato non si disegna). La tela dentro #app è l'ultimo strato, sotto il foglio. */
  background-color: var(--pagina);
  /* Le stampe storte e i loro angolini sporgono di qualche pixel: mai uno scorrimento di lato.
     `clip` non crea un contenitore di scorrimento, quindi non cambia niente del resto. */
  overflow-x: clip;
  /* Il foglio è lungo almeno quanto lo schermo: nelle pagine brevi finiva a metà, e sotto
     restava mezza schermata di tela, come un foglio strappato. Non sposta nessun comando:
     allunga solo il fondo, sotto l'ultima cosa scritta. */
  min-height: 100vh;
  min-height: 100dvh;
}
/* Casa ha il suo rametto d'ulivo pressato fra le pagine, in fondo, dove non c'è testo. */
:root[data-ornamenti="pieni"] #app[data-schermata='home'] {
  --decoro: url('/decori/rametto.svg') right calc(var(--f-lato) + 20px) bottom calc(var(--f-giu) + 10px) / 110px 123px no-repeat;
}

/* Sul telefono la testata «memorie» sta sulla tela: impressa in oro, come il titolo sulla
   copertina di un album. */
@media (max-width: 699px) {
  :root[data-ornamenti="pieni"] .family-brand { color: #E4CD8E; border-bottom-color: rgba(214, 178, 106, .28); text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
}

/* La barra e il rail: restano carta chiara con le stesse voci e misure; solo una cucitura. */
:root[data-ornamenti="pieni"] .barra-menu { background-image: repeating-linear-gradient(to right, rgba(var(--velo), .25) 0 6px, transparent 6px 12px); background-size: 100% 1.5px; background-position: 0 5px; background-repeat: no-repeat; }
@media (min-width: 700px) {
  :root[data-ornamenti="pieni"] .family-navigation { background-image: repeating-linear-gradient(to bottom, rgba(var(--velo), .25) 0 6px, transparent 6px 12px); background-size: 1.5px 100%; background-position: calc(100% - 5px) 0; background-repeat: no-repeat; }
}

/* ---------- i caratteri ---------- */

/* Tutti i titoli nel carattere d'epoca, senza la spaziatura stretta pensata per il sans. */
:root[data-ornamenti="pieni"] #app h1,
:root[data-ornamenti="pieni"] #app h2,
:root[data-ornamenti="pieni"] .album-titolo,
:root[data-ornamenti="pieni"] .album-copertina-testo h2,
:root[data-ornamenti="pieni"] .book-cover h2 {
  font-family: var(--titoli); font-weight: 400; letter-spacing: 0;
}
:root[data-ornamenti="pieni"] .eyebrow,
:root[data-ornamenti="pieni"] .etichetta { font-family: 'IM Fell English SC', var(--titoli); font-variant-caps: normal; }
/* Il Fell non ha il grassetto: niente grassetto finto, che lo impasta. */
:root[data-ornamenti="pieni"] #app { font-synthesis: none; }

/* I titoli delle righe dei ricordi sono piccoli e tanti, e lei li scorre ogni giorno: serif
   di sistema, col suo grassetto vero. Il carattere d'epoca resta per i titoli grandi. */
:root[data-ornamenti="pieni"] .storia-riga > div > div:first-child {
  font-family: ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* Il testo che si legge a lungo resta nel serif di sistema, pieno e regolare. */
:root[data-ornamenti="pieni"] .album-testo,
:root[data-ornamenti="pieni"] .album-introduzione,
:root[data-ornamenti="pieni"] .album-fascia-frase {
  font-family: ui-serif, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/* Il fregio sotto il titolo di ogni pagina, nel margine che c'è già. */
:root[data-ornamenti="pieni"] .testata h1 { position: relative; }
:root[data-ornamenti="pieni"] .testata h1::after {
  content: ''; position: absolute; left: 0; bottom: -18px; width: 170px; height: 17px; pointer-events: none;
  background: url('/decori/fregio.svg') left center / contain no-repeat;
}

/* ---------- le fotografie ---------- */

/* Gli angolini: quattro triangoli di carta scura che tengono la stampa. Un solo
   pseudo-elemento, quattro gradienti, nessun filtro (nella griglia sono decine). */
:root[data-ornamenti="pieni"] .album-figura::before,
:root[data-ornamenti="pieni"] .griglia-foto button::before {
  content: ''; position: absolute; inset: -5px; pointer-events: none; z-index: 1;
  --angolo: var(--primario-scuro);
  --lato: 30px;
  background:
    linear-gradient(135deg, var(--angolo) 0 49%, transparent 51%) top left / var(--lato) var(--lato) no-repeat,
    linear-gradient(225deg, var(--angolo) 0 49%, transparent 51%) top right / var(--lato) var(--lato) no-repeat,
    linear-gradient(45deg, var(--angolo) 0 49%, transparent 51%) bottom left / var(--lato) var(--lato) no-repeat,
    linear-gradient(315deg, var(--angolo) 0 49%, transparent 51%) bottom right / var(--lato) var(--lato) no-repeat;
}
:root[data-ornamenti="pieni"] .griglia-foto button { position: relative; transform: rotate(var(--inclina)); transition: transform .18s ease-out, box-shadow .18s ease-out; }
:root[data-ornamenti="pieni"] .griglia-foto button::before { inset: -4px; --lato: 22px; }

/* In «Le fotografie» le stampe stanno DRITTE: le voleva così mamma (richiesta #13, 24/9: «dritte in
   Le fotografie, un po' inclinate solo quando sfoglio l'album»). Arrivano e si alzano al tocco come
   prima; l'inclinazione resta solo alla stampa della pagina dell'album (.album-figura, sotto). */
:root[data-ornamenti="pieni"] .griglia-foto button { --inclina: 0deg; }
:root[data-ornamenti="pieni"] .griglia-foto button:hover,
:root[data-ornamenti="pieni"] .griglia-foto button:focus-visible,
:root[data-ornamenti="pieni"] .griglia-foto button:active {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 22px rgba(var(--velo), .22);
}

/* La stampa della pagina, appoggiata a mano. */
:root[data-ornamenti="pieni"] .album-figura { --inclina: -.9deg; transform: rotate(var(--inclina)); }

/* ---------- la pagina dell'album ---------- */

/* Filetto inciso a un dito dal bordo, cucitura sul dorso, nastro segnalibro, fogli sotto.
   Tutto sui margini: il testo resta su bianco pieno. */
:root[data-ornamenti="pieni"] .album-pagina {
  box-shadow:
    inset 0 0 0 7px var(--bianco),
    inset 0 0 0 8px rgba(var(--velo), .16),
    inset 0 0 0 11px var(--bianco),
    inset 0 0 0 12px rgba(var(--velo), .08),
    inset 14px 0 18px -16px rgba(var(--velo), .22),
    inset -14px 0 18px -16px rgba(var(--velo), .14),
    0 8px 22px var(--ombra-carta),
    3px 4px 0 -1px var(--carta-calda),
    6px 8px 0 -2px var(--carta-scura);
}
:root[data-ornamenti="pieni"] .album-pagina::before {
  content: ''; position: absolute; left: 3px; top: 22px; bottom: 22px; width: 3px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(var(--velo), .30) 0 5px, transparent 5px 11px);
}
:root[data-ornamenti="pieni"] .album-pagina::after {
  content: ''; position: absolute; top: -6px; right: 30px; width: 20px; height: 58px; pointer-events: none;
  background: linear-gradient(90deg, #9C7424, #D6B26A 45%, #9C7424);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  transform-origin: top center;
}

/* La data diventa un timbro: inchiostro verde, bordo tratteggiato, storto. */
:root[data-ornamenti="pieni"] .album-data,
:root[data-ornamenti="pieni"] .album-fascia-dove {
  transform: rotate(-1.4deg);
  color: var(--primario);
  font-family: 'IM Fell English SC', var(--titoli);
  outline: 1.5px dashed rgba(36, 94, 78, .55); outline-offset: 3px;
  background-image: radial-gradient(ellipse at 30% 40%, rgba(36, 94, 78, .07), transparent 70%);
}

/* La copertina del capitolo: la fotografia sotto una velina, con un angolo sollevato. */
:root[data-ornamenti="pieni"] .album-copertina { position: relative; }
:root[data-ornamenti="pieni"] .album-copertina::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(250, 252, 247, .72), rgba(250, 252, 247, .55) 70%, rgba(250, 252, 247, 0)),
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 6px);
}
:root[data-ornamenti="pieni"] .album-copertina-testo h2 { color: var(--primario-scuro); }

/* Il Libro: rilegatura in pelle con i nervi sul dorso e la doppia cornice d'oro. */
/* I nervi sul dorso: sopra il bordo del dorso (che si dipinge sopra lo sfondo, quindi non
   possono stare nel background). */
:root[data-ornamenti="pieni"] .book-cover::after {
  content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0 14%, rgba(0, 0, 0, .5) 14% 15%, rgba(214, 178, 106, .45) 15% 16%, transparent 16% 34%,
    rgba(0, 0, 0, .5) 34% 35%, rgba(214, 178, 106, .45) 35% 36%, transparent 36% 64%,
    rgba(0, 0, 0, .5) 64% 65%, rgba(214, 178, 106, .45) 65% 66%, transparent 66% 84%,
    rgba(0, 0, 0, .5) 84% 85%, rgba(214, 178, 106, .45) 85% 86%, transparent 86%);
}
:root[data-ornamenti="pieni"] .book-cover::before {
  content: ''; position: absolute; inset: 12px; pointer-events: none; border-radius: 2px;
  border: 1.5px solid rgba(214, 178, 106, .55);
  outline: 1px solid rgba(214, 178, 106, .35); outline-offset: -6px;
}
:root[data-ornamenti="pieni"] .book-cover h2 { color: #EAD7A2; text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06); }

/* L'invito di Casa: tela verde col filetto d'oro e gli angoli della rilegatura. Il bottone
   «Racconta un ricordo» non cambia di un colore. */
:root[data-ornamenti="pieni"] .home-hero::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none; border-radius: 2px;
  border: 1px solid rgba(214, 178, 106, .42);
  --oro-angolo: rgba(214, 178, 106, .75);
  background:
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) top left / 18px 2px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) top left / 2px 18px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) top right / 18px 2px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) top right / 2px 18px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) bottom left / 18px 2px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--oro-angolo), var(--oro-angolo)) bottom right / 2px 18px no-repeat;
}

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

/* Carte e riquadri: un filetto inciso a sei pixel dal bordo, come la cornice stampata di una
   pagina d'album. È un outline all'indentro: non occupa spazio, e mai su un comando. */
:root[data-ornamenti="pieni"] div.carta,
:root[data-ornamenti="pieni"] section.carta,
:root[data-ornamenti="pieni"] article.carta,
:root[data-ornamenti="pieni"] aside.carta,
:root[data-ornamenti="pieni"] .home-collection,
:root[data-ornamenti="pieni"] .book-index,
:root[data-ornamenti="pieni"] .story-reading {
  outline: 1px solid rgba(var(--velo), .11); outline-offset: -6px;
}

/* Le voci d'indice: l'orecchia in alto a destra, come una pagina sfogliata tante volte. Non
   nell'indice del Libro, dove le righe sono voci di una pagina sola. */
:root[data-ornamenti="pieni"] .storia-riga:not(.book-index .storia-riga) {
  background-image:
    linear-gradient(225deg, var(--pagina) 0 50%, transparent 50%),
    linear-gradient(45deg, var(--carta-scura) 0 46%, rgba(var(--velo), .25) 50%, transparent 50%);
  background-size: 20px 20px, 20px 20px;
  background-position: top right, top right;
  background-repeat: no-repeat;
}

/* Le intestazioni di sezione: un rombo d'oro alla fine del filetto doppio. */
:root[data-ornamenti="pieni"] h2.sezione,
:root[data-ornamenti="pieni"] .menu-sezione .sezione { position: relative; font-family: var(--titoli); font-weight: 400; }
:root[data-ornamenti="pieni"] h2.sezione::after,
:root[data-ornamenti="pieni"] .menu-sezione .sezione::after {
  content: ''; position: absolute; right: 0; bottom: -5px; width: 8px; height: 8px; pointer-events: none;
  background: #C9A55A; transform: rotate(45deg); box-shadow: 0 0 0 3px var(--pagina);
}

/* ---------- il movimento ---------- */
/*
 * Tre gesti, tutti da mezzo secondo: la stampa che si posa sulla pagina, le fotografie della
 * griglia che arrivano una dopo l'altra (solo le prime dodici), il nastro che scende. Mai
 * durante una registrazione, mai con il movimento ridotto.
 */
@keyframes stampa-si-posa {
  from { opacity: 0; transform: translateY(-12px) rotate(var(--inclina)); }
  to { opacity: 1; transform: rotate(var(--inclina)); }
}
@keyframes nastro-scende {
  from { transform: scaleY(.2); }
  to { transform: scaleY(1); }
}
/* «Una bella notizia»: ogni scintilla parte dal centro dello scoppio, vola e si spegne a metà
   giro; l'altra metà è pausa, così lo scoppio si ripete a intervalli (tre volte, poi finisce). */
@keyframes notizia-scintilla {
  0% { opacity: 0; transform: translate(0, 0) scale(.8); }
  6%, 38% { opacity: 1; }
  55%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-ornamenti="pieni"] body:not(.registrando) .album-figura { animation: stampa-si-posa .5s cubic-bezier(.2, .8, .25, 1) both; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .album-pagina::after { animation: nastro-scende .45s .15s cubic-bezier(.2, .8, .25, 1) both; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(-n+12) { animation: stampa-si-posa .45s cubic-bezier(.2, .8, .25, 1) both; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(2) { animation-delay: .04s; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(3) { animation-delay: .08s; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(4) { animation-delay: .12s; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(5) { animation-delay: .16s; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(6) { animation-delay: .2s; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .griglia-foto button:nth-child(n+7) { animation-delay: .24s; }

  /* «Una bella notizia» in Casa: fuochi d'artificio dietro il testo (z-index -1 dentro la carta,
     che fa da contesto), solo transform/opacity. Fuori da qui (ornamenti ridotti, movimento
     ridotto, registrazione in corso) il contenitore resta `display: none` e la carta è testo. */
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia { position: relative; overflow: hidden; isolation: isolate; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .notizia-fuochi { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .fuoco { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .fuoco i {
    position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--oro); opacity: 0;
    animation: notizia-scintilla 3.2s var(--r) cubic-bezier(.15, .7, .3, 1) 3 both;
  }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .fuoco:nth-child(2) i { background: var(--verde-vivo); }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .fuoco:nth-child(3) i { background: var(--primario-luce); }
  :root[data-ornamenti="pieni"] body:not(.registrando) .carta-notizia .fuoco:nth-child(4) i { background: var(--blu); }
}

/* ---------- il velo d'epoca sulle fotografie ---------- */
/*
 * Tre dosi, scelte da Vincenzo (settings.album_seppia). Il PREDEFINITO è «niente»: su carta
 * verde il seppia stona, ed è esattamente il marrone che era troppo scuro.
 *
 * «cornice»: solo la copertina del capitolo, che è decorativa, tagliata e sotto un titolo.
 * «fotografie»: anche le pagine e le copertine dei capitoli.
 *
 * MAI, in nessuna dose: il dialogo dove mamma decide se tenere una foto, i volti delle persone
 * (lo verifica `contratto.spec.mjs` sul filtro calcolato, non su un elenco di classi), la
 * fotografia su cui sta raccontando, le griglie e le liste (un filter su decine di immagini si
 * ridipinge a ogni scorrimento), e tutto l'admin. Il seppia su una foto in bianco e nero degli
 * anni Sessanta la riduce a una macchia marrone; su una a colori del 2015 le fa credere che sia
 * vecchia. E lei cerca le facce.
 *
 * E MAI sui video (richiesta #25): solo le immagini prendono il velo (`img.`), e un video lo
 * rifiuta comunque. Il colore di un video è quello del giorno in cui è stato girato, e un filtro
 * su un lettore si ridipinge a ogni fotogramma: su un iPad vecchio costa la scheda.
 */
:root[data-ornamenti="pieni"][data-seppia="cornice"] img.album-copertina-foto,
:root[data-ornamenti="pieni"][data-seppia="fotografie"] img.album-copertina-foto { filter: sepia(.12) contrast(.96); }
:root[data-ornamenti="pieni"][data-seppia="fotografie"] img.album-foto { filter: sepia(.14) contrast(.96); }
:root[data-ornamenti="pieni"][data-seppia="fotografie"] img.tema-copertina { filter: sepia(.14) contrast(.96); }
:root[data-ornamenti="pieni"][data-seppia] video { filter: none; }