/* ==========================================================================
   Fucito, foglio di stile unico per index e prodotti.
   Palette derivata dai due prodotti bandiera: verde-oro dell'olio, rosso
   della passata, su un campo salvia freddo.
   ========================================================================== */

:root {
  --ink:        #1B1D18;
  --ink-soft:   #3A3E34;
  --stone:      #7C8073;
  --field:      #DCDDD3;
  --paper:      #EFF0E9;
  --oil:        #7E8C1F;
  --oil-deep:   #545E12;
  --tomato:     #A8322A;

  --display: "Fraunces", Georgia, serif;
  --text: "Inter Tight", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--oil-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--oil-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Grana: dà materia alle superfici piatte senza pesare. -------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tipografia ============================================================== */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 460;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.4rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.08; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 340;
}

/* L'etichetta ricorrente: minuscola, spaziata, sempre in coppia con un dato. */
.label {
  font-size: 0.6875rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
  line-height: 1.3;
}

.label--oil { color: var(--oil-deep); }

/* Il numerale: usato solo dove il numero È l'argomento. ------------------- */
.numeral {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "WONK" 0;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: clamp(3.2rem, 2rem + 5.5vw, 6.5rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  display: block;
}

/* Le cifre non hanno discendenti, le parole sì: "Oggi" e "Hoy" hanno bisogno
   di spazio sotto perché la g non finisca sulla riga successiva. */
.numeral--word { padding-bottom: 0.2em; }

/* Impianto =============================================================== */

.wrap { padding-inline: var(--gutter); }

.section { padding-block: clamp(4.5rem, 9vw, 9.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--field); }
.section--ink .label { color: #8D9280; }
.section--ink h2 { color: var(--paper); }

.rule { border: 0; border-top: 1px solid rgba(27, 29, 24, 0.16); margin: 0; }

/* Navigazione ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav[data-scrolled="true"] {
  background: rgba(220, 221, 211, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(27, 29, 24, 0.12);
}

.nav__logo img { height: 34px; width: auto; }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: 0.8125rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { border-bottom-color: var(--oil); color: var(--oil-deep); }

/* Cambio lingua: con più di due lingue il tasto singolo non basta più, quindi
   è una tendina. La sigla resta visibile, i nomi stanno nel menu, ognuno
   scritto nella propria lingua, che è l'unico modo di essere leggibile per chi
   la parla. */
.nav__lang { margin-left: 0.35rem; position: relative; }

.lang { position: relative; }

.lang__current {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(27, 29, 24, 0.28);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  line-height: 1.1;
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

/* Safari disegna un suo triangolino davanti al summary: via, ce n'è già uno. */
.lang__current::-webkit-details-marker { display: none; }

.lang__current:hover,
.lang__current:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.lang__caret {
  font-size: 0.65em;
  transition: transform 0.25s var(--ease);
}

.lang[open] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  min-width: 9rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid rgba(27, 29, 24, 0.14);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(27, 29, 24, 0.18);
}

/* Il menu è dentro la nav, che ha i link in maiuscoletto: qui no, sono nomi
   propri di lingue e vanno letti come tali. */
.nav__links .lang__menu a {
  display: block;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__links .lang__menu a:hover,
.nav__links .lang__menu a:focus-visible { background: rgba(27, 29, 24, 0.07); }

.nav__links .lang__menu a[aria-current="true"] {
  color: var(--oil-deep);
  font-weight: 560;
}

/* Sotto i 34rem i tre link non entrano accanto al logo: si stringe tutto
   invece di introdurre un menu a panino per sole tre voci. */
@media (max-width: 34rem) {
  .nav { padding-inline: 1rem; gap: 0.5rem; }
  .nav__logo img { height: 26px; }
  .nav__links { gap: 0.85rem; }
  .nav__links a { font-size: 0.75rem; letter-spacing: 0.04em; }
  .nav__lang { margin-left: 0.15rem; }
  .lang__current { font-size: 0.6875rem; padding: 0.2rem 0.4rem; }
}

/* Nav sopra l'eroe scuro: i link passano in chiaro finché non si scrolla.
   Il logo no: si porta dietro la sua fascia blu, quindi si legge su qualsiasi
   fondo. Schiarirlo lo ridurrebbe a una sagoma bianca senza le lettere. */
.nav--over-hero:not([data-scrolled="true"]) .nav__links a { color: var(--paper); }

/* Sull'eroe il logo ha bisogno solo di un po' di stacco dalla foto. */
.nav--over-hero:not([data-scrolled="true"]) .nav__logo img {
  filter: drop-shadow(0 1px 6px rgba(27, 29, 24, 0.45));
}
/* Solo la sigla si schiarisce: il menu, quando è aperto, ha il suo fondo
   chiaro e deve restare scritto in scuro, e la regola qui sopra lo sbiancherebbe. */
.nav--over-hero:not([data-scrolled="true"]) .lang__menu a { color: var(--ink); }
.nav--over-hero:not([data-scrolled="true"]) .lang__menu a[aria-current="true"] { color: var(--oil-deep); }

.nav--over-hero:not([data-scrolled="true"]) .lang__current {
  color: var(--paper);
  border-color: rgba(239, 240, 233, 0.45);
}

.nav--over-hero:not([data-scrolled="true"]) .lang__current:hover,
.nav--over-hero:not([data-scrolled="true"]) .lang__current:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* Eroe =================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  color: var(--paper);
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* Il drift è roba da mouse. Su telefoni e tablet l'immagine sta ferma: lì il
   movimento si incrocia con la barra degli indirizzi che si ritrae mentre si
   scorre, e il risultato è uno zoom che non si capisce da dove arrivi.
   Dentro la media query sta anche translateZ, che dà all'immagine un piano
   suo perché la GPU la sposti invece di ridisegnarla a ogni fotogramma. */
@media (pointer: fine) {
  .hero__media img {
    transform: scale(1.06) translateZ(0);
    will-change: transform;
  }

  /* Parte a immagine decodificata, ci pensa main.js. */
  .hero__media img[data-pronta="true"] {
    animation: heroDrift 2.4s var(--ease) forwards;
  }

  /* A drift finito il piano dedicato non serve più. */
  .hero__media img[data-fermo="true"] { will-change: auto; }
}

@keyframes heroDrift { to { transform: scale(1) translateZ(0); } }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(27, 29, 24, 0.55) 0%,
    rgba(27, 29, 24, 0.18) 34%,
    rgba(27, 29, 24, 0.72) 82%,
    rgba(27, 29, 24, 0.9) 100%
  );
}

.hero__body {
  align-self: end;
  padding: 0 var(--gutter) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  max-width: 1500px;
}

.hero__eyebrow { color: rgba(239, 240, 233, 0.72); }

/* Sui telefoni tutto il blocco di testo cade sulle case del paese, che sono
   la parte più chiara dello scatto: la velatura tarata sul desktop lì non
   basta. Scende prima e arriva più scura, così il testo ha sempre un fondo
   suo. L'occhiello, il pezzo più piccolo, prende in più contrasto pieno e
   un'ombra corta. */
@media (max-width: 40rem) {
  .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(27, 29, 24, 0.62) 0%,
      rgba(27, 29, 24, 0.32) 20%,
      rgba(27, 29, 24, 0.5) 34%,
      rgba(27, 29, 24, 0.78) 52%,
      rgba(27, 29, 24, 0.9) 70%,
      rgba(27, 29, 24, 0.94) 88%,
      rgba(27, 29, 24, 0.96) 100%
    );
  }

  .hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    color: rgba(239, 240, 233, 0.96);
    text-shadow: 0 1px 14px rgba(27, 29, 24, 0.75);
  }

  .hero__foot p { color: rgba(239, 240, 233, 0.94); }
}

