/* ==========================================================================
   NUMIRA - foglio di stile della veste 2026 (handoff Claude Design)
   Sorgente: AI/TEMPLATE/html-modernizzazione/.../templates/numira.css

   Due differenze volute rispetto al file consegnato:
     1. i font sono AUTO-OSPITATI in /fonts/, non presi da Google Fonts: la
        Content-Security-Policy del sito e' default-src 'self' e un <link> a
        fonts.googleapis.com verrebbe bloccato dal browser;
     2. .coin ha display:block (vedi nota in fondo).
   Il resto e' il file originale: se arriva una consegna nuova si sostituisce
   il corpo e si tengono queste due cose.
   ========================================================================== */

/* --- Font auto-ospitati -------------------------------------------------- */
/* latin + latin-ext: senza latin-ext saltano i nomi baltici e slavi che il
   catalogo contiene davvero (Selija, Mazoji Lietuva, Pietila). */

@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Numira — foglio di stile
   Due template: index.html (home pubblica) e moneta.html (scheda emissione)
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */

:root {
  /* Colore */
  --paper:        #F4F1E9;
  --surface:      #FAF8F2;
  --plate:        #E7E1D4;
  --plate-detail: #EDE8DC;
  --ink:          #191713;
  --ink-inverse:  #F4F1E9;
  /* Il colore d'accento e' #FF2D55 dal 2026-09-02, al posto del verderame
     #2F6E5E dell'impianto originale. Tutto il sito ci passa da qui: sono 63
     usi di `var(--accent)` piu' `--accent-on-dark`, che si ricalcola da se'.
     DA SAPERE, perche' non si vede guardando: su carta questo rosa da'
     3,23 di contrasto contro i 5,3 del verde, e il minimo per il testo
     normale (WCAG AA) e' 4,5. Vale in entrambi i versi - testo rosa su
     carta e testo carta su fondo rosa. Con l'inchiostro sopra, invece, il
     rosa da' 4,91 e passa. */
  --accent:       #FF2D55;

  /* Inchiostro a opacità */
  --ink-90: rgba(25, 23, 19, .86);
  --ink-80: rgba(25, 23, 19, .78);
  --ink-70: rgba(25, 23, 19, .68);
  --ink-60: rgba(25, 23, 19, .62);
  --ink-50: rgba(25, 23, 19, .50);
  --ink-40: rgba(25, 23, 19, .44);
  --ink-30: rgba(25, 23, 19, .34);

  /* Filetti */
  --rule:        rgba(25, 23, 19, .12);
  --rule-mid:    rgba(25, 23, 19, .14);
  --rule-strong: rgba(25, 23, 19, .18);
  --rule-btn:    rgba(25, 23, 19, .28);
  --rule-dot:    rgba(25, 23, 19, .28);
  --hover:       rgba(25, 23, 19, .035);

  /* Sul fondo scuro */
  --on-dark-70: rgba(244, 241, 233, .62);
  --on-dark-60: rgba(244, 241, 233, .56);
  --on-dark-rule: rgba(244, 241, 233, .16);
  --accent-on-dark: color-mix(in oklab, var(--accent) 60%, var(--ink-inverse));

  /* Tipografia */
  --serif: Newsreader, Georgia, serif;
  --sans:  Archivo, system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Ritmo */
  --gutter:   clamp(18px, 4vw, 40px);
  --measure:  1280px;
  --section:  clamp(58px, 7vw, 100px);
  --col-gap:  clamp(30px, 4vw, 64px);

  /* Movimento */
  --ease: cubic-bezier(.22, .7, .2, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--paper); }

h1, h2, h3, p { margin: 0; }

/* --- Impaginazione ------------------------------------------------------ */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section        { padding-top: var(--section); }
.section--flush { padding-top: 0; }

.band {
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule-mid);
}

.rule-top { border-top: 1px solid var(--rule-mid); }

/* Griglia a due colonne che si impila senza media query */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--col-gap);
  align-items: start;
}
.cols--end   { align-items: end; }
.cols--mid   { align-items: center; }
.cols--tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cols--wide  { gap: clamp(34px, 4.5vw, 72px); }

/* --- Tipografia --------------------------------------------------------- */

/* L'OCCHIELLO E' NEUTRO, non del colore d'accento.
   Con il verderame reggeva; con il rosa no, e non e' una questione di gusto:
   e' il testo piu' piccolo del sito - dieci pixel di maiuscoletto spaziato -
   e sul rosa dava 3,23 di contrasto contro il minimo 4,5. Un occhiello e' una
   didascalia che introduce, non un elemento colorato: `--ink-60` da' 4,79 e
   passa, mentre il grigio delle altre etichette (`--ink-40`) si fermerebbe a
   2,79. L'accento resta dove fa il suo lavoro - il pay-off, i numeri, le
   icone, i bottoni - e l'occhiello smette di competere con il marchio, che
   ora e' rosa e sta due centimetri sopra. */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--ink-60);
  text-transform: uppercase;
}
.eyebrow--dark { color: var(--accent-on-dark); }
.eyebrow--mute { color: var(--ink-40); }

.label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.label--xs { font-size: 9px; letter-spacing: .20em; }
.label--accent { color: var(--accent); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 20ch;
  text-wrap: balance;
}

.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -.035em;
  max-width: 26ch;
  text-wrap: balance;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* IL TITOLO DI SEZIONE, CON IL SUO FILETTO.
   Il filetto c'era su alcuni titoli e non su altri - .rows-head lo disegnava
   sul contenitore, .h2--ruled sul titolo, e le sezioni con il solo <h2> non
   lo avevano - e nella stessa pagina si vedeva la differenza. Adesso e' del
   titolo di sezione, cioe' di .h2--sm: regola generale, e la prossima
   sezione che si scrive ce l'ha senza doverselo ricordare.
   Perche' il filetto prenda tutta la sezione il titolo deve stare da solo su
   una riga: i blocchi che lo tenevano nella colonna di sinistra di una
   griglia a due sono diventati titolo sopra e testo sotto (22 in sette
   pagine), altrimenti il filetto veniva lungo mezza pagina. */
.h2--sm {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -.03em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}

/* Le quattro eccezioni, e ognuna ha il suo perche'.
   .rows-head e .neighbours__head disegnano il filetto sul contenitore, che
   contiene il titolo E l'etichetta a destra: se lo disegnasse anche il
   titolo verrebbero due righe a tre pixel una dall'altra.
   .panel ha il suo bordo tutto attorno, e un riquadro con il titolo
   sottolineato dentro e' un bordo di troppo.
   .closer e' centrato e grande: il filetto lo taglierebbe in due. */
.rows-head .h2--sm,
.neighbours__head .h2--sm,
.panel .h2--sm,
.closer .h2--sm {
  padding-bottom: 0;
  border-bottom: 0;
}
.h2--lg { font-size: clamp(32px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.04em; }

.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Il corsivo è il dispositivo di enfasi del progetto: una o due parole per titolo */
.em    { font-style: italic; }
.em--a { font-style: italic; color: var(--accent); }

.lead {
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 44ch;
  text-wrap: pretty;
}

.body    { font-size: 16.5px; line-height: 1.62; color: var(--ink-60); text-wrap: pretty; }
/* Due paragrafi di fila sono due paragrafi: senza stacco si leggono come uno
   solo che va a capo, ed e' proprio l'informazione che il capoverso porta -
   «qui comincia un altro pensiero». Regola generale, perche' i paragrafi in
   fila ci sono in mezza dozzina di pagine e ognuna li scriveva senza
   margine, aspettandosi che qualcuno ce lo mettesse. */
.body + .body { margin-top: 14px; }
.body-sm { font-size: 14.5px; line-height: 1.6;  color: var(--ink-60); text-wrap: pretty; }
.note    { font-size: 13.5px; line-height: 1.6;  color: var(--ink-50); text-wrap: pretty; }

.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-50);
}

.serif-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
}

.num { font-variant-numeric: tabular-nums; }

/* --- Navigazione -------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 233, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-mid);
}

/* IL PADDING E' 20 PX E NON 15, e la ragione e' il marchio.
   Il marchio della barra scorsa (`logo-Numira-Fixed.png`) porta l'insegna
   VERTICALE - proporzione 0,8 - affiancata al nome: a 40 px di altezza il
   quadrato dell'insegna misurava 32 x 40 px, e la N con la corona dentro
   diventava una macchia. Non era una questione di proporzioni sbagliate (il
   file non ha un pixel di margine trasparente, verificato): era troppo
   piccolo, e 260 px ridotti a 40 sono un fattore sei e mezzo.
   Con 20 px di padding la barra passa da 65 a 75 px e il marchio ci sta a
   52: la corona si legge. Chi cambia questo numero deve rifare il `top`
   negativo dell'insegna, che vale esattamente quanto il padding. */
.topbar__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 30px;
}

.topbar__spacer { flex: 1; }

.topbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink-60);
  text-transform: uppercase;
}

.topbar__auth { display: flex; align-items: center; gap: 14px; }

/* I collegamenti semplici del blocco di destra - Accedi, Dashboard, Profilo -
   sono voci di menu quanto quelle di .topbar__nav, e devono leggersi uguali:
   stesso mono, stesso corpo, stesso maiuscoletto spaziato. Prima ereditavano
   il carattere del corpo a 13,5 px e "Accedi" stonava accanto a "CATALOGO".
   I bottoni no: .btn--nav e .btn--nav-ghost hanno una veste loro e restano
   fuori. */
.topbar__auth a:not([class*="btn--nav"]) {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
}

/* IL MARCHIO NELLA BARRA: un'insegna appesa al bordo superiore.
   Il collegamento resta nel flusso e fa da segnaposto - 96 px di larghezza,
   cosi' il menu non gli finisce sotto, e 35 px di altezza, che con i 20 px di
   padding sopra e sotto fanno la barra di 75 px. L'immagine invece esce
   dal flusso: `top: -20px` annulla esattamente il `padding: 20px` di
   `.topbar__inner` e la porta a filo del bordo superiore, e i suoi 120 px di
   altezza sporgono sotto il filetto della barra.
   96 x 120 e' il file (384 x 480) diviso quattro: proporzione 0,8 rispettata
   al pixel, e su uno schermo a doppia densita' i 384 px coprono i 192 che
   servono. */
.lockup {
  position: relative;
  display: block;
  flex: none;
  width: 96px;
  height: 35px;
}
.lockup__insegna {
  position: absolute;
  top: -20px;
  left: 0;
  display: block;
  width: 96px;
  height: 120px;
  transition: opacity .18s ease;
}

/* IL MARCHIO ORIZZONTALE, quello che compare quando la pagina si muove.
   Il file e' 608 x 241, proporzione 2,5228, con la trasparenza. Qui e' alto
   34 px - l'altezza esatta del segnaposto - e la larghezza la calcola il
   browser (`auto`), cosi' la proporzione resta quella del file al posto di
   essere arrotondata a una coppia di interi. L'attributo `width` nel segno
   serve solo a riservare lo spazio prima che l'immagine arrivi.
   Sta sopra l'insegna, non accanto: si incrociano in opacita' nello stesso
   punto, e il segnaposto e' larga 96 px in entrambi gli stati, quindi il
   menu non si sposta mai di un pixel. */
.lockup__esteso {
  position: absolute;
  top: -20px;
  left: 0;
  display: block;
  height: 75px;
  width: auto;
  /* `max-width: none` NON e' pleonastico, ed e' il difetto che ha fatto
     uscire questo marchio schiacciato. In cima al foglio c'e'
     `img, svg { max-width: 100% }`, e il 100% qui e' il segnaposto: 96 px.
     Con l'altezza fissata a 52 e la larghezza tagliata da 154 a 96,
     l'immagine veniva compressa in orizzontale al 62% - il quadrato
     dell'insegna, che nel file ha proporzione 0,8, in pagina ne misurava
     0,5. Il marchio esteso e' l'unica immagine del sito piu' larga del suo
     contenitore, e per questo e' l'unica a cui quella regola fa danno. */
  max-width: none;
  opacity: 0;
  transition: opacity .18s ease;
}
/* IL MARCHIO RIEMPIE LA BARRA, A FILO SOPRA E SOTTO.
   Non e' centrato con l'aria attorno: e' alto quanto la barra - 75 px, cioe'
   i 35 del segnaposto piu' i 20+20 di padding - e `top: -20px` lo porta al
   bordo superiore. Il quadrato dell'insegna arriva cosi' a 60 px di lato e la
   N con la corona si legge; a 52 px di altezza il quadrato ne misurava 41 e
   la corona era ancora un impasto.
   In larghezza fa 223 px (75 x 2,9692) e sporge molto oltre i 96 del
   segnaposto, ma li' c'e' lo spaziatore vuoto della barra: il menu sta a
   destra e non se ne accorge.
   L'altezza la impone il CSS e la larghezza la calcola il browser, cosi' la
   proporzione resta quella del file invece di essere arrotondata a interi;
   gli attributi nel segno servono solo a riservare lo spazio. */

/* SCORRENDO SI SCAMBIANO. Un marchio che sporge sul contenuto mentre il
   contenuto gli scorre sotto da' fastidio, ed e' anche il momento in cui
   l'insegna serve meno: chi scorre sa dov'e' arrivato. La classe la mette
   app.js; senza JavaScript resta l'insegna grande, che e' lo stato giusto
   per una pagina in cima e sbagliato per nessuna. */
.topbar--scesa .lockup__insegna { opacity: 0; }
.topbar--scesa .lockup__esteso   { opacity: 1; }

/* Chi ha chiesto di non vedere animazioni non le vede: lo scambio avviene
   comunque, ma di colpo. */
@media (prefers-reduced-motion: reduce) {
  .lockup__insegna,
  .lockup__esteso { transition: none; }
}

/* SULLO SCHERMO STRETTO L'INSEGNA RIMPICCIOLISCE, e non e' solo una
   proporzione: e' una collisione.
   Le spaziature in cima alle pagine sono `clamp`, quindi si accorciano
   quando lo schermo si stringe - `coin-pad` passa da 34 a 22 px - mentre
   l'insegna resterebbe alta 120. Su un telefono le briciole cominciavano a
   117 px e l'insegna arrivava a 120: tre pixel di sovrapposizione, e la
   prima voce tornava illeggibile come prima della correzione.
   72 x 90 tiene la proporzione 0,8 al pixel e porta il fondo a 75, appena
   sotto il filetto della barra: l'insegna sporge ancora, ma di dieci pixel.
   E 96 px su una larghezza di 500 erano un quinto dello schermo. */
@media (max-width: 700px) {
  .lockup { width: 72px; }
  .lockup__insegna { width: 72px; height: 90px; }

  /* SULLO SCHERMO STRETTO I MARCHI NON SI SCAMBIANO: scorrendo resta
     l'insegna, rimpicciolita dentro la barra.
     Il marchio esteso e' larga 2,97 volte la sua altezza: a 60 px fa 178 px,
     e su una barra da 480 px si mangiava meta' dello spazio tagliando fuori
     "Accedi". Ridurlo a 40 px di altezza lo farebbe stare, ma il quadrato
     dell'insegna torna a 32 x 40 px e la corona di nuovo un impasto - cioe'
     il difetto da cui siamo partiti. Su un telefono il nome per esteso nella
     barra non serve: l'insegna quadrata dice la stessa cosa e a 48 x 60 si
     legge. */
  .topbar--scesa .lockup__insegna { opacity: 1; width: 48px; height: 60px; top: -20px; }
  .topbar--scesa .lockup__esteso  { opacity: 0; }

  /* La barra delle tue cose non ha piu' bisogno di scansare l'insegna:
     essendo opaca e piu' avanti nello strato, l'insegna le passa dietro. */
}

/* --- Bottoni ------------------------------------------------------------ */

.btn {
  /* `font: inherit` PRIMA di tutto, e non e' pignoleria.
     Questa classe la portano sia i collegamenti sia i <button> dei moduli, e
     i due partivano diversi: un <a> eredita il carattere del corpo, un
     <button> no - si tiene quello di sistema, che il browser gli mette
     addosso a un corpo suo e con un'interlinea sua. Il risultato erano due
     bottoni verderame identici nel codice e diversi a vedersi: "Segnala"
     usciva in Arial e alto sette pixel meno di "Crea il tuo account".
     Con lo stesso motivo cadono il bordo e il fondo che il browser
     regala ai <button>: li rimettono le varianti qui sotto, e li rimettono
     uguali per tutti. */
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  padding: 16px 26px;
  white-space: nowrap;
  transition: background .2s ease, filter .18s ease, border-color .2s ease;
}
.btn__arrow { font-family: var(--mono); }

.btn--ink    { background: var(--ink);    color: var(--paper); font-weight: 600; }
.btn--accent { background: var(--accent); color: var(--paper); font-weight: 600; }
.btn--ghost  { border: 1px solid var(--rule-btn); color: var(--ink); }
/* Il rosso e' `--danger`, l'unico rosso della palette: quello del comando che
   cancella e del cuore della lista dei desideri. Qui non cancella niente, ma
   e' il colore con cui il sito dice "questa cosa e' fuori dall'ordinario",
   che e' esattamente il caso di chi ha trovato un dato sbagliato. */
.btn--danger { background: var(--danger); color: var(--paper); font-weight: 600; }
.btn--danger:hover { color: var(--paper); filter: brightness(1.12); }

.btn--ink:hover,
.btn--accent:hover { color: var(--paper); filter: brightness(1.12); }
.btn--ghost:hover  { color: var(--ink); background: rgba(25, 23, 19, .05); }

.btn--pill  { border-radius: 999px; padding-inline: 32px; }
.btn--small { font-size: 14px; padding: 13px 22px; border-radius: 999px; }

/* Il solo bottone arrotondato in navigazione */
.btn--nav {
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  white-space: nowrap;
}
.btn--nav:hover { color: var(--paper); filter: brightness(1.12); }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Monete ------------------------------------------------------------- */

.coin {
  position: relative;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 22px 34px -26px rgba(25, 23, 19, .55),
              inset 0 0 0 1px rgba(25, 23, 19, .16);
}
.coin img { width: 100%; height: 100%; object-fit: cover; }

.coin--md { box-shadow: 0 34px 50px -34px rgba(25, 23, 19, .5),
                        inset 0 0 0 1px rgba(25, 23, 19, .16); }

/* Piastra fotografica della scheda: la foto NON va ritagliata */
.plate {
  aspect-ratio: 1;
  border: 1px solid var(--rule-strong);
  background: var(--plate-detail);
  display: grid;
  place-items: center;
}
.plate img { width: 88%; height: 88%; object-fit: contain; }

/* Vassoio: sei monete in fila, va a capo senza media query */
.tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 40px);
}
.tray__item {
  flex: 0 1 auto;
  width: clamp(88px, 12vw, 156px);
  text-align: center;
}
.tray__item .coin { transition: transform .3s var(--ease); }
.tray__item:hover .coin { transform: translateY(-7px); }
.tray__item .label { display: block; margin-top: 14px; white-space: nowrap; }

/* --- Celle con filetto ------------------------------------------------- */
/* Il filetto sta sul bordo SINISTRO di ogni cella: così una riga incompleta
   non lascia un moncone verticale nel vuoto. */

.cells {
  display: grid;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.cells > * { box-shadow: inset 1px 0 0 var(--rule); }

.cells--stats { grid-template-columns: repeat(auto-fit, minmax(min(50%, 160px), 1fr)); }
.cells--pair  { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4 elementi: mai orfani */

.stat { padding: 28px 12px 32px; }
.stat__n {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__l { margin-top: 12px; }

.fact { padding: 20px 14px 22px; }
.fact__v {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-top: 10px;
}

/* --- Righe di dati ----------------------------------------------------- */
/* Il nome resta leggibile: il gruppo dei valori va a capo INTERO. */

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .18s ease;
}
a.row:hover { background: var(--hover); color: var(--ink); }

.row__main { flex: 1 1 130px; min-width: 0; }
.row__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* L'etichetta sotto il nome porta tipo di conio, edizione e segno di zecca,
   e certe edizioni sono lunghe ("VERSIONE SVEDESE-FINLANDESE"). Nella
   colonna stretta della scheda moneta andava a capo tre volte e le righe
   della tabella venivano tutte di altezza diversa. La spaziatura fra le
   lettere qui si riduce: l'etichetta e' gia' minuscola e maiuscola, il
   respiro se lo prende comunque. */
.row__meta { display: block; margin-top: 5px; letter-spacing: .10em; }

.row__data {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
}
.row__data > * { white-space: nowrap; }

/* LARGHEZZA FISSA, non minima. Con min-width la cella cresce col contenuto:
   una tiratura da 2.973.500 e' piu' larga di una da 10.000, il gruppo dei
   valori si allarga, e siccome sta a destra (margin-left:auto) tutte le
   colonne interne slittano di riga in riga. Sembrava una tabella storta ed
   era una tabella senza colonne. Le larghezze sono quelle del contenuto piu'
   lungo che esiste davvero: la tiratura massima a catalogo e' 40.000.000. */
.row__mint  { font-size: 13px;   color: var(--ink-80); font-variant-numeric: tabular-nums; width: 82px; text-align: right; }
.row__mint--sm { font-size: 12px; }
.row__zecca { font-size: 12.5px; color: var(--ink-40); font-variant-numeric: tabular-nums; width: 62px; text-align: right; }
.row__price { font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums; width: 62px; text-align: right; }
/* Piu larga di .row__zecca: ospita l'asterisco della nota a piede,
   e senza margine il numero ci finirebbe a filo. */
.row__stima { width: 76px; }

/* La testata delle colonne: stesse classi delle celle, quindi stesse
   colonne. Non e' allineata per caso ma per costruzione. */
.row__data--head {
  padding-bottom: 0;
  color: var(--ink-40);
}
.row__data--head > * { color: inherit; }

.row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-top: 16px;
}
.row__foot .serif-link { margin-left: auto; }

/* Etichetta → puntini di guida → valore */
.spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.leader {
  flex: 1 1 20px;
  min-width: 14px;
  border-bottom: 1px dotted var(--rule-dot);
  transform: translateY(-4px);
}
.spec__v {
  flex: 0 1 auto;
  font-size: 15px;
  color: var(--ink-90);
  text-align: right;
  text-wrap: pretty;
}
.spec__v--serif { font-family: var(--serif); font-size: 19px; letter-spacing: -.015em; }

/* Etichetta a colonna fissa, valore che scorre su più righe */
.spec-block {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
/* L'ETICHETTA STA SU UNA RIGA, e la colonna e' larga quanto la piu' lunga
   che il sito ha: "Oggetto della commemorazione", 28 caratteri, che in mono
   da 9,5 px con `letter-spacing: .18em` misura circa 207 px. A 150 px
   andavano a capo lei, "Emissione annunciata il" e "Licenza e attribuzione",
   e un'etichetta di due righe accanto a un valore di una riga sfalsa
   l'incolonnamento di tutta la tabella.
   `nowrap` non e' una ripetizione della larghezza: e' la garanzia che se
   domani arriva un'etichetta piu' lunga il problema si veda subito, invece
   di tornare in sordina a due righe. */
.spec-block .label {
  flex: 0 0 210px;
  padding-top: 4px;
  white-space: nowrap;
}

/* Sotto i 560 px l'etichetta si prende la riga e il valore va sotto: 210 px
   di colonna su uno schermo da 360 lascerebbero al valore una gola di
   centocinquanta pixel. */
@media (max-width: 560px) {
  .spec-block .label { flex: 1 0 100%; padding-top: 0; }
  .spec-block__v { flex: 1 0 100%; min-width: 0; }
}
.spec-block__v {
  flex: 1 1 220px;
  min-width: 180px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-90);
  text-wrap: pretty;
}

/* Indice a puntini (paesi) */
.index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
}
.index__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-mid);
}
.index__name { font-family: var(--serif); font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.index__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Elenco con icone --------------------------------------------------- */

.icon-list { border-top: 1px solid var(--rule-mid); }
.icon-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-mid);
}
.icon-row span { font-size: 14.5px; line-height: 1.55; color: var(--ink-80); }

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}
.ico--lg { width: 26px; height: 26px; margin-top: 0; }

