/* BAK Srl — Home, copia fedele della Home del riferimento (D-21): misure, posizioni, tempi ed easing rimisurati
   (materiale/misure-*-home.tsv). Valori a 1440 × 900 e 390 × 844; dove il riferimento scala, qui vw/vh/%.
   Caratteri: Libre Caslon Display e Lato (SIL OFL 1.1, vedi ../font/OFL-*.txt). */
@font-face { font-family: "Libre Caslon Display"; src: url("../font/libre-caslon-display-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../font/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../font/lato-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../font/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../font/lato-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* ruoli del riferimento coi colori del logo BAK: fondo nero, testo bianco, accento verde del logo, passe-partout chiaro */
  --h-serif: "Libre Caslon Display", Georgia, serif;
  --h-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --h-cornice: #e6ebe7;
  --h-accento: #5cbf8f;
  --h-oro: rgb(161, 142, 86); /* oro del passaggio del mouse, come il riferimento (6,5:1 sul nero del menu) */
  --h-oro-velo: rgb(220, 201, 142); /* stesso oro schiarito: sopra la foto col velo l'oro del riferimento fa 2,5:1, questo regge 4,5:1 (accessibilità) */
  --h-ease-out: cubic-bezier(.25, .46, .45, .94);   /* easeOutQuad: avanzamento misurato 0,41 · 0,72 · 0,94 */
  --h-bordo: 2rem;                /* cornice d'inattività: 32 px a 1920 e a 393 come il riferimento (giro 22, G4) */
  --h-cornice-dura: 832ms;        /* entrata della cornice: 832 ms ease-out (393: 850 ms) */
  /* icona del menu: avanzamento misurato sul riferimento (1131 ms, ritardato rispetto all'easeOutQuad) */
  --h-icona: linear(0, .02 10%, .067 20%, .134 30%, .214 40%, .3 50%, .387 60%, .472 70%, .551 80%, .65 90%, 1);
  /* cornice: avanzamento misurato sul riferimento (stacco 1018 ms, rientro 500 ms) */
  --h-stacco: linear(0, .14 10%, .32 20%, .47 30%, .61 40%, .73 50%, .83 60%, .9 70%, .94 80%, .97 90%, 1);
  --h-rientro: linear(0, .185 10%, .376 20%, .524 30%, .652 40%, .766 50%, .854 60%, .938 70%, .969 80%, .98 90%, 1);
  --h-logo: 1390ms;
}
body.home-bak { margin: 0; background: var(--h-cornice); color: #fff; font: 400 16px/1.15 var(--h-serif); overflow-x: hidden; }
.home-bak a { color: inherit; text-decoration: none; }

/* caricamento: solo con JS; senza JS la pagina è subito visibile */
.caricamento { display: none; }
.js-home .caricamento { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 50%, #000 0, #2d2a28 100%);
  transition: opacity 700ms ease; animation: caricamento-via 0s linear 6s forwards; }
.js-home.caricato .caricamento { opacity: 0; }
.js-home.pronto .caricamento { transform: translateY(-100%); }
@keyframes caricamento-via { to { opacity: 0; visibility: hidden; } }
/* monogramma di BAK (D-49 B: cane sopra Bak, versione chiara su nero), lo stesso SVG della favicon */
.caricamento__logo { position: relative; width: 98px; height: 116px; }
.caricamento__lettera { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: .25; }
.caricamento__lettera--piena { opacity: 1; clip-path: inset(116px 0 0 0); }
/* riempimento in due passi, avanzamento misurato sul riferimento: all'85 % in 493 ms, poi al pieno in 610 ms (home.js) */
.riempi-1 .caricamento__lettera--piena { clip-path: inset(17.4px 0 0 0); transition: clip-path 493ms linear(0, .119 10%, .218 20%, .285 30%, .298 40%, .457 50%, .617 60%, .714 70%, .809 80%, .911 90%, 1); }
.riempi-2 .caricamento__lettera--piena { clip-path: inset(0 0 0 0); transition: clip-path 610ms linear(0, .113 10%, .247 20%, .365 30%, .466 40%, .554 50%, .647 60%, .732 70%, .808 80%, .9 90%, 1); }

/* soglia: 8 scene a tutto schermo scurite, logo al centro, pulsante tondo e motto, 4 voci, riga dei dati */
.soglia { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.soglia__media { position: absolute; inset: 0; overflow: hidden; background: #000; border: 0 solid var(--h-cornice); transition: border-width var(--h-cornice-dura) ease-out; }
/* finché una scena non è dipinta si vede il suo colore medio (home.js lo cambia a ogni scena); la scena 1 è nell'HTML, visibile anche senza JS */
.soglia__scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background-color: #969496; }
.soglia__scena { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.soglia__scena.attiva { opacity: 1; z-index: 1; }
.js-home .soglia__scena:not(.caricata) { opacity: 0; }
.soglia__scena.tardi { transition: opacity 200ms linear; }
.soglia__velo { position: absolute; inset: 0; background: #000; opacity: .6; }
.soglia__ui { position: absolute; inset: 0; transition: inset var(--h-cornice-dura) ease-out; }

.soglia__logo { position: absolute; left: 50%; top: 47.2%; width: 17.014vw; height: 9.993vw; margin: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; }
.soglia__logo-alto { font: italic 400 1.25vw/1 var(--h-serif); margin-bottom: .45vw; }
.soglia__logo-nome { font: 400 3.75vw/1 var(--h-serif); letter-spacing: .2em; padding-left: .2em; }
.soglia__logo-basso { display: flex; align-items: center; gap: .6vw; margin-top: .55vw; font: 700 .52vw/1 var(--h-sans); letter-spacing: .22em; white-space: nowrap; text-transform: uppercase; }
.soglia__logo-basso::before, .soglia__logo-basso::after { content: ""; width: 1.4vw; height: 1px; background: rgba(255, 255, 255, .7); }

/* motto «Oltre 20 anni di cantiere»: composizione del marchio di Antinori in alto a destra (136×75 a 1920; numero grande, parole in maiuscoletto spaziato), senza svolazzo */
.soglia__marchio { position: absolute; right: 2%; top: 5%; width: 7.0833vw; height: 3.9063vw; margin: 0; display: block; line-height: 1; color: #fff; white-space: nowrap; }
.soglia__marchio > span { position: absolute; display: block; font-family: var(--h-serif); font-weight: 400; line-height: 1; }
.soglia__marchio-numero { left: 2.55vw; top: -.07vw; font-size: 1.33vw; }
.soglia__marchio-oltre, .soglia__marchio-righe { font-size: .72vw; font-variant-caps: all-small-caps; letter-spacing: .15em; }
.soglia__marchio-oltre { right: 4.84vw; top: .45vw; }
.soglia__marchio-righe { left: 0; right: .2vw; top: 1.41vw; text-align: center; }

.soglia__gruppo { position: absolute; left: 50%; top: calc(50% + 14.69vh); transform: translateX(-50%); padding-top: 20px; display: flex; flex-direction: column; align-items: center;
  transition: top 1018ms var(--h-stacco), opacity 1000ms var(--h-ease-out); }
.soglia__pulsante { width: 52px; height: 52px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.soglia__pulsante svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.soglia__anello { stroke: rgba(255, 255, 255, .85); transition: stroke 500ms ease; }
.soglia__pulsante:hover .soglia__anello { stroke: var(--h-accento); }
.soglia__icona-play { fill: currentColor; stroke: none; display: none; }
.soglia__pulsante[aria-pressed="true"] .soglia__icona-play { display: block; }
.soglia__pulsante[aria-pressed="true"] .soglia__icona-pausa { display: none; }
.soglia__titolo { margin: 16px 0 0; font: 300 2.1919vw/1.15 var(--h-serif); color: rgba(255, 255, 255, .8); white-space: nowrap; transition: color 350ms ease-in-out;
}
.js-home.caricato .soglia__titolo { animation: ombra-via 500ms linear 1; }
.soglia__gruppo:hover .soglia__titolo { color: #fff; }
@keyframes ombra-via { from { text-shadow: 0 0 12px rgba(0, 0, 0, .8); } to { text-shadow: 0 0 0 rgba(0, 0, 0, 0); } }

.soglia__voci { position: absolute; left: 0; right: 0; bottom: 4.5%; height: 7%; }
.soglia__voci ul { display: flex; justify-content: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.soglia__voci li { position: relative; width: 11%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 700 11px/11px var(--h-sans); letter-spacing: 4px; text-transform: uppercase; text-align: center; color: #000; }
/* barra 2 px che scorre al passaggio del mouse (-101 % -> +20 %, 700 ms ease) e voce oro in 700 ms ease, come il riferimento */
.soglia__voci li::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 2px; background: #fff; transform: translateX(-101%);
  transition: transform .7s ease; pointer-events: none; }
.soglia__voci li:hover::before { transform: translateX(20%); }
.soglia__voci li:hover a { color: var(--h-oro-velo); }
/* la voce riempie la cella che taglia la barra: anello del focus dentro (bianco 2 px su nero 4 px) */
.soglia__voci a:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 4px #000; }
.soglia__voci a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 700 .6618vw/1 var(--h-sans); letter-spacing: 4px; text-transform: uppercase; color: #fff; transition: color .7s ease; }
.soglia__tratto { position: absolute; left: calc(50% - .5px); top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, .5);
  transform: skewX(-50deg) translateY(0) scaleY(.82); transition: transform 350ms linear; pointer-events: none; }
.soglia__voci li:hover .soglia__tratto { transform: skewX(-50deg) translateY(0) scaleY(1); }

.soglia__dati { position: absolute; left: 0; right: 0; bottom: 1.056%; margin: 0; text-align: center; font: 900 .6604vw/1.15 var(--h-sans); letter-spacing: 1.333px;
  text-transform: uppercase; color: rgba(255, 255, 255, .9); }

/* icona del menu e lingue: sopra a tutto, a 390 restano ferme su ogni sezione */
.icona-menu { position: fixed; z-index: 60; left: 3vw; top: 3vw; width: 3vw; height: 1.40625vw; display: block; text-align: center; color: #000;
  transition: left 1018ms var(--h-stacco), top 1018ms var(--h-stacco), opacity 1131ms var(--h-icona); }
/* giro 23, C3: tre linee piene larghe quanto l'icona, spessore 3/100 della larghezza, a 2, 20 e 38 su 40; ciascuna spezzata da un vuoto di 8/100,
   a scala: in alto a 55, al centro a 45, in basso a 35 (geometria misurata sul riferimento, scritta a mano) */
.icona-menu svg { display: block; width: 100%; height: auto; fill: none; stroke: #fff; stroke-width: 3; overflow: visible; }
.icona-menu path { transition: all 500ms ease; }
@media (hover: hover) { .icona-menu:hover path { stroke: var(--h-oro-velo); } }
.lingue-home { position: fixed; z-index: 60; right: 1.8vw; bottom: 3vh; width: 25px;
  transition: right 1018ms var(--h-stacco), bottom 1018ms var(--h-stacco), opacity 1000ms var(--h-ease-out); }
.lingue-home ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.lingue-home li { font: 700 9px/9px var(--h-sans); text-align: right; }
.lingue-home a { display: inline; font: 700 9px/9px var(--h-sans); letter-spacing: 2px; text-transform: uppercase; color: #e6e6e6; transition: color 500ms ease; text-align: right; }
.lingue-home a[aria-current], .lingue-home a:hover { color: #fff; }

/* entrata dopo il caricamento (ancora = inizio della sfumatura): logo a +180 ms in 1505 ms, interfaccia a +2085 ms in 1000 ms, easeOutQuad;
   le voci entrano una alla volta (home.js) */
.js-home .soglia__logo { opacity: 0; transition: opacity var(--h-logo) var(--h-ease-out) 180ms; }
.js-home .soglia__marchio, .js-home .soglia__gruppo, .js-home .soglia__voci, .js-home .soglia__dati, .js-home .icona-menu, .js-home .lingue-home { opacity: 0; }
.js-home .soglia__marchio, .js-home .soglia__dati { transition: opacity 1000ms var(--h-ease-out); }
.js-home.caricato .soglia__logo, .js-home.ui-dentro .soglia__voci, .js-home.ui-dentro .soglia__marchio, .js-home.ui-dentro .soglia__gruppo,
.js-home.ui-dentro .soglia__dati, .js-home.ui-dentro .icona-menu, .js-home.ui-dentro .lingue-home { opacity: 1; }

/* 4 tessere a tutta altezza: solo sotto i 1024 px, come nel riferimento */
.tessere { display: none; }
.tessera { position: relative; display: block; height: 100vh; height: 100svh; overflow: hidden; color: #fff; }
.tessera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* con JS le foto delle tessere si chiedono dopo il primo caricamento (peso a 393, home.js); fino ad allora il colore medio di ognuna */
.js-home .tessere:not([data-viste]) .tessera img { display: none; }
.tessera__velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .54); }   /* minimo per 4,5:1 sul nome sopra i 4 riquadri del giro 18 (design/differenze.md) */
.tessera__titolo { position: absolute; left: 0; right: 0; top: 50%; height: 60px; margin-top: -30px; display: flex; align-items: center; justify-content: center; }
.tessera__nome { position: relative; z-index: 1; font: 600 22px/1.15 var(--h-sans); letter-spacing: 11px; text-transform: uppercase; color: #fff; }
.tessera__tratto { position: absolute; left: calc(50% + 5.5px); top: 0; width: 1px; height: 60px; background: rgba(255, 255, 255, .5); transform: skewX(-50deg); transition: transform 350ms linear; }
.tessera:hover .tessera__tratto, .tessera:focus-visible .tessera__tratto { transform: skewX(-50deg) translateY(-8px); }
.tessera .ia { top: auto; bottom: 16px; left: 16px; }

/* 1440: cornice dopo l'inattività — l'interfaccia sfuma, il quadro si stacca dai bordi di 32 px; le scene restano a tutto quadro */
@media (min-width: 1024px) {
  :root { --h-logo: 1460ms; --h-icona: linear(0, .02 10%, .066 20%, .147 30%, .308 40%, .379 50%, .45 60%, .529 70%, .592 80%, .673 90%, 1); }
  .js-home.incorniciata .soglia__gruppo { top: calc(50% + 12.67vh); }
  .js-home.incorniciata .icona-menu { left: 5.2222vw; top: 5.2222vw; }
  .js-home.incorniciata .lingue-home { right: 3.942vw; bottom: 6.342vh; }
  /* ritorno col mouse: la cornice si toglie in 500 ms, l'interfaccia ricompare a +484 ms */
  .js-home.rientra .soglia__media, .js-home.rientra .soglia__ui { transition-duration: 500ms; transition-timing-function: var(--h-rientro); }
  .js-home.rientra .soglia__gruppo { transition-duration: 500ms, 1000ms; transition-delay: 0s, 484ms; transition-timing-function: var(--h-rientro), var(--h-ease-out); }
  .js-home.rientra .icona-menu { transition-duration: 500ms, 500ms, 1131ms; transition-delay: 0s, 0s, 484ms; transition-timing-function: var(--h-rientro), var(--h-rientro), var(--h-icona); }
  .js-home.rientra .lingue-home { transition-duration: 500ms, 500ms, 1000ms; transition-delay: 0s, 0s, 484ms; transition-timing-function: var(--h-rientro), var(--h-rientro), var(--h-ease-out); }
  .js-home.rientra .soglia__marchio, .js-home.rientra .soglia__dati { transition-delay: 484ms; }
}


@media (min-width: 1700px) {
  :root { --h-icona: linear(0, .039 10%, .118 20%, .196 30%, .315 40%, .48 50%, .583 60%, .673 70%, .753 80%, .87 90%, 1); }
}

/* cornice d'inattività (giro 22, G4), a 1920 e a 393: bordo di 32 px del colore del marchio sul quadro (misurabile come bordo, come il riferimento);
   a 393 (puntatore grosso, D-73 A, giro 24) entra solo la cornice a +480 ms: l'interfaccia non sfuma e resta toccabile (home.js) */
.js-home.ui-via .soglia__marchio, .js-home.ui-via .soglia__gruppo, .js-home.ui-via .soglia__dati,
.js-home.ui-via .icona-menu, .js-home.ui-via .lingue-home { opacity: 0; }
.js-home.ui-nascosta .soglia__marchio, .js-home.ui-nascosta .soglia__gruppo, .js-home.ui-nascosta .soglia__voci, .js-home.ui-nascosta .soglia__dati,
.js-home.ui-nascosta .icona-menu, .js-home.ui-nascosta .lingue-home { visibility: hidden; }
.js-home.incorniciata .soglia__media { border-width: var(--h-bordo); }
.js-home.incorniciata .soglia__ui { inset: var(--h-bordo); }
@media (max-width: 1023px) { :root { --h-cornice-dura: 850ms; } }
/* giro 25, C1: a 393 l'interfaccia resta visibile con la cornice (D-73 A): lingue e riga dei dati rientrano nel quadro, spostate di 32 px
   insieme alla cornice (come lingue e icona a 1920); l'icona del menu e il primo tocco non cambiano */
@media (max-width: 1023px) {
  .js-home .soglia__dati { transition: opacity 1000ms var(--h-ease-out), left var(--h-cornice-dura) var(--h-ease-out), right var(--h-cornice-dura) var(--h-ease-out), bottom var(--h-cornice-dura) var(--h-ease-out); }
  .js-home.incorniciata .soglia__dati { left: var(--h-bordo); right: var(--h-bordo); bottom: calc(7.09px + var(--h-bordo)); }
  .js-home.incorniciata .lingue-home { right: calc(6vw + var(--h-bordo)); bottom: calc(28.6px + var(--h-bordo)); }
  /* C1b: menu aperto quando torna la cornice: il pannello rientra di 32 px nel quadro, col bordo del colore della cornice; il piede sale di 64 px
     per stare nei 631 px (niente scorrimento). Senza cornice (subito dopo il tocco) e a 1920 il menu non cambia */
  .js-home.incorniciata .home-bak .menu { inset: var(--h-bordo); box-shadow: 0 0 0 var(--h-bordo) var(--h-cornice);
    transition: inset var(--h-cornice-dura) var(--h-ease-out), box-shadow var(--h-cornice-dura) var(--h-ease-out); }
  .js-home.incorniciata .home-bak .menu .menu__piede { margin-top: 59.65px; transition: margin-top var(--h-cornice-dura) var(--h-ease-out); }
}

/* 390: soglia e 4 sezioni a schermo intero, cambio di sezione in 700 ms ease (home.js) */
@media (max-width: 1023px) {
  .soglia__scene { background-color: #867f80; }
  .soglia__logo { top: 41.02%; width: 46.41vw; height: 31.03vw; }
  .soglia__logo-alto { font-size: 3.4vw; margin-bottom: 1.2vw; }
  .soglia__logo-nome { font-size: 10vw; }
  .soglia__logo-basso { font-size: 1.4vw; gap: 1.6vw; margin-top: 1.5vw; }
  .soglia__logo-basso::before, .soglia__logo-basso::after { width: 5.5vw; }
  .soglia__marchio { right: 2.6vw; top: 1.6%; width: 23.92vw; height: 13.23vw; }
  .soglia__marchio-numero { left: 8.8vw; top: .18vw; font-size: 4.45vw; }
  .soglia__marchio-oltre, .soglia__marchio-righe { font-size: 3.32vw; letter-spacing: .06em; }
  .soglia__marchio-oltre { right: 16.03vw; top: 1vw; }
  .soglia__marchio-righe { right: 0; top: 4.17vw; }
  .soglia__gruppo { top: 57.43%; }
  .soglia__pulsante { width: 60px; height: 60px; padding: 6px; }
  .soglia__titolo { font-size: 28px; line-height: 32.2px; }
  .soglia__voci { display: none; }
  .soglia__dati { bottom: 7.09px; font-size: 7.1px; line-height: 8.16px; }
  .icona-menu { left: 6vw; top: 25px; width: 40px; height: 20.39px; }
  .lingue-home { right: 6vw; bottom: 28.6px; width: 31px; }
  .lingue-home ul { gap: 10px; }
  .lingue-home li, .lingue-home a { font-size: 12px; line-height: 12px; font-weight: 400; }
  .tessere { display: block; }
}

/* movimento ridotto: niente caricamento né cornice, solo dissolvenze ≤ 200 ms */
@media (prefers-reduced-motion: reduce) {
  .js-home .caricamento { display: none; }
  .js-home .soglia__logo, .js-home .soglia__marchio, .js-home .soglia__gruppo, .js-home .soglia__voci, .js-home .soglia__dati,
  .js-home .icona-menu, .js-home .lingue-home { opacity: 1; transition-duration: 200ms; transition-delay: 0s; }
  .js-home .soglia__titolo, .js-home.caricato .soglia__titolo { animation: none; }
  /* le scene restano in ciclo (pausa disponibile), senza movimento lento: dissolvenza di 200 ms sopra la scena che esce */
  .soglia__scena { transition: opacity 200ms linear; }
  .soglia__scena.uscente { opacity: 1; transition: none; }
  .soglia__media, .soglia__ui, .soglia__gruppo, .icona-menu, .lingue-home, .tessera__tratto, .soglia__tratto { transition-duration: 0s; }
}

/* menu aperto (giro 20, G1): valori del riferimento a 1920×959 e 393×695; elementi separati (pannello, logo, colonne col divisorio,
   titolo, elenco, piede con la linea, chiudi) per le animazioni di apertura e chiusura (G2) e del passaggio del mouse (G3) */
.home-bak .menu { display: none; position: fixed; inset: 0; z-index: 80; flex-direction: column; padding: 9.59px 0 0; background: #000; color: #000;
  font: 400 16px/18.4px var(--h-serif); text-align: start; overflow-x: hidden; overflow-y: auto; }
.home-bak .menu:target, .home-bak .menu.aperto { display: flex; }
/* G2, giro 21: fondo nero sotto il menu, sempre trasparente e senza clic; home.js lo scurisce (lineare, tempi del pannello) mentre il menu
   si apre, così a 400 ms la Home (più chiara di quella del riferimento) non traspare più; si toglie appena parte la chiusura (pannello opaco) */
body.home-bak::before { content: ""; position: fixed; inset: 0; z-index: 79; background: #000; opacity: 0; pointer-events: none; }
.home-bak .menu .chiudi-menu { position: absolute; z-index: 2; left: 1.6vw; top: 4.003vh; width: 4.4995vw; height: 66px; color: #000; text-align: center;
  transition: opacity .15s ease-in-out; }
.home-bak .menu .chiudi-menu::before, .home-bak .menu .chiudi-menu::after { content: ""; position: absolute; top: 0; left: 43.19px; width: 1px; height: 66px;
  background: #fff; transform: rotate(45deg); transition: background-color .5s ease; }
.home-bak .menu .chiudi-menu::after { transform: rotate(-45deg); }
@media (hover: hover) { .home-bak .menu .chiudi-menu:hover::before, .home-bak .menu .chiudi-menu:hover::after { background: var(--h-oro); } }
.menu__logo { flex: none; display: flex; justify-content: center; width: 10vw; height: 118.98px; margin: 41.68px auto 0; }
.menu__logo-link, .menu__logo img { display: block; height: 114.59px; width: auto; }
.menu__colonne { flex: none; display: flex; justify-content: center; margin: 32.16px 0 0; padding: 0; list-style: none; }
.home-bak .menu .menu__colonna { position: relative; width: 20vw; height: 482.234px; min-height: 0; padding: 0; border: 0; text-align: center; color: #000; transform: translate(0, 0); }
.menu__colonna::after { content: ""; position: absolute; top: -48.2188px; right: 0; width: 1px; height: 578.672px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, 0)); }
.menu__titolo { position: relative; display: inline-flex; vertical-align: top; width: 9vw; height: 59.39px; margin: 0 0 42.23px; overflow: hidden; color: #000;
  font: 700 11px/11px var(--h-sans); letter-spacing: 4px; text-transform: uppercase; text-align: center; transform: translate(0, 0); }
.menu__titolo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 2px; background: #fff; transform: translateX(-101%); transition: transform .7s ease; }
.home-bak .menu .menu__titolo-link { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: color .7s ease; }
@media (hover: hover) { .menu__titolo:hover::before { transform: translateX(20%); } }
@media (hover: hover) { .home-bak .menu .menu__titolo:hover .menu__titolo-link { color: var(--h-oro); } }
.menu__titolo-link:focus-visible { outline-offset: -2px; box-shadow: none; }
.menu__tratto { position: absolute; top: 0; left: 56.7px; width: 60.39px; height: 100%; pointer-events: none;
  background: linear-gradient(to bottom right, transparent 49.4%, rgba(255, 255, 255, .5) 49.4%, rgba(255, 255, 255, .5) 50.6%, transparent 50.6%); }
.menu__elenco { margin: 0; padding: 1px 0 0; list-style: none; }
.menu__elenco li { font: 400 25px/50px var(--h-serif); }
.menu__elenco li + li { margin-top: 11.52px; }
/* voci: bianco a opacità .4 come il riferimento (3,66:1 sul nero), ammesso perché il corpo 25 px è testo grande (≥ 24 px, soglia 3:1) */
.home-bak .menu .menu__voce { display: inline; padding: 0; font: 400 25px/50px var(--h-serif); color: #fff; opacity: .4; text-decoration: none; transition: all .35s ease-in-out; }
/* voce al mouse: oro pieno (6,5:1 sul nero), 350 ms ease-in-out */
@media (hover: hover) { .home-bak .menu .menu__voce:hover { color: var(--h-oro); opacity: 1; } }
.menu__piede { flex: none; position: relative; width: 25vw; height: 130.14px; margin: 51.36px auto 0; color: #000; }
.menu__barra { position: absolute; left: 0; right: 0; top: 80px; padding-top: 28px; text-align: center; }
.menu__barra::before, .menu__barra::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, 0)); }
.menu__barra::after { display: none; }
/* testo piccolo: bianco al 46 % (4,55:1), il minimo sopra 4,5:1 */
.menu__dati { margin: 0; font: 700 9px/15px var(--h-sans); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .46); }
.menu__contatti { display: none; }
/* lingue nel menu (giro 22, G6): misure del riferimento col menu aperto; a 1920 in alto a destra in colonna, a 393 in riga sotto la barra.
   Grigio #adadad sul nero 9,3:1; attiva bianca. Compare dopo l'apertura (campioni ogni 250 ms: da ~2,68 s, ~0,37 s); senza JS (:target) visibile subito. */
.home-bak .menu .menu__lingue { position: absolute; top: 14.9px; right: 13.4px; margin: 0; padding: 0; list-style: none; text-align: right; }
.home-bak .menu .menu__lingue li { display: block; font: 700 9px/9px var(--h-sans); }
.home-bak .menu .menu__lingue li + li { margin-top: 11px; }
.home-bak .menu .menu__lingue a { font: inherit; letter-spacing: 2px; text-transform: uppercase; color: #adadad; text-decoration: none; transition: color .5s; }
.home-bak .menu .menu__lingue a[aria-current="page"] { color: #fff; }
.home-bak .menu.aperto .menu__lingue { animation: menu-lingue .37s linear 2.68s both; }
@keyframes menu-lingue { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
  .home-bak .menu .menu__lingue { top: auto; right: 0; left: 0; bottom: 46.3px; height: 28px; padding-top: 5px; box-sizing: border-box; text-align: center; font-size: 0; }
  .home-bak .menu .menu__lingue li { display: inline-block; vertical-align: top; font: 400 12px/12px var(--h-sans); }
  .home-bak .menu .menu__lingue li + li { margin: 0 0 0 3px; }
  .home-bak .menu .menu__lingue li:first-child { margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .home-bak .menu.aperto .menu__lingue { animation-duration: .2s; } }
@media (max-width: 1023px) {
  .home-bak .menu { padding-top: 5.89px; }
  .home-bak .menu .chiudi-menu { left: auto; right: 9.81px; top: 13.89px; width: 32px; }
  .home-bak .menu .chiudi-menu::before, .home-bak .menu .chiudi-menu::after { left: 16px; height: 23px; border-radius: 2px; }
  .menu__logo, .menu__elenco { display: none; }
  .menu__colonne { display: block; margin-top: 61.36px; }
  .home-bak .menu .menu__colonna { width: 100%; height: 70.92px; }
  .menu__colonna::after { display: none; }
  .menu__titolo { width: 55vw; height: 50px; margin-bottom: 20.92px; font-size: 16.1px; line-height: 16.1px; }
  .home-bak .menu .menu__titolo-link { letter-spacing: .4em; margin-right: -.4em; }
  .menu__tratto { left: 83.06px; width: 50.5px; }
  .menu__piede { width: 35.37vw; height: 190.14px; margin-top: 123.65px; }
  .menu__barra { top: 79.4px; height: 50px; padding-top: 10px; box-sizing: border-box; }
  .menu__barra::after { display: block; top: auto; bottom: 0; }
  .menu__dati { line-height: 15px; letter-spacing: 1px; }
  /* in fondo come il riferimento; bianco al 46 % invece del 40 % per il contrasto 4,5:1 del testo piccolo */
  .home-bak .menu .menu__contatti { display: block; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box; padding: 19.64px;
    font: 700 11px/12.65px var(--h-sans); letter-spacing: 4px; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .46); text-decoration: none; transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-bak .menu .menu__voce, .menu__titolo-link, .home-bak .menu .chiudi-menu { transition-duration: .2s; }
  .menu__titolo::before { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soglia__voci li::before { transform: translateX(20%); opacity: 0; transition: opacity .2s ease; }
  .soglia__voci li:hover::before { opacity: 1; }
  .soglia__voci a, .icona-menu path { transition-duration: .2s; }
}