/* Fino all’olio. Un racconto per scale: il nero oliva delle sezioni che scorrono, il verde argento del
   rovescio delle foglie, l’oro solo per l’olio. Titoli e numeri in Cormorant Garamond, testo in Geist. */

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

:root {
  color-scheme: dark;
  --notte: #0c0f0b;
  --notte-2: #141912;
  --argento: #e6e9e1;
  --argento-2: #d3d9cc;
  --inchiostro: #11150f;
  --inchiostro-2: #4b5446;
  --luce: #f4f1e8;
  --luce-2: rgb(244 241 232 / .78);
  --oliva: #667a1f;
  --salvia: #a3ad92;
  --oro: #d8ad45;
  --oro-chiaro: #efd384;
  --terra: #9a4a2a;
  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --testo: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --margine: clamp(20px, 6.5vw, 120px);
  --corpo: clamp(1.125rem, .98rem + .5vw, 1.4375rem);
  --grande: clamp(1.55rem, 1.1rem + 1.6vw, 2.55rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-padding-top: var(--apulsense-bar-h, 0px);
  -webkit-text-size-adjust: 100%;
  background: var(--notte);
}
body {
  margin: 0;
  background: var(--notte);
  color: var(--luce);
  font: 380 var(--corpo)/1.6 var(--testo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: .95; letter-spacing: -.012em; margin: 0 0 .32em; }
p { margin: 0 0 1em; max-width: 36em; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
i, cite { font-style: italic; }
::selection { background: var(--oro); color: var(--inchiostro); }

.occhiello {
  font: 500 .72rem/1.3 var(--testo);
  letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 1.6rem; opacity: .8;
  display: flex; align-items: center; gap: .9em;
}
.occhiello::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: .7; }
.grande {
  font: 400 var(--grande)/1.18 var(--display);
  letter-spacing: -.005em;
  max-width: 21em;
}
.nota {
  font: 500 .62em/1 var(--testo);
  vertical-align: .6em; margin-left: .12em;
  text-decoration: none; opacity: .6;
}
.nota:hover, .nota:focus-visible { opacity: 1; }
.etichetta {
  font: 500 .68rem/1.5 var(--testo);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 1.8rem 0 0; opacity: .66;
  max-width: 34em;
}
.etichetta .nota { font-size: .95em; vertical-align: .3em; }

/* ------------------------------------------------------------------ la scala */
.scala { position: fixed; inset: 0; z-index: 20; pointer-events: none; color: var(--luce); transition: opacity .6s, color .6s; }
.scala[data-tono="chiaro"] { color: var(--inchiostro); }
.scala[data-nascosta] { opacity: 0; }
.scala__valore { position: absolute; left: var(--margine); top: calc(var(--apulsense-bar-h, 0px) + clamp(18px, 3vh, 34px)); transition: top .4s; }
.scala__nome { margin: 0 0 .15rem; font: 500 .66rem/1 var(--testo); letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.scala__num { margin: 0; font: 300 clamp(2.5rem, 4.6vw, 4.6rem)/1 var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.scala[data-tono="scuro"] .scala__num { text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.scala__asta { display: none; }
@media (min-width: 960px) and (min-height: 640px) {
  .scala__asta {
    display: block; position: absolute; right: calc(var(--margine) * .5); top: 50%;
    width: 1px; height: min(58vh, 520px); transform: translateY(-50%);
    background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
    opacity: .85;
  }
  .scala__tacca {
    position: absolute; right: 12px; top: calc(var(--p) / 9 * 100%);
    font: 500 .6rem/1 var(--testo); letter-spacing: .14em; white-space: nowrap;
    transform: translateY(-50%); opacity: .5;
  }
  .scala__tacca::after { content: ""; position: absolute; right: -12px; top: 50%; width: 7px; height: 1px; background: currentColor; }
  .scala__segno {
    position: absolute; left: -4.5px; top: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--oro); box-shadow: 0 0 0 4px rgb(216 173 69 / .22);
    transform: translateY(calc(var(--y, 0) * 1px - 50%));
    will-change: transform;
  }
}

/* ------------------------------------------------------------------ apertura: il volo */
.inizio {
  position: relative; min-height: 100lvh; overflow: clip;
  display: grid; align-content: end;
  padding: calc(48px + 10vh) var(--margine) clamp(28px, 7vh, 72px);
  isolation: isolate;
}
.inizio__media { position: absolute; inset: 0; z-index: -1; }
.inizio__media img, .inizio__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inizio__media video { opacity: 0; transition: opacity 1.2s ease; }
.inizio__media video.suona { opacity: 1; }
.inizio__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(8 10 7 / .42) 0%, rgb(8 10 7 / 0) 28%, rgb(8 10 7 / 0) 45%, rgb(8 10 7 / .72) 100%),
    linear-gradient(90deg, rgb(8 10 7 / .35) 0%, rgb(8 10 7 / 0) 60%);
}
.inizio h1 {
  font-size: clamp(4.4rem, 15.5vw, 16rem);
  font-weight: 300; line-height: .8; letter-spacing: -.035em;
  margin: 0 0 .22em; margin-left: -.05em;
}
.inizio__sotto { font: italic 300 clamp(1.5rem, 1rem + 1.7vw, 2.6rem)/1.15 var(--display); margin: 0 0 2.2rem; max-width: 18em; }
.inizio__dati { margin: 0; max-width: 40rem; font-size: .88rem; line-height: 1.6; color: rgb(244 241 232 / .86); }
.inizio__dati span { display: block; }
.inizio__giu {
  position: absolute; right: var(--margine); bottom: clamp(28px, 7vh, 72px);
  margin: 0; font: 500 .66rem/1 var(--testo); letter-spacing: .24em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 14px; writing-mode: vertical-rl;
}
.inizio__giu::after { content: ""; width: 1px; height: 64px; background: currentColor; transform-origin: top; animation: giu 2.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes giu { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.inizio__fonte { position: absolute; right: var(--margine); top: calc(var(--apulsense-bar-h, 0px) + 22px); margin: 0; font: 500 .6rem/1 var(--testo); letter-spacing: .2em; text-transform: uppercase; opacity: .7; transition: top .4s; }
@media (max-width: 700px) {
  .inizio { padding-bottom: 88px; }
  .inizio__giu { writing-mode: horizontal-tb; flex-direction: row; left: var(--margine); right: auto; bottom: 28px; }
  .inizio__giu::after { width: 40px; height: 1px; transform-origin: left; animation-name: giu-x; }
}
@keyframes giu-x { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ------------------------------------------------------------------ 100 km: la mappa */
.apertura {
  position: relative; color: var(--inchiostro);
  background: radial-gradient(90% 70% at 85% 30%, #eef0e2 0%, rgb(238 240 226 / 0) 70%), linear-gradient(170deg, #e4e9dc 0%, #d9e0cf 100%);
  padding: clamp(96px, 16vh, 180px) var(--margine) clamp(72px, 12vh, 140px);
  display: grid; gap: 3rem;
}
.apertura h2 { font-size: clamp(3.6rem, 9vw, 9rem); letter-spacing: -.03em; }
.apertura .grande { color: var(--inchiostro); }
.apertura__testo p:not(.grande):not(.occhiello) { color: var(--inchiostro-2); max-width: 30em; }
.come-si-legge { font-size: .88em; border-top: 1px solid rgb(17 21 15 / .16); padding-top: 1.1rem; margin-top: 2rem; }
.apertura__mappa { margin: 0; }
.apertura__mappa figcaption { font: 500 .64rem/1.5 var(--testo); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro-2); margin-top: 1rem; }
@media (min-width: 1000px) {
  .apertura { grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.4fr); align-items: center; column-gap: clamp(3rem, 6vw, 7rem); min-height: 100lvh; }
  .apertura__mappa { margin-right: calc(var(--margine) * -.5); }
}
.mappa { width: 100%; height: auto; font-family: var(--testo); }
.mappa__fuori { fill: #dcdfd6; }
.mappa__terra { fill: #f3f4ef; stroke: #b9bfb1; stroke-width: .1; stroke-linejoin: round; }
.mappa__zona { stroke: #f7f8f4; stroke-width: .28; stroke-linejoin: round; }
.mappa__zona--cdm { fill: #c9c7ad; }
.mappa__zona--bit { fill: #7f8f45; }
.mappa__zona--mtg { fill: #b7c0a4; }
.mappa__zona-nome { font-size: 2.1px; font-weight: 500; fill: var(--inchiostro); letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; }
.mappa__zona-nome--bit { fill: #f4f5ef; }
.mappa__mare-nome { font-size: 1.9px; font-weight: 500; fill: #6c8583; letter-spacing: .5em; text-transform: uppercase; }
.mappa__luogo circle { fill: var(--inchiostro); }
.mappa__luogo text { font-size: 1.9px; font-weight: 500; fill: var(--inchiostro); letter-spacing: .03em; }
.mappa__riquadro { fill: none; stroke: var(--terra); stroke-width: .32; }
.mappa__punto { fill: var(--terra); stroke: #fff; stroke-width: .25; }
.mappa__barra path { stroke: var(--inchiostro); stroke-width: .15; fill: none; }
.mappa__barra text { font-size: 1.5px; fill: var(--inchiostro-2); letter-spacing: .08em; }

/* ------------------------------------------------------------------ sezioni con uno schermo fermo */
.scorre, .tavola { position: relative; }
.scorre { background: var(--notte); }
.palco {
  position: sticky; top: 0;
  height: 100lvh;
  overflow: clip;
  z-index: 0;
}
/* i testi salgono sopra lo schermo fermo; il margine sta sulla prima tappa e non sul palco, così il palco
   resta dentro la sua sezione e non copre quella dopo */
.palco + .tappa { margin-top: -100lvh; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* un velo scuro sul lato dei testi: le immagini restano intere, il testo si legge */
.scorre .palco::after, .tavola--foglia .palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(8 10 7 / .86) 0%, rgb(8 10 7 / .7) 30%, rgb(8 10 7 / .28) 52%, rgb(8 10 7 / 0) 70%),
              linear-gradient(0deg, rgb(8 10 7 / .4) 0%, rgb(8 10 7 / 0) 30%);
}
.palco__tratto {
  position: absolute; right: var(--margine); bottom: calc(100lvh - 100dvh + clamp(18px, 4vh, 40px)); z-index: 1;
  margin: 0; max-width: min(26rem, 70vw);
  font: 500 .6rem/1.5 var(--testo); letter-spacing: .2em; text-transform: uppercase; text-align: right;
  color: var(--luce); opacity: .82; text-shadow: 0 1px 12px rgb(0 0 0 / .6);
}
.palco--foto picture, .palco--foto img { width: 100%; height: 100%; }
.palco--foto img { object-fit: cover; will-change: transform; }
/* l'oliva sta a destra: a sinistra resta la carta, per il testo */
.tavola--oliva .palco--foto img { transform-origin: 70% 56%; }
@media (min-width: 960px) {
  .tavola--oliva .palco--foto picture { position: absolute; right: 0; top: 0; width: 66%; }
  .tavola--oliva .palco--foto img { transform-origin: 80% 56%; }
  .tavola--oliva .testo { max-width: 26rem; }
  .tavola--oliva .palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(235 231 220 / .96) 0%, rgb(235 231 220 / .82) 30%, rgb(235 231 220 / 0) 46%); }
}

.tappa {
  position: relative; z-index: 1;
  min-height: 150lvh;
  display: flex; align-items: center;
  padding: 22vh var(--margine);
}
.tappa:first-of-type { min-height: 160lvh; }
.testo { max-width: 36rem; text-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 2px 24px rgb(0 0 0 / .45); }
.testo h2 { font-size: clamp(3rem, 6.2vw, 6.4rem); letter-spacing: -.028em; margin-bottom: .42em; }
.testo > p:not(.testo__quota):not(.etichetta):not(.grande) { color: rgb(244 241 232 / .9); }
.testo .grande { font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); }
.testo__quota {
  font: 500 .7rem/1.3 var(--testo); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-chiaro); margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4em 1.4em; align-items: center;
}
.testo__quota span { color: var(--luce); opacity: .7; }
.testo__quota span::before { content: ""; display: inline-block; width: 1.6em; height: 1px; background: currentColor; vertical-align: .3em; margin-right: 1em; opacity: .7; }
@media (min-width: 960px) { .tappa { padding-left: calc(var(--margine) + 2vw); } }
@media (max-width: 959px) {
  .tappa { align-items: flex-end; padding-bottom: 12vh; }
  /* sul telefono i testi stanno in basso: l'etichetta della fonte va in alto a destra */
  .palco__tratto { bottom: auto; top: calc(var(--apulsense-bar-h, 0px) + 22px); max-width: 46vw; transition: top .4s; }
  .scorre .palco::after, .tavola--foglia .palco::after {
    background: linear-gradient(0deg, rgb(8 10 7 / .92) 0%, rgb(8 10 7 / .74) 42%, rgb(8 10 7 / 0) 76%);
  }
}
.fermo { display: none; }

/* tavole: la foglia è notte, l'oliva e le cellule sono carta */
.tavola--foglia { background: #101316; }
.tavola--oliva { background: #ebe7dc; color: var(--inchiostro); }
.tavola--cellule { background: #f0ead6; color: var(--inchiostro); }
.tavola--oliva .testo, .tavola--cellule .testo { text-shadow: none; }
.tavola--oliva .testo > p:not(.testo__quota):not(.etichetta):not(.grande),
.tavola--cellule .testo > p:not(.testo__quota):not(.etichetta):not(.grande) { color: var(--inchiostro-2); }
.tavola--oliva .testo__quota { color: var(--oliva); }
.tavola--cellule .testo__quota { color: #9a7415; }
.tavola--cellule .palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(248 245 234 / .9) 0%, rgb(248 245 234 / .62) 32%, rgb(248 245 234 / 0) 60%);
}
@media (max-width: 959px) {
  .tavola--cellule .palco::after { background: linear-gradient(0deg, rgb(248 245 234 / .94) 0%, rgb(248 245 234 / .7) 40%, rgb(248 245 234 / 0) 72%); }
  .tavola--oliva .palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(235 231 220 / .92) 0%, rgb(235 231 220 / .6) 36%, rgb(235 231 220 / 0) 66%); }
}
.tavola .tappa { min-height: 125lvh; }

/* ------------------------------------------------------------------ l'olio */
.olio {
  position: relative; overflow: clip;
  min-height: 110lvh;
  padding: clamp(110px, 18vh, 200px) var(--margine);
  color: #1d1504;
  background:
    radial-gradient(70% 60% at 72% 30%, rgb(255 236 170 / .55) 0%, rgb(255 236 170 / 0) 70%),
    radial-gradient(120% 100% at 20% 100%, #8a5d0a 0%, rgb(138 93 10 / 0) 60%),
    linear-gradient(160deg, #f0cc63 0%, #d7a531 45%, #a87812 100%);
  display: grid; gap: 2rem; align-content: center;
}
.olio .occhiello { opacity: .75; }
.olio h2 { font-size: clamp(5rem, 17vw, 17rem); line-height: .78; letter-spacing: -.04em; margin: 0 0 .1em -.04em; }
.olio .grande { max-width: 20em; }
.olio__colonne { display: grid; gap: 1.4rem 3rem; margin-top: 1.2rem; font-size: .95em; }
.olio__colonne p { color: rgb(29 21 4 / .82); }
.olio__goccia { position: absolute; right: calc(var(--margine) * 1.2); top: 18%; }
.olio__goccia svg { width: clamp(90px, 13vw, 210px); height: auto; filter: drop-shadow(0 30px 40px rgb(80 50 0 / .35)); }
@media (min-width: 960px) { .olio__colonne { grid-template-columns: 1fr 1fr; max-width: 52rem; } }
@media (max-width: 700px) { .olio__goccia { position: static; } .olio__goccia svg { width: 84px; } }

/* ------------------------------------------------------------------ sotto */
.sotto { background: linear-gradient(180deg, #efe4d4 0%, #ead3bf 34%, #e7ded0 62%, #e6e4dd 100%); color: var(--inchiostro); padding: clamp(110px, 16vh, 180px) var(--margine) clamp(80px, 12vh, 140px); }
.sotto__testa { margin-bottom: clamp(3rem, 8vh, 6rem); }
.sotto__testa h2 { font-size: clamp(4rem, 11vw, 11rem); letter-spacing: -.035em; }
.sotto__tavola { margin: 0; position: relative; }
.sotto__tavola img { width: 100%; height: auto; box-shadow: 0 40px 80px -40px rgb(70 35 10 / .5); }
.sotto__tavola figcaption { color: var(--inchiostro-2); margin-top: 1.2rem; }
.sotto__note { display: grid; gap: 2.8rem; margin-top: 3rem; }
.sotto__nota { max-width: 32rem; }
.sotto__nota h3 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); margin-bottom: .35em; }
.sotto__nota p { color: var(--inchiostro-2); }
@media (min-width: 960px) {
  .sotto__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .sotto__tavola { position: sticky; top: calc(var(--apulsense-bar-h, 0px) + 5vh); width: fit-content; transition: top .4s; }
  .sotto__tavola picture, .sotto__tavola img { display: block; height: min(80lvh, 70vw); width: auto; max-width: 44vw; }
  .sotto__note { gap: 0; margin: 0; padding: 18lvh 0 30lvh; }
  .sotto__nota { min-height: 58lvh; display: flex; flex-direction: column; justify-content: center; position: relative; }
  .sotto__nota::before { content: ""; position: absolute; left: calc(-1 * clamp(3rem, 7vw, 8rem)); top: 50%; width: clamp(2rem, 5.5vw, 6.5rem); height: 1px; background: var(--terra); opacity: .5; }
  /* il filo che dalla nota accesa scende sulla tavola, alla sua profondità */
  .sotto__tavola picture { position: relative; }
  .sotto__tavola picture::after {
    content: ""; position: absolute; left: -14px; right: -14px; top: var(--y, 0%); height: 1px; pointer-events: none;
    background: var(--terra); box-shadow: 0 0 0 3px rgb(154 74 42 / .14); opacity: 0;
    transition: top .9s cubic-bezier(.2, .7, .2, 1), opacity .5s;
  }
  .sotto__tavola[data-segno] picture::after { opacity: .95; }
  html.sotto-attivo .sotto__nota { opacity: .32; transition: opacity .6s; }
  html.sotto-attivo .sotto__nota.accesa { opacity: 1; }
}

/* ------------------------------------------------------------------ il pomeriggio */
.pomeriggio { background: var(--notte); padding: clamp(110px, 16vh, 180px) 0 clamp(40px, 8vh, 90px); }
.pomeriggio__testa { padding: 0 var(--margine); margin-bottom: clamp(3rem, 9vh, 7rem); }
.pomeriggio__testa h2 { font-size: clamp(4rem, 11vw, 11rem); letter-spacing: -.035em; }
.ripresa { position: relative; margin: 0 0 clamp(14px, 2.4vw, 32px); height: min(92lvh, 56.25vw); min-height: 60vh; overflow: clip; background: var(--notte-2); }
.ripresa video, .ripresa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ripresa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 10 7 / .62) 0%, rgb(8 10 7 / 0) 38%); pointer-events: none; }
/* se il telefono blocca la riproduzione automatica: un segno al centro, un tocco la avvia */
.ripresa { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ripresa.ferma::before {
  content: "Tocca per avviare"; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 58px 0 0; width: 13rem; text-align: center;
  font: 500 .62rem/1 var(--testo); letter-spacing: .24em; text-transform: uppercase; color: var(--luce);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23' fill='rgba(8,10,7,.35)' stroke='%23f4f1e8' stroke-opacity='.8'/%3E%3Cpath d='M19 15l14 9-14 9z' fill='%23f4f1e8'/%3E%3C/svg%3E") center top / 48px no-repeat;
  text-shadow: 0 1px 10px rgb(0 0 0 / .6);
}
.ripresa figcaption {
  position: absolute; z-index: 1; left: var(--margine); right: var(--margine); bottom: clamp(20px, 5vh, 52px);
  display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2.4rem); flex-wrap: wrap;
}
.ripresa time { font: 300 clamp(3.2rem, 7vw, 7rem)/.9 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.ripresa span { font-size: .95em; color: var(--luce-2); max-width: 26em; }
@media (max-width: 700px) { .ripresa { height: 72vh; } }

/* ------------------------------------------------------------------ come è fatta, fonti */
.come, .fonti { background: #e3e8dc; color: var(--inchiostro); padding: clamp(90px, 14vh, 160px) var(--margine); }
.come h2 { font-size: clamp(3rem, 6.5vw, 6.2rem); letter-spacing: -.03em; max-width: 12em; margin-bottom: 1em; }
.come__testo { max-width: 50rem; margin: 0 0 2.5rem; }
.come__testo p { max-width: none; padding: 1.6rem 0; margin: 0; border-top: 1px solid rgb(17 21 15 / .16); color: var(--inchiostro-2); }
.come__testo strong { font: italic 400 1.5em/1 var(--display); color: #5d6f1c; margin-right: .15em; }
.come__punto { color: var(--inchiostro-2); font-size: .9em; }
.fonti { padding-top: 0; padding-bottom: calc(clamp(90px, 14vh, 160px) + 48px); }
.fonti h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); border-top: 1px solid rgb(17 21 15 / .16); padding-top: clamp(60px, 10vh, 110px); }
.fonti ol { max-width: 58rem; padding-left: 1.6rem; margin: 0; font-size: .86em; line-height: 1.55; color: var(--inchiostro-2); columns: 1; }
.fonti li { margin-bottom: .9rem; padding-left: .3rem; overflow-wrap: anywhere; }
.fonti li::marker { font-family: var(--display); font-size: 1.15em; color: var(--inchiostro); }
.fonti li:target { color: var(--inchiostro); }
.fonti a { overflow-wrap: anywhere; }
.apertura .nota, .come .nota, .sotto .nota, .tavola--oliva .nota, .tavola--cellule .nota { color: var(--inchiostro); }

/* ------------------------------------------------------------------ senza lo schermo che scorre
   (niente JavaScript, niente AVIF, oppure «riduci movimento»): ogni tappa mostra la sua immagine */
html:not(.scorre-attivo) .scorre .palco { display: none; }
html:not(.scorre-attivo) .scorre .palco + .tappa { margin-top: 0; }
html:not(.scorre-attivo) .scorre .tappa { min-height: 0; display: block; padding: 0 0 clamp(3rem, 8vh, 6rem); }
html:not(.scorre-attivo) .scorre .fermo { display: block; margin-bottom: 2rem; }
html:not(.scorre-attivo) .scorre .fermo img { width: 100%; height: auto; }
html:not(.scorre-attivo) .scorre .testo { margin: 0 var(--margine); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .palco--foto img { transform: none !important; }
}


/* ================================================================== dettagli, colori, movimento dei testi */

/* la parola in corsivo dei titoli prende il colore della tappa */
h1 em, h2 em { font-style: italic; font-weight: 300; }
.testo h2 em, .pomeriggio h2 em, .tavola--foglia h2 em { color: var(--accento, var(--oro-chiaro)); }
.apertura h2 em { color: #5d6f1c; }
.tavola--oliva h2 em { color: #5c6b12; }
.tavola--cellule h2 em { color: #9a6c08; }
.sotto h2 em { color: var(--terra); }
.come h2 em { color: #5d6f1c; }
.olio h2 em { color: #fff3c4; text-shadow: 0 10px 60px rgb(120 70 0 / .35); }
.inizio h1 em { color: #f0dc9a; }
.testo__quota { color: var(--accento, var(--oro-chiaro)); }
.tavola--oliva .testo__quota, .tavola--cellule .testo__quota { color: var(--accento); }
.scala__nome { color: var(--accento, currentColor); opacity: 1; }
.scala__segno { background: var(--accento, var(--oro)) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento, var(--oro)) 28%, transparent) !important; transition: background .6s; }
.etichetta { display: flex; gap: .9em; align-items: baseline; }
.etichetta::before { content: ""; flex: none; width: 1.8em; height: 1px; background: var(--accento, currentColor); opacity: .8; transform: translateY(-.28em); }

/* il numero della tappa, gigante e in contorno, dietro al testo */
.tappa { overflow: clip; }
.tappa__numero {
  position: absolute; z-index: 0; pointer-events: none; margin: 0;
  left: calc(var(--margine) - .06em); top: 50%; transform: translateY(-58%);
  font: 300 clamp(11rem, 27vw, 30rem)/.8 var(--display); letter-spacing: -.045em; white-space: nowrap;
  color: color-mix(in srgb, var(--accento, #fff) 10%, transparent);
  -webkit-text-stroke: 1.6px color-mix(in srgb, var(--accento, #fff) 88%, transparent);
  text-shadow: 0 0 60px rgb(0 0 0 / .35);
  opacity: .9; max-width: none;
}
.tappa__numero small { font-size: .3em; letter-spacing: 0; margin-left: .08em; }
.tappa .testo { position: relative; z-index: 1; }
@media (min-width: 960px) { .tappa__numero { left: auto; right: calc(var(--margine) * 1.4); top: 52%; } }
@media (max-width: 959px) { .tappa__numero { top: 28%; font-size: 38vw; } }
html:not(.scorre-attivo) .scorre .tappa__numero { display: none; }

/* i dati di ogni tappa: piccoli, in colonna, con un filo */
.testo p.dati {
  margin: 1.6rem 0 0; padding-top: 1.1rem; max-width: 30rem;
  border-top: 1px solid color-mix(in srgb, var(--accento, currentColor) 55%, transparent);
  font: italic 400 clamp(1.2rem, 1rem + .6vw, 1.6rem)/1.3 var(--display);
  color: color-mix(in srgb, var(--accento, #fff) 42%, #f4f1e8);
}

/* la bussola: gira con l'ortofoto, sparisce quando comincia il volo */
.bussola {
  position: absolute; z-index: 1; right: calc(var(--margine) * 1.35); top: calc(var(--apulsense-bar-h, 0px) + clamp(22px, 5vh, 56px));
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgb(244 241 232 / .45);
  display: grid; place-items: center; color: var(--luce); transition: opacity .5s, top .4s;
  backdrop-filter: none;
}
.bussola__ago { position: absolute; inset: 7px; transform: rotate(var(--r, 0deg)); will-change: transform; }
.bussola__ago::before { content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 25px solid var(--accento, var(--oro)); }
.bussola__ago::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 25px; transform: translateX(-50%); background: rgb(244 241 232 / .6); }
.bussola__n { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); font: 500 .62rem/1 var(--testo); letter-spacing: .2em; opacity: .8; }
.bussola[data-spenta] { opacity: 0; }
@media (max-width: 959px) { .bussola { width: 48px; height: 48px; top: auto; bottom: calc(100lvh - 100dvh + 24px); right: var(--margine); } .bussola__ago::before { border-bottom-width: 18px; } .bussola__ago::after { height: 18px; } }

/* un filo di grana sulle immagini che scorrono: sembrano meno schermo e più pellicola */
.palco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07;
  background-image: var(--grana);
}
:root { --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.tavola--oliva .palco::before, .tavola--cellule .palco::before { opacity: .045; }

/* la maturazione: un velo color prugna invece che nero */
.scorre--matura .palco::after {
  background: linear-gradient(90deg, rgb(30 12 34 / .88) 0%, rgb(30 12 34 / .66) 30%, rgb(30 12 34 / .22) 54%, rgb(30 12 34 / 0) 72%),
              linear-gradient(0deg, rgb(30 12 34 / .45) 0%, rgb(30 12 34 / 0) 32%);
}
@media (max-width: 959px) { .scorre--matura .palco::after { background: linear-gradient(0deg, rgb(30 12 34 / .92) 0%, rgb(30 12 34 / .72) 42%, rgb(30 12 34 / 0) 76%); } }
.scorre--matura { background: #140b17; }

/* il pomeriggio: l'ora in oro chiaro, il sole sotto */
.ripresa time { color: #f3dfa1; }
.ripresa small { font: 500 .62rem/1 var(--testo); letter-spacing: .24em; text-transform: uppercase; color: #f3dfa1; opacity: .8; align-self: center; }

/* le parole che si accendono entrando (lo script divide i titoli e le frasi grandi in parole) */
.rivela .p { display: inline-block; opacity: .08; transform: translateY(.35em); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 32ms); }
.rivela.visto .p { opacity: 1; transform: none; }

/* l'apertura: il titolo sale da sotto una riga */
.inizio h1 .riga { display: block; overflow: clip; padding-bottom: .06em; }
.inizio h1 .riga > span { display: inline-block; }
html.pronto .inizio h1 .riga > span { animation: sale 1.4s cubic-bezier(.16, .8, .2, 1) both; }
html.pronto .inizio h1 .riga:nth-child(2) > span { animation-delay: .12s; }
html.pronto .inizio__sotto, html.pronto .inizio__dati, html.pronto .inizio .occhiello { animation: appare 1.4s .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sale { from { transform: translateY(105%); } to { transform: none; } }
@keyframes appare { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ il tuffo nella mappa
   (solo con lo script attivo): la sezione è alta, la mappa resta ferma e si ingrandisce fino a
   riempire lo schermo con il riquadro di 10 km, poi sfuma nell'ortofoto dello stesso riquadro */
.apertura__orto { display: none; }
html.tuffo-attivo .apertura[data-tuffo] { display: block; padding: 0; min-height: 0; height: 290lvh; }
html.tuffo-attivo .apertura__palco {
  position: sticky; top: 0; height: 100lvh; overflow: clip;
  display: grid; gap: 3rem; align-content: start;
  padding: calc(var(--apulsense-bar-h, 0px) + clamp(44px, 10vh, 120px)) var(--margine) 6vh;
}
/* il testo non deve mai superare lo schermo: i caratteri seguono anche l'altezza */
html.tuffo-attivo .apertura h2 { font-size: clamp(3rem, min(8.5vw, 12.5vh), 9rem); }
html.tuffo-attivo .apertura .grande { font-size: clamp(1.25rem, min(2.1vw, 3.3vh), 2.3rem); }
html.tuffo-attivo .apertura__testo p:not(.grande):not(.occhiello) { font-size: clamp(.98rem, min(1.2vw, 2.25vh), 1.3rem); }
html.tuffo-attivo .apertura .occhiello { margin-bottom: min(1.6rem, 2.4vh); }
@media (min-width: 1000px) {
  html.tuffo-attivo .apertura__palco { grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.4fr); align-items: start; column-gap: clamp(3rem, 6vw, 7rem); }
  html.tuffo-attivo .apertura__mappa { align-self: center; }
}
@media (max-width: 999px) { html.tuffo-attivo .apertura__palco { align-content: start; padding-top: calc(48px + 5vh); gap: 1.6rem; } html.tuffo-attivo .apertura h2 { font-size: clamp(3rem, 13vw, 5rem); } html.tuffo-attivo .apertura .grande { font-size: 1.4rem; } }
html.tuffo-attivo .apertura__testo { will-change: opacity, transform; }
html.tuffo-attivo .apertura__mappa { transform-origin: 0 0; position: relative; z-index: 1; }
html.tuffo-attivo .apertura__orto { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
html.tuffo-attivo .apertura__orto picture, html.tuffo-attivo .apertura__orto img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  html.pronto .inizio h1 .riga > span, html.pronto .inizio__sotto, html.pronto .inizio__dati, html.pronto .inizio .occhiello { animation: none; }
  .rivela .p { opacity: 1; transform: none; }
}

/* nel tuffo le linee restano sottili a ogni ingrandimento; scritte e punti spariscono mentre si scende */
/* lo spessore si divide per l'ingrandimento (--sw = 1/scala, lo scrive lo script): non-scaling-stroke non vale
   per un ingrandimento fatto con il CSS su un antenato dell'svg */
.mappa__riquadro { stroke-width: calc(.32 * var(--sw, 1)); }
.mappa__zona { stroke-width: calc(.28 * var(--sw, 1)); }
.mappa__terra { stroke-width: calc(.1 * var(--sw, 1)); }
.mappa__luogo, .mappa__zona-nome, .mappa__mare-nome, .mappa__barra, .mappa__punto { transition: opacity .5s; }
.mappa[data-dentro] .mappa__luogo, .mappa[data-dentro] .mappa__zona-nome, .mappa[data-dentro] .mappa__mare-nome, .mappa[data-dentro] .mappa__barra, .mappa[data-dentro] .mappa__punto { opacity: 0; }
/* l'ortofoto alla fine del tuffo ha lo stesso velo della discesa, che ne prende il posto senza stacco */
html.tuffo-attivo .apertura__orto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 10 7 / .86) 0%, rgb(8 10 7 / .7) 30%, rgb(8 10 7 / .28) 52%, rgb(8 10 7 / 0) 70%), linear-gradient(0deg, rgb(8 10 7 / .4) 0%, rgb(8 10 7 / 0) 30%); }
@media (max-width: 959px) { html.tuffo-attivo .apertura__orto::after { background: linear-gradient(0deg, rgb(8 10 7 / .92) 0%, rgb(8 10 7 / .74) 42%, rgb(8 10 7 / 0) 76%); } }
/* la discesa sale sopra l'ultimo schermo del tuffo: i suoi testi scorrono sull'ortofoto, e il suo palco
   compare solo quando si ferma in cima, dove coincide con l'ortofoto del tuffo */
html.tuffo-attivo #discesa { margin-top: -100lvh; background: transparent; }
html.tuffo-attivo .apertura__orto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; background-image: var(--grana); }
html.tuffo-attivo .apertura[data-tuffo] { height: 340lvh; }