/* =====================================================================
   CASTALDIA · bozza 16 · "Una giornata in agriturismo"
   La pagina scorre dal mattino (salvia, crema) alla notte (vino, scuro).

   Indice
   1. Variabili: colori, font, misure, movimento
   2. Temi chiaro e scuro
   3. Base
   4. Pezzi comuni: contenitore, etichette, titoli, bottoni, note, foto
   5. Intestazione e menu del telefono
   6. Sezioni, dall'alba alla notte
   7. Piè di pagina
   8. Animazioni e movimento
   Tutto è scritto partendo dal telefono; i @media aggiungono il layout largo.
   ===================================================================== */


/* 1. VARIABILI ======================================================== */
:root {
  /* Colori del giorno */
  --paper: #F5EFE6;        /* carta crema, mattina */
  --paper-warm: #EFE4D6;   /* cipria, pomeriggio */
  --sage: #C7CCB0;         /* salvia, le vigne */
  --sage-soft: #DCDFCC;
  --sage-deep: #565D41;    /* verde scuro: corsivi e dettagli */
  --sand: #E4CBAE;
  --apricot: #E8B78C;
  --terracotta: #C2694A;
  --ink: #3B342F;          /* il testo è marrone caldo, mai nero */
  --ink-soft: #625850;
  --line: rgba(59, 52, 47, .16);

  /* Colori della sera */
  --raboso: #7E2633;       /* rosso vino, come il Raboso del Piave */
  --raboso-deep: #5A1A25;
  --raboso-light: #A23C49;
  --night: #1C1815;
  --night-2: #26201B;
  --cream: #EEE2CD;        /* testo sul fondo scuro */
  --cream-soft: #C9BBA5;
  --line-dark: rgba(238, 226, 205, .16);

  /* Dettagli */
  --gold: #B98535;
  --marker: #F0DF9A;       /* evidenziatore dei [Da inserire] */
  --card: #F2E8D7;         /* carta del menu */

  /* Font (sono dentro fonts.css) */
  --font-serif: "Playfair", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Scala tipografica: cresce con lo schermo, senza salti */
  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(1.0625rem, 1.02rem + .2vw, 1.15rem);
  --step-1: clamp(1.18rem, 1.08rem + .5vw, 1.45rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
  --step-3: clamp(1.7rem, 1.25rem + 2.2vw, 3.05rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.8vw, 4.6rem);
  --step-5: clamp(3.25rem, 1.75rem + 5.4vw, 6.5rem);

  /* Spazi */
  --gutter: clamp(1.25rem, .55rem + 3.4vw, 3.5rem);
  --max: 84rem;
  --sp-xs: .625rem;
  --sp-s: clamp(.8rem, .7rem + .5vw, 1.15rem);
  --sp-m: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --sp-l: clamp(2rem, 1.4rem + 3vw, 4rem);
  --sp-xl: clamp(3.5rem, 2.2rem + 6vw, 8rem);
  --sp-2xl: clamp(5rem, 3rem + 9vw, 11.5rem);
  --header-h: 4.25rem;

  /* Forme */
  --r-s: .55rem;
  --r-m: 1.1rem;
  --r-l: 1.75rem;
  --r-pill: 999px;

  /* Ombre morbide, volutamente non uniformi (la luce arriva da sinistra in alto) */
  --shadow-soft: 0 1px 1px rgba(59, 40, 25, .06), 9px 18px 30px -18px rgba(59, 40, 25, .34), -6px 28px 52px -30px rgba(59, 40, 25, .26);
  --shadow-lift: 0 2px 2px rgba(59, 40, 25, .06), 14px 30px 46px -20px rgba(59, 40, 25, .42), -10px 44px 72px -36px rgba(59, 40, 25, .3);
  --shadow-dark: 14px 34px 64px -24px rgba(0, 0, 0, .6), -8px 18px 40px -26px rgba(0, 0, 0, .45);

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --motion: 1;             /* diventa 0 se il visitatore ha chiesto meno animazioni */

  /* Grana fotografica per i riquadri delle foto */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 64em) {
  :root { --header-h: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}


/* 2. TEMI ============================================================= */
/* Ogni sezione dichiara se è "chiara" o "scura": i pezzi comuni si adattano da soli. */
[data-theme="light"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --accent: var(--sage-deep);
  --rule: var(--line);
  --rule-strong: rgba(59, 52, 47, .32);
  --hl: var(--marker);
  --note: var(--sage-deep);
  --chip-bg: rgba(59, 52, 47, .08);
}

[data-theme="dark"] {
  --bg: var(--night);
  --fg: var(--cream);
  --fg-soft: var(--cream-soft);
  --accent: var(--apricot);
  --rule: var(--line-dark);
  --rule-strong: rgba(238, 226, 205, .34);
  --hl: rgba(240, 223, 154, .2);
  --note: var(--apricot);
  --chip-bg: rgba(238, 226, 205, .1);
}

[data-theme] { color: var(--fg); }


/* 3. BASE ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .003em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

p, h1, h2, h3, ul, dl, dd, figure, address, fieldset { margin: 0; }

ul[class] { list-style: none; padding: 0; }

address { font-style: normal; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--sage); color: var(--ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* le icone mantengono lo stesso tratto sottile a qualsiasi grandezza */
.sprite path,
.sprite circle,
.sprite rect { vector-effect: non-scaling-stroke; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

.icon--star { color: var(--gold); fill: currentColor; stroke: none; }

.skip {
  position: absolute; z-index: 100; left: var(--gutter); top: -4rem;
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
  transition: top .3s var(--ease-out);
}
.skip:focus { top: .75rem; }


/* 4. PEZZI COMUNI ===================================================== */

/* Contenitore: largo al massimo 84rem, con margini che crescono con lo schermo */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* Etichetta sopra i titoli, con un tratto disegnato a mano */
.kicker {
  display: flex;
  align-items: center;
  gap: .8em;
  width: fit-content;
  margin-bottom: var(--sp-m);
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.kicker::before {
  content: "";
  flex: none;
  width: 2.4rem;
  height: .6rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M1 5.6C7 2.4 12.4 2 18 4.6s11.4 3 21-1.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M1 5.6C7 2.4 12.4 2 18 4.6s11.4 3 21-1.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Titoli: serif leggera, interlinea stretta, un corsivo che va a capo e rientra */
.h2 {
  margin-bottom: var(--sp-m);
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.h2 em {
  display: block;
  padding-inline-start: clamp(.2em, 3vw, .7em);
  font-style: italic;
  letter-spacing: -.012em;
  color: var(--accent);
}

/* Paragrafo d'apertura di ogni sezione: serif, più grande del testo */
.lead {
  max-width: 31em;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 380;
  line-height: 1.52;
  color: var(--fg-soft);
  text-wrap: pretty;
}

p { text-wrap: pretty; }

/* Dati ancora da chiedere al cliente: evidenziati come con un pennarello */
.to-fill {
  padding: .08em .4em;
  border-radius: .3em;
  background: var(--hl);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.65;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
p.to-fill { width: fit-content; max-width: 100%; }

/* Note scritte a mano, come a margine di un menu */
.note {
  width: fit-content;
  font-family: var(--font-hand);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--note);
  transform: rotate(-4deg);
}
.note__arrow { width: 4.2rem; height: auto; stroke-width: 1.6; }

/* Link con sottolineatura che si disegna */
.u-link {
  width: fit-content;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size .55s var(--ease-out), color .3s var(--ease-soft);
}

/* Lingua */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.lang a {
  display: inline-grid;
  place-items: center;
  min-width: 2.3rem;
  min-height: 2.3rem;
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  text-decoration: none;
  transition: color .3s, background-color .3s;
}
.lang a[aria-current="page"] { color: var(--fg); background: var(--chip-bg); }

/* --- Bottoni ---------------------------------------------------------
   Al passaggio del mouse il colore sale dal basso, come il vino nel bicchiere. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-fill: var(--raboso);
  --btn-fill-fg: var(--cream);
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 3.25rem;
  padding: .95em 1.55em;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 24px -16px rgba(40, 25, 15, .6);
  translate: var(--mx, 0) var(--my, 0);
  transition:
    translate .5s var(--ease-out),
    transform .5s var(--ease-spring),
    box-shadow .5s var(--ease-out),
    color .45s var(--ease-soft),
    border-color .45s var(--ease-soft);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  right: -10%;
  top: 0;
  height: 230%;
  border-radius: 46% 54% 0 0 / 20% 24% 0 0;
  background: var(--btn-fill);
  transform: translate3d(0, 44%, 0);
  transition: transform .75s var(--ease-out);
}
.btn__label { position: relative; }
.btn__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  stroke-width: 1.8;
  transition: transform .55s var(--ease-spring);
}
.btn:active { transform: scale(.97); }

.btn--line {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: currentColor;
  --btn-fill: var(--fg);
  --btn-fill-fg: var(--bg);
  box-shadow: none;
}
.btn--wine { --btn-bg: var(--raboso); --btn-fg: var(--cream); --btn-fill: var(--ink); --btn-fill-fg: var(--paper); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--night); --btn-fill: var(--apricot); --btn-fill-fg: var(--night); box-shadow: none; }
.btn--small { min-height: 2.6rem; padding: .7em 1.15em; font-size: .7rem; box-shadow: none; }

/* --- Riquadri delle foto ---------------------------------------------
   Finché non ci sono le foto vere, ogni riquadro è una piccola composizione
   con la descrizione dello scatto: funziona anche da scaletta per il servizio. */
.shot {
  --shot-radius: var(--r-l);
  --rh: 1.25;                       /* altezza ÷ larghezza */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / var(--rh);
  border-radius: var(--shot-radius);
  background: var(--sand);
  box-shadow: var(--shadow-soft);
}
.shot--arch {
  /* arco a tutto sesto, come le barchesse delle case coloniche */
  border-radius: 50% 50% var(--r-m) var(--r-m) / calc(50% / var(--rh)) calc(50% / var(--rh)) var(--r-m) var(--r-m);
}
.shot--round { --rh: 1; border-radius: 50%; }
.shot--tall { --rh: 1.3; }
.shot--wide { --rh: .75; }

.shot__media {
  position: absolute;
  inset: -8% 0;
  color: rgba(59, 52, 47, .5);
  translate: 0 var(--py, 0);
  transition: transform 1.2s var(--ease-out), scale 1.6s var(--ease-out);
}
.shot__media::after,
.print__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .34;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Le "luci" dei riquadri che aspettano ancora la foto */
.shot__media--room {
  background:
    radial-gradient(80% 50% at 50% 18%, rgba(255, 246, 228, .95), rgba(255, 246, 228, 0) 70%),
    linear-gradient(170deg, #F1E3D0, #DDC3A5 70%, #C9AA8A);
}
.shot__media--supper,
.shot__media--wine { color: rgba(238, 226, 205, .55); }
.shot__media--supper {
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(214, 140, 80, .5), rgba(214, 140, 80, 0) 70%),
    linear-gradient(180deg, #3D2821, #1E1613);
}
.shot__media--wine { background: radial-gradient(circle at 38% 32%, #C35664, #7E2633 52%, #3C1118); }
.shot__media--supper::after,
.shot__media--wine::after { filter: invert(1); mix-blend-mode: screen; opacity: .16; }

/* Quando arrivano le foto: un <img> dentro .shot__media o .print__photo riempie il riquadro */
.shot__media > img,
.print__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.shot__media:has(> img)::after,
.print__photo:has(> img)::after { opacity: .12; }

.shot__icon {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 40%;
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  stroke-width: 1.4;
}
.shot__icon--b { left: 70%; top: 58%; width: 24%; rotate: 12deg; }
.shot__icon--big { width: 56%; }

.shot__cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.15rem 1.05rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--cap-fg, var(--ink));
  background: linear-gradient(to top, var(--cap-bg, rgba(245, 239, 230, .9)) 30%, rgba(245, 239, 230, 0));
}
.shot__cap--center { text-align: center; padding-inline: 18%; }
.shot__media--supper + .shot__cap,
.shot__media--wine + .shot__cap { --cap-fg: var(--cream); --cap-bg: rgba(24, 16, 14, .82); background: linear-gradient(to top, var(--cap-bg) 30%, rgba(24, 16, 14, 0)); }
.shot__tag {
  display: block;
  width: fit-content;
  margin: 0 0 .35rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  transition: transform .5s var(--ease-out);
}
.shot__cap--center .shot__tag { margin-inline: auto; }
.shot__tag::before {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .06em;
}

/* Foto stampata, con il bordo bianco e la didascalia a mano */
.print {
  --rot: -5deg;
  position: relative;
  width: 13rem;
  padding: .6rem .6rem 0;
  border-radius: .3rem;
  background: #FBF7F0;
  box-shadow: 0 1px 1px rgba(59, 40, 25, .08), 8px 16px 26px -14px rgba(59, 40, 25, .42), -6px 26px 40px -24px rgba(59, 40, 25, .3);
  transform: perspective(900px) rotate(var(--rot)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
}
.print__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: .15rem;
  transition: scale 1.6s var(--ease-out);
}
.print__art {
  position: absolute;
  left: 22%;
  top: 16%;
  width: 56%;
  height: 56%;
  color: rgba(59, 52, 47, .45);
  stroke-width: 1.2;
}
.print__photo .shot__tag { position: absolute; z-index: 1; left: .6rem; bottom: .45rem; margin: 0; color: var(--ink); }
.print__cap {
  padding: .55rem .2rem .7rem;
  text-wrap: balance;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
  color: var(--ink-soft);
}
.print__photo--wide { aspect-ratio: 4 / 3; }

/* Etichetta su una foto vera: una pillola chiara, leggibile su qualsiasi colore */
.shot__tag--chip {
  padding: .32rem .62rem .3rem;
  border-radius: var(--r-pill);
  background: rgba(251, 247, 240, .92);
  color: var(--ink);
  opacity: 1;
}
.print__photo .shot__tag--chip {
  left: .4rem;
  bottom: .4rem;
  padding: .26rem .45rem .24rem;
  font-size: .5rem;
  letter-spacing: .07em;
  white-space: nowrap;
}

/* Testo da completare dentro un titolo: evidenziato, ma con il carattere del titolo */
.mark {
  padding: 0 .22em;
  border-radius: .25em;
  background: var(--hl);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Invito a scriverci, ripetuto alla fine delle sezioni */
.ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: 1.5px dashed var(--rule-strong);
}
.ask__text {
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--note);
  transform: rotate(-2deg);
}


/* 5. INTESTAZIONE E MENU ============================================== */
.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header-h);
  transition:
    transform .55s var(--ease-out),
    background-color .45s var(--ease-soft),
    color .45s var(--ease-soft),
    box-shadow .45s var(--ease-soft);
}
.site-header.is-scrolled {
  background: rgba(245, 239, 230, .86);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
          backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header[data-theme="dark"] .btn--fill { --btn-bg: var(--cream); --btn-fg: var(--night); --btn-fill: var(--apricot); --btn-fill-fg: var(--night); }
.site-header:focus-within { transform: none; }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(100% - 2 * var(--gutter), var(--max));
  height: 100%;
  margin-inline: auto;
}

.brand {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: .55rem;
  margin-right: auto;
  text-decoration: none;
}
.brand__mark {
  grid-row: span 2;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--accent);
  stroke-width: 1.5;
  transition: transform .8s var(--ease-spring);
}
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
}
.brand__tag {
  display: none;
  margin-top: .2rem;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.nav { display: none; }
.nav__link {
  position: relative;
  padding: .4rem 0;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.15rem;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%) scale(0);
  transition: transform .45s var(--ease-spring);
}
.nav__link.is-current::after { transform: translateX(-50%) scale(1); }

.site-header__end { display: flex; align-items: center; gap: .5rem; }
.site-header__end .lang { display: none; }

.menu-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .3s, transform .5s var(--ease-spring);
}
.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-toggle__lines { position: relative; width: 1.1rem; height: .7rem; }
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out), right .5s var(--ease-out);
}
.menu-toggle__lines::before { top: 0; right: 0; }
.menu-toggle__lines::after { top: calc(100% - 1.5px); right: 30%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top: calc(50% - .75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { top: calc(50% - .75px); right: 0; transform: rotate(-45deg); }

/* Pulsante del suono: le tre barrette ballano quando il suono è acceso */
.sound {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color .3s, background-color .3s, transform .5s var(--ease-spring);
}
.sound__icon { width: 1.35rem; height: 1.35rem; stroke-width: 1.6; overflow: visible; }
.sound__icon > path:first-child { fill: currentColor; fill-opacity: .14; }
.sound__bar {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(.3);
  opacity: .5;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.sound[aria-pressed="true"] { border-color: currentColor; }
.sound[aria-pressed="true"] .sound__bar { opacity: 1; animation: eq .9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bar:nth-child(3) { animation-duration: .7s; animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__bar:nth-child(4) { animation-duration: 1.1s; animation-delay: -.6s; }

/* Menu a tutto schermo: si apre a cerchio partendo dal pulsante */
.menu {
  --origin: calc(100% - var(--gutter) - 1.4rem) calc(var(--header-h) / 2);
  position: fixed;
  z-index: 45;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  background: var(--sage);
  clip-path: circle(0% at var(--origin));
  transition: clip-path .75s var(--ease-out);
}
.menu.is-open { clip-path: circle(150% at var(--origin)); }
.menu__nav { position: relative; z-index: 1; display: grid; gap: .15rem; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: fit-content;
  padding: .3rem 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 4vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-decoration: none;
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity .5s var(--ease-out), translate .8s var(--ease-out);
}
.menu.is-open .menu__link { opacity: 1; translate: 0 0; transition-delay: calc(.15s + var(--i, 0) * .06s); }
.menu__link:nth-child(2) { --i: 1; }
.menu__link:nth-child(3) { --i: 2; }
.menu__link:nth-child(4) { --i: 3; }
.menu__link:nth-child(5) { --i: 4; }
.menu__link:nth-child(6) { --i: 5; }
.menu__num {
  translate: 0 -.95em;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--sage-deep);
}
.menu__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-weight: 500;
}
.menu__foot a:not(.lang a) { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.menu__art {
  position: absolute;
  right: -2.5rem;
  bottom: 16%;
  width: 13rem;
  height: 13rem;
  color: rgba(255, 255, 255, .55);
  stroke-width: 1.2;
  rotate: -14deg;
  pointer-events: none;
}
.menu-open body { overflow: hidden; }

@media (min-width: 30em) {
  .brand__tag { display: block; }
}

@media (min-width: 64em) {
  .nav { display: flex; gap: clamp(1.1rem, 2.2vw, 2.3rem); margin-right: clamp(.75rem, 2vw, 2rem); }
  .site-header__end { gap: .9rem; }
  .site-header__end .lang { display: inline-flex; }
  .menu-toggle { display: none; }
  .brand__name { font-size: 1.6rem; }
}


/* 6. SEZIONI ========================================================== */

/* --- 6.1 Mattina: apertura ------------------------------------------ */
.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--sp-l)) 0 var(--sp-xl);
  background: var(--paper);
}
.hero__side { display: none; }
.hero__grid { display: grid; gap: var(--sp-l); }
.hero__text { position: relative; z-index: 4; }

.hero__title {
  margin: 0 0 var(--sp-m);
  font-family: var(--font-serif);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: .97;
  letter-spacing: -.032em;
}
.hero__line { display: block; width: fit-content; }
.hero__line--in { margin-left: .85em; }
.hero__line--in2 { margin-left: 1.55em; }
.hero__title em { font-style: italic; letter-spacing: -.02em; color: var(--sage-deep); }

.hero__lead { margin-bottom: var(--sp-m); font-size: clamp(1.12rem, .95rem + .5vw, 1.32rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--sp-m); }
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-size: .9rem;
  color: var(--fg-soft);
}
.hero__facts li { display: flex; align-items: center; gap: .5rem; }
.hero__facts strong { color: var(--fg); font-weight: 600; }