.hero h1 {
  font-size: clamp(2.6rem, 1.1rem + 8.2vw, 8rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 400;
  color: var(--paper);
  max-width: 15ch;
}

.hero h1 em {
  font-style: normal;
  color: #C9D46B;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1500px;
}

.hero__foot p { color: rgba(239, 240, 233, 0.86); max-width: 46ch; }

/* Reveal iniziale: il testo sale da sotto una maschera. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > * {
  display: block;
  transform: translateY(105%);
  animation: riseUp 1.1s var(--ease) forwards;
}
.reveal-line:nth-child(1) > * { animation-delay: 0.15s; }
.reveal-line:nth-child(2) > * { animation-delay: 0.28s; }

@keyframes riseUp { to { transform: translateY(0); } }

/* Marcatore geografico in fondo all'eroe: il sito si ancora a un luogo. */
.marker {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 3vw, 2.75rem);
  padding: 0.9rem var(--gutter);
  border-top: 1px solid rgba(239, 240, 233, 0.24);
  background: rgba(27, 29, 24, 0.34);
  backdrop-filter: blur(6px);
}

.marker span { color: rgba(239, 240, 233, 0.78); }

/* Bottoni ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn:hover { background: var(--oil-deep); border-color: var(--oil-deep); color: #fff; }

.btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: #C9D46B; border-color: #C9D46B; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* Il paese: i numeri come argomento ====================================== */

