/* Miramare, il volo di El Cocal: il foglio di stile delle pagine.
   I gettoni vengono da DIREZIONE.md: la pietra, l'inchiostro, il leccio, il becco, la macchia.
   La carta nautica: contenuto sulla pietra, filetti d'inchiostro, note e numeri al margine. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/caratteri/bodoni-moda-latin-opsz.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("/assets/caratteri/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("/assets/caratteri/atkinson-hyperlegible-next-latin-corsivo.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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;
}

:root {
  /* colori del luogo e del gabbiano */
  --pietra: #F2EEE4;
  --pietra-scura: #E6E0D2;
  --inchiostro: #0F2A3A;
  --leccio: #2F4A36;
  --becco: #F2B705;
  --macchia: #C8321F;
  --macchia-testo: #A82A19;
  --mantello: #5E6A72;
  --mantello-chiaro: #A9B4BB;

  /* caratteri */
  --titoli: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --testo: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  /* il planare */
  --planare: cubic-bezier(.2, .7, .2, 1);
  --t-comparsa: 640ms;
  --t-pressione: 100ms;

  /* misure */
  --bordo: clamp(1.25rem, 4.2vw, 3.5rem);
  --margine: 11.5rem;
  --stacco: clamp(1.5rem, 3vw, 3rem);
  --spazio: clamp(3.5rem, 8vw, 7rem);
  --testata: 0px;
}

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

html {
  background: var(--pietra);
  color: var(--inchiostro);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
@media (min-width: 64rem) { body { font-size: 1.125rem; } }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2 {
  font-family: var(--titoli);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
h3 {
  font-family: var(--testo);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
p { margin: 0; }
p + p { margin-top: .9em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--macchia-testo); text-decoration-thickness: 2px; }
}

:focus-visible { outline: 3px solid var(--macchia); outline-offset: 3px; }
.scuro :focus-visible, .leccio :focus-visible { outline-color: var(--pietra); }

.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: var(--bordo);
  top: -10rem;
  z-index: 10;
  background: var(--inchiostro);
  color: var(--pietra);
  padding: .75rem 1rem;
  min-height: 44px;
  font-weight: 700;
}
.salta:focus { top: .5rem; }

/* ---------- l'avvertenza della carta ---------- */

.avviso {
  background: var(--inchiostro);
  color: var(--pietra);
  font-size: .875rem;
  line-height: 1.45;
  padding: .55rem var(--bordo);
}
.avviso p { max-width: 76rem; margin-inline: auto; }

/* ---------- la testata ---------- */

.testata {
  border-bottom: 1px solid var(--inchiostro);
  background: var(--pietra);
}
.testata-riga {
  max-width: 76rem;
  margin-inline: auto;
  padding: .5rem var(--bordo);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marchio menu vola";
  align-items: center;
  column-gap: 1.5rem;
}
.marchio {
  grid-area: marchio;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  text-decoration: none;
  color: var(--inchiostro);
}
.marchio svg { width: 30px; height: 30px; flex: none; }
.marchio-nome {
  font-family: var(--titoli);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.menu { grid-area: menu; justify-self: end; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: .25rem;
}
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .6rem;
  text-decoration: none;
  font-size: 1rem;
}
.menu a[aria-current="page"] { font-weight: 700; }
.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--macchia);
}
@media (hover: hover) and (pointer: fine) {
  .menu a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}
.testata .comando { grid-area: vola; }

@media (max-width: 56rem) {
  .testata-riga {
    grid-template-columns: 1fr auto;
    grid-template-areas: "marchio vola" "menu menu";
    row-gap: .1rem;
  }
  .menu { justify-self: stretch; margin-inline: -.5rem; }
  .menu ul { column-gap: 0; }
  .menu a { padding: 0 .5rem; font-size: .9375rem; }
}
@media (max-width: 23rem) {
  .marchio-nome { font-size: 1.75rem; }
  .marchio svg { display: none; }
  .testata .comando { padding-inline: .9rem; }
}

/* ---------- i comandi ---------- */