.hero__media { position: relative; padding: 3.25rem 0 3.5rem; }
.hero__field {
  position: absolute;
  z-index: 0;
  left: -14%;
  top: 9%;
  width: 96%;
  height: 90%;
  fill: var(--sage);
  stroke: none;
}
.hero__seeds { position: absolute; z-index: 1; inset: 0; color: rgba(255, 255, 255, .9); pointer-events: none; }
.hero__seeds svg {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  rotate: var(--r);
  stroke-width: 1.4;
  animation: drift 9s ease-in-out var(--d) infinite alternate;
}
.hero__arch { --rh: 1.3; z-index: 2; width: 80%; margin-left: auto; }
.hero__print { position: absolute; z-index: 3; left: -1%; top: 21%; width: 44%; max-width: 13.5rem; }
.hero__note { position: absolute; z-index: 3; left: 0; top: -.25rem; display: flex; align-items: flex-start; gap: .3rem; }
.hero__note .note__arrow { margin-top: .9rem; }

@media (min-width: 48em) {
  .hero__media { padding-inline: 6% 0; }
  .hero__arch { width: 72%; }
  .hero__print { left: 4%; }
}

@media (min-width: 64em) {
  .hero { min-height: 100vh; padding: calc(var(--header-h) + 2.25rem) 0 0; }
  .hero__side {
    display: block;
    position: absolute;
    left: calc(var(--gutter) * .32);
    top: 52%;
    margin: 0;
    writing-mode: vertical-rl;
    rotate: 180deg;
    translate: 0 -50%;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--fg-soft);
    opacity: .75;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
  .hero__text { padding-top: clamp(.5rem, 3vh, 2rem); }
  .hero__title { margin-right: -10vw; font-size: min(var(--step-5), 10.6vh); }
  .hero__lead,
  .hero__actions,
  .hero__facts { margin-left: clamp(2.5rem, 9vw - 3rem, 6rem); }
  .hero__lead { max-width: 27em; }
  .hero__media { padding: clamp(4rem, 11vh, 7rem) 0 0; margin-bottom: -6.5rem; }
  .hero__arch { width: 84%; }
  .hero__field { left: -22%; top: 18%; width: 104%; height: 88%; }
  .hero__print { left: -8%; top: auto; bottom: 11%; width: 40%; }
  .hero__note { left: -4%; top: 1.5rem; }
}

