/* ==========================================================================
   AGRITURISMO TRIVILINI — sistema visivo
   --------------------------------------------------------------------------
   TESI
   La collina di Treglio e' scritta a righe: i filari seguono la curva, l'aratro
   apre una striscia di terra rossa e il resto sta a riposo fino alla stagione
   giusta. La pagina e' fatta delle stesse righe — calce, oliva, terra — e le
   righe ancora vuote non sono un errore: aspettano di essere seminate.

   Da qui discende tutto:
   · la pagina non e' un foglio con dentro delle schede, e' una successione di
     FASCE orizzontali a tutta larghezza, come il terreno lavorato a strisce;
   · l'unica curva del sito e' l'ARCO — la porta del casolare, il pergolato —
     e compare due volte: la finestra in apertura e il cappello delle stagioni;
   · i [DA CONFERMARE] sono un elemento di disegno, non una toppa: sono i solchi
     vuoti, e si vedono apposta.

   CARATTERI (nessuna richiesta esterna: sono i caratteri di sistema)
   Titoli  Palatino Linotype — la serif con le grazie larghe, calda, di libro
   Corpo   Candara — umanista, non geometrica; le sue cifre sono da testo
   Scala   12 · 14 · 16 · 18 · 22 · 30 · 42 · 60 · 84
   Corpo a 16px, interlinea 1.6; titoli 1.08, tracking -0.02em.

   PALETTE E RUOLI
   --calce      #F5EFE2  il muro imbiancato: fondo principale
   --intonaco   #EDE4D2  la seconda superficie: schede, fasce alterne, piede
   --terra      #3B2119  la terra arata all'ombra: UNICA superficie scura,
                         usata una volta sola (la banda del telefono)
   --scritto    #26241B  il testo
   --secondario #55523F  il testo di servizio
   --tenue      #6A6650  etichette e note
   --oliva      #6E7355  SOLO grafica (filari, archi, tratti). Mai testo:
                         sulla calce sta a 4,32:1, sotto la soglia.
   --oliva-fonda#5F6549  la versione del filare che si puo' anche leggere
   --terracotta #9C3F1D  IL COLORE DELL'AZIONE: bottone pieno, anello di focus,
                         [DA CONFERMARE]. Un colore, un significato, ovunque.
   --olio       #D6A63C  l'unico oro. SOLO sopra la terra scura: sulla calce
                         sta a 1,95:1 e sarebbe illeggibile.

   CONTRASTI MISURATI (WCAG 2.1, calcolati — non stimati)
   scritto / calce ................................. 13,57:1
   scritto / intonaco .............................. 12,31:1
   secondario / calce ...............................6,88:1
   secondario / intonaco ............................6,24:1
   tenue / calce ....................................5,05:1
   tenue / intonaco .................................4,58:1
   terracotta / calce ...............................5,83:1
   terracotta / intonaco ............................5,29:1
   calce su terracotta (bottone pieno) ..............5,83:1
   calce su terracotta-caldo (hover) ................4,73:1
   oliva-fonda / calce ..............................5,32:1
   intonaco su terra (banda scura) .................11,73:1
   su-terra-tenue #B8A98D su terra ..................6,42:1
   olio / terra (etichetta e anello di focus) .......6,62:1
   terracotta su calce (testo del bottone chiaro) ...5,83:1
   oliva / calce ....................................4,32:1  → solo grafica (>3:1)
   olio / calce .....................................1,95:1  → MAI sulla calce
   terra / calce ...................................12,93:1

   FORME
   Un solo raggio in tutto il sito, 3px, piu' l'arco (999px in alto).
   Nessuna superficie e' annidata dentro un'altra superficie con raggio:
   la regola dei raggi concentrici non ha casi da risolvere qui, ed e' voluto.
   Nessuna ombra: la terra non fa galleggiare niente. Le separazioni sono
   righe da 1px.

   RITMO
   Base 4px. Dentro un gruppo 8-12px, tra gruppi 24-40px, tra sezioni 96-120px:
   sempre almeno il doppio. Telaio 1080px.
   ========================================================================== */

