/* Aria Steak House — identità
   Palette presa solo dal locale:
   Notte Provinciale  #0b1528  il cielo blu sopra l'ingresso, la sera
   Abisso             #060d1a  il fondo della notte
   Corten             #a5532e  la lastra d'acciaio dell'insegna
   Acciaio            #e2e3e0  le lettere tagliate al laser del marchio
   Agave              #9db4b0  le foglie argentate delle agavi in giardino
   Cactus             #86c44a  i cereus illuminati dal basso
   LED                #f2ba63  le lame di luce nella sala
   Affresco           #d9c6a3  l'intonaco del toro dipinto
   Font: Aria Didone (titoli), Aria Corten (stampatello bold), Bodoni Moda (testi e corsivi). */

@font-face { font-family: 'Aria Didone'; src: url('../assets/fonts/AriaDidone.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aria Corten'; src: url('../assets/fonts/AriaCorten-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Aria Corten'; src: url('../assets/fonts/AriaCorten-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/bodoni-moda-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/bodoni-moda-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --notte: #0b1528;
  --notte-2: #111f38;
  --abisso: #060d1a;
  --corten: #a5532e;
  --corten-luce: #c4693b;
  --acciaio: #e2e3e0;
  --agave: #9db4b0;
  --cactus: #86c44a;
  --led: #f2ba63;
  --affresco: #d9c6a3;

  --f-didone: 'Aria Didone', 'Bodoni Moda', serif;
  --f-corten: 'Aria Corten', 'Arial Narrow', sans-serif;
  --f-bodoni: 'Bodoni Moda', Georgia, serif;
  --f-text: 'Bodoni Moda', Georgia, serif;

  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--acciaio);
  font: 400 clamp(16px, 1.1vw, 19px)/1.6 var(--f-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
::selection { background: var(--corten); color: var(--acciaio); }
:focus-visible { outline: 2px solid var(--led); outline-offset: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo-sub { font: 600 7.6px var(--f-corten); letter-spacing: .08em; fill: currentColor; }

/* tipografia */
.didone { font-family: var(--f-didone); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
.corten { font-family: var(--f-corten); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: .01em; }
.bodoni { font-family: var(--f-bodoni); font-style: italic; font-weight: 400; line-height: 1.2; }

/* pillole, come i bottoni dei grandi indirizzi */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-radius: 999px; background: var(--corten); color: var(--acciaio); font: 600 15px/1 var(--f-corten); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), translate .4s var(--ease); box-shadow: 0 10px 30px -12px rgba(165, 83, 46, .7); }
.pill:hover { background: var(--corten-luce); translate: 0 -2px; }
.pill--big { min-height: 56px; padding: 0 34px; font-size: 17px; }
.pill--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(226, 227, 224, .4); }
.pill--ghost:hover { background: rgba(226, 227, 224, .08); }
.link { color: var(--agave); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease), color .3s; }
.link:hover { color: var(--acciaio); background-size: 0 1px; background-position: 100% 100%; }

/* parole che si accendono allo scroll */
.w { opacity: .14; transition: opacity .2s linear; }
.no-motion .w { opacity: 1; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.loader__half { position: absolute; left: 0; right: 0; background: var(--abisso); }
.loader__half--top { top: 0; height: 50.2%; }
.loader__half--bot { bottom: 0; height: 50.2%; }
.loader__logo { position: absolute; left: 50%; top: 50%; width: min(240px, 50vw); fill: var(--acciaio); color: var(--acciaio); overflow: visible; opacity: 0; }
.loader__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--acciaio); transform: scaleX(0); transform-origin: 0 50%; }
.no-motion .loader, .no-js .loader { display: none; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 18px var(--gut); transition: transform .6s var(--ease); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-120%); }
.nav__logo { width: 62px; color: var(--acciaio); fill: var(--acciaio); transition: color .3s; }
.nav__logo:hover { color: var(--corten-luce); fill: var(--corten-luce); }
.nav__logo svg { width: 100%; height: auto; }
.nav__burger { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--corten); padding: 0; cursor: pointer; position: relative; box-shadow: 0 10px 30px -12px rgba(165, 83, 46, .7); transition: background .3s; }
.nav__burger:hover { background: var(--corten-luce); }
.nav__burger i { position: absolute; left: 15px; right: 15px; height: 1.5px; background: var(--acciaio); transition: transform .5s var(--ease); }
.nav__burger i:first-child { top: 21px; }
.nav__burger i:last-child { top: 28px; }
.nav__burger[aria-expanded='true'] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__cta { margin-left: auto; }

