/* =============================================================================
   TREBISONDA — design system
   Ogni token e ogni componente deriva da una fotografia reale del locale.
   Vedi docs/trebisonda-visual-dna.md (le fonti sono citate nei commenti).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
/* Il carattere del marchio e dei titoli (Riley Font Co.): solo maiuscole, senza lettere accentate.
   I glifi mancanti (à è é ì ò ù € « » – —) li disegna Cinzel, il carattere successivo nella pila. */
@font-face {
  font-family: "RFC Vintage Apothecary";
  src: url("../fonts/rfc-vintage-apothecary.woff2") format("woff2"), url("../fonts/rfc-vintage-apothecary.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Caratteri del testo e delle lavagne, serviti dal sito (non da Google): licenza SIL Open Font License */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cinzel-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cinzel-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sofia-sans-extra-condensed-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sofia-sans-extra-condensed-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colore — valori misurati sulle foto (mediane per banda di tinta) */
  --c-notte: #150D0E;          /* neri delle foto notturne */
  --c-notte-2: #1E1416;
  --c-notte-3: #2A1D1F;
  --c-ferro: #252429;          /* telaio nero della lunetta */
  --c-gesso: #E8E6DE;          /* scritte a gesso sulle lavagne */
  --c-pietra: #E6E2DC;         /* conci del portale */
  --c-carta: #EFE5D0;          /* carte nautiche / pergamena del simbolo, schiarita */
  --c-carta-2: #E6D7B9;
  --c-pergamena: #C8A162;      /* pergamena del simbolo */
  --c-azzurro: #9BB5CB;        /* pareti illuminate — COLORE PRINCIPALE */
  --c-azzurro-giorno: #D2DCDF; /* parete alla luce del giorno */
  --c-azzurro-medio: #5A80A2;
  --c-azzurro-notte: #2A4460;  /* pareti in ombra */
  --c-lavagna: #893C1C;        /* lavagne del menu */
  --c-lavagna-scura: #652C19;
  --c-cotto: #824C2C;          /* pavimento */
  --c-vinaccia: #560908;       /* inchiostro del simbolo */
  --c-ambra: #DAB758;          /* fiamme delle lanterne */
  --c-ottone: #CAA371;         /* lanterne e lampade d'ottone */
  --c-magenta: #AB3E4E;        /* luce proiettata sulla facciata (solo bagliori) */
  --c-magenta-scuro: #661428;

  /* Tipografia — tre voci reali del locale */
  --f-insegna: "RFC Vintage Apothecary", "Cinzel", "Trajan Pro", Georgia, serif; /* marchio, insegna, titoli */
  --f-titoli: var(--f-insegna);
  --f-testo: "Newsreader", Georgia, "Times New Roman", serif;                  /* carte e stampe */
  --f-gesso: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; /* lavagne */

  --t-nome: clamp(2.9rem, 1.6rem + 5.6vw, 7rem);
  --t-h1: clamp(2.1rem, 1.4rem + 2.8vw, 4.1rem);
  --t-h2: clamp(1.75rem, 1.25rem + 1.9vw, 3.1rem);
  --t-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  --t-lead: clamp(1.2rem, 1.06rem + 0.6vw, 1.62rem);
  --t-body: clamp(1.04rem, 0.99rem + 0.22vw, 1.17rem);
  --t-small: 1.1rem;
  --t-label: clamp(1.04rem, 0.98rem + 0.2vw, 1.2rem);
  --t-micro: 1.02rem;
  --t-voce: clamp(1.22rem, 1.06rem + 0.62vw, 1.6rem);

  /* Spazi — base 4 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 11rem;
  --sezione: clamp(5rem, 3rem + 8vw, 11rem);
  --margine: clamp(1.25rem, 0.6rem + 3.6vw, 5rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --contenitore: 90rem;
  --testata-h: 4.25rem;

  /* Bordi e luce (niente ombre grigie: la profondita' e' luce) */
  --filo: 1px;
  --ombra-carta: 0 1.5rem 2.5rem -1.25rem rgb(70 38 18 / 0.45), 0 0.3rem 0.6rem -0.2rem rgb(70 38 18 / 0.25);

  /* Movimento: porte che si aprono, luce che si accende */
  --ease-porta: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-luce: cubic-bezier(0.4, 0, 0.2, 1);
  --d-1: 200ms; --d-2: 350ms; --d-3: 700ms; --d-4: 1100ms;
}

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

html {
  /* misura base fluida: tutto il sito e' in rem, quindi testi, spazi e contenitore crescono insieme.
     ~16 px su telefono, ~18,4 px a 1440 px, ~19,7 px a 2048 px (es. 1440p al 125%), mai sotto la scelta dell'utente */
  font-size: clamp(100%, 0.964rem + 0.2066vw, 1.3rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata-h) + 1rem);
  background: var(--c-notte);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--c-notte);
  color: var(--c-gesso);
  font-family: var(--f-testo);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture, video { display: block; max-width: 100%; }

/* la selezione del testo e la barra di scorrimento nei colori del locale */
::selection { background: var(--c-ambra); color: var(--c-notte); }
html { scrollbar-color: color-mix(in oklab, var(--c-ottone) 75%, var(--c-notte)) var(--c-notte); }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--f-titoli);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  font-synthesis: none;
}

p, li, dd { text-wrap: pretty; }

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

em, i { font-style: italic; }

::selection { background: var(--c-ambra); color: var(--c-notte); }

:focus-visible {
  outline: 2px solid var(--focus, var(--c-ambra));
  outline-offset: 3px;
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Salta al contenuto — un'etichetta di gesso */
.salta {
  position: fixed;
  z-index: 100;
  top: 0.75rem; left: 0.75rem;
  padding: 0.8em 1.2em;
  background: var(--c-lavagna);
  color: var(--c-gesso);
  font: 600 var(--t-label)/1 var(--f-gesso);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--d-2) var(--ease-porta);
}
.salta:focus-visible { translate: 0 0; outline-color: var(--c-gesso); }

/* -----------------------------------------------------------------------------
   3. SUPERFICI — ogni sezione e' una superficie reale del locale
   -------------------------------------------------------------------------- */
.superficie--notte {
  --bg: var(--c-notte);
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 74%, var(--c-notte));
  --linea: color-mix(in oklab, var(--c-ottone) 34%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-ottone) 70%, transparent);
  --accento: var(--c-ambra);
  --focus: var(--c-ambra);
  --segno: var(--c-ottone);
  color-scheme: dark;
}
.superficie--muro {
  --bg: var(--c-azzurro);
  --fg: var(--c-notte);
  --fg-2: color-mix(in oklab, var(--c-notte) 78%, var(--c-azzurro));
  --linea: color-mix(in oklab, var(--c-notte) 26%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-notte) 60%, transparent);
  --accento: var(--c-vinaccia);
  --focus: var(--c-vinaccia);
  --segno: var(--c-vinaccia);
  color-scheme: light;
}
.superficie--lavagna {
  --bg: var(--c-lavagna);
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 86%, var(--c-lavagna));
  --linea: color-mix(in oklab, var(--c-gesso) 30%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-gesso) 62%, transparent);
  --accento: var(--c-gesso);
  --focus: var(--c-gesso);
  --segno: var(--c-gesso);
  color-scheme: dark;
}
.superficie--carta {
  --bg: var(--c-carta);
  --fg: var(--c-notte);
  --fg-2: color-mix(in oklab, var(--c-notte) 76%, var(--c-carta));
  --linea: color-mix(in oklab, var(--c-vinaccia) 24%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-vinaccia) 60%, transparent);
  --accento: var(--c-vinaccia);
  --focus: var(--c-lavagna);
  --segno: var(--c-vinaccia);
  color-scheme: light;
}
.superficie--giorno {
  --bg: var(--c-azzurro-giorno);
  --fg: var(--c-notte);
  --fg-2: color-mix(in oklab, var(--c-notte) 78%, var(--c-azzurro-giorno));
  --linea: color-mix(in oklab, var(--c-azzurro-notte) 30%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-azzurro-notte) 70%, transparent);
  --accento: var(--c-lavagna);
  --focus: var(--c-lavagna);
  --segno: var(--c-azzurro-notte);
  color-scheme: light;
}
.superficie--crepuscolo {
  --bg: var(--c-azzurro-notte);
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 80%, var(--c-azzurro-notte));
  --linea: color-mix(in oklab, var(--c-azzurro) 34%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-azzurro) 70%, transparent);
  --accento: var(--c-ambra);
  --focus: var(--c-ambra);
  --segno: var(--c-azzurro);
  color-scheme: dark;
}

