/* ============================================================
   Unpaved Roads · token delle guide
   Direzione B2 "Carta stradale, pulita" di unpavedroads.cc (repo unpaved-roads,
   docs/design-system/direzione-b2/, applicata al sito il 19/10/2026): carta bianca,
   petrolio e ruggine del logo, titoli in Libre Caslon, testo in Barlow, Barlow
   Condensed per numeri, km ed etichette.
   I nomi dei token restano quelli delle guide Tuscany Trail, NorthCape4000 e
   Trentino Gravel, così guide.css e chrome.css sono gli stessi file con le stesse classi.
   ============================================================ */

:root {
  /* --- Colori ---------------------------------------------------------
     Contrasti (WCAG AA, testo piccolo):
       --ink su --neve ................ 13,7:1 (testo corrente, l'inchiostro del sito)
       --blu su --neve ................ 10,7:1 (link, numeri, bottoni: il petrolio scuro)
       --oro su --neve ................ 5,3:1  (occhielli, ruggine come testo)
       --muted su --neve .............. 7,1:1  (etichette, il grigio-testo del sito)
       --ghiaccio su --blu-notte ...... 6,4:1
     --oro-chiaro (la ruggine del logo, 3,8:1) è solo per numeri grandi e segni. */
  --neve: #faf7f1;         /* carta: fondo della pagina */
  --paper: #efebdd;        /* carta-mappa: fondo dei riquadri speciali, come la legenda del sito */
  --blu: #1e3d4f;          /* petrolio scuro: numeri, bottoni, barre, filetti */
  --blu-notte: #16303e;    /* hover del primario, targa di copertina */
  --ghiaccio: #f2b48c;     /* ruggine chiara: testo secondario sul petrolio */
  --ink: #1e2a30;          /* inchiostro: testo corrente */
  --oro: #a84b1c;          /* ruggine-ink: occhielli sopra i titoli */
  --oro-chiaro: #c8602d;   /* ruggine del logo: numeri dei capitoli, segni */
  --heading: #1e3d4f;      /* titoli */

  --line: rgba(30, 61, 79, 0.16);
  --line-strong: rgba(30, 61, 79, 0.26);
  --line-hard: rgba(30, 61, 79, 0.5);
  --line-neve: rgba(250, 247, 241, 0.3);
  --muted: #4a5560;
  --muted-strong: #36414a;
  --blu-velo: rgba(30, 61, 79, 0.07);

  /* --- Tipografia ----------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-titolo: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --font-serif: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Barlow', Arial, Helvetica, sans-serif;

  --fs-h1: clamp(44px, 11vw, 88px);
  --fs-h2: clamp(36px, 8vw, 58px);
  --fs-h3: clamp(24px, 5.6vw, 32px);
  --fs-h4: clamp(20px, 4.8vw, 26px);
  --fs-num: clamp(30px, 8.6vw, 56px);
  --fs-stat: clamp(36px, 8.6vw, 54px);
  --fs-lead: clamp(18px, 4.6vw, 19.5px);
  --fs-body: clamp(17px, 4.3vw, 18px);
  --fs-sm: 16px;
  --fs-xs: clamp(14.5px, 3.7vw, 15.5px);
  --fs-kicker: 13px;
  --fs-label: 11px;

  /* --- Spaziature ----------------------------------------------------- */
  --pad-x: clamp(20px, 5vw, 40px);
  --sec-y: clamp(76px, 10vw, 104px);
  --sec-y-sm: clamp(56px, 8vw, 72px);
  --maxw-text: 740px;
}

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

body {
  margin: 0;
  background: var(--neve);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--blu);
  text-decoration: none;
}

a:hover {
  color: var(--blu-notte);
}

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
}

p {
  margin: 0;
}

::selection {
  background: var(--blu);
  color: var(--neve);
}

/* `hidden` deve vincere su qualunque display. */
[hidden] {
  display: none !important;
}

/* I titoli dei capitoli, il nome in copertina e «La guida» in Libre Caslon Display,
   in maiuscole e minuscole come i titoli di unpavedroads.cc. Ha un solo peso:
   niente grassetto finto. */
.guida .cap-testa h2,
.copertina h1,
.copertina .laguida {
  font-family: var(--font-titolo);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  text-transform: none;
}

/* Il nome del luogo in copertina in corsivo, come i nomi dei luoghi sul sito. */
.copertina h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1.02;
  color: var(--neve);
}

/* --- B2 sopra guide.css e chrome.css ------------------------------------
   guide.css è lo stesso file delle altre guide (titoli dei capitoli in
   maiuscolo condensato, come NorthCape4000) e chrome.css arriva dopo questo
   file: qui si sale di specificità con `html body` invece di toccarli.
   Regole del sito: titoli in Libre Caslon in maiuscole e minuscole, frasi forti
   in Libre Caslon Text, Barlow Condensed maiuscolo solo per numeri ed etichette. */
html body .guida .cap-testa h2 {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.05;
}

html body .guida h3,
html body .guida h4 {
  font-family: var(--font-titolo);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}

html body .guida .forte {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.3;
}

