:root{--ink:#171510;--cream:#f4eee3;--gold:#d6b87b;--muted:rgba(255,255,255,.68);--p:0;--local:0;--scene:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);font:400 18px/1.6 Manrope,sans-serif;color:var(--cream)}
body.menu-open,body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
.site-header{position:fixed;z-index:50;inset:0 0 auto;height:96px;padding:16px clamp(22px,4vw,70px);display:grid;grid-template-columns:190px 1fr 190px;align-items:center;transition:.4s}
.site-header.scrolled{height:76px;background:rgba(23,21,16,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(214,184,123,.18)}
.brand{display:flex;width:max-content;flex-direction:column;align-items:center;line-height:1}
.brand span{font:2rem/.65 Allura,cursive}
.brand b{margin-top:8px;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase}
.desktop-nav{display:flex;justify-content:center;gap:clamp(22px,3vw,48px)}
.desktop-nav a{position:relative;padding:12px 0;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
.desktop-nav a:after{content:"";position:absolute;left:0;right:.2em;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transition:.35s}
.desktop-nav a.active:after,.desktop-nav a:hover:after{transform:scaleX(1)}
.header-cta{justify-self:end;padding:14px 20px;border:1px solid rgba(214,184,123,.7);color:var(--gold);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.menu-toggle{display:none;justify-self:end;width:44px;height:44px;border:0;background:none}
.menu-toggle i{display:block;height:1px;background:var(--cream);transition:.3s}
.menu-toggle i+i{margin:9px 0 0 10px}
.menu-toggle[aria-expanded=true] i:first-child{transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] i:last-child{margin-left:0;transform:translateY(-5px) rotate(-45deg)}
.mobile-menu{position:fixed;z-index:45;inset:0;display:grid;place-items:center;visibility:hidden;opacity:0;background:#211d16;transition:.4s}
.mobile-menu.open{visibility:visible;opacity:1}
.mobile-menu nav{display:flex;flex-direction:column;text-align:center;gap:14px}
.mobile-menu a{font:400 2.8rem/1.05 "Cormorant Garamond",serif}

.scroll-story{height:260svh}
.scroll-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.backdrop,.shade,.grain{position:absolute;inset:0}
.backdrop{z-index:-4;transform:scale(calc(1.04 + var(--p)*.12)) translate3d(calc(var(--p)*-2%),calc(var(--p)*-1%),0);will-change:transform}
.backdrop img{width:100%;height:100%;object-fit:cover}
.shade{z-index:-3;background:linear-gradient(90deg,rgba(18,14,10,.78),rgba(18,14,10,.35) 48%,rgba(18,14,10,.1)),linear-gradient(180deg,rgba(15,12,9,.52),transparent 42%,rgba(15,12,9,.48))}
.grain{z-index:20;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.scene{position:absolute;inset:0;padding:120px clamp(30px,9vw,170px) 80px;display:flex;align-items:center;visibility:hidden;opacity:0;pointer-events:none;transform:translate3d(0,36px,0);transition:visibility 0s .6s}
.scene.active{visibility:visible;pointer-events:auto;opacity:1;transform:translate3d(0,0,0);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s}
.scene-copy{width:min(620px,49vw);position:relative;z-index:4}
.eyebrow{margin:0 0 24px;color:var(--gold);font-size:.82rem;letter-spacing:.28em;text-transform:uppercase}
.scene h1,.scene h2{margin:0;font:500 clamp(4.6rem,9vw,10rem)/.75 "Cormorant Garamond",serif;letter-spacing:-.055em;text-shadow:0 12px 35px rgba(0,0,0,.28)}
.scene h1 span{display:block;margin:0 0 20px 9px;color:var(--gold);font:400 clamp(1.8rem,3vw,3.5rem)/1 Allura,cursive;letter-spacing:0}
.scene h1{text-transform:uppercase}
.scene h2 em,.lead em{color:var(--gold);font-weight:400}
.lead{margin:40px 0 0;font:400 clamp(1.55rem,2.25vw,2.25rem)/1.25 "Cormorant Garamond",serif}
.body-copy{max-width:500px;margin:32px 0;color:var(--muted);font-size:1.05rem;line-height:1.8}
.text-link{display:inline-flex;gap:22px;margin-top:30px;padding-bottom:8px;border-bottom:1px solid rgba(214,184,123,.65);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.text-link span{color:var(--gold);font-size:1rem}
.menu-lines{max-width:500px;margin:28px 0}
.menu-lines p{margin:0;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.17);font:400 1.28rem/1.2 "Cormorant Garamond",serif}
.book-button{display:inline-flex;margin-top:20px;padding:18px 26px;background:var(--gold);color:var(--ink);font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.reservation-modal{position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:24px;background:rgba(23,21,16,.62);backdrop-filter:blur(10px);visibility:hidden;opacity:0;transition:opacity .28s ease,visibility 0s .28s}
.reservation-modal.open{visibility:visible;opacity:1;transition:opacity .28s ease,visibility 0s}
.reservation-panel{position:relative;width:min(720px,100%);max-height:min(92svh,760px);overflow:auto;padding:38px;background:var(--cream);color:var(--ink);border:1px solid rgba(214,184,123,.85);border-radius:6px;box-shadow:0 35px 80px rgba(0,0,0,.42)}
.reservation-panel:before{content:"";position:absolute;inset:12px;pointer-events:none;border:1px solid rgba(214,184,123,.34);border-radius:4px}
.modal-close{position:absolute;z-index:2;right:18px;top:16px;width:40px;height:40px;border:1px solid rgba(23,21,16,.18);border-radius:4px;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.reservation-intro{position:relative;z-index:1;padding-right:44px}
.reservation-intro .eyebrow{margin-bottom:14px;color:#9d7737}
.reservation-intro h2{margin:0;font:500 clamp(2.6rem,6vw,4.8rem)/.85 "Cormorant Garamond",serif;letter-spacing:0;color:var(--ink)}
.reservation-intro p{margin:18px 0 0;color:rgba(23,21,16,.66);font-size:1rem}
.project-note{position:relative;z-index:1;margin:18px 0 0;color:rgba(23,21,16,.58);font-size:.88rem;line-height:1.5}
.reservation-form{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:7px;grid-column:1/-1}
.field-half{grid-column:auto}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(23,21,16,.72)}
.field input,.field textarea,.field select{width:100%;border:1px solid rgba(23,21,16,.2);border-radius:4px;background:rgba(255,255,255,.58);color:var(--ink);font:400 1rem Manrope,sans-serif;padding:13px 14px}
.field select{appearance:auto}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus,.field select:focus,.modal-close:focus,.submit-reservation:focus{outline:2px solid var(--gold);outline-offset:3px}
.field-error{min-height:1.1rem;margin:0;color:#8d2f1f;font-size:.82rem;line-height:1.35}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#8d2f1f;background:#fff8f4}
.submit-reservation{grid-column:1/-1;justify-self:start;margin-top:4px;padding:16px 22px;border:0;border-radius:4px;background:var(--ink);color:var(--cream);font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.reservation-success{position:relative;z-index:1;margin-top:30px;padding:24px;border-top:1px solid rgba(214,184,123,.55);color:var(--ink)}
.reservation-success p{margin:0;font:400 1.65rem/1.25 "Cormorant Garamond",serif}
.reservation-success small,.reservation-success span{display:block;margin-top:14px;color:rgba(23,21,16,.66);font-size:.95rem;line-height:1.5}

.food-orbit{position:absolute;z-index:3;right:-8vw;top:50%;width:min(64vw,960px);transform:translate3d(calc((.5 - var(--p))*22vw),calc(-50% + (var(--p) - .5)*16vh),0) rotate(calc(-12deg + var(--p)*28deg)) scale(calc(.72 + var(--p)*.22));filter:drop-shadow(0 35px 32px rgba(0,0,0,.42));will-change:transform}
.food-orbit img{display:block;width:100%;height:auto}
.wine-glass{position:absolute;z-index:2;right:10%;bottom:7%;width:76px;height:210px;opacity:.55;transform:translate3d(calc(var(--p)*-38vw),calc(var(--p)*-18vh),0) rotate(calc(8deg - var(--p)*20deg));border:1px solid rgba(255,255,255,.5);border-radius:14% 14% 48% 48%/8% 8% 32% 32%;clip-path:polygon(4% 0,96% 0,78% 48%,53% 51%,53% 91%,72% 95%,72% 100%,28% 100%,28% 95%,47% 91%,47% 51%,22% 48%)}
.wine-glass:after{content:"";position:absolute;inset:30% 15% 48%;background:rgba(157,72,43,.55);border-radius:0 0 50% 50%}
.gold-ring{position:absolute;z-index:1;border:1px solid rgba(214,184,123,.3);border-radius:50%;pointer-events:none}
.ring-one{right:12%;top:13%;width:36vw;aspect-ratio:1;transform:scale(calc(.7 + var(--p)*.7))}
.ring-two{left:36%;bottom:-20%;width:25vw;aspect-ratio:1;transform:translateY(calc(var(--p)*-35vh))}
.chapter{position:absolute;z-index:10;right:clamp(20px,3vw,55px);top:24%;bottom:24%;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:.85rem}
.chapter i{position:relative;width:1px;flex:1;background:rgba(255,255,255,.22)}
.chapter b{position:absolute;left:0;top:0;width:1px;height:calc(var(--p)*100%);background:var(--gold)}
.scroll-cue{position:absolute;z-index:10;left:clamp(20px,3vw,55px);bottom:7%;display:flex;align-items:center;gap:16px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.scroll-cue i{height:70px;width:1px;background:linear-gradient(var(--gold),transparent)}

:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(max-width:1100px){.site-header{grid-template-columns:1fr auto}
.desktop-nav,.header-cta{display:none}
.menu-toggle{display:block}
.scene-copy{width:60vw}
.food-orbit{right:-22vw;width:76vw}
}
@media(max-width:700px){.site-header{height:76px;padding:13px 20px}
.brand span{font-size:1.7rem}
.scene{padding:100px 22px 90px;align-items:flex-start}
.scene-copy{width:100%;max-width:none}
.scene h1,.scene h2{font-size:clamp(3.6rem,18vw,6rem);line-height:.79}
.lead{margin-top:25px}
.body-copy{max-width:75%;margin-top:22px}
.food-orbit{right:-43vw;top:66%;width:115vw;opacity:.92}
.wine-glass{display:none}
.chapter{display:none}
.scroll-cue{left:12px;bottom:4%}
.gold-ring.ring-one{width:70vw;right:-15%;top:31%}
.scene-menu .scene-copy,.scene-book .scene-copy{padding-top:0}
.menu-lines{max-width:70%}
.reservation-panel{padding:30px 22px}
.reservation-form{grid-template-columns:1fr}
.field-half{grid-column:1/-1}
.submit-reservation{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.scroll-story{height:240svh}
.backdrop,.food-orbit,.wine-glass,.gold-ring{transform:none!important}
.scene{transition:none}
.grain{display:none}
}