/* --- Pannelli ---------------------------------------------------------- */

.panel {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 22px;
}
.panel--edge { padding: 20px 22px; }

.panel__title { font-family: var(--serif); font-size: 21px; letter-spacing: -.02em; }

/* --- Il bannerino della segnalazione, sotto la foto ----------------------- */
/* Sta nello spazio che sotto l'immagine resta vuoto, e deve farsi notare
   quanto basta a essere trovato quando serve - senza competere con la foto,
   che e' la ragione per cui si guarda quella colonna. Percio' il fondo tenue
   e il filetto, non il verde pieno di un bottone: e' un invito, non l'azione
   principale della pagina. */
.segnala-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--hover);
  color: inherit;
}
/* Il testo si prende quel che resta e spinge il bottone a destra; sotto una
   certa larghezza va a capo e il bottone si mette sotto, a sinistra. */
.segnala-banner__testo { flex: 1 1 150px; min-width: 0; }
.segnala-banner__btn { flex: 0 0 auto; margin-left: auto; }
.segnala-banner__ico { flex: 0 0 20px; width: 20px; height: 20px; color: var(--danger); }
.segnala-banner__tit {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.segnala-banner__sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-50);
  text-wrap: pretty;
}

/* --- Il popup della segnalazione ----------------------------------------- */
/* Il <dialog> arriva dal server APERTO, cioe' come riquadro in fondo alla
   scheda: e' il modulo per chi non ha JavaScript, e in quello stato non deve
   somigliare a un popup. Tutto quello che lo rende un popup sta sotto
   `--js`, la classe che app.js aggiunge dopo averlo chiuso: senza JavaScript
   nessuna di queste regole si applica e il riquadro resta un riquadro. */
.segnala-dialog {
  display: block;
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  color: inherit;
}
.segnala-dialog__chiudi-form { display: none; }

/* Centrato con top/left e translate, non con `inset: 0` e `margin: auto`:
   con un `max-height` e `overflow-y` addosso il secondo modo lasciava il
   popup incollato in alto invece che in mezzo. Questo funziona qualunque sia
   l'altezza del contenuto. */
.segnala-dialog--js {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 0;
  overflow-y: auto;
  padding: 26px 28px 28px;
}
.segnala-dialog--js:not([open]) { display: none; }
.segnala-dialog--js::backdrop { background: rgba(25, 23, 19, .52); }
.segnala-dialog--js .segnala-dialog__chiudi-form { display: block; float: right; }
.segnala-dialog__chiudi {
  border: 0;
  background: none;
  padding: 0 0 6px 10px;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-40);
  cursor: pointer;
}
.segnala-dialog__chiudi:hover { color: var(--ink); }

.edge-legend {
  font-family: var(--mono);
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: .22em;
  color: var(--accent);
  margin-top: 12px;
  line-height: 1.6;
  word-break: break-word;
}

/* Le righe di corredo dentro il valore di una riga: la lettura in parole
   dell'iscrizione, la precisazione che vale per tutto il paese. Sono note, e
   hanno il corpo delle note; a differenza di `.note` non sono un paragrafo,
   quindi lo stacco lo mettono loro. */
.spec-nota {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-50);
  text-wrap: pretty;
}
.spec-nota + .serif-link { display: inline-block; margin-top: 10px; }

.callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.callout p { margin-top: 8px; font-size: 14.5px; line-height: 1.58; color: var(--ink-80); }

/* --- Blocco scuro ------------------------------------------------------ */

.dark {
  margin-top: var(--section);
  background: var(--ink);
  color: var(--ink-inverse);
}
.dark__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(52px, 7vw, 96px) var(--gutter);
}
.dark .body { color: var(--on-dark-70); }

.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 19px 0;
  border-top: 1px solid var(--on-dark-rule);
}
.feature__n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--accent-on-dark);
  flex: none;
  width: 28px;
}
.feature__t {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -.02em;
  flex: 0 1 auto;
}
.feature__d {
  flex: 1 1 220px;
  min-width: 150px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-dark-60);
  text-align: right;
  text-wrap: pretty;
}

.dark__foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--on-dark-rule);
}
.dark__foot a {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 24px);
  color: var(--accent-on-dark);
}

/* --- Metodo (centrato) ------------------------------------------------- */

.method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(26px, 3.5vw, 50px);
  padding-top: 38px;
}
.method__item { text-align: center; }
.method__item .ico { margin-inline: auto; }
.method__item .h3 { margin-top: 16px; }
.method__item p { margin: 12px auto 0; max-width: 30ch; }

/* --- Chiusura --------------------------------------------------------- */

.closer {
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule-mid);
  padding: clamp(46px, 6vw, 84px) 0;
  text-align: center;
}
.closer .h2--lg,
.closer .h2 { margin-inline: auto; max-width: 20ch; }
.closer p   { margin: 22px auto 0; max-width: 34em; font-size: 17px; line-height: 1.58; color: var(--ink-60); }
.closer .btn-row { justify-content: center; margin-top: 34px; }

/* --- Footer ----------------------------------------------------------- */

/* IL PIEDE E' CENTRATO, su tre livelli: marchio, frase, voci.
   Prima era una riga sola con quattro colonne distribuite, e il marchio -
   che e' alto quanto quattro righe di testo - tirava tutto da un lato. In
   colonna il suo peso non sbilancia niente e non serve piu' nemmeno alzarlo
   per portare le sue lettere sulla riga del testo: non ha piu' testo di
   fianco. */
.foot {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 52px var(--gutter) 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* La frase sotto il marchio: serif in corsivo, come le didascalie della
   scheda moneta - e' una voce che parla, non un'etichetta. */
.foot__payoff {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-50);
}

/* La riga delle voci: centrate nella pagina, e il copyright a destra.
   Tre colonne di griglia con la prima vuota: e' quella che tiene le voci in
   mezzo alla PAGINA e non in mezzo allo spazio che resta a sinistra del
   copyright - differenza che si vede appena il copyright cambia lunghezza,
   per esempio quando il numero di versione passa a due cifre. */
/* IL PIEDE E' UNA COLONNA, non una griglia a tre campate.
   Con la griglia il copyright stava in fondo a destra, sulla stessa riga
   delle voci: una riga con le voci centrate e una scritta appesa al bordo
   destro si legge come un avanzo di impaginazione. Ora sta sotto, centrato,
   sulla sua riga - com'era gia' sotto gli 800 px, dove la griglia si
   incolonnava da sola. La media query che lo faceva non serve piu': la
   larghezza non cambia piu' niente. */
.foot__riga {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.foot__gruppi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 30px;
}
.foot__riga .foot__copy {
  margin-top: 6px;
  text-align: center;
}
/* Il marchio del piede sta nel flusso, a differenza di quello della barra:
   qui non c'e' niente da far sporgere. L'altezza la impone il CSS e la
   larghezza la calcola il browser, cosi' la proporzione resta quella del file
   (2,5228) invece di essere arrotondata; gli attributi nel segno riservano lo
   spazio prima che l'immagine arrivi. */
/* L'altezza e' 64 px, e la storia di questo numero e' istruttiva: 62 in
   fila con le voci sbilanciava il piede, 44 lo rimetteva in linea, e ora che
   il marchio sta su una riga sua e centrato puo' tornare grande - 64 - senza
   sbilanciare niente. In colonna il suo peso non compete con nessuno.
   Non serve piu' nemmeno alzarlo di 15 px per portare le sue lettere sulla
   riga del testo (le lettere stanno nell'ultimo 29% dell'altezza del file,
   sotto la corona): non ha piu' testo di fianco a cui allinearsi. Se un
   giorno ci tornasse, quel numero vale 0,353 volte l'altezza. */
.foot__marchio { display: block; flex: none; }
.foot__marchio img { display: block; height: 64px; width: auto; }
@media (max-width: 700px) {
  .foot__marchio img { height: 52px; }
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink-60);
  text-transform: uppercase;
}
.foot__copy {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-30);
}

/* --- Scheda moneta: intestazione e colonna appiccicata ---------------- */

/* LE BRICIOLE PARTONO SOTTO L'INSEGNA, e i 30 px in piu' non sono aria
   decorativa: sono la misura di quanto l'insegna della barra sporge sotto il
   filetto. L'insegna e' alta 120 px dal bordo della pagina, la barra finisce
   a 65, quindi sporgono 55 px sulla prima colonna del contenuto - dove le
   briciole cominciano, allo stesso margine. Senza questo spazio l'insegna
   copriva la prima voce: su una scheda si leggeva "... / FRANCIA / 2025"
   con "CATALOGO" nascosto sotto il rosa.
   Sta qui e non sulle classi di testata (`cat-pad`, `coin-pad`, ...) perche'
   le briciole sono l'unica cosa che finisce in quella fascia, e la home - che
   non le ha - non deve prendersi lo spazio per niente. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ink-40);
  text-transform: uppercase;
}

.coin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
  margin-top: 26px;
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-strong);
}
.coin-head .h1 { flex: 1 1 420px; }

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-50);
  text-transform: uppercase;
}
.tags__country {
  padding: 6px 11px;
  border: 1px solid rgba(25, 23, 19, .24);
  color: var(--accent);
  white-space: nowrap;
}


/* --- Rivelazione allo scroll ----------------------------------------- */
/* Progressive enhancement: dove animation-timeline non è supportato
   l'animazione parte una volta al caricamento e il contenuto resta visibile. */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.rise {
  animation: rise .8s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .tray__item:hover .coin { transform: none; }
}



/* --- Catalogo: intestazione ------------------------------------------- */

.crumbs__here { color: var(--ink-70); }

.topbar__nav .is-current {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Stessa chiusura della testata paese: un filetto sotto il sommario, prima
   del testo di presentazione. Le due pagine si aprono uguali. */
.cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 48px;
  margin-top: 24px;
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-strong);
}
.cat-head__text   { flex: 1 1 420px; }
.cat-head__counts { display: flex; gap: clamp(24px, 3vw, 44px); margin-left: auto; }
.cat-head__counts .stat__n { font-size: clamp(34px, 3.6vw, 48px); }
.cat-head__counts .stat__l { margin-top: 10px; }

/* --- Catalogo: barra di ordinamento ----------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.toolbar > .label { white-space: nowrap; font-size: 10px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.chip {
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-60);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--rule-btn); color: var(--ink); }
.chip--on {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--accent);
}

/* --- Catalogo: griglia dei paesi -------------------------------------- */

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
}

.country { display: block; text-align: center; }
.country:hover { color: var(--ink); }

.disc {
  display: grid;
  place-items: center;
  width: min(100%, 170px);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 22px 34px -26px rgba(25, 23, 19, .55),
              inset 0 0 0 1px rgba(25, 23, 19, .16);
  transition: transform .3s var(--ease);
}
.disc img { width: 100%; height: 100%; object-fit: cover; }
.country:hover .disc { transform: translateY(-7px); }

/* Segnaposto per i paesi senza foto: monogramma del codice */
.disc__code {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .16em;
  color: rgba(25, 23, 19, .36);
}

.flag {
  width: 21px;
  height: 14px;
  flex: none;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(25, 23, 19, .22);
}

.country__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.country__name span {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 24px);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.country__n {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  text-transform: uppercase;
}
.country__since {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-30);
  text-transform: uppercase;
}

/* --- Catalogo: slider delle zecche ------------------------------------ */

.rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-strong);
}
.rail-head > div:first-child { flex: 1 1 320px; }

.rail-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.rail-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(25, 23, 19, .24);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 15px;
  transition: background .18s ease, border-color .18s ease;
}
.rail-btn:hover { background: rgba(25, 23, 19, .06); border-color: rgba(25, 23, 19, .5); }

.rail {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }

.mint {
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 280px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 22px 22px 20px;
  transition: background .2s ease, border-color .2s ease;
}
.mint:hover { background: #FFFDF8; border-color: var(--rule-btn); color: var(--ink); }

.mint__place {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.mint__mark {
  display: block;
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--accent);
}
.mint__name {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -.02em;
  line-height: 1.25;
  min-height: 2.5em;
}
.mint__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-mid);
}
.mint__since {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-80);
}




/* --- Pagina paese: intestazione --------------------------------------- */

/* I numeri a destra si allineano in ALTO, non in basso. Con il solo sommario
   ("8 emissioni dal 2005 al 2022") il blocco di testo era corto e appoggiarli
   sul fondo li teneva in mezzo; da quando sotto c'e' anche la descrizione del
   paese il testo e' tre volte piu' alto e i numeri finivano in fondo, con un
   vuoto sopra. In alto stanno accanto alla riga che riassumono. */
/* Stessa impaginazione della testata del catalogo: i numeri stanno in
   basso, allineati al sommario, non in alto sopra il titolo. Con
   flex-start galleggiavano accanto alle briciole e il nome del paese
   sembrava scritto sotto di loro. */
.country-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px 48px;
  margin-top: 24px;
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-strong);
}
.country-head__text { flex: 1 1 420px; }

.country-head__flag { display: flex; align-items: center; gap: 14px; }
.country-head__flag img {
  width: 42px;
  height: 28px;
  flex: none;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(25, 23, 19, .22);
}

/* Righe e colonne con distanze diverse: fra i numeri serve aria (sono tre
   blocchi affiancati che devono restare distinti), fra la bandiera e il
   numero sotto no - sono la stessa cosa detta due volte, una in figura e una
   in cifre, e vanno lette insieme. */
/* I tre blocchi allineati in BASSO: cosi le cifre e le etichette stanno
   sulla stessa riga, e la bandiera sopra lanno sporge in alto invece di
   spingere giu la sua colonna. Con lallineamento in alto "2005" finiva
   dodici pixel piu sotto di "37" e la fila sembrava storta. */
.country-head__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px clamp(22px, 3vw, 46px);
  margin-left: auto;
}
.country-head__facts .stat__n { font-size: clamp(32px, 3.4vw, 46px); }
.country-head__facts .stat__l { margin-top: 10px; }

.toolbar--bottom { border-top: 0; }

/* --- Pagina paese: emissioni per anno --------------------------------- */

.year { margin-bottom: clamp(34px, 4vw, 56px); }

.year__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}
.year__n {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.year__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}

.issue {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .18s ease;
}
.issue:hover { background: var(--hover); color: var(--ink); }

.issue__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, 6vw, 74px);
  flex: none;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 14px 22px -18px rgba(25, 23, 19, .5),
              inset 0 0 0 1px rgba(25, 23, 19, .16);
}
.issue__disc img { width: 100%; height: 100%; object-fit: cover; }

.issue__text { flex: 1 1 auto; min-width: 0; }
.issue__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -.02em;
  line-height: 1.25;
}
.issue__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-40);
}
.issue__meta > * { white-space: nowrap; }
.issue__price { color: var(--accent); }

/* --- Pagina paese: i vicini ------------------------------------------- */

.neighbours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.neighbours__head a {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--accent);
  white-space: nowrap;
  text-transform: uppercase;
}

.neighbours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border-bottom: 1px solid var(--rule-strong);
}

.neighbour {
  display: block;
  padding: 22px 20px 24px;
  box-shadow: inset 1px 0 0 var(--rule);
  transition: background .18s ease;
}
.neighbour:hover { background: var(--hover); color: var(--ink); }

.neighbour__name { display: flex; align-items: center; gap: 10px; }
.neighbour__name span {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -.02em;
}
.neighbour__n {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  text-transform: uppercase;
}


/* --- Correzioni all'integrazione ---------------------------------------- */

/* .coin nel markup consegnato e' uno <span>, e su un elemento inline
   overflow:hidden e border-radius non ritagliano niente: le monete uscivano
   quadrate invece che tonde. */
.coin { display: block; }

/* --- Utility dell'integrazione ------------------------------------------
   I template consegnati mettono le spaziature negli attributi style="".
   Qui non si possono usare: la Content-Security-Policy del sito e'
   style-src 'self', che blocca lo stile inline, e per gli stessi motivi il
   progetto lo vieta da sempre. L'handoff lo prevede ("gli stili inline sono
   un vincolo dello strumento di design, non una prescrizione: vanno tradotti
   in CSS secondo le convenzioni locali"): sono questi.
   ------------------------------------------------------------------------ */

/* Salto al contenuto: invisibile finche' non riceve il fuoco da tastiera.
   Non si usa display:none — un elemento nascosto cosi' non e' raggiungibile
   con il tabulatore, e il collegamento non servirebbe a niente. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.skip:focus {
  left: 0;
  color: var(--ink-inverse);
}

/* spaziature ricorrenti */
.mt-10 { margin-top: 10px; }
/* mt-12 e mt-24 ERANO USATE NELLE PAGINE E NON ESISTEVANO QUI: quattro volte
   in moneta.asp e quattordici in fonti.asp, e quei margini non facevano
   niente. Si e' visto rimettendo il testo sotto il titolo - i paragrafi
   della pagina delle fonti si attaccavano l'uno all'altro, e la colpa non
   era del titolo. E' il difetto tipico delle classi di servizio: non
   sbagliano rumorosamente, semplicemente non ci sono. */
.mt-12 { margin-top: 12px; }
.mt-18 { margin-top: 18px; }
.mt-24 { margin-top: 24px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-26 { margin-top: 26px; }
.mt-36 { margin-top: 36px; }
.mt-44 { margin-top: 44px; }
.push-right { margin-left: auto; }

/* eroe */
.hero-pad {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(34px, 4vw, 54px);
}
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 28px 48px;
  margin-top: clamp(28px, 3.5vw, 46px);
}
.hero-row__lead { flex: 1 1 380px; }

/* vassoio delle monete */
.band--clip { overflow: clip; }
.tray-pad {
  padding-top: clamp(30px, 4vw, 52px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
.tray-caption {
  margin-top: clamp(22px, 3vw, 34px);
  text-align: center;
}

/* Fascia statistiche.
   Nel prototipo il filetto sotto la fascia sta sulla SEZIONE e corre da bordo
   a bordo dello schermo; il template consegnato lo ha spostato sul
   contenitore delle celle, che si ferma a 1280px: sopra il filetto della
   fascia delle monete attraversa tutto, sotto no, e la fascia dei numeri
   sembra una tabella incorniciata. Si rimette dov'era.
   Il filetto in cima non serve: lo disegna gia' la fascia sopra. */
.stats-band { border-bottom: 1px solid var(--rule-mid); }
.cells--flush { border-top: 0; border-bottom: 0; }

/* Chiusura a destra della fascia.
   Nel prototipo ogni cella disegna solo il filetto SINISTRO, quindi la fila
   resta aperta sul lato destro. Il filetto di chiusura si mette sul
   contenitore e non sull'ultima cella: cosi' cade sempre sul bordo destro
   della griglia, e quando l'ultima riga e' incompleta (sotto i 560px la
   fascia va a 3+2) non resta appeso a meta' del vuoto. */
.cells--closed { box-shadow: inset -1px 0 0 var(--rule); }

/* Numero ed etichetta centrati nella cella (nel prototipo sono a sinistra).
   L'etichetta e' in mono con letter-spacing .2em, che lascia uno spazio in
   coda all'ultima lettera: senza compensarlo il testo risulta spostato a
   sinistra di mezzo carattere pur essendo "centrato". */
.cells--stats .stat { text-align: center; }
.cells--stats .stat__l { text-indent: .2em; }

/* tabella delle ultime emissioni */
.rows-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}

/* "Com'e' fatta una scheda" */
.rule-top--pad { padding-top: clamp(34px, 4vw, 56px); }
.coin--300 { width: min(100%, 300px); }
.coin-caption { margin-top: 22px; max-width: 300px; }
.coin-caption__title {
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.spec-source { margin-top: 18px; line-height: 1.8; }
.spec-closing {
  margin-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.4;
  color: var(--ink-80);
}

/* indice dei paesi */
.h2--paesi {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  margin-top: 18px;
}
.body--tight { font-size: 16px; line-height: 1.6; }

/* il metodo */
.eyebrow--ruled {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule-mid);
}

/* il catalogo: le spaziature che nel template stanno negli style="" */
.cat-pad { padding-top: clamp(26px, 3.5vw, 44px); }
.cat-head__text .display { max-width: 16ch; }
.cat-head__text .lead { margin-top: 24px; }
.toolbar-pad { margin-top: clamp(30px, 4vw, 46px); }
.countries-pad { padding-top: clamp(34px, 4vw, 52px); }
.chips > .label { margin-right: 4px; }
.rail-pad { margin-top: clamp(52px, 6.5vw, 84px); }
.h2--rail {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.06;
  margin-top: 14px;
}

/* Nomi veri di zecca contro nomi di prova: "Real Casa de la Moneda - Fábrica
   Nacional de Moneda y Timbre (FNMT-RCM)" occupa tre righe dove il template
   ne prevedeva due, e il filetto di "attiva dal" scendeva di conseguenza,
   sfalsato da riquadro a riquadro. Spinto in fondo alla scheda: i filetti
   tornano allineati qualunque sia la lunghezza del nome. */
.mint__name { padding-bottom: 18px; }
.mint__foot { margin-top: auto; }

/* la pagina paese: le spaziature che nel template stanno negli style="" */
/* Il margine sopra il titolo serviva a fare spazio allocchiello, che stava
   sopra e adesso e in testa al sommario: senza occhiello quel margine
   spingeva il nome del paese ventidue pixel piu giu che sul catalogo, e le
   due pagine si aprivano in modo diverso.
   Il tetto di 46 caratteri sul sommario e caduto per lo stesso motivo per
   cui e caduto sul catalogo: la riga finisce dove cominciano i numeri. */
.country-head__text .display { max-width: 14ch; }
.country-head__text .lead { margin-top: 24px; }
.years-pad { padding-top: clamp(30px, 3.5vw, 46px); }
.mintbox-pad { margin-top: clamp(20px, 3vw, 34px); }
.panel--pad { padding: clamp(26px, 3.5vw, 40px); }
.cols--wide-gap { gap: clamp(28px, 4vw, 60px); }
.h2--mint { margin-top: 14px; line-height: 1.08; }
.mint-note { margin-top: 16px; max-width: 46ch; }
.serif-link--block { display: inline-block; margin-top: 18px; }
.neigh-pad { margin-top: clamp(48px, 6vw, 76px); }

/* la scheda moneta: le spaziature che nel template stanno negli style="" */
.coin-pad { padding-top: clamp(22px, 3vw, 34px); }
.coin-body-pad { padding-top: clamp(32px, 4vw, 52px); }
.cols--380 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.plate-caption { margin-top: 14px; font-size: 15.5px; }
.mt-16 { margin-top: 16px; }
.block-gap { margin-top: clamp(40px, 5vw, 64px); }
.block-gap-lg { margin-top: clamp(40px, 5vw, 68px); }
.closer-pad { padding-top: clamp(56px, 7vw, 96px); }
.h2--ruled {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-strong);
}
.row__name--lg { font-size: 21px; }
.coin-desc {
  margin-top: clamp(28px, 3.5vw, 44px);
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}
/* Foto della confezione dentro la riga della variante: piccola, filettata,
   raggio 0 come tutto il resto. Nella veste storica la stessa cosa si chiama
   .pack-thumb ed e' arrotondata e ombreggiata. */
