/* Da Ottavia: "Candela" direction. Candlelit evening, wine-dark fields. */
@font-face{font-family:"Gloock";src:url(fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --espresso:#17110E; --barolo:#4A1419; --linen:#EFE6DA; --olio:#C9A24A; --pietra:#A89A8A;
  --rule:rgba(239,230,218,.16); --rule-olio:rgba(201,162,74,.45);
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --body:"Alegreya Sans","Gill Sans","Segoe UI",sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--s7:152px;
  --g:16px; --max:1400px; --hh:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:900px){:root{--g:24px;--hh:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0;background:var(--espresso);color:var(--linen);font:400 1.0625rem/1.6 var(--body);position:relative;font-kerning:normal}
@media (min-width:900px){body{font-size:1.125rem}}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit;text-decoration-color:var(--olio);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--olio);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0 0 var(--s2);letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.6rem,5vw,5rem)}
h2{font-size:clamp(2.1rem,3.6vw,3.6rem)}
h3{font-size:1.5rem}
p{margin:0 0 var(--s2)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pietra,.small,.sub,.micro{color:var(--pietra)}
.small{font-size:.95rem}
.eyebrow{font:500 .8125rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--olio);margin-bottom:var(--s2)}
.sub{font-size:1.1875rem;max-width:36em}
.lead{font-size:clamp(1.1rem,1.4vw,1.3125rem);max-width:30em;color:var(--linen)}

/* Skip + demo banner */
.skip{position:absolute;left:var(--g);top:-80px;z-index:100;background:var(--olio);color:var(--espresso);padding:12px 18px;font-weight:500}
.skip:focus{top:8px}
.demo{background:#0E0A08;color:var(--pietra);font-size:.875rem;text-align:center;padding:8px var(--g);border-bottom:1px solid var(--rule)}
.demo p{margin:0}

/* Header: transparent over the photo, solid Espresso once you scroll */
.site-header{position:sticky;top:0;z-index:50;height:var(--hh);background:var(--espresso);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.js .site-header:not(.is-solid){background:transparent}
.site-header.is-solid{box-shadow:0 1px 0 var(--rule)}
.sentinel{position:absolute;top:140px;left:0;width:1px;height:1px}
.bar{max-width:var(--max);margin-inline:auto;height:100%;padding-inline:var(--g);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1;min-height:44px;justify-content:center}
.brand-name{font:400 1.625rem/1 var(--display)}
.brand-sub{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pietra);margin-top:5px}
#nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s3);align-items:center}
#nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:1rem;letter-spacing:.02em;position:relative}
#nav a::after,.dish-name a::after,.pour::after{content:"";position:absolute;left:0;bottom:9px;height:1px;width:100%;background:var(--olio);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
#nav a:hover::after,#nav a[aria-current="page"]::after{transform:none}
#nav .nav-reserve::after{display:none}
#nav .nav-reserve{border:1px solid var(--olio);padding:0 18px;background:none;color:var(--linen)}
#nav .nav-reserve:hover,#nav .nav-reserve[aria-current="page"]{background:var(--olio);color:var(--espresso)}
.menu-btn{display:none;font:500 1rem var(--body);color:var(--linen);background:none;border:1px solid var(--rule-olio);min-height:44px;padding:0 18px;cursor:pointer}
@media (max-width:899px){
  .js .menu-btn{display:inline-flex;align-items:center}
  .js #nav{display:none;position:absolute;top:var(--hh);left:0;right:0;background:var(--espresso);border-bottom:1px solid var(--rule);padding:var(--s1) var(--g) var(--s3)}
  .js #nav.open{display:block}
  .js #nav ul{flex-direction:column;align-items:stretch;gap:0}
  .js #nav li+li{border-top:1px solid var(--rule)}
  .js #nav a{min-height:52px;width:100%;font-size:1.125rem}
  .js #nav .nav-reserve{border:0;padding:0;color:var(--olio)}
  .js .site-header:has(#nav.open){background:var(--espresso)}
  html:not(.js) .bar{height:auto;flex-wrap:wrap;padding-block:8px}
  html:not(.js) .site-header{height:auto}
}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;background:var(--olio);color:var(--espresso);font:500 1.0625rem/1 var(--body);letter-spacing:.03em;text-decoration:none;border:0;border-radius:1px;cursor:pointer;transition:background-color .2s,transform .12s}
.btn:hover{background:#D6B25E}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:46px;padding:0 22px;font-size:1rem}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.cta{margin:var(--s3) 0 var(--s2)}
.micro{font-size:.95rem;letter-spacing:.02em}
.more{margin-top:var(--s4)}

/* Image "lights up" once, like the room at six */
.lit{animation:lit .9s ease-out both}
@keyframes lit{from{filter:brightness(.8)}to{filter:brightness(1)}}

/* Hero */
.hero{position:relative;margin-top:calc(-1 * var(--hh));display:flex;flex-direction:column;justify-content:flex-end}
.hero-media{position:relative;height:50svh;min-height:320px}
.hero-media img,.phead-media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-media::after,.phead-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,14,.92) 0,rgba(23,17,14,.7) 64px,rgba(23,17,14,.25) 120px,rgba(23,17,14,0) 34%,rgba(23,17,14,0) 55%,var(--espresso) 100%)}
.hero-copy{position:relative;margin-top:-56px;padding-bottom:var(--s5)}
.hero h1{max-width:12ch}
@media (min-width:900px){
  .hero{min-height:min(100svh,960px);padding-top:var(--hh)}
  .hero-media{position:absolute;top:0;right:0;bottom:0;width:62%;height:auto}
  .hero-media::after{background:linear-gradient(90deg,var(--espresso) 0,rgba(23,17,14,.72) 18%,rgba(23,17,14,0) 48%),linear-gradient(180deg,rgba(23,17,14,.6) 0,rgba(23,17,14,0) 22%,rgba(23,17,14,0) 72%,rgba(23,17,14,.8) 100%)}
  .hero-copy{margin-top:0;padding-bottom:var(--s6)}
  .hero h1{font-size:clamp(3.4rem,5.4vw,5.6rem);max-width:9.5ch}
}

