/* Il foglio comune delle pagine. I valori stanno in gettoni.css, il perché in /DIREZIONE.md. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--spazio-5); }
body {
  margin: 0;
  background: var(--colore-pietra);
  color: var(--colore-inchiostro);
  font-family: var(--carattere-testo);
  font-size: var(--testo-base);
  line-height: var(--interlinea);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--colore-mare); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--colore-mare); outline-offset: 3px; }
.zona-scura :focus-visible, .testata :focus-visible, .avviso :focus-visible { outline-color: var(--colore-giallo); }
h1, h2, h3 {
  font-family: var(--carattere-titolo);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spazio-4);
  text-wrap: balance;
}
h1 { font-size: var(--titolo-1); }
h2 { font-size: var(--titolo-2); }
h3 { font-size: var(--titolo-3); }
p { margin: 0 0 var(--spazio-4); }
.attacco { font-size: var(--testo-grande); line-height: 1.4; }
em, i { font-style: italic; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--spazio-4); top: -100px; z-index: 10;
  background: var(--colore-giallo); color: var(--colore-inchiostro);
  padding: var(--spazio-3) var(--spazio-4); font-weight: 700;
}
.salta:focus { top: var(--spazio-2); }

/* --- l'avviso del contratto: in cima a ogni pagina, leggibile ----------------------------- */
.avviso {
  margin: 0;
  background: var(--colore-inchiostro);
  color: var(--colore-pietra);
  font-size: var(--testo-piccolo);
  line-height: 1.4;
  padding: var(--spazio-2) var(--spazio-4);
  border-bottom: 1px solid var(--colore-bora);
}
.avviso strong { color: var(--colore-giallo); font-weight: 700; }

/* --- testata ----------------------------------------------------------------------------- */
.testata {
  background: var(--colore-inchiostro);
  color: var(--colore-pietra);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marchio vola" "menu menu";
  align-items: center;
  gap: 0 var(--spazio-4);
  padding: var(--spazio-2) var(--spazio-4) 0;
}
.marchio {
  grid-area: marchio;
  display: inline-flex; align-items: center; gap: var(--spazio-3);
  min-height: var(--bersaglio);
  color: var(--colore-pietra); text-decoration: none;
  font-family: var(--carattere-titolo); font-size: 1.375rem; line-height: 1;
}
.marchio svg { width: 44px; height: 22px; flex: none; }
.marchio span { font-family: var(--carattere-testo); font-size: var(--testo-piccolo); color: var(--colore-bora-chiaro); }
.menu { grid-area: menu; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--spazio-5); }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--bersaglio);
  color: var(--colore-pietra); text-decoration: none; font-size: 1.0625rem;
  border-bottom: 3px solid transparent;
}
.menu a:hover { border-bottom-color: var(--colore-bora-chiaro); }
.menu a[aria-current="page"] { border-bottom-color: var(--colore-giallo); }

/* il tasto che fa volare: l'unico giallo */
.vola {
  grid-area: vola;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2);
  min-height: var(--bersaglio); padding: 0 var(--spazio-5);
  background: var(--colore-giallo); color: var(--colore-inchiostro);
  font-family: var(--carattere-testo); font-weight: 700; font-size: 1.125rem;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--pressione), background-color 120ms linear;
}
.vola svg { width: 28px; height: 14px; }
.vola:hover { background: var(--colore-giallo-premuto); }
.vola:active { transform: translateY(2px); }
.vola--grande { min-height: 60px; font-size: 1.375rem; padding: 0 var(--spazio-6); }

@media (min-width: 900px) {
  .testata {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "marchio menu vola";
    padding: var(--spazio-2) var(--spazio-6);
  }
  .menu ul { justify-content: flex-end; padding-right: var(--spazio-4); }
}

/* --- impaginato ------------------------------------------------------------------------- */
.pagina { max-width: var(--pagina); margin: 0 auto; padding: 0 var(--spazio-4); }
@media (min-width: 900px) { .pagina { padding: 0 var(--spazio-6); } }
.colonna { max-width: var(--colonna); }

.testa-pagina { padding: var(--spazio-7) 0 var(--spazio-5); }
.testa-pagina .attacco { max-width: 34em; }
/* la riga della rotta sotto il titolo: tratteggio e un anello */
.rotta-riga {
  display: block; width: min(320px, 70%); height: 14px; margin: var(--spazio-4) 0 var(--spazio-5);
  color: var(--colore-mare);
}