/* --- 6.2 Chi siamo --------------------------------------------------- */
.intro { position: relative; padding: var(--sp-xl) 0 var(--sp-2xl); background: var(--paper); }
.intro__kicker { margin-bottom: var(--sp-s); }
.intro__text {
  max-width: 21em;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -.014em;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: .95em;
  margin: 0 .06em 0 .14em;
  border-radius: var(--r-pill);
  vertical-align: -.1em;
  background: var(--sage);
  color: var(--ink);
  transition: transform .55s var(--ease-spring), background-color .4s;
}
.pill svg { width: .82em; height: .82em; stroke-width: 1.5; transition: transform .6s var(--ease-spring); }
.pill--terra { background: var(--sand); }
.pill--vino { background: #E2BFBF; }
.pill--fuoco { background: var(--apricot); }

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-l) var(--sp-m);
  margin-top: var(--sp-xl);
}
.number {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: var(--sp-s);
  border-top: 1px solid var(--rule);
}
.number:nth-child(even) { margin-top: var(--sp-l); }
.number__value {
  position: relative;
  width: fit-content;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 1.9rem + 4.6vw, 6.2rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
}
.number__value small { margin: 0 .1em; font-size: .3em; font-style: italic; letter-spacing: 0; vertical-align: .8em; }
.number__label { max-width: 15em; font-size: .92rem; line-height: 1.45; color: var(--fg-soft); }
.scribble {
  position: absolute;
  left: -48%;
  top: -24%;
  width: 196%;
  height: 150%;
  color: var(--raboso);
  stroke-width: 1.7;
  overflow: visible;
  pointer-events: none;
}

@media (min-width: 48em) {
  .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .number:nth-child(even) { margin-top: 0; }
  .number:nth-child(2) { margin-top: 4.5rem; }
  .number:nth-child(3) { margin-top: 1.5rem; }
  .number:nth-child(4) { margin-top: 6rem; }
}

@media (min-width: 64em) {
  .intro { padding-top: calc(var(--sp-xl) + 1rem); }
  .intro .wrap { position: relative; }
  .intro__kicker { position: absolute; left: 0; top: .95rem; margin: 0; }
  .intro__text { max-width: 20.5em; text-indent: 25%; }
}

/* --- 6.3 La cantina ------------------------------------------------ */
.cantina {
  --fg-soft: #4A433D;               /* più scuro: si legge meglio sulla salvia */
  position: relative;
  padding: var(--sp-xl) 0 var(--sp-2xl);
  background: var(--sage);
}
.edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(1.5rem, 4vw, 3.5rem);
  fill: var(--sage);
  stroke: none;
  pointer-events: none;
}
.edge--top { bottom: calc(100% - 1px); }

