/* Miramare in volo: gettoni e stile del sito, dalla direzione «Becco di cocal» (DIREZIONE.md).
   Raggio 0, nessuna ombra, nessuna sfumatura: campiture piene e l'orizzonte. */
@font-face { font-family: "Archivo"; src: url("/caratteri/titoli.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --piuma: #F5F2EB; --mare: #0D3B5E; --inchiostro: #14181C; --mantello: #5B6872; --schiuma: #DCE6EC;
  --becco: #F2B417; --macchia: #D2261C;
  --carattere: "Archivo", system-ui, sans-serif;
  --t-piccolo: 14px; --t-avviso: 15px; --t-testo: 17px; --t-voce: 19px; --t-azione: 20px; --t-h2: 30px;
  --t-h1: clamp(44px, 11vw, 128px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 48px; --s7: 64px;
  --bersaglio: 44px; --azione-alta: 60px; --pausa: 56px;
  --filetto: 2px solid var(--inchiostro); --riga: 1px solid var(--mantello);
  --colpo: 140ms cubic-bezier(.3, 0, .2, 1);
  --planata: 520ms cubic-bezier(.16, .84, .24, 1);
  --virata: 260ms cubic-bezier(.34, 1.4, .64, 1);
  --becco-forma: polygon(0 0, calc(100% - 22px) 0, 100% 55%, calc(100% - 22px) 100%, 0 100%);
  --margine: 20px;
}
@media (min-width: 1000px) { :root { --margine: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--piuma); color: var(--inchiostro); font: 400 var(--t-testo)/1.5 var(--carattere); font-stretch: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--macchia); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: var(--s3); top: -100px; background: var(--becco); color: var(--inchiostro); padding: var(--s3) var(--s4); z-index: 50; font-weight: 700; }
.salta:focus { top: var(--s3); }

/* l'avviso non ufficiale: prima riga di ogni pagina, fascia piena */
.avviso-ufficiale { background: var(--inchiostro); color: var(--piuma); font-size: var(--t-avviso); line-height: 1.4; padding: 10px var(--margine); margin: 0; }
.avviso-ufficiale::before { content: "Non ufficiale. "; color: var(--becco); font-weight: 700; font-stretch: 112%; }

/* intestazione */
.testata { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: 0 var(--margine); min-height: 64px; border-bottom: var(--filetto); }
.marchio { display: inline-flex; align-items: center; gap: 10px; min-height: var(--bersaglio); font-weight: 800; font-stretch: 125%; font-size: 20px; letter-spacing: -.01em; text-decoration: none; }
.marchio::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--inchiostro); }
.voci { display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.voci a { display: inline-flex; align-items: center; min-height: var(--bersaglio); padding: 0 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.voci a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--inchiostro); }
.voci a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.voce-vola { display: inline-flex; align-items: center; min-height: var(--bersaglio); background: var(--becco); font-weight: 800; font-stretch: 112%; padding: 0 18px; text-decoration: none; clip-path: var(--becco-forma); padding-right: 30px; transition: transform var(--colpo); }
.voce-vola:hover { transform: translateX(3px); }
.testata .voci { margin-left: auto; }
@media (max-width: 999px) {
  .testata { display: grid; grid-template-columns: 1fr auto; padding-top: var(--s2); padding-bottom: 0; }
  .testata .voci { grid-column: 1 / -1; grid-row: 2; margin: 0 -10px; }
}