.comando {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: 0 1.2rem;
  border: 1px solid var(--inchiostro);
  background: transparent;
  color: var(--inchiostro);
  font: 700 1rem/1.2 var(--testo);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-pressione) ease-out, background-color 180ms var(--planare), color 180ms var(--planare);
}
.comando-pieno { background: var(--inchiostro); color: var(--pietra); }
.comando-pieno::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--macchia);
  box-shadow: 0 0 0 2px var(--pietra);
  transition: transform 260ms var(--planare);
}
.comando:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .comando:hover { background: var(--inchiostro); color: var(--pietra); text-decoration: none; }
  .comando-pieno:hover { background: var(--leccio); }
  .comando-pieno:hover::before { transform: translateX(3px); }
}
.scuro .comando, .leccio .comando { border-color: var(--pietra); color: var(--pietra); }
.scuro .comando-pieno, .leccio .comando-pieno { background: var(--pietra); color: var(--inchiostro); }
.scuro .comando-pieno::before, .leccio .comando-pieno::before { box-shadow: 0 0 0 2px var(--pietra); }
@media (hover: hover) and (pointer: fine) {
  .scuro .comando:hover, .leccio .comando:hover { background: var(--pietra); color: var(--inchiostro); }
  .scuro .comando-pieno:hover, .leccio .comando-pieno:hover { background: var(--becco); color: var(--inchiostro); }
}

.comandi { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.collegamento {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* il segno dei link che escono */
.esce { white-space: nowrap; }
.esce svg { display: inline-block; width: .7em; height: .7em; margin-left: .2em; vertical-align: baseline; }

/* ---------- la carta: foglio, righe, note al margine ---------- */

.foglio { max-width: 76rem; margin-inline: auto; padding-inline: var(--bordo); }

.riga {
  display: grid;
  grid-template-columns: var(--margine) minmax(0, 1fr);
  column-gap: var(--stacco);
  align-items: start;
}
.riga > .nota { grid-column: 1; }
.riga > .corpo { grid-column: 2; }
.corpo { max-width: 40rem; }
.corpo-largo { max-width: none; }

.nota {
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--mantello);
  font-variant-numeric: tabular-nums lining-nums;
  border-top: 1px solid var(--inchiostro);
  padding-top: .6rem;
}
.nota strong { font-style: normal; color: var(--inchiostro); font-weight: 700; }
.scuro .nota, .leccio .nota { color: var(--pietra); border-top-color: var(--pietra); }

@media (max-width: 47.99rem) {
  .riga { grid-template-columns: minmax(0, 1fr); }
  .riga > .nota, .riga > .corpo { grid-column: 1; }
  .riga > .nota { border-top: 0; padding-top: 0; margin-bottom: .6rem; }
}

.sezione { padding-block: var(--spazio); }
.sezione + .sezione { padding-top: 0; }
.sezione-titolo { margin-bottom: 1.5rem; }
.attacco { font-size: 1.1875rem; line-height: 1.5; }
@media (min-width: 64rem) { .attacco { font-size: 1.3125rem; } }

.scuro { background: var(--inchiostro); color: var(--pietra); }
.leccio { background: var(--leccio); color: var(--pietra); }
.scuro + .sezione, .leccio + .sezione, .sezione.scuro, .sezione.leccio { padding-top: var(--spazio); }
.sezione.chiude-con-foto { padding-bottom: 0; }

/* il passaggio fra due zone: un filetto d'inchiostro che si allunga, poi il taglio netto */
.filetto {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--inchiostro);
  transform-origin: left center;
}
.js .filetto.da-tracciare { transform: scaleX(.04); }
.js .filetto.da-tracciare.visto { transform: scaleX(1); transition: transform 700ms var(--planare); }

/* ---------- la copertina ---------- */

.copertina { position: relative; }
.copertina-testo { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem); }
.copertina-testo h1 { max-width: 17ch; font-size: clamp(2.6rem, 5.6vw, 4.75rem); }
.copertina-testo .attacco { margin-top: 1.25rem; max-width: 36rem; }

.testa-pagina { padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.testa-pagina h1 { max-width: 16ch; }
.testa-pagina .attacco { margin-top: 1.1rem; max-width: 38rem; }

/* ---------- le foto ---------- */

.foto { margin: 0; }
.foto picture, .foto img { display: block; width: 100%; }
.foto img { object-fit: cover; object-position: var(--fuoco, 50% 50%); }
.foto-piena img { aspect-ratio: 16 / 9; max-height: 82vh; }
@media (min-width: 64rem) { .foto-piena img { aspect-ratio: 21 / 9; } }
.foto-alta img { aspect-ratio: 4 / 3; }
.foto-copertina img { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .foto-copertina img { aspect-ratio: 21 / 9; max-height: 74vh; } }
.foto figcaption {
  max-width: 76rem;
  margin-inline: auto;
  padding: .6rem var(--bordo) 0;
  font-style: italic;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--mantello);
}
.foto-colonna figcaption { padding-inline: 0; }
.scuro .foto figcaption, .leccio .foto figcaption { color: var(--pietra); }
.foto figcaption a { color: inherit; }
.didascalia-soggetto { color: var(--inchiostro); font-style: normal; }
.scuro .didascalia-soggetto, .leccio .didascalia-soggetto { color: var(--pietra); }