[class*="superficie--"] {
  position: relative;
  background-color: var(--bg);
  color: var(--fg);
  isolation: isolate;
}

/* Grana di gesso + aloni di cancellatura (lavagne del menu) */
.superficie--lavagna {
  background-image:
    radial-gradient(ellipse 48% 32% at 22% 28%, rgb(255 236 222 / 0.07), transparent 70%),
    radial-gradient(ellipse 40% 30% at 78% 74%, rgb(255 236 222 / 0.05), transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 55%, rgb(40 12 4 / 0.32)),
    url("../img/brand/grana-gesso.webp");
  background-size: auto, auto, auto, 220px 220px;
}
/* Fibra della carta */
.superficie--carta {
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 62%, rgb(150 100 40 / 0.12)),
    url("../img/brand/grana-carta.webp");
  background-size: auto, 220px 220px;
}
/* Crepuscolo: dall'azzurro in ombra alla notte, con il rosa del cielo in fondo alla via */
.superficie--crepuscolo {
  background-image:
    radial-gradient(ellipse 70% 38% at 70% 18%, rgb(193 104 133 / 0.20), transparent 70%),
    linear-gradient(180deg, var(--c-azzurro-notte) 0%, #1A2638 46%, var(--c-notte) 100%);
}

/* Lossodromie: la rete di linee delle carte nautiche sotto il vetro */
.lossodromie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lossodromie-colore, var(--fg));
  opacity: var(--lossodromie-opacita, 0.07);
  -webkit-mask: url("../img/brand/lossodromie.svg") var(--lossodromie-pos, 50% 50%) / var(--lossodromie-size, cover) no-repeat;
  mask: url("../img/brand/lossodromie.svg") var(--lossodromie-pos, 50% 50%) / var(--lossodromie-size, cover) no-repeat;
  pointer-events: none;
}

/* Sul muro azzurro: le linee della carta nautica del bancone, leggere e solo in un angolo */
.superficie--muro.lossodromie, .superficie--giorno.lossodromie {
  --lossodromie-colore: var(--c-azzurro-notte);
  --lossodromie-opacita: 0.13;
  --lossodromie-size: max(120%, 90rem) auto;
  --lossodromie-pos: 100% 0%;
}
.superficie--muro.lossodromie::before, .superficie--giorno.lossodromie::before {
  -webkit-mask:
    url("../img/brand/lossodromie.svg") var(--lossodromie-pos) / var(--lossodromie-size) no-repeat,
    radial-gradient(ellipse 55% 75% at 100% 0%, #000 0%, rgb(0 0 0 / 0.45) 45%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask:
    url("../img/brand/lossodromie.svg") var(--lossodromie-pos) / var(--lossodromie-size) no-repeat,
    radial-gradient(ellipse 55% 75% at 100% 0%, #000 0%, rgb(0 0 0 / 0.45) 45%, transparent 80%);
  mask-composite: intersect;
}
.superficie--giorno.lossodromie { --lossodromie-opacita: 0.1; }
.superficie--carta.lossodromie.sezione--stretta { --lossodromie-pos: 15% 50%; }

/* Bordi di sezione presi dagli oggetti del locale */
/* la carta: il bordo graduato delle carte nautiche sotto il vetro del bancone */
.sezione.superficie--carta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("../img/brand/graduazione.svg") 0 0 / auto 14px repeat-x,
    url("../img/brand/graduazione.svg") 0 100% / auto 14px repeat-x;
  opacity: 0.5;
  pointer-events: none;
}
/* la lavagna: la cornice di legno delle lavagne del menu, con un velo di gesso sotto il listello */
.sezione.superficie--lavagna::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #24110a, #4b2716 40%, #3a1d10 70%, #24110a) 0 0 / 100% 12px no-repeat,
    linear-gradient(180deg, rgb(232 230 222 / 0.16), transparent) 0 12px / 100% 3px no-repeat,
    linear-gradient(0deg, #24110a, #4b2716 40%, #3a1d10 70%, #24110a) 0 100% / 100% 12px no-repeat,
    linear-gradient(0deg, rgb(232 230 222 / 0.12), transparent) 0 calc(100% - 12px) / 100% 3px no-repeat;
  pointer-events: none;
}

/* Bugnato: i corsi di pietra della facciata */
.bugnato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/brand/bugnato.svg") 50% 0 / auto clamp(140px, 18vh, 184px) repeat;
  opacity: var(--bugnato-opacita, 0.55);
  pointer-events: none;
}
/* Nelle sezioni notte: i corsi di pietra della facciata a filo d'ottone sottile, che sfumano verso il basso */
.sezione.superficie--notte.bugnato::after {
  background: var(--c-ottone);
  -webkit-mask:
    url("../img/brand/bugnato.svg") 50% 0 / auto 176px repeat,
    linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 35%, transparent 80%);
  -webkit-mask-composite: source-in;
  mask:
    url("../img/brand/bugnato.svg") 50% 0 / auto 176px repeat,
    linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 35%, transparent 80%);
  mask-composite: intersect;
  opacity: 0.2;
}

/* -----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

.sezione { padding-block: var(--sezione); overflow-x: clip; }
.sezione--stretta { padding-block: calc(var(--sezione) * 0.66); }

.griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-7);
}
.griglia > * { grid-column: 1 / -1; }

.misura-media { max-width: 44ch; }
.misura-larga { max-width: 60ch; }
.pila > * + * { margin-top: var(--pila, 1.1em); }

/* -----------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.etichetta {
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.titolo-1 { font-size: var(--t-h1); line-height: 1; }
.titolo-2 { font-size: var(--t-h2); }
.titolo-3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.12; }
.titolo-1 em, .titolo-2 em, .titolo-3 em { font-style: normal; }

.attacco {
  font-size: var(--t-lead);
  line-height: 1.48;
}

.testo-2 { color: var(--fg-2); }

/* L'insegna: la lunetta d'ingresso, tre righe centrate (piccola / grande / piccola) */
.insegna {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--f-insegna);
  font-weight: 400;
  line-height: 1;
  text-wrap: nowrap;
}
.insegna__riga {
  display: block;
  font-size: var(--insegna-riga, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  margin-right: -0.32em; /* compensa il tracking per un centraggio ottico */
  text-transform: uppercase;
}
.insegna__nome {
  display: block;
  font-size: var(--insegna-nome, var(--t-nome));
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  margin-block: 0.18em 0.22em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   6. COMPONENTI DI INTERAZIONE: freccia di rotta, link, bottoni
   -------------------------------------------------------------------------- */
/* La freccia di rotta: lossodromia con origine tonda (terminale del Segno) e punta aperta */
.freccia {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.9em;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  transition: width var(--d-3) var(--ease-porta), margin-right var(--d-3) var(--ease-porta);
}
.freccia::before {
  content: "";
  position: absolute;
  left: -2px; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.freccia::after {
  content: "";
  position: absolute;
  right: 0.5px; top: -3.5px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  rotate: 45deg;
}
.freccia--su { rotate: -90deg; width: 1.4em; }

.rotta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding-block: 0.4em;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-3) var(--ease-porta), color var(--d-2);
}
.rotta-link:hover { background-size: 100% 1px; color: var(--accento); }
/* la freccia si allunga senza allargare il pulsante (altrimenti spinge i link vicini) */
.rotta-link:hover .freccia, .btn:hover .freccia { width: 2.6em; margin-right: -0.7em; }

/* Bottone "lavagna": rettangolo vivo con il filetto interno della cornice */
.btn {
  --b-bg: var(--c-lavagna);
  --b-fg: var(--c-gesso);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.95em;
  min-height: 3.25rem;
  padding: 1.05em 1.6em 1em 1.7em;
  border: 0;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 620;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-2) var(--ease-luce), color var(--d-2);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in oklab, var(--b-fg) 32%, transparent);
  pointer-events: none;
  transition: inset var(--d-2) var(--ease-porta), border-color var(--d-2);
}
.btn:hover { --b-bg: var(--c-lavagna-scura); }
.btn:hover::before { inset: 3px; border-color: color-mix(in oklab, var(--b-fg) 64%, transparent); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline-color: var(--focus, var(--c-ambra)); }

/* Variante gesso: contorno a gesso, per stare sopra una lavagna o di notte */
.btn--gesso {
  --b-bg: transparent;
  --b-fg: var(--fg);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--b-fg) 55%, transparent);
}
.btn--gesso::before { inset: 4px; border-color: color-mix(in oklab, var(--b-fg) 18%, transparent); }
.btn--gesso:hover { --b-bg: color-mix(in oklab, var(--fg) 10%, transparent); }