.village {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  max-width: 1500px;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .village { grid-template-columns: 1.05fr 1fr; align-items: start; }
}

/* Le colonne sono larghe quanto il loro contenuto e lo spazio che avanza si
   distribuisce in parti uguali: con colonne da 1fr un "3" lasciava un vuoto
   enorme alla sua destra e un "1970" quasi niente, e i numeri sembravano
   spaziati a caso. */
.village__count {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid rgba(27, 29, 24, 0.16);
  padding-top: 1.75rem;
  margin-top: 2.25rem;
}

@media (min-width: 40rem) { .village__count { grid-template-columns: repeat(4, auto); } }

.village__count .numeral { color: var(--oil-deep); }
.village__count .label { margin-top: 0.6rem; }

/* Calendario del raccolto, l'elemento firma ============================= */

.calendar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  max-width: 1500px;
  margin: 0 auto 2.5rem;
}

/* Impianto mobile: niente scorrimento orizzontale. La riga si impila, con nome e
   finestra sopra, la traccia dei dodici mesi sotto, larga quanto lo schermo.
   Da 54rem in su torna il Gantt su una riga sola. Le colonne arrivano dal JS
   in due varianti (-m mobile, -d desktop) perché su desktop la colonna del
   nome sposta tutto di uno. */

.calendar__scroller { padding-bottom: 0.5rem; }

.calendar {
  max-width: 1500px;
  margin-inline: auto;
}

/* Righe e intestazione condividono la stessa griglia: le colonne restano
   allineate senza dipendere da subgrid. */
.calendar__head-row,
.calendar__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.calendar__month {
  grid-row: 1;
  grid-column: var(--col-m);
  text-align: center;
  padding-bottom: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  transition: color 0.25s var(--ease);
}

.calendar__month[data-active="true"] { color: var(--oil-deep); }

.calendar__month-long { display: none; }

.calendar__row {
  border-top: 1px solid rgba(27, 29, 24, 0.14);
  padding: 0.95rem 0 1.1rem;
  row-gap: 0.7rem;
  align-items: center;
}

.calendar__row:last-child { border-bottom: 1px solid rgba(27, 29, 24, 0.14); }

.calendar__name {
  grid-row: 1;
  grid-column: 1 / 9;
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -0.01em;
  align-self: center;
}

/* La finestra a parole: su mobile la barra da sola direbbe troppo poco. */
.calendar__window {
  grid-row: 1;
  grid-column: 9 / -1;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.calendar__cell {
  grid-row: 2;
  grid-column: var(--col-m);
  border-left: 1px solid rgba(27, 29, 24, 0.07);
  height: 1.5rem;
}

.calendar__bar {
  grid-row: 2;
  grid-column: var(--from-m) / var(--to-m);
  align-self: center;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--oil);
  transform-origin: left center;
  transform: scaleX(var(--grow, 1));
  transition: transform 0.9s var(--ease), background 0.3s var(--ease);
  position: relative;
  z-index: 1;
}

.calendar__bar[data-crop="passata"] { background: var(--tomato); }

.calendar__row[data-dim="true"] .calendar__bar { background: rgba(27, 29, 24, 0.14); }
.calendar__row[data-dim="true"] .calendar__name { color: var(--stone); }

@media (min-width: 54rem) {
  .calendar__head-row,
  .calendar__row {
    grid-template-columns: minmax(13.5rem, 1.1fr) repeat(12, minmax(2.4rem, 1fr));
    align-items: center;
  }

  .calendar__month {
    grid-column: var(--col-d);
    padding-bottom: 0.85rem;
    letter-spacing: 0.1em;
  }

  .calendar__month-long { display: inline; }
  .calendar__month-short { display: none; }

  .calendar__row {
    min-height: 4.25rem;
    padding: 0;
    row-gap: 0;
  }

  .calendar__name {
    grid-column: 1;
    padding-right: 1.5rem;
  }

  .calendar__window { display: none; }

  .calendar__cell {
    grid-row: 1;
    grid-column: var(--col-d);
    height: 100%;
  }

  .calendar__bar {
    grid-row: 1;
    grid-column: var(--from-d) / var(--to-d);
  }
}