/* Il riquadro della foto e' largo sempre uguale, e c'e' anche quando la foto
   non c'e'. Con width:auto ogni immagine aveva la sua larghezza e ogni nome
   partiva da un punto diverso: la colonna dei nomi sembrava a gradini. */
.row__packbox {
  width: 76px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row__pack {
  display: block;
  max-height: 54px;
  max-width: 76px;
  object-fit: contain;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.row__main--pack {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Emissione senza foto: il riquadro resta, vuoto e dichiarato. Sparire
   lascerebbe la colonna sinistra mozza e non direbbe che la foto manca. */
.plate--empty .disc__code {
  font-size: 15px;
  text-align: center;
  line-height: 2;
}

/* --- Moduli -------------------------------------------------------------
   L'handoff non consegna nessuna pagina con un form: queste regole sono
   scritte qui, nella stessa lingua del resto (raggio 0, filetti al posto
   delle ombre, etichette in mono maiuscolo, verderame solo sul fuoco).
   Servono a login e registrazione, e poi a tutta l'area autenticata.
   ------------------------------------------------------------------------ */

.form { margin-top: clamp(26px, 3vw, 34px); }

.field { display: block; }
.field + .field { margin-top: 20px; }

.field > .label {
  display: block;
  margin-bottom: 8px;
}

.input {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;          /* sotto i 16px iOS ingrandisce la pagina al fuoco */
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder { color: var(--ink-30); }
.input:hover { border-color: var(--rule-btn); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Il campo che il browser ha riempito da solo non deve sembrare un altro
   campo: Chrome ci mette un fondo azzurro che qui stona. */
.input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 0 0 100px var(--surface);
}

.field__hint {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-50);
}

.btn--full { width: 100%; justify-content: center; }

/* --- Messaggi di sistema ------------------------------------------------
   Il flash esce dall'header, fuori da .wrap: si incolonna da solo con la
   pagina invece di attaccarsi al bordo dello schermo. L'errore di un form
   sta dentro il modulo e non ha bisogno di margini propri.
   ------------------------------------------------------------------------ */

.flash {
  max-width: var(--measure);
  margin: 22px auto 0;
  padding: 13px var(--gutter);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  border-left: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.flash--errore {
  border-left-color: #A33B2E;
  background: color-mix(in oklab, #A33B2E 8%, transparent);
  color: var(--ink);
}
.flash--hide { opacity: 0; transition: opacity .6s; }

.form-error {
  margin-top: 20px;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  border-left: 2px solid #A33B2E;
  background: color-mix(in oklab, #A33B2E 8%, transparent);
}

/* --- Pagine di accesso --------------------------------------------------- */

.auth-pad {
  padding-top: clamp(34px, 5vw, 66px);
  padding-bottom: clamp(48px, 6vw, 90px);
}

/* Due colonne quando c'e' spazio: il modulo e, di fianco, cosa ci si fa con
   un account. Sotto i 900px circa vanno una sotto l'altra da sole. */
.auth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
.auth__form { max-width: 460px; }
.auth__aside { max-width: 460px; }
.auth__aside .panel { padding: clamp(22px, 2.5vw, 30px); }
.auth h1 { max-width: 16ch; }
.auth .lead { margin-top: 18px; max-width: 42ch; }
.auth-switch { margin-top: 26px; }

/* Fuoco da tastiera: nel foglio consegnato non c'e' nessuna regola, e chi
   naviga col tabulatore si affida al contorno di sistema, che su questo
   fondo si vede appena. Solo :focus-visible, cosi' il clic col mouse non
   lascia il contorno acceso. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Righe con bandiera e sottotitolo (elenco zecche) -------------------- */

/* Il reset mette le immagini a display:block: una bandiera dentro una riga
   di testo andrebbe a capo da sola. Serve un contenitore flex. */
.with-flag { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.with-flag > .flag { position: relative; top: 3px; }
.with-flag > span { min-width: 0; }

/* LA BANDIERA CENTRATA SULLA RIGA IN CUI STA.
   Il ritocco di 3 px e' tarato sul sottotitolo di una riga di elenco, che e'
   in mono da 11 px: li' la riga alta 17,6 px e la bandiera alta 14 lasciano
   poco da correggere. Nel blocco dei dati il valore e' 15 px con interlinea
   1,6, quindi la riga e' alta 24 e la bandiera restava appesa in alto,
   sopra la parola. Non e' un allineamento «a occhio»: (24 - 14) / 2 fa 5.
   L'allineamento resta in cima e non al centro perche' certi valori vanno a
   capo, e su due righe una bandiera centrata cadrebbe in mezzo alle due. */
.spec-block__v.with-flag > .flag { top: 5px; }

/* Sottotitolo di una riga di dati: la stessa specie dei meta della scheda
   moneta (mono, NON maiuscolo), che qui serve perche' contiene nomi propri
   - "Monnaie de Paris" in maiuscolo spaziato non si legge. */
.row__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--ink-40);
}

/* Nota discorsiva sotto una riga: e' prosa, non un dato. */
.row__note {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 74ch;
}

/* --- Autenticità: le voci "cosa gira / come si smaschera" ---------------- */

.myth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px clamp(20px, 3vw, 48px);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.myth__what { font-size: 15.5px; line-height: 1.55; color: var(--ink-80); }
/* Il titolo della voce sta dentro il testo come <strong>: qui diventa una
   riga a sé in Newsreader, senza toccare la risorsa di testo. */
.myth__what strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing: -.02em;
  color: var(--ink);
}
.myth__how { font-size: 14.5px; line-height: 1.6; color: var(--ink-60); text-wrap: pretty; }

/* La veste storica usa .muted dentro alcuni testi di risorsa: qui vale come
   inciso sottotono, non come colore di sistema. */
.muted { color: var(--ink-40); }

/* I controlli numerati sul fondo scuro: come .feature della home, ma il
   testo e' una frase intera (il titolo e' il <strong> iniziale). */
.feature__body {
  flex: 1 1 260px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--on-dark-70);
}
.feature__body strong { color: var(--ink-inverse); font-weight: 600; }
/* Nelle voci "cosa gira" il sottotitolo arriva dalla risorsa come
   <br><span class="muted">: il <br> qui non serve, la riga va a capo da se'. */
.myth__what br { display: none; }
.myth__what .muted {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
}
/* .row__sub e .row__name dichiarano display:block e stanno DOPO .with-flag
   nel foglio: senza questa riga la bandiera resta un blocco a se' e il testo
   va sotto invece che accanto. */
.row__sub.with-flag,
.row__name.with-flag { display: flex; }

/* La riga sotto il nome quando contiene una FRASE e non due dati.
   .row__sub e' fatta per «Italia · 2006»: mono, 11 px, lettere spaziate. Una
   frase dentro quello stile diventa un muro grigio - nell'elenco delle guide
   erano cinque righe di monospace per voce, e la pagina sembrava un dump.
   Qui la frase torna a essere una frase: carattere di testo, corpo da
   didascalia, e nient'altro.
   NIENTE TETTO DI LARGHEZZA E NIENTE TAGLIO. Prima erano incolonnate a 68
   caratteri e accorciate coi puntini: mezza pagina vuota a destra e la frase
   mozzata a meta'. I testi sono 235 caratteri di media (274 il piu' lungo),
   che a tutta larghezza fanno due righe. Vanno per intero. */
.row__sub--frase {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-50);
}

/* ==========================================================================
   AREA RISERVATA
   Dashboard, collezione, wishlist, acquisti. Quasi tutto e' gia' qui sopra:
   le righe sono .row del catalogo, i numeri .cells--stats della home, i
   filtri .chip. Sotto c'e' solo quel che l'area riservata ha in piu'.
   ========================================================================== */

:root {
  /* Rosso di terracotta, non il rosso di sistema. Lo usano il comando che
     toglie qualcosa dalla collezione - dove compare solo al passaggio - e
     il cuore delle monete che stai cercando. Un rosso solo in tutta la
     tavolozza: due rossi vicini si leggono come due significati, e non lo
     sono. */
  --danger: #8C2F22;
}

/* La dashboard sta nel blocco a destra, non nel menu: il segno della voce
   corrente va ripetuto qui, perche' .topbar__nav .is-current non la copre. */
/* Colore E filetto, come in `.topbar__nav .is-current`: con il solo cambio di
   inchiostro la dashboard corrente non si distingueva da «Esci» accanto, e
   il segno della pagina in cui ci si trova o si vede o non c'e'. */
.topbar__auth .is-current {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* L'INVITO AL PIANO: l'unica voce colorata della barra, perche' e' l'unica
   che chiede qualcosa invece di portare da qualche parte. Il selettore
   ripete `.topbar__auth a` per battere la regola che li mette tutti in
   grigio. */
.topbar__auth a.topbar__pro {
  color: var(--accent);
  font-weight: 600;
}
.topbar__auth a.topbar__pro:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Uscire non e' l'azione principale di nessuna pagina: stesso ingombro del
   bottone accanto, ma vuoto. */
.btn--nav-ghost {
  background: transparent;
  color: var(--ink-70);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--rule-btn);
}
.btn--nav-ghost:hover { color: var(--ink); background: rgba(25, 23, 19, .05); }

/* --- Barra di completamento -------------------------------------------- */
/* Un filetto che si riempie, non un tubo colorato: nel resto della veste le
   separazioni sono filetti da 1px e questa non fa eccezione.
   La larghezza arriva da una classe .w-* a scatti del 5% perche' la CSP del
   sito vieta gli stili inline: width nel markup verrebbe scartato. */
/* Quattro pixel e non due: da quando il riempimento e' rosso, arancio o verde
   quel filetto non separa piu' - dice una cosa - e a due pixel il colore non
   si distingue. Resta un filetto, non diventa un tubo. */
.meter { display: block; height: 4px; margin-top: 9px; background: var(--rule); }
.meter__fill { display: block; height: 100%; background: var(--accent); }
/* Paese completato: NON piu' inchiostro. Il nero era il segno del "finito"
   quando la barra era sempre verderame e serviva un secondo colore per
   distinguere il completo dal quasi; da quando i colori sono tre e vogliono
   dire quanto manca, il nero e' l'unico che non sta nella scala - e su una
   riga di rossi, arancioni e verdi si legge come "spento", non come
   "finito". Un paese completo e' il verde piu' pieno che c'e', e che sia
   completo lo dice gia' il conteggio accanto, in inchiostro. */

.w-0 { width: 0; }     .w-5 { width: 5%; }   .w-10 { width: 10%; } .w-15 { width: 15%; }
.w-20 { width: 20%; }  .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; }
.w-40 { width: 40%; }  .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; }
.w-60 { width: 60%; }  .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; }
.w-80 { width: 80%; }  .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; }
.w-100 { width: 100%; }

/* --- Righe della collezione -------------------------------------------- */
/* .row del catalogo con il disco della moneta davanti. Il disco e' piccolo
   di proposito: in un elenco di ottanta pezzi la foto serve a riconoscere,
   non a guardare. */
.row__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--plate);
  box-shadow: 0 10px 18px -14px rgba(25, 23, 19, .5),
              inset 0 0 0 1px rgba(25, 23, 19, .16);
}
.row__disc img { width: 100%; height: 100%; object-fit: cover; }
.row__disc .disc__code { font-size: 11px; letter-spacing: .12em; }

/* Un dato mancante non lascia la colonna vuota: ci va un trattino lungo,
   cosi' le colonne restano allineate anche quando il prezzo non c'e'. */
.row__na { color: var(--ink-30); }

/* --- Targhette --------------------------------------------------------- */
/* Variante, confezione, conservazione. Riquadro a filetto, mai fondo pieno:
   il fondo pieno qui griderebbe piu' del nome della moneta. */
.stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding: 3px 8px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  white-space: nowrap;
}
.stamp--accent {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent);
}
/* Nota di contorno (marchio di zecca, data): stesso corpo, niente riquadro */
.stamp--plain { box-shadow: none; padding-inline: 0; color: var(--ink-40); }

/* --- Comando di rimozione ---------------------------------------------- */
/* Sta in fondo alla riga e non deve pesare piu' del dato che toglie: e' una
   parola in mono, e diventa rossa solo sotto il puntatore. */
.row__act { flex: none; margin-left: 16px; }
.btn-x {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-30);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.btn-x:hover { color: var(--danger); }
.btn-x:disabled { opacity: .4; cursor: default; }

/* --- Stato vuoto -------------------------------------------------------- */
/* Un elenco vuoto non e' un errore: e' una pagina che deve dire da dove si
   comincia. */
.empty { margin-top: clamp(26px, 3vw, 38px); padding: clamp(30px, 4vw, 48px); text-align: center; }
.empty p { margin: 14px auto 0; max-width: 46ch; }
.empty .btn-row { justify-content: center; margin-top: 24px; }

/* --- Dashboard ---------------------------------------------------------- */
/* Il saluto e' un occhiello, non un titolo: il titolo e' la collezione. */
.dash-head__text .display { max-width: 15ch; }
.dash-head__text .lead { margin-top: 22px; max-width: 44ch; }

/* Le due colonne del fondo (completamento, ultime aggiunte) hanno ciascuna
   la propria intestazione a filetto. */
.col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}
.col-head .label { margin-left: auto; }

/* Completamento per paese: due colonne di righe, come .index, ma ogni riga
   porta la barra sotto e quindi non puo' stare su una sola linea. */
.prog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.prog {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
a.prog:hover { color: var(--ink); }
.prog__top { display: flex; align-items: center; gap: 9px; }
.prog__name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prog__n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prog__n--done { color: var(--accent); }

/* Catalogo visto da chi e' entrato: la stessa griglia di paesi, con quante ne
   ha gia'. Il paese completo passa dall'accento all'inchiostro pieno - il
   verderame qui vuol dire "in corso", non "fatto". */
.country__n--done { color: var(--ink); }
.country .meter { margin-top: 12px; }

/* --- Pagina paese vista da chi e' entrato ------------------------------- */

/* La barra del paese sta sotto il sommario, non nella riga dei numeri: e'
   l'unico dato della testata che riguarda chi guarda. */
.prog--head { margin-top: 24px; max-width: 44ch; border-bottom: 0; padding-bottom: 0; }

/* L'emissione che hai gia': anello verderame intorno alla moneta. In una
   griglia di quaranta righe un anello si vede da lontano, un'etichetta in
   fondo alla riga no. */
.issue--own .issue__disc {
  box-shadow: 0 14px 22px -18px rgba(25, 23, 19, .5),
              inset 0 0 0 2px var(--accent);
}
.issue__own  { color: var(--accent); }
.issue__wish { color: var(--ink-40); }

/* --- Tendine ------------------------------------------------------------ */
/* Nessuno dei pacchetti consegnati aveva un <select>: la freccia di sistema
   e' l'unica cosa che nella pagina non sarebbe disegnata da noi, quindi si
   spegne e se ne mette una in svg. Il data: URI passa la CSP perche' img-src
   ammette data: (style-src no, ed e' per questo che non c'e' uno style
   inline). */
.select {
  width: 100%;
  font-family: var(--sans);
  /* 16px o piu': sotto, iOS ingrandisce la pagina appena tocchi il campo */
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 13px 40px 13px 14px;
  margin-top: 9px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23191713' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.select:hover { border-color: var(--rule-btn); }
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Campi affiancati: si impilano da soli, senza media query */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(20px, 2.5vw, 28px);
}
/* dentro la griglia i campi non si distanziano da soli: ci pensa il gap */
.form-grid .field + .field { margin-top: 0; }

/* Campo che occupa tutta la riga della griglia (indirizzo, note) */
.field--full { grid-column: 1 / -1; }

/* L'area di testo usa lo stesso vestito del campo, ma si allunga solo in
   verticale: trascinarla in orizzontale sfonderebbe la griglia. */
textarea.input { resize: vertical; min-height: 84px; }

/* Colonna "tue" nell'elenco varianti della scheda: c'e' solo per chi e'
   entrato, e resta larga uguale anche quando il valore e' un trattino,
   altrimenti le righe possedute sfalserebbero tutte le altre. */
.row__own {
  font-size: 12.5px;
  color: var(--accent);
  width: 48px;
  text-align: right;
}

/* ==========================================================================
   GRAFICI DELLA DASHBOARD
   Barre e colonne disegnate in SVG dal server (vedi BarraSvg/ColonnaSvg in
   connessione.asp): la larghezza e' un attributo di presentazione e non uno
   stile, quindi passa la CSP ed e' precisa al decimo. Niente librerie:
   il grafico e' fatto degli stessi filetti del resto della veste.
   ========================================================================== */

/* Due o tre grafici affiancati che si impilano da soli */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(24px, 3vw, 34px);
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-strong);
}
.chart__head .label { margin-left: auto; }

/* --- Barre orizzontali -------------------------------------------------- */

.bars { margin-top: 4px; }

.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 13px 0 11px;
  border-bottom: 1px solid var(--rule);
}
.bar__label {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar__n {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* La barra sta sotto l'etichetta e occupa tutte e due le colonne */
.bar__track { grid-column: 1 / -1; display: block; height: 6px; background: var(--rule); }
.bar__svg   { display: block; width: 100%; height: 100%; }
.bar__svg rect { fill: var(--accent); }
/* La voce piu' alta e' quella che descrive la collezione: inchiostro pieno */
.bar--top .bar__svg rect { fill: var(--ink); }

/* --- Colonne per anno --------------------------------------------------- */
/* Venticinque anni: le colonne si stringono da sole, le etichette restano
   leggibili perche' sono ruotate solo quando servirebbe (non qui: si scrive
   l'ultima cifra dell'anno e per esteso solo i decenni). */

.colbars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 22px;
}
.colbar { flex: 1 1 0; min-width: 0; text-align: center; }
.colbar__track { display: block; height: 96px; }
.colbar__svg { display: block; width: 100%; height: 100%; }
.colbar__svg rect { fill: var(--accent); }
.colbar--vuoto .colbar__svg rect { fill: var(--rule); }
.colbar__y {
  display: block;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}
.colbar--decennio .colbar__y { color: var(--ink-60); }

/* --- Valore della collezione ------------------------------------------- */
/* Due valori sovrapposti sulla stessa scala: il nominale e' il pavimento
   (una 2 euro vale 2 euro anche se non la vuole nessuno), la stima e' quel
   che ci sta sopra. Metterli su due barre separate li farebbe sembrare due
   grandezze indipendenti, che non sono. */

.valore { margin-top: clamp(22px, 3vw, 30px); }
.valore__track {
  display: block;
  height: 12px;
  background: var(--rule);
  margin-top: 16px;
}
.valore__svg { display: block; width: 100%; height: 100%; }
.valore__svg .v-stima { fill: var(--accent); }
.valore__svg .v-nominale { fill: var(--ink); }
.chiave {
  width: 10px;
  height: 10px;
  flex: none;
  display: inline-block;
}
.chiave--nominale { background: var(--ink); }
.chiave--stima    { background: var(--accent); }
.chiave--vuoto    { background: var(--rule); }

/* Un importo non va a capo fra il simbolo e le cifre: "€" su una riga e
   "928,00" su quella dopo si legge come due cose. */
.stat__n { white-space: nowrap; }

/* Valore di ripiego: dove non c'e' una quotazione conta il nominale, e si
   scrive in grigio - e' un pavimento, non una stima di mercato. */
.row__nom { color: var(--ink-30); }

/* Il totale grande del blocco "quanto vale": e' la risposta alla domanda, e
   sta da solo. Piu' contenuto dei numeroni di testata perche' vive dentro
   mezza colonna, ma piu' grande di tutto il resto del blocco. */
.valore__tot .stat__n { font-size: clamp(30px, 3.2vw, 42px); }
.valore__tot .stat__l { margin-top: 8px; }

/* Le due parti sotto la barra: righe puntinate come sulla scheda moneta, con
   il quadratino di colore dentro l'etichetta. Cosi' sono anche la legenda
   della barra, e la legenda separata - che ripeteva per la terza volta le
   stesse due parole - non serve piu'. */
.valore__parti { margin-top: 22px; }
.valore__parti .spec:first-child { border-top: 1px solid var(--rule); }
.valore__parti .label { display: inline-flex; align-items: center; gap: 9px; }
.valore__parti .spec__v {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
}

/* ============================================================
   Le 2 euro ordinarie (divisionali)
   ------------------------------------------------------------
   Una tabella, non la griglia di dischi delle commemorative: qui non c'e'
   una foto per riga (il dritto e' lo stesso per vent'anni) e quel che si
   confronta e' un prezzo contro l'altro, che in colonna si legge e in
   griglia no.
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ventotto anni per tre colonne stanno larghi anche su un telefono, ma la
   pagina non deve scorrere di lato: scorre la tabella dentro il suo riquadro.

   E DEVE VEDERSI CHE SCORRE. Sotto i 400 px la tabella dei falsi ritirati
   finisce fuori dal riquadro senza un segno: si legge «2019 19.303 13.762» e
   sembra che le colonne siano tre. L'ombra ai lati compare SOLO quando da
   quella parte c'e' del contenuto nascosto, e si spegne quando lo scorrimento
   arriva in fondo - senza una riga di JavaScript.
   Come funziona: due sfumature bianche restano incollate al contenuto
   (background-attachment: local) e coprono le ombre; due ombre restano
   incollate al riquadro (scroll). Quando il contenuto e' scorrevole la
   sfumatura scivola via e l'ombra resta scoperta.
   La tabella dentro deve restare SENZA fondo: con un fondo opaco copre le
   ombre e non se ne vede nessuna - provato, e l'ombra non compariva. */
.divtab-wrap {
  overflow-x: auto;
  margin-top: 18px;
  background:
    linear-gradient(to right, var(--paper) 40%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--paper) 40%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(25, 23, 19, .14), rgba(25, 23, 19, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(25, 23, 19, .14), rgba(25, 23, 19, 0)) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

.divtab {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.divtab th,
.divtab td {
  text-align: right;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.divtab thead th {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
}
.divtab tbody th[scope="row"] { text-align: left; font-weight: 500; }
.divtab tbody th[scope="row"] a { text-decoration: none; }
.divtab tbody th[scope="row"] a:hover { text-decoration: underline; }

/* La colonna del 2 euro nella tabella dei falsi ritirati: e' quella che si
   guarda - il 2 euro fa il 97,95% del valore dei falsi - e in una tabella di
   numeri incolonnati il neretto e' l'unico modo di dirlo senza aggiungere un
   colore che vorrebbe una legenda. */
.divtab__forte { font-weight: 600; color: var(--ink); }

/* La testata del disegno: e' un cambio di moneta, non un sottotitolo
   qualsiasi, quindi si stacca con la riga sopra e non con il grassetto. */
.divtab__grp th {
  text-align: left;
  padding-top: 20px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule-mid);
}
.divtab tbody tr:first-child .divtab__grp th,
.divtab__grp:first-child th { padding-top: 6px; }

/* Non emessa e non quotata sono due cose diverse e devono restare
   distinguibili anche in una colonna di numeri: il trattino e' scarico, il
   punto interrogativo resta leggibile. */
.divtab__ne { color: var(--ink-30); }
.divtab__nq { color: var(--ink-40); }

/* Il pallino delle possedute: stesso verderame dell'anello sulle
   commemorative, cosi' il segno vuol dire la stessa cosa in tutta la pagina. */
.divtab__dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.divtab__leg { margin-top: 14px; color: var(--ink-50); }


/* La descrizione del paese: sta sotto il sommario dei numeri e ha un altro
   compito, quindi un altro peso. Misura di riga corta perche' e' prosa da
   leggere, non un dato da scorrere. */
.paese-intro {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--ink-70);
}

/* ==========================================================================
   PROFILO UTENTE
   ========================================================================== */

/* L'avatar. Chi non ha caricato niente non resta con una sagoma grigia: due
   iniziali su un disco, come i codici ISO dei paesi nel catalogo. Un
   segnaposto disegnato dice "qui ci va la tua faccia" meglio di un'icona
   uguale per tutti. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--lg { width: 96px; height: 96px; }
.avatar--sm { width: 32px; height: 32px; }
.avatar__iniziali {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .02em;
  color: var(--accent);
}
.avatar--sm .avatar__iniziali { font-size: 13px; }

.avatar-riga { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar-riga__campi { flex: 1 1 260px; min-width: 0; }

/* Il selettore di file non si puo' ridisegnare come gli altri campi senza
   JavaScript, e la CSP vieta gli script inline: si lascia quello del browser
   e gli si da' solo lo stesso respiro degli altri. */
input[type="file"].input {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
}

/* La voce profilo in barra: la faccia e la parola sulla stessa linea. */
.topbar__auth a { display: inline-flex; align-items: center; gap: 8px; }

/* Lo storico delle rilevazioni. La colonna della fonte e' colorata perche'
   e' il dato che rende leggibile la tabella: due numeri diversi sulla stessa
   moneta sembrano una contraddizione finche' non si vede che sono due misure
   di cose diverse. */
.storico th[scope="row"] { white-space: normal; min-width: 130px; }
.stor__f { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.stor__f--vendita { color: var(--accent); }
.stor__f--indice  { color: var(--ink-80); }
.stor__f--numista { color: var(--ink-50); }
.stor__f--listino { color: var(--ink-40); }
.storico td.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   Da dove viene il valore.
   Prima era una tabella con una riga per rilevazione, e per la 2 euro
   andorrana del 2014 faceva ventinove righe di cui la meta' erano rilanci
   dello script: l'Indice compariva tre giorni di fila con tre righe diverse.
   Adesso e' un blocco per variante, con l'Indice in cima da solo - perche'
   e' la conclusione, non una riga come le altre - e sotto le fonti divise
   per che cosa sono.
   ------------------------------------------------------------------ */
.valblocco { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.valblocco:first-child { border-top: 0; }

.valblocco__testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.valblocco__var { font-weight: 500; }
.valblocco__ora { text-align: right; display: flex; align-items: baseline; gap: 10px; }
.valblocco__cifra {
  font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ink-90);
}

.valblocco__righe { margin-top: 10px; }

/* L'intestazione del gruppo: dice che COSA sono le righe sotto, ed e' il
   pezzo che rende la sezione leggibile. Senza, un prezzo d'asta del 2018 e
   un prezzo di negozio di ieri sembrano lo stesso genere di numero. */
.valgruppo {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-50); margin: 14px 0 6px;
}
.valgruppo:first-child { margin-top: 4px; }

.valriga {
  display: grid; grid-template-columns: 92px 92px 1fr;
  gap: 12px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px dotted var(--line);
}
.valriga:last-child { border-bottom: 0; }
.valriga__data { font-size: 12.5px; color: var(--ink-50); font-variant-numeric: tabular-nums; }
.valriga__cifra { font-variant-numeric: tabular-nums; text-align: right; }
.valriga__fonte { font-size: 13px; color: var(--ink-70); }
.valriga__fonte a { color: var(--accent); text-decoration: none; }
.valriga__fonte a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .valriga { grid-template-columns: 78px 78px 1fr; gap: 8px; }
  .valblocco__ora { text-align: left; }
}

/* ------------------------------------------------------------------
   Lo scorrevole delle altre monete del paese.
   Niente JavaScript: overflow-x piu' scroll-snap fanno gia' tutto, e
   funziona col dito, con la rotella e con la tastiera. Un carosello a
   bottoni avrebbe voluto uno script per guadagnare niente.
   ------------------------------------------------------------------ */
.striscia {
  display: flex; gap: 14px; margin-top: 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 10px; scrollbar-width: thin;
}
.striscia:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.strcard {
  flex: 0 0 132px; scroll-snap-align: start;
  text-decoration: none; color: inherit; display: block;
}
.strcard__img {
  position: relative; display: block; width: 132px; height: 132px;
  border-radius: 50%; overflow: hidden; background: var(--paper-2, #f2efe9);
  border: 1px solid var(--line);
}
.strcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La moneta senza foto non lascia un buco bianco: lascia un cerchio con un
   trattino, che dice "non ce l'abbiamo" invece di sembrare rotto. */
.strcard__vuota {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--ink-30); font-size: 24px;
}

/* Il pallino di chi la possiede gia'. */
.strcard__hai {
  position: absolute; right: 8px; bottom: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper);
}

