@font-face{font-family:Anton;src:url(fonts/anton-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;src:url(fonts/playfair-display-latin-400-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;src:url(fonts/playfair-display-latin-600-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:400;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:500;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'DM Sans';font-weight:700;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2');font-display:swap}

:root{
  --ink:#0e0c0b; --carbone:#171412; --carbone-2:#211c19; --linea:#332b26;
  --crema:#f2e8da; --muto:#a89c8d; --brace:#f07a3a; --ottone:#c9a36a; --verde:#39d0a0;
  --d:Anton,Impact,sans-serif; --s:'Playfair Display',Georgia,serif; --b:'DM Sans',system-ui,sans-serif;
  --gut:18px; --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--ink);color:var(--crema);font:400 17px/1.55 var(--b);overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
ul{list-style:none}
h1,h2{font-family:var(--d);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
h2{font-size:clamp(54px,15vw,120px)}
:focus-visible{outline:3px solid var(--brace);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--crema);color:var(--ink);padding:10px 14px}
.skip:focus{left:8px}
.eyebrow{font:500 12px var(--b);letter-spacing:.28em;text-transform:uppercase;color:var(--verde);margin-bottom:12px}
.script{font:italic 600 1em var(--s);color:var(--brace);text-transform:none}

#gl{position:fixed;inset:0;width:100%;height:100lvh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s}
#gl.on{opacity:1}

/* TESTATA */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:20px;padding:10px var(--gut);background:linear-gradient(rgba(14,12,11,.85),rgba(14,12,11,0));transition:background-color .3s}
.top.solid{background:rgba(14,12,11,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linea)}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.logo b{font:400 22px var(--d);letter-spacing:.04em}
.logo i{font:italic 400 13px var(--s);color:var(--brace);margin-top:-1px}
.top nav{display:none;gap:28px;margin-left:auto;font:500 12px var(--b);letter-spacing:.2em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--muto)}
.top nav a:hover{color:var(--crema)}
.top .btn{margin-left:auto}

/* BOTTONI */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:3px;background:var(--brace);color:#1a0d06;font:700 13px var(--b);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:transform .15s,background-color .2s}
.btn:active{transform:scale(.97)}
.btn.small{min-height:40px;padding:0 16px;font-size:12px}
.btn.ghost{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1px rgba(242,232,218,.45)}
.btn.wide{width:100%}

/* PUNTI DI CAPITOLO */
.dots{position:fixed;right:10px;top:50%;z-index:25;display:grid;gap:12px;transform:translateY(-50%);transition:opacity .3s}
.dots a{display:block;width:8px;height:8px;border-radius:50%;background:rgba(242,232,218,.3);transition:background-color .3s,transform .3s}
.dots a[aria-current=true]{background:var(--verde);transform:scale(1.3)}
.dots.away{opacity:0;pointer-events:none}

/* CAPITOLI SOPRA IL 3D */
.ch{position:relative;z-index:1;min-height:120svh;display:flex;align-items:flex-end;padding:0 var(--gut) 64px}
.ch::before{content:'';position:absolute;inset:auto 0 0;height:70%;background:linear-gradient(transparent,rgba(14,12,11,.88));pointer-events:none}
.ch-copy{position:relative;max-width:520px}
.ch-copy>p:not(.eyebrow){max-width:34ch;margin-top:12px;color:#e3d7c6}
.hero{min-height:100svh;align-items:flex-end;padding-bottom:calc(36px + var(--safe))}
.hero h1{display:flex;flex-direction:column}
.hero .big{font-size:clamp(108px,36vw,250px);line-height:.85}
.hero .script{font-size:clamp(40px,12vw,84px);line-height:1;margin-top:-.08em}
.hero .ch-copy p:not(.eyebrow){font:italic 400 20px var(--s);color:var(--crema)}
.hero .btn{margin-top:20px}
.scroll-hint{position:absolute;right:var(--gut);bottom:calc(46px + var(--safe));z-index:2;font:500 10px var(--b);letter-spacing:.3em;text-transform:uppercase;color:var(--muto);writing-mode:vertical-rl}
.ch.last{min-height:130svh}
.center{text-align:left}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ch .ch-copy{opacity:.15;transform:translateY(24px);transition:opacity .6s,transform .6s}
.ch.on .ch-copy{opacity:1;transform:none}

/* FOGLI OPACHI */
.sheet{position:relative;z-index:2;background:var(--carbone);padding:72px var(--gut)}
.sheet.alt{background:var(--ink)}
.sheet h2{margin-bottom:28px}

/* LISTINO */
.menu li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 0;border-top:1px solid var(--linea)}
.menu b{font:400 26px/1.1 var(--d);text-transform:uppercase;letter-spacing:.02em}
.menu .price{font:italic 600 26px var(--s);color:var(--brace);text-align:right}
.menu small{grid-column:1;color:var(--muto);font-size:15px}
.menu button{grid-column:2;grid-row:2;justify-self:end;min-height:36px;font:700 11px var(--b);letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}

/* BARBIERI */
.team{display:grid;gap:12px}
.team li{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:16px;background:var(--carbone-2);border-radius:6px}
.mono{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a302a,#1a1512);border:1px solid var(--ottone);font:400 28px var(--d);color:var(--ottone)}
.team h3{font:400 24px var(--d);text-transform:uppercase;letter-spacing:.02em}
.team .role{font:italic 400 16px var(--s);color:var(--brace)}
.team p{color:var(--muto);font-size:15px;margin-top:4px}

/* PRENOTAZIONE */
.book{display:grid;gap:26px}
fieldset{border:0;min-width:0}
legend{display:flex;align-items:center;gap:10px;font:700 12px var(--b);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
legend span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--brace);color:var(--brace);font-size:11px;letter-spacing:0}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:2px var(--gut);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:52px;padding:6px 14px;border-radius:4px;background:var(--carbone-2);box-shadow:inset 0 0 0 1px var(--linea);text-align:left;transition:background-color .2s,box-shadow .2s}
.chip b{font-weight:500;font-size:15px}
.chip small{font-size:12px;color:var(--muto)}
.chip[aria-pressed=true]{background:var(--brace);color:#1a0d06;box-shadow:none}
.chip[aria-pressed=true] small{color:#3d1d0b}
.chip:disabled{opacity:.35;cursor:not-allowed}
.days .chip{align-items:center;min-width:64px}
.days .chip b{font:400 22px var(--d)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{min-height:44px;border-radius:4px;background:var(--carbone-2);box-shadow:inset 0 0 0 1px var(--linea);font-weight:500;font-size:15px}
.slot[aria-pressed=true]{background:var(--brace);color:#1a0d06;box-shadow:none}
.slot:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.hint{color:var(--muto);font-size:14px;margin-top:8px}
.who{display:grid;gap:12px}
.who label{display:grid;gap:6px;font-size:14px;color:var(--muto)}
.who input{min-height:50px;padding:0 14px;border-radius:4px;border:1px solid var(--linea);background:var(--ink);font-size:16px;color:var(--crema)}
.who input:focus{outline:none;border-color:var(--brace)}
.summary{display:grid;gap:10px;padding:18px;border-radius:6px;background:var(--ink);border:1px solid var(--linea)}
.summary p:first-child{font:italic 400 18px var(--s)}
.error{color:#ff9a6a;font-size:14px}
.done{display:grid;gap:10px;padding:24px 0}
.done .script{font-size:40px}
.fine{font-size:13px;color:var(--muto)}

/* DOVE */
.where{display:grid;gap:24px}
.map{display:block;width:100%;height:auto;border-radius:6px}
.where dl div{padding:12px 0;border-top:1px solid var(--linea)}
.where dt{font:700 11px var(--b);letter-spacing:.22em;text-transform:uppercase;color:var(--verde)}
.where dd{font-size:19px}

.foot{position:relative;z-index:2;background:var(--ink);padding:40px var(--gut) calc(30px + var(--safe));display:grid;gap:12px;border-top:1px solid var(--linea);color:var(--muto);font-size:15px}
.foot .logo{color:var(--crema)}
[hidden]{display:none!important}

@media (min-width:700px){
  :root{--gut:40px}
  .top nav{display:flex}
  .top .btn{margin-left:0}
  .dots{right:22px}
  .team{grid-template-columns:repeat(3,1fr)}
  .team li{grid-template-columns:1fr;text-align:center;justify-items:center;padding:28px 20px}
  .slots{grid-template-columns:repeat(6,1fr)}
  .where{grid-template-columns:1.3fr 1fr;align-items:start}
}
@media (min-width:1000px){
  .ch{align-items:center;padding-left:7vw}
  .ch::before{inset:0 auto 0 0;width:60%;height:auto;background:linear-gradient(90deg,rgba(14,12,11,.85),transparent)}
  .hero{align-items:center}
  .center{text-align:center;margin:0 auto}
  .center .ctas{justify-content:center}
  #posto::before{width:100%;background:radial-gradient(ellipse at center,rgba(14,12,11,.6),transparent 70%)}
  .sheet{padding:100px 7vw}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
  .book{grid-template-columns:1fr 1fr;gap:28px 48px}
  .book fieldset:nth-child(4),.summary{grid-column:1/-1}
}
@media (hover:hover){
  .btn:hover{background:#ff8c4d}
  .btn.ghost:hover{background:rgba(242,232,218,.08)}
  .chip:hover:not(:disabled),.slot:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--brace)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ch .ch-copy{opacity:1;transform:none}
}
.no-gl .hero{background:radial-gradient(ellipse at 50% 30%,#3a2416,var(--ink) 70%)}