/* Pagine di contenuto (castello, parco, percorso, classifica, privacy, crediti): classi con prefisso pg-.
   La veste (gettoni.css e base.css) resta com'è: qui c'è solo quello che serve alle pagine.
   Raggio 0, filo da 1 px, nessuna ombra, nessuna sfumatura, nessuna sfocatura; fra due zone passa solo il righello. */

/* ===== comune: inizio ===== */
/* Il capo della pagina: un cartiglio basso col righello in testa. Lascia vedere l'inizio di quello che segue
   e porta il comando della pagina. Niente bussola: nelle testate non diceva che cosa indicava. */
.pg-capo { position: relative; border: var(--filo) solid var(--inchiostro); padding: 0 var(--aria) var(--aria); }
.pg-capo > .righello:first-child { margin: 0 calc(-1 * var(--aria)) 20px; }
.pg-titolo { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 14px; max-width: 17em; }
.pg-sotto { max-width: 38em; margin-bottom: 20px; }
.pg-azione { margin: 0; }
.pg-capo > :last-child { margin-bottom: 0; }

/* Le sezioni: titolo, colonna di testo, e accanto (dai 1100 px) la figura o il registro */
.pg-sezione { scroll-margin-top: 8px; }
.pg-sezione > h2 { max-width: 20em; }
.pg-due { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 48px; align-items: start; }
.pg-due > * { min-width: 0; }
@media (min-width: 1100px) {
  .pg-due { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
  .pg-due.pg-rovescio { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); }
}

/* Le foto: filo da 1 px, didascalia sotto con autore e licenza */
.pg-foto { margin: 0; max-width: 60rem; }
.pg-foto picture, .pg-foto img { display: block; }
.pg-foto img { width: 100%; height: auto; border: var(--filo) solid var(--inchiostro); background: var(--golfo); }
.pg-dida { font-size: var(--c-nota); line-height: 1.45; padding: 8px 0 0; max-width: 44rem; }
.pg-dida-fonte { display: block; color: var(--golfo); }

/* L'indice delle sezioni: collegamenti alti 44 px in fila, sotto il capo */
.pg-indice { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0; padding: 6px 0 0; list-style: none; }
.pg-indice a { display: inline-flex; align-items: center; min-height: var(--bersaglio); font-size: var(--c-menu); text-underline-offset: 4px; }

@media (max-width: 860px) {
  .pg-capo > .righello:first-child { margin-bottom: 16px; }
}
/* ===== comune: fine ===== */

/* ===== classifica: inizio ===== */
/* La classifica: righe di registro, dieci posti sempre riservati. Classi con prefisso pg-cl-.
   Ogni riga è una griglia di altezza fissa (le celle si allineano sulla linea di base): scheletri, voci vere,
   posti liberi e riga di chi guarda sono alti uguali per costruzione, qualunque carattere arrivi nel soprannome.
   La tabella resta una <table> vera, coi ruoli scritti nel markup perché la griglia non li tolga ai lettori di schermo.
   Senza JavaScript il registro non si disegna (la classe js su <html> la mette /sito/comune.js). */