/* il giornale di bordo: etichetta a margine, testo a destra */
.giornale { list-style: none; margin: 0; padding: 0; }
.voce {
  display: grid; grid-template-columns: 1fr; gap: var(--spazio-1) var(--spazio-6);
  padding: var(--spazio-5) 0; border-top: var(--filetto);
}
.voce:last-child { border-bottom: var(--filetto); }
.voce > .margine {
  font-family: var(--carattere-titolo); font-size: var(--titolo-3); line-height: 1.1;
  color: var(--colore-mare); font-variant-numeric: lining-nums;
}
.voce h2, .voce h3 { margin-bottom: var(--spazio-2); }
.voce p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .voce { grid-template-columns: 10rem minmax(0, var(--colonna)); }
}

/* foto a spigolo vivo, con il cartellino sotto */
figure { margin: 0; }
figure img { width: 100%; height: auto; background: var(--colore-filetto); }
figcaption {
  font-size: var(--testo-piccolo); color: var(--colore-bora); line-height: 1.4;
  padding-top: var(--spazio-2);
}
.foto-larga { margin: var(--spazio-6) 0; }
.coppia { display: grid; gap: var(--spazio-5); margin: var(--spazio-6) 0; align-items: start; }
@media (min-width: 760px) {
  .coppia { grid-template-columns: 1fr 1fr; gap: var(--spazio-6); }
  .coppia--testo-foto { grid-template-columns: minmax(0, var(--colonna)) 1fr; }
}

.sezione { padding: var(--spazio-7) 0; }

/* le zone piene e la merlatura che le separa: il profilo dei merli del castello, a stacco netto */
.zona-scura, .zona-parco { position: relative; color: var(--colore-pietra); }
.zona-scura { background: var(--colore-inchiostro); }
.zona-parco { background: var(--colore-leccio); }
.zona-scura a:not(.vola), .zona-parco a:not(.vola) { color: var(--colore-pietra); }
.zona-scura figcaption, .zona-parco figcaption { color: var(--colore-bora-chiaro); }
.zona-parco figcaption { color: #C5D3C8; }
.zona-scura .voce, .zona-parco .voce { border-color: rgba(244, 241, 234, 0.28); }
.zona-scura .voce > .margine { color: var(--colore-giallo); }
.zona-parco .voce > .margine { color: var(--colore-pietra); }
.merli::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px;
  background-repeat: repeat-x; background-position: left bottom; background-size: 40px 16px;
}
.zona-scura.merli::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16V0h22v8h18v8z' fill='%230E2233'/%3E%3C/svg%3E");
}
.zona-parco.merli::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16V0h22v8h18v8z' fill='%2327412F'/%3E%3C/svg%3E");
}

/* collegamento che esce dal sito: il segno si vede, e lo dice a chi legge lo schermo */
.esterno::after { content: " \2197"; white-space: nowrap; }

/* bottone secondario: testo sottolineato, alto quanto un dito */
.seconda {
  display: inline-flex; align-items: center; min-height: var(--bersaglio);
  font-size: 1.125rem; font-weight: 700;
}

/* --- piede ----------------------------------------------------------------------------- */
.piede {
  background: var(--colore-inchiostro); color: var(--colore-pietra);
  padding: var(--spazio-7) 0 var(--spazio-6); margin-top: var(--spazio-8);
  position: relative;
}
.piede a { color: var(--colore-pietra); }
.piede .avviso-piede { max-width: 40em; font-size: var(--testo-base); }
.piede ul { list-style: none; margin: var(--spazio-5) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--spazio-5); }
.piede li a { display: inline-flex; align-items: center; min-height: var(--bersaglio); }
.piede .nota { font-size: var(--testo-piccolo); color: var(--colore-bora-chiaro); margin: 0; }
.zona-scura + .piede, .zona-parco + .piede,
main:has(> .zona-scura:last-child, > .zona-parco:last-child) + .piede { margin-top: 0; }

