/* =====================================================================
   MARCA_84803_VETRINA_DUE_STILI
   La vetrina in due stili, con i filmati, e senza piu' niente addosso
   agli sposi.
   29 settembre 2026, reparto GALLERIE.

   RISCRIVE il foglio della 84801 (online dalle 09:47). Stesso nome di
   file apposta: le due righe che lo caricano nel modello restano quelle.

   DA DOVE NASCE. Giovanni, dopo aver visto la 84801 online:

     «si' la galleria non e' male, magari prevedi DUE VERSIONI, una cosi'
      e una come dici te, ma prevedi sempre di mettere le foto
      ORIZZONTALI E VERTICALI, e farle DRAGGARE E SCALABILI cosi' si
      centrano bene, perche' LA COPERTINA E' IMPORTANTE. E prevedi anche
      di fare PIU' VIDEO oltre che foto.»

   E la Regia, guardando la stessa pagina su un computer: su una
   fotografia verticale a 1440 la fotografia e' una striscia da 384 punti
   su 1268, il TITOLO e' largo 1268 -- cioe' galleggia sopra il vuoto
   invece di stare sulla foto -- e i PALLINI e la FRECCIA cadono SOPRA
   GLI SPOSI. Le sette misure erano verdi: l'ha trovato l'occhio.

   ============================================================================
    1. I DUE STILI
   ============================================================================
     (niente)    «Foto intera»   la fotografia si vede TUTTA, su un fondo
                                 fatto con lei stessa sfocata. Non taglia
                                 niente, in nessun formato. E' quello di
                                 serie.
     .gc-bordo   «Bordo a bordo» la fotografia riempie la fascia, tagliando
                                 attorno al punto scelto dal fotografo.

   IL PUNTO E L'INGRANDIMENTO VALGONO IN TUTTI E DUE. In «bordo a bordo»
   decidono che parte resta; in «foto intera» decidono attorno a cosa si
   ingrandisce (a ingrandimento 1 la fotografia e' tutta dentro e il punto
   non ha niente da spostare -- e' giusto cosi').

   ============================================================================
    2. IL TITOLO STA DENTRO LA FOTOGRAFIA
   ============================================================================
   Il programma accanto misura quanto e' larga DAVVERO la fotografia che
   si sta guardando e la scrive in --gc-largo-foto. Il nome dell'evento non
   puo' essere piu' largo di quella, e il suo corpo cresce con lei.
   Misurato a 1440 su una verticale: il blocco del nome passa da 1268 a
   384 punti, cioe' smette di galleggiare sopra lo sfocato.

   LA SFUMATURA RESTA LARGA QUANTO LA FASCIA, ed e' voluto: il 28
   settembre una sfumatura piu' stretta della fotografia aveva disegnato
   un rettangolo scuro con un bordo verticale netto in mezzo all'immagine
   (misurato sui pixel: luminanza 0,10 a sinistra del bordo e 0,95 a
   destra). Si stringe quello che si legge, non l'ombra che lo tiene
   leggibile.

   MARCA_85065_VETRINA_COME_LE_STORIE -- DAL 30 SETTEMBRE NON E' PIU' COSI'.
   Giovanni: «il testo copre le foto, o lo fai piu' piccolo da una parte e
   semitrasparente». Il nome non sta piu' in cima su una sfumatura larga
   quanto la fascia: sta in basso a sinistra, piccolo, su una pastiglia
   scura semitrasparente (vedi «IL NOME DELL'EVENTO», piu' sotto). Il
   programma scrive ancora --gc-largo-foto, ma il nome non la usa piu'.

   ============================================================================
    3. NIENTE PIU' PALLINI SUGLI SPOSI
   ============================================================================
   I pallini, il contatore e la freccia «sotto c'e' dell'altro» stanno
   SOTTO la fotografia, sul colore della pagina. Non possono piu' cadere
   su una faccia, in nessuno dei due stili e con nessun formato. Costa 22
   punti di altezza in piu' all'intestazione, ed e' il prezzo giusto: in
   cambio nessuno si ritrova una fila di pallini sul vestito della sposa.

   ============================================================================
    4. I FILMATI
   ============================================================================
   Finche' nessuno preme, un filmato e' il suo FOTOGRAMMA DI COPERTINA e
   basta: stesso taglio, stesso punto, stesso ingrandimento di una
   fotografia. Non si scarica un byte di filmato all'apertura -- misurato,
   con e senza filmati la pagina apre le stesse richieste e gli stessi
   byte. Il resto lo tiene il programma accanto.

   E i colori, le forme e le misure restano quelli di casa: --gal-raggio,
   --gal-margine, --accent, --ground, le frecce da 46 punti con la
   pastiglia scura (contrasto misurato 8,70), i pallini con la pastiglia a
   .60. Quelle misure vengono dai pixel e non si toccano.
   ===================================================================== */