/* Variante inchiostro: su carta e sul muro azzurro */
.btn--inchiostro { --b-bg: var(--c-vinaccia); --b-fg: var(--c-carta); }
.btn--inchiostro:hover { --b-bg: #3E0605; }

.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}


/* -----------------------------------------------------------------------------
   7. FOTOGRAFIE — si incorniciano, non si filtrano
   -------------------------------------------------------------------------- */
.foto {
  position: relative;
  overflow: hidden;
  margin: 0;
  background-color: var(--ph, var(--c-notte-3));
  aspect-ratio: var(--ar, auto);
}
.foto picture { height: 100%; }
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: scale 1.2s var(--ease-porta), filter 1.2s var(--ease-luce), opacity 0.9s var(--ease-luce);
}

/* Segnaposto di caricamento: colore dominante + Segno in filigrana */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14%;
  max-width: 3.5rem;
  aspect-ratio: 148 / 210;
  height: auto;
  background: var(--c-gesso);
  -webkit-mask: url("../img/brand/segno.svg") center / contain no-repeat;
  mask: url("../img/brand/segno.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--d-3);
  pointer-events: none;
}
.foto-pronta .foto:has(img[loading="lazy"]:not(.is-caricata))::after { opacity: 0.14; }
.foto-pronta .foto img[loading="lazy"]:not(.is-caricata) { opacity: 0; }

/* Accensione: la luce sale quando ci si avvicina */
.foto--accesa img { filter: brightness(0.93) saturate(0.98); }
a:hover .foto--accesa img, .foto--accesa:hover img { scale: 1.035; filter: brightness(1.03) saturate(1.02); }

/* Didascalia */
.didascalia {
  display: flex;
  gap: 0.75em;
  align-items: baseline;
  margin-top: 0.9rem;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--fg-2);
}
/* -----------------------------------------------------------------------------
   8. TESTATA (header)
   -------------------------------------------------------------------------- */
.testata {
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 74%, var(--c-notte));
  --linea: color-mix(in oklab, var(--c-ottone) 34%, transparent);
  --linea-forte: color-mix(in oklab, var(--c-ottone) 72%, transparent);
  --bg: var(--c-notte);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--fg);
  view-transition-name: testata;
  transition: background-color var(--d-3) var(--ease-luce), box-shadow var(--d-3);
}
.testata--solida {
  background: color-mix(in oklab, var(--c-notte) 93%, transparent);
  box-shadow: 0 1px 0 var(--linea);
}
.testata__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-5);
  height: var(--testata-h);
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

/* Il marchio: il Segno e le righe dell'insegna, nome grande e "Vineria informale" piccola */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg);
  text-decoration: none;
}
.marchio__segno { width: auto; height: 2.05rem; color: var(--c-ottone); transition: color var(--d-2); }
.marchio__testo { display: grid; gap: 0.32rem; line-height: 1; }
.marchio__nome {
  font-family: var(--f-insegna);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.marchio__riga {
  font-family: var(--f-insegna);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.marchio:hover .marchio__segno { color: var(--c-ambra); }
.testata .marchio { grid-column: 1; grid-row: 1; justify-self: start; }

.testata__nav, .testata__info { display: none; }
.testata__nav ul { display: flex; gap: clamp(1.1rem, 0.2rem + 1.5vw, 2.2rem); }
.testata__nav a {
  position: relative;
  display: block;
  padding-block: 0.6rem;
  font-family: var(--f-gesso);
  font-size: 1.05rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-2);
  transition: color var(--d-2);
}
.testata__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.3rem;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale var(--d-3) var(--ease-porta);
}
.testata__nav a:hover { color: var(--fg); }
.testata__nav a:hover::after { scale: 1 1; }
.testata__nav a[aria-current="page"] { color: var(--fg); }
.testata__nav a[aria-current="page"]::after { scale: 1 1; background: var(--c-ambra); }

/* A destra: indirizzo e stato di apertura, poi il bottone per le indicazioni */
.testata__info { align-items: center; gap: var(--s-5); }
.testata__dati { display: grid; justify-items: end; gap: 0.3rem; text-align: right; }
.testata__via {
  white-space: nowrap;
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-2);
  transition: color var(--d-2);
}
.testata__via:hover { color: var(--fg); }
.testata .stato { gap: 0.5rem; font-size: 1rem; letter-spacing: 0.1em; white-space: nowrap; }
.btn--piccolo { min-height: 2.6rem; padding: 0.8em 1.1em 0.75em 1.2em; gap: 0.75em; }

/* Sopra la foto (testata trasparente): gesso pieno e un'ombra morbida per la leggibilita' */
.testata:not(.testata--solida) :is(.testata__nav a, .marchio__riga, .testata__via) { color: var(--c-gesso); }
.testata:not(.testata--solida) :is(.testata__nav a, .marchio__testo, .testata__dati, .testata__menu) { text-shadow: 0 0 0.9rem rgb(21 13 14 / 0.95), 0 1px 2px rgb(21 13 14 / 0.9); }
.testata:not(.testata--solida) .btn--gesso { background: rgb(21 13 14 / 0.35); }

.testata__menu {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.icona-lunetta { width: 1.35rem; height: auto; color: var(--c-ottone); }

/* Chiama, sul telefono: accanto a Menu, con la stessa voce */
.testata__chiama {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.15rem;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.testata__chiama .icona { width: 1.25rem; height: 1.25rem; color: var(--c-ottone); }
.testata:not(.testata--solida) .testata__chiama { text-shadow: 0 0 0.9rem rgb(21 13 14 / 0.95), 0 1px 2px rgb(21 13 14 / 0.9); }
/* solo sotto i 1024 px: sopra, la testata ha le sue tre colonne con il marchio al centro */
@media (max-width: 63.99em) {
  .testata__interno:has(.testata__chiama) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .testata__interno:has(.testata__chiama) .testata__menu { grid-column: 3; }
}
/* sugli schermi piu' stretti resta solo l'icona (la scritta c'e' per lo screen reader) */
@media (max-width: 25.99em) { .testata__chiama .etichetta-azione { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Chiama dentro i bottoni: l'icona prende il colore del testo */
.btn .icona { width: 1.15rem; height: 1.15rem; color: currentColor; }

@media (min-width: 64em) {
  :root { --testata-h: 5.25rem; }
  .testata__interno { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .testata__nav { display: block; grid-column: 1; grid-row: 1; justify-self: start; }
  .testata .marchio { grid-column: 2; justify-self: center; }
  .testata .marchio__segno { height: 2.3rem; }
  .testata .marchio__nome { font-size: 1.25rem; }
  .testata__info { display: flex; grid-column: 3; grid-row: 1; justify-self: end; }
  .testata__menu, .testata__chiama { display: none; }
}
/* lo stato e' nella testata dai 1200 px in su: sotto, resta nell'hero */
@media (min-width: 75em) {
  .sera__colonna > .stato { display: none; }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .testata .testata__stato { display: none; }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .testata__via { display: none; }
}

/* -----------------------------------------------------------------------------
   9. MENU NOTTE (mobile, <dialog>): si apre come un cerchio di luce di lanterna
   -------------------------------------------------------------------------- */
.menu-notte {
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 74%, var(--c-notte));
  --linea: color-mix(in oklab, var(--c-ottone) 34%, transparent);
  --focus: var(--c-ambra);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-notte);
  color: var(--fg);
  overflow: auto;
  overscroll-behavior: contain;
  clip-path: circle(0 at var(--mx, calc(100% - 2.5rem)) var(--my, 2rem));
  transition:
    clip-path 0.65s var(--ease-porta),
    display 0.65s allow-discrete,
    overlay 0.65s allow-discrete;
}
.menu-notte[open] {
  clip-path: circle(150vmax at var(--mx, calc(100% - 2.5rem)) var(--my, 2rem));
}
@starting-style {
  .menu-notte[open] { clip-path: circle(0 at var(--mx, calc(100% - 2.5rem)) var(--my, 2rem)); }
}
.menu-notte::backdrop { background: transparent; }

.menu-notte__interno {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.1rem var(--margine) 2.5rem;
}
.menu-notte__interno::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-ottone);
  opacity: 0.1;
  -webkit-mask: url("../img/brand/lossodromie.svg") 50% 100% / 220vmax auto no-repeat;
  mask: url("../img/brand/lossodromie.svg") 50% 100% / 220vmax auto no-repeat;
}
.menu-notte__testa { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; }
.menu-notte__chiudi {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-notte__x { position: relative; width: 1.25rem; height: 1.25rem; }
.menu-notte__x::before, .menu-notte__x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.4rem; height: 1px;
  background: currentColor;
  translate: -50% -50%;
  rotate: 45deg;
}
.menu-notte__x::after { rotate: -45deg; }

.menu-notte__interno > nav { margin-block: auto; }
.menu-notte__voci { padding-block: 2.5rem; }
.menu-notte__voci li + li { border-top: 1px solid var(--linea); }
.menu-notte__voci a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  color: var(--fg);
  text-decoration: none;
  font-size: clamp(2rem, 1.4rem + 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.05;
}
.menu-notte__voci a[aria-current="page"] { font-style: italic; }
.menu-notte__piede { display: grid; gap: 1.2rem; color: var(--fg-2); font-size: var(--t-small); }
.menu-notte__orari { color: var(--fg); }
.menu-notte__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.menu-notte__stato { color: var(--fg); font-size: var(--t-micro); }
.menu-notte__orari span { font-style: italic; color: var(--fg-2); }
.menu-notte .insegna { --insegna-nome: 1.6rem; --insegna-riga: 0.78rem; align-items: flex-start; text-align: left; }
.menu-notte .insegna__nome { margin-right: 0; }

@media (prefers-reduced-motion: no-preference) {
  .menu-notte__voci li {
    transition: opacity 0.5s var(--ease-luce), translate 0.7s var(--ease-porta);
    transition-delay: calc(0.12s + var(--i, 0) * 0.06s);
  }
  @starting-style {
    .menu-notte[open] .menu-notte__voci li { opacity: 0; translate: 0 0.6em; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-notte, .menu-notte[open] { clip-path: none; }
  .menu-notte { opacity: 0; transition: opacity 0.12s, display 0.12s allow-discrete, overlay 0.12s allow-discrete; }
  .menu-notte[open] { opacity: 1; }
  @starting-style { .menu-notte[open] { opacity: 0; } }
}

/* -----------------------------------------------------------------------------
   10. LA SERA (hero della home)
   L'arco con la luce blu, le bottiglie e la lanterna sul bancone (IMG_2596), l'insegna in chiaro a tutta larghezza come
   le lettere sul vetro della lunetta e lo stato di apertura in tempo reale.
   Riferimenti: hero cinematografici a tutto schermo con tipografia fuori scala e
   informazioni pratiche subito visibili.
   -------------------------------------------------------------------------- */
.sera {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: clip;
}
.sera__foto { position: absolute; inset: 0; z-index: -2; }
.sera__foto .foto { position: absolute; inset: 0; }
.sera__foto img { object-position: 60% 50%; }
.sera__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(21 13 14 / 0.9) 0%, rgb(21 13 14 / 0.62) 11%, rgb(21 13 14 / 0) 30%),
    linear-gradient(0deg, rgb(21 13 14 / 0.95) 0%, rgb(21 13 14 / 0.8) 24%, rgb(21 13 14 / 0.4) 44%, rgb(21 13 14 / 0) 64%),
    linear-gradient(90deg, rgb(21 13 14 / 0.72) 0%, rgb(21 13 14 / 0.38) 36%, rgb(21 13 14 / 0) 62%);
}
.sera__scena {
  display: grid;
  align-content: end;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-top: calc(var(--testata-h) + 2.5rem);
  padding-bottom: clamp(1.1rem, 0.7rem + 1.4vw, 2rem);
}
/* Una colonna a sinistra, in basso: stato, insegna, presentazione, azioni.
   La parte destra della foto (scaffali, lanterna a vetri colorati) resta libera. */
.sera__colonna {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
  width: 100%;
  max-width: 46rem;
  text-shadow: 0 0 1.4rem rgb(21 13 14 / 0.9), 0 1px 2px rgb(21 13 14 / 0.85);
}
.sera__testo {
  max-width: 46ch;
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  color: color-mix(in oklab, var(--c-gesso) 94%, transparent);
  text-wrap: balance;
}

/* Stato di apertura (calcolato dagli orari) */
.stato {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.stato__luce {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in oklab, currentColor 45%, transparent);
}
.stato.is-aperto .stato__luce { background: var(--c-ambra); }
.superficie--giorno .stato.is-aperto .stato__luce, .superficie--carta .stato.is-aperto .stato__luce { background: var(--accento); }

/* L'insegna in chiaro: tre righe come sul vetro, il nome da bordo a bordo */
.sera__testata {
  justify-self: stretch;
  display: grid;
  row-gap: 0.55rem;
  margin-block: var(--s-2) var(--s-1);
  font-family: var(--f-insegna);
  font-weight: 400;
  line-height: 1;
  color: var(--c-gesso);
  text-shadow: 0 0 2rem rgb(21 13 14 / 0.75), 0 1px 3px rgb(21 13 14 / 0.8);
  container-type: inline-size;
}
.sera__riga {
  font-size: clamp(0.86rem, 0.74rem + 0.42vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--c-gesso) 94%, transparent);
}
.sera__nome {
  display: block;
  font-size: 18.9cqi;
  line-height: 0.9;
  letter-spacing: 0.055em;
  margin-right: -0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .sera__foto picture {
      animation: sera-parallasse linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes sera-parallasse { to { translate: 0 7%; } }

/* su mobile e tablet il testo sta in basso: spazio per il sigillo a cavallo del bordo */
@media (max-width: 63.99em) {
  .sera__scena { padding-bottom: calc(clamp(1.1rem, 0.7rem + 1.4vw, 2rem) + 2.8rem); }
}
/* sui telefoni gli inviti dell'hero possono andare su due righe: poco spazio tra le righe */
@media (max-width: 29.99em) {
  .sera__azioni { gap: var(--s-3) var(--s-4); }
}
@media (min-width: 64em) {
  /* la foto (verticale) occupa la meta' destra a tutta altezza; il testo sta a sinistra, sul fondo notte.
     Il bordo sinistro della foto sfuma nel fondo, cosi' foto e testo restano un'unica scena */
  .sera__foto, .sera__velo { left: 50%; }
  .sera__foto img { object-position: 50% 25%; }
  .sera__scena { align-content: center; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
  .sera__colonna { max-width: min(44rem, 46vw); }
  .sera__velo {
    background:
      linear-gradient(180deg, rgb(21 13 14 / 0.85) 0%, rgb(21 13 14 / 0.45) 12%, rgb(21 13 14 / 0) 28%),
      linear-gradient(0deg, rgb(21 13 14 / 0.6) 0%, rgb(21 13 14 / 0) 22%),
      linear-gradient(90deg, var(--c-notte) 0%, rgb(21 13 14 / 0.75) 8%, rgb(21 13 14 / 0.25) 22%, rgb(21 13 14 / 0) 36%);
  }
}

/* -----------------------------------------------------------------------------
   11. TESTA DELLE PAGINE INTERNE: la stessa notte, un'immagine in lunetta
   -------------------------------------------------------------------------- */
.soglia-pagina { overflow: clip; --bugnato-opacita: 0.5; }
.soglia-pagina__scena {
  display: grid;
  gap: var(--s-7);
  padding-top: calc(var(--testata-h) + clamp(2rem, 1rem + 4vw, 5rem));
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
  align-items: end;
}
.briciole ol { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.briciole li { display: inline-flex; align-items: center; gap: 0.9rem; }
.briciole li + li::before {
  content: "/";
  font-family: var(--f-gesso);
  color: var(--fg-2);
}
.briciole a, .briciole span {
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
}
.briciole a:hover { color: var(--fg); }
.briciole [aria-current="page"] { color: var(--accento); }
.soglia-pagina__titolo { font-size: var(--t-h1); }
.soglia-pagina__titolo em { display: block; }
.soglia-pagina__titolo--indirizzo { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.5rem); }
.soglia-pagina .attacco { margin-top: var(--s-5); max-width: 32ch; color: var(--fg-2); }
/* la foto: sotto il testo e a tutta larghezza su mobile, meta' pagina a tutta altezza su desktop */
.soglia-pagina__foto { margin-inline: calc(-1 * var(--margine)); margin-bottom: calc(-1 * clamp(3.5rem, 2rem + 5vw, 7rem)); }
.soglia-pagina__foto .foto { aspect-ratio: 4 / 3; }

@media (min-width: 64em) {
  .soglia-pagina { min-height: min(100svh, 60rem); }
  .soglia-pagina__scena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-9); min-height: inherit; align-items: center; }
  .soglia-pagina__foto { position: absolute; inset: 0 0 0 50%; margin: 0; }
  .soglia-pagina__foto .foto { height: 100%; aspect-ratio: auto; }
  /* velatura in alto: le voci del menu restano leggibili sopra la foto */
  .soglia-pagina__foto::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 9rem;
    background: linear-gradient(180deg, rgb(21 13 14 / 0.72), rgb(21 13 14 / 0));
    pointer-events: none;
  }
}