.cantina__head { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-l); }
.cantina__head .kicker { margin-bottom: 0; }
.cantina__title { margin-bottom: 0; }

.cantina__body { position: relative; display: grid; }
.cantina__media { position: relative; padding-top: 3.25rem; }
.cantina__note { position: absolute; z-index: 2; left: 3%; top: 0; display: flex; align-items: flex-start; gap: .3rem; }
.cantina__note .note__arrow { margin-top: .9rem; }
.cantina__shot { --rh: .62; }

/* La carta dei vini usa lo stesso cartoncino del menu, ruotato dall'altra parte */
.menu-card--wine { --rot: 1.6deg; width: min(92%, 30rem); margin: -3.5rem 0 0 auto; }
.menu-card__foot { margin: 0 0 2.1rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }

@media (min-width: 64em) {
  .cantina__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--sp-l);
    align-items: end;
  }
  .cantina__head .kicker { grid-column: 1 / -1; }
  .cantina__intro { padding-bottom: .55rem; }
  .cantina__body { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); align-items: start; }
  .cantina__shot { --rh: .5; }
  .cantina__note { left: 6%; }
  .menu-card--wine { width: auto; margin: 9.5rem 0 0 -6rem; }
}

/* --- 6.4 Pomeriggio: le camere -------------------------------------- */
.camere { position: relative; padding: 0 0 var(--sp-l); background: var(--paper-warm); }
.camere__grid { position: relative; display: grid; gap: var(--sp-l); }
.camere__media { position: relative; z-index: 2; margin-top: calc(-1 * var(--sp-xl)); }
.camere__shot { --rh: 1.28; width: 84%; }
/* due foto delle camere di oggi, come stampe appoggiate accanto all'arco */
.camere__prints { display: flex; justify-content: center; gap: 4%; margin-top: 1.25rem; }
.camere__print { width: 46%; max-width: 13rem; }
.camere__print--a { --rot: -4deg; }
.camere__print--b { --rot: 5deg; margin-top: 1.75rem; }
.camere__text { padding-top: var(--sp-xs); }
.camere__lead { margin-bottom: var(--sp-m); }

.features { display: grid; margin-bottom: var(--sp-l); }
.feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 0;
  background: radial-gradient(circle, var(--rule-strong) .9px, transparent 1.3px) 0 100% / 7px 3px repeat-x;
}
.feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  background: var(--sage-soft);
  color: var(--sage-deep);
  transition: transform .65s var(--ease-spring), border-radius .9s var(--ease-out), background-color .4s;
}
.feature__icon svg { width: 1.7rem; height: 1.7rem; stroke-width: 1.5; }

/* Scheda con i dettagli pratici della camera */
.facts {
  padding: 1.25rem 1.35rem .6rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r-l) var(--r-l) var(--r-l) .4rem;
}
.facts__title {
  margin-bottom: .35rem;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--note);
}
.facts__row {
  display: grid;
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .6rem 0;
}
.facts__row + .facts__row { border-top: 1px solid var(--rule); }
.facts dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.facts dd { font-size: .95rem; }
@media (min-width: 30em) {
  .facts__row { grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr); }
}

.motto {
  max-width: 21em;
  margin-top: var(--sp-l);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--accent);
  text-wrap: balance;
}
.motto::before { content: "“"; }
.motto::after { content: "”"; }

@media (min-width: 64em) {
  .camere__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr) minmax(0, .5fr);
    align-items: start;
  }
  .camere__media { grid-column: 1; margin-top: -10rem; position: sticky; top: calc(var(--header-h) + 2rem); }
  .camere__shot { width: 86%; }
  .camere__shot .shot__cap { padding-right: 52%; }
  .camere__prints { position: absolute; z-index: 3; inset: 0; display: block; margin: 0; pointer-events: none; }
  .camere__print { position: absolute; width: 40%; pointer-events: auto; }
  .camere__print--a { --rot: 5deg; right: -14%; top: 4%; }
  .camere__print--b { --rot: -4deg; right: -14%; top: 63%; margin: 0; }   /* bozza 15: sotto la foto del bagno */
  .camere__text { grid-column: 3; padding-top: var(--sp-l); }
}

/* --- 6.5 Le foto ---------------------------------------------------- */
.galleria { position: relative; padding: var(--sp-xl) 0 var(--sp-l); background: var(--paper-warm); }
.galleria__head { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-l); }
.galleria__head .kicker,
.galleria__head .h2 { margin-bottom: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(8.5rem, 30vw, 14rem);
  gap: clamp(.6rem, .4rem + 1vw, 1.1rem);
}
.gallery__item figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  border-radius: var(--r-m);
  background: var(--sand);
  box-shadow: var(--shadow-soft);
}
.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: scale 1.4s var(--ease-out);
}
.gallery__item figcaption {
  position: absolute;
  z-index: 1;
  left: .6rem;
  bottom: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .2rem .75rem .32rem;
  border-radius: var(--r-pill);
  background: rgba(251, 247, 240, .92);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--ink);
  transition: translate .6s var(--ease-out);
}
/* la foto grande ha la cima ad arco, come le altre cornici del sito */
.gallery__item--big { grid-column: span 2; grid-row: span 2; }
.gallery__item--big figure { border-radius: 50% 50% var(--r-m) var(--r-m) / 20% 20% var(--r-m) var(--r-m); }
.gallery__item--wide,
.gallery__item--long { grid-column: span 2; }

@media (min-width: 48em) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(10rem, 15vw, 14.5rem); }
}

@media (min-width: 64em) {
  .galleria__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--sp-l);
    align-items: end;
  }
  .galleria__head .kicker { grid-column: 1 / -1; }
  .galleria__note { margin-bottom: .6rem; }
}

/* --- 6.6 Tramonto --------------------------------------------------- */
.tramonto { position: relative; }
.tramonto__sky {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-xl);
  background: linear-gradient(180deg, var(--paper-warm) 0%, #EDD5B8 24%, #E8B78C 54%, #DA8C60 80%, #C96B4B 100%);
}
.tramonto__title { max-width: 15em; }
.tramonto__scene { position: relative; height: clamp(13rem, 32vw, 27rem); margin-top: var(--sp-m); }
.sun {
  --sun: .35;
  position: absolute;
  z-index: 0;
  left: 64%;
  bottom: 18%;
  width: clamp(7rem, 15vw, 13rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FFF1CC 0%, #FFD28E 38%, #F49C5C 78%, #EA814C 100%);
  box-shadow: 0 0 60px 18px rgba(255, 196, 120, .42), 0 0 170px 70px rgba(255, 160, 90, .22);
  transform: translate3d(-50%, calc((var(--sun) * 1.25 - .42) * 100%), 0);
  will-change: transform;
}
.sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFB27A, #E2633F 70%, #C9483A);
  opacity: calc(var(--sun) * 1.3 - .25);
}
.birds {
  position: absolute;
  left: 20%;
  top: 4%;
  width: clamp(4rem, 8vw, 7rem);
  color: rgba(59, 52, 47, .55);
  stroke-width: 1.4;
  animation: birds 16s ease-in-out infinite alternate;
}
.horizon { position: absolute; z-index: 1; left: -70%; bottom: -1px; width: 240%; height: 64%; stroke: none; }
.horizon__far { fill: #A44A40; }
.horizon__near { fill: var(--raboso); }
.horizon__posts { fill: none; stroke: var(--raboso); stroke-width: 4; stroke-linecap: butt; }
.horizon__wires { fill: none; stroke: var(--raboso); stroke-width: 1.4; }
.horizon__leaves { fill: var(--raboso); stroke: none; }

.tramonto__ground {
  padding: var(--sp-l) 0 var(--sp-2xl);
  background: linear-gradient(180deg, var(--raboso) 0%, var(--raboso-deep) 36%, var(--night) 100%);
}
.energy { display: grid; align-items: start; gap: var(--sp-l); }
.energy__item {
  display: grid;
  align-content: start;
  gap: .6rem;
  max-width: 26rem;
  padding-top: var(--sp-s);
  border-top: 1px solid var(--rule);
}
.energy__icon {
  width: 2.7rem;
  height: 2.7rem;
  color: var(--apricot);
  stroke-width: 1.4;
  transition: transform .9s var(--ease-spring);
}
.energy__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.1;
}
.energy__item p { color: var(--fg-soft); }
.energy__end { display: grid; gap: var(--sp-l); align-items: center; margin-top: var(--sp-xl); }
.energy__prints { position: relative; display: flex; align-items: flex-start; }
.energy__print { --rot: -4deg; width: min(56%, 15rem); }
.energy__print--b { --rot: 5deg; margin: 2.2rem 0 0 -9%; }
.energy__claim {
  max-width: 18em;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.016em;
}
.energy__claim em { font-style: italic; color: var(--apricot); }

@media (min-width: 48em) {
  .horizon { left: -20%; width: 140%; }
}

@media (min-width: 64em) {
  .horizon { left: 0; width: 100%; }
  .tramonto__title { margin-left: 8%; }
  .tramonto__sky .kicker { margin-left: 8%; }
  .energy {
    grid-template-columns: repeat(3, minmax(0, 21rem));
    column-gap: clamp(2rem, 5vw, 5rem);
    margin-left: 8%;
  }
  .energy__item:nth-child(2) { margin-top: 4.5rem; }
  .energy__item:nth-child(3) { margin-top: 1.75rem; }
  .energy__end {
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 6.6fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    margin-left: 8%;
  }
  .energy__prints { justify-self: end; width: min(100%, 27rem); }
  .energy__print { width: 58%; }
}

/* --- 6.7 Sera: la cucina -------------------------------------------- */
.cucina { position: relative; padding: var(--sp-xl) 0; background: var(--night); }
.cucina__grid { position: relative; display: grid; gap: var(--sp-xl); }

.duo { display: grid; gap: .08em; }
.duo__light { font-weight: 300; color: var(--fg-soft); }
.duo__bold { font-weight: 640; letter-spacing: -.034em; }
.cucina__lead { margin-bottom: var(--sp-m); }

.hours { display: grid; max-width: 24rem; }
.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}
.hours dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.hours dd {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.hours__row--days dd { font-size: var(--step-1); font-weight: 380; }
.hours__note {
  width: fit-content;
  margin-top: 1rem;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--note);
  transform: rotate(-2deg);
}

.cucina__media { position: relative; padding-top: 1.5rem; }
.cucina__panel {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 20%;
  left: 22%;
  right: calc(-1 * var(--gutter));
  border-radius: var(--r-l) 0 0 var(--r-l);
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255, 190, 150, .12), rgba(255, 190, 150, 0) 70%),
    var(--raboso);
}
.cucina__shot { --rh: 1.3; z-index: 1; width: 76%; margin-left: 4%; box-shadow: var(--shadow-dark); }
/* le bottiglie del vino: un cerchio grande appoggiato sull'angolo della foto */
.cucina__glass { z-index: 2; width: 58%; margin: -30% 0 0 auto; box-shadow: var(--shadow-dark); }

.menu-card {
  --rot: -1.4deg;
  position: relative;
  z-index: 3;
  max-width: 34rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(59, 52, 47, .16),
    inset 0 0 0 7px var(--card),
    inset 0 0 0 8px rgba(59, 52, 47, .1),
    var(--shadow-dark);
  transform: perspective(1000px) rotate(var(--rot)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease-out);
}
.menu-card__title {
  margin-bottom: .9rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.menu-card__list { display: grid; margin-bottom: 1.25rem; }
.menu-card .to-fill { margin-bottom: 1.6rem; }
.menu-card__list li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px dotted rgba(59, 52, 47, .3);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.menu-card__list li::before {
  content: "";
  flex: none;
  width: .85rem;
  height: .85rem;
  background: var(--sage-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13.5C3 7 7 3 13.5 2.5 13 9 9 13 2.5 13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13.5C3 7 7 3 13.5 2.5 13 9 9 13 2.5 13.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-card__list small { display: block; margin-top: .15rem; font-family: var(--font-sans); font-size: .82rem; letter-spacing: 0; color: var(--ink-soft); }
.menu-card__note { position: absolute; right: 1.4rem; bottom: .9rem; color: var(--raboso); }

@media (min-width: 64em) {
  .cucina__grid { grid-template-columns: minmax(0, 5fr) minmax(0, .8fr) minmax(0, 6fr); }
  .cucina__text { grid-column: 1; grid-row: 1; padding-top: var(--sp-m); }
  .cucina__media { grid-column: 3; grid-row: 1; align-self: start; margin-top: calc(-1 * var(--sp-xl)); }
  .cucina__glass { position: absolute; right: -4%; bottom: -36%; width: 58%; margin: 0; }
}

/* Il menu cambia ogni giorno: le foto dei piatti scorrono di lato.
   Col mouse ci sono le frecce (e si può trascinare), col dito si scorre. */
.piatti { margin-top: var(--sp-xl); }
.piatti__head { display: grid; gap: .6rem; max-width: 38rem; margin-bottom: var(--sp-m); }
.piatti__title {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.piatti__text { color: var(--fg-soft); }

.carousel { position: relative; }
/* (.carousel davanti serve a battere la regola generale ul[class] { padding: 0 }) */
.carousel .carousel__track {
  display: flex;
  gap: clamp(.75rem, .55rem + .9vw, 1.25rem);
  margin: 0 calc(-1 * var(--gutter));
  padding: .5rem var(--gutter) 1.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }
.carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; -webkit-user-select: none; user-select: none; }
.carousel__slide { flex: none; width: clamp(15rem, 74vw, 21rem); scroll-snap-align: start; }

.dish {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--r-m);
  background: var(--night-2);
  box-shadow: var(--shadow-dark);
}
.dish img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 1.4s var(--ease-out);
}
.dish__cap {
  position: absolute;
  z-index: 1;
  left: .6rem;
  bottom: .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .2rem .75rem .32rem;
  border-radius: var(--r-pill);
  background: rgba(251, 247, 240, .92);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--ink);
}

.carousel__arrow {
  position: absolute;
  z-index: 3;
  top: calc(50% - .45rem - 1.6rem);
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 240, .95);
  color: var(--ink);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-soft), scale .45s var(--ease-spring);
}
.carousel__arrow svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.9; }
.carousel__arrow--prev { left: -.6rem; }
.carousel__arrow--prev svg { rotate: 180deg; }
.carousel__arrow--next { right: -.6rem; }
.carousel__arrow:focus-visible { opacity: 1; pointer-events: auto; outline-color: var(--cream); }
.carousel__arrow:disabled { opacity: 0 !important; pointer-events: none !important; }

/* la barretta sotto le foto dice quanto manca alla fine */
.carousel__bar { position: relative; overflow: hidden; height: 2px; border-radius: 2px; background: var(--rule); }
.carousel__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--size, .35) * 100%);
  border-radius: inherit;
  background: var(--accent);
  translate: var(--shift, 0%) 0;
}
.carousel:not(.is-ready) .carousel__bar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .carousel__track { cursor: grab; }
  .carousel:hover .carousel__arrow,
  .carousel:focus-within .carousel__arrow { opacity: 1; pointer-events: auto; }
  .carousel__arrow:hover { scale: calc(1 + .08 * var(--motion)); }
  .dish:hover img { scale: calc(1 + .04 * var(--motion)); }
}
@media (hover: none) {
  .carousel__arrow { display: none; }
}

/* --- 6.8 Dicono di noi --------------------------------------------- */
.recensioni { position: relative; padding: var(--sp-xl) 0 var(--sp-2xl); background: var(--night); }
.recensioni__head { margin-bottom: var(--sp-l); }
.recensioni__head .h2 { max-width: 15em; margin-bottom: 0; }
.reviews { display: grid; gap: var(--sp-xl); }

.rating { display: grid; align-content: start; justify-items: start; gap: .7rem; }
.rating__value {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  font-weight: 300;
  line-height: .85;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums;
}
.rating__value small { margin-left: .1em; font-size: .26em; font-style: italic; letter-spacing: 0; color: var(--fg-soft); }
/* cinque stelle: sotto quelle spente, sopra quelle accese tagliate al 4,6 */
.stars { position: relative; line-height: 0; }
.stars__row { display: flex; gap: .3rem; color: rgba(185, 133, 53, .3); }
.stars__row--fill { position: absolute; inset: 0 auto 0 0; width: 93%; overflow: hidden; color: var(--gold); }
.stars svg { flex: none; width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: none; }
.rating__count { color: var(--fg-soft); }
.rating__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; font-weight: 500; }
.rating__link + .rating__link { margin-top: 0; }

