/* Il Rifugio Sospeso — foglio di stile del sito
   Idea: soglie accese. Un muro color sera; porte e finestre (le tavole del libro, sempre 2:3)
   da cui esce la luce; le parti da leggere stanno su fogli color carta.
   Un solo movimento al caricamento: nella pagina iniziale il dipinto affiora dal buio,
   nelle pagine dei racconti la porta si apre. */

:root {
  --sera: #1B2B36;        /* il muro, blu della sera (dalle tavole notturne) */
  --notte: #121E26;       /* piede di pagina, testo sui bottoni chiari */
  --lume: #EDAC5B;        /* la luce delle finestre (dal dipinto di copertina) */
  --carta: #F4ECDD;       /* i fogli da leggere, e il testo sul muro */
  --inchiostro: #2A2019;  /* il testo sui fogli */
  --ambra: #7A4E1C;       /* i collegamenti sui fogli */
  --nebbia: #A9B6BC;      /* testo secondario sul muro */
  --grafite: #6A5D4F;     /* testo secondario sui fogli */
  --filo: rgba(42, 32, 25, .18);
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --misura: 31rem;        /* circa 66 caratteri */
  --passo: clamp(1.25rem, 4vw, 3rem);
  --barra: 0rem;          /* altezza della testata quando segue la pagina (vedi .js più sotto) */
  color-scheme: dark;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-latino.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-corsivo-latino.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.5rem); }
body {
  margin: 0; background: var(--sera); color: var(--carta);
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.6;
  font-variant-numeric: oldstyle-nums; font-kerning: normal;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
@media (max-width: 40rem) { body { font-size: 1.1875rem; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 2.75rem); letter-spacing: -.008em; }
h3 { font-size: 1.5rem; line-height: 1.2; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: .055em; text-underline-offset: .18em; }
cite { font-style: normal; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--lume); outline-offset: 3px; }
.foglio :focus-visible { outline-color: var(--ambra); }
[hidden] { display: none !important; }

.salta { position: absolute; left: -999rem; top: 0; background: var(--lume); color: var(--notte); padding: .5rem 1rem; z-index: 10; }
.salta:focus { left: 0; }

/* ---- impianto ---- */
.dentro { width: min(100% - 2 * var(--passo), 72rem); margin-inline: auto; }
.muro { background: var(--sera); color: var(--carta); }
.foglio { background: var(--carta); color: var(--inchiostro); color-scheme: light; }
.sezione { padding-block: clamp(3.5rem, 9vw, 7rem); }
.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: 1em; }
.guida { font-size: 1.4rem; line-height: 1.45; max-width: 33rem; margin-top: 1.25rem; }
.minore { font-size: 1.0625rem; color: var(--nebbia); }
.foglio .minore { color: var(--grafite); }