.calendar__note {
  max-width: 1500px;
  margin: 1.75rem auto 0;
  color: var(--stone);
  font-size: 0.875rem;
}

/* Pilastri: impaginato asimmetrico, non tre card centrate ================= */

.pillars {
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem);
  max-width: 1500px;
  margin-inline: auto;
}

.pillar {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

@media (min-width: 54rem) {
  .pillar { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(even) .pillar__media { order: 2; }
  .pillar:nth-child(odd) .pillar__text { padding-left: clamp(0rem, 4vw, 3.5rem); }
  .pillar:nth-child(even) .pillar__text { padding-right: clamp(0rem, 4vw, 3.5rem); }
}

/* Le immagini non sono rettangoli. Tre sagome di una stessa famiglia
   morbida, l'arco delle porte del borgo, la foglia, l'onda della collina,
   una per pilastro, così la forma resta un accento e non un effetto ripetuto. */
.pillar__media {
  overflow: hidden;
  transition: border-radius 0.8s var(--ease);
}

.pillar__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.pillar:hover .pillar__media img { transform: scale(1.04); }

.pillar__media--arco {
  border-radius: 50% 50% 1.5rem 1.5rem / 34% 34% 1.5rem 1.5rem;
}
.pillar__media--arco img { aspect-ratio: 4 / 5; }

.pillar__media--foglia {
  border-radius: 2.5rem 52% 2.5rem 52%;
}
.pillar__media--foglia img { aspect-ratio: 1; }

.pillar__media--onda {
  border-radius: 58% 42% 44% 56% / 46% 36% 64% 54%;
}

/* Al passaggio le sagome si ammorbidiscono ancora un po': un respiro. */
.pillar:hover .pillar__media--arco {
  border-radius: 50% 50% 3rem 3rem / 38% 38% 3rem 3rem;
}
.pillar:hover .pillar__media--foglia { border-radius: 52% 2.5rem 52% 2.5rem; }
.pillar:hover .pillar__media--onda {
  border-radius: 44% 56% 58% 42% / 58% 48% 52% 42%;
}

.pillar__text h3 { margin: 0.9rem 0 1rem; }

/* Il tempo: la sezione scura sul same-day ================================= */

.timing {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 1500px;
  margin-inline: auto;
}

@media (min-width: 62rem) { .timing { grid-template-columns: 1fr 1fr; align-items: end; } }

.timing p { color: rgba(239, 240, 233, 0.76); }

.timing__facts { display: grid; gap: 1.75rem; }

.timing__fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: baseline;
  border-top: 1px solid rgba(239, 240, 233, 0.2);
  padding-top: 1.4rem;
}

.timing__fact .numeral { color: #C9D46B; font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); }
.timing__fact p { margin: 0; }
.timing__fact .label { color: #C9D46B; margin-bottom: 0.4rem; }

/* Chiusura / contatti ==================================================== */

.closing {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}

.closing h2 { max-width: 16ch; }

.closing__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Instagram ==============================================================
   Non un embed: il widget di Instagram porta il suo bianco, i suoi bordi
   tondi e il suo carattere, e in mezzo a questa pagina si vede che è roba
   d'altri. Qui i post sono dati come i prodotti, stanno in
   json/instagram.json con le immagini scaricate in img/instagram/, e la
   scheda la disegniamo con le regole di questo sito. Deve però restare
   riconoscibile come un post: la chiocciola in alto, la foto intera, la
   didascalia sotto, come nell'app. */

.social {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;

  /* minmax(0, 1fr) e non 1fr: la foto del post ha una larghezza sua (1080px) e
     senza questo allarga la colonna oltre la pagina invece di rimpicciolirsi. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .social { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.social__intro h2 { margin-top: 0.9rem; max-width: 15ch; }
.social__intro .lede { margin-top: 1.2rem; }
.social__intro .btn { margin-top: 1.6rem; }

/* La chiocciola è un nome proprio: in maiuscoletto come gli altri bottoni
   diventerebbe @FUCITO_SHOP, che su Instagram non esiste. */
.btn--handle { text-transform: none; letter-spacing: 0.02em; font-size: 0.875rem; }

/* L'icona segue il colore del testo del bottone, così sopravvive all'hover
   che rovescia il pulsante. Con <img> resterebbe nera su fondo scuro. */
.btn__icon { width: 17px; height: 17px; fill: currentColor; flex: none; }

.social__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  max-width: 27rem;
}

/* Il feed nasce vuoto e nascosto: se il JSON non arriva resta la colonna di
   testo, senza un buco e senza la scritta "caricamento" di rito. */
.social__feed[hidden] { display: none; }

.post {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid rgba(27, 29, 24, 0.16);
  transition: border-color 0.3s var(--ease);
}

.post:hover, .post:focus-visible { border-color: var(--ink); }

/* L'intestazione: la chiocciola dice da dove viene il post prima ancora
   della foto, ed è la ragione per cui questa scheda si legge come un post
   invece che come l'ennesima immagine del sito. */
.post__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
}

.post__glyph { width: 18px; height: 18px; fill: var(--ink); flex: none; }

.post__handle {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.post__head .label { margin-left: auto; font-size: 0.625rem; }

/* La foto sta nel formato in cui è stata pubblicata, verticale o quadrata:
   l'altezza arriva dal JSON, così non si taglia niente e non balla la pagina
   mentre l'immagine carica. */
.post__media { position: relative; overflow: hidden; }

.post__media img { width: 100%; height: auto; }

/* Il segno della galleria, come nell'app: dice che sotto la copertina c'è
   altro, e quindi che vale la pena aprire. */
.post__badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 18px;
  height: 18px;
  color: var(--paper);
  filter: drop-shadow(0 1px 3px rgba(27, 29, 24, 0.55));
}

.post__badge svg { width: 100%; height: 100%; display: block; }

.post__body { padding: 0.9rem 1rem 1rem; }

.post__body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.post__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oil-deep);
}