.menu { position: fixed; z-index: 45; inset: 0; background: var(--abisso); display: grid; grid-template-rows: 1fr auto; padding: 110px var(--gut) 40px; overflow: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.menu nav a { display: flex; align-items: baseline; gap: 18px; font: 400 clamp(40px, 7.4vw, 104px)/1.02 var(--f-didone); text-transform: uppercase; color: var(--acciaio); text-decoration: none; transition: color .3s, translate .5s var(--ease); }
.menu nav a span { font: 600 13px var(--f-corten); letter-spacing: .1em; color: var(--corten-luce); }
.menu nav a:hover { color: var(--corten-luce); translate: 14px 0; }
.menu__foot { font: 600 13px var(--f-corten); letter-spacing: .12em; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 30px; border-top: 1px solid rgba(157, 180, 176, .2); color: var(--agave); }
.menu__foot a { font: 800 22px var(--f-corten); color: var(--acciaio); text-decoration: none; letter-spacing: .04em; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--abisso); --line-y: 53%; --logo-w: min(62vw, 880px, 92vh); }
.hero__half { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.hero__half--top { clip-path: inset(0 0 calc(100% - var(--line-y)) 0); }
.hero__half--bot { clip-path: inset(var(--line-y) 0 0 0); }
.hero__bg { position: absolute; inset: -4%; background: url('../assets/img/brace.jpg') 60% 45% / cover no-repeat; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, rgba(6, 13, 26, .25), rgba(6, 13, 26, .8) 75%), linear-gradient(180deg, rgba(6, 13, 26, .7), rgba(6, 13, 26, .1) 35%, rgba(6, 13, 26, .2) 65%, rgba(6, 13, 26, .95)); }
/* il marchio: la sua barra coincide con la linea che taglia lo schermo */
.hero__logo { position: absolute; left: 50%; top: var(--line-y); width: var(--logo-w); transform: translate(-50%, -65.23%); color: var(--acciaio); fill: var(--acciaio); line-height: 0; filter: drop-shadow(0 20px 60px rgba(0, 0, 0, .55)); }
.hero__logo svg { width: 100%; height: auto; overflow: visible; }
.hero__line { position: absolute; left: 0; right: 0; top: var(--line-y); height: calc(var(--logo-w) * 3.1 / 94); transform: translateY(-50%); background: var(--acciaio); z-index: 2; transform-origin: 50% 50%; }
.hero__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(26px, 5vh, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; z-index: 4; }
.hero__lead { font-size: clamp(30px, 3.6vw, 64px); max-width: 13em; color: var(--acciaio); }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.hero__reveal { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 0 var(--gut); opacity: 0; background: radial-gradient(60% 50% at 50% 50%, var(--notte-2), var(--abisso)); }
.hero__city { font-size: clamp(48px, 10.5vw, 210px); color: var(--acciaio); }
@media (min-width: 900px) { .hero__city { white-space: nowrap; } }
.hero__reveal .bodoni { font-size: clamp(22px, 2.6vw, 44px); color: var(--affresco); }

/* ---------- la carne ---------- */
.carne { position: relative; padding-top: clamp(120px, 20vh, 240px); background: linear-gradient(180deg, var(--abisso), var(--notte) 30%); }
.manifesto { font-size: clamp(42px, 6.6vw, 124px); padding: 0 var(--gut); max-width: 18ch; margin-left: auto; margin-right: auto; text-align: center; line-height: .98; }
.carne__pin { margin-top: clamp(90px, 16vh, 200px); }
.carne__track { display: flex; flex-direction: column; gap: clamp(80px, 12vh, 140px); padding: 0 var(--gut) clamp(80px, 12vh, 140px); }
.step { display: grid; gap: 30px; }
.step__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--abisso); border-radius: 4px; }
.step__media img, .step__media video { width: 100%; height: 100%; object-fit: cover; }
.step__n { display: block; font-size: 26px; color: var(--corten-luce); margin-bottom: 14px; }
.step__text h2 { font-size: clamp(76px, 11vw, 210px); line-height: .85; margin-bottom: 24px; }
.step__text p { font-size: clamp(21px, 1.9vw, 32px); color: var(--affresco); max-width: 17em; }
@media (min-width: 900px) {
  .carne__pin { height: 100vh; overflow: hidden; }
  .carne__track { flex-direction: row; gap: 0; width: max-content; height: 100%; padding: 0; }
  .step { width: 100vw; height: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; padding: 9vh var(--gut); align-items: center; }
  .step__media { height: 82vh; aspect-ratio: auto; }
  .step:nth-child(2) .step__media { order: 2; }
}