.quotes { display: grid; gap: var(--sp-m); }
.quote {
  --rot: -1deg;
  display: grid;
  align-content: space-between;
  gap: 1.1rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(59, 52, 47, .14), var(--shadow-dark);
  transform: rotate(var(--rot));
  transition: transform .8s var(--ease-out);
}
.quote:nth-child(2) { --rot: 1.2deg; }
.quote:nth-child(3) { --rot: -.5deg; }
.quote__text { margin: 0; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.45; }
.quote__text::before {
  content: "“";
  display: block;
  height: .5em;
  margin-bottom: .35rem;
  font-size: 3.4em;
  line-height: 1;
  color: var(--raboso);
}
.quote__who { font-size: .85rem; color: var(--ink-soft); }
.quote__who a { text-decoration: none; }
.quote__date { display: block; }
.quotes__note { margin-top: var(--sp-m); font-size: .8rem; color: var(--fg-soft); }

@media (min-width: 64em) {
  .reviews { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); column-gap: var(--sp-l); }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .quote:nth-child(2) { margin-top: 3rem; }
  .quote:nth-child(3) { margin-top: 1.2rem; }
}

/* --- 6.9 Notte: prenota --------------------------------------------- */
.prenota {
  position: relative;
  padding: var(--sp-2xl) 0 var(--sp-xl);
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(255, 196, 140, .14), rgba(255, 196, 140, 0) 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 70%),
    var(--raboso);
}
.prenota__grid { display: grid; gap: var(--sp-l); }
.prenota__head .h2 { margin-bottom: 0; }
.prenota__side { display: contents; }
.prenota__lead { order: 1; }
.booking { order: 2; }
.direct { order: 3; }
.prenota .h2 em { color: var(--apricot); }

.booking {
  --pad: clamp(1.4rem, 3.4vw, 2.75rem);
  position: relative;
  padding: var(--pad);
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-dark);
}
.booking__kind { padding: 0; border: 0; min-width: 0; }
.booking__legend {
  padding: 0;
  margin-bottom: .9rem;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.15;
}
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.9rem;
  padding: .5rem 1.15rem .5rem .8rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .4s var(--ease-soft), color .4s var(--ease-soft), border-color .4s, transform .55s var(--ease-spring);
}
.chip svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; transition: transform .6s var(--ease-spring); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip.is-flash { animation: flash .9s var(--ease-out); }

/* La riga tratteggiata con le due tacche, come lo scontrino di un biglietto */
.ticket-rule {
  position: relative;
  height: 0;
  margin: 1.6rem calc(-1 * var(--pad));
  border-top: 2px dashed rgba(59, 52, 47, .2);
}
.ticket-rule::before,
.ticket-rule::after {
  content: "";
  position: absolute;
  top: -.85rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--raboso);
}
.ticket-rule::before { left: -.8rem; }
.ticket-rule::after { right: -.8rem; }

.fields { display: grid; gap: 1.1rem 1.4rem; margin-bottom: 1.1rem; }
.field { display: grid; gap: .25rem; }
.booking > .field { margin-bottom: 1.1rem; }
.field label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: .45rem 0 .5rem;
  border: 0;
  border-bottom: 1.5px solid rgba(59, 52, 47, .3);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.field select {
  padding-right: 1.8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%233B342F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .1rem center / 1.1rem no-repeat;
  cursor: pointer;
}
.field__hint { font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }
.field textarea { min-height: 4.6rem; line-height: 1.45; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(98, 88, 80, .62); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--raboso);
  box-shadow: 0 1.5px 0 0 var(--raboso);
}
.field input:user-invalid,
.field textarea:user-invalid { border-bottom-color: #B3261E; }
.booking__note {
  margin: .3rem 0 1.4rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.booking__note a { color: var(--raboso); font-weight: 500; text-underline-offset: .18em; }

.sent {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: var(--r-m);
  background: var(--sage-soft);
}
.sent:focus { outline: none; }
.sent:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sent__check { flex: none; width: 2.6rem; height: 2.6rem; color: var(--sage-deep); stroke-width: 1.6; }
.sent__check * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s var(--ease-soft) forwards; }
.sent__check path { animation-delay: .45s; }
.sent strong { display: block; font-family: var(--font-serif); font-size: var(--step-2); font-weight: 400; line-height: 1.15; }
.sent span { display: block; margin: .25rem 0 .6rem; color: var(--ink-soft); }
.sent__retry { display: block; width: fit-content; margin-bottom: .5rem; color: var(--raboso); font-weight: 600; text-underline-offset: .2em; }
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--raboso);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.direct { display: grid; align-content: start; gap: .3rem; }
.direct__title { margin-bottom: .3rem; color: var(--apricot); font-family: var(--font-hand); font-size: 1.75rem; line-height: 1; transform: rotate(-3deg); width: fit-content; }
.direct__phone {
  width: fit-content;
  padding-bottom: .08em;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: lining-nums;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .65s var(--ease-out);
}
.direct__link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  padding: .45rem 0;
  color: var(--fg-soft);
  text-decoration: none;
  transition: color .3s var(--ease-soft);
}
.direct__link .icon--go { width: 1rem; height: 1rem; opacity: 0; translate: -6px 4px; transition: opacity .35s, translate .55s var(--ease-spring); }

@media (min-width: 40em) {
  .fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .prenota__grid {
    grid-template-columns: minmax(0, 4.6fr) minmax(0, .5fr) minmax(0, 7fr);
    row-gap: var(--sp-l);
  }
  .prenota__head { grid-column: 1 / -1; }
  .prenota__side { display: grid; gap: var(--sp-l); align-content: start; grid-column: 1; grid-row: 2; padding-top: .5rem; }
  .booking { grid-column: 3; grid-row: 2; align-self: start; }
}

/* --- 6.10 Dove siamo ------------------------------------------------- */
.dove { position: relative; padding: var(--sp-2xl) 0 var(--sp-xl); background: var(--night); }
.dove__grid { display: grid; gap: var(--sp-xl); }
.dove__address { margin-bottom: var(--sp-s); font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.45; }
.dove__ev {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  margin-bottom: var(--sp-s);
  padding: .45rem .9rem .45rem .7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  font-size: .9rem;
  line-height: 1.35;
  color: var(--fg);
}
.dove__ev .icon { width: 1.5rem; height: 1.5rem; color: var(--apricot); stroke-width: 1.5; }
.dove__lead { margin-bottom: var(--sp-m); }
.dove__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.mapsketch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l) var(--r-l) var(--r-l) .5rem;
  background:
    radial-gradient(circle, rgba(238, 226, 205, .08) 1px, rgba(238, 226, 205, 0) 1.3px) 0 0 / 16px 16px,
    var(--night-2);
  box-shadow: inset 0 0 0 1px var(--line-dark), var(--shadow-dark);
}
.mapsketch__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapsketch__fields { fill: rgba(199, 204, 176, .05); stroke: rgba(238, 226, 205, .2); stroke-width: 1; }
.mapsketch__road { stroke: rgba(238, 226, 205, .5); stroke-width: 3; }
.mapsketch__road--small { stroke-width: 1.5; }
.mapsketch__route { stroke: var(--apricot); stroke-width: 2.2; stroke-dasharray: 3 7; animation: march 14s linear infinite; }
.mapsketch__north { stroke: var(--cream-soft); stroke-width: 1.4; }
.mapsketch__pin {
  position: absolute;
  left: 56%;
  top: 55%;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--apricot);
  translate: -50% -100%;
  animation: bob 2.8s var(--ease-soft) infinite alternate;
}
.mapsketch__pin svg { width: 100%; height: 100%; stroke-width: 1.8; fill: rgba(232, 183, 140, .16); }
.mapsketch__label { position: absolute; left: 61%; top: 33%; color: var(--apricot); font-size: 1.7rem; }
.mapsketch__cap {
  position: absolute;
  z-index: 2;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  padding: .7rem .8rem;
  border-radius: var(--r-m);
  background: rgba(28, 24, 21, .86);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.mapsketch__note { flex: 1 1 13rem; font-size: .78rem; line-height: 1.4; color: var(--cream-soft); }
.mapsketch__note a { color: var(--apricot); }
.mapsketch__frame { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; border: 0; background: var(--night-2); }
.mapsketch.is-live .mapsketch__cap,
.mapsketch.is-live .mapsketch__pin,
.mapsketch.is-live .mapsketch__label { visibility: hidden; }

@media (min-width: 64em) {
  .dove__grid { grid-template-columns: minmax(0, 6fr) minmax(0, .6fr) minmax(0, 5.4fr); align-items: start; }
  .dove__text { grid-column: 1; }
  .mapsketch { grid-column: 3; margin-top: 4.5rem; }
}

/* I posti vicini, con i puntini come in un orario dei treni */
.nearby {
  display: grid;
  gap: var(--sp-m);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-l);
  border-top: 1px solid var(--rule);
}
.nearby__title { margin-bottom: var(--sp-s); }
.nearby__lead {
  max-width: 24em;
  margin-bottom: .8rem;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--fg-soft);
}
.nearby__note { font-size: .8rem; color: var(--fg-soft); }
.nearby__list li { display: flex; align-items: baseline; gap: .7rem; padding: .5rem 0; break-inside: avoid; }
.nearby__place { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.2; }
.nearby__dots { flex: 1; min-width: 1.5rem; border-bottom: 1.5px dotted var(--rule-strong); translate: 0 -.3em; }
.nearby__km {
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent);
}