.pg-cl-registro { position: relative; max-width: 62rem; }
html:not(.js) .pg-cl-registro { display: none; }
.pg-cl-senza { max-width: var(--colonna); }
.pg-cl-tabella, .pg-cl-tabella caption, .pg-cl-tabella thead, .pg-cl-tabella tbody { display: block; }
.pg-cl-tabella { margin: 0; }
.pg-cl-tabella:focus-visible { outline-offset: 6px; }
.pg-cl-tabella .pg-cl-riga, .pg-cl-tabella .pg-cl-testa { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 5.5rem 6rem 6.5rem 6.5rem; column-gap: 20px; align-items: baseline; height: 49px; padding: 11px 0 0; border-bottom: var(--filo) solid var(--inchiostro); overflow: hidden; }
.pg-cl-tabella .pg-cl-testa { height: 41px; padding-top: 10px; }
.pg-cl-tabella .pg-cl-riga > *, .pg-cl-tabella .pg-cl-testa > * { display: block; min-width: 0; height: auto; padding: 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-cl-tabella .pg-cl-pos, .pg-cl-tabella .pg-cl-punti, .pg-cl-tabella .pg-cl-tempo { text-align: right; }
.pg-cl-tabella .pg-cl-pos { overflow: visible; }
.pg-cl-tabella .pg-cl-riga .pg-cl-punti { font-weight: 700; }
.pg-cl-tabella .pg-cl-rombo { margin-right: 9px; vertical-align: 1px; }
.pg-cl-tabella .pg-cl-libera, .pg-cl-tabella .pg-cl-spenta { color: var(--golfo); }
.pg-cl-tabella .pg-cl-larga { grid-column: 1 / -1; }
/* la riga di chi guarda sta sotto un filo forte, staccata dai primi dieci */
.pg-cl-tua { border-top: var(--filo) solid var(--inchiostro); }

/* il cartello: la frase lunga stesa sopra le prime righe del registro, senza spostare niente */
.pg-cl-cartello { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 0; overflow: hidden; background: var(--carta); }
.pg-cl-cartello.pg-cl-aperto { height: auto; overflow: visible; padding: 14px 0 13px; border-bottom: var(--filo) solid var(--inchiostro); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.pg-cl-frase { margin: 0; max-width: 40em; font-size: var(--c-lettura); }
.pg-cl-comando { margin: 0; }

/* sotto la tabella: quanti voli, e il comando per vederli tutti. L'altezza è riservata. */
.pg-cl-piede { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; min-height: 68px; padding: 12px 0; }
.pg-cl-conto { margin: 0; font-size: var(--c-nota); }

@media (max-width: 720px) {
  /* sul telefono ogni voce va su due righe: posto, soprannome e punti; sotto tempo, timone e data */
  .pg-cl-tabella .pg-cl-riga, .pg-cl-tabella .pg-cl-testa { grid-template-columns: 3rem max-content minmax(0, 1fr) max-content; grid-template-rows: 28px 22px; column-gap: 0; height: 69px; padding: 9px 0 0; }
  .pg-cl-tabella .pg-cl-testa { grid-template-rows: 20px 20px; height: 55px; padding-top: 7px; }
  .pg-cl-tabella .pg-cl-pos { grid-column: 1; grid-row: 1; padding-right: 12px; }
  .pg-cl-tabella .pg-cl-nome { grid-column: 2 / 4; grid-row: 1; }
  .pg-cl-tabella .pg-cl-punti { grid-column: 4; grid-row: 1; padding-left: 12px; }
  .pg-cl-tabella .pg-cl-tempo { grid-column: 2; grid-row: 2; text-align: left; font-size: var(--c-nota); }
  .pg-cl-tabella .pg-cl-timone { grid-column: 3; grid-row: 2; padding-left: 14px; font-size: var(--c-nota); }
  .pg-cl-tabella .pg-cl-data { grid-column: 4; grid-row: 2; text-align: right; font-size: var(--c-nota); }
  .pg-cl-tabella .pg-cl-larga { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; white-space: normal; line-height: 1.4; padding-bottom: 9px; }
  .pg-cl-piede { min-height: 124px; align-items: flex-start; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; }
  .pg-cl-frase { font-size: var(--c-testo); }
}

/* due momenti, nella lingua della carta: le righe entrano a scatto secco, una dopo l'altra,
   e il rombo della propria riga si assesta come l'ago della bussola. Solo transform e opacity. */
@media (prefers-reduced-motion: no-preference) {
  .pg-cl-entra { animation: pg-cl-entra var(--secco-durata) var(--secco) both; animation-delay: calc(var(--i, 0) * 34ms); }
  .pg-cl-entra .pg-cl-rombo { animation: pg-cl-ago var(--ago-ingresso) var(--ago) both; }
  @keyframes pg-cl-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @keyframes pg-cl-ago { from { transform: rotate(-70deg); } to { transform: rotate(45deg); } }
}
/* ===== classifica: fine ===== */

/* ===== privacy e crediti: inizio ===== */
/* La testata bassa delle due pagine di servizio: il righello, il titolo (su una riga dai 900 px) e una frase.
   Niente comando e niente bussola: «Vola» resta nella testata del sito. */
.pg-capo.pg-capo-basso { padding-bottom: 20px; }
.pg-capo.pg-capo-basso > .righello:first-child { margin-bottom: 14px; }
.pg-capo-basso .pg-titolo { font-size: clamp(26px, 3.3vw, 44px); max-width: none; margin-bottom: 10px; text-wrap: balance; }
.pg-capo-basso .pg-sotto { max-width: 46em; text-wrap: pretty; }
@media (min-width: 900px) { .pg-capo-basso .pg-titolo br { display: none; } }

/* La privacy: il registro di che cosa parte e che cosa resta, e la memoria del dispositivo. Classi pg-pr-. */
.pg-pr-testo { max-width: var(--colonna); }
.pg-pr-testo p { font-size: var(--c-lettura); margin: 0 0 14px; }
.pg-pr-rotte, .pg-pr-chiavi { max-width: 62rem; margin: 18px 0 22px; }
.pg-pr-rotte > li, .pg-pr-chiavi > li { flex-wrap: wrap; gap: 4px 18px; }
.pg-pr-rotte .rombo { align-self: center; margin: 0 4px 0 3px; }
.pg-pr-dove { flex: none; width: 13.5rem; font-weight: 700; }
.pg-pr-cosa { flex: 1 1 17rem; min-width: 0; }
.pg-pr-chiave { flex: none; width: 10.5rem; font-family: var(--cifre); font-size: var(--c-nota); }
.pg-pr-legenda { font-size: var(--c-nota); max-width: var(--colonna); margin: 0 0 8px; }
.pg-pr-legenda .rombo { margin: 0 8px 0 3px; vertical-align: -1px; }
.pg-pr-data { max-width: var(--colonna); }
@media (max-width: 520px) {
  .pg-pr-dove { width: calc(100% - 40px); }
  .pg-pr-cosa, .pg-pr-rotte .pg-pr-cosa { flex-basis: 100%; }
  .pg-pr-chiave { width: 100%; }
}
/* il secondo momento: i rombi del registro si posano mentre la riga entra in vista */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pg-pr-rotte > li > .rombo { animation: pg-pr-posa linear both; animation-timeline: view(); animation-range: entry 0% cover 16%; }
    @keyframes pg-pr-posa { from { transform: rotate(-45deg) scale(.78); } to { transform: rotate(45deg) scale(1); } }
  }
}