/* ---------- cucina ---------- */
.piatti { position: relative; padding: clamp(130px, 20vh, 240px) var(--gut) clamp(100px, 16vh, 190px); background: linear-gradient(180deg, var(--abisso), var(--notte) 25%); }
.statement { font-size: clamp(40px, 6vw, 112px); max-width: 16ch; line-height: .98; }
.piatti__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 30px); margin-top: clamp(60px, 10vh, 120px); }
.tile { position: relative; overflow: hidden; background: var(--abisso); border-radius: 4px; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile--a { grid-column: 1 / span 6; aspect-ratio: 9 / 14; }
.tile--b { grid-column: 7 / span 6; aspect-ratio: 4 / 5; margin-top: 30%; }
.tile--c { grid-column: 3 / span 8; aspect-ratio: 9 / 13; margin-top: -8%; }
@media (min-width: 900px) {
  .tile--a { grid-column: 1 / span 4; margin-top: 8vh; }
  .tile--b { grid-column: 5 / span 4; margin-top: 32vh; }
  .tile--c { grid-column: 9 / span 4; margin-top: 0; }
}

/* ---------- cantina ---------- */
.cantina { display: grid; gap: 50px; padding: clamp(90px, 14vh, 160px) var(--gut); align-items: center; }
.cantina__media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; }
.cantina__big { width: 100%; height: 100%; object-fit: cover; }
.cantina__title { font-size: clamp(54px, 7.6vw, 140px); }
.cantina__body { margin-top: 30px; max-width: 30em; color: var(--agave); font-size: clamp(16px, 1.2vw, 20px); }
@media (min-width: 900px) { .cantina { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7vw; } .cantina__media { aspect-ratio: auto; height: 86vh; } }

/* ---------- sala ---------- */
.sala { position: relative; background: var(--abisso); }
.sala__track { display: flex; flex-direction: column; gap: 26px; padding: clamp(100px, 16vh, 180px) var(--gut); }
.sala__intro { max-width: 680px; }
.sala__title { font-size: clamp(52px, 7.4vw, 136px); }
.sala__intro .bodoni { font-size: clamp(22px, 2.2vw, 36px); color: var(--affresco); margin-top: 24px; max-width: 15em; }
.sala__img { overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 4; }
.sala__img--wide { aspect-ratio: 3 / 2; }
.sala__img img { width: 100%; height: 100%; object-fit: cover; }
.sala__outro { padding: 6vh 0; }
.sala__outro .didone { font-size: clamp(64px, 10vw, 190px); }
.sala__outro .bodoni { font-size: clamp(40px, 6vw, 112px); color: var(--corten-luce); margin-top: .05em; }
@media (min-width: 900px) {
  .sala__pin { height: 100vh; overflow: hidden; }
  .sala__track { flex-direction: row; align-items: center; gap: 4vw; height: 100%; width: max-content; padding: 0 10vw 0 var(--gut); }
  .sala__intro { width: 40vw; flex: none; }
  .sala__img { height: 70vh; flex: none; }
  .sala__img--tall { height: 82vh; }
  .sala__img img { width: 114%; max-width: none; margin-left: -7%; }
  .sala__outro { flex: none; padding: 0 0 0 4vw; }
}