.gal-apertura-carosello {
  /* L'altezza della fascia: 64svh, il numero della 84801. A 1440x900 la
     fascia e' 1440x576 e una verticale 2:3 mostrata intera e' 384x576,
     larga un quarto dello schermo; sul telefono sono 520 punti e una
     verticale viene 347x520, quasi tutta la larghezza.
     NON CAMBIA MAI DA UNA FOTOGRAFIA ALL'ALTRA: e' un numero fisso, non
     dipende dalla forma della fotografia. In una galleria mista --
     verticali, orizzontali, quadrate e filmati insieme -- la fascia sta
     ferma mentre si sfoglia, e la pagina sotto non salta. */
  /* MARCA_85065_VETRINA_COME_LE_STORIE (D521, 30/9): «la slide in alto
     nelle gallerie ok ma e' troppo bassa» -- Giovanni. Dal 64 al 76 per
     cento dello schermo: a 1440x900 da 576 a 684 punti (+19%). Sul
     telefono la regola e' qui sotto (una verticale 2:3 larga quanto lo
     schermo). La cornice del pannello del fotografo ha la stessa forma
     (gallerie-vetrina-ritaglio-84801.css). */
  --gc-alta: clamp(440px, 76svh, 900px);
  --gc-raggio: var(--gal-raggio, 14px);
  /* Quanto e' larga DAVVERO la fotografia che si sta guardando. La scrive
     il programma a ogni cambio. Senza programma vale 100%, cioe' quello
     che faceva la 84801: non si rompe niente. */
  --gc-largo-foto: 100%;

  background: var(--ground);
  height: auto;
  min-height: 0;
  /* LA FASCIA SOTTO LA FOTOGRAFIA: ci stanno i pallini (o il contatore) e
     la freccia «sotto c'e' dell'altro». Prima erano tutti e tre SOPRA la
     fotografia. */
  padding: 0 0 clamp(72px, 8.5svh, 100px);
  display: grid;
  grid-template-areas: "vetrina";
  grid-template-columns: 1fr;
  /* QUESTA RIGA E' OBBLIGATORIA. modern-theme.css scrive
     "place-items: end start" sull'intestazione: senza, i pezzi dentro non
     si stirano e la sfumatura dietro il nome diventa un rettangolo che
     taglia la fotografia a meta' con un bordo verticale netto. E' gia'
     sparita una volta riscrivendo questo blocco. */
  justify-items: stretch;
  text-align: center;
  position: relative;
}

.gal-apertura-carosello .gc-striscia { grid-area: vetrina; }