/* ---------- elenco delle cose da vedere, a righe ---------- */

.elenco-righe { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inchiostro); }
.elenco-righe li { border-bottom: 1px solid var(--inchiostro); padding-block: 1.1rem 1.2rem; }
.scuro .elenco-righe, .scuro .elenco-righe li, .leccio .elenco-righe, .leccio .elenco-righe li { border-color: var(--pietra); }
.elenco-righe h3 + p { margin-top: .35rem; }

/* le destinazioni (home, 404): righe con la freccia, non schede */
.rotte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inchiostro); }
.rotte li { border-bottom: 1px solid var(--inchiostro); }
.rotte a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: center;
  min-height: 64px;
  padding-block: .8rem;
  text-decoration: none;
}
.rotte .rotta-nome { font-weight: 700; font-size: 1.125rem; }
.rotte .rotta-riga { grid-column: 1; color: var(--mantello); font-size: 1rem; }
.rotte .rotta-segno { grid-column: 2; grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--inchiostro); transition: background-color 180ms var(--planare), transform 260ms var(--planare); }
@media (hover: hover) and (pointer: fine) {
  .rotte a:hover .rotta-nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .rotte a:hover .rotta-segno { background: var(--macchia); border-color: var(--macchia); transform: translateX(-4px); }
}
.rotte a:active .rotta-segno { background: var(--macchia); border-color: var(--macchia); }

/* ---------- la mappa del percorso ---------- */