:root{
  /* — Superfici — */
  --calce:      #F5EFE2;
  --intonaco:   #EDE4D2;
  --terra:      #3B2119;

  /* — Testo — */
  --scritto:    #26241B;
  --secondario: #55523F;
  --tenue:      #6A6650;
  --su-terra:       #EDE4D2;
  --su-terra-tenue: #B8A98D;

  /* — Verde dei filari: grafica e, nella versione fonda, testo — */
  --oliva:       #6E7355;
  --oliva-fonda: #5F6549;

  /* — Azione: un colore, un significato — */
  --terracotta:       #9C3F1D;
  --terracotta-caldo: #B14A24;

  /* — L'unico oro, e solo sulla terra — */
  --olio: #D6A63C;

  /* — Righe, non bordi: 1px e basta — */
  --riga:       rgba(38, 36, 27, 0.16);
  --riga-tenue: rgba(38, 36, 27, 0.08);
  --riga-olio:  rgba(214, 166, 60, 0.30);
  --riga-chiara:rgba(237, 228, 210, 0.20);

  /* — Caratteri — */
  --titolo: "Palatino Linotype", "Book Antiqua", Palatino, Constantia, Georgia, serif;
  --corpo:  Candara, "Segoe UI", Corbel, system-ui, sans-serif;

  /* — Scala tipografica — */
  --t12:12px; --t14:14px; --t16:16px; --t18:18px; --t22:22px;
  --t30:30px; --t42:42px; --t60:60px; --t84:84px;

  /* — Ritmo, base 4 — */
  --s4:4px;   --s8:8px;   --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s40:40px; --s56:56px; --s72:72px; --s96:96px; --s120:120px;

  --telaio: 1080px;

  /* — Curve forti, non quelle di serie — */
  --uscita:  cubic-bezier(0.23, 1, 0.32, 1);
  --dentro-fuori: cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--calce);
  color:var(--scritto);
  font-family:var(--corpo);
  font-size:var(--t16);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
svg{display:block;max-width:100%}

h1,h2,h3{
  font-family:var(--titolo);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
h1{font-size:clamp(34px,7.2vw,var(--t84))}
h2{font-size:clamp(26px,4.6vw,var(--t42))}
h3{font-size:var(--t22);line-height:1.2}
p{text-wrap:pretty}

/* L'anello di focus e' terracotta come l'azione: chi arriva da tastiera vede
   lo stesso colore che il sito usa per «qui si fa qualcosa». */
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:1px}

.salta{
  position:absolute;left:var(--s16);top:-64px;z-index:99;
  background:var(--terracotta);color:var(--calce);
  padding:var(--s12) var(--s16);font-size:var(--t14);text-decoration:none;
  transition:transform 160ms var(--uscita);
}
.salta:focus{transform:translateY(80px)}

/* ---------- Impalcatura: fasce orizzontali, come il terreno a strisce ------- */
.telaio{
  width:100%;max-width:var(--telaio);margin-inline:auto;
  padding-inline:clamp(20px,5vw,32px);
}
.fascia{
  padding-block:clamp(var(--s56),9vw,var(--s120));
  border-top:1px solid var(--riga-tenue);
}
.fascia--calce{background:var(--calce)}
.fascia--intonaco{background:var(--intonaco)}
.fascia--terra{background:var(--terra);color:var(--su-terra);border-top-color:transparent}
.fascia--apertura{padding-block:0 clamp(var(--s56),8vw,var(--s96));border-top:0}

/* ---------- Etichette: maiuscoletto spaziato, mai dentro una pillola -------- */
.etichetta{
  font-size:var(--t12);font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--tenue);line-height:1.4;
}
.etichetta--terracotta{color:var(--terracotta)}
.etichetta--olio{color:var(--olio)}

/* ---------- I solchi vuoti: [DA CONFERMARE] e' un elemento di disegno ------- */
.dc{
  display:inline-block;
  font-size:var(--t12);font-weight:700;letter-spacing:0.1em;
  color:var(--terracotta);
  border-bottom:1px dotted var(--terracotta);
  padding-bottom:2px;
  white-space:nowrap;
}
.dc-riga{margin-top:var(--s12)}

.cifre{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Bottoni ----------
   Un solo pieno per schermata, ed e' sempre «Chiama». Sulla terra scura il
   pieno diventa chiaro con le lettere terracotta: il colore dell'azione resta
   uno solo, cambia solo chi fa da fondo. */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px var(--s24);
  border:1px solid transparent;border-radius:3px;
  font-family:var(--corpo);font-size:var(--t16);font-weight:700;
  letter-spacing:0.01em;line-height:1.2;text-decoration:none;text-align:center;
  cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease,
             border-color 160ms ease,transform 160ms var(--uscita);
}
.bottone--terra{background:var(--terracotta);color:var(--calce)}
.bottone--chiaro{background:var(--calce);color:var(--terracotta)}
.bottone--corto{padding:8px var(--s16);font-size:var(--t14)}
.bottone:active{transform:scale(0.96)}

