@font-face{font-family:'Cormorant Garamond';font-weight:300;src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cormorant Garamond';font-weight:400;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:italic;src:url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:Jost;font-weight:300;src:url(fonts/jost-latin-300-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Jost;font-weight:400;src:url(fonts/jost-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:Jost;font-weight:500;src:url(fonts/jost-latin-500-normal.woff2) format('woff2');font-display:swap}

:root{
  --nero:#0c0c0b; --nero-2:#141412; --linea:rgba(236,230,218,.14);
  --avorio:#ece6da; --cenere:#9d968a; --champagne:#c8b48a;
  --s:'Cormorant Garamond',Georgia,serif; --b:Jost,system-ui,sans-serif;
  --gut:22px; --safe:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--nero);color:var(--avorio);font:300 17px/1.7 var(--b);overflow-x:hidden}
body.loading{overflow:hidden}
/* grana da pellicola, appena percettibile */
body::after{content:'';position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--s);font-weight:300;line-height:1.02;letter-spacing:-.01em}
h2{font-size:clamp(44px,12vw,96px)}
h2 em,h1 em{font-style:italic;color:var(--champagne)}
:focus-visible{outline:1px solid var(--champagne);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--avorio);color:var(--nero);padding:10px 14px}
.skip:focus{left:8px}
.label{font:400 11px var(--b);letter-spacing:.38em;text-transform:uppercase;color:var(--champagne);margin-bottom:18px}

/* SIPARIO D'APERTURA */
.curtain{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--nero);transition:clip-path 1.2s var(--ease) .1s;clip-path:inset(0 0 0 0)}
.c-line{position:absolute;top:50%;left:50%;width:0;height:1px;background:var(--champagne);transform:translate(-50%,28px);animation:line 1s var(--ease) .2s forwards}
@keyframes line{to{width:120px}}
.c-mark{font:300 34px var(--s);letter-spacing:.32em;text-transform:uppercase;opacity:0;animation:fade 1s ease .5s forwards}
.c-mark i{display:block;text-align:center;font-style:italic;text-transform:none;letter-spacing:.04em;font-size:.8em;color:var(--champagne)}
@keyframes fade{to{opacity:1}}
.opened .curtain{clip-path:inset(0 0 100% 0)}

/* TESTATA */
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:24px;padding:16px var(--gut);transition:background-color .5s,padding .5s}
.top.solid{background:rgba(12,12,11,.88);backdrop-filter:blur(12px);padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.mark{font:400 15px var(--b);letter-spacing:.34em;text-transform:uppercase;text-decoration:none}
.mark i{font:italic 300 22px var(--s);letter-spacing:.02em;text-transform:none;color:var(--champagne);margin-left:2px}
.top nav{display:none;gap:32px;margin-left:auto;font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--cenere);transition:color .3s}
.top nav a:hover{color:var(--avorio)}
.top .btn{margin-left:auto}

/* BOTTONI */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 34px;background:var(--champagne);color:var(--nero);font:400 12px var(--b);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;overflow:hidden;transition:color .5s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--avorio);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn>*,.btn{isolation:isolate}
.btn.line{background:transparent;color:var(--avorio);box-shadow:inset 0 0 0 1px var(--champagne)}
.btn.small{min-height:40px;padding:0 20px;font-size:11px}
.btn.wide{width:100%}
@media (hover:hover){.btn:hover::before{transform:none}.btn:hover{color:var(--nero)}}
.btn{z-index:0}.btn::before{z-index:-1}