@media (min-width: 48em) {
  .nearby__list { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
}

@media (min-width: 64em) {
  .nearby { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--sp-l); }
}


/* --- 6.11 Schede: informativa privacy e cookie ------------------------ */
.sheet {
  width: min(100% - 2rem, 46rem);
  max-width: none;
  max-height: min(86vh, 54rem);
  max-height: min(86dvh, 54rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(28, 18, 12, .55);
  overflow: hidden;
}
.sheet[open] { animation: sheet-in .55s var(--ease-out); }
.sheet::backdrop {
  background: rgba(28, 24, 21, .55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: fade-in .4s ease;
}
.sheet__inner { display: flex; flex-direction: column; max-height: inherit; }
.sheet__head {
  position: relative;
  flex: none;
  padding: 1.5rem 4.75rem 1.1rem clamp(1.3rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.sheet__kicker {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sheet__title {
  margin-top: .35rem;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.sheet__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform .5s var(--ease-spring), border-color .3s;
}
.sheet__close svg { width: 1.2rem; height: 1.2rem; stroke-width: 1.7; }
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem clamp(1.3rem, 4vw, 2.4rem) 2.2rem;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.sheet__body h3 { margin: 1.6rem 0 .45rem; font-family: var(--font-serif); font-size: var(--step-1); font-weight: 400; line-height: 1.25; color: var(--ink); }
.sheet__body:focus { outline: none; }
.sheet__body p + p,
.sheet__body ul + p { margin-top: .8rem; }
.sheet__body ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.sheet__body li + li { margin-top: .55rem; }
.sheet__body strong { font-weight: 600; color: var(--ink); }
.sheet__body a { color: var(--raboso); text-underline-offset: .18em; }
.sheet__meta { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.1; color: var(--sage-deep); }
.sheet-open,
.sheet-open body { overflow: hidden; }

@media (max-width: 40em) {
  /* sul telefono la scheda sale dal basso */
  .sheet {
    width: 100%;
    margin: auto 0 0;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--r-l) var(--r-l) 0 0;
  }
  .sheet[open] { animation-name: sheet-up; }
}

/* senza JavaScript le due informative restano in fondo alla pagina, come testo normale */
html:not(.js) .sheet {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
html:not(.js) .sheet__close { display: none; }


/* 7. PIÈ DI PAGINA ==================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-xl);
  background: #151210;
}
.site-footer__moon {
  position: absolute;
  right: 8%;
  top: 2.25rem;
  width: 3.4rem;
  height: 3.4rem;
  color: var(--apricot);
  stroke-width: 1.3;
  opacity: .85;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-l) var(--sp-m);
  font-size: .95rem;
  color: var(--fg-soft);
}
.site-footer__col { display: grid; align-content: start; gap: .35rem; }
.site-footer__col--main { grid-column: 1 / -1; }
.site-footer__col .lang { margin-top: .6rem; }
.site-footer__legal { margin-top: .5rem; font-size: .85rem; line-height: 1.5; }
.site-footer__name {
  margin-bottom: .3rem;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--fg);
}
.site-footer__label {
  margin-bottom: .3rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
}
.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 2rem;
  margin-top: var(--sp-l);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  color: var(--fg-soft);
}
.site-footer__word {
  margin: var(--sp-s) 0 -.2em;
  font-family: var(--font-serif);
  font-size: clamp(5rem, 23.5vw, 22rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
  color: rgba(238, 226, 205, .07);
  user-select: none;
}

@media (min-width: 64em) {
  .site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__col--main { grid-column: auto; }
}


/* 8. ANIMAZIONI E MOVIMENTO =========================================== */

/* Comparsa durante lo scorrimento (solo con JavaScript attivo e movimento consentito) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    translate: 0 1.6rem;
    transition:
      opacity .9s var(--ease-out),
      translate 1.1s var(--ease-out),
      filter 1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal="blur"] { filter: blur(12px); translate: 0 .6rem; }
  .js [data-reveal="rise"] { translate: 0 3rem; }
  .js [data-reveal="rise"] .shot__media,
  .js [data-reveal="rise"] .print__photo { scale: 1.12; }
  .js [data-reveal].is-in { opacity: 1; translate: none; filter: none; }
  .js [data-reveal="rise"].is-in .shot__media,
  .js [data-reveal="rise"].is-in .print__photo { scale: 1; }

  /* Frecce, cerchi e schizzo si disegnano da soli */
  .js [data-reveal] .note__arrow *,
  .js [data-reveal] .scribble * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.3s var(--ease-soft) .55s;
  }
  .js [data-reveal] .note__arrow * + * { transition-delay: 1.45s; transition-duration: .5s; }
  .js [data-reveal].is-in .note__arrow *,
  .js [data-reveal].is-in .scribble * { stroke-dashoffset: 0; }

  /* Se lo script non parte entro pochi secondi, si mostra tutto comunque */
  .reveal-all [data-reveal] { opacity: 1 !important; translate: none !important; filter: none !important; }
  .reveal-all [data-reveal] * { stroke-dashoffset: 0 !important; scale: 1 !important; }
}

/* Effetti al passaggio del mouse (solo con mouse vero, non sui telefoni) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    color: var(--btn-fill-fg);
    border-color: var(--btn-fill);
    box-shadow: 0 18px 30px -16px rgba(40, 25, 15, .55);
    transform: translateY(calc(-2px * var(--motion)));
  }
  .btn--line:hover,
  .btn--cream:hover,
  .btn--small:hover { box-shadow: none; }
  .btn:hover::before { transform: translate3d(0, -30%, 0); }
  .btn:hover .btn__icon { transform: translateX(calc(4px * var(--motion))); }
  .btn:hover .btn__icon--lead { transform: rotate(calc(-12deg * var(--motion))) scale(1.08); }
  .btn:active { transform: scale(.97); }

  .nav__link:hover::after { transform: translateX(-50%) scale(1); }
  .lang a:hover { color: var(--fg); }
  .brand:hover .brand__mark { transform: rotate(calc(-18deg * var(--motion))) scale(1.08); }
  .menu-toggle:hover { border-color: currentColor; transform: rotate(calc(-8deg * var(--motion))); }
  .sound:hover { border-color: currentColor; transform: rotate(calc(-8deg * var(--motion))); }
  .sheet__close:hover { border-color: currentColor; transform: rotate(calc(90deg * var(--motion))); }

  .u-link:hover { background-position: 0 100%; background-size: 100% 1px; color: var(--fg); }

  .shot:hover .shot__media { transform: scale(calc(1 + .035 * var(--motion))); }
  .shot:hover .shot__tag { transform: translateX(calc(4px * var(--motion))); }
  .print:hover { --rot: -1.5deg; box-shadow: var(--shadow-lift); }

  .pill:hover { background-color: var(--sage-soft); transform: scale(calc(1 + .12 * var(--motion))) rotate(calc(-4deg * var(--motion))); }
  .pill:hover svg { transform: rotate(calc(18deg * var(--motion))); }

  .gallery__item:hover img { scale: calc(1 + .05 * var(--motion)); }
  .gallery__item:hover figcaption { translate: calc(5px * var(--motion)) 0; }

  .feature:hover .feature__icon {
    background: var(--sage);
    border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%;
    transform: rotate(calc(-10deg * var(--motion))) scale(calc(1 + .08 * var(--motion)));
  }

  .energy__item:hover .energy__icon { transform: rotate(calc(28deg * var(--motion))) scale(calc(1 + .08 * var(--motion))); }

  .menu-card:hover { --rot: 0deg; }
  .quote:hover { --rot: 0deg; }

  .chip:hover { border-color: var(--ink); transform: translateY(calc(-2px * var(--motion))); }
  .chip:hover svg { transform: rotate(calc(-10deg * var(--motion))) scale(1.1); }

  .direct__phone:hover { background-size: 100% 1.5px; }
  .direct__link:hover { color: var(--fg); }
  .direct__link:hover .icon--go { opacity: 1; translate: 0 0; }
}

/* Movimenti continui, lenti */
@keyframes drift { to { translate: 0 calc(-9px * var(--motion)); } }
@keyframes birds { to { translate: calc(36px * var(--motion)) calc(-10px * var(--motion)); } }
@keyframes march { to { stroke-dashoffset: -100; } }
@keyframes bob { to { translate: -50% calc(-100% - 6px * var(--motion)); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(1.5rem) scale(.985); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes flash {
  0% { transform: scale(1); }
  35% { transform: scale(calc(1 + .08 * var(--motion))); }
  100% { transform: scale(1); }
}

/* Chi ha chiesto meno movimento vede tutto subito, senza animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .menu { transition: none; }
}

@media print {
  .site-header, .menu, .hero__seeds, .birds, .sound, .sheet { display: none !important; }
  [data-reveal] { opacity: 1 !important; translate: none !important; filter: none !important; }
}


/* ═══ 9. LE PAGINE DEL TELEFONO (dalla bozza 10) ══════════════════════════
   Pagine interne, riquadri della home, barra in basso, passaggio tra le pagine. */

/* Passaggio morbido da una pagina all'altra (Chrome, Edge e Safari recenti) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: intestazione; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .38s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
#contenuto:focus { outline: none; }

/* Mentre arriva la pagina nuova: una linea sottile in alto */
.is-loading { cursor: progress; }
.is-loading::before {
  content: "";
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--raboso);
  transform-origin: 0 50%;
  animation: loading 1.2s var(--ease-out) forwards;
}
@keyframes loading { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

/* Con il menu del telefono aperto l'intestazione prende i colori chiari del menu */
.menu-open .site-header {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --accent: var(--sage-deep);
  --rule: var(--line);
  --rule-strong: rgba(59, 52, 47, .32);
  --chip-bg: rgba(59, 52, 47, .08);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* La voce del menu della pagina in cui sei */
.nav__link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.menu__link[aria-current="page"] { font-style: italic; color: var(--sage-deep); }

/* Le pagine interne partono sotto l'intestazione */
.page:not(.page--home) #contenuto > section:first-child { padding-top: calc(var(--header-h) + var(--sp-l)); }
.page--camere .camere__media,
.page--cucina .cucina__media { margin-top: 0; }   /* da sole non devono salire sotto l'intestazione */

/* Home del telefono: le porte verso le altre pagine */
.porte { position: relative; padding: var(--sp-xl) 0; background: var(--paper-warm); }
.porte__head { margin-bottom: var(--sp-l); }
.porte__head .h2 { margin-bottom: 0; }
.porte__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, .8rem + 1.6vw, 2rem) clamp(.75rem, .5rem + 1.2vw, 1.5rem);
}
.porta { display: grid; gap: .75rem; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.porta__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  background: var(--sand);
  box-shadow: var(--shadow-soft);
  transition: scale .4s var(--ease-out);
}
.porta__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: scale 1.2s var(--ease-out);
}
.porta__text { display: grid; gap: .2rem; }
.porta__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.15;
}
.porta__title svg { flex: none; width: 1.1rem; height: 1.1rem; stroke-width: 1.8; transition: translate .5s var(--ease-out); }
.porta__sub { font-size: .85rem; line-height: 1.4; color: var(--ink-soft); }
.porta:active .porta__img { scale: .98; }
@media (min-width: 64em) {
  .porte__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .porta:hover .porta__img img { scale: calc(1 + .05 * var(--motion)); }
  .porta:hover .porta__title svg { translate: calc(4px * var(--motion)) 0; }
}

/* Home sul telefono: le recensioni scorrono di lato, una alla volta */
@media screen and (max-width: 63.99em) {
  .reviews { grid-template-columns: minmax(0, 1fr); }   /* la colonna non si allarga per far posto alla fila */
  .recensioni .quotes {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin: 0 calc(-1 * var(--gutter));
    padding: .9rem var(--gutter) 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .recensioni .quotes::-webkit-scrollbar { display: none; }
  .recensioni .quote { flex: none; width: min(84vw, 23rem); scroll-snap-align: start; }
  .recensioni .quotes__note { margin-top: .5rem; }
}

/* Versione 17: niente barra fissa in basso sul telefono (copriva il pulsante di Netlify e i contenuti). */
@media screen and (max-width: 63.99em) {
  .site-header__end .btn--small { display: none; }
}


/* ═══ 10. COMPUTER E TELEFONO (bozza 11) ══════════════════════════════════
   Sul computer la home è la pagina unica della bozza 9, con tutte le sezioni.
   Sul telefono la stessa home mostra solo l'inizio, i riquadri e le recensioni:
   il resto sta nelle pagine (camere, cucina, vino e azienda, dove siamo, prenota).
   Il confine (64em, cioè 1024 pixel) è lo stesso del menu e di main.js.
   In stampa si vede la pagina unica, come sul computer. */
@media screen and (max-width: 63.99em) {
  .solo-computer { display: none !important; }
}
@media print, screen and (min-width: 64em) {
  .solo-telefono { display: none !important; }
}


/* ═══ 11. IL NUOVO ORDINE (bozza 12) ═════════════════════════════════════
   Sul computer: la cantina, le foto, il tramonto, le camere, la cucina,
   le recensioni, prenota e in fondo dove siamo (bozza 13). Dove cambia il colore di fondo c'è un'onda come quella
   della cantina; sul telefono le sezioni stanno in pagine diverse e le onde non servono. */
.edge--computer { display: none; }
.edge--notte { fill: var(--night); }
.edge--cipria { fill: var(--paper-warm); }
.edge--flip { transform: scaleX(-1); }
@media screen and (min-width: 64em) {
  .edge--computer { display: block; }
  .cantina { padding-bottom: var(--sp-xl); }   /* sotto la cantina non salgono più le camere */
  .camere { padding-top: var(--sp-xl); }       /* dopo il tramonto le camere partono pulite */
  .camere__media { margin-top: 0; }
  .cucina__media { margin-top: 0; }            /* la foto della sala non tocca l'onda */
}


/* ═══ 12. SCRITTE A MANO (bozza 13) ══════════════════════════════════════
   Nel carattere scritto a mano alcune lettere escono dal loro riquadro (il punto
   di domanda, le code delle lettere). Safari sul telefono taglia quello che esce
   dal riquadro di un elemento ruotato o in movimento: un po' di spazio in più
   intorno al testo, compensato col margine, così non si sposta niente. */
.ask__text {
  padding: .12em .3em .12em .06em;
  margin: -.12em -.3em -.12em -.06em;
}


/* ═══ 13. SCHERMI MOLTO LARGHI (bozza 16) ════════════════════════════════
   Fino a 1440 pixel di larghezza non cambia niente. Su schermi più larghi
   (un iMac da 27", un monitor grande, oppure lo zoom del browser rimpicciolito)
   la misura di base cresce insieme allo schermo: 16 px a 1440, 24 px a 2160,
   al massimo 25,6 px (da 2304 pixel in su). Tutto ciò che è in rem cresce con
   lei (testi, spazi, larghezza della pagina): la pagina occupa sempre la stessa
   parte dello schermo, come a 1440. */
@media screen and (min-width: 90em) {
  html { font-size: min(calc(100vw / 90), 160%); }
}