/* ---------- ingresso con i cactus ---------- */
.ingresso { position: relative; height: 260vh; background: var(--notte); }
.ingresso__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ingresso__bg { position: absolute; inset: -5%; background: url('../assets/img/ingresso.jpg') 50% 60% / cover no-repeat; opacity: .32; filter: saturate(1.1); }
.ingresso__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--notte) 0%, rgba(11, 21, 40, .5) 40%, rgba(6, 13, 26, .85) 100%); }
.ingresso__glow { position: absolute; bottom: -20vh; width: 60vw; height: 70vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(134, 196, 74, .32), rgba(134, 196, 74, 0)); opacity: 0; pointer-events: none; }
.ingresso__glow--l { left: -18vw; }
.ingresso__glow--r { right: -22vw; }
.cactus { position: absolute; bottom: 0; height: 92%; width: auto; fill: none; stroke: var(--cactus); stroke-linecap: round; overflow: visible; filter: drop-shadow(0 0 6px rgba(134, 196, 74, .55)); }
.cactus--l { left: max(-4vw, -40px); }
.cactus--r { right: 2vw; height: 72%; }
.cx-sil { stroke-width: 2.2; }
.cx-rib { stroke-width: 1.1; opacity: .75; }
.cx-dot { stroke-width: 4; stroke: var(--affresco); opacity: 0; }
.js-anim .cx-sil, .js-anim .cx-rib { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ingresso__copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); z-index: 2; }
.ingresso__copy .didone { font-size: clamp(44px, 6.4vw, 120px); max-width: 14ch; }
.ingresso__copy .bodoni { font-size: clamp(26px, 3.2vw, 56px); color: var(--affresco); margin-top: .3em; }
.js-anim .ingresso__copy > * { opacity: 0; }
@media (max-width: 899px) {
  .cactus--l { height: 62%; left: -18vw; opacity: .55; }
  .cactus--r { height: 46%; right: -6vw; opacity: .55; }
}

/* ---------- social media ---------- */
.social { position: relative; overflow: hidden; padding: clamp(110px, 16vh, 180px) var(--gut) clamp(100px, 14vh, 160px); isolation: isolate; }
.social__bg { position: absolute; inset: -10% 0; z-index: -1; background: url('../assets/img/toro-sala.jpg') 30% 30% / cover no-repeat; }
.social__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 21, 40, .82), rgba(6, 13, 26, .9)), rgba(11, 21, 40, .3); }
.social__head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.social__title { font-size: clamp(76px, 15vw, 290px); line-height: .82; color: var(--acciaio); white-space: nowrap; }
.social__mark { position: absolute; left: 50%; top: clamp(0px, .4vw, 10px); width: clamp(90px, 12vw, 220px); transform: translateX(-50%); fill: var(--corten-luce); color: var(--corten-luce); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6)); }
.social__sub { margin: 30px 0 26px; font-size: clamp(15px, 1.3vw, 20px); font-weight: 600; letter-spacing: .24em; color: var(--agave); }
.social__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.2vw, 20px); margin-top: clamp(50px, 8vh, 90px); }
.social__grid a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 4px; background: var(--abisso); }
.social__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.social__grid a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(165, 83, 46, .55), transparent 60%); opacity: 0; transition: opacity .5s; }
.social__grid a:hover img { transform: scale(1.07); }
.social__grid a:hover::after { opacity: 1; }
@media (min-width: 900px) { .social__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- prenota ---------- */
.book { position: relative; padding: clamp(120px, 18vh, 210px) var(--gut); background: radial-gradient(70% 60% at 50% 100%, rgba(165, 83, 46, .22), transparent 70%), var(--notte); }
.book__inner { max-width: 1500px; margin: 0 auto; }
.book__kicker { font-size: clamp(26px, 3vw, 52px); color: var(--affresco); }
.book__tel { display: block; font-size: clamp(64px, 13.5vw, 270px); text-decoration: none; margin: 18px 0 clamp(50px, 8vh, 90px); white-space: nowrap; transition: color .4s; }
.book__tel:hover { color: var(--corten-luce); }
.book__info { display: grid; grid-template-columns: 1fr; gap: 30px; border-top: 1px solid rgba(157, 180, 176, .25); padding-top: 36px; }
.book__info p { font: 400 clamp(20px, 1.7vw, 28px)/1.35 var(--f-bodoni); font-style: italic; color: var(--acciaio); }
.book__info .link { font: 600 14px var(--f-corten); letter-spacing: .14em; text-transform: uppercase; display: inline-block; margin-top: 10px; font-style: normal; }
.book__cta { margin-top: 56px; }
@media (min-width: 760px) { .book__info { grid-template-columns: repeat(3, 1fr); } }

/* ---------- footer ---------- */
.foot { padding: 80px var(--gut) 50px; text-align: center; background: var(--abisso); }
.foot__logo { width: 130px; margin: 0 auto 26px; fill: var(--acciaio); color: var(--acciaio); }
.foot__claim { font-size: clamp(22px, 2.2vw, 34px); color: var(--affresco); margin-bottom: 28px; }
.foot__meta { font: 600 12px/1.6 var(--f-corten); letter-spacing: .12em; text-transform: uppercase; color: var(--agave); margin-top: 8px; }
.foot__meta a { color: inherit; }

/* ---------- transizione tra le pagine: la mezzaluna ---------- */
.veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.veil__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.veil__shape { fill: var(--corten); }
.veil__mark { position: absolute; left: 50%; top: 50%; width: 110px; transform: translate(-50%, -50%); fill: var(--acciaio); color: var(--acciaio); opacity: 0; }
.no-js .veil, .no-motion .veil { display: none; }

/* cursore: una piccola mezzaluna */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; width: 26px; pointer-events: none; fill: var(--corten-luce); opacity: 0; transition: opacity .3s, width .4s var(--ease); mix-blend-mode: normal; }
.cursor svg { width: 100%; height: auto; overflow: visible; }
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 46px; fill: var(--acciaio); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- il toro in filigrana (home) ---------- */
.filigrana { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; fill: none; overflow: visible; }
.filigrana .fl-main { stroke: var(--acciaio); stroke-width: 1; opacity: .38; }
.filigrana .fl-bull { stroke: var(--corten-luce); stroke-linejoin: round; }
.no-motion .filigrana { display: none; }