/* Interior page heads */
.phead{position:relative;margin-top:calc(-1 * var(--hh));display:flex;flex-direction:column;justify-content:flex-end}
.phead-media{position:relative;height:40svh;min-height:260px}
.phead-copy{position:relative;margin-top:-40px;padding-bottom:var(--s5)}
.phead h1{max-width:14ch}
.phead .lead{color:var(--pietra)}
.phead .lead a{color:var(--linen)}
.phead-plain{padding-top:calc(var(--hh) + var(--s5))}
.phead-plain .phead-copy{margin-top:0;padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.nf{min-height:70svh}
@media (min-width:900px){
  .phead{min-height:min(72svh,700px);padding-top:var(--hh)}
  .phead-media{position:absolute;top:0;right:0;bottom:0;width:56%;height:auto}
  .phead-media::after{background:linear-gradient(90deg,var(--espresso) 0,rgba(23,17,14,.6) 20%,rgba(23,17,14,0) 52%),linear-gradient(180deg,rgba(23,17,14,.6) 0,rgba(23,17,14,0) 24%)}
  .phead-copy{margin-top:0;padding-bottom:var(--s6)}
  .phead-plain{min-height:0;padding-top:calc(var(--hh) + var(--s6))}
  .phead-plain .phead-copy{padding-bottom:var(--s5)}
}
.notice{border-left:2px solid var(--olio);padding:var(--s1) 0 var(--s1) var(--s2);max-width:40em;color:var(--linen)}

/* La carta: printed menu rows, sticky plate frame */
.carta{padding-block:var(--s5)}
.carta-frame{display:none}
.dishes{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--rule-olio)}
.dish{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.dish-name{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 4px}
.dish-name a{text-decoration:none;position:relative}
.dish-name a::after{bottom:-2px}
.dish-name a:hover::after,.dish-name a:focus-visible::after,.dish.is-on .dish-name a::after{transform:none}
.dish-en{font-style:italic;color:var(--pietra);margin:0 0 6px;font-size:1.0625rem}
.dish-text p:not([class]){margin:var(--s1) 0 0;max-width:34em}
.price{font:400 clamp(1.25rem,1.8vw,1.625rem)/1 var(--display);color:var(--olio);margin:0;white-space:nowrap;text-align:right}
.pp{display:block;font:400 .875rem/1.4 var(--body);color:var(--pietra);margin-top:4px}
.tags{margin:0;line-height:1.7;font-size:.875rem;letter-spacing:.04em;color:var(--pietra)}
.tags span:not(:last-child)::after{content:"·";margin:0 10px;color:var(--olio)}
.dish-thumb{display:block;grid-column:1}.dish-thumb img{width:72px;height:90px;object-fit:cover}
.carta .dish-text{grid-column:2}.carta .price{grid-column:3}
.carta .dish{grid-template-columns:72px 1fr auto;align-items:start;column-gap:var(--s2)}
.carta .price{padding-top:6px}
@media (min-width:900px){
  .carta-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:start}
  .carta-frame{display:block;position:sticky;top:calc(var(--hh) + var(--s4));aspect-ratio:4/5;overflow:hidden;background:#0E0A08}
  .carta-frame .fi{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .carta-frame .fi.is-on{opacity:1;transform:none}
  .carta-frame img{width:100%;height:100%;object-fit:cover}
  .carta-body{padding-top:var(--s5)}
  .carta .dish{grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--s3)}.carta .price{padding-top:0}.carta .dish-text{grid-column:1}.carta .price{grid-column:2}
  .dish-thumb{display:none}
}

/* Day strip: "Dalle nove alle undici" */
.day{padding-block:24px 64px}
.day-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.day-head .sub{margin:0}
.day-btns{display:flex;gap:var(--s1)}
.snap-btn{width:52px;height:52px;border:1px solid var(--rule-olio);background:none;color:var(--linen);font-size:1.25rem;cursor:pointer;transition:background-color .2s,color .2s}
.snap-btn:hover{background:var(--olio);color:var(--espresso)}
.strip{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--g),calc((100vw - var(--max)) / 2 + var(--g)));overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--rule-olio) transparent}
.strip:focus-visible{outline-offset:-2px}
.strip-list{list-style:none;margin:0;display:flex;gap:var(--s3);padding:0 max(var(--g),calc((100vw - var(--max)) / 2 + var(--g))) var(--s3)}
.slide{flex:0 0 auto;width:min(78vw,calc(min(76svh,720px) * .75));scroll-snap-align:start}
.slide figure{margin:0}
.slide img{width:100%;aspect-ratio:3/4;object-fit:cover}
.slide figcaption{padding-top:var(--s2);font-size:1.0625rem;max-width:22em}
.time{display:block;font:400 2.5rem/1 var(--display);color:var(--pietra);margin-bottom:var(--s1);transition:color .5s var(--ease)}
.slide.is-active .time{color:var(--olio)}
@media (min-width:900px){.strip-list{gap:var(--s4)}}