.post__more span { transition: transform 0.3s var(--ease); }
.post:hover .post__more span { transform: translateX(4px); }

/* Piè di pagina ========================================================== */

.foot { background: var(--ink); color: var(--field); padding-block: clamp(3.5rem, 6vw, 5.5rem); }

.foot__grid {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

.foot p { color: rgba(220, 221, 211, 0.7); }
.foot .label { color: #8D9280; margin-bottom: 1.1rem; }

.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.foot__list a {
  color: var(--field);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.25s var(--ease);
}

.foot__list a:hover { color: #C9D46B; }
.foot__list img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.7; }

.foot__legal {
  max-width: 1500px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(220, 221, 211, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
}

.foot__legal p { font-size: 0.8125rem; margin: 0; }

/* Pagina prodotti ======================================================== */

/* Testata editoriale, condivisa da tutte le pagine interne. */
.page-head {
  padding-top: clamp(6rem, 9vw, 8.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 1500px;
  margin-inline: auto;
}

.page-head h1 {
  font-size: clamp(2.6rem, 1.5rem + 5.5vw, 6rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 420;
  margin: 1rem 0 1.25rem;
  max-width: 14ch;
}

/* Il titolo tiene la colonna sinistra, il sommario si affianca appoggiato
   alla sua ultima riga: da soli lasciavano vuota mezza pagina, e la stessa
   coppia titolo-testo è già il ritmo delle sezioni più in basso. */
@media (min-width: 62rem) {
  .page-head {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: end;
  }

  .page-head .label { grid-area: 1 / 1; }
  .page-head h1 { grid-area: 2 / 1; margin-bottom: 0; }

  .page-head .lede {
    grid-area: 2 / 2;
    align-self: end;
    margin-bottom: 0.35rem;
    max-width: 42ch;
  }
}

.page-head h1 em { font-style: normal; color: var(--oil-deep); }

.filters {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(220, 221, 211, 0.94);
  backdrop-filter: blur(10px);
  border-block: 1px solid rgba(27, 29, 24, 0.16);
  padding-block: 0.9rem;
}

.filters__inner {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem 2.5rem;
}

@media (min-width: 56rem) {
  .filters__inner { grid-template-columns: auto auto; justify-content: start; }
}

.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }

.filters__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.filters .label { margin-right: 0.35rem; }

.chip {
  font-family: var(--text);
  font-size: 0.75rem;
  font-weight: 580;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(27, 29, 24, 0.28);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.grid {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(27, 29, 24, 0.1);
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(27, 29, 24, 0.28);
  box-shadow: 0 18px 40px -24px rgba(27, 29, 24, 0.5);
}

/* I prodotti sono scontornati e appoggiati su un fondo in tinta, con
   un'ombra propria: devono sembrare fotografati su un piano, non ritagliati. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(112% 74% at 50% 26%, var(--tinta-alta), transparent 68%),
    var(--tinta-bassa);
  overflow: hidden;
}

/* Posizionata sul riquadro, che ha altezza certa grazie all'aspect-ratio:
   così il 100% si risolve e `contain` non taglia mai il prodotto. Il margine
   è padding, quindi rientra nel riquadro di `contain`. */
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(27, 29, 24, 0.26));
  transition: transform 0.6s var(--ease);
}

.card:hover .card__media img { transform: translateY(-8px); }

/* Ogni categoria ha la sua tinta, presa dal prodotto stesso. */
.card, .sheet { --tinta-alta: #E9E7D6; --tinta-bassa: #D3D5C2; }
.card[data-category="Olio"],
.sheet[data-category="Olio"] { --tinta-alta: #E7E9CE; --tinta-bassa: #CBD0AC; }
.card[data-category="Pomodoro"],
.sheet[data-category="Pomodoro"] { --tinta-alta: #EFDDD3; --tinta-bassa: #DCBCAF; }
.card[data-category="Ortofrutta"],
.sheet[data-category="Ortofrutta"] { --tinta-alta: #EBE6D3; --tinta-bassa: #D5CDB4; }

.card__body {
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.4rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid rgba(27, 29, 24, 0.1);
  padding-top: 1.25rem;
  margin-top: auto;
}

.card__name {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 1.3rem;
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oil-deep);
}

.card__more .btn__arrow { transition: transform 0.3s var(--ease); }
.card:hover .card__more .btn__arrow { transform: translateX(4px); }

.card[hidden] { display: none; }

.grid__empty {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(27, 29, 24, 0.16);
}

.grid__empty h3 { margin-bottom: 0.6rem; }

/* Scheda prodotto ======================================================== */

/* `position` va lasciato al browser: un dialogo modale è già fisso sopra la
   pagina. Metterlo in `relative` lo rimetterebbe nel flusso del documento, e
   aprirlo farebbe saltare la pagina sotto in cima per raggiungerlo. */
.sheet {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  padding: 0;
  width: min(60rem, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  background: var(--paper);
  color: var(--ink);
  /* La scheda non scorre mai: scorre il contenuto dentro. Così il tasto di
     chiusura, che è ancorato a questo riquadro, non se ne va mai via. */
  overflow: hidden;
}

.sheet::backdrop { background: rgba(27, 29, 24, 0.62); backdrop-filter: blur(3px); }

.sheet__inner {
  display: grid;
  grid-template-columns: 1fr;
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 52rem) {
  /* Su due colonne l'altezza è fissa: aprendo i valori nutrizionali la scheda
     non cambia forma, scorre solo la colonna del testo. */
  .sheet__inner {
    grid-template-columns: 0.85fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: min(34rem, calc(100svh - 2rem));
    max-height: none;
    overflow: hidden;
  }
}

.sheet__media {
  position: relative;
  min-height: clamp(17rem, 42vh, 25rem);
  background:
    radial-gradient(112% 74% at 50% 26%, var(--tinta-alta), transparent 68%),
    var(--tinta-bassa);
}

.sheet__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(27, 29, 24, 0.28));
}

.sheet__body { padding: clamp(1.75rem, 4vw, 2.75rem); }

/* Sotto le due colonne scorre tutto l'interno; da qui in su scorre solo il
   testo, e l'immagine resta ferma accanto. */
@media (min-width: 52rem) {
  .sheet__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.sheet__body h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  margin: 0.75rem 0 1.1rem;
}

.sheet__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  /* L'immagine del prodotto è anch'essa posizionata e viene dopo nel markup:
     senza questo si disegnerebbe sopra il tasto. Si vede solo quando la foto
     occupa tutta la larghezza, cioè a una colonna. */
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(27, 29, 24, 0.24);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.sheet__close:hover { background: var(--ink); color: var(--paper); }

.sheet table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }

.sheet th, .sheet td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(27, 29, 24, 0.12);
  font-size: 0.9375rem;
}

.sheet td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.sheet__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.sheet details { margin-top: 1.5rem; }

.sheet summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oil-deep);
  padding-block: 0.5rem;
}

/* Fascia a tutta larghezza ================================================
   Sta dentro una sezione .wrap ma ne annulla il margine laterale: l'immagine
   tocca i bordi dello schermo, il testo no. */

.band {
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
}

.band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 48rem) { .band img { aspect-ratio: 4 / 3; } }

.band__caption {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(4.5rem, 14vw, 7rem) var(--gutter) 1.5rem;
  background: linear-gradient(
    to top,
    rgba(27, 29, 24, 0.94) 0%,
    rgba(27, 29, 24, 0.8) 40%,
    rgba(27, 29, 24, 0.4) 72%,
    transparent 100%
  );
  color: var(--paper);
}

.band__caption .label { color: rgba(239, 240, 233, 0.72); }
.band__caption p { color: var(--paper); max-width: 52ch; margin-top: 0.5rem; }

/* La storia: capitoli con l'anno che resta agganciato ======================
   L'anno è sticky nella sua colonna: resta fermo finché il capitolo scorre,
   e cambia solo quando comincia quello dopo. Nessun JavaScript. */

.story {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
}

.chapter { display: grid; gap: 1.25rem clamp(2rem, 4vw, 4rem); align-items: start; }

@media (min-width: 54rem) {
  .chapter { grid-template-columns: minmax(9rem, 22%) 1fr; }
  .chapter__year { position: sticky; top: 5.5rem; }
}

.chapter__year .numeral {
  color: var(--oil-deep);
  font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.2rem);
}

.chapter__year .label { margin-top: 0.7rem; }

.chapter__body {
  position: relative;
  border-top: 1px solid rgba(27, 29, 24, 0.16);
  padding: 1.5rem 0 clamp(3rem, 6vw, 5rem);
}

@media (min-width: 54rem) {
  .chapter__body {
    border-top: 0;
    border-left: 1px solid rgba(27, 29, 24, 0.16);
    padding: 0.35rem 0 clamp(3.5rem, 7vw, 6rem) clamp(1.75rem, 3.5vw, 3.5rem);
  }

  /* Il punto sulla linea: segna dove comincia il capitolo. */
  .chapter__body::before {
    content: "";
    position: absolute;
    left: -0.3125rem;
    top: 0.75rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--oil);
  }
}

.chapter:last-child .chapter__body { padding-bottom: 0; border-bottom: 0; }

.chapter__body h3 { margin-bottom: 1rem; }

.chapter__figure { margin: 1.75rem 0 0; }

.chapter__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1.5rem;
}

.chapter__figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--stone);
}

/* Video ================================================================== */

.video { max-width: 1500px; margin-inline: auto; }

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--ink);
}

.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Copertina del video: una nostra foto al posto dell'anteprima di YouTube.
   È un <button> perché al click succede qualcosa, parte il video. */
.video__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.video__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}

.video__cover:hover img { transform: scale(1.03); opacity: 0.9; }

.video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding-left: 0.2rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(27, 29, 24, 0.35);
  transition: transform 0.35s var(--ease), background 0.25s var(--ease);
}

.video__cover:hover .video__play,
.video__cover:focus-visible .video__play { transform: scale(1.08); background: #fff; }

/* Canali di contatto: righe grandi, non bottoni ========================== */

.channels {
  max-width: 1500px;
  margin-inline: auto;
  border-top: 1px solid rgba(27, 29, 24, 0.16);
  isolation: isolate;
}

.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.35rem, 3vw, 2.25rem) clamp(0.75rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(27, 29, 24, 0.16);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}

/* Il riempimento sale da sotto: la riga si "accende" al passaggio. */
.channel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}

.channel > * { position: relative; z-index: 1; }

.channel:hover::before,
.channel:focus-visible::before { transform: scaleY(1); }

.channel__icon {
  grid-row: 1 / -1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(27, 29, 24, 0.24);
  border-radius: 999px;
  transition: border-color 0.35s var(--ease);
}

.channel__icon img {
  width: 18px;
  height: 18px;
  transition: filter 0.35s var(--ease);
}

.channel__name {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: clamp(1.35rem, 0.9rem + 2.4vw, 2.9rem);
  font-weight: 440;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Un indirizzo email lungo non deve spingere la freccia fuori dalla riga. */
  overflow-wrap: anywhere;
  transition: color 0.35s var(--ease);
}

.channel__meta {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--stone);
  transition: color 0.35s var(--ease);
}

.channel__arrow {
  grid-column: 3;
  grid-row: 1 / -1;
  font-size: 1.5rem;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}

.channel:hover .channel__name,
.channel:hover .channel__meta,
.channel:hover .channel__arrow { color: var(--paper); }

.channel:hover .channel__icon { border-color: rgba(239, 240, 233, 0.5); }
.channel:hover .channel__icon img { filter: brightness(0) invert(1); }
.channel:hover .channel__arrow { transform: translateX(6px); }

/* I tre passi dell'ordine ================================================ */

.steps {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 54rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { border-top: 1px solid rgba(239, 240, 233, 0.24); padding-top: 1.35rem; }

.step .numeral {
  color: #C9D46B;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  margin-bottom: 0.9rem;
}

.step h3 { color: var(--paper); margin-bottom: 0.7rem; }

/* Sulle sezioni scure il corpo del testo si schiarisce ovunque, non solo
   dentro .timing. */
.section--ink p { color: rgba(239, 240, 233, 0.76); }
.section--ink h3 { color: var(--paper); }
.section--ink a:not(.btn) { color: #C9D46B; }

/* Dove siamo: mappa dentro una sagoma ad arco =========================== */

.map {
  max-width: 1500px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 62rem) { .map { grid-template-columns: 1fr 1.1fr; } }

/* Mappa disegnata: un quadro di rilevamento, non una tile satellitare.
   Nessuna chiave API, nessun iframe, e resta leggibile a qualsiasi misura. */

.locator { margin: 0; }

.locator svg { width: 100%; height: auto; display: block; overflow: visible; }

.locator__rings circle { stroke: rgba(27, 29, 24, 0.16); stroke-width: 1; }
.locator__rings circle:nth-child(even) { stroke-dasharray: 2 6; }

.locator__cross line { stroke: rgba(27, 29, 24, 0.1); stroke-width: 1; }

.locator__rays line { stroke: rgba(27, 29, 24, 0.28); stroke-width: 1; stroke-dasharray: 3 4; }

.locator text {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 560;
  fill: var(--ink);
  /* Alone del colore di fondo: le etichette restano leggibili sopra gli anelli. */
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.locator__cardinal text,
.locator__dist {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--stone);
}

.locator__place circle { fill: var(--ink); }

.locator__dot { fill: var(--oil-deep); }

.locator__pulse {
  fill: var(--oil);
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: locatorPulse 2.8s var(--ease) infinite;
}

@keyframes locatorPulse {
  from { transform: scale(1); opacity: 0.35; }
  to   { transform: scale(4.2); opacity: 0; }
}

.locator__me {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1;
  font-size: 22px;
  font-weight: 460;
  fill: var(--oil-deep);
}

.locator__coords {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.08em;
  fill: var(--stone);
}

.locator figcaption {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--stone);
}

.locator figcaption a { margin-left: 0.35rem; white-space: nowrap; }

/* Sotto una certa misura le etichette diventerebbero illeggibili: il disegno
   si allarga a tutta colonna e il testo cresce con lui. */
@media (max-width: 40rem) {
  .locator text { font-size: 15px; }
  .locator__cardinal text, .locator__dist { font-size: 13px; }
  .locator__me { font-size: 26px; }
  .locator__coords { font-size: 13px; }
}

.map__data { display: grid; gap: 1rem; margin-top: 2rem; }

.map__data > div { border-top: 1px solid rgba(27, 29, 24, 0.16); padding-top: 0.7rem; }
.map__data .label { margin-bottom: 0.3rem; }
.map__data p { margin: 0; }

/* Pagina non trovata ===================================================== */

.lost {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  padding: clamp(7rem, 14vw, 10rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: var(--ink);
  color: var(--field);
  isolation: isolate;
  overflow: hidden;
}

/* La campagna resta appena percepibile sotto al numero. */
.lost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/land.jpg") center / cover no-repeat;
  opacity: 0.18;
  filter: grayscale(0.4);
}

/* Specificità alzata: sta dentro un <p>, e `.lost p` viene dopo. */
.lost p.lost__num {
  font-family: var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 380;
  font-size: clamp(6rem, 2rem + 26vw, 20rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: #C9D46B;
  margin: 0;
}

.lost h1 {
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.6rem);
  color: var(--paper);
  max-width: 18ch;
}

.lost p { color: rgba(239, 240, 233, 0.8); max-width: 48ch; }

.lost__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.75rem; }

/* Reveal allo scroll ===================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

[data-animate][data-shown="true"] { opacity: 1; transform: none; }

/* Accessibilità ========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-line > * { transform: none; }
  .hero__media img { transform: none; will-change: auto; }
  [data-animate] { opacity: 1; transform: none; }
  .calendar__bar { transform: scaleX(1); }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}

.skip:focus { left: 0.5rem; top: 0.5rem; }