/* HERO */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) calc(70px + var(--safe))}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.18);transition:transform 2.8s var(--ease)}
.opened .hero-img img{transform:scale(1.04)}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,12,11,.45),rgba(12,12,11,.08) 30%,rgba(12,12,11,.55) 50%,rgba(12,12,11,.9) 68%,var(--nero))}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(64px,19vw,180px);line-height:1;display:flex;flex-direction:column}
.hero h1 em{padding-bottom:.12em}
.hero h1 span{font-family:var(--b);font-weight:400;font-size:.2em;letter-spacing:.5em;line-height:1.2;margin-bottom:.35em}
.tagline{font:italic 300 24px/1.3 var(--s);margin:18px 0 30px;color:var(--avorio)}
.rise{opacity:0;transform:translateY(26px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.opened .rise{opacity:1;transform:none}
.opened .hero-copy .rise:nth-child(2) span,.opened h1 .rise{transition-delay:.15s}
.opened h1 em.rise{transition-delay:.3s}
.opened .tagline{transition-delay:.45s}
.opened .hero-copy .btn{transition-delay:.6s}
.scroll-cue{position:absolute;right:var(--gut);bottom:calc(70px + var(--safe));z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cenere);writing-mode:vertical-rl;transition-delay:.9s}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(var(--champagne),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* MANIFESTO: le parole si accendono mentre scorri */
.manifesto{padding:120px var(--gut)}
.words{font:300 clamp(30px,8.4vw,64px)/1.16 var(--s);max-width:20ch}
.words span{opacity:.16;transition:opacity .4s}
.words span.lit{opacity:1}

/* CORNICI FOTO: si aprono dal basso */
.frame{position:relative;overflow:hidden;background:var(--nero-2)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.15) translateY(var(--py,0px));transition:transform 1.6s var(--ease);will-change:transform}
.reveal{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.reveal.in{clip-path:inset(0 0 0 0)}
.reveal.in img{transform:scale(1.04) translateY(var(--py,0px))}
.reveal-t{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-t.in{opacity:1;transform:none}

/* CHEF */
.chef{padding:40px var(--gut) 100px;display:grid;gap:36px}
.frame.tall{aspect-ratio:4/5}
.chef .text p:not(.label){max-width:38ch;color:#d6cfc2;margin-top:18px}
.sign{font:italic 300 26px/1.3 var(--s)!important;color:var(--champagne)!important;margin-top:28px!important}

/* PERCORSO */
.journey{padding:100px var(--gut);background:var(--nero-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.journey-head p:not(.label){color:var(--cenere);margin-top:14px}
.journey-body{display:grid;gap:30px;margin-top:44px}
.plate{position:sticky;top:61px;z-index:1;aspect-ratio:4/3;overflow:hidden;background:var(--nero);box-shadow:0 -30px 0 var(--nero-2),0 14px 18px var(--nero-2)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s var(--ease),transform 2.4s var(--ease)}
.plate img.on{opacity:1;transform:scale(1)}
.courses{position:relative;z-index:0}
.courses li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:26px 0;border-top:1px solid var(--linea);opacity:.5;transition:opacity .6s}
.courses li.on{opacity:1}
.n{font:italic 300 22px var(--s);color:var(--champagne);padding-top:2px}
.courses h3{font-size:30px}
.courses h3{line-height:1.1}
.courses p{color:var(--cenere);font-size:15px;margin-top:8px;line-height:1.5}
.price{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linea)}
.price span{display:flex;align-items:baseline;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cenere);white-space:nowrap}
.price b{font:italic 400 30px var(--s);letter-spacing:0;text-transform:none;color:var(--avorio)}

/* SALA */
.room{padding:110px var(--gut) 70px;display:grid;gap:36px}
.frame.wide{aspect-ratio:3/4}
.frame.small{aspect-ratio:4/5;width:72%;justify-self:end}
.room .text p:not(.label),.cellar .text p:not(.label){max-width:38ch;color:#d6cfc2;margin-top:18px}

/* CANTINA */
.cellar{padding:40px var(--gut) 100px;display:grid;gap:36px}
.count{font-variant-numeric:lining-nums}

/* PRENOTAZIONE */
.book{position:relative;padding:80px var(--gut) 90px;overflow:hidden}
.book-bg{position:absolute;inset:0}
.book-bg img{width:100%;height:100%;object-fit:cover;opacity:.28;transform:scale(1.1) translateY(var(--py,0px))}
.book-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(var(--nero),rgba(12,12,11,.6) 30%,rgba(12,12,11,.85))}
.book-box{position:relative;max-width:560px}
.book h2{margin-bottom:34px}
form{display:grid;gap:18px}
form label{display:grid;gap:6px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cenere)}
form input,form select{min-height:50px;padding:0 2px;border:0;border-bottom:1px solid rgba(236,230,218,.35);background:transparent;font-size:17px;letter-spacing:0;text-transform:none;color:var(--avorio);border-radius:0;-webkit-appearance:none;appearance:none}
form select{background:linear-gradient(45deg,transparent 50%,var(--champagne) 50%) right 8px center/7px 7px no-repeat,linear-gradient(-45deg,transparent 50%,var(--champagne) 50%) right 2px center/7px 7px no-repeat}
form select option{background:var(--nero);color:var(--avorio)}
form input:focus,form select:focus{outline:none;border-bottom-color:var(--champagne)}
input[type=date]{color-scheme:dark}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.times{border:0;display:grid;gap:10px}
.times legend{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cenere);margin-bottom:10px}
.times{grid-template-columns:repeat(3,1fr)}
.times label{position:relative;cursor:pointer;letter-spacing:0}
.times input{position:absolute;opacity:0;inset:0;cursor:pointer;min-height:0}
.times span{display:grid;place-items:center;min-height:48px;border:1px solid rgba(236,230,218,.25);font:400 22px var(--s);color:var(--avorio);transition:border-color .3s,background-color .3s}
.times input:checked+span{border-color:var(--champagne);background:rgba(200,180,138,.12);color:var(--champagne)}
.times input:focus-visible+span{outline:1px solid var(--champagne);outline-offset:3px}
.err{color:#e8a58a;font-size:14px}
.fine{font-size:13px;color:var(--cenere)}
.done{display:grid;gap:12px}
.done-t{font:italic 300 64px/1 var(--s);color:var(--champagne)}
[hidden]{display:none!important}

/* PIÈ DI PAGINA */
.foot{padding:70px var(--gut) calc(40px + var(--safe));border-top:1px solid var(--linea);display:grid;gap:28px}
.foot dl{display:grid;gap:18px}
.foot dt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne)}
.foot dd{font:300 22px var(--s)}