/* ---------- le corna come portale (home) ---------- */
.portal { position: relative; height: 330vh; background: var(--abisso); }
.portal__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.portal__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal__edge { fill: none; stroke: var(--acciaio); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.portal__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(40px, 10vh, 110px); z-index: 2; opacity: 0; }
.portal__copy .didone { font-size: clamp(56px, 9vw, 170px); text-shadow: 0 10px 50px rgba(0, 0, 0, .5); }
.portal__copy .bodoni { font-size: clamp(22px, 2.4vw, 40px); color: var(--affresco); margin-top: 12px; }
.portal__pin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 13, 26, .75)); opacity: var(--shade, 0); pointer-events: none; }
.no-motion .portal { height: auto; }
.no-motion .portal__pin { position: relative; height: 80vh; }

.intro { padding: clamp(120px, 20vh, 240px) 0 clamp(60px, 10vh, 120px); background: var(--abisso); }

/* ---------- capitoli (home) ---------- */
.chapters { position: relative; display: block; padding: clamp(40px, 6vh, 80px) var(--gut) clamp(110px, 16vh, 190px); background: var(--abisso); }
.chapter { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: clamp(18px, 3vw, 50px); padding: clamp(22px, 3.4vh, 40px) 0; border-top: 1px solid rgba(157, 180, 176, .2); text-decoration: none; color: var(--acciaio); }
.chapter:last-child { border-bottom: 1px solid rgba(157, 180, 176, .2); }
.chapter__n { font: 400 clamp(18px, 1.6vw, 26px) var(--f-didone); color: var(--corten-luce); }
.chapter__t { font-size: clamp(56px, 9.4vw, 176px); transition: translate .7s var(--ease), color .4s; }
.chapter__l { grid-column: 2; font-size: clamp(19px, 1.7vw, 28px); color: var(--agave); margin-top: 8px; }
.chapter:hover .chapter__t { translate: 24px 0; color: var(--corten-luce); }
.chapter__img { display: none; }
.chapters__float { position: absolute; left: 0; top: 0; width: clamp(220px, 22vw, 380px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; pointer-events: none; z-index: 3; opacity: 0; scale: .8; transition: opacity .4s, scale .6s var(--ease); }
.chapters__float.is-on { opacity: 1; scale: 1; }
.chapters__float img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px), (hover: none) {
  .chapter { grid-template-columns: auto 1fr 96px; }
  .chapter__img { display: block; grid-column: 3; grid-row: 1 / span 2; width: 96px; height: 120px; object-fit: cover; border-radius: 3px; align-self: center; }
  .chapters__float { display: none; }
}

/* ---------- aperture delle pagine interne ---------- */
.phero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--abisso); }
.phero__bg { position: absolute; inset: -4% 0; background-position: center; background-size: cover; }
.phero__bg video { width: 100%; height: 100%; object-fit: cover; }
.phero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 26, .55), rgba(6, 13, 26, .1) 40%, rgba(6, 13, 26, .85)); }
.phero--cantina .phero__bg { background-image: url('../assets/img/cantina-sala.jpg'); }
.phero--villa .phero__bg { background-image: url('../assets/img/villa.jpg'); }
.phero__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(40px, 10vh, 110px); z-index: 2; }
.phero__title { font-size: clamp(76px, 15vw, 290px); line-height: .82; }
.phero__line { font-size: clamp(22px, 2.6vw, 44px); color: var(--affresco); margin-top: 18px; max-width: 22em; }