/* The room */
.room{position:relative;display:grid}
.room-img{grid-area:1/1;width:100%;height:min(86svh,820px);min-height:440px;object-fit:cover;object-position:50% 55%}
.room::after{content:"";grid-area:1/1;background:linear-gradient(180deg,rgba(23,17,14,0) 45%,rgba(23,17,14,.88) 100%);pointer-events:none}
.room-cap{grid-area:1/1;align-self:end;position:relative;z-index:1;padding-bottom:var(--s5)}
.room-cap h2{max-width:13ch}
.room-cap p{color:var(--linen);font-size:1.1875rem}

/* Wine band (Barolo) */
.wine{background:var(--barolo);padding:64px 0}
.wine .wrap{padding-left:16px;padding-right:16px}
@media (min-width:900px){.wine .wrap{padding-left:24px;padding-right:24px}}
.wine .eyebrow,.wine .g-price{color:var(--olio)}
.wine .sub{color:var(--linen);opacity:.86}
.wine-grid{display:grid;gap:var(--s5);align-items:center}
.wine-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.glasses{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid rgba(201,162,74,.5)}
.glasses li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:18px 0;border-bottom:1px solid rgba(239,230,218,.18)}
.g-name{font:400 clamp(1.3rem,2vw,1.75rem)/1.15 var(--display)}
.g-reg{display:block;font:italic 400 1rem/1.4 var(--body);color:var(--linen);opacity:.82;margin-top:4px}
.g-price{font:400 1.5rem/1 var(--display)}
.pour{display:inline-flex;align-items:center;min-height:44px;font-weight:500;position:relative;text-decoration:underline;text-decoration-color:rgba(201,162,74,.45);text-underline-offset:.32em}
.pour::after{bottom:6px;height:2px;transition-duration:.5s}
.pour:hover::after,.pour:focus-visible::after{transform:none}
@media (min-width:900px){.wine-grid{grid-template-columns:5fr 7fr;gap:var(--s6)}.wine-media{max-width:520px}}

/* Reserve panel (Barolo) */
.reserve-band{padding-block:var(--s5)}
@media (min-width:900px){.carta{padding-block:var(--s6)}.day{padding-block:var(--s5) 96px}.wine{padding:96px 0}.reserve-band{padding-block:var(--s6)}}
.res-panel{background:var(--barolo);padding:var(--s5) var(--s3);text-align:center;outline:1px solid var(--rule-olio);outline-offset:-12px}
.res-panel .sub{color:var(--linen);margin-inline:auto}
.res-panel h2{font-size:clamp(2.4rem,5vw,4.5rem)}
@media (min-width:900px){.res-panel{padding:var(--s6) var(--s5)}}