/* L'occhiello della copertina: è .etichetta di guide.css (bas-guides ammette in
   copertina solo le classi del tema), qui senza il margine dei capitoli e nella
   ruggine chiara: la ruggine piena sulla targa petrolio sta a 2,6:1, la chiara
   a 6,4:1 (la stessa scelta del sito sulle sezioni scure). */
html body .copertina .etichetta {
  margin: 0 0 14px;
  color: var(--ghiaccio);
}

/* «La guida» in copertina: la riga sotto il nome del luogo, in tondo. */
html body .copertina .laguida {
  font: 400 clamp(30px, 5vw, 46px) / 1.05 var(--font-titolo);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ghiaccio);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   Unpaved Roads — ponte verso il lettore delle guide
   Il resto di questo file e guide.css vengono da unpaved-roads-guida@30812c4
   (tema/tokens.css, tema/guide.css): questo blocco no, è di bas-guides, come il
   ponte dei temi tge, nc4000 e tg.

   Scritto il 19/10/2026 sulla direzione B2 del sito (carta, petrolio scuro,
   ruggine), prima del collaudo su staging.

   La cornice del lettore (reader-html.css) e il cancello usano i nomi di token
   del tema tt: --wine, --cream, --olive, --apricot… Qui ricevono i valori B2:
   petrolio scuro al posto del vino, carta al posto della crema, ruggine al posto
   dell'oliva.

   Il cancello è un riquadro come il modulo della guida sul sito (cartiglio:
   carta, filetto petrolio di 1 px, angoli vivi), con l'unico bottone pieno
   ruggine della schermata, come «Scarica la guida» sul sito.

   Contrasti (WCAG AA, testo normale ≥ 4,5:1):
     --blu #1e3d4f su --neve ............... 10,7:1 (e neve sul petrolio, idem)
     --oro #a84b1c su --neve ............... 5,3:1
     --ink #1e2a30 su --neve ............... 13,7:1 (titolo del cancello)
     #fff su #a84b1c ....................... 5,7:1  (bottone del cancello)
     --ghiaccio #f2b48c su #1e3d4f ......... 6,4:1  (occhiello di copertina)
   ============================================================ */

:root {
  /* --- Colori con i nomi del tema tt ---------------------------------- */
  --wine: var(--blu);                    /* primario: marchio, barra di avanzamento, capitoli chiusi */
  --wine-deep: var(--blu-notte);         /* hover del primario */
  --wine-tint: var(--blu-velo);          /* velo petrolio: evidenza della ricerca */
  --cream: var(--neve);                  /* fondo della pagina e testo sui fondi pieni */
  --ink-warm: var(--muted);
  --olive: var(--oro);                   /* occhielli */
  --blush: var(--ghiaccio);              /* evidenziatore */
  --apricot: var(--neve);                /* riquadro del cancello: la carta, come il modulo del sito */
  --on-apricot: var(--muted);            /* testo secondario del cancello */
  --line-cream: var(--line-neve);

  /* --- Cornice del lettore (valori del chrome.css della guida) --------- */
  --barra-bg: rgba(250, 247, 241, 0.96);
  --spaziato-fg: rgba(250, 247, 241, 0.7);
  --targa-bg: rgba(30, 61, 79, 0.94);
  --velo-bg: rgba(14, 26, 33, 0.45);
  --copertina-h1: clamp(40px, 8vw, 72px);

  --pad-x-wide: clamp(24px, 6vw, 48px);
  --maxw-form: 640px;
}

/* --- Copertina --------------------------------------------------------
   reader-html.css arriva dopo questo file: si sale di specificità con
   .copertina.guida invece di toccare la cornice comune. Il nome del luogo in
   Libre Caslon Text corsivo, «La guida» in Libre Caslon Display. L'occhiello
   (.etichetta) è già sistemato nella parte che viene dalla guida. */
.copertina.guida h1 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.02;
  color: var(--neve);
}

.copertina.guida .laguida {
  margin: 0 0 14px;
  font: 400 clamp(30px, 5vw, 46px) / 1.05 var(--font-titolo);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ghiaccio);
}

/* --- Cancello ---------------------------------------------------------
   Un riquadro nella colonna, come il modulo «Gratis · la guida» del sito,
   invece della fascia a tutta larghezza della cornice. Bottone ruggine col
   testo bianco; il campo bianco col bordo petrolio, come sul sito. */
.guida .colonna .cancello {
  --gate-input-bg: #fff;
  --gate-input-border: var(--blu);
  --gate-btn-bg: var(--oro);
  --gate-btn-fg: #fff;
  --gate-btn-hover: #8f3e15;
  --gate-focus: var(--blu);
  margin: var(--sec-y-sm) auto 0;
  max-width: calc(var(--maxw-form) + 2 * var(--pad-x));
  padding: clamp(24px, 5vw, 32px) var(--pad-x) clamp(22px, 4vw, 28px);
  border: 1px solid var(--blu);
}

.guida .colonna .cancello h2 {
  font-family: var(--font-titolo);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--heading);
}

/* --- Didascalie -------------------------------------------------------
   Dal chrome.css della guida. */
.guida figure.foto figcaption {
  margin: 10px auto 0;
  max-width: var(--maxw-text);
  padding: 0 var(--pad-x);
  font: 400 var(--fs-xs) / 1.5 var(--font-body);
  color: var(--muted);
  text-align: center;
}