/* ---------- lo sguardo nella brace (la carne) ---------- */
.sguardo { position: relative; height: 340vh; background: var(--abisso); }
.sguardo__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sguardo__box { position: absolute; left: 50%; top: 50%; width: var(--bw, 100vw); aspect-ratio: 957 / 1048; translate: -50% -50%; transform-origin: 58.2% 44.4%; will-change: transform; }
.sguardo__fresco { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(.16) saturate(.5) sepia(.2); }
.sguardo__lit { filter: brightness(1.15) contrast(1.05); opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 35% 44.6%, #000 0, #000 2.4%, transparent 7%), radial-gradient(circle at 58.2% 44.4%, #000 0, #000 2.4%, transparent 7%);
  mask-image: radial-gradient(circle at 35% 44.6%, #000 0, #000 2.4%, transparent 7%), radial-gradient(circle at 58.2% 44.4%, #000 0, #000 2.4%, transparent 7%); }
.sguardo__glint { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(242, 186, 99, .55), rgba(242, 186, 99, 0)); mix-blend-mode: screen; opacity: 0; }
.sguardo__glint--l { left: 35%; top: 44.6%; }
.sguardo__glint--r { left: 58.2%; top: 44.4%; }
.sguardo__flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffe2aa, var(--led) 40%, var(--corten) 100%); opacity: 0; }
.sguardo__fire { position: absolute; inset: -5%; background: url('../assets/img/brace.jpg') 55% 45% / cover no-repeat; opacity: 0; }
.sguardo__fire::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 26, .45), rgba(6, 13, 26, .05) 40%, rgba(6, 13, 26, .9)); }
.sguardo__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(40px, 10vh, 110px); z-index: 3; }
.js-anim .sguardo__copy > * { opacity: 0; }
.no-motion .sguardo { height: auto; }
.no-motion .sguardo__pin { position: relative; }
.no-motion .sguardo__fire { opacity: 1; }

/* ---------- blocchi comuni ---------- */
.full { position: relative; height: 110vh; overflow: hidden; }
.full__media { position: absolute; inset: -6% 0; }
.full__media img, .full__media video { width: 100%; height: 100%; object-fit: cover; }
.full__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 26, .6), rgba(6, 13, 26, .05) 35%, rgba(6, 13, 26, .85)); }
.full__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(50px, 12vh, 130px); z-index: 2; }
.full__copy .didone { font-size: clamp(54px, 8.4vw, 160px); }
.full__copy .bodoni { font-size: clamp(22px, 2.6vw, 44px); color: var(--affresco); margin-top: 12px; }
.full--video .full__media video { object-position: 50% 40%; }

.duo { display: grid; gap: 40px; padding: clamp(100px, 16vh, 180px) var(--gut); align-items: center; background: var(--abisso); }
.duo__media { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__text { font-size: clamp(34px, 4.2vw, 78px); line-height: 1; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 7vw; }
  .duo__media { height: 84vh; aspect-ratio: auto; }
  .duo--rev .duo__media { order: 2; }
  .duo--rev .duo__media { aspect-ratio: auto; }
}

.cta { padding: clamp(110px, 18vh, 200px) var(--gut); text-align: center; background: radial-gradient(70% 70% at 50% 100%, rgba(165, 83, 46, .2), transparent 70%), var(--notte); }
.cta__title { font-size: clamp(56px, 9vw, 170px); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }

.book--page { min-height: 100vh; display: flex; align-items: flex-end; padding-top: 24vh; overflow: hidden; }
.book--page .book__inner { position: relative; z-index: 2; width: 100%; }
.book__bg { position: absolute; inset: 0; background: url('../assets/img/ingresso.jpg') 50% 60% / cover no-repeat; opacity: .28; }
.book__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--notte), rgba(11, 21, 40, .4) 40%, var(--notte)); }
.book__kicker.didone { font-size: clamp(40px, 5vw, 90px); color: var(--acciaio); }