/* Menu page */
.menu-layout{padding-block:var(--s5) var(--s6);display:grid;gap:var(--s4)}
.jump{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.jump a{display:inline-block;padding:8px 0;line-height:28px;text-decoration:none;font-family:var(--display);font-size:1.25rem}
.jump a:hover{color:var(--olio)}
.legend{border:1px solid var(--rule);padding:var(--s3)}
.legend h2{font-size:1.5rem}
.legend-list{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:6px 24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));font-size:.975rem;color:var(--pietra)}
.legend-list b{font-weight:500;color:var(--linen);margin-right:6px}
.course{margin-top:var(--s6)}
.course h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.course-en{font:italic 400 1.125rem/1.3 var(--body);color:var(--pietra)}
.menu-body{max-width:880px}
.menu-cta{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule-olio);font-size:1.25rem}
.foot-h{font:500 .8125rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--olio);margin:0 0 var(--s2)}
@media (min-width:1024px){
  .menu-layout{grid-template-columns:3fr 9fr;gap:var(--s6)}
  .menu-sticky{position:sticky;top:calc(var(--hh) + var(--s4))}
  .jump{flex-direction:column}
}

/* Kitchen story */
.story{display:grid;gap:var(--s5);padding-block:var(--s6)}
.prose{max-width:38em}
.prose h2{font-size:clamp(1.75rem,2.6vw,2.4rem);margin-top:var(--s5)}
.prose h2:first-child{margin-top:0}
.narrow{padding-block:var(--s5) var(--s6)}
.people{border-top:1px solid var(--rule-olio);padding-top:var(--s3)}
.people h2{font-size:1.75rem}
.people dl{margin:0}
.people dt{font:400 1.5rem var(--display);margin-top:var(--s3)}
.people dd{margin:4px 0 0;color:var(--pietra)}
@media (min-width:900px){.story{grid-template-columns:7fr 4fr;gap:var(--s6)}.people{position:sticky;top:calc(var(--hh) + var(--s4));align-self:start}}

/* Forms + practical pages */
.cater-grid,.visit-grid{display:grid;gap:var(--s5);padding-block:var(--s5) var(--s6);align-items:start}
.packs{margin-bottom:var(--s5)}
.packs .dish-text p:not([class]){color:var(--linen)}
.plain{padding-left:1.1em;margin:0}
.plain li{margin-bottom:var(--s1)}
.plain li::marker{color:var(--olio)}
.form-card{background:#1F1713;border:1px solid var(--rule);padding:var(--s4) var(--s3)}
.form-card h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.field-row{display:grid;gap:0 var(--s2)}
label{font-weight:500}
.req{color:var(--olio)}
.opt{font-weight:400;color:var(--pietra)}
input,select,textarea{height:auto;font:inherit;color:var(--linen);background:var(--espresso);border:1px solid rgba(239,230,218,.4);border-radius:1px;padding:12px 14px;min-height:50px;width:100%;color-scheme:dark}
input:focus-visible,select:focus-visible,textarea:focus-visible,.field:focus-within input[type=date]{outline:2px solid var(--olio);outline-offset:1px;border-color:var(--olio)}
input:user-invalid,select:user-invalid{border-color:#E58A7A}
.hint{font-size:.9rem;color:var(--pietra)}
p.hint{margin:-12px 0 var(--s3)}
select{height:50px}
.hp{position:absolute;left:-9999px}
.privacy-note{margin-top:var(--s2)}
.info h2,.access h2{font-size:clamp(1.75rem,2.6vw,2.25rem)}
.info section+section{margin-top:var(--s5)}
.info h3{font-size:1.375rem;margin-top:var(--s4)}
address{font-style:normal;margin-bottom:var(--s2)}
.hours{border-collapse:collapse;width:100%;margin-bottom:var(--s3)}
.hours th,.hours td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:400}
.hours td{text-align:right;color:var(--olio);font-family:var(--display);font-size:1.125rem}
.access{border-top:1px solid var(--rule-olio);padding-top:var(--s4)}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}.field-row.three{grid-template-columns:2fr 1fr 1fr}.form-card{padding:var(--s5)}}
@media (min-width:900px){.cater-grid,.visit-grid{grid-template-columns:7fr 5fr;gap:var(--s6)}.access{grid-column:1/-1}.two-col{columns:2;column-gap:var(--s5)}.two-col li{break-inside:avoid}}

/* Footer */
.site-footer{border-top:1px solid var(--rule);padding-top:var(--s6);background:#0E0A08}
.foot{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-name{font:400 2.25rem/1 var(--display);margin-bottom:var(--s1)}
.foot-brand p:nth-child(2){color:var(--pietra);font-size:.95rem;letter-spacing:.04em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a,.site-footer p a{display:inline-flex;align-items:center;min-height:44px}
.site-footer .btn{margin-top:var(--s2)}
.foot-small{border-top:1px solid var(--rule);margin-top:64px;padding-top:24px;padding-bottom:40px;font-size:.9rem;color:var(--pietra)}
.foot-small p{max-width:60em;margin:0}

/* Reveal once (motion.js adds .is-in) */
.js .rv{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .carta-frame .fi{transform:none}
}