/* I crediti: la pagina nasce da CREDITI.md (node strumenti/pagine-foto.mjs pagina). Classi pg-cr-. */
.pg-cr-premessa { padding-top: 22px; }
.pg-cr-testo { max-width: var(--colonna); font-size: var(--c-lettura); margin: 0 0 14px; }
.pg-cr-sezione, .pg-cr-premessa { overflow-wrap: break-word; }
.pg-cr-sezione code, .pg-cr-premessa code { font-family: var(--cifre); font-size: var(--c-nota); overflow-wrap: anywhere; }
.pg-cr-guida { display: block; overflow: hidden; margin: 0 0 24px; }
.pg-cr-nome { margin: 28px 0 8px; }
.pg-cr-scheda { max-width: 62rem; margin: 0 0 6px; }
.pg-cr-voce { flex: none; width: 11.5rem; font-weight: 700; font-size: var(--c-nota); }
.pg-cr-valore { flex: 1; min-width: 0; }
.pg-cr-valore .collegamento, .pg-cr-tabella .collegamento { padding: 0; margin: -11px 0 -10px; vertical-align: baseline; }
.pg-cr-tabella { margin: 6px 0 0; }
.pg-cr-tabella th, .pg-cr-tabella td { vertical-align: top; height: auto; min-height: 48px; }
@media (max-width: 720px) {
  .pg-cr-scheda > li { flex-direction: column; gap: 2px; }
  .pg-cr-voce { width: auto; }
}
/* la tabella delle foto sotto i 1100 px si ripiega: una foto per blocco, ogni cella col nome della sua colonna */
@media (max-width: 1099px) {
  .pg-cr-tabella, .pg-cr-tabella tbody, .pg-cr-tabella tr, .pg-cr-tabella td { display: block; }
  .pg-cr-tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pg-cr-tabella tr { padding: 12px 0 10px; border-bottom: var(--filo) solid var(--inchiostro); }
  .pg-cr-tabella td { min-height: 0; padding: 3px 0; border: 0; }
  .pg-cr-tabella td::before { content: attr(data-etichetta); display: block; font-weight: 700; font-size: var(--c-nota); }
  .pg-cr-tabella .collegamento { margin: 0; }
}
/* il secondo momento: il righello di ogni sezione scorre in sede mentre la sezione entra in vista */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pg-cr-guida > .righello { animation: pg-cr-scorre linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    @keyframes pg-cr-scorre { from { transform: translateX(-82%); } to { transform: translateX(0); } }
  }
}
/* ===== privacy e crediti: fine ===== */
/* ===== castello e parco: inizio ===== */
/* Classi pg-ca- (castello) e pg-pa- (parco). I momenti sono solo CSS: l'ago del capo lo muove la veste,
   qui i segni delle righe seguono lo scorrimento (animation-timeline: view()), solo transform e opacity,
   e senza supporto o con «meno movimento» restano nello stato finale, leggibile da fermo. */