.legame { color: var(--lume); }
.foglio .legame, .foglio .prosa a, .foglio .domande a { color: var(--ambra); }
.bottone {
  display: inline-block; font: inherit; font-weight: 500; font-size: 1.125rem; line-height: 1.2;
  padding: .8rem 1.4rem; border: 0; cursor: pointer; text-decoration: none;
  background: var(--lume); color: var(--notte);
}
.bottone:hover { background: #F5C27F; }
.foglio .bottone { background: var(--inchiostro); color: var(--carta); }
.foglio .bottone:hover { background: #47362A; }
.bottone[disabled] { opacity: .55; cursor: default; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

/* le parole del libro: sempre in corsivo, con un filo di luce a sinistra */
.voce { padding-left: 1.25rem; border-left: 1px solid var(--lume); font-style: italic; font-size: 1.4rem; line-height: 1.45; max-width: 31rem; }
.voce footer { margin-top: .6rem; font-style: normal; font-size: 1.0625rem; color: var(--nebbia); }
.foglio .voce { border-color: var(--ambra); }
.foglio .voce footer { color: var(--grafite); }

/* ---- testata ---- */
.testata { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem clamp(1.25rem, 3vw, 2rem); padding-block: 1rem; }
.testata__nome { font-size: 1.3125rem; text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: .2rem clamp(1rem, 2vw, 1.5rem); list-style: none; padding: 0; font-size: 1.0625rem; }
.menu a { color: var(--nebbia); text-decoration: none; transition: color .25s ease; }
.menu a:hover { color: var(--carta); text-decoration: underline; }
.menu .menu__lingua a { color: var(--lume); }
.menu-apri { display: none; font: inherit; font-size: 1.0625rem; color: var(--carta); background: none; border: 1px solid rgba(169, 182, 188, .5); padding: .25rem .8rem; cursor: pointer; }

/* La testata segue la pagina. Vale solo con lo script attivo: senza, sul telefono il menu
   resta tutto aperto e coprirebbe troppo. Sul telefono si ritira mentre scendi e torna
   appena risali (classe «giu», messa dallo script); «scorso» dice che non sei più in cima.
   --barra è l'altezza della testata: lo script la misura, qui c'è il valore di partenza. */
.js { --barra: 4.1rem; }
.js body > header { position: sticky; top: 0; z-index: 8; transition: background-color .25s ease, box-shadow .25s ease, transform .28s ease; }
.scorso body > header { box-shadow: 0 1px 0 rgba(244, 236, 221, .09), 0 .7rem 1.5rem -1.1rem rgba(0, 0, 0, .7); }
main > section[id] { scroll-margin-top: -1.5rem; }   /* le sezioni arrivano a filo sotto la testata */
/* sotto i 56rem (telefoni e tablet in verticale) le voci stanno dietro il pulsante «Menu»:
   in inglese, più lunghe, non starebbero su una riga */
@media (max-width: 55.99rem) {
  .js { --barra: 4.4rem; }
  .js .menu-apri { display: inline-block; }
  .js .menu { display: none; flex-direction: column; gap: .55rem; font-size: 1.1875rem; }
  .js .menu.aperto { display: flex; }
  /* il menu aperto è un pannello sotto la testata, sopra la pagina: non sposta nulla */
  .js .menu-aperto nav {
    position: absolute; inset: 100% 0 auto 0; padding: .35rem var(--passo) 1.25rem;
    background: var(--sera); max-height: calc(100vh - var(--barra)); overflow-y: auto;
    box-shadow: 0 1.2rem 1.6rem -1.2rem rgba(0, 0, 0, .75);
  }
  .js body > header.menu-aperto { background: var(--sera); }
  .giu body > header:not(.menu-aperto):not(:focus-within) { transform: translateY(-102%); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .js body > header, .menu a { transition: none; } }

/* ---- la porta (tavola 2:3 da cui esce la luce) ---- */
.porta {
  position: relative;
  width: 100%; aspect-ratio: 2 / 3; background: var(--fondo, #4E3A22);
  box-shadow: 0 0 7rem -1rem color-mix(in srgb, var(--luce, var(--lume)) 38%, transparent);
}
@supports (height: 100svh) { @media (min-width: 44rem) { .porta { width: min(100%, (100svh - 8rem) * 2 / 3); } } }
.porta img { width: 100%; height: 100%; object-fit: cover; }
.porta--apre { animation: chiarore 2.6s ease-out .15s both; }
.porta--apre img { animation: apri 2.2s cubic-bezier(.16, .84, .24, 1) .15s both; }
@keyframes apri { from { clip-path: inset(0 95% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes chiarore { from { box-shadow: 0 0 7rem -1rem transparent; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .porta--apre, .porta--apre img { animation: none; }
}

/* ---- la prima soglia (apertura della pagina iniziale) ----
   Il dipinto di copertina a tutta altezza: sul computer occupa la parte destra e sfuma
   nel blu della sera verso il testo; sul telefono sta in alto e il titolo gli sale sopra. */
.home > header { position: absolute; inset: 0 0 auto 0; z-index: 3; background: none; }
.js .home > header { position: fixed; z-index: 8; }
.scorso .home > header { background: var(--sera); }
html:not(.scorso) .home .testata__nome, html:not(.scorso) .home .menu a { text-shadow: 0 1px 3px rgba(18, 30, 38, .6); }
html:not(.scorso) .home .menu a { color: var(--carta); }
html:not(.scorso) .home .menu .menu__lingua a { color: var(--carta); text-decoration: underline; text-decoration-color: var(--lume); }
.apertura { position: relative; isolation: isolate; overflow: hidden; }
.apertura__dipinto { display: block; position: relative; z-index: 0; overflow: hidden; }
.apertura__dipinto img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 72vh; max-height: 72svh;
  object-fit: cover; object-position: 50% 30%; animation: affiora 2.4s ease-out both;
}
.apertura__dipinto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 30, 38, .82) 0, rgba(18, 30, 38, .58) 3.75rem, rgba(18, 30, 38, 0) 9.5rem),
    linear-gradient(0deg, var(--sera) 3%, rgba(27, 43, 54, .9) 15%, rgba(27, 43, 54, 0) 52%);
}
@keyframes affiora { from { opacity: .15; transform: scale(1.035); } }
.soglia { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; margin-top: -5.75rem; padding-bottom: clamp(3rem, 9vw, 4.5rem); }
.soglia h1 { font-size: clamp(2.25rem, 11vw, 3.5rem); line-height: 1.05; letter-spacing: -.012em; white-space: nowrap; }
.soglia h1:lang(en) { font-size: clamp(2rem, 8.8vw, 3.5rem); }
.soglia__sotto { font-style: italic; font-size: clamp(1.3rem, 5.6vw, 1.6rem); line-height: 1.25; margin-top: .45rem; }
.soglia__firma { color: var(--nebbia); margin-top: .9rem; text-wrap: balance; }
.soglia .azioni { order: 2; margin-top: 1.5rem; }
.soglia .versi { order: 3; margin-top: 2.25rem; }
.versi { padding-left: 1.25rem; border-left: 1px solid var(--lume); }
.versi p { font-style: italic; font-size: 1.25rem; line-height: 1.6; }
.versi span { display: block; }
.versi figcaption { margin-top: .7rem; font-size: 1.0625rem; color: var(--nebbia); }
/* impianto largo: computer, tablet in orizzontale e telefoni in orizzontale */
@media (min-width: 56rem), (min-width: 35rem) and (max-height: 31rem) and (orientation: landscape) {
  .apertura {
    display: flex; align-items: center;
    min-height: min(100vh, 54rem); min-height: min(100svh, max(54rem, 42vw));
    padding-block: clamp(4.75rem, 13vh, 6rem) clamp(2rem, 7vh, 3.25rem);
  }
  .apertura__dipinto { position: absolute; inset: 0 0 0 auto; width: 62%; }
  .apertura__dipinto img { height: 100%; aspect-ratio: auto; max-height: none; object-position: 50% 34%; }
  .apertura__dipinto::after {
    background:
      linear-gradient(90deg, var(--sera) 0, rgba(27, 43, 54, .976) 5.4%, rgba(27, 43, 54, .905) 10.8%, rgba(27, 43, 54, .794) 16.2%, rgba(27, 43, 54, .655) 21.6%, rgba(27, 43, 54, .5) 27%, rgba(27, 43, 54, .345) 32.4%, rgba(27, 43, 54, .206) 37.8%, rgba(27, 43, 54, .095) 43.2%, rgba(27, 43, 54, .024) 48.6%, rgba(27, 43, 54, 0) 54%),
      linear-gradient(180deg, rgba(18, 30, 38, .82) 0, rgba(18, 30, 38, .58) 3.75rem, rgba(18, 30, 38, 0) 9.5rem),
      linear-gradient(0deg, var(--sera) 0, rgba(27, 43, 54, 0) 16%);
  }
  .soglia { margin-top: 0; padding-bottom: 0; }
  .soglia > * { max-width: min(35rem, 46vw); }
  .soglia h1 { max-width: none; font-size: clamp(2.75rem, 5.3vw, 5rem); font-size: clamp(2.75rem, min(5.3vw, 11.5svh), 5rem); }
  .soglia h1:lang(en) { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-size: clamp(2.5rem, min(4.2vw, 9.2svh), 3.9rem); }
  .soglia__sotto { font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-size: clamp(1.3rem, min(2.3vw, 4.4svh), 1.75rem); margin-top: .5rem; }
  .soglia__firma { margin-top: clamp(.75rem, 2.2vh, 1.1rem); }
  .soglia .versi { order: 0; margin-top: clamp(1.1rem, 3.6vh, 2.1rem); }
  .soglia .versi p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-size: clamp(1.1rem, min(1.6vw, 2.9svh), 1.3rem); line-height: 1.5; }
  .soglia .azioni { order: 0; margin-top: clamp(1.1rem, 3.6vh, 2.1rem); }
}
/* finestre molto basse: i pulsanti salgono sopra i versi, così restano sempre visibili */
@media (min-width: 56rem) and (max-height: 38rem), (min-width: 35rem) and (max-height: 31rem) and (orientation: landscape) {
  .soglia .azioni { order: 2; }
  .soglia .versi { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .apertura__dipinto img { animation: none; } }

/* ---- il libro ---- */
.libro { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 52rem) { .libro { grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr); align-items: start; } .libro__lato { grid-column: 2; } }
@media (min-width: 74rem) { .libro { grid-template-columns: 17rem minmax(0, 31rem) minmax(0, 1fr); gap: 4rem; } .libro__lato { grid-column: 3; padding-top: .45rem; } }
.libro__copertina { width: min(100%, 18rem); box-shadow: 0 1px 2px rgba(42, 32, 25, .3), 0 22px 44px -20px rgba(42, 32, 25, .6); }
.libro h2 { max-width: 20ch; margin-bottom: 1.5rem; }
.libro .voce { margin-block: 1.75rem; }
.libro__lato ul { list-style: none; padding: 0; margin-top: .8rem; max-width: var(--misura); }
.libro__lato li + li { margin-top: .5rem; }
.libro__lato .minore { margin-top: .9rem; }
.scheda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1.5rem; max-width: 24rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--filo); font-size: 1.0625rem; line-height: 1.4; }
.scheda dt { color: var(--grafite); }
.scheda dd { margin: 0; font-variant-numeric: lining-nums; }

/* ---- le finestre accese (i quarantotto rifugi) ---- */
.strumenti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2.25rem; }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro { font: inherit; font-size: 1.0625rem; line-height: 1.3; color: var(--nebbia); background: none; border: 1px solid rgba(169, 182, 188, .45); padding: .3rem .85rem; cursor: pointer; }
.filtro:hover { color: var(--carta); border-color: var(--nebbia); }
.filtro[aria-pressed="true"] { color: var(--notte); background: var(--lume); border-color: var(--lume); }
.conta { margin-top: 1rem; }
.finestre { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 2.25rem 1.25rem; list-style: none; padding: 0; margin-top: 2rem; }
@media (min-width: 48rem) { .finestre { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 2.75rem 1.75rem; } }
.finestra { display: block; text-decoration: none; }
.finestra__luce {
  display: block; aspect-ratio: 2 / 3; background: var(--fondo);
  box-shadow: 0 0 2.6rem -.5rem color-mix(in srgb, var(--luce) 26%, transparent); transition: box-shadow .35s;
}
.finestra__luce img { width: 100%; height: 100%; object-fit: cover; }
.finestra:hover .finestra__luce, .finestra:focus-visible .finestra__luce { box-shadow: 0 0 3rem -.3rem color-mix(in srgb, var(--luce) 62%, transparent); }
.finestra__titolo { display: block; margin-top: .85rem; font-size: 1.125rem; line-height: 1.25; }
.finestra:hover .finestra__titolo { text-decoration: underline; }
.finestra__sotto { display: block; margin-top: .25rem; font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--nebbia); }
.finestra__nota { display: block; margin-top: .35rem; font-size: 1rem; line-height: 1.35; color: var(--lume); }
@media (max-width: 30rem) { .finestra__sotto { display: none; } }