/* Indice della pagina: collegamenti alle sezioni */
.indice { margin-top: var(--s-7); max-width: 36rem; }
.indice__titolo { margin-bottom: var(--s-3); color: var(--fg-2); }
.indice ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); border-bottom: 1px solid var(--linea); }
.indice li { border-top: 1px solid var(--linea); }
.indice a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--d-2);
}
.indice a:hover { color: var(--accento); }
.indice .freccia { width: 1.1em; opacity: 0.7; }
.freccia--giu { rotate: 90deg; }

/* -----------------------------------------------------------------------------
   12. CAPITOLI DELLA HOME
   -------------------------------------------------------------------------- */

/* Sigillo: il Segno in un medaglione d'ottone, sulla giuntura tra due sezioni */
.sigillo {
  position: absolute;
  top: -2.4rem;
  left: calc(50% - 2.4rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--c-notte);
  border: 1px solid color-mix(in oklab, var(--c-ottone) 75%, transparent);
  box-shadow: 0 0 0 5px var(--c-notte), 0 0 0 6px color-mix(in oklab, var(--c-ottone) 35%, transparent);
  color: var(--c-ottone);
}
.sigillo__segno { width: auto; height: 2.5rem; }

/* Icone del sito: tratto sottile, terminali tondi come le onde del Segno */
.icona { flex: none; width: 1.35rem; height: 1.35rem; color: var(--accento, var(--c-ottone)); }
.scheda dt, .piede__colonne h2 { display: flex; align-items: center; gap: 0.5rem; }
.piede__colonne h2 .icona { color: var(--c-ottone); }

/* Occhiello: una parola sopra il titolo, con le parole delle lavagne */
.occhiello { margin-bottom: var(--s-4); color: var(--accento); }
.occhiello + .titolo-2, .occhiello + .titolo-3, .occhiello + .soglia-pagina__titolo { margin-top: 0; }
.lavagna-intro .occhiello { margin-bottom: 0; }
.titolo-2 + .stato { margin-top: var(--s-5); }
.sottotitolo { margin: var(--s-7) 0 0; color: var(--fg-2); }
.sottotitolo + .distanze, .sottotitolo + .orari, .sottotitolo + .orari-breve { margin-top: var(--s-3); }

/* Scheda pratica: orari, indirizzo, calici, spina */
.scheda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-6);
  margin-top: var(--s-7);
  max-width: 38rem;
  border-bottom: 1px solid var(--linea);
}
.scheda__voce { padding-block: var(--s-4); border-top: 1px solid var(--linea); }
.scheda dt {
  margin-bottom: 0.35rem;
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accento);
}
.scheda dd { line-height: 1.45; }
.scheda dd span { display: block; color: var(--fg-2); }
@media (max-width: 29.99em) { .scheda { grid-template-columns: 1fr; } }

/* I — La soglia */
.soglia__foto { position: relative; }
.soglia__foto-grande { aspect-ratio: 3 / 4; }
.soglia__testo { align-self: center; }
.soglia__testo .titolo-2 { margin-bottom: var(--s-6); }

@media (min-width: 64em) {
  .soglia__foto { grid-column: 1 / span 5; }
  .soglia__testo { grid-column: 7 / span 6; }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .soglia__foto { grid-column: 1 / span 9; }
}

/* Vini al calice: la lavagna */
.lavagna-titolo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em 0.5em;
  font-family: var(--f-gesso);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lavagna-titolo > .gesso { display: inline-block; }
.raccordo {
  margin-left: 0.2em;
  font-family: var(--f-testo);
  font-style: italic;
  font-weight: 400;
  font-size: max(0.42em, 0.95rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}

/* Voci della lavagna: NOME di PRODUTTORE ........ prezzo */
.voci { list-style: none; padding: 0; margin: 0; }
.voce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.42em;
  padding-block: 0.62em 0.5em;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-gesso);
  font-size: var(--t-voce);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.voce:last-child { border-bottom: 0; }
.voce__n { font-weight: 500; min-width: 1.4em; }
.voce__di {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 0.76em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}
.voce__segno {
  font-size: 0.72em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--accento);
  margin-left: -0.15em;
}
.voce__prezzo {
  margin-left: auto;
  padding-left: 0.8em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.voce__euro, .voce__da {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 0.74em;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 0.25em;
  color: var(--fg-2);
}
.voce--territorio .voce__nome::before {
  content: "";
  display: inline-block;
  width: 0.32em; height: 0.32em;
  margin-right: 0.38em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.24em;
}
.voce--formati .voce__prezzo { display: flex; gap: 1.1em; }
/* nome e produttore vanno a capo tra loro, cosi' il prezzo resta sulla prima riga */
.voce__titolo { flex: 1 1 0; min-width: 0; }
/* due liste nella stessa lavagna (birre alla spina, poi le altre): aria tra le due */
.voci + .lavagna-titolo { margin-top: var(--s-6); }
/* sotto il nome: da dove arriva il vino e una riga su com'e' (solo bianchi e rossi) */
.voce__nota {
  flex: 0 0 100%;
  margin-top: 0.4rem;
  font-family: var(--f-testo);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}
.voce__luogo { font-style: italic; color: var(--fg); }
.voce__formato { font-family: var(--f-testo); font-style: italic; font-size: 0.74em; letter-spacing: 0; text-transform: none; color: var(--fg-2); margin-right: 0.3em; }

.legenda-voci {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--fg-2);
}
.legenda-voci span { display: inline-flex; align-items: baseline; gap: 0.5em; }
.legenda-voci .pallino {
  display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--fg);
}
.legenda-voci .piu { font-family: var(--f-gesso); font-weight: 600; color: var(--accento); }

/* La lavagna a schede (home): senza JS si vedono tutte le sezioni una sotto l'altra */
.vino__lavagna { margin-top: var(--s-7); }
.schede__barra { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--s-5); }
.schede__scheda {
  padding: 0.7rem 1rem 0.62rem;
  border: 1px solid color-mix(in oklab, var(--fg) 45%, transparent);
  background: none;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.schede__scheda:hover { border-color: var(--fg); }
.schede__scheda[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.schede:not(.schede--attive) .schede__pannello + .schede__pannello { margin-top: var(--s-7); }
.schede:not(.schede--attive) .lavagna-titolo { margin-bottom: var(--s-3); }
.schede--attive .schede__pannelli { display: grid; }
.schede--attive .schede__pannello { grid-area: 1 / 1; }
.schede--attive .schede__pannello.is-nascosto { visibility: hidden; }
.schede--attive .schede__pannello .lavagna-titolo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.vino__foto .didascalia { display: block; margin-top: var(--s-3); }

.vino__foto { align-self: start; }
.vino__foto .foto { aspect-ratio: 4 / 5; }

@media (min-width: 64em) {
  .vino__testo { grid-column: 1 / span 7; }
  .vino__foto { grid-column: 9 / span 4; margin-top: var(--s-9); }
}

/* Al banco: foto + lavagnetta di aperitivo e birre */
.banco__foto .foto { aspect-ratio: 4 / 5; }
.banco__lavagna { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 64em) {
  .banco__foto { grid-column: 1 / span 5; align-self: center; }
  .banco__testo { grid-column: 7 / span 6; align-self: center; }
}

/* Sul tagliere: salumi e formaggi */
.sul-tagliere { display: grid; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linea); color: var(--fg-2); }
.sul-tagliere strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Crostini e taglieri: due foto appoggiate sulla carta */
.tavola__foto { position: relative; min-height: 28rem; }
.appoggiata { position: absolute; box-shadow: var(--ombra-carta); }
.appoggiata--1 { left: 0; top: 0; width: 72%; aspect-ratio: 4 / 5; }
.appoggiata--2 { right: 0; bottom: 0; width: 52%; aspect-ratio: 3 / 4; }
.tavola__liste { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.tavola__testo .titolo-2 { margin-bottom: var(--s-5); }

@media (max-width: 47.99em) {
  .tavola__foto { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .appoggiata { position: relative; inset: auto; width: auto; }
  .appoggiata--1 { grid-column: 1 / -1; width: 84%; }
  .appoggiata--2 { width: 70%; margin: -22% 0 0 auto; grid-column: 1 / -1; }
}
@media (min-width: 48em) {
  .tavola__foto { min-height: 40rem; }
}
@media (min-width: 64em) {
  .tavola__foto { grid-column: 1 / span 6; min-height: 46rem; }
  .tavola__testo { grid-column: 8 / span 5; align-self: center; }
}

/* Il locale: titolo e testo, poi un mosaico di foto a tutta larghezza */
.locale { padding-bottom: 0; }
@media (min-width: 64em) {
  .locale__titolo { grid-column: 1 / span 5; }
  .locale__testo { grid-column: 7 / span 6; }
}
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, 0.25vw, 4px);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}
.mosaico__foto { position: relative; }
.mosaico__foto .foto { aspect-ratio: 1; }
.mosaico__foto--grande { grid-column: span 2; }
.mosaico .tavola__link:focus-visible { outline-offset: -4px; }
.mosaico__didascalia {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.7rem 0.4rem;
  background: rgb(21 13 14 / 0.84);
  color: var(--c-gesso);
  font-family: var(--f-gesso);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  translate: 0 0.4rem;
  transition: opacity 0.35s var(--ease-luce), translate 0.35s var(--ease-porta);
}
.mosaico__foto:hover .mosaico__didascalia, .mosaico__foto:focus-within .mosaico__didascalia { opacity: 1; translate: 0 0; }
@media (min-width: 48em) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaico__foto--grande { grid-row: span 2; }
}
/* quattro foto verticali tutte uguali */
.mosaico--uguali .foto { aspect-ratio: 3 / 4; }
/* la nota sotto il mosaico: piccola, discreta, ma leggibile */
.mosaico__nota {
  padding-block: 0.9rem 1.2rem;
  font-family: var(--f-testo);
  font-size: var(--t-micro);
  font-style: italic;
  color: var(--fg-2);
}