@media (min-width:760px){
  :root{--gut:48px}
  .top nav{display:flex}
  .top .btn{margin-left:0}
  .chef,.cellar{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
  .chef h2,.room h2,.cellar h2{font-size:clamp(44px,6.6vw,96px)}
  .plate{top:90px;box-shadow:none}
  .cellar .frame{order:2}
  .room{grid-template-columns:1.1fr 1fr;align-items:start;gap:48px 64px}
  .room .frame.wide{grid-row:1/3}
  .room .text{grid-column:2;align-self:end}
  .room .frame.small{grid-column:2;width:70%;justify-self:start}
  .journey-body{grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .plate{top:110px;aspect-ratio:4/5}
  .foot dl{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1100px){
  :root{--gut:7vw}
  .manifesto{padding:180px var(--gut)}
  .book{display:grid;place-items:center}
  .book-box{max-width:620px;width:100%}
}
/* da 900 px: foto a destra, titolo sul nero a sinistra */
@media (min-width:900px){
  .hero{justify-content:center;padding-bottom:0}
  .hero h1{font-size:clamp(104px,9.4vw,170px)}
  /* desktop: la foto occupa la destra, il titolo sta sul nero a sinistra */
  .hero-img{left:46%;overflow:hidden}
  .hero-img img{object-position:50% 58%}
  .hero-img::after{background:linear-gradient(90deg,var(--nero),rgba(12,12,11,.55) 22%,rgba(12,12,11,0) 50%),linear-gradient(rgba(12,12,11,.45),transparent 22%,transparent 78%,var(--nero))}
  .tagline{font-size:34px}
}
@media (min-width:760px) and (max-width:899px){
  .hero h1{font-size:clamp(96px,15vw,130px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{clip-path:none}
  .words span{opacity:1}
}