/* ---- le edizioni ---- */
.edizioni { list-style: none; padding: 0; margin-top: 2.5rem; border-top: 1px solid var(--filo); }
.edizione { display: grid; gap: .35rem 2rem; align-items: baseline; padding-block: 1.4rem; border-bottom: 1px solid var(--filo); }
@media (min-width: 50rem) { .edizione { grid-template-columns: 13.5rem minmax(0, 1fr) 6.5rem 11.5rem; } }
.edizione h3 { font-size: 1.4rem; }
.edizione__prezzo { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.edizione__dove { justify-self: start; }
@media (min-width: 50rem) { .edizione__prezzo, .edizione__dove { justify-self: end; text-align: right; } }
.edizioni + .minore { margin-top: 1.25rem; }
.altra-lingua { margin-top: 1.75rem; max-width: var(--misura); }
.altra-lingua a { color: var(--ambra); }

/* ---- l'autore, le domande ---- */
.stacco { margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--filo); }
.coppia { display: grid; gap: clamp(3rem, 7vw, 5rem) clamp(2rem, 6vw, 5.5rem); }
@media (min-width: 64rem) { .coppia { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); align-items: start; } }
.coppia .prosa { margin-top: 1.5rem; }
.domande { margin-top: 1.75rem; max-width: 44rem; border-top: 1px solid var(--filo); }
.domande details { border-bottom: 1px solid var(--filo); padding-block: 1rem; }
.domande summary { display: flex; justify-content: space-between; gap: 1.5rem; cursor: pointer; font-size: 1.35rem; line-height: 1.25; list-style: none; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: "+"; color: var(--ambra); flex: none; }
.domande details[open] summary::after { content: "–"; }
.domande details p { margin-top: .7rem; max-width: var(--misura); }