/* Il terziario non e' un bottone: e' testo sottolineato con una freccia.
   La riga e' `text-decoration`, non un bordo: cosi' resta attaccata alle
   lettere anche quando l'area cliccabile viene portata a 44px. */
.filo{
  display:inline-flex;align-items:center;gap:var(--s8);
  min-height:44px;
  font-size:var(--t16);font-weight:700;color:var(--oliva-fonda);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:var(--riga);
  transition:color 160ms ease,text-decoration-color 160ms ease;
}
.filo::after{
  content:"→";display:inline-block;text-decoration:none;
  transition:transform 160ms var(--uscita);
}
.filo--corto{min-height:32px;font-size:var(--t14)}
.filo--chiaro{color:var(--olio);text-decoration-color:var(--riga-olio)}

/* Il movimento su :hover vive solo dove esiste davvero un puntatore. */
@media (hover: hover) and (pointer: fine){
  .bottone--terra:hover{background:var(--terracotta-caldo);transform:translateY(-2px)}
  .bottone--chiaro:hover{background:var(--intonaco);transform:translateY(-2px)}
  .filo:hover{color:var(--terracotta);text-decoration-color:var(--terracotta)}
  .filo--chiaro:hover{color:var(--calce);text-decoration-color:var(--calce)}
  .filo:hover::after{transform:translateX(5px)}
  .nav__voci a:hover{color:var(--scritto);border-bottom-color:var(--terracotta)}
  .recapito a:hover{text-decoration-color:var(--terracotta);color:var(--terracotta)}

  /* Micro-reazioni: solo transform, il segnale statico resta. */
  .domanda,.stagione,.visita__colonna{transition:transform 160ms var(--uscita)}
  .domanda:hover,.stagione:hover,.visita__colonna:hover{transform:translateY(-3px)}
  .quando li,.recapito__voce{transition:transform 140ms var(--uscita)}
  .quando li:hover,.recapito__voce:hover{transform:translateX(2px)}
}
/* Sul fondo scuro l'anello terracotta non si vedrebbe: li' l'anello e' d'olio. */
.fascia--terra :focus-visible{outline-color:var(--olio)}

/* ---------- Navigazione: a filo, senza barra e senza ombra ------------------ */
.nav{padding-block:var(--s24)}
.nav__interno{display:flex;align-items:center;justify-content:space-between;gap:var(--s16)}
.marchio{
  font-family:var(--titolo);font-size:var(--t22);letter-spacing:-0.01em;
  text-decoration:none;color:var(--scritto);
}
.nav__voci{display:flex;align-items:center;gap:var(--s32);font-size:var(--t14)}
.nav__voci a{
  color:var(--secondario);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color 160ms ease,border-color 160ms ease;
}

/* ---------- Apertura ---------- */
.apertura{
  display:grid;grid-template-columns:1fr;gap:var(--s56);
  align-items:center;
  padding-block:var(--s40) 0;
  position:relative;overflow:hidden;
}
.apertura__testo,.apertura .arco{position:relative;z-index:1}
.apertura__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s16);min-width:0}

/* ---------- La luce sulla collina.
     Una macchia di luce calda che si sposta piano sopra l'apertura, come il
     sole che gira sui filari nell'ora di pranzo. Non e' terracotta (azione)
     ne' oliva (grafica) ne' olio (vietato sulla calce): e' luce, bianca
     appena scaldata. Dietro il contenuto, non intercetta il puntatore, vive
     solo dove il movimento e' ammesso. ---------------------------------- */
.campo{display:none}
@media (prefers-reduced-motion: no-preference){
  .campo{
    display:block;position:absolute;inset:-16% -12%;
    z-index:0;pointer-events:none;
    background:
      radial-gradient(38% 44% at 28% 22%, rgba(250,243,228,0.55) 0%, rgba(250,243,228,0) 72%),
      radial-gradient(32% 34% at 70% 62%, rgba(246,238,222,0.4) 0%, rgba(246,238,222,0) 74%);
    /* durata dichiarata: luce ambientale continua, non un feedback UI;
       ciclo lungo perche' e' il sole che gira sui filari, non una risposta. */
    animation:campo-deriva 24s ease-in-out infinite alternate;
  }
}
@keyframes campo-deriva{
  from{transform:translate3d(-3%,-2%,0) scale(1);    opacity:0.7}
  to  {transform:translate3d(4%,3%,0)   scale(1.08); opacity:1}
}
.apertura h1{max-width:13ch;margin-top:var(--s8)}
.apertura h1 em{font-style:italic;color:var(--terracotta)}
.conduce{font-size:var(--t18);color:var(--secondario);max-width:58ch;line-height:1.6}
.conduce--minore{font-size:var(--t16)}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16) var(--s24);margin-top:var(--s8)}

/* ---------- Il recapito rapido: tre righe, come sul biglietto --------------- */
.recapito{
  display:flex;flex-wrap:wrap;gap:var(--s24) var(--s40);
  margin-top:var(--s24);padding-top:var(--s24);
  border-top:1px solid var(--riga-tenue);width:100%;
}
.recapito--colonna{flex-direction:column;gap:var(--s16);border-top:0;padding-top:0;margin-top:0}
.recapito__voce{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.recapito dt{
  font-size:var(--t12);font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--tenue);
}
.recapito dd{font-size:var(--t16);color:var(--scritto);line-height:1.5}
.recapito a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--riga);
  transition:color 160ms ease,text-decoration-color 160ms ease;
}

/* ---------- L'arco: la finestra del casolare ---------- */
.arco{max-width:320px;margin-inline:auto;width:100%}
.arco__disegno{width:100%;height:auto}
.d-fondo{fill:var(--intonaco)}
.d-sole{fill:var(--olio);opacity:.34}
.d-arato{fill:var(--terracotta);opacity:.82}
.d-filari{fill:none;stroke:var(--oliva);stroke-width:1.5;stroke-linecap:round}
.d-arco{fill:none;stroke:var(--oliva-fonda);stroke-width:1.5}
.arco figcaption{
  margin-top:var(--s12);text-align:center;
  font-size:var(--t12);color:var(--tenue);letter-spacing:0.02em;
}

/* ---------- Testata di sezione ---------- */
.testata{display:flex;flex-direction:column;gap:var(--s12);max-width:62ch;margin-bottom:var(--s56)}
.testata .conduce{margin-top:var(--s4)}

/* ---------- Le quattro domande ----------
   La cifra e' la grafica: nessuna scheda, nessuna ombra. Le domande stanno su
   quattro solchi separati da una riga. */
.domande{display:grid;grid-template-columns:1fr;gap:var(--s40)}
.domanda{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s16);row-gap:var(--s8);
  align-items:baseline;
  padding-top:var(--s24);border-top:1px solid var(--riga-tenue);
  min-width:0;
}
.domanda__cifra{
  font-family:var(--titolo);font-size:var(--t42);line-height:.85;
  color:var(--terracotta);font-variant-numeric:tabular-nums;
  grid-row:1 / span 3;
}
.domanda h3{grid-column:2}
.domanda p{grid-column:2;color:var(--secondario);font-size:var(--t16);max-width:46ch}
.domanda .dc-riga{margin-top:var(--s4)}

/* ---------- Le stagioni: quattro solchi, l'arco in cima ---------- */
.stagioni{display:grid;grid-template-columns:1fr;gap:var(--s24)}
.stagione{
  background:var(--calce);
  border:1px solid var(--riga-tenue);border-radius:3px;
  padding:var(--s24);
  display:flex;flex-direction:column;gap:var(--s16);
  min-width:0;
}
.fascia--calce .stagione{background:var(--intonaco)}
.stagione__cappello{
  width:52px;height:26px;
  border:1.5px solid var(--oliva);border-bottom:0;
  border-radius:999px 999px 0 0;
}
.stagione h3{font-size:var(--t22)}
.stagione dl{display:flex;flex-direction:column;gap:var(--s12)}
.stagione dt{
  font-size:var(--t12);font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--tenue);
}
.stagione dd{margin-top:var(--s4)}

/* ---------- L'avviso: perche' le righe sono vuote ---------- */
.avviso{
  margin-top:var(--s40);
  border-left:3px solid var(--terracotta);
  background:var(--intonaco);
  padding:var(--s24);
  max-width:72ch;
  display:flex;flex-direction:column;gap:var(--s8);
}
.fascia--calce .avviso{background:var(--intonaco)}
.avviso p{font-size:var(--t16);color:var(--secondario)}

/* ---------- La banda scura: l'unica terra scoperta della pagina ------------- */
.banda{display:grid;grid-template-columns:1fr;gap:var(--s40);align-items:end}
.banda__testo{display:flex;flex-direction:column;gap:var(--s16);min-width:0}
.banda h2{color:var(--su-terra);max-width:16ch}
.banda h2 em{font-style:italic;color:var(--olio)}
.banda p{color:var(--su-terra-tenue);max-width:54ch;font-size:var(--t18)}
.banda p .cifre{color:var(--su-terra);font-weight:700}
.banda__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16) var(--s24)}

/* ---------- Dove siamo e quando ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s40)}
.visita__colonna{display:flex;flex-direction:column;gap:var(--s16);min-width:0}
.visita__colonna h3{font-size:var(--t22)}
.indirizzo{font-size:var(--t18);line-height:1.5}
.nota{font-size:var(--t14);color:var(--secondario);max-width:44ch}
.quando{display:flex;flex-direction:column}
.quando li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s8) var(--s16);
  padding-block:var(--s12);
  border-bottom:1px solid var(--riga-tenue);
  font-size:var(--t16);color:var(--secondario);
}

/* ---------- Piede ---------- */
.piede{padding-block:var(--s40)}
.piede__interno{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s12) var(--s32)}
.piede p{font-size:var(--t14);color:var(--secondario)}
.piede strong{color:var(--scritto)}
.piede__credito{color:var(--tenue)}

/* ---------- Comparse ----------
   Solo opacita' e transform, 280ms, un ritardo di 60ms tra una riga e l'altra:
   e' il tempo che ci mette l'occhio a scendere di un solco.
   Lo stato nascosto lo applica solo `html.anima`, che viene messo in testa al
   documento: senza JavaScript, o con «riduci movimento» attivo, la pagina
   nasce gia' intera. */
.rivela{
  transition:opacity 280ms var(--uscita),transform 280ms var(--uscita);
  transition-delay:var(--rit,0ms);
}
html.anima .rivela{opacity:0;transform:translateY(18px)}
html.anima .rivela.dentro{opacity:1;transform:none}

/* Dal 2026-08-30 (richiesta dell'utente: movimento su ogni cosa): le righe
   di un gruppo — nav, recapiti, orari, piede — salgono a cascata di ~50ms
   l'una dall'altra, come l'occhio che scende di un solco. */
html.anima .rivela--righe > *{opacity:0;transform:translateY(10px)}
html.anima .rivela--righe.dentro > *{opacity:1;transform:none;
  transition:opacity 240ms var(--uscita),transform 240ms var(--uscita)}
html.anima .rivela--righe.dentro > *:nth-child(1){transition-delay:30ms}
html.anima .rivela--righe.dentro > *:nth-child(2){transition-delay:80ms}
html.anima .rivela--righe.dentro > *:nth-child(3){transition-delay:130ms}
html.anima .rivela--righe.dentro > *:nth-child(4){transition-delay:180ms}
html.anima .rivela--righe.dentro > *:nth-child(5){transition-delay:230ms}
html.anima .rivela--righe.dentro > *:nth-child(6){transition-delay:270ms}
html.anima .rivela--righe.dentro > *:nth-child(n+7){transition-delay:290ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;transition-delay:0ms !important;
  }
  .rivela,
  .rivela--righe > *{opacity:1 !important;transform:none !important}
  .campo{display:none}
}

/* ---------- Il telefono in fondo allo schermo, solo sul telefono ----------- */
.chiama-fisso{display:none}

/* ==========================================================================
   Larghezze. Si sale, non si scende: a 320px il layout e' gia' quello giusto
   e nessuna riga esce dal margine.
   ========================================================================== */
@media (min-width:600px){
  .domande{gap:var(--s40) var(--s40);grid-template-columns:repeat(2,minmax(0,1fr))}
  .stagioni{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .apertura{grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:var(--s72);padding-block:var(--s56) 0}
  .arco{max-width:340px}
  .visita{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s56)}
  .banda{grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr);gap:var(--s56)}
  .banda__azioni{justify-content:flex-end}
}
@media (min-width:1040px){
  .stagioni{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s24)}
}

@media (max-width:760px){
  .nav__voci{display:none}
  body{padding-bottom:72px}
  .chiama-fisso{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    min-height:56px;padding:var(--s16);
    background:var(--terracotta);color:var(--calce);
    font-family:var(--corpo);font-size:var(--t16);font-weight:700;
    text-decoration:none;text-align:center;
    border-top:1px solid rgba(38,36,27,.2);
    transition:transform 120ms var(--uscita);
  }
  .chiama-fisso:active{transform:scale(0.96)}
  .apertura{gap:var(--s40)}
}