/* ==========================================================================
   Frantoio Marino — Fossacesia (CH)

   TESI
   Un frantoio gira due mesi e mezzo l'anno. Chi telefona non chiede «cosa
   vendete»: chiede a che punto dell'anno siamo. Quindi la pagina non e' un
   depliant, e' un anno che si scorre, con un righello dei dodici mesi a lato
   che si riempie d'olio man mano che si scende. Il fondo e' la calce dei muri
   del frantoio; il verde e' l'olio nuovo controluce e compare solo dove c'e'
   olio.

   PALETTE (ruoli, non nomi di colore)
   --calce           #F2EFE6  fondo pagina, la calce dei muri
   --calce-scura     #E3DECF  superficie del righello
   --inchiostro      #241F17  testo primario
   --inchiostro-tenue#5C5344  testo secondario ed etichette
   --olio            #6B7A22  olio nuovo: SOLO riempimenti e UI, mai testo
   --olio-scuro      #3F4A12  testo interattivo e link
   --oliva           #2E2A1C  fondo del piede

   CONTRASTI misurati con agenti/contrasto.py (non stimati)
   --inchiostro      su --calce        14.23:1  AAA
   --inchiostro-tenue su --calce        6.58:1  AA
   --olio-scuro      su --calce         8.30:1  AAA
   --calce           su --oliva        12.47:1  AAA
   --inchiostro      su --calce-scura  12.17:1  AAA
   --olio            su --calce         4.12:1  -> sotto 4.5: vietato per il
                                        testo, ammesso come riempimento e
                                        bordo (soglia 3:1)

   SCALA TIPOGRAFICA
   numero mese  clamp(3.2rem, 11vw, 6rem)   Cambria, interlinea 1
   titolo voce  clamp(1.5rem, 4vw, 2.1rem)  Cambria, interlinea 1.15
   testo        1.0625rem                    Corbel, interlinea 1.55
   etichetta    0.8125rem                    maiuscoletto, tracking +0.08em

   Vincolante: .design/style-lock.md
   ========================================================================== */

:root {
  --calce: #F2EFE6;
  --calce-scura: #E3DECF;
  --inchiostro: #241F17;
  --inchiostro-tenue: #5C5344;
  --olio: #6B7A22;
  --olio-scuro: #3F4A12;
  --oliva: #2E2A1C;

  --serif: Cambria, "Palatino Linotype", ui-serif, serif;
  --sans: Corbel, Candara, "Segoe UI", system-ui, sans-serif;

  --passo: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --transizione: 200ms var(--ease-out);

  --riempimento: 0;
}

*, *::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(--inchiostro);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- salto al contenuto ---------------------------------------------- */

.salta {
  position: absolute;
  inset-inline-start: calc(var(--passo) * 2);
  inset-block-start: calc(var(--passo) * 2);
  z-index: 10;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2);
  border-radius: 8px;
  background: var(--inchiostro);
  color: var(--calce);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transizione);
}

.salta:focus-visible { transform: translateY(0); }

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

.testata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 3);
  align-items: baseline;
  justify-content: space-between;
  padding: calc(var(--passo) * 3) clamp(16px, 5vw, 56px);
  border-block-end: 1px solid var(--calce-scura);
}

.testata__nome {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.2;
}