/* testo e figura affiancati in parti quasi uguali, dai 1000 px */
.pg-ca-coppia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.pg-ca-coppia > * { min-width: 0; }
.pg-ca-coppia .colonna > p:first-child { margin-top: 0; }
@media (min-width: 1000px) { .pg-ca-coppia { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pg-ca-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
@media (min-width: 700px) { .pg-ca-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* la testata col luogo: il titolo, poi la foto (al computer a destra, per tutta l'altezza della testata), la riga e il comando */
.pg-capo-luogo { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
.pg-capo-luogo > .righello:first-child { grid-column: 1 / -1; }
.pg-capo-luogo > .pg-titolo { max-width: none; text-wrap: balance; }
.pg-capo-luogo > .pg-foto { max-width: none; margin: 2px 0 16px; }
@media (min-width: 1000px) {
  .pg-capo-luogo { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); grid-template-rows: auto auto auto 1fr; }
  .pg-capo-luogo > .pg-titolo, .pg-capo-luogo > .pg-sotto, .pg-capo-luogo > .pg-azione { grid-column: 1; }
  .pg-capo-luogo > .pg-foto { grid-column: 2; grid-row: 2 / -1; margin: 0; }
  .pg-capo-luogo > .pg-azione { align-self: start; }
}

/* il giornale di bordo: il segno, l'anno in cifre, il fatto */
.pg-ca-date { max-width: 52rem; margin: 18px 0 0; }
.pg-ca-date > li { gap: 6px 14px; }
/* il segno sta sulla prima riga, accanto all'anno, staccato dal margine */
.pg-ca-segno { flex: none; align-self: flex-start; margin: 7px 0 0 5px; }
.pg-ca-date .pg-ca-anno { flex: none; width: 6.1em; font-weight: 700; text-align: left; }
.pg-ca-fatto { flex: 1; min-width: 0; font-size: var(--c-lettura); }

/* che cosa si vede dal cielo: nome di terra in Besley, poi la riga */
.pg-ca-cielo { margin: 14px 0 0; }
.pg-ca-cielo > li { gap: 4px 18px; }
.pg-ca-nome { flex: none; width: 8.2em; font-family: var(--titoli); font-weight: 700; font-size: 18px; }
.pg-ca-cielo > li > span { flex: 1; min-width: 0; font-size: var(--c-lettura); }
.pg-ca-poi, .pg-pa-poi { margin-top: 22px; }
@media (max-width: 520px) {
  .pg-ca-cielo > li { flex-direction: column; }
  .pg-ca-nome { width: auto; }
}

/* la riga della visita e la chiusura della pagina */
.pg-ca-visita, .pg-pa-visita { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4em; margin: 0; font-size: var(--c-lettura); }
.pg-ca-visita .collegamento, .pg-pa-visita .collegamento { font-size: inherit; }
.pg-ca-stacco, .pg-pa-stacco { margin: 26px 0 26px; max-width: var(--colonna); }
.pg-ca-fine, .pg-pa-fine { margin: 0; }

/* il parco: i luoghi in griglia, ognuno col titolo, due righe e la foto */
.pg-pa-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 28px; align-items: start; }
@media (min-width: 700px) { .pg-pa-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pg-pa-griglia:not(.pg-pa-due) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-pa-luogo { display: flex; flex-direction: column; min-width: 0; }
.pg-pa-luogo > p { margin: 0 0 14px; font-size: var(--c-lettura); max-width: 34em; }
@media (min-width: 700px) { .pg-pa-luogo > p { min-height: 4.6em; } }

/* dove sta ogni luogo: l'ago, il nome, i metri, la direzione */
.pg-pa-dove { max-width: 52rem; margin: 18px 0 0; }
.pg-pa-dove > li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ago nome nome" "ago metri verso"; column-gap: 14px; row-gap: 2px; align-items: center; justify-items: start; }
.pg-pa-ago { grid-area: ago; display: block; justify-self: center; overflow: visible; transform: rotate(var(--verso, 0deg)); }
.pg-pa-nome { grid-area: nome; font-family: var(--titoli); font-weight: 700; font-size: 18px; }
.pg-pa-metri { grid-area: metri; }
.pg-pa-verso { grid-area: verso; justify-self: start; }
@media (min-width: 700px) {
  .pg-pa-dove > li { grid-template-columns: 26px minmax(0, 1fr) 5.5em 9.5em; grid-template-areas: "ago nome metri verso"; }
  .pg-pa-metri { justify-self: end; }
}
.pg-pa-fonte { max-width: 52rem; }
/* i tre posti in righe di registro, e sotto le foto in fila: tagliate tutte a 3:2, così finiscono alla stessa altezza */
.pg-pa-posti { max-width: 52rem; margin-top: 6px; }
.pg-pa-posti .pg-ca-nome { width: 12.5em; }
.pg-pa-fila .pg-foto img, .pg-pa-griglia .pg-foto img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 520px) { .pg-pa-posti .pg-ca-nome { width: auto; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* il segno del giornale di bordo si riempie mentre la riga sale nello schermo */
    .pg-ca-segno { animation: pg-ca-riempi linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    @keyframes pg-ca-riempi { from { opacity: .25; transform: rotate(45deg) scale(.3); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
    /* l'ago di ogni luogo parte dal nord e arriva sulla sua direzione mentre la riga entra: segue lo scorrimento
       senza molla, e a riga entrata indica la direzione vera */
    .pg-pa-ago { animation: pg-pa-punta linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes pg-pa-punta { from { transform: rotate(0deg); } to { transform: rotate(var(--verso, 0deg)); } }
  }
}
/* ===== castello e parco: fine ===== */
/* ===== percorso: inizio ===== */
/* La pagina del percorso: la carta (pg-mappa*), le tappe (pg-tappa*), il resto (pg-pe-*).
   La carta è un SVG generato da strumenti/pagine-mappa.mjs coi dati veri; rombi ed etichette sono HTML sopra,
   in percentuale sulla tela, che ha le proporzioni del riquadro: al telefono la vista ne mostra la fascia centrale. */
.pg-pe-due { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
.pg-pe-due > * { min-width: 0; }
@media (min-width: 1100px) {
  .pg-pe-due { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1100px) and (min-height: 760px) {
  .pg-pe-due > #mappa { position: sticky; top: 0; }
}
.pg-mappa-fig { margin: 0; }
.pg-mappa { aspect-ratio: 1006 / 755; }
.pg-mappa-tela { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 1006 / 755; transform: translateX(-50%); }
.pg-mappa-tela > svg { display: block; width: 100%; height: 100%; }
.pg-mappa-tela > p, .pg-mappa-punto { position: absolute; margin: 0; }
.pg-mappa-punto { transform: translate(-50%, -50%) rotate(45deg); z-index: 1; }
.pg-mappa-speciale { outline: 1px solid var(--inchiostro); outline-offset: 2px; }
.pg-mappa-et { z-index: 2; }
.pg-mappa-et[data-pos="destra"] { transform: translate(14px, -50%); }
.pg-mappa-et[data-pos="sinistra"] { transform: translate(calc(-100% - 14px), -50%); }
.pg-mappa-et[data-pos="sopra"] { transform: translate(-50%, calc(-100% - 13px)); }
.pg-mappa-et[data-pos="sotto"] { transform: translate(-50%, 13px); }
.pg-mappa-et[data-pos="sotto"][data-largo] { transform: translate(-50%, 34px); }
.pg-mappa-acqua { transform: translateY(-50%); }
/* il nome del golfo sta in basso a sinistra, nel mare aperto. Fra 1100 e 1439 px la carta sta nella colonna stretta e lì
   il nome finirebbe sotto i cartellini del portico e della Porta della Bora (misurato a 13 larghezze, contro i
   cartellini e contro la rotta): in quella fascia non si mostra, piuttosto che coprire una tappa */
@media (min-width: 1100px) and (max-width: 1439px) { .pg-mappa-acqua:not(.pg-mappa-largo) { display: none; } }
.pg-mappa-scala, .pg-mappa-nord { color: var(--carta); font-size: var(--c-nota); line-height: 1; }
.pg-mappa-scala { transform: translateY(-80%); }
.pg-mappa-nord { transform: translateX(-50%); font-weight: 700; }
.pg-mappa-punto.attiva { transform: translate(-50%, -50%) rotate(45deg) scale(1.6); z-index: 3; }
.pg-mappa-et.attiva { background: var(--inchiostro); color: var(--carta); z-index: 4; }
.pg-mappa-et.attiva b { color: var(--carta); }

/* le tappe: righe di registro col numero, il nome, la riga e la quota dell'anello */
.pg-tappe { margin: 0; }
.pg-tappe > .pg-tappa { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; padding-left: 10px; padding-right: 10px; }
.pg-tappa-n { text-align: right; font-weight: 700; }
.pg-tappa-nome { display: block; font-family: var(--titoli); font-size: 18px; line-height: 1.25; }
.pg-tappa-riga { display: block; font-size: var(--c-testo); }
.pg-tappa-quota { font-size: var(--c-nota); white-space: nowrap; }
.pg-tappa-speciale .pg-tappa-n { color: var(--rosso); }
.pg-tappa.attiva { background: var(--inchiostro); color: var(--carta); }
.pg-tappa.attiva .pg-tappa-n { color: inherit; }
.js .pg-tappa { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* premuto: la riga e la voce dell'indice scendono di 2 px, anche col dito */
.js .pg-tappa:active, .pg-indice a:active { transform: translateY(var(--premuto)); }
.pg-tappa:focus-visible { outline: 3px solid var(--rosso); outline-offset: -3px; }
.pg-tappa.attiva:focus-visible { outline-color: var(--carta); }

/* le regole e il timone */
.pg-pe-regole td.cifra { white-space: normal; min-width: 8.5em; text-wrap: balance; }
@media (min-width: 721px) { .pg-pe-regole td.cifra { white-space: nowrap; } }
.pg-pe-regole th.cifra { white-space: normal; }
.pg-pe-timone > li { display: block; }
.pg-pe-timone strong { display: block; font-family: var(--titoli); font-size: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .pg-mappa-punto { transition: transform var(--secco-durata) var(--secco); }
  /* fondo e testo si scambiano a taglio netto: si muove solo il premuto */
  .pg-tappa, .pg-indice a { transition: transform var(--secco-durata) var(--secco); }
  /* la rotta parte nascosta dal primo disegno e si traccia con la penna; se mappa.js non arriva, dopo 4 s si traccia da sé */
  .js [data-mappa] .pg-mappa-rotta { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pg-traccia var(--penna-durata) var(--penna) 4s forwards; }
  .js [data-mappa].pg-vivo .pg-mappa-rotta { animation: none; }
  .js [data-mappa].pg-disegna .pg-mappa-rotta { animation: none; stroke-dashoffset: 0; transition: stroke-dashoffset var(--penna-durata) var(--penna); }
}
@keyframes pg-traccia { to { stroke-dashoffset: 0; } }

@media (max-width: 720px) {
  .pg-mappa { aspect-ratio: 786 / 755; }
  .pg-mappa-nome, .pg-mappa-largo { display: none; }
  .pg-mappa-et { padding: 2px 6px 3px; }
  /* al telefono il nome d'acqua scende a 16 px: a 19 arrivava sotto il cartellino della tappa 3 */
  .etichetta.pg-mappa-acqua { font-size: 16px; }
  /* la carta sale: meno aria sopra «La mappa», che al telefono viene subito dopo la testata */
  .pg-pe-due > #mappa { padding-top: 20px; }
  .pg-mappa-et b { margin-right: 0; }
  .pg-mappa-et[data-pos="destra"] { transform: translate(12px, -50%); }
  .pg-mappa-et[data-pos="sinistra"], .pg-mappa-et[data-tel="sinistra"] { transform: translate(calc(-100% - 12px), -50%); }
  .pg-mappa-et[data-pos="sopra"], .pg-mappa-et[data-tel="sopra"] { transform: translate(-50%, calc(-100% - 11px)); }
  .pg-mappa-et[data-pos="sotto"], .pg-mappa-et[data-pos="sotto"][data-largo] { transform: translate(-50%, 11px); }
  /* il cartellino del porto di Grignano sta in cima alla carta: al telefono sopra il punto lo taglia la cornice, quindi va a destra */
  .pg-mappa-et[data-punto="pt-10"][data-pos="sopra"] { transform: translate(12px, -50%); }
  .pg-tappe > .pg-tappa { grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: 0 10px; padding-left: 4px; padding-right: 4px; }
}
/* la testata del percorso: dai 1100 px il titolo a sinistra, la riga e il comando a destra, così la carta
   sale sopra la piega; sotto, «I punti» e «Il timone» stanno affiancati nella stessa griglia di carta e tappe */
.pg-pe-capo-lato > :last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
  .pg-pe-capo { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .pg-pe-capo > .righello:first-child { grid-column: 1 / -1; }
  .pg-pe-capo .pg-titolo { margin-bottom: 0; }
}
/* «Vola il percorso» a 28 px è largo 345 px e usciva dal riquadro (324 px utili a 390): sotto i 480 px scende a 24 px, alto sempre 64 */
@media (max-width: 480px) {
  .pg-pe-vola.comando.grande { font-size: 24px; padding-left: 20px; padding-right: 24px; gap: 14px; max-width: 100%; }
}
/* ===== percorso: fine ===== */
/* ===== percorso, schermi da 320 px: inizio ===== */
/* «Vola il percorso» a 28 px non sta in 288 px: sotto i 360 px il comando grande della pagina scende a 22 px (resta alto 64) */
@media (max-width: 360px) {
  .pg-pe-vola.comando.grande { font-size: 22px; padding-left: 16px; padding-right: 20px; gap: 12px; }
  /* sotto i 360 px «Golfo di Trieste» non sta fra il bordo e il cartellino della tappa 3 senza toccarlo: si toglie */
  .etichetta.pg-mappa-acqua { display: none; }
}
/* ===== percorso, schermi da 320 px: fine ===== */