.carta { position: relative; margin: 0; --u: 1.3; }
.carta-quadro {
  position: relative;
  aspect-ratio: var(--carta-rapporto, 733 / 770);
  border: 1px solid var(--inchiostro);
  outline: 1px solid var(--inchiostro);
  outline-offset: 4px;
  background: var(--pietra);
  overflow: hidden;
}
.carta-quadro > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.carta svg .terra path, .carta svg .terra use { fill: var(--pietra-scura); stroke: var(--mantello); stroke-width: 1; }
.carta svg .terra .molo { fill: none; stroke: var(--mantello); stroke-width: calc(var(--u) * 1); }
.carta svg .battigia use { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.carta svg .battigia .b1 { stroke: var(--mantello-chiaro); stroke-width: 34; }
.carta svg .battigia .b2 { stroke: var(--pietra); stroke-width: 32; }
.carta svg .battigia .b3 { stroke: var(--mantello-chiaro); stroke-width: 18; }
.carta svg .battigia .b4 { stroke: var(--pietra); stroke-width: 16; }
.carta svg .parco path { fill: #D6DCCD; stroke: none; }
.carta svg .parco .bosco { fill: #C7D0BF; }
.carta svg .strade path { fill: none; stroke: var(--mantello-chiaro); stroke-width: calc(var(--u) * 2); }
.carta svg .sentieri path { fill: none; stroke: var(--leccio); stroke-width: calc(var(--u) * 1.1); }
.carta svg .sentieri .scale { stroke-dasharray: calc(var(--u) * 2) calc(var(--u) * 1.5); stroke-width: calc(var(--u) * 1.4); }
.carta svg .edifici path { fill: var(--mantello-chiaro); }
.carta svg .edifici .castello { fill: var(--inchiostro); }
.carta svg .edifici .castelletto { fill: var(--leccio); }
.carta svg .percorso-fondo { fill: none; stroke: var(--pietra); stroke-width: calc(var(--u) * 10); stroke-linecap: round; stroke-linejoin: round; }
.carta svg .percorso-scia { fill: none; stroke: var(--inchiostro); stroke-width: calc(var(--u) * 2); stroke-dasharray: calc(var(--u) * 6) calc(var(--u) * 4); }
.carta svg .percorso-linea { fill: none; stroke: var(--inchiostro); stroke-width: calc(var(--u) * 4.5); stroke-linecap: round; stroke-linejoin: round; }
.carta svg .anello { r: calc(var(--u) * 4.5px); fill: var(--becco); stroke: var(--inchiostro); stroke-width: calc(var(--u) * 1.2); transition: fill 300ms var(--planare); }
.carta svg .anello.preso { fill: var(--pietra); }
.carta svg .tappa { r: calc(var(--u) * 5px); fill: var(--pietra); stroke: var(--inchiostro); stroke-width: calc(var(--u) * 2); }
.carta svg .tappa.attiva { fill: var(--inchiostro); }
.carta svg .cocal { r: calc(var(--u) * 8px); fill: var(--macchia); stroke: var(--pietra); stroke-width: calc(var(--u) * 2.5); }

.carta-nome {
  position: absolute;
  font-style: italic;
  font-size: .875rem;
  line-height: 1.2;
  color: var(--inchiostro);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 1px 0 0 var(--pietra), -1px 0 0 var(--pietra), 0 1px 0 var(--pietra), 0 -1px 0 var(--pietra), 1px 1px 0 var(--pietra), -1px -1px 0 var(--pietra), 1px -1px 0 var(--pietra), -1px 1px 0 var(--pietra);
}
.carta-nome[data-lato="destra"] { transform: translate(6px, -50%); }
.carta-nome[data-lato="sinistra"] { transform: translate(calc(-100% - 6px), -50%); }
.carta-nome[data-lato="sopra"] { transform: translate(-50%, calc(-100% - 6px)); }
.carta-nome[data-lato="sotto"] { transform: translate(-50%, 6px); }
.carta-quadro { container-type: inline-size; }
@container (min-width: 480px) { .carta-nome-grande { font-size: 1rem; } }
@container (max-width: 439px) { .carta-nome[data-stretto="nascondi"] { display: none; } }
.carta-freccia { display: inline-block; width: .8em; height: .8em; margin-right: .3em; vertical-align: -.05em; }

.carta-tacca {
  position: absolute;
  font-style: italic;
  font-size: .875rem;
  line-height: 1;
  color: var(--mantello);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carta-tacca-lon { top: .1rem; transform: translateX(-50%); }
.carta-tacca-lat { left: 0; width: 1.9rem; writing-mode: vertical-rl; text-align: center; transform: translateY(-50%) rotate(180deg); }
.carta-tacca::after { content: ""; position: absolute; background: var(--inchiostro); }
.carta-tacca-lon::after { left: 50%; top: calc(100% + 3px); width: 1px; height: calc(1.9rem - 100% - 3px - .1rem); }
.carta-tacca-lat::after { left: -2px; top: 50%; width: 9px; height: 1px; }

.carta-cornice { position: relative; padding: 1.9rem 0 0 1.9rem; }
.carta figcaption {
  margin-top: .9rem;
  font-style: italic;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--mantello);
}
.carta-legenda { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--inchiostro); }
.carta-legenda li { display: inline-flex; align-items: center; gap: .45rem; }
.segno { display: inline-block; flex: none; }
.segno-cocal { width: 12px; height: 12px; border-radius: 50%; background: var(--macchia); }
.segno-anello { width: 12px; height: 12px; border-radius: 50%; background: var(--becco); border: 1.5px solid var(--inchiostro); }
.segno-linea { width: 26px; height: 4px; background: var(--inchiostro); }
.segno-linea-resta { width: 26px; height: 0; border-top: 2px dashed var(--inchiostro); }
.solo-moto { display: none !important; }
.moto .solo-moto { display: inline-flex !important; }
.segno-tappa { width: 11px; height: 11px; border-radius: 50%; background: var(--pietra); border: 2px solid var(--inchiostro); }

/* la pagina del percorso: la carta ferma, le tappe che scorrono */
.viaggio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.viaggio-palco { grid-column: 2; grid-row: 1; position: sticky; top: 1.25rem; }
.viaggio-palco .carta { width: min(100%, calc((100vh - 7.5rem) * 733 / 770)); margin-left: auto; }
.viaggio-tappe { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.tappa-testo { padding-block: 0 7rem; }
.tappa-testo:last-child { padding-bottom: 2rem; }
.tappa-testo .nota { margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.tappa-testo h3 { font-size: 1.375rem; display: flex; align-items: baseline; gap: .6rem; }
.tappa-testo h3::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--inchiostro);
  transform: translateY(-.1em);
  transition: background-color 300ms var(--planare), border-color 300ms var(--planare);
}
.tappa-testo.attiva h3::before { background: var(--macchia); border-color: var(--macchia); }
.tappa-testo p { margin-top: .5rem; max-width: 34rem; }

@media (max-width: 55.99rem) {
  .viaggio { grid-template-columns: minmax(0, 1fr); }
  .viaggio-palco { grid-column: 1; grid-row: 1; top: 0; z-index: 2; background: var(--pietra); padding: .75rem 0 .9rem; border-bottom: 1px solid var(--inchiostro); }
  .viaggio-palco .carta { width: min(100%, calc(52vh * 733 / 770)); margin-inline: auto; }
  .viaggio-palco .carta figcaption, .viaggio-palco .carta-legenda { display: none; }
  .viaggio-tappe { grid-column: 1; grid-row: 2; padding-top: 2rem; }
  .tappa-testo { padding-bottom: 2.75rem; }
}

/* ---------- l'anteprima del volo ---------- */

.anteprima { position: relative; margin: 0; }
.anteprima-quadro { position: relative; aspect-ratio: 16 / 9; background: #0B2130; border: 1px solid var(--pietra); }
.anteprima-quadro img, .anteprima-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.anteprima-avvia {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 56px;
  padding: .75rem 1.25rem .75rem 1rem;
  background: var(--pietra);
  color: var(--inchiostro);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: transform var(--t-pressione) ease-out;
}
.anteprima-avvia .avvia-segno { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--inchiostro); }
.anteprima-avvia .avvia-segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--macchia); transition: transform 260ms var(--planare); }
.anteprima-avvia:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .anteprima-avvia:hover .avvia-segno::after { transform: scale(1.35); }
  .anteprima-avvia:hover { text-decoration: underline; text-underline-offset: .2em; }
}
.anteprima figcaption { margin-top: .7rem; font-style: italic; font-size: .875rem; color: var(--pietra); }
.anteprima-quadro.in-volo .anteprima-avvia { display: none; }
.anteprima-stato { position: absolute; inset: auto auto 0 0; padding: .75rem 1rem; background: var(--pietra); color: var(--inchiostro); font-weight: 700; }
.anteprima-stato[hidden] { display: none; }