/* Distanze a piedi */
.distanze { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 0; }
.distanze li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--linea);
}
.distanze li:last-child { border-bottom: 1px solid var(--linea); }
.distanze__luogo { font-size: var(--t-lead); font-weight: 300; line-height: 1.2; }
.distanze__metri { font-family: var(--f-gesso); font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.distanze__metri small { font-family: var(--f-testo); font-style: italic; font-size: 0.74em; font-weight: 400; color: var(--fg-2); margin-left: 0.15em; }
.nota { font-size: var(--t-micro); font-style: italic; color: var(--fg-2); margin-top: var(--s-3); }

/* Dove siamo */
.rotta__testo .titolo-2 { margin-bottom: var(--s-5); }
.indirizzo { font-size: var(--t-lead); line-height: 1.45; font-weight: 300; }
.indirizzo strong { font-weight: 400; }
.recapiti { margin-top: var(--s-3); font-size: var(--t-body); line-height: 1.6; }
.recapiti a { color: var(--accento); }
.mappe { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.superficie--carta { overflow: clip; }

/* La mappa di Google in cornice; dietro, la rete di lossodromie */
.rotta__carta { display: grid; justify-items: center; align-content: center; }
.mappa { position: relative; isolation: isolate; width: 100%; max-width: 38rem; justify-self: center; align-self: center; }
/* le distanze a piedi sotto la mappa, larghe quanto la sua cornice */
.rotta__distanze { position: relative; width: 100%; max-width: 38rem; }
.rotta__distanze .sottotitolo { margin-top: var(--s-6); }
.mappa__linee {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 230%;
  max-width: none;
  height: auto;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
.mappa__lossodromie path { fill: none; stroke: var(--linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mappa__anelli circle { fill: none; stroke: var(--linea-forte); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.mappa__cornice {
  position: relative;
  padding: clamp(8px, 0.4rem + 0.35vw, 14px);
  background-color: var(--c-carta);
  outline: 1px solid var(--linea-forte);
  box-shadow: var(--ombra-carta);
}
.mappa__civico {
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--c-notte);
  color: var(--c-gesso);
  border: 1px solid rgb(232 230 222 / 0.5);
  box-shadow: inset 0 0 0 3px var(--c-notte), inset 0 0 0 4px rgb(232 230 222 / 0.3), 0 0.4rem 1rem -0.3rem rgb(21 13 14 / 0.6);
  font-family: var(--f-insegna);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mappa iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  background: var(--c-carta-2);
  filter: sepia(0.16) saturate(0.92);
}
@media (min-width: 64em) { .mappa iframe { aspect-ratio: 1 / 1; } }
/* prima del clic: l'avviso al posto della mappa, sulla carta con le linee della carta nautica */
.mappa__consenso {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-5);
  aspect-ratio: 4 / 3;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background:
    linear-gradient(rgb(239 229 208 / 0.88), rgb(239 229 208 / 0.88)),
    url("../img/brand/lossodromie.svg") 50% 50% / cover no-repeat,
    var(--c-carta);
  color: var(--c-notte);
  --fg: var(--c-notte);
  --fg-2: color-mix(in oklab, var(--c-notte) 76%, var(--c-carta));
  --accento: var(--c-vinaccia);
  --linea-forte: color-mix(in oklab, var(--c-vinaccia) 60%, transparent);
}
@media (min-width: 64em) { .mappa__consenso { aspect-ratio: 1 / 1; } }
.mappa__avviso { max-width: 34ch; font-size: var(--t-small); line-height: 1.45; color: var(--fg-2); }
.mappa__avviso a { color: var(--c-vinaccia); }
.mappa__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.no-js [data-carica-mappa] { display: none; }

/* Pagina privacy: testo lungo, leggibile */
.soglia-pagina.soglia-pagina--testo { min-height: 0; }
.soglia-pagina--testo > .contenitore {
  padding-top: calc(var(--testata-h) + clamp(2rem, 1rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.soglia-pagina--testo .attacco { max-width: 52ch; }
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: var(--s-7, 3rem); margin-bottom: var(--s-3); }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { font-size: var(--t-body); line-height: 1.6; }
.prosa p + p, .prosa ul { margin-top: var(--s-3); }
.prosa ul { padding-left: 1.2em; }
.prosa li + li { margin-top: 0.35rem; }
.prosa a { color: var(--accento); }

.orari { margin-top: var(--s-6); }
.orari__vuoto {
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--linea-forte);
  font-size: var(--t-small);
  color: var(--fg-2);
}
.orari__vuoto strong { display: block; font-family: var(--f-gesso); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--t-micro); color: var(--fg); margin-bottom: 0.2rem; }
/* Orari: la tabella classica, un giorno per riga */
.orari__tabella { width: 100%; max-width: 30rem; border-collapse: collapse; }
.orari__tabella tr { border-bottom: 1px solid var(--linea); }
.orari__tabella tr:first-child { border-top: 1px solid var(--linea); }
.orari__tabella th, .orari__tabella td { padding: 0.62rem 0 0.55rem; font-size: var(--t-body); line-height: 1.3; }
.orari__tabella th { font-weight: 400; text-align: left; }
.orari__tabella td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orari__tabella tr.is-chiuso th, .orari__tabella tr.is-chiuso td { color: var(--fg-2); }
.orari__tabella tr.is-oggi th, .orari__tabella tr.is-oggi td { color: var(--accento); font-weight: 500; }
.orari__oggi {
  margin-left: 0.5em;
  padding: 0.2em 0.5em 0.15em;
  border: 1px solid currentColor;
  font-family: var(--f-gesso);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

/* nel piede: stessa tabella, piu' compatta */
.orari--piede { margin-top: 0; }
.orari--piede .orari__tabella { max-width: 22rem; }
.orari--piede .orari__tabella th, .orari--piede .orari__tabella td { padding: 0.4rem 0 0.35rem; font-size: var(--t-small); }

/* Orari in breve */
.orari-breve { display: grid; gap: 0.2rem; font-size: var(--t-small); line-height: 1.5; color: var(--fg); }
.orari-breve__etichetta {
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accento);
}
.orari-breve__chiuso { font-style: italic; color: var(--fg-2); }
.soglia-pagina .orari-breve { margin-top: var(--s-5); }

@media (min-width: 64em) {
  .rotta__testo { grid-column: 1 / span 5; }
  .rotta__carta { grid-column: 7 / span 6; }
}

/* -----------------------------------------------------------------------------
   13. PIEDE (footer): l'insegna, in chiaro
   -------------------------------------------------------------------------- */
.piede { overflow-x: clip; --bugnato-opacita: 0.45; padding-top: var(--sezione); }
/* il Segno in filigrana nell'angolo del piede */
.piede__filigrana {
  position: absolute;
  right: -3rem;
  bottom: 0;
  z-index: -1;
  width: auto;
  height: min(30rem, 70%);
  color: var(--c-ottone);
  opacity: 0.05;
  pointer-events: none;
}

.piede__insegna { display: grid; justify-items: center; }
.piede .insegna { --insegna-riga: clamp(0.88rem, 0.76rem + 0.4vw, 1.15rem); --insegna-nome: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem); color: var(--c-gesso); }
.piede .insegna__nome { margin-block: 0.32em 0.4em; }
/* Tre colonne divise da filetti d'ottone: dove siamo, orari, pagine */
.piede__colonne {
  display: grid;
  margin-top: var(--s-8);
  border-top: 1px solid var(--linea);
}
.piede__blocco { padding-block: var(--s-6); border-bottom: 1px solid var(--linea); }
.piede__colonne h2 { margin-bottom: var(--s-4); color: var(--c-ottone); }
.piede__indirizzo { font-size: 1.15rem; line-height: 1.5; }
.piede__nota { margin-top: 0.35rem; font-size: var(--t-small); color: var(--fg-2); }
.piede__blocco > p:not(.piede__nota) { margin-top: 0.35rem; }
.piede__blocco > p a { color: var(--fg); }
.piede__mappe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.piede__mappe a:not(.btn), .piede__pagine a {
  font-family: var(--f-gesso);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--d-2);
}
.piede__mappe a:not(.btn) { font-size: var(--t-micro); color: var(--fg-2); }
.piede__mappe a:not(.btn):hover { color: var(--fg); }

.piede__pagine { display: grid; gap: 0.55rem; }
.piede__pagine a { font-size: var(--t-small); color: var(--fg); }
.piede__pagine a:hover { color: var(--c-ambra); }
.piede__pagine a[aria-current="page"] { color: var(--c-ambra); }

@media (min-width: 48em) {
  .piede__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__blocco:nth-child(odd) { padding-right: var(--s-6); }
  .piede__blocco:nth-child(even) { padding-left: var(--s-6); border-left: 1px solid var(--linea); }
}
@media (min-width: 64em) {
  .piede__colonne { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  .piede__blocco { padding: var(--s-7) var(--s-6); }
  .piede__blocco:nth-child(even) { padding-left: var(--s-6); }
  .piede__blocco + .piede__blocco { border-left: 1px solid var(--linea); }
  .piede__blocco:first-child { padding-left: 0; }
  .piede__blocco:last-child { padding-right: 0; }
}

.piede__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  padding-block: var(--s-5) var(--s-6);
  font-size: var(--t-micro);
  color: var(--fg-2);
}
.piede__base a { color: var(--fg-2); }
.piede__ai { flex-basis: 100%; font-size: 0.74rem; font-style: italic; color: var(--fg-2); }
.torna-su { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; font-family: var(--f-gesso); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.torna-su:hover { color: var(--fg); }


/* -----------------------------------------------------------------------------
   14. PAGINE INTERNE — blocchi
   -------------------------------------------------------------------------- */
.lavagna-grande { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem) var(--s-9); }
.lavagna-grande__sezione { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 64em) {
  .lavagna-grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lavagna-piccola {
  /* la lavagnetta nera delle birre, con cornice di metallo (IMG_2599) */
  --bg: #1A1718;
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 74%, #1A1718);
  --linea: rgb(232 230 222 / 0.2);
  --accento: var(--c-ambra);
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: #1A1718 url("../img/brand/grana-gesso.webp") 0 0 / 220px;
  color: var(--fg);
  box-shadow: inset 0 0 0 6px #3B3A3E, inset 0 0 0 7px rgb(232 230 222 / 0.12);
}
.voce--puntini .voce__prezzo { margin-left: 0; }
.voce--puntini .voce__filo { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--linea); translate: 0 -0.3em; }

.blocco-due { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 64em) {
  .blocco-due { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-9); }
  .blocco-due--inverso { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.elenco-corsivo { list-style: none; padding: 0; margin: 0; }
.elenco-corsivo li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
}

.tavole-atlante { display: grid; gap: clamp(3rem, 2.4rem + 3vw, 6rem); }
.tavola-larga .foto-wrap { width: 100%; max-width: 34rem; justify-self: center; }
.tavola-larga { display: grid; gap: var(--s-6); align-items: center; }
.tavola-larga__testo .titolo-3 { margin-bottom: var(--s-4); }
@media (min-width: 64em) {
  .tavola-larga { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .tavola-larga .foto-wrap { grid-column: 2 / span 5; }
  .tavola-larga__testo { grid-column: 8 / span 4; }
  .tavola-larga:nth-child(even) .foto-wrap { grid-column: 7 / span 5; grid-row: 1; }
  .tavola-larga:nth-child(even) .tavola-larga__testo { grid-column: 2 / span 4; grid-row: 1; }
}

/* Domande frequenti: <details> */
.domande { border-top: 1px solid var(--linea); }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.2;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda__rosa { position: relative; flex: none; width: 1.4rem; height: 1.4rem; transition: rotate var(--d-3) var(--ease-porta); }
.domanda__rosa::before, .domanda__rosa::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; translate: -50% -50%;
}
.domanda__rosa::before { width: 100%; height: 1px; }
.domanda__rosa::after { width: 1px; height: 100%; }
.domanda[open] .domanda__rosa { rotate: 135deg; color: var(--accento); }
.domanda p { padding: 0 0 1.5rem; max-width: 60ch; color: var(--fg-2); }

/* 404 */

/* Utilita' di composizione */
.azioni--sotto { margin-top: var(--s-7); }
.lavagna-intro { display: grid; gap: var(--s-4); margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); padding-top: var(--s-5); }
.tavola__link { display: block; color: inherit; text-decoration: none; }
.tavola__link:focus-visible { outline-offset: 6px; }

.blocco-salumi { display: grid; gap: var(--s-6); margin-top: var(--s-3); }
.blocco-salumi h3 { margin-bottom: var(--s-3); color: var(--accento); }
@media (min-width: 40em) { .blocco-salumi { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }

/* Coppia di foto (pagina "Cucina") */
.foto-coppia { display: grid; gap: var(--gutter); }
.foto-coppia .foto { aspect-ratio: var(--ar, 4 / 5); }
@media (min-width: 48em) {
  .foto-coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}


/* Tavole larghe (pagina "Il locale") */
.tavola-larga { margin: 0; }
.tavola-larga .foto-wrap .foto { aspect-ratio: var(--ar, 1); }
.tavola-larga__testo { display: grid; gap: var(--s-3); align-content: center; }
.tavola-larga__testo .titolo-3 { display: block; }
.tavola-larga__testo .testo-2 { max-width: 38ch; }

/* Pagine di approfondimento (aperitivo, vini friulani, vicino a Piazza Unita') */
.blocco-due .banco__lavagna { margin-top: 0; }
.orari__nota { margin-top: var(--s-5); }
.distanze--luoghi { margin-top: 0; }
.distanze--luoghi li { grid-template-columns: minmax(0, 1fr) auto 4.6rem; }
.distanze__luogo small { display: block; margin-top: 0.15rem; font-size: var(--t-small); font-style: italic; color: var(--fg-2); }
.distanze__minuti { font-family: var(--f-gesso); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--fg-2); text-align: right; white-space: nowrap; }
.vitigni { display: grid; gap: var(--gutter); }
.vitigno { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--linea-forte); background: rgb(255 255 255 / 0.16); }
.vitigno__calice {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-gesso);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vitigno__nota { margin-top: var(--s-4); }
@media (min-width: 48em) { .vitigni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rimandi { display: grid; gap: var(--s-4); }
.rimandi a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--linea);
  color: var(--fg);
  text-decoration: none;
}
.rimandi li:last-child a { border-bottom: 1px solid var(--linea); }
.rimandi__titolo { font-family: var(--f-titoli); font-size: var(--t-h3); text-transform: uppercase; letter-spacing: 0.03em; }
.rimandi__dato { grid-row: 2; color: var(--fg-2); font-size: var(--t-small); }
.rimandi .freccia { grid-row: 1 / span 2; grid-column: 2; }
.rimandi a:hover .freccia { width: 2.6em; }
@media (min-width: 64em) { .rimandi { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); } }
.piede__guide { display: grid; gap: 0.45rem; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.piede__guide a { color: var(--fg-2); font-size: var(--t-small); text-decoration: none; transition: color var(--d-2); }
.piede__guide a:hover, .piede__guide a[aria-current="page"] { color: var(--c-ambra); }

/* -----------------------------------------------------------------------------
   15. LANTERNA MAGICA (lightbox <dialog>)
   -------------------------------------------------------------------------- */
.lanterna-magica {
  --fg: var(--c-gesso);
  --fg-2: color-mix(in oklab, var(--c-gesso) 74%, var(--c-notte));
  --focus: var(--c-ambra);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  border: 0;
  background: rgb(14 9 10 / 0.97);
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.4s var(--ease-luce), display 0.4s allow-discrete, overlay 0.4s allow-discrete;
}
.lanterna-magica[open] { opacity: 1; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 1rem; }
@starting-style { .lanterna-magica[open] { opacity: 0; } }
.lanterna-magica::backdrop { background: transparent; }
.lanterna-magica__foto { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.lanterna-magica__foto picture, .lanterna-magica__foto img { max-width: 100%; max-height: calc(100svh - 9rem); width: auto; height: auto; object-fit: contain; }
.lanterna-magica__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100%, 70rem); }
.lanterna-magica__barra .didascalia { margin: 0; display: block; max-width: 72ch; }
.lanterna-magica .didascalia .titolo-3 { display: inline; font-size: 1.05rem; margin-right: 0.5em; }
.lanterna-magica .didascalia .testo-2 { display: inline; font-style: italic; }
.lanterna-magica__comandi { display: flex; gap: 0.5rem; }
.lanterna-magica button {
  display: inline-grid;
  place-items: center;
  min-width: 2.9rem;
  min-height: 2.9rem;
  padding: 0 0.9rem;
  border: 1px solid rgb(202 163 113 / 0.45);
  background: none;
  color: var(--fg);
  font-family: var(--f-gesso);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.lanterna-magica button:hover { border-color: var(--c-ottone); background: rgb(202 163 113 / 0.1); }
.lanterna-magica .freccia--indietro { rotate: 180deg; }

/* -----------------------------------------------------------------------------
   16. RIVELAZIONI ALLO SCROLL (attivate solo da JS e solo se il movimento e' gradito)
   -------------------------------------------------------------------------- */
/* Il Segno: si disegna (asta, onde, punti) */
.segno-vivo .segno__asta, .segno-vivo .segno__punto { transform-box: fill-box; }
.segno-vivo .segno__asta { transform-origin: 50% 100%; }
.segno-vivo .segno__punto { transform-origin: 50% 50%; }
.segno-vivo .segno__onda { stroke-dasharray: 1; }
@keyframes segno-asta { from { scale: 1 0; } }
@keyframes segno-onda { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes segno-onda-bis { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes segno-punto { from { scale: 0; } }
@keyframes insegna-riga { from { opacity: 0; translate: 0 0.7rem; } }
@keyframes insegna-nome { from { opacity: 0; letter-spacing: 0.16em; } }

@media (prefers-reduced-motion: no-preference) {
  /* il marchio nella testata: al primo ingresso, e di nuovo al passaggio del mouse */
  .primo-ingresso .testata .segno-vivo .segno__asta { animation: segno-asta 0.6s var(--ease-porta) 0.1s both; }
  .primo-ingresso .testata .segno-vivo .segno__onda { animation: segno-onda 0.7s var(--ease-luce) calc(0.4s + var(--i) * 0.16s) both; }
  .primo-ingresso .testata .segno-vivo .segno__punto { animation: segno-punto 0.35s var(--ease-porta) calc(0.5s + var(--i) * 0.16s) both; }
  .marchio:hover .segno-vivo .segno__onda { animation: segno-onda-bis 0.8s var(--ease-luce) calc(var(--i) * 0.12s) both; }

  /* l'insegna dell'hero si compone: riga piccola, nome che si stringe, riga piccola, poi il resto */
  .sera__testata .sera__riga { animation: insegna-riga 0.9s var(--ease-porta) 0.15s both; }
  .sera__testata .sera__nome { animation: insegna-nome 1.5s var(--ease-porta) 0.25s both; }
  .sera__testata .sera__riga:last-child { animation-delay: 0.75s; }
  .sera__testo { animation: insegna-riga 0.9s var(--ease-porta) 0.95s both; }
  .sera__azioni { animation: insegna-riga 0.9s var(--ease-porta) 1.1s both; }
  .sera__colonna > .stato { animation: insegna-riga 0.9s var(--ease-porta) 1.2s both; }

  .rivela-pronto [data-rivela] {
    transition: opacity 0.9s var(--ease-luce), translate 1.1s var(--ease-porta);
    transition-delay: calc(var(--ritardo, 0) * 90ms);
  }
  .rivela-pronto [data-rivela]:not(.is-visibile) { opacity: 0; translate: 0 1.6rem; }

  /* varianti: solo dissolvenza (mosaico), gesso che scrive (titoli della lavagna), Segno che si disegna (sigilli) */
  .rivela-pronto [data-rivela="dissolvenza"]:not(.is-visibile) { translate: none; }
  .rivela-pronto [data-rivela="gesso"], .rivela-pronto [data-rivela="gesso"]:not(.is-visibile),
  .rivela-pronto [data-rivela="segno"], .rivela-pronto [data-rivela="segno"]:not(.is-visibile) { opacity: 1; translate: none; }
  .rivela-pronto [data-rivela="gesso"] > .gesso { transition: clip-path 1.2s cubic-bezier(0.45, 0.05, 0.35, 1) calc(var(--ritardo, 0) * 90ms + 0.1s); }
  .rivela-pronto [data-rivela="gesso"]:not(.is-visibile) > .gesso { clip-path: inset(0 100% 0 0); }
  .rivela-pronto [data-rivela="segno"] .segno__asta { transition: scale 0.6s var(--ease-porta) 0.1s; }
  .rivela-pronto [data-rivela="segno"] .segno__onda { transition: stroke-dashoffset 0.8s var(--ease-luce) calc(0.4s + var(--i) * 0.16s); }
  .rivela-pronto [data-rivela="segno"] .segno__punto { transition: scale 0.35s var(--ease-porta) calc(0.55s + var(--i) * 0.16s); }
  .rivela-pronto [data-rivela="segno"]:not(.is-visibile) .segno__asta { scale: 1 0; }
  .rivela-pronto [data-rivela="segno"]:not(.is-visibile) .segno__onda { stroke-dashoffset: 1; }
  .rivela-pronto [data-rivela="segno"]:not(.is-visibile) .segno__punto { scale: 0; }
  /* i sigilli compaiono solo scorrendo: prima il medaglione, poi il Segno che si disegna */
  .rivela-pronto .sigillo[data-rivela="segno"] { transition: opacity 0.6s var(--ease-luce), scale 0.8s var(--ease-porta); }
  .rivela-pronto .sigillo[data-rivela="segno"]:not(.is-visibile) { opacity: 0; scale: 0.8; }
  /* il sigillo sotto l'hero sparisce di nuovo quando si torna in cima (testata ancora trasparente) */
  .js body:has(.testata:not(.testata--solida)) .sera ~ .sezione .sigillo { opacity: 0; scale: 0.8; }
}

/* respiro tra titolo e testo nei capitoli */
.titolo-2 + .attacco, .titolo-2 + .pila, .titolo-2 + p { margin-top: var(--s-5); }

/* -----------------------------------------------------------------------------
   17. TRANSIZIONI TRA PAGINE (progressive enhancement)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.35s var(--ease-luce) both vt-spegni; }
  ::view-transition-new(root) { animation: 0.45s var(--ease-luce) both vt-accendi; }
}
@keyframes vt-spegni { to { opacity: 0; } }
@keyframes vt-accendi { from { opacity: 0; } }

/* -----------------------------------------------------------------------------
   18. MOVIMENTO RIDOTTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   19. STAMPA
   -------------------------------------------------------------------------- */
@media print {
  .testata, .menu-notte, .lanterna-magica { display: none !important; }
  [class*="superficie--"] { background: #fff !important; color: #000 !important; }
  .voce { break-inside: avoid; }
}

/* Il locale: le foto divise per capitoli, ognuno sulla superficie del suo luogo
   (la via al crepuscolo, il muro azzurro della sala, le carte sotto il vetro del bancone, le lavagne) */
.capitolo-locale__testa { margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4.75rem); }
.capitolo-locale__testa .titolo-2 { max-width: 18ch; }
.capitolo-locale__testo { max-width: 52ch; margin-top: var(--s-4); }
@media (min-width: 64em) {
  .capitolo-locale__testa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .capitolo-locale__testa > * { grid-column: 2 / span 10; }
}