@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodonimoda.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodonimoda-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --carta: #f5f0e6;
  --inchiostro: #26221d;
  --vino: #6b2233;
  --verde: #4a5542;
  --filo: rgba(38, 34, 29, 0.3);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --testo: "Newsreader", "Baskerville", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-weight: 400;
  font-size: clamp(1.09rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.68;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grana di carta. Se la si nota, e' troppo forte. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.foglio { max-width: 62rem; margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem) 4rem; }

/* --- lingua ------------------------------------------------------------- */

.lingua {
  position: absolute;
  top: clamp(1.4rem, 3.5vw, 2.4rem);
  right: clamp(1.5rem, 6vw, 4.5rem);
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lingua a { color: var(--inchiostro); opacity: 0.58; text-decoration: none; transition: opacity .3s, color .3s; }
.lingua a:hover { opacity: 1; }
.lingua a[aria-current] { opacity: 1; color: var(--vino); }
.lingua span { opacity: 0.25; }

/* --- apertura ----------------------------------------------------------- */

/* Il primo schermo lavora come la carta: ornamento solo in due angoli opposti,
   testo al centro, e in mezzo il vuoto. E' il vuoto a fare il lavoro. */
.apertura {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(5rem, 14vh, 9rem) clamp(1.5rem, 6vw, 4.5rem);
}

.ornamento {
  position: absolute;
  width: clamp(9rem, 30vw, 23rem);
  aspect-ratio: 256 / 236;
  background: url("ornamento.svg") no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ornamento.alto { top: 0; left: 0; }
.ornamento.basso { bottom: 0; right: 0; transform: rotate(180deg); }

.apertura > .centro { position: relative; z-index: 1; }

.occhiello {
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--vino);
  margin-right: -0.4em;
}

.nomi {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: clamp(1.4rem, 3.5vw, 2.4rem) 0;
}
.nomi .e {
  display: block;
  font-style: italic;
  color: var(--vino);
  font-size: 0.44em;
  line-height: 1.6;
}

.occasione {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.55rem);
}

.quando {
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.8vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.quando .anno { display: block; font-size: 0.78em; letter-spacing: 0.2em; }

.dove {
  font-size: 0.86rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vino);
  margin-top: 1.4rem;
  margin-right: -0.3em;
}

/* --- movimenti ---------------------------------------------------------- */

section {
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: clamp(1.1rem, 4vw, 3rem);
  padding: clamp(2.4rem, 6vw, 3.8rem) 0;
  border-top: 1px solid var(--filo);
}

h2 {
  font-family: var(--testo);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vino);
  line-height: 2;
  margin-right: -0.26em;
}

.corpo > * + * { margin-top: 1.05rem; }
.corpo p { max-width: 32em; }

/* Il paragrafo che porta l'informazione vera sta da solo e in display. */
.guida {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.32rem, 3.5vw, 1.8rem);
  line-height: 1.44;
  max-width: 20em;
}

.nota { font-style: italic; opacity: 0.82; max-width: 31em; }

/* --- aeroporti ---------------------------------------------------------- */

.scali { width: 100%; border-collapse: collapse; max-width: 33em; }
.scali th {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0.62;
  padding-bottom: 0.6rem;
}
.scali th + th, .scali td + td { text-align: right; }
.scali td { padding: 0.8rem 0; border-top: 1px solid var(--filo); vertical-align: baseline; }
.scali .scalo { font-family: var(--display); font-size: 1.14em; }
.scali .sigla {
  font-family: var(--testo);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  opacity: 0.62;
  margin-left: 0.5em;
}
.scali .ore, .scali .km { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scali .km { opacity: 0.68; }

/* --- conto -------------------------------------------------------------- */

.conto { display: grid; gap: 1.5rem; max-width: 33em; }
@media (min-width: 42rem) { .conto { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.conto h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.24rem;
  margin-bottom: 0.55rem;
}
.conto .nostro h3 { color: var(--vino); }
.conto ul { list-style: none; }
.conto li { padding: 0.5rem 0; border-top: 1px solid var(--filo); }

/* --- contatti ----------------------------------------------------------- */

.contatti { list-style: none; }
.contatti li { padding: 0.45rem 0; }
.contatti a, .contatti .valore { color: var(--inchiostro); text-decoration: none; border-bottom: 1px solid var(--filo); }
.contatti a:hover { color: var(--vino); border-bottom-color: var(--vino); }
.contatti .chi { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.62; }

/* --- chiusa ------------------------------------------------------------- */

.chiusa { text-align: center; padding-top: clamp(3rem, 9vw, 5rem); border-top: 1px solid var(--filo); }
.chiusa .paesaggio { width: min(19rem, 62%); height: auto; display: block; margin: 0 auto; }
.chiusa .saluto {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.16rem, 2.9vw, 1.42rem);
  margin-top: 2rem;
}
.chiusa .indirizzo {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 2.4rem;
  margin-right: -0.24em;
}

/* --- entrata ------------------------------------------------------------ */

.sale { opacity: 0; animation: sale 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes sale {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sale { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

@media (max-width: 40rem) {
  section { grid-template-columns: 1fr; gap: 0.8rem; }
  h2 { line-height: 1.6; }
}