/* ------------------------------------------------------------------ */
/*  IL NOME DELL'EVENTO                                                 */
/* ------------------------------------------------------------------ */
.gal-apertura-carosello .gal-apertura-testo {
  /* MARCA_85065_VETRINA_COME_LE_STORIE (D521, 30/9): «il testo copre le
     foto, o lo fai piu' piccolo da una parte e semitrasparente» --
     Giovanni. Prima il nome stava in cima, al centro, su una sfumatura
     larga quanto tutta la fascia: copriva il terzo alto di ogni foto, e
     la data sulle foto chiare si leggeva a 1,68 (misurato sui pixel).
     ADESSO sta in basso a sinistra, piccolo, su una pastiglia scura
     semitrasparente: sulle verticali cade sullo sfocato di lato e non
     sulla foto; sulle altre copre un angolo. Il contrasto misurato sui
     pixel, foto chiara e scura, sta nella consegna 85065. */
  grid-area: vetrina;
  align-self: end;
  justify-self: start;
  z-index: 4;
  position: relative;
  margin: 0 0 18px 18px;
  padding: 12px 16px 13px;
  width: auto;
  max-width: min(46%, 520px);
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  border-radius: 12px;
  background: rgba(0, 0, 0, .58);
  pointer-events: none;
}
@supports (backdrop-filter: blur(8px)) {
  .gal-apertura-carosello .gal-apertura-testo {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.gal-apertura-carosello .gal-apertura-testo a,
.gal-apertura-carosello .gal-apertura-testo button { pointer-events: auto; }

/* Il nome, piccolo: non cresce piu' con la fotografia. */
.gal-apertura-carosello .gal-apertura-nome {
  max-width: none;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  margin: 0;
}
.gal-apertura-carosello .gal-apertura-data {
  max-width: none;
  margin: 0;
  font-size: 12px;
}

/* Il marchio dello studio sta DENTRO la pastiglia, sopra il nome: una
   pastiglia sola, non due. */
.gal-apertura-carosello .gal-apertura-testo .gal-marchio {
  position: static;
  padding: 0;
  margin: 0 0 4px;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}
/* IL LOGO INTERO, MAI SCHIACCIATO E MAI TAGLIATO. Due massimi invece di
   una larghezza fissa. Il pavimento (min-width uguale a max-height) serve
   ai loghi altissimi e stretti (consegna 81713). */
.gal-apertura-carosello .gal-apertura-testo .gal-marchio-img {
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 32px;
  min-width: 32px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 700px) {
  .gal-apertura-carosello .gal-apertura-testo {
    margin: 0 0 12px 12px;
    padding: 10px 13px 11px;
    /* 80 = 12 di margine + 44 del tasto del filmato (in basso a destra)
       + 24 di respiro: misurato a 375, senza questa riga i due si
       sovrapponevano di 15 punti. */
    max-width: calc(100% - 80px);
  }
  .gal-apertura-carosello .gal-apertura-nome { font-size: 18px; }
  .gal-apertura-carosello .gal-apertura-data { font-size: 11.5px; }
  .gal-apertura-carosello .gal-apertura-testo .gal-marchio-img {
    max-width: 96px;
    max-height: 26px;
    min-width: 26px;
  }
}
.gal-apertura-carosello .gal-apertura-testo .gal-marchio-nome { font-size: 14px; }

/* ------------------------------------------------------------------ */
/*  LA FRECCIA «SOTTO C'E' DELL'ALTRO»                                  */
/* ------------------------------------------------------------------ */
/* Sta nella fascia sotto la fotografia, a destra: al centro adesso ci
   sono i pallini. Pastiglia scura come le frecce della vetrina, perche'
   sta sul colore della pagina e chiara su chiaro non si vedrebbe. */
.gal-apertura-carosello .gal-apertura-giu {
  left: auto;
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(14px, 1.8svh, 24px);
  transform: none;
  background: rgba(0, 0, 0, .48);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.gal-apertura-carosello .gal-apertura-giu:hover { background: rgba(0, 0, 0, .66); }

.gal-apertura-carosello .gal-apertura-velo { display: none; }
.gal-apertura-carosello .gal-apertura-sfuma { display: none; }

/* ------------------------------------------------------------------ */
/*  LA VETRINA                                                          */
/* ------------------------------------------------------------------ */
.gc-striscia {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-width: 0;
}

.gc-pista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  /* LE DUE RIGHE DEL DITO:
     overflow-y:hidden  -- sfogliare non muove la pagina in su e in giu';
     overscroll-behavior-inline:contain -- arrivati in fondo non si
                           trascina indietro la pagina. */
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gc-pista::-webkit-scrollbar { display: none; }
.gc-pista:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: -2px; }

.gc-posto {
  flex: 0 0 100%;
  width: 100%;
  height: var(--gc-alta);
  scroll-snap-align: center;
  scroll-snap-stop: always;   /* uno swipe = una fotografia, non tre */
  min-width: 0;
}

.gc-carta {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .22);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transform: none;
  opacity: 1;
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/*  IL FONDO: LA STESSA FOTOGRAFIA, SFOCATA E SCURITA                   */
/* ------------------------------------------------------------------ */
/* NON E' UNA SECONDA RICHIESTA: il programma accanto gli mette dentro
   l'indirizzo che il browser ha GIA' scaricato, e solo dopo che e'
   arrivato. Ingrandito del 12% perche' sfocando i bordi si scoloriscono;
   scurito perche' sotto ci sta la fotografia vera. */
.gc-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.12);
  filter: blur(26px) brightness(.55) saturate(1.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s linear;
}
.gc-fondo[src] { opacity: 1; }
/* In «bordo a bordo» la fotografia riempie tutto: dietro non resta niente
   da riempire, e il fondo sarebbe solo lavoro in piu' per il browser. */
.gc-bordo .gc-fondo { display: none; }

/* ------------------------------------------------------------------ */
/*  LA FOTOGRAFIA (e il fotogramma del filmato)                         */
/* ------------------------------------------------------------------ */
/* DI SERIE INTERA: niente viene buttato via, in nessun formato e su
   nessuno schermo. Il punto e l'ingrandimento scelti dal fotografo ci
   sono sempre: a ingrandimento 1 la fotografia e' tutta dentro e il punto
   non ha niente da spostare; sopra 1 si ingrandisce attorno a quel punto.
   Sono le stesse due proprieta' della copertina singola (blocco 81115). */
.gc-foto {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: var(--gc-pos, 50% 50%);
  scale: var(--gc-zoom, none);
  transform-origin: var(--gc-pos, 50% 50%);
  background: transparent;
}

/* ------------------------------------------------------------------ */
/*  MARCA_84773_VETRINA_DUE_POSIZIONI -- IL TELEFONO HA LA SUA          */
/* ------------------------------------------------------------------ */
/* «servirebbe che per ogni foto che metto posso centrarla pure da
   mobile» -- Giovanni, 29 settembre 2026 (D514).
   Sotto i 640 punti ogni fotografia usa la posizione del TELEFONO, se il
   fotografo gliene ha data una (--gc-pos-t e --gc-zoom-t, scritte dal
   server SOLO in quel caso). Senza, si ricade su quella del computer:
   una galleria fatta prima di questa consegna si vede identica.
   640 E' LA SOGLIA DELLA COPERTINA SINGOLA (blocco 76750 in
   modern-theme.css, e il <source media="(max-width:640px)"> della
   pagina): una regola sola per tutte e due le copertine, non due.
   Stessa regola, stesso peso, scritta DOPO quella di sopra e nello
   STESSO foglio: vince sotto i 640 e basta. */
/* MARCA_85065_VETRINA_COME_LE_STORIE: SUL TELEFONO la fascia e' alta una
   volta e mezza la larghezza -- a 375 fa 562 punti, cioe' ESATTAMENTE una
   verticale 2:3 larga quanto lo schermo. Piu' alta non servirebbe: la
   verticale resterebbe larga 375 e sopra e sotto ci sarebbe solo lo
   sfocato. Il 74 per cento dell'altezza e' il tetto per i telefoni girati
   di lato. Stessa soglia dei 640 punti della riga qui sotto. */
@media (max-width: 640px) {
  .gal-apertura-carosello { --gc-alta: min(150vw, 74svh); }
}
@media (max-width: 640px) {
  .gc-foto {
    object-position: var(--gc-pos-t, var(--gc-pos, 50% 50%));
    scale: var(--gc-zoom-t, var(--gc-zoom, none));
    transform-origin: var(--gc-pos-t, var(--gc-pos, 50% 50%));
  }
}

/* «BORDO A BORDO»: la fotografia riempie la fascia, e quello che resta e'
   la parte attorno al punto scelto. */
.gc-bordo .gc-foto { object-fit: cover; }

/* ------------------------------------------------------------------ */
/*  I FILMATI                                                           */
/* ------------------------------------------------------------------ */
/* Il filmato si comporta come una fotografia: stesso taglio, stesso
   punto, stesso ingrandimento. Il fotogramma di copertina (poster) segue
   le stesse regole, perche' sono proprieta' dell'elemento e non
   dell'immagine. */
.gc-filmato {
  background: rgba(0, 0, 0, .22);
}
/* IL TRIANGOLO. Non e' un pulsante a se': si preme la fotografia. Un
   secondo pulsante dentro una vetrina che gia' si clicca vorrebbe dire
   due bersagli sovrapposti, e col dito non si capirebbe quale si e'
   preso. */
.gc-riproduci {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Stessa pastiglia scura delle frecce e dei pallini, e per lo stesso
     motivo: sopra una fotografia chiara un tondo chiaro sparisce
     (misurato sui pixel: 1,08 contro un minimo di 3,0). */
  background: rgba(0, 0, 0, .52);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  pointer-events: none;
  transition: opacity .2s linear, background .2s linear;
}
.gc-riproduci svg { width: 32px; height: 32px; display: block; }
.gc-carta:hover .gc-riproduci { background: rgba(0, 0, 0, .68); }
@supports (backdrop-filter: blur(4px)) {
  .gc-riproduci { backdrop-filter: blur(4px); }
}
/* Mentre il filmato va, il triangolo sparisce. */
.gc-carta-inmoto .gc-riproduci { opacity: 0; }

/* Il filmato che non e' partito (formato che il browser non apre, rete
   caduta): si torna al fotogramma di copertina e si dice perche'. Mai un
   riquadro nero rotto. */
.gc-guasto {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  max-width: calc(100% - 28px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .66);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/*  LE DUE FRECCE (il mouse sul computer)                               */
/* ------------------------------------------------------------------ */
.gc-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  /* LA PASTIGLIA E' SCURA, e non e' un gusto: chiara, sopra una
     fotografia chiara, spariva -- contrasto misurato 1,08 contro un
     minimo di 3,0. Cosi' e' 8,70. Non alleggerirla. */
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.gc-freccia:hover { background: rgba(0, 0, 0, .66); }
.gc-freccia:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gc-freccia[disabled] { opacity: .28; cursor: default; }
.gc-freccia-sx { left: 14px; }
.gc-freccia-dx { right: 14px; }
@supports (backdrop-filter: blur(4px)) {
  .gc-freccia { backdrop-filter: blur(4px); }
}

/* ------------------------------------------------------------------ */
/*  I PALLINI E IL CONTATORE: SOTTO LA FOTOGRAFIA                       */
/* ------------------------------------------------------------------ */
/* STAVANO SOPRA, e cadevano sugli sposi: su una verticale la fila di
   pallini finiva sul vestito della sposa e il contatore sul bouquet.
   Adesso stanno nella fascia sotto la fotografia, sul colore della
   pagina: non possono piu' coprire nessuno, in nessuno dei due stili e
   con nessun formato.
   La pastiglia scura resta -- e' misurata sui pixel -- perche' il colore
   della pagina cambia col tema e una fila chiara sul tema chiaro
   sparirebbe. */
.gc-pallini {
  position: absolute;
  left: 50%;
  bottom: -58px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  padding: 0 4px;
}

/* NIENTE PIU' PASTIGLIA SCURA SOTTO LA FILA. Quella pastiglia serviva
   quando i pallini stavano SOPRA la fotografia: li' il fondo e' una
   fotografia qualunque, e sopra un abito bianco un segno chiaro sparisce
   (misurato sui pixel: 1,08 contro un minimo di 3,0).
   Adesso stanno sul colore della pagina, che e' un colore noto: la
   pastiglia sarebbe una barra grigia in mezzo alla pagina, e si vede --
   guardata, e brutta. Al suo posto i pallini prendono il COLORE DELLA
   SCRITTA della pagina, che per costruzione si legge su quel fondo in
   tutti e due i temi.
   I RIPIEGHI SONO COLORI VERI e non il niente: se un giorno --ink non
   esistesse su questa pagina, resta un grigio che si vede lo stesso --
   e' gia' successo che una variabile inventata facesse sparire un bordo
   intero, e li' non se n'era accorto nessuno. */
.gc-pallino::before { background: var(--ink-3, #8a8178); }
.gc-pallino[aria-current="true"]::before { background: var(--ink, #2b2622); }

.gc-pallino {
  appearance: none;
  -webkit-appearance: none;
  /* 44 punti, la misura del dito. Il segno dentro e' di 9: quanto e'
     grande da prendere e quanto e' grande da guardare sono due cose. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gc-pallino::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transition: background .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1);
}
.gc-pallino[aria-current="true"]::before { transform: scale(1.35); }
.gc-pallino:focus-visible {
  outline: 2px solid var(--accent, #8f6126);
  outline-offset: -6px;
  border-radius: 50%;
}

/* Il contatore: sotto la fotografia, a sinistra. Non si preme, quindi non
   e' un bersaglio e non deve essere largo 44. */
.gc-conta {
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  bottom: -46px;
  z-index: 3;
  display: none;
  padding: 4px 0;
  /* Come i pallini: sta sul colore della pagina, quindi prende il colore
     della scritta invece di una pastiglia scura. */
  color: var(--ink-3, #6f675e);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------ */
/*  SCHERMI STRETTI                                                     */
/* ------------------------------------------------------------------ */
/* DAL TELEFONO: niente frecce (si sfoglia col dito) e niente pallini.
   Dieci pallini da 44 punti fanno 440, e uno schermo da 375 non li
   tiene: o si rimpiccioliscono sotto la misura del dito, o escono dallo
   schermo. Al loro posto c'e' il contatore, che non si preme. */
@media (max-width: 700px), (hover: none) {
  .gc-freccia { display: none; }
  .gc-pallini { display: none; }
  .gc-conta { display: block; }
  /* La sfocatura costa al telefono: piu' leggera, stesso effetto. */
  .gc-fondo { filter: blur(18px) brightness(.55) saturate(1.1); }
  .gc-riproduci { width: 58px; height: 58px; }
  .gc-riproduci svg { width: 27px; height: 27px; }
}

/* ------------------------------------------------------------------ */
/*  CHI HA CHIESTO DI NON FAR MUOVERE LE ANIMAZIONI                    */
/* ------------------------------------------------------------------ */
/* Niente parte da solo -- nessun cambio automatico di fotografia, e
   nessun filmato che si avvia -- quindi resta lo scorrimento secco
   invece di quello morbido, e nessuna transizione. */
@media (prefers-reduced-motion: reduce) {
  .gc-pista { scroll-behavior: auto; }
  .gc-carta, .gc-pallino::before, .gc-freccia, .gc-fondo,
  .gc-riproduci { transition: none; }
  .gc-pallino[aria-current="true"]::before { transform: none; }
}