/* --- home ----------------------------------------------------------------------------- */
.copertina { position: relative; background: var(--colore-inchiostro); color: var(--colore-pietra); overflow: hidden; }
.copertina picture img {
  width: 100%; height: min(78svh, 760px); min-height: 420px; object-fit: cover; object-position: 50% 45%;
}
.copertina .volo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.copertina .banda {
  background: var(--colore-inchiostro);
  padding: var(--spazio-5) var(--spazio-4) var(--spazio-6);
}
.copertina h1 { max-width: 13em; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.copertina .attacco { max-width: 32em; color: var(--colore-pietra); }
.copertina .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-3) var(--spazio-6); margin-top: var(--spazio-5); }
.copertina .seconda { color: var(--colore-pietra); }
@media (min-width: 900px) {
  .copertina picture img { height: min(88svh, 900px); }
  .copertina .banda {
    position: absolute; right: var(--spazio-6); bottom: var(--spazio-7);
    max-width: 34rem; padding: var(--spazio-6);
  }
}
@media (max-width: 899px) {
  .copertina picture img { height: 32svh; min-height: 230px; max-height: 420px; }
  .copertina .attacco { font-size: var(--testo-base); }
  .copertina h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); }
}

/* il gabbiano che plana nella copertina */
.cocal-volo { color: var(--colore-pietra); }
.scia { fill: none; stroke: var(--colore-giallo); stroke-width: 3; stroke-dasharray: 10 10; }
@media (prefers-reduced-motion: no-preference) {
  .js .cocal-volo { animation: plana 2400ms cubic-bezier(0.2, 0.7, 0.2, 1) both 300ms; }
  .js .scia { animation: traccia 2400ms cubic-bezier(0.2, 0.7, 0.2, 1) both 300ms; }
}
@keyframes plana {
  from { transform: translate(-60%, 30%) rotate(-8deg); }
  to { transform: none; }
}
@keyframes traccia {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* la carta del percorso */
.carta { display: grid; gap: var(--spazio-6); align-items: center; }
@media (min-width: 900px) { .carta { grid-template-columns: 1.1fr 1fr; } }
.carta figure svg { width: 100%; height: auto; }
.carta .confine { fill: none; stroke: var(--colore-bora-chiaro); stroke-width: 2; }
.carta .rotta { fill: none; stroke: var(--colore-pietra); stroke-width: 3; stroke-dasharray: 9 9; }
.carta .rotta-disegno { display: none; }
.carta .anello { fill: var(--colore-giallo); stroke: var(--colore-giallo); stroke-width: 4; }
.carta text { fill: var(--colore-pietra); font-family: var(--carattere-testo); font-size: 17px; }
.carta .numero { fill: var(--colore-inchiostro); font-weight: 700; font-size: 13px; }
.tappe { counter-reset: tappa; list-style: none; padding: 0; margin: 0 0 var(--spazio-5); }
.tappe li {
  counter-increment: tappa; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--spazio-3);
  padding: var(--spazio-2) 0; border-top: 1px solid rgba(244, 241, 234, 0.28);
}
.tappe li::before {
  content: counter(tappa); font-family: var(--carattere-titolo); font-size: 1.375rem; line-height: 1.1;
  color: var(--colore-giallo);
}
@media (prefers-reduced-motion: no-preference) {
  /* una copertura del colore del mare che si ritira lungo la rotta: il tratteggio compare man mano */
  .js .carta .rotta-disegno { display: inline; stroke-dasharray: var(--lunghezza) var(--lunghezza); stroke-dashoffset: 0; }
  .js .carta.in-vista .rotta-disegno { transition: stroke-dashoffset 2600ms cubic-bezier(0.3, 0.1, 0.2, 1); stroke-dashoffset: calc(-1 * var(--lunghezza)); }
  .js .carta .anello-gruppo { opacity: 0; transition: opacity 300ms linear; }
  .js .carta.in-vista .anello-gruppo { opacity: 1; transition-delay: calc(var(--i) * 280ms); }
}

/* modi di volare */
.modi { display: grid; gap: 0; }
@media (min-width: 900px) { .modi { grid-template-columns: repeat(3, 1fr); gap: var(--spazio-6); } }
.modi > div { border-top: 1px solid var(--colore-inchiostro); padding: var(--spazio-4) 0 var(--spazio-5); }
.modi h3 { font-size: 1.5rem; margin-bottom: var(--spazio-2); }
.modi p { margin: 0; }