.strcard__anno {
  display: block; margin-top: 8px;
  font-size: 11.5px; letter-spacing: .06em; color: var(--ink-50);
  font-variant-numeric: tabular-nums;
}
.strcard__tit {
  display: block; font-size: 13px; line-height: 1.3; color: var(--ink-80);
  /* Due righe e poi taglia: le card devono restare alte uguali, se no la
     striscia balla mentre scorre. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.strcard:hover .strcard__tit { color: var(--accent); }

@media (max-width: 560px) {
  .strcard { flex-basis: 108px; }
  .strcard__img { width: 108px; height: 108px; }
}


/* La sfusa nel riquadro delle confezioni: e' la MONETA, non una scatola, e
   si vede subito che e' un'altra cosa. Tonda, piu' piccola del riquadro,
   senza il bordo squadrato che hanno le confezioni: la riga dice "qui non
   c'e' niente da aprire, c'e' solo la moneta". */
.row__pack--moneta {
  width: 46px; height: 46px; max-width: 46px; max-height: 46px;
  border-radius: 50%; box-shadow: none; background: transparent;
  object-fit: cover; opacity: .9;
}

/* Piedino della tabella delle varianti.
   Al posto di cinque paragrafi resta un asterisco sull'intestazione della
   colonna "Stima" e una riga sola qui sotto. Deve leggersi come una nota a
   pie' di pagina - piu' piccola del testo corrente e piu' chiara - non come
   un avviso: se pesa quanto la tabella, la tabella non si legge piu'. */
.note--xs { font-size: 12px; color: var(--ink-40); }

/* L'asterisco non e' un carattere del titolo: non deve entrare nella
   spaziatura in mono dell'intestazione ne' allargare la colonna. */
.ast {
  font-size: .85em;
  letter-spacing: 0;
  margin-left: .25em;
  vertical-align: super;
  line-height: 0;
}

/* Un collegamento che esce dal sito, dentro una riga di dati.
   In mezzo alle altre righe un dominio scritto come tutto il resto sembra
   testo e nessuno ci clicca: qui va sottolineato, in accento, e la freccetta
   accanto dice che si apre altrove. La sottolineatura sta staccata dalle
   lettere, se no i domini con le lettere discendenti (.org, .gov) la
   tagliano in mezzo. */
.link-out {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link-out:hover { text-decoration-thickness: 2px; }

/* Elementi di sola stampa: invisibili a schermo, li riaccende @media print
   qui sotto. La regola sta PRIMA del blocco di stampa apposta - se stesse
   dopo vincerebbe anche sulla carta, perche' una regola senza media query
   vale in tutti i media. */
.printonly { display: none; }

/* "Stampa la scheda" fra le targhette sotto il titolo: e' un comando, non
   una targhetta, e si distingue senza pesare. */
.tags__print {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ==========================================================================
   STAMPA — il foglio d'archivio
   ==========================================================================
   Quello che esce dalla stampante NON e' la pagina: e' una scheda da
   raccoglitore, una sola facciata A4, con i fori a sinistra e il quadrato
   vuoto dove attaccare la moneta. La pagina intera stampata era tre fogli
   di roba che sulla carta non serve.

   `@page { margin: 0 }` e' voluto: i fori vanno disegnati a 12 mm dal bordo
   del FOGLIO, e con un margine di pagina quella misura non sarebbe piu'
   raggiungibile. I margini se li fa il foglio con il suo padding, dove il
   controllo e' nostro e in millimetri veri.

   Nota per chi stampa: nella finestra di stampa conviene togliere
   "intestazioni e pie' di pagina" del browser, se no numero di pagina e
   indirizzo finiscono sopra il foglio.
   ========================================================================== */
@media print {

  @page { size: A4 portrait; margin: 0; }

  /* SOLO DOVE IL FOGLIO C'E' DAVVERO, e senza mai puntare al foglio stesso.
     Prima queste due regole erano scritte "spegni tutti i figli, poi
     riaccendi il foglio", e il foglio restava spento: `main:has(> .foglio)
     > *` vale (0,1,1) di specificita' contro (0,1,0) di `.foglio`, e fra due
     regole entrambe !important vince la piu' specifica. Risultato: pagina
     bianca. Con `:not(.foglio)` il foglio non viene MAI preso di mira, e
     non c'e' nessuna gara da vincere.

     L'aggancio a `:has(.foglio)` serve perche' senza svuoterebbe la stampa
     di tutte le altre pagine del sito, che il foglio non ce l'hanno. */
  body:has(.foglio) > *:not(main) { display: none !important; }
  body:has(.foglio) > main { display: block !important; margin: 0 !important; padding: 0 !important; }
  main:has(> .foglio) > *:not(.foglio) { display: none !important; }

  /* LA STAMPA DI UN'INTERA NAZIONE (`/fogli`): li' ogni foglio sta dentro un
     involucro, perche' accanto ha la casella «stampa questo» che a schermo
     serve e sulla carta no. Quindi la stessa regola di sopra, scritta per
     l'involucro: senza, `main:has(> .foglio)` non trova nessun foglio come
     figlio diretto e la pagina esce con i comandi stampati sopra il primo
     cartoncino. */
  main:has(> .foglio-box) > *:not(.foglio-box) { display: none !important; }

  /* `.noprint` era una classe usata in pagina e mai definita: fuori dai
     fogli non si notava, perche' la regola qui sopra spegne tutto quello
     che non e' un foglio. Dentro l'involucro invece la casella «stampa
     questo» restava, alta una ventina di pixel, e spingeva il cartoncino
     oltre la pagina: trentasei fogli uscivano in settantadue pagine, una
     piena e una quasi vuota. */
  .noprint { display: none !important; }

  /* Un foglio per pagina. Il salto va PRIMA di ogni foglio tranne il primo:
     con `page-break-after` sull'ultimo si stampa una pagina bianca in coda,
     che su quaranta fogli e' un foglio buttato ogni volta. */
  .foglio-box + .foglio-box { page-break-before: always; }
  /* Quelli tolti dalla stampa non lasciano il buco della loro pagina. */
  .foglio-box--escluso { display: none !important; }


  html, body {
    background: #fff !important;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Il foglio si VEDE solo in stampa (nella scheda della moneta) oppure
     dentro il suo involucro (in /fogli): qui si accende. Il disegno vero e
     proprio - misure, colonne, fori - sta nel blocco condiviso qui sotto,
     perche' l'anteprima a schermo deve mostrare LA STESSA COSA che esce
     dalla stampante. Il modello e' uno: quello della scheda della moneta. */
  .foglio { display: flex !important; }
}

/* ==========================================================================
   IL DISEGNO DEL FOGLIO D'ARCHIVIO - a schermo e in stampa
   Le stesse regole per tutte e due, o l'anteprima mente. Stavano dentro
   @media print perche' il foglio si stampava e basta; da quando esiste
   /fogli, che lo mostra prima di stamparlo, un secondo modello per lo
   schermo sarebbe stato un secondo modello da tenere allineato.
   Qui dentro NON si tocca `display`: a deciderlo sono `.printonly` sulla
   scheda della moneta (nascosto) e `.foglio-box .foglio` in /fogli.
   ========================================================================== */
@media screen, print {

  /* Colonna flessibile: la testata prende quel che le serve e il corpo si
     prende il resto. Prima il corpo aveva unaltezza calcolata a mano
     - 297 meno i margini meno "13mm di testata" - e quel 13 era una
     costante scritta a occhio: quando la testata e cresciuta con lanno
     grande e la targhetta della bandiera e diventata 21 mm, il corpo ha
     continuato a credersi piu corto di 8 mm e le schede piu piene
     sfondavano il foglio di un paio di millimetri, finendo su una seconda
     pagina quasi vuota. Con flex non ce nessun numero da tenere
     aggiornato. */
  .foglio {
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    padding: 14mm 14mm 10mm 26mm;   /* 26 a sinistra: la fascia dei fori */
    color: #000;
    font-size: 9.5pt;
    line-height: 1.38;
  }

  /* UN CARATTERE SOLO, UN CORPO SOLO, su tutto il foglio.
     Chiesto dal committente. La regola e' volutamente brutale - `.foglio *`
     con !important - perche' altrimenti le regole normali del sito
     rientrerebbero dalla finestra: `.label`, `h2`, `.serif-link` e la
     scrittura del bordo in monospaziato hanno tutte un corpo e una famiglia
     loro, e basta dimenticarne una perche' il foglio torni a essere un
     collage.
     Resta il neretto, che non e' ne un corpo ne una famiglia: e' l'unico
     modo rimasto per far risaltare il titolo e le intestazioni. */
  .foglio, .foglio * {
    font-family: var(--sans) !important;
    font-size: 9.5pt !important;
    font-style: normal !important;
  }

  /* --- I fori del raccoglitore ---------------------------------------
     Quattro anelli, misura europea: 6 mm di diametro, centro a 12 mm dal
     bordo sinistro, passo 80 mm, simmetrici rispetto alla meta' del foglio
     (148,5 mm). Quindi i centri stanno a 28,5 / 108,5 / 188,5 / 268,5 mm.
     Sono una TRACCIA da bucare: tratteggio sottile, niente pieno. */
  .foglio__foro {
    position: absolute;
    left: 9mm;                       /* 12 mm di centro - 3 mm di raggio */
    width: 6mm;
    height: 6mm;
    border: .5pt dashed #999;
    border-radius: 50%;
  }
  .foglio__foro:nth-child(1) { top: 25.5mm; }
  .foglio__foro:nth-child(2) { top: 105.5mm; }
  .foglio__foro:nth-child(3) { top: 185.5mm; }
  .foglio__foro:nth-child(4) { top: 265.5mm; }

  /* I SEGNI DI CENTRO, uno per COPPIA di fori.

     Servono a bucare davvero: i cerchi tratteggiati dicono DOVE andranno i
     buchi, ma nessuno riesce a centrare quattro cerchi a occhio dentro una
     perforatrice. La macchina buca due fori per volta e ha un riferimento
     di mezzeria sulla guida: si allinea al primo segno, si buca, si sposta
     il foglio sul secondo e si bucano gli altri due. La spaziatura fra i
     due fori la fa la macchina, non il foglio.

     Fori a 28,5 / 108,5 / 188,5 / 268,5 mm, quindi i centri delle coppie
     stanno a 68,5 e a 228,5. Partono dal bordo del foglio, che e dove il
     segno della macchina si legge, e arrivano a 19 mm: i cerchi occupano
     la fascia da 9 a 15 mm, quindi la riga li attraversa e sporge di 4 mm
     oltre. Cosi si vede da che parte va, invece di sembrare un trattino
     mozzato al bordo. Il testo comincia a 26 mm e non viene toccato.

     Grigio leggero: sono segni di servizio, e dopo aver bucato restano sul
     foglio per sempre. Devono vedersi quel tanto che basta ad allinearli e
     sparire quando si legge la scheda. */
  .foglio__centro {
    position: absolute;
    left: 0;
    width: 19mm;
    border-top: .5pt solid #c9c4bc;
  }
  .foglio__centro--a { top: 68.5mm; }
  .foglio__centro--c { top: 148.5mm; }
  .foglio__centro--b { top: 228.5mm; }

  .foglio__testa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8mm;
    padding-bottom: 2mm;
    margin-bottom: 5mm;
    border-bottom: .8pt solid #9a948c;
  }
  /* IN TESTA IL MARCHIO, non piu' l'indirizzo scritto in neretto.
     Un foglio staccato dal raccoglitore deve dire da dove viene, e un
     marchio lo dice a colpo d'occhio dove una riga di testo minuto voleva
     essere letta.

     E' `logo-Numira-Fixed.png`, quello della barra a pagina scorsa: dei tre
     marchi del sito e' l'unico fatto per una fascia bassa e larga (772 x
x     della bandiera che gli sta di fronte: piu' grande diventava
     l'intestazione della pagina invece della firma del foglio.

     LE DUE MISURE SONO DICHIARATE ENTRAMBE, e non e' pignoleria: il reset
     del sito mette `img, svg { max-width: 100% }`, e questo file e' l'unico
     piu' largo del suo contenitore - con la sola altezza fissata, quella
     regola gli taglia la larghezza e lo schiaccia in orizzontale. Con
     entrambe le misure in millimetri non c'e' niente da calcolare, ma
     `max-width: none` resta per sicurezza: 35,6 x 12 mm e' la proporzione
     del file al decimo di millimetro (2,9667 contro 2,9692).

     L'immagine si stampa anche con "grafica di sfondo" spenta - e' un
     contenuto, non un fondo - quindi il quadrato rosa viene su carta. */
  .foglio__logo { display: block; }
  .foglio__logo img {
    display: block;
    width: 35.6mm;
    height: 12mm;
    max-width: none;
  }

  /* L ANNO GRANDE accanto alla bandiera: e la sola eccezione al corpo unico
     del foglio, ed e voluta. In un raccoglitore si scorre con il pollice e
     si cerca l anno prima di ogni altra cosa; a 9,5 punti come tutto il
     resto non lo troverebbe nessuno. Serve piu specificita di `.foglio *`,
     che ha !important, quindi due classi. */
  /* La bandiera dentro una targhetta, come i riquadri del sito: fondo
     avorio --surface e filetto --rule-strong, gli stessi di .panel.

     ATTENZIONE, e importante: il FONDO su carta puo non uscire. Nella
     finestra di stampa "Grafica di sfondo" e spenta per impostazione
     predefinita, e con quella spenta i colori di sfondo non si stampano.
     Per questo la targhetta ha anche un BORDO vero: acceso il fondo si
     vede la targhetta piena, spento resta comunque un riquadro. Non si
     poteva fare in altro modo senza mettere unimmagine al posto del
     colore. */
  .foglio__testadx { display: flex; align-items: center; gap: 5mm; }
  .foglio__bandiera {
    display: block;
    padding: 1.6mm;
    background: #FAF8F2;
    border: .5pt solid rgba(25, 23, 19, .18);
  }
  .foglio .foglio__anno {
    font-size: 22pt !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    color: #000;
  }
  /* La bandiera al posto dell indirizzo: si riconosce il paese girando i
     fogli, che e quello che si fa in un raccoglitore. Il filetto serve per
     le bandiere con il bianco sul bordo - Italia, Finlandia, Malta - che
     senza si perderebbero nella carta. */
  /* La bandiera come sul sito: proporzione 3:2, ritaglio `cover` e il
     filetto sottile che tutte le bandiere hanno in pagina.

     Una differenza voluta: sul sito il filetto e un `box-shadow: inset`, qui
     e un `border` vero. Il box-shadow e considerato grafica di sfondo, e
     nella finestra di stampa "Grafica di sfondo" e SPENTA per impostazione
     predefinita: il filetto sparirebbe proprio dove serve di piu, perche le
     bandiere con il bianco - Italia, Finlandia, Malta - stampate senza
     contorno diventano due rettangoli chiari su carta bianca e non si
     capisce dove finiscono. Il bordo si stampa sempre.

     Niente `object-fit: cover`, che il sito invece usa: la bandiera del
     Vaticano e QUADRATA, e ritagliata a 3:2 perde meta dello stemma. Qui
     ogni bandiera tiene la sua proporzione, e la testata e centrata
     verticalmente perche le altezze non sono tutte uguali. */
  .foglio__bandiera img {
    display: block;
    width: 16mm;
    height: auto;
    border: .5pt solid rgba(25, 23, 19, .32);
  }

  /* Il corpo prende tutta laltezza che resta e la colonna di destra e una
     colonna flessibile: cosi le righe da riempire a penna si possono
     spingere in fondo al foglio invece di lasciare mezza pagina bianca
     sotto di loro. */
  .foglio__corpo { display: flex; gap: 8mm; align-items: stretch; height: calc(297mm - 14mm - 12mm - 13mm); }
  .foglio__sx { flex: 0 0 56mm; }
  .foglio__dx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

  /* --- Il posto della moneta -----------------------------------------
     50x50 mm netti: la misura del cartoncino portamoneta 2x2. Resta VUOTO,
     e' li' che va la moneta vera. Il tratteggio dice dove pinzare. */
  /* Il quadrato tiene la foto della moneta al vero: chi appoggia il
     cartoncino portamoneta lo posa esattamente sopra. Il tratteggio resta
     il riferimento per pinzare, e la scritta della misura sta in basso,
     dove il cartoncino la coprira. */
  .foglio__slot {
    position: relative;
    box-sizing: border-box;
    width: 50mm;
    height: 50mm;
    border: .75pt dashed #777;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .foglio__slotimg { width: 36mm; height: 36mm; object-fit: contain; margin-bottom: 3mm; }
  /* La didascalia sta DENTRO il quadrato, in basso: e la misura del
     quadrato, non della foto, e fuori sembrava riferita alla moneta. Ci sta
     perche la foto e stata stretta da 42 a 36 mm. */
  .foglio__slotcap {
    position: absolute;
    left: 0; right: 0; bottom: 2mm;
    text-align: center;
    font-weight: 400;
    letter-spacing: .06em;
    color: #aaa;
  }

  /* Quando il cartoncino copre il quadrato, questa e' l'unica cosa che
     permette di riconoscere il foglio senza staccare la moneta. */
  /* Le misure fisiche sotto la moneta: etichetta e valore su due righe,
     perche in 56 mm una riga sola manderebbe a capo "tre strati
     ottone-nichel / nichel / ottone-nichel, dorato" quattro volte. */
  .foglio__fisiche { margin-top: 5mm; }
  .foglio__f { padding: 1.4mm 0; border-top: .3pt solid #e2ded8; }
  .foglio__f span {
    display: block;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a948c;
  }
  .foglio__f b { display: block; font-weight: 500; color: #000; }

  /* --- Le varieta sul foglio -----------------------------------------
     Sotto le misure fisiche, nella colonna di sinistra: parlano
     dell'oggetto come il peso e il diametro, non della storia
     dell'emissione. Righe strette, che la colonna e' larga 56 mm. */
  /* IL TITOLO DELLE VARIETA' E' NERO come tutte le altre intestazioni del
     foglio. Era grigio (`--tenue`, il colore delle etichette) per una
     ragione che non c'e' piu': stava attaccato a "LA MONETA DA 2 EURO" e due
     titoli neri uno sotto l'altro se lo contendevano. Ora fra i due c'e'
     "CHI L'HA DISEGNATA", e il grigio faceva sembrare le varieta' una nota
     della biografia invece della terza sezione della colonna.

     La classe `.foglio__sottotit--tenue` e' stata rimossa: non la usava
     nessun altro.

     IL BLOCCO E' TUTTO DELLO STESSO COLORE E DI UN CORPO PIU' PICCOLO.
     Prima aveva tre specie dentro sei righe di testo - titolo nero in
     neretto, tipo in grigio maiuscolo, prosa nera - e in una colonna da 56
     mm quella era la parte piu' variegata del foglio. Ora e' un blocco solo:
     nero, 8,5 punti contro i 9,5 del resto.

     E' la SECONDA eccezione al corpo unico del foglio, dopo l'anno grande in
     testa, e come quella e' voluta e va scritta: le varieta' sono
     l'avvertenza a margine di una scheda tecnica - "guarda il bordo, non la
     faccia" - e un corpo appena piu' piccolo dice che si legge dopo i dati,
     non prima. Serve `!important` e due classi perche' la regola brutale
     `.foglio *` che impone i 9,5 punti ce l'ha anche lei.

     Il maiuscolo della riga del tipo resta: non e' un carattere diverso ne'
     un colore diverso, e' quello che delimita la riga dei codici (VARIETA' -
     SOLO SULLA COINCARD - 1-2% CIRCA DELLA TIRATURA) dalla prosa che segue. */
  .foglio .foglio__var, .foglio .foglio__var * { font-size: 8.5pt !important; }
  .foglio__var { padding: 2mm 0; border-top: .3pt solid #e2ded8; }
  /* NIENTE FILETTO SOTTO IL TITOLO della sezione: quel filetto sottile serve
     a separare una varieta' dalla successiva, e la prima non ha niente sopra
     da cui separarsi - a due millimetri dal filetto forte
     dell'intestazione faceva una doppia riga che sembrava un errore di
     stampa. Selettore fratello e non `:first-of-type`, perche' il titolo e'
     un `div` come i blocchi e sarebbe lui il primo del suo tipo. */
  .foglio__sottotit + .foglio__var { border-top: 0; padding-top: 0; }
  .foglio__var b { display: block; font-weight: 600; color: #000; }
  .foglio__vartipo {
    display: block;
    margin-top: .6mm;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
  }
  .foglio__var p {
    margin: 1.5mm 0 0;
    color: #000;
    text-align: justify;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Sotto il titolo, non piu sopra: e la didascalia del titolo, quindi
     attaccata a lui e staccata dalla descrizione. */
  .foglio__paese {
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a948c;
    margin-bottom: 3.5mm;
  }
  /* Il titolo non e piu grande: e in NERETTO e un po spaziato. Il
     committente ha chiesto un solo carattere e un solo corpo su tutto il
     foglio, e questo e il modo di tenere il titolo riconoscibile - quando
     uno sfoglia il raccoglitore deve trovarlo - senza cambiare misura. */
  /* Titolo tutto in maiuscolo: a corpo unico su tutto il foglio il neretto
     da solo non bastava a farlo leggere come un titolo. Maiuscolo e neretto
     insieme si vedono girando i fogli nel raccoglitore, che e quello che
     serve, e non cambiano il corpo. */
  .foglio__tit {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.3;
    margin: 0 0 .5mm;
  }
  /* LA DESCRIZIONE E' GIUSTIFICATA: su una scheda d'archivio il blocco di
     prosa e' l'unico paragrafo lungo del foglio, e a due margini dritti
     legge come una voce di catalogo invece che come una nota.

     Si puo' fare qui e non a schermo per una ragione di misura: la colonna
     di destra e' larga 106 mm e a 9,5 punti ci stanno una sessantina di
     caratteri per riga - abbastanza perche' la giustificazione distribuisca
     lo spazio senza aprire buchi fra le parole. Sotto i quaranta caratteri
     sarebbe il contrario, ed e' il motivo per cui la biografia nella colonna
     da 56 mm resta allineata a sinistra.

     `hyphens: auto` non e' un accessorio: senza sillabazione una parola
     lunga - "commemorazione", "anniversario" - va a capo intera e la riga
     che lascia dietro si allarga tutta. Chrome sillaba secondo la lingua
     dichiarata in `<html lang>`, che le pagine valorizzano.

     `text-wrap: pretty` esce: pretty e justify lavorano sulla stessa cosa e
     il secondo e' quello che il committente ha chiesto. */
  .foglio__desc {
    margin: 0 0 3mm;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* I dati: etichetta a colonna fissa e valore accanto, come nella scheda a
     schermo. Su carta la colonna e' stretta, quindi 26 mm. */
  /* 38 mm di etichetta: con un corpo solo su tutto il foglio le etichette
     sono grandi come i valori, e in 28 mm "AUTORE DEL DISEGNO" andava a capo
     mentre "DENOMINAZIONE" toccava il valore. */
  .foglio__dati { display: grid; grid-template-columns: 38mm 1fr; gap: 0 4mm; margin: 0; }
  /* ALLINEAMENTO: etichetta e valore hanno corpi molto diversi (6,5 pt
     contro 9), e allineati in alto la scritta piccola galleggia sopra la
     riga del valore. Il padding superiore delletichetta e maggiore quanto
     basta a portare le due basi di scrittura sulla stessa linea. Il filetto
     resta in cima a tutti e due, cosi le righe restano dritte. */
  /* Le etichette non vanno MAI a capo: in due righe la riga si alza e il
     valore accanto non e piu allineato con la sua etichetta. La colonna e
     larga 38 mm e la piu lunga - DATA DI EMISSIONE - ne occupa circa 32;
     "Autore del disegno" non ci stava e sul foglio si chiama "Autore". */
  .foglio__dati dt {
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #9a948c;
    padding: 1.1mm 0;
    border-top: .3pt solid #e2ded8;
  }
  .foglio__dati dd {
    margin: 0;
    font-weight: 500;
    padding: 1.1mm 0;
    border-top: .3pt solid #e2ded8;
  }
  .foglio__dati dd a { color: #000; text-decoration: none; }
  .foglio__dati dd .label { font-weight: 400; color: #9a948c; letter-spacing: .06em; }

  /* IL CAMPO NOTE GIUSTIFICATO: e' l'unico valore della tabella che sia un
     periodo intero e non un dato - il sommario della zecca - e insieme alla
     descrizione e alla biografia fa il terzo blocco di prosa del foglio.
     Gli altri valori restano allineati a sinistra: una data o una tiratura
     non hanno un secondo margine da chiudere.

     La colonna del valore e' larga 64 mm (106 di colonna, meno 38 di
     etichetta e 4 di distanza), cioe' una quarantina di caratteri: come per
     la biografia la sillabazione e' quello che tiene chiusi gli spazi fra
     le parole. */
  .foglio__nota {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Colori espliciti: sulla carta il nero e' nero. Le tinte del sito - che a
     schermo distinguono i valori dal contorno - stampate diventano un grigio
     azzurrino che costa inchiostro e si legge peggio. Restano grigi solo le
     etichette, che devono stare indietro. */
  .foglio__tit, .foglio__desc, .foglio__dati dd, .foglio__sottotit { color: #000; }
  .foglio__dati dd a { color: #000; }
  .foglio__bordo { letter-spacing: .02em; }

  /* La biografia dello scultore: prosa, non un dato. Il nome in evidenza
     perche' e' quello che si cerca scorrendo.

     GIUSTIFICATA ANCHE QUESTA, per scelta del committente: sul foglio i due
     blocchi di prosa - la descrizione e la biografia - hanno lo stesso
     trattamento, e due paragrafi allineati in modo diverso sulla stessa
     scheda si notano.

     Sta nella colonna di sinistra, larga 56 mm, cioe' una trentina di
     caratteri per riga: e' una misura corta per la giustificazione, e la
     sillabazione qui non e' un accessorio ma la condizione perche' funzioni
     - senza, una parola lunga che va a capo intera allarga tutta la riga che
     lascia dietro. `text-wrap: pretty` resta: in una colonna stretta
     l'ultima riga di una parola sola e' il difetto che si vede di piu'. */
  .foglio__bio { margin-top: 5mm; }
  .foglio__bio p {
    margin: 0;
    color: #000;
    text-align: justify;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* --- Le varianti, in forma corta -----------------------------------
     Righe strette apposta: su una scheda che deve stare in una facciata
     sola la Germania ne ha quindici, e con l'interlinea del testo normale
     non ci starebbero. Nome della confezione a sinistra, qualita' e
     marchio sotto, tiratura a destra incolonnata, e la spunta di chi ce
     l'ha gia'. */
  .foglio__varianti { margin-top: 5mm; }
  /* UNA RIGA per variante, non due. La Germania ne ha diciassette: con il
     nome sopra e la qualita sotto occupavano il doppio dellaltezza e la
     scheda non ci stava piu in una facciata. */
  /* La colonna della tipologia e LARGA FISSA, non "auto": con auto ogni
     riga la dimensionava sul proprio testo e le sigle - FDC, PROOF -
     partivano da un punto diverso su ogni riga. 42 mm bastano per
     "DIVISIONALE UFFICIALE", che e il nome piu lungo del catalogo (21
     caratteri) e quello che detta la misura. */
  .foglio__v {
    display: grid;
    grid-template-columns: 42mm 1fr auto 5mm;
    align-items: baseline;
    gap: 0 3mm;
    padding: .3mm 0;
    border-top: .3pt solid #e2ded8;
  }
  /* COLORI SCAMBIATI rispetto al resto del foglio, e a ragione: qui la
     tipologia - Sfusa, Folder, Divisionale - si ripete quasi uguale su ogni
     riga, mentre la qualita e il marchio sono quello che distingue un pezzo
     dallaltro. Il nero va su cio che si cerca, il grigio su cio che fa da
     etichetta. Maiuscolo perche a colpo docchio delimita la colonna. */
  .foglio__vnome {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9a948c;
    white-space: nowrap;
  }
  .foglio__vsub {
    font-weight: 500;
    letter-spacing: .02em;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .foglio__vtir {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #000;
  }
  .foglio__vmia { text-align: center; color: #000; }
  .foglio__bio b { font-weight: 600; }
  .foglio__zecca { margin-top: 5mm; }
  /* I DUE FILETTI FORTI del foglio - sotto la testata e sopra ogni
     intestazione - non sono piu neri ma dello stesso grigio delle etichette
     (#9a948c). Neri pesavano piu del testo che dovevano dividere: su una
     scheda tutta a un corpo la riga nera diventava la cosa piu scura della
     pagina, e lo sguardo ci cadeva sopra invece che sui dati.

     Le tre gradazioni ora sono in scala: #9a948c le divisioni di sezione,
     #e2ded8 i filetti fra una riga di dati e laltra, #bbb le righe da
     riempire a penna. */
  /* Le tre intestazioni: neretto e un filetto marcato sopra. A corpo unico
     e lunica gerarchia possibile, e basta - il foglio ha tre sezioni, non
     un indice. */
  /* Il filetto marca linizio della sezione, ma incollato al titolo lo
     schiacciava: serve aria fra la riga e la parola perche si legga come
     unintestazione e non come la continuazione della tabella di sopra.
     3,5 mm sopra il titolo e 2 mm sotto, prima delle righe di dati. */
  .foglio__sottotit {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: 3.5mm;
    margin-bottom: 2mm;
    border-top: .8pt solid #9a948c;
  }

  /* --- Le righe da riempire a penna -----------------------------------
     Quel che il catalogo non sa: quando l'hai presa, quanto l'hai pagata.
     Righe vuote, non caselle. */
  /* Con poche varianti resta spazio e le righe scendono in fondo al foglio;
     con diciassette la griglia le spinge subito sotto, senza sovrapporsi. */
  .foglio__mano { margin-top: auto; padding-top: 2mm; }
  /* Alte 9 mm: ci si scrive a penna, e una riga da 4 mm non basta. Le
     ultime due non hanno etichetta - sono la continuazione delle note. */
  .foglio__riga {
    display: flex;
    align-items: flex-end;
    gap: 3mm;
    height: 7.5mm;
    padding-bottom: 1mm;
    border-bottom: .4pt solid #bbb;
  }
  .foglio__riga span {
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a948c;
    white-space: nowrap;
  }

  /* --- Il frontespizio della nazione ---------------------------------
     Stessa carta degli altri fogli, contenuto tutto diverso: il nome grande
     e centrato, la bandiera sotto, il profilo dei confini a meta' pagina e i
     cenni in fondo. E' fatto per essere riconosciuto a raccoglitore aperto,
     non per essere letto. */
  .foglio--nazione .fz-corpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding-top: 6mm;
  }

  .fz-insegna { display: block; }

  /* Il nome e' un'insegna, non un titolo: maiuscolo spaziato, che di sbieco
     si legge prima. La sola cosa grande del foglio. */
  .foglio--nazione .fz-nome {
    margin: 0;
    font-size: 30pt !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.05;
  }

  .fz-bandiera { display: block; margin: 7mm auto 0; }
  .fz-bandiera img {
    width: 40mm;
    height: auto;
    border: .3pt solid #b9b2a6;
  }

  /* Il profilo: nessun fondo, nessun nome, solo la linea. Il colore lo
     prende dal testo (`currentColor` nel file), quindi in stampa e' nero. */
  .fz-mappa { margin: 0; }
  .fz-mappa img {
    width: 105mm;
    height: 105mm;
    object-fit: contain;
  }

  /* Il filetto sopra i cenni lo mette gia' `.foglio__sottotit`: metterne un
     altro qui faceva due righe parallele a un millimetro l'una dall'altra. */
  .foglio--nazione .fz-cenni {
    width: 100%;
    text-align: left;
  }
  /* PIU' LARGA DELLA COLONNA DEGLI ALTRI FOGLI, non piu' stretta: qui le
     etichette sono "TIRATURA COMPLESSIVA" e "VARIANTI A CATALOGO", non
     "ZECCA", e a 34 mm finivano sotto il valore accanto. Le etichette non
     vanno a capo (vedi `.foglio__dati dt`), quindi la colonna deve tenere
     la piu' lunga per intero. */
  .foglio--nazione .fz-dati { grid-template-columns: 44mm 1fr; }
  .foglio--nazione .fz-nota {
    margin: 3mm 0 0;
    text-align: justify;
    hyphens: auto;
  }
}

/* Le frecce dello scorrevole nella scheda moneta: stesse dei nastri del
   catalogo, ma piu' piccole perche' stanno in una testata di sezione e non
   in cima a una fascia intera. */
.rail-btn--sm { width: 34px; height: 34px; font-size: 13px; }

/* Con le frecce la barra di scorrimento diventa un doppione, e sotto una
   fila di monete tonde e' una riga dritta che non c'entra. Sparisce solo
   quella: il dito, la rotella e le frecce da tastiera continuano a
   scorrere, ed e' il motivo per cui la striscia resta focalizzabile. */
.striscia { scrollbar-width: none; }
.striscia::-webkit-scrollbar { display: none; }

/* Il filetto sotto lo scorrevole delle altre monete.
   Non e' un filetto suo: e' il bordo superiore del blocco di chiusura, e la
   distanza la dava .closer-pad, pensata per staccare la chiusura dal corpo
   della pagina. Dopo una fila di monete pero' quel vuoto le lasciava
   sospese: sopra la fascia il filetto sta a 16 px, sotto ne stavano quasi
   novanta. Qui la distanza diventa la stessa di sopra, e la fascia si chiude
   fra due righe alla stessa altezza. */
.closer-pad--serrato { padding-top: 16px; }

/* --- Presentazione del catalogo -----------------------------------------
   Il testo di apertura sotto il titolo: prosa da leggere, non un dato da
   scorrere, quindi misura di riga corta e interlinea larga. Sta nella stessa
   colonna del titolo e si ferma prima dei numeri a destra. */
/* A tutta larghezza, fuori dal blocco del titolo: prima stava nella colonna
   di sinistra e i numeri a destra la stringevano a meta pagina. */
.cat-intro { margin-top: 26px; }
.cat-intro p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-70);
  text-wrap: pretty;
}
.cat-intro p:last-child { margin-bottom: 0; }
.cat-intro b { font-weight: 500; color: var(--ink-90); }

/* Il blocco lungo in coda: tre colonne su schermo largo, una sotto i 900 px.
   A tre colonne i tre argomenti si leggono come tre voci di pari peso, che e'
   quello che sono - nessuno viene prima degli altri. */
.cat-testo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: 26px;
}
.cat-testo__t {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.cat-testo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-70);
  text-wrap: pretty;
}
.cat-testo em { font-style: italic; color: var(--ink-90); }

/* Il sommario del catalogo su una riga sola.
   `.lead` ha un tetto di 44 caratteri, giusto per un occhiello di apertura
   sotto un titolo grande; qui la frase ne conta 63 e si spezzava a meta.
   Il tetto salta solo dentro .cat-head: a delimitare la riga basta gia' la
   colonna, che finisce dove cominciano i due numeri. Su schermo stretto la
   frase torna ad andare a capo da se'. */
.cat-head .lead { max-width: none; }

/* --- Glossario ----------------------------------------------------------
   Voci a due o tre colonne secondo la larghezza. Ogni voce e' un blocchetto
   che si legge da solo: nome, eventuale sigla, definizione, e in coda quante
   monete del catalogo la usano. Il filetto in alto le separa senza
   disegnare una tabella - non sono righe di dati, sono definizioni. */
.gloss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 38px);
  margin-top: 26px;
}
.gloss__v { padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.gloss__t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.gloss__nome {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
/* La sigla accanto al nome: e' un'etichetta, non un titolo, quindi mono e
   piccola come le altre etichette del sito. */
.gloss__sigla {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.gloss__v p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-70);
  text-wrap: pretty;
}
.gloss__v b { font-weight: 500; color: var(--ink-90); }
.gloss__v i { font-style: italic; }
/* Il conteggio in coda: e' la misura di quanto un formato sia comune, e va
   letto dopo la definizione, non prima. */
.gloss__n {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* I collegamenti dentro i blocchi di testo: senza una veste propria
   sparivano nella prosa, e sulla scheda paese sono i rimandi alla moneta
   piu' rara e a quella piu' comune - cioe' le due che uno vuole aprire. */
.cat-testo a, .cat-intro a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* La bandiera sopra lanno, centrata su quella colonna.
   Il blocco dellanno diventa cosi un piccolo stemma: bandiera, cifra,
   etichetta, uno sotto laltro e in asse. Gli altri due numeri restano
   allineati a sinistra come sempre - centrarli tutti li farebbe ballare,
   perche le etichette hanno lunghezze molto diverse.

   La regola con `flex` serve solo alla ricaduta: se un paese non avesse
   nessuna emissione la colonna dellanno non ci sarebbe, e la bandiera
   tornerebbe in una riga sua a destra invece di sparire. */
/* La bandiera esce dal flusso: senza, la colonna dei numeri diventa piu alta
   della colonna del titolo, e siccome la testata allinea in basso e il
   TITOLO a scendere. Il risultato era che su una scheda paese il nome stava
   ventiquattro pixel piu giu dalle briciole che sul catalogo, per una
   bandiera che non ha niente a che vedere con lui.
   Fuori dal flusso la colonna torna alta quanto i suoi numeri, e la bandiera
   galleggia sopra senza spostare niente. */
/* Il centrato adesso vale per tutte le colonne dei numeri, non solo per
   quella che aveva la bandiera: la regola generale sta piu in basso e questa
   non serve piu. */
.country-head__facts > .country-head__bandiera { flex: 0 0 100%; display: flex; justify-content: flex-end; }
/* Proporzione naturale, non ritaglio a 3:2: la bandiera del Vaticano e
   QUADRATA, e con `object-fit: cover` perdeva meta dello stemma. Qui ogni
   bandiera tiene la sua forma, e la riga sotto e allineata al fondo quindi
   unaltezza diversa non sposta niente. */
/* Lo stacco sotto la bandiera fa due cose insieme: le da aria rispetto
   allanno e, siccome la colonna e allineata in basso, la solleva. 42 px la
   portano a meta del titolo del paese, che e il punto in cui i due elementi
   grandi della testata - il nome a sinistra e la bandiera a destra - si
   guardano invece di stare uno sopra laltro. */
/* LA BANDIERA E ANCORATA IN ALTO A DESTRA DELLA TESTATA, non sopra la
   colonna dei numeri.

   Prima stava sopra il suo numero, a 42 px di distanza. Ma quella distanza
   si misura dal blocco dei numeri, che essendo allineato in basso sta a
   unaltezza diversa su ogni pagina: sulla scheda paese la testata e alta
   perche il sommario occupa due righe, su quella della zecca e bassa. Stesso
   codice, stessa regola, e la bandiera finiva a meta titolo su una pagina e
   sopra il titolo sullaltra.

   Ancorata al bordo alto della colonna dei fatti - che si allunga fino in
   cima alla testata - la sua posizione non dipende piu da quanto e lungo il
   testo a sinistra: sta sempre alla stessa altezza del titolo, su qualunque
   pagina. */
.country-head__facts { position: relative; align-self: stretch; }
.country-head__facts .country-head__bandiera {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
/* `max-width: none` non e un vezzo: la bandiera sta in un riquadro assoluto
   largo quanto la colonna che lospita, e la regola generale
   `img { max-width: 100% }` la schiacciava dentro quella larghezza. Sulla
   scheda paese la colonna e "PRIMA EMISSIONE" e ci sta comoda; sulla scheda
   zecca e "PAESI", quaranta pixel, e la stessa bandiera usciva 36 px invece
   di 56. Due pagine con lo stesso codice e due bandiere diverse. */
.country-head__bandiera img {
  display: inline-block;
  width: 56px;
  max-width: none;
  height: auto;
  box-shadow: inset 0 0 0 1px rgba(25, 23, 19, .22);
}

/* L'occhiello in testa al sommario del paese: codice e anno di ingresso
   nell'euro. Piu' chiaro del resto della frase perche' e' un'etichetta, non
   una cosa che si legge - ma sulla stessa riga, perche' da solo sopra il
   titolo era una riga che si saltava. */
.lead__occhiello { color: var(--ink-50); white-space: nowrap; }

/* Occhiello e titolo che lo segue: l'occhiello e' una riga di dieci pixel e
   il titolo un serif da trenta, e senza stacco il primo sembra appoggiato
   sul secondo. Il riquadro della zecca aveva la sua regola (.h2--mint),
   quello delle ordinarie no e i due testi si toccavano. Regola generale:
   vale ovunque, e la prossima volta non serve ricordarsene. */
.eyebrow + .h2 { margin-top: 14px; }

/* La tabella delle ordinarie.
   Quattro colonne stirate su tutta la larghezza del pannello mettevano
   trecento pixel fra un prezzo e l'altro: i tre numeri della stessa riga
   vanno CONFRONTATI, e per confrontarli devono stare vicini. Con un tetto
   di larghezza le colonne si stringono sul contenuto e la riga si legge in
   un colpo d'occhio. Il contenitore continua a scorrere sotto i 620 px. */
.divtab { max-width: 620px; }

/* L'intestazione dell'anno era allineata a destra come quelle dei prezzi,
   ma sotto ci sono anni allineati a sinistra: la parola ANNO galleggiava
   sopra la colonna sbagliata. */
.divtab thead th:first-child { text-align: left; }

/* --- Varieta' ed errori di conio ---------------------------------------
   Ogni voce e' un blocchetto con il filetto sopra, come le voci del
   glossario: si leggono una alla volta e non formano una tabella, perche'
   non sono dati confrontabili fra loro. */
/* Ogni voce e un blocchetto separato dal filetto. Il primo non ha il
   filetto: quello sopra ce lha gia il titolo della sezione, e due righe a
   sedici pixel di distanza sembrano un errore di stampa. */
.varieta { padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--rule-strong); }
.varieta:first-of-type { margin-top: 18px; padding-top: 0; border-top: 0; }
.varieta__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.varieta__nome { font-family: var(--serif); font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }

/* I dati brevi separati da un punto e non da un vuoto: con il solo spazio
   sembravano tre etichette staccate invece di una riga sola. */
.varieta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.varieta__meta span + span::before { content: "·"; margin-right: 10px; color: var(--ink-30); }
/* Due paragrafi di seguito: che cosa e, e come la si riconosce. Il secondo
   era un riquadro con la sua etichetta, e spezzava in due un discorso che si
   legge meglio intero. */
.varieta__d { margin: 12px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-80); text-wrap: pretty; }
/* La chiusa sul prezzo si stacca dallultima voce: e una nota sulla sezione
   intera, non la coda dellultima varieta. */
#varieta > .note--xs { margin-top: 20px; }

/* Altezza minima della testata: i numeri sono allineati in basso, quindi la
   loro posizione dipende da quanto e' alto il testo a sinistra. Sulla scheda
   paese il sommario occupa tre righe, su quella della zecca due, e le cifre
   cadevano a ventisei pixel di distanza fra una pagina e l'altra.
   Con un pavimento comune le testate corte si allungano fino a questa misura
   e i numeri stanno sempre allo stesso punto; quelle piu' lunghe crescono
   come prima, perche' e' un minimo e non un blocco. */
/* Il pavimento di 228 px non serve piu: adesso l altezza la fissa il titolo,
   che occupa due righe su ogni pagina. Tenerlo vorrebbe dire due misure che
   si contendono la stessa cosa. */
.country-head { min-height: 0; }

/* SCHERMO STRETTO: la testata va a capo e le due colonne si impilano.
   Li' la bandiera in assoluto non ha piu' senso - il suo riferimento e' la
   colonna dei fatti, che scivola sotto il testo e si accorcia, e la bandiera
   finiva stampata sopra "ATTIVA DAL". Torna nel flusso, sopra i numeri, e
   l'altezza minima della testata sparisce perche' con le colonne impilate
   non c'e' piu' niente da allineare. */
@media (max-width: 760px) {
  .country-head { min-height: 0; }
  .country-head__facts .country-head__bandiera {
    position: static;
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
  }
}

/* Il titolo parte sempre dall'alto.
   La testata allinea in basso perche' i numeri devono stare sulla riga del
   sommario; ma da quando c'e' un'altezza minima, una colonna di testo piu'
   corta di quella misura affondava sul fondo e il nome partiva ventisei
   pixel piu' giu' che sul catalogo. Con `align-self: stretch` la colonna di
   sinistra occupa tutta l'altezza e il titolo resta in cima, mentre i numeri
   a destra continuano a stare in basso. */
.country-head__text { align-self: stretch; }

/* Il titolo occupa due righe perche CE NE SONO DUE, non perche laltezza sia
   riservata: riservarla lasciava un buco sotto il nome. Sulle schede la
   seconda riga e un dato vero - "2 euro commemorative" per il paese, il
   paese della sede per la zecca - come sul catalogo e "paese per paese".
   Il min-height resta come rete: se un giorno una seconda riga mancasse,
   laltezza non cambierebbe lo stesso.

   VECCHIA NOTA, tenuta perche spiega il numero:
   Sul catalogo il titolo e' composto su due righe ("Tutte le emissioni, /
   paese per paese"); su una scheda paese e' una parola sola. Il risultato
   era che le pagine di primo livello e quelle di dettaglio avevano la
   testata alta in modo diverso, e i numeri a destra cadevano a ventisette
   pixel di distanza fra loro.

   Si riserva l'altezza invece di allungare il testo: "Italia" e' una parola
   sola e non c'e' niente di vero da aggiungerci per farne due righe. Lo
   spazio resta vuoto sotto il nome, che e' esattamente cio' che serve per
   far cadere il sommario e i numeri allo stesso punto su ogni pagina.
   2.04em = due righe alla line-height di .display, che e' 1.02. */
.cat-head__text .display,
.country-head__text .display { min-height: 2.04em; }

/* La seconda parte del titolo va a capo per costruzione, non per larghezza.
   Sul catalogo il titolo si spezza da solo perche' e' lungo; su una scheda
   "Zecca di Roma Italia" ci sta su una riga, e allora l'altezza riservata
   restava un buco. Con display:block la riga in accento e' sempre la
   seconda, su qualunque nome. */
.cat-head__text .display .em--a,
.country-head__text .display .em--a { display: block; }

/* Il sommario ha la stessa misura di riga su ogni testata.
   Senza, la larghezza dipende da quanti numeri ci sono a destra: due sul
   catalogo, tre su una scheda paese, e la stessa frase andava a capo in un
   punto diverso. Con una misura fissa il numero di righe dipende solo da
   quanto e' lungo il testo, che e' una cosa che si puo' scrivere. */
.cat-head__text .lead,
.country-head__text .lead { max-width: 62ch; }

/* La cifra centrata sulla sua etichetta.
   L'etichetta e' quasi sempre piu' larga del numero - "21" sotto "ZECCHE
   CENSITE" - e allineati a sinistra il numero sembrava spostato. Centrare
   e' la cosa giusta: sono un dato e il suo nome, e stanno uno sopra l'altro.

   Il text-indent non e' un aggiustamento a occhio: l'etichetta e' in mono
   con letter-spacing .16em, e lo spazio in coda all'ultima lettera fa
   sembrare il testo spostato a sinistra di mezzo carattere anche quando e'
   centrato per davvero. E' la stessa compensazione gia' usata dalla fascia
   dei numeri in home. */
.cat-head__counts > div,
.country-head__facts > div { text-align: center; }
.cat-head__counts .stat__l,
.country-head__facts .stat__l { text-indent: .16em; }

/* ============================================================
   Modulo di candidatura partner
   ============================================================ */

/* A tutta larghezza la griglia auto-fit dei campi farebbe quattro colonne su
   uno schermo grande, e un modulo largo un metro si compila in diagonale.
   Settecentoventi pixel tengono due colonne piene e non una di piu'. */
.form-lim { max-width: 720px; }

/* La trappola per i moduli automatici. Non usa .sr-only apposta: quello che
   .sr-only nasconde alla vista lo consegna intatto ai lettori di schermo, ed
   e' esattamente il campo che un cieco compilerebbe in buona fede facendosi
   scartare la candidatura. display:none lo toglie a tutti e due. */
.trappola { display: none; }

/* ============================================================
   I due segni sulle righe delle varianti, e le finestre che aprono
   ============================================================ */

/* Una cella a se', dopo la colonna "TUE": li' si legge che cosa c'e' gia',
   qui si comanda. Larghezza fissa e allineamento a destra, cosi' i segni di
   tutte le righe cascano sulla stessa verticale e si scende cliccando senza
   doverli cercare uno per uno. */
.row__act {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  width: 52px;
  margin-left: 14px;
}

/* Bottoni svestiti: niente fondo, niente bordo, niente riempimento. Dentro
   una riga di tabella un bottone vestito da bottone peserebbe piu' del dato
   che accompagna. */
.row__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--ink-30);
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.row__ico:hover,
.row__ico:focus-visible { color: var(--accent); }
/* Il cuore vira al rosso gia' passandoci sopra: il colore che prende dopo il
   clic si vede prima di darlo. */
.row__ico[data-wish]:hover,
.row__ico[data-wish]:focus-visible { color: var(--danger); }
/* Il cuore di una moneta che stai cercando e' ROSSO, non verde. Il verde su
   questa tabella vuol dire una cosa sola - ce l'hai - e sta gia' nel cerchio
   della quantita' una casella prima: due segni verdi vicini con due
   significati diversi si guardano e non si distinguono. */
.row__ico--on { color: var(--danger); cursor: default; }
/* Il posto del cuore quando il cuore non c'e' - la moneta e' gia' in
   collezione. Vuoto ma largo uguale, se no il piu' scivolerebbe a destra
   solo sulle righe possedute. */
.row__ico--vuoto { width: 16px; }
.ico-riga { width: 16px; height: 16px; display: block; }

/* La finestra. <dialog> porta gia' il centraggio e lo sfondo scuro dietro:
   qui si toglie solo la cornice di sistema e si rimette il foglio del sito. */
.modale {
  border: 0;
  padding: 0;
  background: none;
  max-width: min(560px, calc(100vw - 32px));
  width: 100%;
  color: var(--ink-90);
}
.modale::backdrop { background: rgba(20, 18, 14, .55); }
.modale__box {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-mid);
  border-radius: 2px;
  padding: clamp(24px, 3.5vw, 36px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
/* La croce di chiusura sta nell'angolo e non spinge il titolo: e' fuori dal
   flusso apposta, se no la riga dell'occhiello nascerebbe corta. */
.modale__x {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-30);
  cursor: pointer;
}
.modale__x:hover,
.modale__x:focus-visible { color: var(--ink-90); }

/* Dentro la finestra i campi si affiancano prima: la griglia generale
   pretende 250px per colonna, che su 490 di finestra fa una colonna sola e
   un modulo alto due schermi. A 200 ne stanno due, e la finestra si chiude
   in una schermata. */
.modale .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: 18px;
}

/* Quante ne hai, dentro un cerchio verde. Prima era una spunta seguita da
   "x1": la spunta e il numero dicevano la stessa cosa - ce l'hai - e messi in
   fila si leggevano come una formula. Il cerchio dice l'appartenenza e il
   numero dice quante, senza ripetersi.

   min-width e non width: due cifre non devono sfondare il cerchio, si allarga
   in una pastiglia e resta della stessa altezza di tutte le altre righe. */
.qta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

/* L'etichetta che spezza un elenco per mese. Sta sopra il gruppo, non dentro
   una riga: e' un titolo, non un dato. Il filetto sotto la stacca dal blocco
   precedente senza pesare come un'intestazione vera. */
.label--mese {
  display: block;
  margin: 26px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-50);
}
.label--mese:first-child { margin-top: 0; }

/* La testata del mese nello storico porta anche il conto: nome a sinistra,
   pezzi e spesa a destra, sulla stessa riga del filetto. */
.label--mese--conto {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.mese__conto { color: var(--ink-40); }

/* ============================================================
   LA TESTATA, E POI TUTTO IL RESPONSIVE
   ------------------------------------------------------------
   Fino a qui il sito aveva tre punti di rottura in tutto: due a 560 px per
   due componenti, uno a 760 per la testata delle schede paese. Il resto
   reggeva per costruzione - griglie auto-fit, clamp() sui corpi, misure in
   percentuale - e infatti a 390 px non sbordava niente, ma "non sborda" non
   vuol dire "si legge". Qui si sistema quello che si legge male.
   ============================================================ */

/* --- Il blocco delle tue cose, staccato dal menu del sito --------------- */
/* Menu e area riservata erano due gruppi di parole identiche una accanto
   all'altra, separati da ventisei pixel contro quattordici: si leggevano
   come un elenco unico di otto voci. Un filetto li divide per quello che
   sono - a sinistra il sito, a destra tu. */
.topbar__auth {
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid var(--rule-mid);
}

/* La faccia in barra e' piu' piccola di quella del profilo: ventiquattro
   pixel stanno sulla riga di un maiuscoletto da dieci, trentadue no. */
.avatar--nav { width: 24px; height: 24px; }
.avatar--nav .avatar__iniziali { font-size: 11px; }
/* La voce del profilo tiene la sua faccia stretta: sei pixel contro i venti
   che la staccano dalla voce prima. */
.topbar__io { gap: 7px; }

/* --- Barra: da otto voci in fila a due righe ---------------------------- */
@media (max-width: 1080px) {
  .topbar__nav { gap: 8px 18px; }
  .topbar__auth { gap: 14px; padding-left: 18px; }
}

/* Sotto i 980 le due file di parole non ci stanno piu' su una riga sola.
   Invece di stringerle fino a farle illeggibili, il menu del sito scende
   sotto e prende tutta la larghezza: sopra restano il marchio e le tue
   cose, che sono quelle che si toccano piu' spesso. */
@media (max-width: 980px) {
  .topbar__inner { gap: 10px 18px; padding-block: 12px; }
  .topbar__spacer { display: none; }
  .topbar__nav {
    order: 3;
    flex-basis: 100%;
    /* Centrato, perche' su questa riga ci sta da solo: allineato a sinistra
       lasciava un vuoto a destra che sembrava una voce caduta. */
    justify-content: center;
    gap: 8px 20px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
  }
  .topbar__auth {
    margin-left: auto;
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .topbar__nav { font-size: 10px; gap: 7px 15px; }
  .topbar__auth { gap: 12px; }
  .topbar__auth a:not([class*="btn--nav"]) { font-size: 10px; letter-spacing: .1em; }
  .btn--nav { font-size: 12.5px; padding: 8px 15px; }
}

/* --- Le righe di elenco -------------------------------------------------- */
/* Nome a sinistra e numeri a destra funziona finche' c'e' larghezza. Sotto i
   560 il nome resta schiacciato in centotrenta pixel e i numeri gli stanno
   addosso: il gruppo dei valori scende sotto il nome e prende la riga sua.
   Le larghezze fisse delle celle RESTANO, perche' sono quelle a tenere i
   numeri incolonnati da una riga all'altra: cambia solo il verso, da destra
   a sinistra, che e' il lato da cui si legge. */
@media (max-width: 560px) {
  .row { gap: 6px 14px; padding: 15px 0; }
  .row__main { flex: 1 1 100%; }
  .row__data {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
  }
  .row__mint, .row__zecca, .row__price { text-align: left; }
  .row__own { text-align: left; }
  .row__act { margin-left: 0; }
}

/* --- Testate di pagina --------------------------------------------------- */
/* I numeri della testata stanno a destra del titolo finche' ci sta il
   titolo. Quando vanno a capo, `margin-left: auto` li spingeva contro il
   bordo destro e restavano appesi la' da soli, lontani dalla riga a cui si
   riferiscono. */
@media (max-width: 760px) {
  .cat-head { gap: 18px 32px; }
  .cat-head__counts,
  .country-head__facts { margin-left: 0; }
  .cat-head__counts { gap: 20px 32px; flex-wrap: wrap; }
  .cat-head__text .display,
  .country-head__text .display { min-height: 0; }
}

/* --- La fascia dei numeri ------------------------------------------------ */
/* Cinque celle su due colonne lasciano l'ultima da sola con mezza riga
   vuota accanto e un filetto verticale in mezzo al niente. L'orfana prende
   tutta la riga: la fascia si chiude diritta. */
@media (max-width: 560px) {
  .cells--stats > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: 22px 10px 24px; }
}

/* --- Il modulo di candidatura e le finestre ------------------------------ */
@media (max-width: 560px) {
  .modale__box { padding: 22px 18px; max-height: calc(100vh - 24px); }
  .modale { max-width: calc(100vw - 20px); }
}

/* Due celle dell'elenco zecche che nella misura standard non ci stavano.
   La colonna dei valori ha larghezze FISSE apposta - sono quelle a tenere i
   numeri incolonnati fra una riga e l'altra - ma "1928-oggi" e "nessuna
   emissione diretta" sono testo, non cifre, e in sessantadue pixel
   sbordavano: su un telefono spingevano la pagina a 482 px di larghezza su
   390 di schermo, cioe' la facevano scorrere di lato. */
.row__zecca--periodo { width: 96px; }
.row__zecca--testo {
  width: auto;
  max-width: 190px;
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}

/* Il nome della moneta non si taglia sul telefono.
   Su schermo largo la riga resta alta una riga sola e il titolo troppo lungo
   finisce con i puntini: e' una scelta, perche' accanto ha i numeri e la
   tabella deve restare pettinata. A 390 px pero' il nome E' la riga - i
   numeri sono scesi sotto - e mozzarlo a meta' vuol dire togliere l'unica
   cosa che si legge. Due righe, e poi i puntini. */
@media (max-width: 560px) {
  .row__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16.5px;
    line-height: 1.25;
  }
  .row__name--lg { font-size: 18px; }
}

/* La barra e' appiccicata in cima, quindi un collegamento interno - "#varianti",
   "#candidatura" - portava il titolo esattamente SOTTO la barra, che se lo
   mangiava. Lo scarto e' generoso perche' la barra e' alta il doppio da
   quando, sotto i 980 px, il menu del sito scende su una riga sua. */
html { scroll-padding-top: 96px; }
@media (min-width: 981px) { html { scroll-padding-top: 84px; } }

/* ============================================================
   La colonna di sinistra della scheda moneta
   ------------------------------------------------------------
   NON SEGUE PIU' LO SCORRIMENTO. Da quando ci sono dentro i dati della
   moneta - data, tiratura, autore - non e' piu' una spalla che accompagna
   la lettura: e' meta' del contenuto. Incollata sarebbe alta millecinquecento
   pixel dentro una finestra da settecento, e per arrivare in fondo ci
   vorrebbe una barretta di scorrimento sua, dentro la pagina.

   La regola che spegne l'animazione resta, e resta il motivo per cui c'e':
   `.rise` usa `animation-timeline: view()`, cioe' un'animazione guidata
   dallo scorrimento che misura dove sta l'elemento nella finestra. Se quello
   stesso elemento e' anche `position: sticky` la sua posizione dipende a sua
   volta dallo scorrimento, e l'incollatura non scatta piu': misurato, si
   fermava a -96 px dal bordo invece che a +96. Era il difetto per cui,
   scorrendo, la foto scivolava via e il testo le finiva addosso.

   Oggi la colonna non e' piu' incollata e il difetto non puo' ripresentarsi,
   ma la rete resta: se un domani si torna a incollarla, l'animazione qui e'
   gia' spenta.
   ============================================================ */
.sticky-col {
  /* TORNA A SEGUIRE LO SCORRIMENTO, adesso che ci sta dentro la sola foto.
     Il problema di prima era la stazza: con i dati della moneta dentro, la
     colonna era alta millecinquecento pixel in una finestra da settecento e
     il fondo non si raggiungeva. Da quando tutto il resto e' sceso nella
     colonna di destra qui restano la foto e la sua didascalia - meno di
     cinquecento pixel - e incollarla e' di nuovo la cosa giusta: la moneta
     resta sotto gli occhi mentre si leggono varianti, zecca e misure, e la
     colonna di sinistra non si svuota per duemila pixel di pagina. */
  position: sticky;
  top: 96px;
  animation: none;
  animation-timeline: auto;
}

/* Sotto i 900 px le due colonne diventano una sola: la foto e' semplicemente
   la prima cosa della pagina, e non c'e' piu' niente accanto a cui restare. */
@media (max-width: 900px) {
  .sticky-col { position: static; }
}

/* ============================================================
   Il menu a panino, sotto i 700 px
   ------------------------------------------------------------
   Cinque voci ci stanno anche su un telefono, e infatti fin qui andavano a
   capo e si sistemavano da sole. Ma quella riga in piu' e' un ventesimo di
   uno schermo alto e stretto occupato da cose che nessuno guarda mentre
   legge una scheda - e sopra c'e' gia' la barra, che e' appiccicata.

   SI ACCENDE SOLO SE C'E' IL JAVASCRIPT. La classe `js-menu` la scrive
   app.js sull'elemento radice appena parte, e tutto quello che sta qui sotto
   dipende da lei: senza script il menu resta quello di prima, aperto e a
   capo. Un comando che non funziona e' peggio di un comando che non c'e'.
   ============================================================ */

/* Tre filetti da un pixel, come tutte le altre separazioni della veste. */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}
.burger__l {
  display: block;
  width: 19px;
  height: 1px;
  margin-inline: auto;
  background: var(--ink-70);
  transition: transform .2s var(--ease), opacity .15s;
}
.burger:hover .burger__l { background: var(--ink); }

/* Aperto, i tre filetti diventano una croce: e' il bottone stesso a dire
   come si richiude, senza aggiungere una seconda X da qualche parte. */
.burger[aria-expanded="true"] .burger__l:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__l:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__l:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 700px) {
  .js-menu .burger { display: inline-flex; }

  /* Il menu sparisce dalla barra e diventa un pannello che si apre sotto.
     Le voci vanno in colonna e ognuna prende una riga alta abbastanza da
     centrarci un dito: undici pixel di maiuscoletto sono da leggere, non da
     colpire. */
  .js-menu .topbar__nav { display: none; }
  .js-menu .topbar__nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    order: 4;
    flex-basis: 100%;
    margin-top: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--rule);
  }
  .js-menu .topbar__nav.is-open a {
    padding: 13px 2px;
    border-bottom: 1px solid var(--rule);
  }
  .js-menu .topbar__nav.is-open a:last-child { border-bottom: 0; }
  /* La voce corrente qui non e' sottolineata ma marcata a sinistra: sotto
     una voce che occupa tutta la riga, un filetto corto non si vede. */
  .js-menu .topbar__nav.is-open .is-current {
    color: var(--accent);
    box-shadow: inset 2px 0 0 var(--accent);
    padding-left: 12px;
  }
}
/* La sottolineatura della voce corrente vale nella barra, non nel pannello:
   la regola generale ha specificita' (0,2,0) e batteva quella del pannello,
   che ne aveva altrettanta ma arrivava prima. Qui si spegne per il solo
   pannello aperto. */
@media (max-width: 700px) {
  .js-menu .topbar__nav.is-open .is-current {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 13px;
  }
  .js-menu .topbar__nav.is-open .is-current:last-child { border-bottom: 0; }
}


/* La griglia dei paesi, su telefono, va a DUE colonne e non a una.
   La griglia generale chiede 230 px per colonna, e a 354 di larghezza utile
   ne concede una sola: venticinque paesi diventavano venticinque schermate
   di scorrimento per una pagina che serve a scegliere. Il disco ha gia' un
   tetto di 170 px e in mezza colonna ci sta intero, senza rimpicciolirsi. */
@media (max-width: 560px) {
  .countries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
}



/* La bandiera della testata, su schermo stretto: ACCANTO AL TITOLO.
   E' il posto dove uno la cerca - il nome del paese e la sua bandiera sono
   la stessa cosa detta in due modi - e sulla riga dei numeri, dove stava
   prima, rubava spazio a tre cifre che ne hanno gia' poco.

   Ancorata alla testata intera e non alla colonna dei numeri: per questo la
   colonna qui rinuncia al proprio `position: relative`, che se no farebbe da
   riferimento e la bandiera resterebbe la' dentro. E la colonna del testo si
   riserva settanta pixel a destra, cosi' un nome lungo - Lussemburgo, Paesi
   Bassi - non ci finisce mai sotto. */
@media (max-width: 760px) {
  .country-head { position: relative; }
  .country-head__facts { position: static; padding-right: 0; gap: 16px 26px; }
  .country-head__text { padding-right: 70px; }
  .country-head__facts > .country-head__bandiera {
    position: absolute;
    top: 4px;
    right: 0;
    transform: none;
    margin: 0;
  }
}

/* La barra dei filtri, su schermo stretto.
   ------------------------------------------------------------
   Tre difetti, uno dentro l'altro.

   `margin-left: auto` spinge il gruppo delle pillole a destra, ed e' giusto
   finche' sta sulla stessa riga del conteggio. Quando va a capo pero' quella
   spinta resta: il gruppo finiva rientrato di mezza pagina.

   Poi, anche portandolo a sinistra, le pillole non partivano dal bordo: le
   precedeva l'etichetta ORDINA, che le spostava di una cinquantina di pixel.
   Due righe che cominciano in due punti diversi si vedono. L'etichetta qui
   sparisce alla vista ma NON al lettore di schermo - resta nel documento,
   nascosta come si nasconde un testo che serve solo a chi ascolta - perche'
   tre pillole senza un titolo, dette a voce, sono tre parole a caso.
   Chi guarda non ne ha bisogno: Anno, Tiratura e Prezzo accanto a un elenco
   si spiegano da sole.

   Infine le pillole erano alte trentuno pixel. Un dito ne vuole almeno
   trentasei, e due pixel di riempimento in piu' bastano.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .toolbar { gap: 8px 16px; padding: 14px 0; }
  .chips { margin-left: 0; width: 100%; gap: 8px 10px; }
  .chips > .label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .chip { padding: 9px 15px; }
}

/* Un valore lungo dentro un riquadro della colonna: etichetta sopra, testo
   sotto. La riga puntinata funziona con un valore corto - "8,50 g", "2014" -
   ma con tre righe di nomi o una nota sulla tiratura il puntinato resterebbe
   appeso in mezzo al niente. */
.spec-testo {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-90);
  text-wrap: pretty;
}

/* I quattro dati in testa alla scheda moneta. Da quando stanno a tutta
   larghezza non possono piu' essere due colonne: `cells--pair` nasce per una
   colonna stretta, e in mezzo alla pagina faceva un quadrato di due righe
   alto come un riquadro. Auto-fit: quattro in fila su schermo largo, due e
   due sul telefono, senza mai lasciare una cella orfana perche' sono quattro
   e si dividono bene in entrambi i casi. */
.cells--fatti { grid-template-columns: repeat(auto-fit, minmax(min(50%, 200px), 1fr)); }

/* Le targhette della scheda moneta - paese, anno, tipo - su schermo stretto.
   `margin-left: auto` le tiene a destra del titolo, ed e' giusto finche' ci
   stanno sulla stessa riga. Quando vanno a capo pero' quella spinta resta e
   la riga finisce appesa a destra, disallineata dal titolo che dovrebbe
   accompagnare. Stesso difetto e stessa cura dei filtri del catalogo. */
@media (max-width: 700px) {
  .coin-head { gap: 12px 24px; }
  .tags { margin-left: 0; width: 100%; }
}

/* I quattro dati sul telefono: numero ed etichetta centrati nella cella.
   A due colonne le celle sono larghe e i valori corti - "2019", "1" - e
   allineati a sinistra lasciavano una cella per tre quarti vuota, con il
   dato appiccicato al filetto. Al centro la coppia etichetta-valore si legge
   come un blocco unico.

   Il `text-indent` sull'etichetta e' la solita compensazione: e' composta in
   mono con la spaziatura fra le lettere, e lo spazio in coda all'ultima la
   fa sembrare spostata a sinistra anche quando e' centrata per davvero. */
@media (max-width: 700px) {
  .cells--fatti .fact { text-align: center; }
  .cells--fatti .label { text-indent: .16em; }
}

/* Le righe di elenco sul telefono: i numeri rientrano sotto il NOME, non
   sotto la miniatura.
   ------------------------------------------------------------
   Da quando il gruppo dei valori scende su una riga sua, partiva dal bordo
   sinistro della riga - cioe' sotto la foto della confezione - mentre il
   nome sta rientrato di tutta la larghezza della miniatura. Tre cose
   incolonnate in tre punti diversi: la tabella sembrava sfaldata.

   Due rientri perche' due sono le miniature del sito: 76 px il riquadro
   della confezione sulla scheda moneta, 46 il disco negli elenchi. Piu' il
   loro spazio dal nome.

   L'intestazione rientra insieme ai valori: gliela mette il codice della
   pagina, che sa se le confezioni hanno una foto - il foglio di stile no. */
@media (max-width: 560px) {
  .row__main--pack + .row__data,
  .row__data--rientro { padding-left: 90px; }
  .row__disc ~ .row__data { padding-left: 66px; }
}

/* Riga di bottoni centrata. Il centraggio c'era solo dentro `.closer`, che e'
   il blocco di chiusura delle pagine: qui serve anche dentro un riquadro. */
.btn-row--centro { justify-content: center; }

/* Campo corto: la risposta a una somma di due numeri e' una o due cifre, e un
   campo largo mezza colonna per due cifre chiede piu' di quello che vuole. */
.input--corto { max-width: 110px; }

/* ============================================================
   Gli importi nelle fasce di numeri
   ------------------------------------------------------------
   «€ 2.606,40» sbordava dalla sua cella e toccava i filetti, e non e' il
   caso peggiore: il totale speso puo' arrivare a «€ 99.999,99», che di
   caratteri ne ha undici contro i tre di «677».

   PRIMO TENTATIVO, sbagliato: rimpicciolire l'importo e basta. Ci stava, ma
   nella fascia si vedeva subito che uno dei sei numeri era di un'altra
   taglia - e sei numeri in fila sono una fila proprio perche' hanno lo
   stesso peso.

   DOVE C'E' POSTO, la cella dell'importo ne vale DUE e tutti i numeri
   restano identici. Serve pero' spazio per sette colonne invece di sei,
   cioe' dai 1150 px in su: misurato a 1250, la cella dei soldi ne prende
   334 e «€ 99.999,99» a corpo pieno - quarantadue e mezzo, come «677» - ne
   occupa 211.

   SOTTO I 1150 la cella doppia fa danni invece di risolvere: la fascia ha
   quattro colonne o due, e una cella che ne occupa due sballa il
   riempimento. A 390 px lasciava "MONETE FISICHE" da sola in mezzo a una
   riga e l'importo sotto, per conto suo, con due buchi intorno. Li' le sei
   celle si dividono bene da sole - tre righe da due - e a rimpicciolirsi e'
   l'importo: in una cella da 177 px sta a ventinove pixel contro i trentadue
   dei vicini, differenza che non si nota.

   Il corpo si misura SULLA CELLA e non sulla finestra: `cqi` e' l'uno per
   cento della larghezza del contenitore, e per leggerlo la cella si
   dichiara contenitore. Sulle testate non si puo' fare - li' i numeri
   stanno in una riga flessibile, e contenere una cella le toglie il diritto
   di decidere la propria larghezza: provato, "DI 618 IN CATALOGO" diventava
   quattro righe.
   ============================================================ */
.cells--soldi .stat { container-type: inline-size; }

@media (max-width: 1149px) {
  .cells--soldi .stat__n--soldi { font-size: clamp(17px, 19cqi, 30px); }
}

@media (min-width: 1150px) {
  .cells--soldi { grid-template-columns: repeat(auto-fit, minmax(min(50%, 152px), 1fr)); }
  .cells--soldi .stat--largo { grid-column: span 2; }
}

/* Nelle testate l'importo non ha una cella doppia da prendersi - i numeri
   stanno in una riga flessibile, non in una griglia - e allora si limita da
   se': un filo piu' piccolo degli altri numeroni, perche' di caratteri ne ha
   undici invece di tre. */
.cat-head__counts .stat__n--soldi { font-size: clamp(23px, 2.5vw, 34px); }

/* La colonna di destra di «Quanto vale» partiva incollata al filetto del
   titolo: la colonna di sinistra si stacca con il suo `margin-top`, questa
   no, e con `align-items: start` cominciava esattamente dove finiva la riga.
   Stesso stacco della colonna accanto, cosi' le due partono alla stessa
   altezza invece che una sotto la riga e l'altra piu' giu'. */
.valore-spiega { margin-top: clamp(22px, 3vw, 30px); }

/* I numeri della testata sul telefono: una fascetta, non due numeri appesi.
   ------------------------------------------------------------
   Sotto i bottoni restavano due gruppi di larghezza molto diversa - «526»
   con sotto «DI 618 IN CATALOGO», e «25» con sotto «PAESI» - schiacciati a
   sinistra uno accanto all'altro: sembravano avanzati dalla riga di sopra.

   Adesso prendono tutta la larghezza e si dividono in colonne uguali, con un
   filetto che li stacca dai bottoni. Due numeri fanno due mezze colonne, tre
   ne fanno due piu' una che prende la riga intera: mai una cella orfana
   larga meta' e appoggiata a sinistra. */
@media (max-width: 700px) {
  .cat-head__counts {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 140px), 1fr));
    gap: 18px 0;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
  .cat-head__counts > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* TRE numeri sono il caso piu' comune (catalogo, collezione, acquisti,
     autenticita, scheda autore), e la regola sopra li conciava male: due
     mezze colonne e il terzo da solo, centrato, su una riga tutta sua. Non
     e' una cella orfana - e' peggio, sembra un numero avanzato.
     Tre numeri corti in tre colonne ci stanno fino a 320 px: quello che va a
     capo e' l'etichetta, ed e' il suo mestiere. Il selettore dice
     «esattamente tre figli»: il terzo che e' anche l'ultimo. */
  .cat-head__counts:has(> *:nth-child(3):last-child) {
    /* minmax(0, 1fr) e non 1fr: con 1fr la traccia si allarga fino al
       contenuto piu' lungo - «2009-2026» nella scheda autore - e la fascia
       sfonda il riquadro. Cosi' le tre colonne restano uguali e il valore
       lungo va a capo sul trattino. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cat-head__counts:has(> *:nth-child(3):last-child) > *:last-child {
    grid-column: auto;
  }
  /* In tre colonne strette il numero non deve piu' crescere con la finestra:
     con clamp(34px, 3.6vw, ...) a 700 px erano 34 px in una colonna da 150,
     e l'etichetta sotto andava a capo dove il numero non serviva. */
  .cat-head__counts:has(> *:nth-child(3):last-child) .stat__n {
    font-size: clamp(28px, 8vw, 40px);
    /* «2009-2026» nella scheda autore non ci sta in una colonna da 100 px e
       veniva tagliato: qui puo' andare a capo sul trattino. Un periodo su due
       righe si legge, un periodo tagliato no.
       Serve anche il white-space: .stat__n e' nowrap in generale - giusto,
       una cifra non si spezza - e senza spegnerlo l'overflow-wrap non ha
       niente da fare. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* La croce che toglie l'immagine del profilo, appoggiata sull'immagine.
   Sta FUORI dal cerchio e non dentro: `.avatar` ritaglia quel che contiene,
   quindi una croce messa dentro verrebbe tagliata a meta' dal bordo tondo.
   Il riquadro che la ospita e' l'unico elemento posizionato, e non aggiunge
   spazio - e' largo quanto la faccia. */
.avatar-box { position: relative; flex: none; line-height: 0; }
.avatar__x {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Fondo pieno e non trasparente: sotto puo' esserci una fotografia
     qualunque, e una croce senza fondo su una foto scura sparisce. */
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-btn), 0 1px 4px rgba(25, 23, 19, .18);
  color: var(--ink-60);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, box-shadow .15s;
}
.avatar__x:hover,
.avatar__x:focus-visible {
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger), 0 1px 4px rgba(25, 23, 19, .22);
}

/* Il campo per scegliere un file, che il browser disegna a modo suo.
   ------------------------------------------------------------
   Dentro la cornice del campo compariva un bottone di sistema - grigio,
   squadrato, in Arial - accanto a un "Nessun file selezionato" della stessa
   pasta. E' l'unico pezzo di interfaccia che il foglio di stile non poteva
   toccare finche' non e' arrivato `::file-selector-button`.

   Veste da bottone secondario, come "Sfoglia il catalogo": filetto e niente
   fondo pieno. Pieno sarebbe in concorrenza con il bottone che salva il
   profilo, e sceglere un file non e' l'azione principale di quella pagina.

   Il carattere si eredita anche qui, per la stessa ragione dei <button>:
   senza, questo pezzo resta in Arial mentre tutto il resto no. */
.input[type="file"] {
  padding: 9px 10px;
  cursor: pointer;
  /* Il nome del file scelto e' un dato, non un'etichetta: stesso corpo del
     testo dei campi ma piu' tenue, cosi' il bottone resta la cosa che si
     vede per prima. */
  color: var(--ink-60);
  font-size: 14px;
}
.input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-70);
  margin-right: 14px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-btn);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.input[type="file"]::file-selector-button:hover {
  color: var(--ink);
  background: rgba(25, 23, 19, .05);
}