/* ---- scrivimi ---- */
.contatti { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 56rem) { .contatti { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-items: start; } }
.contatti .legame { text-decoration: none; }
.motivo {
  width: 9rem; aspect-ratio: 560 / 784; margin-top: 2.5rem; background: var(--lume); opacity: .75;
  -webkit-mask: url("../img/motivo.webp") center / contain no-repeat; mask: url("../img/motivo.webp") center / contain no-repeat;
}
.modulo { display: grid; gap: 1.1rem; }
.campo label { display: block; margin-bottom: .3rem; font-size: 1.0625rem; color: var(--nebbia); }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--carta); background: rgba(18, 30, 38, .6);
  border: 1px solid rgba(169, 182, 188, .5); border-radius: 0; padding: .6rem .8rem;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo--breve input { max-width: 8rem; }
.campo input:focus-visible, .campo textarea:focus-visible { outline-offset: 0; border-color: var(--lume); }
.consenso { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.0625rem; line-height: 1.45; }
.consenso input { flex: none; width: 1.1rem; height: 1.1rem; margin: .22rem 0 0; accent-color: var(--lume); }
.trappola { position: absolute; left: -999rem; }
.esito { min-height: 1.6em; font-size: 1.125rem; }
.esito[data-stato="ok"] { color: #BFDDAA; }
.esito[data-stato="errore"] { color: #F6BFA6; }

/* ---- pagina di un racconto ---- */
.racconto { display: grid; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3.5rem, 8vw, 6rem); }
@media (min-width: 44rem) { .racconto { grid-template-columns: minmax(0, min(40%, 27rem)) minmax(0, 1fr); align-items: center; } .racconto .porta { justify-self: start; } }
@media (max-width: 43.99rem) { .racconto .porta { width: min(100%, 26rem); justify-self: start; } }
.racconto__testo { max-width: 33rem; }
.racconto__dove { color: var(--nebbia); font-size: 1.0625rem; margin-bottom: 1rem; }
.racconto h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; }
.racconto__sotto { font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.3; margin-top: .6rem; }
.racconto__presenta { margin-top: 1.75rem; }
.racconto .voce { margin-top: 1.75rem; }
.racconto__invito { margin-top: 2rem; color: var(--nebbia); }
.racconto .azioni { margin-top: 1.1rem; }

/* il foglio con il racconto intero: capoversi rientrati, come nel libro */
.pagina { max-width: 34rem; margin-inline: auto; font-size: 1.3125rem; line-height: 1.62; }
.pagina h2 { margin-bottom: 1.5rem; }
.pagina p { hyphens: auto; -webkit-hyphens: auto; }
.pagina p + p { text-indent: 1.4em; }
.pagina .pagina__nota { margin-top: 2.5rem; text-indent: 0; font-size: 1.0625rem; color: var(--grafite); }
@media (max-width: 40rem) { .pagina { font-size: 1.25rem; } }

/* la Bussola */
.bussola { display: grid; gap: 2rem clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 56rem) { .bussola { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; } .bussola__esito { position: sticky; top: calc(var(--barra) + 2rem); } }
.bussola fieldset { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
.bussola legend { padding: 0; font-size: 1.4rem; line-height: 1.2; }
.bussola__domanda { font-style: italic; color: var(--grafite); margin-top: .3rem; }
.scelta { display: flex; gap: .7rem; align-items: baseline; padding-block: .4rem; cursor: pointer; }
.scelta input { flex: none; width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ambra); translate: 0 .12rem; }
.scelta em { font-style: italic; }
.bussola__esito { padding: 1.5rem; border: 1px solid var(--filo); background: rgba(255, 255, 255, .35); }
.bussola__esito > * + * { margin-top: .8rem; }
.bussola__esito strong { font-size: 1.5rem; font-weight: 400; font-variant-numeric: lining-nums; }

/* rifugio precedente e successivo */
.vicini { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; padding-block: 2rem; border-top: 1px solid rgba(169, 182, 188, .28); }
.vicini a { text-decoration: none; }
.vicini a:hover b { text-decoration: underline; }
.vicini span { display: block; font-size: 1.0625rem; color: var(--nebbia); }
.vicini b { font-weight: 400; }
.vicini__dopo { text-align: right; }
.vicini__tutti { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(169, 182, 188, .28); font-size: 1.0625rem; }
.vicini__tutti a { color: var(--lume); }

/* pagine di servizio */
.servizio { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); }
.servizio h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.servizio h2 { font-size: 1.6rem; margin-top: 2.25rem; }
.servizio .prosa { max-width: 36rem; margin-top: 1rem; }

/* ---- piede ---- */
.piede { background: var(--notte); color: var(--nebbia); font-size: 1.0625rem; line-height: 1.5; padding-block: 2.5rem; }
.piede .dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem; }
.piede a { color: var(--carta); }
.piede ul { list-style: none; padding: 0; display: flex; gap: 1.5rem; }

@media print {
  body, .muro, .piede { background: #fff; color: #000; }
  .js body > header, .js .home > header { position: static; box-shadow: none; transform: none; }
  .testata nav, .filtri, .modulo, .vicini { display: none; }
}