/* ==========================================================================
   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;
  --accent:       #2F6E5E;

  /* 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 --------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--accent);
  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;
}
.h2--sm { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.03em; }
.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; }
.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);
}

.topbar__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 15px 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;
}

/* Lockup — sostituire .mark con l'asset ufficiale del logo */
.lockup { display: flex; align-items: center; gap: 11px; }

.mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}
.mark--sm { width: 26px; height: 26px; font-size: 12px; }

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.wordmark b {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .16em;
}
.wordmark span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .20em;
  color: var(--ink-40);
  margin-top: 4px;
}

/* --- 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); }

.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);
}
.spec-block .label { flex: 0 0 150px; padding-top: 4px; }
.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; }

.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;
}

.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 ----------------------------------------------------------- */

.foot {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 52px var(--gutter) 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
}
.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 ---------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  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-18 { margin-top: 18px; }
.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; }

/* 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; }

/* ==========================================================================
   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. */
.topbar__auth .is-current { color: var(--ink); }

/* 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. */
.divtab-wrap { overflow-x: auto; margin-top: 18px; }

.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 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; }


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

  /* 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 {
    display: flex !important;
    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 lindirizzo del sito, non il solo marchio: un foglio staccato
     dal raccoglitore deve dire da dove viene. Spaziatura ridotta rispetto a
     un marchio, perche un indirizzo con le lettere troppo larghe si legge
     peggio. */
  .foglio__logo { letter-spacing: .08em; font-weight: 700; }

  /* 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 prende il colore delle etichette dei campi -
     lo stesso di NUCLEO - invece del nero delle intestazioni di sezione.
     Nella colonna di sinistra "LA MONETA DA 2 EURO" e il titolo del blocco,
     e due titoli neri uno sotto laltro se lo contendevano. */
  /* Due classi e non una: piu sotto c e una riga che rimette il nero su
     .foglio__sottotit, stessa specificita e piu in basso nel file, quindi
     vinceva lei. E la terza volta oggi che perdo una gara di specificita:
     la forma con due classi la chiude senza dipendere dallordine. */
  .foglio .foglio__sottotit--tenue { color: #9a948c; }
  .foglio__var { padding: 2mm 0; border-top: .3pt solid #e2ded8; }
  .foglio__var b { display: block; font-weight: 600; color: #000; }
  .foglio__vartipo {
    display: block;
    margin-top: .6mm;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9a948c;
  }
  .foglio__var p { margin: 1.5mm 0 0; color: #000; text-wrap: pretty; }

  /* 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;
  }
  .foglio__desc { margin: 0 0 3mm; text-wrap: pretty; }

  /* 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; }
  /* 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. Corpo piccolo e
     interlinea larga, e il nome in evidenza perche' e' quello che si cerca
     scorrendo. */
  .foglio__bio { margin-top: 5mm; }
  .foglio__bio p { margin: 0; color: #000; text-wrap: pretty; }

  /* --- 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: .45mm 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;
  }
}

/* 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) {
  /* Il pay-off sotto il marchio e' composto a 8 px con due decimi di
     spaziatura: su un telefono non lo legge nessuno e ruba l'altezza che
     serve al menu. */
  .wordmark span { display: none; }
  .wordmark b { font-size: 14.5px; }
  .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; }
}

/* 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; }