/* ============================================================
   La scala rosso - arancio - verde
   ------------------------------------------------------------
   Vale per le barre della composizione in dashboard e per i filetti del
   completamento per paese: sotto un terzo rosso, fino a due terzi arancio,
   oltre verde. La soglia la decide una funzione sola in connessione.asp,
   perche' se un terzo fosse rosso in un grafico e arancio nell'altro il
   colore smetterebbe di voler dire qualcosa.

   L'arancio e' un terracotta bruciato e non un arancione da segnale: sta
   fra il rosso di terracotta gia' in tavolozza e il verderame, e su fondo
   carta si legge. Un arancione acceso qui dentro sembrerebbe un avviso di
   errore.
   ============================================================ */
:root { --ambra: #B0682A; }

.scala--basso .bar__svg rect { fill: var(--danger); }
.scala--medio .bar__svg rect { fill: var(--ambra); }
.scala--alto  .bar__svg rect { fill: var(--accent); }

.meter.scala--basso .meter__fill { background: var(--danger); }
.meter.scala--medio .meter__fill { background: var(--ambra); }
.meter.scala--alto  .meter__fill { background: var(--accent); }

/* La quota accanto al numero, nelle barre della composizione. Piu' piccola e
   piu' tenue: il numero e' il dato, la percentuale e' il commento al dato.
   Le cifre sono tabellari, cosi' le percentuali di una colonna si leggono
   incolonnate anche se scritte in tondo. */
.bar__pc {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}

/* Il nome della variante non finisce sopra i numeri.
   ------------------------------------------------------------
   «Divisionale ufficiale» a ventuno pixel vuole duecento pixel, e la colonna
   di sinistra ne ha centocinquanta: il nome usciva dal suo posto e si
   stampava sopra la tiratura.

   Il taglio con i puntini c'era gia', ma non scattava: il riquadro che tiene
   nome ed etichetta e' un elemento flessibile, e un elemento flessibile per
   difetto non si stringe sotto la larghezza del proprio contenuto. Serve
   dirglielo (`min-width: 0`), ed e' la riga che mancava.

   Poi: non i puntini ma DUE RIGHE. Il nome della variante e' la riga - dice
   che cosa si compra - e mozzarlo a «Divisionale uffi...» toglie proprio la
   parola che distingue una confezione dall'altra. Due righe e poi i puntini,
   come per il nome della moneta sul telefono. */
.row__main--pack > span:last-child { min-width: 0; }
.row__name--lg {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}
/* Le pagine di servizio - privacy e cookie - accanto a quelle del sito ma
   piu' tenui: sono roba di un altro genere, e mescolate al catalogo si
   leggerebbero come contenuto. Si cercano quando servono, non si sfogliano.

   Niente margine sopra: era rimasto da quando dovevano stare su una riga
   loro, sotto le altre. Da quando il piede allinea in mezzo quel margine
   non le abbassava insieme al resto - le abbassava e basta, e si vedeva. */
.foot__links--servizio {
  font-size: 10px;
  color: var(--ink-40);
  opacity: .72;
}

/* Il piede allinea in mezzo e non in fondo. Con la firma sotto il marchio
   c'era un blocco alto due righe e uno alto una, e allineare in fondo era il
   modo per non farli ballare; adesso che a sinistra c'e' il solo marchio,
   allineare in fondo lo attaccherebbe alla riga di servizio - che e' la piu'
   bassa e la meno importante. In mezzo, marchio, voci e copyright stanno
   sulla stessa linea d'aria. */
.foot { align-items: center; }

/* --- Le figure della pagina autenticita ---------------------------------
   Disegni nostri in SVG generato dal server (FigBordoSvg, FigAllineamentoSvg,
   FigSezioneSvg in connessione.asp). Servono a mostrare quello che una
   fotografia non mostra: il bordo di una moneta e' una striscia di due
   millimetri messa di taglio, e in foto e' illeggibile. Srotolato si legge.

   I colori stanno qui e non nell'SVG - un attributo `fill` scritto nel
   markup sarebbe un colore fuori dal foglio, e con due temi non basterebbe.
   La geometria invece resta nell'SVG, dove e' un attributo di presentazione
   e passa la CSP.  */
.figura {
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.figura--coppia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 26px;
}
/* La didascalia di una figura E' TESTO, quindi va nel carattere del testo.
   Era in monospazio, come le etichette e i dati: ma «L'anello di cupronichel
   e il nucleo a tre strati: in mezzo c'e' lo strato di nichel...» sono tre
   righe di prosa, e in monospazio si leggono come l'uscita di un programma.
   Il monospazio nel sito ha un mestiere - le etichette, le sigle, i numeri
   incolonnati e l'incisione del bordo, dove imita la moneta - e la prosa non
   e' quel mestiere.
   Stessa misura di .note (13,5 px): una didascalia e una nota a piede sono
   la stessa cosa vista da due posti. */
.figura figcaption,
.figura__cap {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-50);
  text-wrap: pretty;
}
.figura__cap b { color: var(--ink-70); font-weight: 500; }

/* La fascia e' il bordo srotolato: fondo avorio e filetto, come i riquadri
   del sito. Larghezza piena, altezza dal viewBox. */
.fig-bordo,
.fig-allinea,
.fig-sezione { display: block; width: 100%; height: auto; }
.fig__fascia { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; }
.fig__motivo {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: .04em;
}
/* Il motivo sbagliato: stesso disegno, colore dell'avviso. Non serve una
   legenda se il colore e' quello che il sito usa per i guai. */
.fig__motivo--falso { fill: var(--danger); }
.fig__guida { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }

/* La sezione: l'anello e i tre strati del nucleo. Lo strato di nichel e' il
   piu' scuro perche' e' quello che risponde alla calamita, ed e' l'unica
   cosa che la figura deve far notare. */
.fig__anello { fill: var(--rule-strong); }
.fig__strato { fill: var(--accent); opacity: .35; }
.fig__nichel { fill: var(--ink-70); }
.fig__quota { stroke: var(--ink-40); stroke-width: 1; }
.fig__quotaTxt {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-50);
  letter-spacing: .06em;
}

/* La sezione non va a tutta larghezza: e' un disegno tecnico piccolo, e
   stirato su mille pixel le sue quote diventano titoli. Il bordo srotolato
   invece si allarga volentieri, perche' piu' e' largo piu' si leggono le
   sei ripetizioni. */
/* Le fasce del bordo alla stessa SCALA, non solo alla stessa altezza. Le due
   affiancate stanno in colonne da 600 px; questa, larga tutta la sezione,
   scalava lo stesso disegno a 1200 e le lettere venivano il doppio. Il tetto
   la riporta alla larghezza di una colonna: tre figure, un solo corpo di
   lettera. */
.fig-allinea { max-width: 620px; }
.fig-sezione { max-width: 420px; }
.figura--strette { max-width: 720px; }

/* ==========================================================================
   LE GUIDE DI AUTENTICITA (guida-autenticita.asp)
   ==========================================================================
   Una pagina per emissione o per famiglia. Quasi tutto e' gia' nel foglio:
   le sezioni sono .section, i dati .spec-block, l'elenco delle emissioni
   .row del catalogo. Qui c'e' solo quel che la guida ha in piu': la moneta
   in testa e il blocco di un segno. */

/* La moneta a fianco dei suoi dati: la foto e' la NOSTRA foto, la stessa
   della scheda - le foto dei falsi che girano sui forum sono degli utenti
   che le hanno scattate e non sono riusabili. E la moneta vera e' comunque
   il termine di confronto che serve a chi guarda un pezzo sospetto. */
.guida-moneta {
  display: grid;
  grid-template-columns: minmax(min(100%, 220px), 300px) 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.guida-moneta__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-strong) inset;
}
@media (max-width: 700px) {
  .guida-moneta { grid-template-columns: 1fr; }
  .guida-moneta__foto { max-width: 240px; }
}

/* UN SEGNO PER BLOCCO, con il numero, le targhette e la fonte in coda.
   La fonte non e' un dettaglio di servizio: e' la differenza fra questa
   pagina e un forum, e per questo sta dentro il blocco del segno e non in
   una nota generale in fondo. */
.segno {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.segno:first-child { border-top: 1px solid var(--rule-strong); }
.segno__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}
.segno__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .08em;
}
.segno__tit {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  flex: 1 1 auto;
  min-width: 12ch;
  text-wrap: balance;
}
/* Niente tetto di larghezza: sul resto delle pagine i testi vanno per
   esteso, e un paragrafo strizzato a meta' blocco dentro una sezione larga
   sembra un residuo. Vale anche per il riquadro «come si guarda» qui
   sotto. */
.segno__desc { margin: 12px 0 0; text-wrap: pretty; }
/* "Come si guarda" e' l'imperativo, cioe' la riga che uno legge con la
   moneta in mano: sta staccata dalla prosa e in un riquadro appena
   accennato, cosi' si trova scorrendo senza leggere il resto. */
.segno__come {
  margin: 14px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 2px solid var(--accent);
}
.segno__come .label { display: block; margin-bottom: 4px; }
/* La riga della fonte sotto un segno: «Segnalato il 19/06/2025 ·
   numismatique.com, "2 euros Grace Kelly : un faux inedit ?", di Guillaume
   Hermann». Era in monospazio - l'avevo tenuta li' pensandola come una data
   con un'etichetta - ma dentro c'e' il titolo di un articolo e il nome di
   chi l'ha scritto: e' una citazione, cioe' testo, e in monospazio si legge
   come un pezzo di log. Nel carattere del testo, alla misura delle note. */
.segno__fonte {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  /* Lo stesso inchiostro del testo sopra, non il grigio delle note: qui non
     c'e' niente di secondario - la fonte e la data sono la ragione per cui
     quel segno sta in pagina invece di essere un'opinione. Misurato: la
     descrizione e il riquadro «come si guarda» sono a --ink pieno, e questa
     riga stava al 50 per cento. */
  color: var(--ink);
}
/* La targhetta spenta: "non si vede in foto". Non e' un difetto della
   guida, e' un'informazione - e nella Fase 5 sara' la ragione per cui
   l'assistente fotografico risponde "non valutabile" invece di sbilanciarsi
   su un peso che in una fotografia non c'e'. */