/* --- classifica -------------------------------------------------------------------- */
.tabella-classifica { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.tabella-classifica caption { text-align: left; }
.tabella-classifica th {
  text-align: left; font-weight: 700; font-size: var(--testo-piccolo); color: var(--colore-bora);
  padding: 0 var(--spazio-2) var(--spazio-2); border-bottom: 1px solid var(--colore-inchiostro);
}
.tabella-classifica td {
  height: 52px; padding: 0 var(--spazio-2); border-bottom: var(--filetto); vertical-align: middle;
  white-space: nowrap;
}
.tabella-classifica td.nome { white-space: normal; overflow-wrap: anywhere; max-width: 14rem; }
.tabella-classifica .pos { width: 3rem; font-family: var(--carattere-titolo); font-size: 1.375rem; color: var(--colore-mare); }
.tabella-classifica .num { text-align: right; }
.tabella-classifica th.num { text-align: right; }
.tabella-classifica tr.mia td { background: #FBEFC6; }
.tabella-classifica tr.mia .nome::after { content: " (tu)"; color: var(--colore-bora); }
.scheletro td span { display: inline-block; height: 0.9em; width: 4em; background: #E6E1D6; vertical-align: middle; }
.scheletro td.nome span { width: 9em; }
@media (max-width: 520px) {
  .tabella-classifica .anelli-col { display: none; }
  .tabella-classifica td, .tabella-classifica th { padding-left: 4px; padding-right: 4px; }
}
.stato-classifica { min-height: 3em; }
.record-personale { padding: var(--spazio-4) 0; border-top: var(--filetto); border-bottom: var(--filetto); margin-bottom: var(--spazio-5); }

/* --- 404 ------------------------------------------------------------------------- */
.smarrito { display: grid; gap: var(--spazio-5); align-items: center; padding: var(--spazio-7) 0; }
@media (min-width: 900px) { .smarrito { grid-template-columns: 1fr 1fr; } }
.cocal-smarrito { border: 0; background: none; padding: 0; cursor: pointer; color: var(--colore-inchiostro); width: 100%; min-height: var(--bersaglio); }
.cocal-smarrito svg { width: 100%; height: auto; }
.cocal-smarrito .gabbiano-404 { transform-box: fill-box; transform-origin: center; }
.cocal-smarrito.riparte .gabbiano-404 { transition: transform 1100ms cubic-bezier(0.5, 0, 0.7, 0.4); transform: translate(600px, -260px) rotate(-12deg); }
@media (prefers-reduced-motion: no-preference) {
  .cocal-smarrito .gabbiano-404 { animation: ondeggia 3.2s ease-in-out infinite alternate; }
  .cocal-smarrito.riparte .gabbiano-404 { animation: none; }
}
@keyframes ondeggia { from { transform: rotate(-6deg) translateY(-4px); } to { transform: rotate(6deg) translateY(4px); } }
.suggerimento { font-size: var(--testo-grande); }

/* liste del testo */
.elenco { padding-left: 1.2em; margin: 0 0 var(--spazio-4); }
.elenco li { margin-bottom: var(--spazio-2); }
.crediti-voce { padding: var(--spazio-4) 0; border-top: var(--filetto); }
.crediti-voce p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* collegamenti che stanno da soli su una riga: alti almeno quanto un dito */
.elenco a, .crediti-voce a, h2 a, h3 a { display: inline-flex; align-items: center; min-height: var(--bersaglio); }
.elenco li { margin-bottom: 0; }
@media (max-width: 380px) {
  .menu ul { gap: 0 var(--spazio-4); }
  .menu a { font-size: 1rem; }
  .marchio span { display: none; }
}

/* Bodoni piccola: taglio ottico per le misure piccole, così i filetti sottili (4, A) non spariscono */
.voce > .margine, .tappe li::before, .tabella-classifica .pos, .marchio, h3, .modi h3 {
  font-variation-settings: "opsz" 11;
  font-weight: 600;
}
.zona-parco a:not(.vola) { color: var(--colore-pietra); }

/* le etichette della carta del percorso staccano dalla rotta con un bordo del colore del fondo */
.carta svg text { paint-order: stroke; stroke: var(--colore-inchiostro); stroke-width: 5px; stroke-linejoin: round; }