/* i bottoni: il becco */
.tasto-primo { display: inline-flex; align-items: center; gap: 14px; min-height: var(--azione-alta); padding: 0 40px 0 22px; background: var(--becco); color: var(--inchiostro); font: 800 var(--t-azione)/1.1 var(--carattere); font-stretch: 118%; text-decoration: none; border: 0; cursor: pointer; clip-path: var(--becco-forma); transition: transform var(--colpo); }
.tasto-primo::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--macchia); }
.tasto-primo:hover { transform: translateX(4px); }
.tasto-primo:active { transform: translateX(6px); }
.tasto-primo:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 4px; clip-path: none; }
.tasto-secondo { display: inline-flex; align-items: center; min-height: var(--bersaglio); font-weight: 700; font-size: var(--t-voce); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.link-freccia { display: inline-flex; align-items: center; gap: var(--s3); min-height: 56px; font-weight: 700; font-stretch: 112%; font-size: var(--t-voce); text-decoration: none; border-bottom: var(--filetto); }
.link-freccia::after { content: ""; flex: none; width: 12px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 55%, 0 100%); transition: transform var(--colpo); }
.link-freccia:hover::after { transform: translateX(5px); }

/* home: l'apertura. La scena ferma sopra, il mare pieno sotto con il titolo */
.apertura-scena { margin: 0; background: var(--mare); }
.apertura-scena img { width: 100%; height: clamp(220px, 50vh, 640px); object-fit: cover; object-position: 50% 8%; }
.apertura-scena figcaption { background: var(--mare); color: var(--schiuma); font-size: var(--t-piccolo); padding: var(--s2) var(--margine) 0; }
.apertura-testo { background: var(--mare); color: #fff; padding: var(--s5) var(--margine) var(--s6); display: grid; gap: var(--s4); }
.apertura-testo h1 { font-weight: 850; font-stretch: 125%; font-size: clamp(44px, 8vw, 104px); line-height: .92; letter-spacing: -.03em; }
.apertura-testo p { color: var(--schiuma); max-width: 40ch; }
.apertura-testo .sottotitolo { color: #fff; font-weight: 700; font-stretch: 112%; font-size: var(--t-voce); }
.apertura-testo .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.apertura-testo .tasto-secondo { color: #fff; }
.apertura-testo .nota-comandi { font-size: var(--t-piccolo); }
@media (min-width: 1000px) {
  .apertura-testo { grid-template-columns: 1.3fr 1fr; column-gap: var(--s6); align-items: end; padding-top: var(--s6); padding-bottom: var(--s7); }
  .apertura-testo h1 { grid-row: 1 / span 4; }
}

/* il percorso: registro delle tappe a sinistra, la mappa vera a destra */
.percorso { padding: var(--s6) var(--margine); display: grid; gap: var(--s5); }
.percorso h2, .racconto h2, .andarci h2, .blocco h2 { font-weight: 800; font-stretch: 118%; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.02em; }
.tappe, .date { list-style: none; padding: 0; margin: var(--s4) 0 0; border-top: var(--filetto); counter-reset: tappa; }
.tappe li, .date li { display: grid; grid-template-columns: 44px 1fr; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: var(--riga); counter-increment: tappa; }
.tappe li::before { content: counter(tappa); grid-row: span 2; font-weight: 850; font-stretch: 125%; font-size: 22px; font-variant-numeric: tabular-nums; }
.tappe li b, .date li b { font-weight: 800; font-stretch: 112%; }
.tappe li span { color: var(--mantello); }
.date li { grid-template-columns: 9.5em 1fr; }
.date li b { font-variant-numeric: tabular-nums; }
.mappa-percorso { margin: 0; background: var(--mare); position: relative; }
.mappa-percorso svg { display: block; width: 100%; height: auto; }
.mappa-percorso figcaption { background: var(--piuma); color: var(--mantello); font-size: var(--t-piccolo); padding: var(--s2) 0; }
@media (min-width: 1000px) { .percorso { grid-template-columns: 1fr 1.15fr; gap: var(--s7); padding: var(--s7) var(--margine); align-items: start; } }

/* etichette della mappa: HTML sopra l'SVG, mai sotto 14 px */
.mappa-telaio { position: relative; }
.etichetta { position: absolute; transform: translate(-50%, -100%); margin-top: -14px; background: var(--inchiostro); color: #fff; font-size: var(--t-piccolo); font-weight: 700; padding: 3px 8px; white-space: nowrap; }
.etichetta-sotto { transform: translate(-50%, 0); margin-top: 14px; }
.etichetta-sinistra { transform: translate(-100%, -50%); margin: 0 0 0 -14px; }
.etichetta-destra { transform: translate(0, -50%); margin: 0 0 0 14px; }

@media (max-width: 600px) { .etichetta { font-size: 14px; padding: 2px 6px; } }

/* racconti con la foto vera */
.racconto { display: grid; border-top: var(--filetto); }
.racconto .foto { margin: 0; }
.racconto .foto img { width: 100%; height: clamp(240px, 42vw, 560px); object-fit: cover; object-position: 50% 20%; }
.racconto .foto figcaption, .credito { font-size: var(--t-piccolo); color: var(--mantello); padding: var(--s2) var(--margine); border-bottom: var(--riga); }
.racconto-testo { padding: var(--s5) var(--margine) var(--s6); display: grid; gap: var(--s4); align-content: start; }
.racconto-testo p { max-width: 44ch; }
@media (min-width: 1000px) {
  .racconto { grid-template-columns: 7fr 5fr; }
  .racconto-inverso { grid-template-columns: 5fr 7fr; }
  .racconto-inverso .foto { order: 2; }
  .racconto-testo { padding: var(--s6) var(--margine); align-content: end; }
  .racconto .foto figcaption { padding-left: var(--margine); }
}
.andarci { background: var(--mare); color: #fff; padding: var(--s6) var(--margine); display: grid; gap: var(--s4); }
.andarci p { color: var(--schiuma); max-width: 52ch; }
@media (min-width: 1000px) { .andarci { grid-template-columns: 1fr 1fr auto; align-items: end; gap: var(--s6); } }

/* pagine di testo */
.pagina-testa { background: var(--mare); color: #fff; padding: var(--s6) var(--margine); display: grid; gap: var(--s4); }
.pagina-testa h1 { font-weight: 850; font-stretch: 125%; font-size: clamp(40px, 6vw, 80px); line-height: .95; letter-spacing: -.03em; max-width: 16ch; }
.pagina-testa .attacco { color: var(--schiuma); font-size: var(--t-voce); max-width: 46ch; }
.pagina-foto { margin: 0; }
.pagina-foto img { width: 100%; height: clamp(220px, 40vw, 520px); object-fit: cover; object-position: 50% 12%; }
.blocco { padding: var(--s5) var(--margine) 0; max-width: 1200px; }
.blocco p { max-width: 64ch; }
.blocco p + p, .blocco h2 + p, .blocco h2 + dl, .blocco h2 + ol { margin-top: var(--s4); }
@media (min-width: 1000px) {
  .blocco { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--s6); row-gap: 0; align-items: start; }
  .blocco > h2 { grid-row: 1 / span 20; }
  .blocco > :not(h2) + :not(h2) { margin-top: var(--s4); }
  .blocco h2 + p, .blocco h2 + dl, .blocco h2 + ol { margin-top: 0; }
}
.luoghi { margin: 0; border-top: var(--filetto); }
.luoghi > div { padding: var(--s3) 0; border-bottom: var(--riga); }
.luoghi dt { font-weight: 800; font-stretch: 112%; font-size: var(--t-voce); }
.luoghi dd { margin: 2px 0 0; color: var(--mantello); }
.esterno { font-weight: 700; }

.invito-volo { margin: var(--s6) 0 0; padding: var(--s6) var(--margine); background: var(--mare); color: #fff; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; }
.invito-volo p { font-weight: 800; font-stretch: 118%; font-size: var(--t-h2); line-height: 1.05; max-width: 20ch; }

/* classifica: righe di registro */
.classifica { list-style: none; padding: 0; margin: 0; border-top: var(--filetto); }
.classifica li { display: grid; grid-template-columns: 3em 1fr auto 6em; gap: var(--s3); align-items: center; min-height: 52px; border-bottom: var(--riga); font-variant-numeric: tabular-nums; }
.classifica .pos { font-weight: 850; font-stretch: 125%; }
.classifica .nome { font-weight: 700; overflow-wrap: anywhere; }
.classifica .tempo { color: var(--mantello); }
.classifica .punti { text-align: right; font-weight: 850; font-stretch: 125%; font-size: var(--t-voce); }
.classifica li:first-child:not(.scheletro) .pos::before, .classifica li.propria .pos::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--macchia); margin-right: 6px; vertical-align: 1px; }
.classifica li.propria { background: var(--schiuma); }
.classifica li.propria:not(:first-child) .pos::before { animation: pulsa var(--virata) 1 both; }
.scheletro .nome, .scheletro .punti { background: var(--schiuma); height: 1em; }
.propria-lista { margin-top: var(--s3); }
#stato-classifica { margin-top: var(--s3); color: var(--mantello); }
@keyframes pulsa { 50% { transform: scale(1.25); } }

.elenco-crediti { padding-left: 1.2em; }
.elenco-crediti li { margin-bottom: var(--s3); overflow-wrap: anywhere; }
.pagina-testo .blocco { display: block; max-width: 900px; }
.pagina-testo .blocco h2 { margin-top: var(--s5); margin-bottom: var(--s3); }
.strade { list-style: none; padding: 0; margin: var(--s5) var(--margine); border-top: var(--filetto); max-width: 700px; }
.strade a { display: flex; align-items: center; min-height: 56px; border-bottom: var(--riga); font-weight: 700; font-size: var(--t-voce); text-decoration: none; }

/* piede */
.piede { margin-top: var(--s7); background: var(--inchiostro); color: var(--piuma); padding: var(--s5) var(--margine); display: grid; gap: var(--s4); font-size: var(--t-piccolo); }
.piede-avviso { font-size: var(--t-avviso); max-width: 70ch; }
.piede-voci { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.piede-voci a { display: inline-flex; align-items: center; min-height: var(--bersaglio); }
.piede-fonti { color: var(--schiuma); }
.invito-volo + .piede, article:has(.invito-volo) + .piede { margin-top: 0; }

/* il passaggio fra le pagine: l'orizzonte che sale, a bordo netto */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .apertura-testo, .pagina-testa { animation: orizzonte var(--planata) both; }
  @keyframes orizzonte { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
a[target="_blank"]:not(.tasto-primo)::after { content: " \2197"; }

/* home al telefono: il bottone col becco nel primo schermo */
@media (max-width: 999px) { .apertura-scena img { height: clamp(170px, 24vh, 420px); } .apertura-testo { padding-top: var(--s4); gap: var(--s3); } .apertura-testo h1 { font-size: clamp(40px, 12vw, 64px); } }

.mappa-arrivo { margin: var(--s5) var(--margine) 0; max-width: 1100px; }

/* il volo in home: fermo del simulatore a sinistra, testo a destra */
.volo-anteprima { display: grid; background: var(--mare); color: #fff; }
.volo-anteprima .foto { margin: 0; }
.volo-anteprima .foto img { width: 100%; height: clamp(220px, 40vw, 540px); object-fit: cover; }
.volo-anteprima figcaption { font-size: var(--t-piccolo); color: var(--schiuma); padding: var(--s2) var(--margine); }
.volo-anteprima .racconto-testo p { color: var(--schiuma); }
@media (min-width: 1000px) { .volo-anteprima { grid-template-columns: 7fr 5fr; } .volo-anteprima .racconto-testo { align-content: center; } }

@media (min-width: 1000px) {
  .pagina-testa { grid-template-columns: 1.2fr 1fr; column-gap: var(--s6); align-items: end; }
  .pagina-testa h1 { max-width: none; }
}