.testata__luogo {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.testata__tel {
  font-variant-numeric: tabular-nums;
  color: var(--olio-scuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

main { display: block; }

.apertura {
  padding: clamp(40px, 9vw, 96px) clamp(16px, 5vw, 56px) clamp(32px, 6vw, 64px);
  max-inline-size: 74ch;
}

.etichetta {
  margin: 0 0 calc(var(--passo) * 2);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.titolone {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 8vw, 4.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.titolone__olio {
  color: var(--olio-scuro);
  font-style: italic;
}

.sommario {
  margin: calc(var(--passo) * 3) 0 0;
  max-inline-size: 62ch;
  text-wrap: pretty;
}

.avviso {
  margin: calc(var(--passo) * 3) 0 0;
  padding: calc(var(--passo) * 2);
  max-inline-size: 62ch;
  border-inline-start: 3px solid var(--olio);
  background: var(--calce-scura);
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  font-size: 0.9375rem;
  color: var(--inchiostro);
}

/* --- azioni ----------------------------------------------------------- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-start: calc(var(--passo) * 4);
}

.bottone {
  display: inline-block;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2.5);
  min-block-size: 44px;
  border: 1px solid var(--olio-scuro);
  border-radius: 8px;
  background: transparent;
  color: var(--olio-scuro);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, color 140ms ease;
}

.bottone--pieno {
  background: var(--olio-scuro);
  color: var(--calce);
}

.bottone:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--calce-scura); }
  .bottone--pieno:hover { background: var(--oliva); color: var(--calce); }
}

/* --- l'anno: righello + voci ------------------------------------------ */

.anno {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(16px, 4vw, 40px);
  padding: 0 clamp(16px, 5vw, 56px) clamp(40px, 8vw, 88px);
  border-block-start: 1px solid var(--calce-scura);
  padding-block-start: clamp(32px, 6vw, 64px);
}

.titolo-sezione {
  grid-column: 1 / -1;
  margin: 0 0 calc(var(--passo) * 4);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--inchiostro-tenue);
}

.righello {
  position: sticky;
  inset-block-start: calc(var(--passo) * 3);
  align-self: start;
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: calc(var(--passo) * 1.5);
  block-size: min(70vh, 520px);
}

.righello__olio {
  position: relative;
  block-size: 100%;
  background: var(--calce-scura);
  overflow: hidden;
}

.righello__livello {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--olio);
  transform-origin: top;
  transform: scaleY(var(--riempimento));
}

.righello__mesi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tacca { display: block; }

.tacca__link {
  display: flex;
  align-items: baseline;
  gap: calc(var(--passo));
  min-block-size: 24px;
  color: var(--inchiostro-tenue);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 140ms ease, transform 140ms var(--ease-out);
}

.tacca__n {
  font-family: var(--serif);
  font-size: 0.875rem;
}

.tacca__m {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* il mese attivo non e' segnato solo dal colore: prende anche il peso
   tipografico e il trattino davanti, cosi' resta leggibile in monocromia */
.tacca__link[aria-current="true"] {
  color: var(--olio-scuro);
  font-weight: 700;
}

.tacca__link[aria-current="true"] .tacca__n::before {
  content: "— ";
  color: var(--olio);
}

@media (hover: hover) and (pointer: fine) {
  .tacca__link:hover { color: var(--inchiostro); transform: translateX(2px); }
}

/* sotto i 720px il righello tiene solo i numeri: a 320px la colonna del
   testo deve restare leggibile */
@media (max-width: 720px) {
  .tacca__m { display: none; }
}

@media (min-width: 721px) {
  .anno { grid-template-columns: 112px minmax(0, 1fr); }
}

/* --- le voci ---------------------------------------------------------- */

.voci { display: block; }

.voce {
  padding-block: clamp(24px, 5vw, 48px);
  border-block-start: 1px solid var(--calce-scura);
  max-inline-size: 62ch;
}

.voce:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.voce__mese {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--passo) * 2);
  margin: 0 0 var(--passo);
}

.voce__n {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 11vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--olio-scuro);
}

.voce__m {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.voce__titolo {
  margin: 0 0 calc(var(--passo) * 2);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.voce__testo {
  margin: 0 0 calc(var(--passo) * 3);
  text-wrap: pretty;
}

/* --- righe della campagna --------------------------------------------- */

.campagna { margin: 0; }

.campagna__riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px dotted var(--calce-scura);
}

.campagna__riga dt {
  font-size: 0.9375rem;
  color: var(--inchiostro);
}

.campagna__riga dd { margin: 0; }

.campagna__d,
.rec__d {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--inchiostro-tenue);
}

.rec__d--vero {
  letter-spacing: normal;
  color: var(--inchiostro);
}

/* --- le latte --------------------------------------------------------- */

.latte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.latta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding: calc(var(--passo) * 2);
  border: 1px solid var(--calce-scura);
  border-radius: 12px;
  background: var(--calce-scura);
}

.latta + .latta { margin-block-start: calc(var(--passo) * 1.5); }

.latta__n { font-size: 0.9375rem; }

.latta__d {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--inchiostro-tenue);
}

/* --- recapiti --------------------------------------------------------- */

.recapiti {
  padding: clamp(32px, 6vw, 64px) clamp(16px, 5vw, 56px) clamp(40px, 8vw, 80px);
  border-block-start: 1px solid var(--calce-scura);
  max-inline-size: 74ch;
}

.rec {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec__riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px dotted var(--calce-scura);
}

.rec__v {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.collegamento {
  color: var(--olio-scuro);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}

/* --- piede ------------------------------------------------------------ */

.pie {
  padding: clamp(32px, 6vw, 56px) clamp(16px, 5vw, 56px);
  background: var(--oliva);
  color: var(--calce);
}

.pie__riga {
  margin: 0 0 var(--passo);
  font-family: var(--serif);
  font-size: 1rem;
}

.pie__nota {
  margin: 0;
  max-inline-size: 62ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--calce-scura);
  text-wrap: pretty;
}

/* --- messa a fuoco ---------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--olio-scuro);
  outline-offset: 2px;
  border-radius: 2px;
}

.pie :focus-visible { outline-color: var(--calce); }

/* --- entrata delle voci ------------------------------------------------
   Solo con JS attivo: senza JS il contenuto e' gia' visibile. */

@media (prefers-reduced-motion: no-preference) {
  .js .voce {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
  }

  .js .voce.e-dentro {
    opacity: 1;
    transform: translateY(0);
  }

  /* sfalsamento di 60ms fra le parti della voce che entrano insieme */
  .js .voce > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  }

  .js .voce.e-dentro > * { opacity: 1; transform: translateY(0); }
  .js .voce.e-dentro > *:nth-child(1) { transition-delay: 0ms; }
  .js .voce.e-dentro > *:nth-child(2) { transition-delay: 60ms; }
  .js .voce.e-dentro > *:nth-child(3) { transition-delay: 120ms; }
  .js .voce.e-dentro > *:nth-child(4) { transition-delay: 180ms; }

  .js .righello__livello {
    transition: transform 120ms linear;
  }
}