.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-bottom: 30px; }
.foot__nav a { font: 600 14px var(--f-corten); letter-spacing: .16em; text-transform: uppercase; color: var(--acciaio); text-decoration: none; }
.foot__nav a:hover { color: var(--corten-luce); }
.menu nav a[aria-current='page'] { color: var(--corten-luce); }

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  .nav { padding: 12px var(--gut); }
  .nav__logo { width: 52px; }
  .nav__burger { width: 44px; height: 44px; }
  .nav__burger i { left: 13px; right: 13px; }
  .nav__burger i:first-child { top: 18px; }
  .nav__burger i:last-child { top: 25px; }
  .nav__cta { min-height: 40px; padding: 0 18px; font-size: 14px; }
  .hero { --line-y: 44%; --logo-w: 88vw; }
  .hero__foot { flex-direction: column; align-items: stretch; }
  .hero__ctas { justify-content: stretch; }
  .hero__ctas .pill { flex: 1 1 auto; }
  .social__title { white-space: normal; font-size: 25vw; line-height: .86; }
  .social__title span { display: block; }
  .social__mark { position: static; transform: none; width: 110px; margin: 0 auto 22px; order: -1; }
  .ingresso { height: 220vh; }
  .portal { height: 260vh; }
  .sguardo { height: 280vh; }
  .full { height: 90vh; }
}

@media (prefers-reduced-motion: reduce) {
  .w { opacity: 1; }
}

/* in home la prenotazione lascia spazio al toro disegnato dalla filigrana */
@media (min-width: 900px) {
  .book--home .book__inner { max-width: none; margin: 0; width: 58%; }
  .book--home .book__tel { font-size: clamp(64px, 8.4vw, 170px); }
  .book--home .book__info { grid-template-columns: 1fr 1fr; }
}

/* video verticali: mai stirati in orizzontale, restano a tutta altezza su un lato */
@media (min-width: 900px) {
  .phero--video .phero__bg { inset: 0 0 0 auto; width: min(50vw, 56.25vh); }
  .phero--video .phero__bg::after { background: linear-gradient(90deg, var(--abisso), rgba(6, 13, 26, 0) 30%), linear-gradient(180deg, rgba(6, 13, 26, .4), rgba(6, 13, 26, 0) 30%, rgba(6, 13, 26, .5)); }
  .phero--video .phero__copy { right: auto; width: 56vw; bottom: auto; top: 50%; translate: 0 -50%; }
  .full--video { background: var(--abisso); }
  .full--video .full__media { inset: 0 var(--gut) 0 auto; width: min(46vw, 56.25vh); }
  .full--video .full__media::after { background: linear-gradient(90deg, var(--abisso), rgba(6, 13, 26, 0) 25%); }
  .full--video .full__copy { right: auto; width: 50vw; bottom: auto; top: 50%; translate: 0 -50%; }
}

/* ---------- telefono: aree da toccare comode, testi mai sotto i 13px ---------- */
@media (max-width: 899px) {
  .foot__nav { flex-direction: column; gap: 0; }
  .foot__nav a { display: block; padding: 12px 0; font-size: 15px; }
  .foot__meta { font-size: 13px; }
  .foot__meta a { display: inline-block; padding: 10px 4px; }
  .book__info .link, .book__info p .link { padding: 10px 0; margin-top: 2px; font-size: 14px; }
  .menu__foot a { padding: 10px 0; }
}

/* ---------- telefono: titoli calibrati sulla larghezza, nessuna parola spezzata ---------- */
@media (max-width: 899px) {
  .manifesto { font-size: 10.6vw; }
  .statement { font-size: 10.4vw; }
  .cta__title { font-size: 12.4vw; }
  .full__copy .didone { font-size: 12.6vw; }
  .phero__title { font-size: 18vw; }
  .chapter__t { font-size: 12.2vw; }
  .chapter { column-gap: 14px; grid-template-columns: auto 1fr 84px; }
  .chapter__img { width: 84px; height: 105px; }
  .book__tel, .book--home .book__tel { font-size: 14.6vw; }
  .hero__city { font-size: 13vw; }
  .portal__copy .didone, .ingresso__copy .didone, .sala__title, .cantina__title, .sala__outro .didone { font-size: 13vw; }
  .duo__text { font-size: 9.6vw; }
  .step__text h2 { font-size: 19vw; }
  .hero__lead { font-size: 8.4vw; }
  .phero__line, .full__copy .bodoni, .portal__copy .bodoni, .ingresso__copy .bodoni { font-size: 5.6vw; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero__lead { font-size: 7vw; }
  .hero__ctas .pill--big { min-height: 48px; }
}
.cta--404 { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }