/* LiberaMente — stile.
   Colori presi dal trullo: la calce dei muri, la pietra dei coni, il verde
   degli ulivi intorno. Tanta aria: il sito deve rallentare chi lo guarda. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/font/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/font/cormorant-corsivo.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/font/jost.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --calce: #fbf9f4;
  --pietra: #f1ede4;
  --salvia-fondo: #e9ece1;
  --linea: #e3ded2;
  --linea-scura: #cdc6b5;
  --inchiostro: #2b2d26;
  --inchiostro-2: #5a5c52;
  --oliva: #56633f;
  --oliva-scura: #414b2f;
  --oliva-chiara: #a9b48f;
  --piede: #2f3329;
  --su-piede: #e9e6dc;
  --su-piede-2: #b8bba9;
  /* le fughe della cupola: appena più scure del fondo su cui stanno */
  --fughe: #e0d9ca;
  --fughe-piede: #41463a;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margine: clamp(20px, 5vw, 64px);
  --sezione: clamp(96px, 12vw, 176px);
  --testata: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--testata);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.72 var(--sans);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--oliva); }
h2, .titolo-grande { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.2rem); margin-bottom: 1.8rem; }
h3 { font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.3rem); margin-bottom: 0.9rem; }

:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; }
.piede :focus-visible { outline-color: var(--oliva-chiara); }

.contenitore { width: min(1200px, 100% - 2 * var(--margine)); margin-inline: auto; }

.sopra {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  font: 500 0.76rem/1.2 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oliva);
}
/* un piccolo anello al posto del trattino */
.sopra::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.primo { font-size: 1.2rem; line-height: 1.65; }
.nota { font-size: 0.86rem; line-height: 1.5; color: var(--inchiostro-2); }

.salta {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--calce);
  color: var(--inchiostro);
}
.salta:focus { top: 12px; }

/* --- la firma: la cupola vista da sotto ------------------------------------ */

.motivo { position: absolute; width: 0; height: 0; overflow: hidden; }
.cupola { display: block; stroke-width: 1.2; pointer-events: none; }

/* 1. dietro il titolo del trullo */
.titolo-cupola { position: relative; isolation: isolate; }
.cupola-titolo {
  position: absolute;
  z-index: -1;
  left: clamp(-150px, -9vw, -60px);
  top: 50%;
  width: clamp(280px, 34vw, 480px);
  height: clamp(280px, 34vw, 480px);
  transform: translateY(-58%);
  color: var(--fughe);
  /* gli anelli si spengono verso il basso: dietro il titolo sì, dietro il
     paragrafo no, che deve restare pulito da leggere */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 76%);
}

/* 2. il separatore, prima della quiete */
.separatore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0 auto clamp(64px, 8vw, 112px);
  color: var(--linea-scura);
}
.separatore::before, .separatore::after {
  content: "";
  width: min(20vw, 180px);
  height: 1px;
  background: var(--linea);
}
.cupola-separatore { width: 96px; height: 96px; stroke-width: 1.1; }

/* 3. nel piede: grande, tagliata dal bordo */
.cupola-piede {
  position: absolute;
  z-index: 0;
  right: clamp(-260px, -14vw, -130px);
  top: 50%;
  width: clamp(320px, 46vw, 620px);
  height: clamp(320px, 46vw, 620px);
  transform: translateY(-50%);
  color: var(--fughe-piede);
  stroke-width: 1.3;
}

/* --- bottoni --------------------------------------------------------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 1.5em;
  border: 1.5px solid var(--oliva);
  border-radius: 999px;
  background: var(--oliva);
  color: #fff;
  font: 500 0.95rem/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.bottone:hover { background: var(--oliva-scura); border-color: var(--oliva-scura); }
.bottone-vuoto { background: transparent; color: var(--oliva); }
.bottone-vuoto:hover { background: var(--oliva); border-color: var(--oliva); color: #fff; }
.bottone-chiaro { background: var(--calce); border-color: var(--calce); color: var(--inchiostro); }
.bottone-chiaro:hover { background: #fff; border-color: #fff; color: var(--inchiostro); }
.bottone-piccolo { min-height: 40px; padding: 0 1.15em; font-size: 0.86rem; }

.collegamento {
  padding: 10px 0 3px;
  border-bottom: 1px solid var(--linea-scura);
  color: var(--inchiostro);
  font-weight: 500;
  text-decoration: none;
}
.collegamento:hover { border-bottom-color: var(--oliva); color: var(--oliva); }

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

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 244, 0.97);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(8px)) {
  .testata { background: rgba(251, 249, 244, 0.88); backdrop-filter: blur(12px); }
}
.testata-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--testata);
  padding: 8px var(--margine);
  padding-top: max(8px, env(safe-area-inset-top));
}
.marchio { display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1; }
.marchio-nome { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.005em; }
.marchio-nome i { font-weight: 500; color: var(--oliva); }
.marchio-sotto { margin-top: 5px; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--inchiostro-2); }
@media (min-width: 600px) { .marchio-sotto { font-size: 0.64rem; letter-spacing: 0.2em; } }

.menu { display: none; }
.menu a { color: inherit; text-decoration: none; font-size: 0.92rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--oliva); color: var(--oliva); }

.testata-azioni { display: flex; align-items: center; gap: 4px; }
/* sui telefoni più stretti il «Prenota» della testata lascia il posto al
   marchio: lo stesso pulsante è già nell'apertura */
@media (max-width: 359px) { .testata .bottone-piccolo { display: none; } }
@media (min-width: 600px) { .testata-azioni { gap: 12px; } }
.lingue { display: inline-flex; gap: 2px; }
.lingue a {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 40px;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  opacity: 0.7;
}
.lingue a:hover { opacity: 1; }
.lingue a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

@media (min-width: 1100px) {
  .menu { display: flex; gap: 28px; }
}

/* --- apertura ------------------------------------------------------------------
   La foto prende tutta la finestra; il testo sta su un foglio di calce che
   sale dal basso, così si legge sempre, qualunque cosa ci sia nella foto. */

.apertura {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - var(--testata));
  min-height: calc(100svh - var(--testata));
  padding: 0;
  overflow: hidden;
  background: var(--pietra);
}
.apertura-foto img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (max-aspect-ratio: 4/5) {
  .apertura-foto img { object-position: 50% 0%; }
}
.apertura-pannello {
  width: min(100% - 28px, 42rem);
  padding: 30px var(--margine) 34px;
  background: var(--calce);
}
@media (min-width: 960px) {
  .apertura-pannello { width: min(100% - 2 * var(--margine), 46rem); padding: 56px var(--margine) 60px; }
}
.apertura h1 {
  margin-bottom: 1.6rem;
  font-size: clamp(2.1rem, 1.25rem + 3.3vw, 4.1rem);
  line-height: 1.04;
}
.apertura h1 em { display: block; margin-top: 0.15em; }
.voto { display: flex; align-items: center; gap: 16px; margin: 0 0 1.8rem; }
/* il voto dentro due anelli */
.voto-numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--oliva);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--calce), 0 0 0 5px var(--linea-scura);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--oliva);
}
.voto-parole { font-size: 0.92rem; line-height: 1.4; color: var(--inchiostro-2); }
.voto-parole strong { font-weight: 500; color: var(--inchiostro); }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* --- sezioni -------------------------------------------------------------------- */

section { padding-block: var(--sezione); }
.fondo-pietra { background: var(--pietra); }
.fondo-salvia { background: var(--salvia-fondo); }

.intestazione { max-width: 44rem; margin-bottom: clamp(56px, 7vw, 104px); }
.intestazione h2 { margin-bottom: 1.3rem; }
.intestazione-testo { margin: 0; font-size: 1.18rem; color: var(--inchiostro-2); }

figcaption { margin-top: 0.8rem; font-size: 0.86rem; color: var(--inchiostro-2); }

/* il trullo */
.trullo { overflow: hidden; overflow: clip; }
.trullo-griglia { display: grid; gap: 56px; }
.trullo-testo > p:not(.sopra) { max-width: 34rem; }
.trullo-testo > p:not(.primo):not(.sopra) { color: var(--inchiostro-2); }
.dati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 22px;
  margin: 2.6rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.dati dt { font-family: var(--serif); font-size: 2.7rem; font-weight: 500; line-height: 1; color: var(--oliva); }
.dati dt, .voto-numero, .punteggio-numero, .orario-ore { font-variant-numeric: lining-nums tabular-nums; }
.dati dd { margin: 0.45rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--inchiostro-2); }
@media (min-width: 960px) {
  .trullo-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: start; }
  .trullo-testo { grid-column: 1 / 6; }
  .trullo-foto { grid-column: 7 / 13; margin-top: clamp(80px, 10vw, 160px); }
}

/* la doccia nel cono: il dettaglio che non ha nessun altro */
.doccia { display: grid; gap: 36px; margin-top: var(--sezione); }
.doccia-testo { width: min(100% - 2 * var(--margine), 30rem); margin-inline: auto; }
.doccia-testo > p:last-child { margin: 0; font-size: 1.15rem; color: var(--inchiostro-2); }
@media (min-width: 960px) {
  .doccia { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
  .doccia-testo { width: auto; max-width: 28rem; margin: 0; padding-right: var(--margine); }
}

/* gli spazi */
.ambiente { display: grid; gap: 22px; margin-bottom: clamp(80px, 10vw, 144px); }
.ambiente-testo p { color: var(--inchiostro-2); }
.ambiente-piccole { display: flex; gap: 16px; align-items: flex-end; }
.ambiente-piccole figure { flex: 1 1 0; }
.dotazioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}
.dotazioni li { position: relative; padding-left: 20px; line-height: 1.4; }
/* un anellino al posto del pallino */
.dotazioni li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--oliva);
  border-radius: 50%;
}
@media (min-width: 960px) {
  .ambiente { grid-template-columns: repeat(12, 1fr); gap: 32px clamp(20px, 3vw, 40px); align-items: end; }
  .ambiente-grande { grid-column: 1 / 8; grid-row: 1 / 3; }
  .ambiente-testo { grid-column: 9 / 13; grid-row: 1; }
  .ambiente-piccole { grid-column: 9 / 13; grid-row: 2; }
  .ambiente-rovescio .ambiente-grande { grid-column: 6 / 13; }
  .ambiente-rovescio .ambiente-testo, .ambiente-rovescio .ambiente-piccole { grid-column: 1 / 5; }
}
.lavanderia {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding-top: 2.4rem;
  border-top: 1px solid var(--linea-scura);
}
.lavanderia h3 { margin-bottom: 0.4rem; }
.lavanderia p { margin: 0; color: var(--inchiostro-2); }
@media (min-width: 960px) {
  .lavanderia { grid-template-columns: 280px minmax(0, 30rem); gap: 40px; }
}