/* ---------- il registro di bordo ---------- */

.registro { margin-top: 2rem; }
.registro-testa, .registro-riga {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 5.5rem 5.25rem 6.5rem 5.5rem;
  column-gap: 1rem;
  align-items: center;
}
.registro-testa {
  font-style: italic;
  font-size: .875rem;
  color: var(--mantello);
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--inchiostro);
}
.registro-righe { list-style: none; margin: 0; padding: 0; }
.registro-riga {
  height: 56px;
  border-bottom: 1px solid var(--mantello-chiaro);
  font-variant-numeric: tabular-nums lining-nums;
}
.registro-riga > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-pos { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.r-nome { font-weight: 700; }
.r-punti, .r-tempo { text-align: right; }
.r-comandi, .r-quando { color: var(--mantello); font-size: 1rem; }
.registro-testa .r-punti, .registro-testa .r-tempo { text-align: right; }
.registro-riga.mia { border-bottom-color: var(--inchiostro); }
.registro-riga.mia .r-pos::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--macchia); flex: none; }
.registro-riga.mia .r-nome::after { content: " (tu)"; font-weight: 400; color: var(--mantello); }
.registro-salto { height: 56px; display: flex; align-items: center; color: var(--mantello); font-style: italic; border-bottom: 1px solid var(--mantello-chiaro); }

.registro-riga.scheletro > span::before {
  content: "";
  display: block;
  height: 12px;
  background: var(--pietra-scura);
}
.registro-riga.scheletro .r-pos::before { width: 1.6rem; }
.registro-riga.scheletro .r-nome::before { width: 62%; }
.registro-riga.scheletro .r-punti::before, .registro-riga.scheletro .r-tempo::before { width: 70%; margin-left: auto; }
.registro-riga.scheletro .r-comandi::before, .registro-riga.scheletro .r-quando::before { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .registro-riga.scheletro > span::before { animation: respiro 1.6s var(--planare) infinite alternate; }
}
@keyframes respiro { from { opacity: 1; } to { opacity: .45; } }

.registro-avviso { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--mantello-chiaro); }
.registro-avviso[hidden] { display: none; }
.registro-avviso p { max-width: 38rem; }
.registro-avviso .comandi { margin-top: 1rem; }

.mio-volo { margin-top: .5rem; }
.mio-volo-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; min-height: 56px; padding-block: .9rem; border-top: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro); font-variant-numeric: tabular-nums lining-nums; }
.mio-volo-riga strong { display: inline-flex; align-items: center; gap: .5rem; }
.mio-volo-riga strong::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--macchia); flex: none; align-self: center; }
.mio-volo-dato { color: var(--mantello); }
.mio-volo-dato b { color: var(--inchiostro); font-weight: 700; }

@media (max-width: 47.99rem) {
  .registro-testa, .registro-riga {
    grid-template-columns: 2.25rem minmax(0, 1fr) 4.75rem 4.5rem;
    column-gap: .6rem;
  }
  .r-comandi, .r-quando { display: none; }
}

/* ---------- il piede ---------- */

.piede { background: var(--leccio); color: var(--pietra); margin-top: var(--spazio); }
.piede-riga {
  max-width: 76rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--bordo) 2rem;
  display: grid;
  grid-template-columns: var(--margine) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--stacco);
  row-gap: 2rem;
}
.piede .nota { color: var(--pietra); border-top-color: var(--pietra); }
.piede-menu ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.piede-menu a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.piede-menu a[aria-current="page"] { font-weight: 700; }
.piede-menu a[aria-current="page"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pietra); margin-right: .5rem; }
@media (hover: hover) and (pointer: fine) {
  .piede-menu a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
  .piede a:hover { text-decoration-color: var(--pietra); }
}
.piede-testo p { font-size: 1rem; }
.piede-testo p + p { margin-top: 1.1rem; }
.piede-avviso {
  max-width: 76rem;
  margin-inline: auto;
  padding: 1rem var(--bordo) 1.5rem;
  border-top: 1px solid var(--pietra);
  font-size: .875rem;
}
@media (max-width: 56rem) {
  .piede-riga { grid-template-columns: minmax(0, 1fr); }
}
.leccio a, .piede a { color: var(--pietra); }

/* ---------- la pagina che non c'è ---------- */

.fuori-rotta svg { width: min(100%, 26rem); height: auto; }
.fuori-rotta .rotta { fill: none; stroke: var(--inchiostro); stroke-width: 3; stroke-linecap: round; }
.fuori-rotta .rotta-persa { fill: none; stroke: var(--inchiostro); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.fuori-rotta .anello-carta { fill: var(--becco); stroke: var(--inchiostro); stroke-width: 1.5; }
.fuori-rotta .cocal { fill: var(--macchia); stroke: var(--pietra); stroke-width: 3; }
.suggerimento { margin-top: 1.5rem; font-size: 1.1875rem; }
.suggerimento[hidden] { display: none; }
.suggerimento a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- crediti e privacy ---------- */

.crediti-voce { padding-block: 1rem 1.1rem; border-bottom: 1px solid var(--mantello-chiaro); }
.crediti-voce:first-child { border-top: 1px solid var(--inchiostro); }
.crediti-voce p { margin-top: .25rem; color: var(--mantello); }
.crediti-voce p a { color: var(--inchiostro); }

code, .codice { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9375em; background: var(--pietra-scura); padding: .05em .3em; }

.esito { margin-top: .75rem; font-weight: 700; min-height: 1.6em; }

/* ---------- comparse ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .compare.da-mostrare { opacity: 0; transform: translateY(14px); }
  .js .compare.da-mostrare.visto { opacity: 1; transform: none; transition: opacity var(--t-comparsa) var(--planare), transform var(--t-comparsa) var(--planare); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* la carta che si traccia: lo stato di partenza è già nel primo disegno (classe messa in testa) */
.moto .carta[data-traccia] .percorso-linea { stroke-dasharray: var(--carta-lunghezza) var(--carta-lunghezza); stroke-dashoffset: var(--carta-lunghezza); }
.anteprima-comandi { margin-top: 1rem; }
.registro-testa > span { font-weight: 400; font-size: .875rem; color: var(--mantello); }

/* i link dentro il testo e le didascalie: il bersaglio si allarga a 44 px senza spostare la riga */
.foto figcaption a, .carta figcaption a, .corpo p a:not(.comando):not(.collegamento), .piede-testo a, .crediti-voce p a, .elenco-righe p a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
.scuro .nota strong, .leccio .nota strong { color: var(--pietra); }
html:not(.js) .registro-righe .scheletro { display: none; }

@media (max-width: 71.99rem) { .solo-largo { display: none; } }
.crediti-voce p a.esce { white-space: normal; overflow-wrap: anywhere; }