.stamp--muto { color: var(--ink-40); }

/* IL LIVELLO DELLA GUIDA: una targhetta, non una cifra.
   ------------------------------------------------------------
   Stava nel blocco dei conteggi, con «Documentato» in serif a corpo 26 come
   se fosse un numero: pesava piu' del titolo e diceva meno. Ora e' un
   contrassegno in alto a destra, nello stesso linguaggio di .stamp che
   l'elenco delle guide usa per la stessa parola - chi arriva dall'elenco
   ritrova il segno che aveva appena letto.

   ALLINEATO ALLA PRIMA RIGA DEL TITOLO. La testata e' un flex con
   align-items: flex-end, quindi da sola la targhetta cadeva in fondo,
   accanto al sommario: `align-self: flex-start` la porta in cima.
   Il margine in cima compensa lo spazio che il titolo lascia sopra le
   lettere: misurato, sono 13 px su un corpo da 82, cioe' il 16 per cento.
   Va in vw e non in em perche' l'em qui e' il corpo della TARGHETTA (16 px)
   e non quello del titolo - con 0,18em erano tre pixel e la targhetta
   restava appesa sopra le cifre. Il titolo scala con 6.4vw, quindi 1vw
   tiene il passo a tutte le larghezze. */
.livello-badge {
  align-self: flex-start;
  margin-left: auto;
  margin-top: clamp(6px, 1vw, 15px);
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 15px 8px;
  color: var(--ink-60);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  /* Il maiuscoletto spaziato lascia lo spazio DOPO l'ultima lettera, quindi
     la parola sembra spostata a sinistra anche con i due padding uguali. Lo
     si compensa spingendo il testo di mezza spaziatura: e' la stessa
     correzione delle etichette sotto i numeri della home. */
  text-indent: .2em;
}

/* Documentato porta l'accento - fondo appena tinto e filetto della stessa
   famiglia - plausibile resta neutro. Il colore raddoppia quello che dice la
   parola, non lo sostituisce: «documentato» vuol dire che quei falsi li ha
   descritti qualcuno, «plausibile» che e' un ragionamento nostro su tiratura
   e prezzo. */
.livello-badge--documentato {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 34%, transparent);
}

@media (max-width: 700px) {
  /* Sul telefono la testata va in colonna: la targhetta torna a sinistra,
     sotto il sommario, invece di restare appesa a destra da sola. */
  .livello-badge { margin-left: 0; margin-top: 4px; }
}

/* --- Il codice QR di una pagina -----------------------------------------
   Sta nella chiusura, accanto alla data di aggiornamento, e serve a due cose
   diverse: a schermo per portarsi la guida sul telefono - che e' dove serve,
   al mercatino - e su carta per non ricopiare un indirizzo a mano.

   L'INDIRIZZO E' SCRITTO SOTTO IL CODICE. Un QR e' una scatola nera: chi lo
   inquadra non sa dove sta andando, e su una pagina che parla di frodi
   chiedere fiducia a un quadrato di quadratini sarebbe una contraddizione. */
.qr {
  margin: 30px 0 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  max-width: 520px;
}
.qr__img {
  display: block;
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
  /* Il PNG ha il suo bordo silenzioso dentro (quattro moduli, chiesti al
     generatore): qui NON si aggiunge padding, o il codice si rimpicciolisce
     dentro il riquadro senza guadagnare niente. */
}
.qr__cap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qr__testo { font-size: 14px; line-height: 1.45; color: var(--ink-70); }
/* L'indirizzo va a capo dove capita: e' lungo, e su un telefono spezzarlo e'
   meglio che farlo sbordare. */
.qr__url {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-50);
  overflow-wrap: anywhere;
}

@media print {
  /* IN STAMPA IL QR RESTA, ed e' il pezzo che rende utile una guida
     stampata: il foglio porta con se' il modo di tornare alla versione
     aggiornata. Fondo bianco e nessun riquadro grigio - la "grafica di
     sfondo" nella finestra di stampa e' spenta per impostazione
     predefinita, quindi un fondo colorato non uscirebbe comunque. */
  .qr {
    background: #fff;
    border: 1px solid #bbb;
    max-width: none;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .qr__img { width: 28mm; height: 28mm; }
  .qr__url { color: #000; }
}

/* Nella chiusura il testo e' centrato: il riquadro del QR va centrato con
   lui, o resta l'unica cosa a filo sinistro sotto due paragrafi in mezzo. */
.closer .qr { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   L'IMPORT DELLA COLLEZIONE: la card in dashboard e le tre modalita'
   ==========================================================================
   La card sta subito sotto i numeri della dashboard, ed e' l'unico blocco di
   quella pagina che chiede di fare una cosa invece di raccontarne una: il
   filetto d'accento a sinistra e' il solo segno che si concede. */
.import-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}
.import-card__testo { min-width: 0; max-width: 62ch; }
/* Le tre voci in piccolo: dicono cosa c'e' dietro il bottone senza
   obbligare a premerlo. Non sono collegamenti - il passo dopo e' uno. */
.import-card__modi {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-50);
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
.import-card__modi li::before { content: "— "; color: var(--ink-40); }
@media (max-width: 760px) {
  .import-card { grid-template-columns: 1fr; }
  .import-card__modi { border-left: 0; padding-left: 0; }
}

/* --- Le tre modalita', una accanto all'altra ------------------------------
   Tre colonne su schermo largo, una sotto gli 860: sono alternative di pari
   peso, e affiancarle e' il modo di dirlo. Chi le mette in fila verticale
   suggerisce un ordine di preferenza che qui non c'e' - la prima e' la piu'
   pronta, non la migliore. */
.modi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.modo {
  background: var(--surface);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* La modalita' pronta si distingue per il fondo, non per un bordo colorato:
   un bordo su una card dentro una griglia a filetti diventa rumore. */
.modo--pronto { background: var(--paper); }
.modo__stato {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.modo__stato--attesa { color: var(--ink-40); }
.modo__nome {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.modo__cosa { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); text-wrap: pretty; }
/* I tre dati in riga: che ti serve, quanto ci metti, a che livello entra.
   Sono la parte che l'utente confronta fra le tre colonne, quindi stanno
   nella stessa posizione in tutte e tre. */
.modo__dati { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.modo__dati dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-top: 3px;
  white-space: nowrap;
}
.modo__dati dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-70); }
.modo__azione { margin-top: auto; padding-top: 8px; }
/* Il motivo per cui una modalita' non c'e' ancora: sta in fondo alla sua
   colonna, con il fondo appena diverso. Dirlo e' piu' onesto che nascondere
   la modalita', e piu' utile che farla finta di funzionare. */
.modo__manca {
  margin: auto 0 0;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-70);
}

/* ==========================================================================
   IL FOGLIO DI CALCOLO: i tre passi, la mappatura delle colonne, l'esito
   ==========================================================================
   Tutto quello che serve a importa-foglio.asp e nient'altro. Le tabelle
   riusano .divtab (che c'e' gia' e sa come si comporta su schermo piccolo);
   qui ci sono solo le tre cose che quella pagina ha in piu': l'indicatore dei
   passi, la tendina dentro la tabella, e la pastiglia dello stato. */

/* --- I tre passi -----------------------------------------------------------
   Non e' decorazione: e' l'unica cosa che dice a chi ha appena caricato un
   file che non ha finito, e quanto gli resta. Numeri in mono perche' sono
   posizioni, non quantita'. */
.passi {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.passo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--ink-40);
  flex: 1 1 auto;
}
.passo + .passo { border-left: 1px solid var(--rule); }
.passo__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-50);
}
/* Il passo fatto porta l'accento sul numero, non sul testo: il colore serve
   a far vedere il progresso di sfuggita, non a chiedere di rileggere. */
.passo--fatto { color: var(--ink-70); }
.passo--fatto .passo__n {
  border-color: var(--accent);
  color: var(--accent);
}
.passo--ora {
  color: var(--ink);
  background: var(--paper);
}
.passo--ora .passo__n {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-inverse);
}

/* --- Il riquadro delle istruzioni ------------------------------------------
   Accanto al modulo di caricamento: dice come si salva un CSV, che e' la
   domanda che fara' chiunque abbia il foglio in Excel. */
.riquadro {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.riquadro__lista {
  margin: 14px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-70);
}

/* --- La tabella della mappatura --------------------------------------------
   Tre colonne: come si chiama la tua colonna, cosa contiene, che cos'e'. La
   terza e' un menu, quindi la cella deve smettere di comportarsi da testo. */
.divtab--mappa td:last-child { width: 1%; white-space: nowrap; padding-top: 8px; padding-bottom: 8px; }
.select--mappa { margin-top: 0; min-width: 210px; padding-top: 9px; padding-bottom: 9px; }

/* L'indice della colonna: serve quando le intestazioni sono vuote o uguali
   fra loro, e allora e' l'unica cosa che le distingue. */
.divtab__idx {
  display: inline-block;
  min-width: 20px;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.divtab__esempi {
  font-size: 13px;
  color: var(--ink-50);
  max-width: 30ch;
}
/* La riga di una colonna che non entra da nessuna parte: piu' chiara, ma
   leggibile - va vista che c'e' ed e' esclusa, non nascosta. */
.divtab__spenta th[scope="row"],
.divtab__spenta .divtab__esempi { color: var(--ink-40); }

.divtab__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.divtab__perche { font-size: 13px; color: var(--ink-50); max-width: 42ch; }

/* --- La pastiglia dello stato ----------------------------------------------
   Tre stati e tre colori, ma il colore non e' l'unica differenza: la parola
   dentro dice la stessa cosa, perche' un colore da solo non si legge in
   stampa, in bianco e nero, o se non si distinguono i colori. */
.pillola {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--rule-strong);
  color: var(--ink-70);
}
.pillola--ok {
  border-color: var(--accent);
  color: var(--accent);
}
.pillola--dubbia {
  border-color: var(--rule-strong);
  background: var(--paper);
  color: var(--ink-70);
}
.pillola--persa {
  border-color: #A33B2E;
  color: #A33B2E;
}

/* --- Radar: righe che non sono collegamenti, e le note del canale -------- */
/* Le righe dei canali e degli avvisi non portano da nessuna parte: il
   collegamento vero e' l'indirizzo del negozio, a destra. Senza `a.row` non
   serve il passaggio del mouse, e soprattutto il nome puo' andare a capo -
   «Portogallo — Imprensa Nacional-Casa da Moeda» tagliato coi puntini
   perderebbe proprio la parte che dice di chi e'. */
.row--statico { cursor: default; }
.row--statico .row__name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* I limiti d'acquisto sono la riga per cui vale la pena entrare: stesso
   corpo delle altre note, inchiostro pieno. */
.row__note--forte { color: var(--ink); }
/* La data di verifica e' un dato, non prosa: monospazio, come le altre
   etichette di dato del sito. */
.row__note--verifica {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
}
.link-out--sm { font-size: 12.5px; }

/* --- Piani: il prezzo pieno accanto a quello scontato ------------------- */
/* Barrato e piu' piccolo, in monospazio come tutti i dati: senza il prezzo
   pieno accanto, uno sconto non si vede - e con lo stesso corpo dell'altro
   i due numeri si leggono come un intervallo. */
.prezzo-vecchio {
  font-family: var(--mono);
  font-size: .72em;
  color: var(--ink-60);
  text-decoration: line-through;
  margin-right: .5em;
}

/* --- La seconda barra: le cose dell'utente ------------------------------ */
/* Sotto il filetto della barra principale, e solo per chi e' entrato. Sopra
   sta IL SITO, qui LE TUE COSE. Non e' nella dashboard ma nell'header perche'
   serve da ogni pagina: chi guarda una scheda moneta e vuole la sua lista dei
   desideri non deve passare dalla dashboard per trovarla.
   Stesso maiuscoletto spaziato della barra sopra, un gradino piu' piccolo:
   e' una barra secondaria e deve sembrarlo. */
/* STA DENTRO L'HEADER, che e' gia' `sticky`: le due barre restano in cima
   insieme mentre la pagina scorre. Dentro invece di sotto, cosi' non serve
   inseguire a mano l'altezza della prima con un `top` scritto a numero, che
   sarebbe sbagliato al primo cambio di spaziatura.

   IL FILETTO STA SOPRA, non sotto: divide le due barre. Quello sotto ce l'ha
   gia' l'header, e chiude la testata intera.

   E LE VOCI VANNO A DESTRA. Non e' solo un allineamento: l'insegna e' alta
   120 px e sporge sotto la prima barra, cioe' proprio sopra questa. A
   sinistra le voci le finivano sotto; a destra il marchio resta libero di
   sporgere - com'e' disegnato - e nessuno gli passa davanti. */
.userbar {
  border-top: 1px solid var(--rule);
}
/* QUANDO LE BARRE SONO DUE, LA TESTATA NON SI CHIUDE CON UN FILETTO. Il
   filetto in fondo a `.topbar` va bene quando la barra e' una; sotto la
   seconda diventava la terza riga orizzontale in sessanta pixel - quella fra
   le due barre, quella sotto, e il filetto della pagina - e la testata
   sembrava un modulo da compilare. Resta solo quello che divide le due
   barre, perche' quello divide qualcosa. La classe la mette header.asp
   quando c'e' la barra dell'area riservata. */
.topbar--doppia { border-bottom: 0; }
.userbar__inner {
  display: flex;
  gap: 30px;                     /* lo stesso passo della barra sopra */
  align-items: center;
  justify-content: flex-end;
  padding-top: 9px;
  padding-bottom: 9px;
  /* Alta abbastanza da contenere l'insegna che sporge dalla barra sopra:
     l'insegna e' alta 120 px, la prima barra ne fa 75, e i 46 di questa
     portano la testata a 121. Cosi' il marchio finisce esattamente dentro
     la testata invece di spuntare sotto, e siccome le voci stanno a destra
     non gli passa davanti niente. */
  min-height: 46px;
  /* Su schermo stretto scorre invece di andare a capo: due righe di voci
     sotto la barra mangerebbero mezzo telefono prima del contenuto. */
  overflow-x: auto;
  scrollbar-width: none;
}
.userbar__inner::-webkit-scrollbar { display: none; }
/* Stessa misura, stesso maiuscoletto e stesso inchiostro delle voci della
   barra sopra: sono due barre di navigazione, e devono leggersi come una
   famiglia sola. */
.userbar a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.userbar a:hover { color: var(--ink); }
.userbar a.is-current {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* --- Dashboard: il riquadro del piano ----------------------------------- */
.piano-box {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
  justify-content: space-between;
}
.piano-box__testo { flex: 1 1 22rem; min-width: 0; }
.piano-box__azione { flex: 0 1 16rem; }
.piano-box__lista {
  margin: 14px 0 0;
  padding-left: 1.1em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-70);
}
.piano-box__prezzo {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
/* Quando il piano c'e' gia', il riquadro non deve gridare: niente prezzo,
   niente elenco, solo la scadenza e un collegamento. */
.piano-box--attivo .piano-box__azione { align-self: center; }

/* --- Fogli d'archivio di una nazione (solo a schermo) ------------------ */
/* SOLO A SCHERMO, e la parentesi non e' pignoleria: senza, la regola
    (0,2,0 di specificita') batte  (0,1,0)
   dentro @media print e sostituisce l'altezza esatta di 297 mm con un
   minimo - il foglio cresce di un pelo, sfora la pagina e ogni cartoncino
   ne stampa due. Trentasei fogli diventavano settantadue pagine. */
@media screen {
/* A schermo i fogli si vedono uno sotto l'altro come fossero pagine: cosi'
   si controlla che cosa uscira' dalla stampante prima di premere stampa. */
.foglio-box {
  position: relative;
  margin: 0 auto 24px;
  width: 210mm;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
}
/* Qui si ACCENDE il foglio e basta: misure, colonne e fori li mette il
   blocco condiviso, lo stesso che governa la stampa. Ripeterli qui vorrebbe
   dire avere due modelli, e l'anteprima mentirebbe al primo che cambia.
   `.foglio-box .foglio` (0,2,0) batte `.printonly` (0,1,0), che e' quello
   che tiene nascosto il foglio nella scheda della moneta. */
.foglio-box .foglio { display: flex; }
/* Escluso dalla stampa: resta visibile a schermo ma spento, cosi' si vede
   che c'e' ed e' stato tolto - sparire del tutto sembrerebbe un errore. */
.foglio-box--escluso { opacity: .35; }

.foglio-escludi {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid var(--rule);
  cursor: pointer;
  z-index: 2;
}
}

/* --- Accessori (/accessori) --------------------------------------------
   Una scheda per accessorio, in due colonne che si impilano. Non e' una
   vetrina di prodotti e non deve sembrarlo: nessun prezzo, nessuna foto, il
   filetto invece del riquadro con l'ombra, e il disegno di linea al posto
   dell'immagine - le ragioni stanno nel commento in cima ad accessori.asp.

   LA SCHEDA E' UNA COLONNA CON IL PIEDE IN FONDO. Due accessori affiancati
   hanno testi di lunghezza diversa, e senza `justify-content` fra i due il
   bottone finirebbe a due altezze diverse sulla stessa riga: si vede subito,
   e sembra un difetto di impaginazione. */
/* `auto-FILL`, non `auto-fit`, ed e' l'unica differenza che conta in questa
   pagina. Con `auto-fit` le colonne vuote collassano e una categoria con un
   solo accessorio - «Per guardare» ne ha uno - allarga quella scheda per
   tutta la pagina: il testo arriva a centotrenta caratteri per riga e si
   legge male. Con `auto-fill` la traccia resta al suo posto, e le schede
   hanno la stessa misura in tutte le categorie, oggi che sono cinque e
   domani che saranno venti. */
.acc-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--col-gap);
  /* `stretch`, che e' il valore di partenza della griglia e qui va lasciato
     stare: e' quello che da' a tutte le schede di una riga la stessa altezza.
     Con `align-items: start` ognuna era alta quanto il suo testo, i bordi
     superiori erano allineati e quelli inferiori no - e tre schede che
     finiscono a tre altezze diverse sembrano impaginate male, non asciutte.
     L'altezza in eccesso la assorbe `.acc__piede` con il suo `margin-top:
     auto`, quindi i bottoni finiscono tutti sulla stessa linea. */
}

.acc {
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  border-top: 1px solid var(--rule-mid);
}

/* LA FOTOGRAFIA DEL PRODOTTO, e la sola regola che conta e' l'altezza fissa:
   le foto dei negozi arrivano quadrate, alte e strette, larghe e basse. Con
   l'altezza libera ogni scheda comincerebbe il titolo a una quota diversa;
   con un riquadro sempre uguale e `contain` dentro, i titoli sono in fila e
   nessuna immagine viene tagliata.

   Il fondo e' bianco e non carta: le foto dei prodotti hanno il fondo bianco
   loro, e su carta si vedrebbe il rettangolo dell'immagine dentro il
   rettangolo della scheda. */
.acc__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin-bottom: 18px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rule);
}
.acc__foto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.acc__testa {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Il disegno e' piu' grande di un'icona di interfaccia e piu' piccolo di
   un'illustrazione: deve reggere accanto a un titolo senza diventare il
   soggetto della scheda. */
.acc__ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--accent);
}

.acc__nome {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

/* La riga che dice a cosa serve, in corsivo colorato: e' l'unico dispositivo
   di enfasi della veste, e qui e' al posto giusto - quella riga e' il motivo
   per cui si legge il resto. */
.acc__claim {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--accent);
}

.acc__testo {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-80);
  text-wrap: pretty;
}

/* «Cosa guardare» sta in un blocco rientrato, non in un paragrafo come gli
   altri: e' la parte operativa della scheda - quella che si rilegge in piedi
   davanti allo scaffale - e va trovata senza leggere il resto. */
.acc__criteri {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--rule-mid);
}
.acc__criteri p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-60);
  text-wrap: pretty;
}

/* `margin-top: auto` incolla il piede in fondo alla colonna: e' quello che
   allinea i bottoni di due schede affiancate. */
.acc__piede {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

/* Le confezioni: l'etichetta e sotto i bottoni, uno per taglio. Occupano
   tutta la larghezza della scheda perche' sono l'azione principale di quella
   scheda - il bottone nero, quando c'e' una confezione sola, sta sulla stessa
   riga di «serve per» e lo spazio basta; tre bottoni no. */
.acc__confezioni { flex: 1 1 100%; }
.acc__pacchi {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* I bottoni delle confezioni sono in filetto e non pieni: la scelta e' di chi
   legge, e tre bottoni neri in fila direbbero che uno dei tre e' quello
   giusto. Quale sia il taglio conveniente lo spiega «Cosa guardare». */
.acc__pacchi .btn { padding-inline: 18px; }

.acc__serve {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.acc__serve a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-btn); }
.acc__serve a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* La nota del link non diretto: piccola, ma c'e'. Un bottone che apre una
   ricerca invece della scheda del prodotto deve dirlo. */
.acc__nota {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-40);
}

/* Il bottone spento durante il conto alla rovescia: non sparisce e non
   cambia misura - la larghezza la tiene il testo piu' lungo dei due - perche'
   un bottone che si accorcia mentre lo guardi sembra rotto. */
#ver-rinvia[disabled] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* L'indirizzo dentro il riquadro di /verifica: monospaziato, perche' e' un
   dato e non una frase - la stessa regola dei numeri del catalogo. */
.ver-mail {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}

/* Il marchio di chi ha fatto il sito, ultima riga del piede. Piu' piccolo e
   piu' quieto del copyright che sta sopra: e' una firma, non un'insegna. Si
   accende all'hover, che e' l'unico momento in cui qualcuno la guarda. */
.foot__oeds {
  display: block;
  margin-top: 14px;
  line-height: 0;
  opacity: .55;
  transition: opacity .2s var(--ease);
}
.foot__oeds:hover { opacity: 1; }
.foot__oeds img { display: block; width: 74px; height: auto; }

/* --- I tre livelli di completezza (/completezza) ----------------------
   Ogni livello e' un blocco con il numero d'ordine a sinistra, il nome e la
   definizione in mezzo, e la CIFRA a destra - che e' il dato per cui si
   arriva su questa pagina. Il filetto sopra separa i tre come le voci di un
   elenco numerato, senza scatole. */
.liv {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--rule-mid);
}
.liv__testa {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.liv__n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}
.liv__nome {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}
.liv__def {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
/* La cifra a destra, e la stessa misura dei numeri della testata: e' il dato
   che si viene a cercare, e su una pagina di testo un numero grande e' un
   segnale di posizione prima che di quantita'. */
.liv__cifra {
  margin-left: auto;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
}
.liv__testo {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-80);
  text-wrap: pretty;
}
/* L'esempio preso dal catalogo: rientrato dietro un filetto, come le note
   tecniche del resto del sito. Non e' prosa, e' una prova. */
.liv__esempio {
  margin-top: 12px;
  max-width: 62ch;
  padding-left: 14px;
  border-left: 2px solid var(--rule-mid);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-60);
}