/* la quiete */
.quiete-griglia { display: grid; gap: 48px; }
.quiete-testo > p:not(.sopra) { max-width: 34rem; }
.quiete-testo > p:last-child { color: var(--inchiostro-2); }
.elenchi { display: grid; gap: 40px; }
.elenco h3 { margin-bottom: 0.6rem; font: 500 0.76rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--oliva); }
.elenco dl, .sottovoti { margin: 0; }
.elenco dl div, .sottovoti div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--linea);
}
.elenco dd, .sottovoti dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--inchiostro-2); }
@media (min-width: 720px) {
  .elenchi { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
}
@media (min-width: 960px) {
  .quiete-griglia { grid-template-columns: repeat(12, 1fr); gap: clamp(72px, 8vw, 120px) clamp(20px, 3vw, 40px); align-items: center; }
  .quiete-testo { grid-column: 1 / 6; }
  .quiete-foto { grid-column: 7 / 13; }
  .elenchi { grid-column: 1 / 13; }
}

/* recensioni */
.recensioni-griglia { display: grid; gap: 56px; }
.punteggio { display: flex; align-items: center; gap: 22px; margin-bottom: 1.6rem; }
.punteggio-numero {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 3rem + 3vw, 5.6rem);
  font-weight: 500;
  line-height: 0.9;
  color: var(--oliva);
}
.punteggio-parole { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--inchiostro-2); }
.punteggio-parole strong { font-weight: 500; color: var(--inchiostro); }
.sottovoti-titolo {
  margin: 2.4rem 0 0.4rem;
  font: 500 0.76rem/1.3 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oliva);
}
.sottovoti div { border-bottom-color: #d6dacb; }
.sottovoti dd { color: var(--inchiostro); font-weight: 500; }
.citazioni { display: grid; gap: 40px 48px; align-content: start; }
.citazione { margin: 0; padding-left: 24px; border-left: 1px solid var(--oliva-chiara); }
.citazione blockquote { margin: 0; }
.citazione p { margin: 0; font-family: var(--serif); font-size: 1.55rem; font-style: italic; line-height: 1.32; color: var(--inchiostro); }
.citazione figcaption { margin-top: 0.9rem; font-size: 0.92rem; font-weight: 500; color: var(--inchiostro); }
.citazione figcaption span { font-weight: 400; color: var(--inchiostro-2); }
.recensioni-nota { margin: clamp(48px, 6vw, 80px) 0 0; }
@media (min-width: 720px) {
  .citazioni { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .recensioni-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
  .punteggi { grid-column: 1 / 5; }
  .citazioni { grid-column: 6 / 13; }
}

/* informazioni utili */
.info-griglia { display: grid; gap: 56px; }
.orari { display: grid; gap: 14px; }
.orario { padding: 24px 24px 20px; border: 1px solid var(--linea-scura); border-radius: 2px; }
.orario h3 { margin: 0; font: 500 0.76rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--oliva); }
.orario .orario-ore { margin: 0.5rem 0 0.4rem; font-family: var(--serif); font-size: 2.1rem; font-weight: 500; line-height: 1.1; }
.orario p:last-child { margin: 0; font-size: 0.9rem; color: var(--inchiostro-2); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande details:first-child { border-top: 1px solid var(--linea); }
.domande summary {
  position: relative;
  padding: 1.15rem 2.6rem 1.15rem 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font: 300 1.6rem/1 var(--sans);
  color: var(--oliva);
}
.domande details[open] summary::after { content: "−"; }
.risposta p { margin: 0 0 1.3rem; color: var(--inchiostro-2); }
@media (min-width: 560px) {
  .orari { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .info-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
  .info-orari { grid-column: 1 / 6; }
  .domande { grid-column: 7 / 13; padding-top: 0.4rem; }
}

/* contatti */
.contatti-griglia { display: grid; gap: 56px; }
.contatti-testo > p { max-width: 30rem; color: var(--inchiostro-2); }
.contatti-bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 2.8rem; }
.contatti-dove { margin: 0 0 0.6rem; font: 500 0.76rem/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--oliva); }
address { font-family: var(--serif); font-size: 1.45rem; font-style: normal; line-height: 1.4; }
.mappa-copertina { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linea); }
.mappa-copertina img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.mappa-apri { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 6px 24px rgba(30, 32, 26, 0.22); }
.mappa-tela { width: 100%; aspect-ratio: 4 / 5; background: var(--linea); }
.mappa .nota { margin-top: 0.9rem; }
@media (min-width: 960px) {
  .contatti-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: center; }
  .contatti-testo { grid-column: 1 / 6; }
  .mappa { grid-column: 7 / 13; }
  .mappa-copertina, .mappa-tela { aspect-ratio: 3 / 2; }
}
/* Leaflet, solo quando la mappa è aperta */
.mappa-tela.leaflet-container { font-family: var(--sans); }
.mappa-segno {
  width: 22px;
  height: 22px;
  border: 2px solid var(--oliva);
  border-radius: 50%;
  background: var(--calce);
  box-shadow: 0 0 0 4px rgba(251, 249, 244, 0.9), 0 0 0 5.5px var(--oliva);
}

/* piede */
.piede {
  position: relative;
  overflow: hidden;
  padding: 72px 0 calc(56px + env(safe-area-inset-bottom));
  background: var(--piede);
  color: var(--su-piede-2);
}
.piede-dentro { position: relative; z-index: 1; display: grid; gap: 4px; font-size: 0.9rem; }
.piede-dentro p { margin: 0; }
.piede-nome { margin-bottom: 10px !important; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--su-piede); }
.piede-collegamenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 16px; color: var(--su-piede); }
.piede-collegamenti > a { color: var(--su-piede); text-underline-offset: 4px; }

/* avviso dei pulsanti ancora scollegati */
.avviso {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 440px);
  margin: 0;
  padding: 14px 20px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--calce);
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.avviso[hidden] { display: none; }

/* pagine semplici: privacy, 404 */
.semplice { max-width: 46rem; padding: 72px 0 112px; }
.semplice h1 { margin-bottom: 1.4rem; font-size: clamp(2.6rem, 2rem + 3vw, 4rem); }
.semplice h2 { margin: 2.4rem 0 0.6rem; font-size: 1.7rem; }
.semplice p { color: var(--inchiostro-2); }
.semplice .primo { color: var(--inchiostro); }
.semplice a { text-underline-offset: 3px; }
.semplice .collegamento { display: inline-block; margin-top: 1rem; }
.nontrovata { padding-top: 64px; text-align: center; }
.nontrovata .separatore { margin-bottom: 48px; }