@font-face{font-family:"Shoulders";src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:"Karla";src:url(fonts/karla-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Karla";src:url(fonts/karla-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#14100d; --coal:#1f1915; --bark:#2b221c;
  --birch:#f2e8d8; --ash:#b9ab97; --ember:#ee6a2c; --flame:#ffb347; --moss:#7c8a52;
  --display:"Shoulders",Impact,sans-serif; --serif:"Cormorant",Georgia,serif; --body:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--birch);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;color:var(--flame)}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.01em}
h2{font-size:clamp(2.6rem,8vw,5.6rem)}
h2 em{font-size:1.02em}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);font-weight:700;margin-bottom:1rem}
section{padding:clamp(4.5rem,11vw,9rem) clamp(1.2rem,5vw,4rem)}
.sec-head{max-width:1150px;margin:0 auto 3rem}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1.2rem,5vw,4rem);transition:background .35s,padding .35s,box-shadow .35s}
.bar.solid{background:rgba(20,16,13,.92);padding-block:.7rem;box-shadow:0 1px 0 rgba(242,232,216,.08);backdrop-filter:saturate(1.2)}
.logo{font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase;text-decoration:none;letter-spacing:.02em}
.logo em{font-size:1.1em;margin-left:.1em}
nav{display:flex;gap:1.6rem;align-items:center}
nav a{text-decoration:none;font-size:.92rem;font-weight:700;opacity:.85;transition:opacity .2s,color .2s}
nav a:hover{opacity:1;color:var(--flame)}
.nav-cta{border:1.5px solid var(--ember);padding:.45rem 1rem;border-radius:99px}
@media(max-width:760px){nav a:not(.nav-cta){display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 clamp(1.2rem,5vw,4rem) clamp(4.5rem,10vh,7rem);overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:55% 40%;animation:drift 22s ease-in-out infinite alternate;filter:saturate(1.05) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,16,13,.55) 0%,rgba(20,16,13,.15) 35%,rgba(20,16,13,.85) 78%,var(--ink) 100%),radial-gradient(60% 50% at 60% 75%,rgba(238,106,44,.25),transparent 70%)}
@keyframes drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.18) translate(-2%,-2%)}}
.hero-text{max-width:900px}
.kicker{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--flame);margin-bottom:1.2rem}
.hero h1{font-size:clamp(3.2rem,12.5vw,9.5rem)}
.hero h1 .l1{display:block}
.hero h1 em{display:block;font-size:.82em;line-height:1;margin-top:.1em}
.lead{max-width:34ch;font-size:clamp(1.05rem,2.4vw,1.3rem);margin:1.4rem 0 2rem;color:#eadfcd}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.6rem;border-radius:99px;font-weight:700;text-decoration:none;transition:transform .2s,background .25s,color .25s,box-shadow .25s}
.btn.fire{background:var(--ember);color:#1a0f08;box-shadow:0 10px 40px -10px rgba(238,106,44,.8)}
.btn.fire:hover{background:var(--flame)}
.btn.ghost{border:1.5px solid rgba(242,232,216,.5)}
.btn.ghost:hover{background:var(--birch);color:var(--ink)}
.btn:active{transform:scale(.97)}
.js .hero-text>*{opacity:0;transform:translateY(24px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero-text>*:nth-child(2){animation-delay:.12s}.js .hero-text>*:nth-child(3){animation-delay:.3s}.js .hero-text>*:nth-child(4){animation-delay:.42s}
@keyframes up{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;right:clamp(1.2rem,5vw,4rem);bottom:2rem;width:26px;height:44px;border:1.5px solid rgba(242,232,216,.6);border-radius:20px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--flame);animation:cue 1.6s infinite}
@keyframes cue{to{transform:translateY(16px);opacity:0}}

/* embers */
.embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--flame);box-shadow:0 0 8px 2px rgba(255,140,50,.7);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--dx,20px),-80vh)}}

/* idea */
.idea{max-width:1100px;margin:0 auto}
.lit{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,4.6vw,3.3rem);line-height:1.18}
.lit .w{opacity:.18;transition:opacity .35s,color .35s}
.lit .w.on{opacity:1}

/* dishes */
.food{background:var(--coal)}
.dishes{max-width:1150px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.dish{position:relative}
.dish figure{aspect-ratio:4/5;overflow:hidden;border-radius:4px;margin-bottom:1.3rem}
.dish img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dish:hover img{transform:scale(1.06)}
.num{position:absolute;top:.8rem;left:1rem;font-family:var(--display);font-weight:800;font-size:3rem;color:var(--birch);text-shadow:0 2px 20px rgba(0,0,0,.5)}
.dish h3{font-size:2.3rem;color:var(--flame);margin-bottom:.5rem}
.dish p{color:var(--ash);max-width:36ch}
.duo img{filter:grayscale(calc(1 - var(--p,1) * 1.6)) sepia(calc(.5 - var(--p,1) * .8))}

/* picker */
.picker{max-width:1150px;margin:0 auto}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.6rem;margin-bottom:1.4rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;font:700 .95rem var(--body);color:var(--birch);background:transparent;border:1.5px solid rgba(242,232,216,.25);padding:.75rem 1.3rem;border-radius:99px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.tabs button:hover{border-color:var(--ember)}
.tabs button[aria-selected=true]{background:var(--ember);border-color:var(--ember);color:#1a0f08}
.stage{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--coal)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.scene.on{opacity:1}
.scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease-out}
.scene.on img{transform:scale(1)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,13,.92),rgba(20,16,13,0) 60%)}
.scene figcaption{position:absolute;z-index:1;left:clamp(1rem,4vw,2.5rem);right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.2rem);font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.8vw,2rem);line-height:1.22;max-width:30em;transform:translateY(16px);opacity:0;transition:transform .7s .15s,opacity .7s .15s}
.scene.on figcaption{transform:none;opacity:1}
@media(max-width:640px){.stage{aspect-ratio:3/4}}

/* more */
.more{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr;align-items:center;max-width:1250px;margin:0 auto}
@media(min-width:860px){.more{grid-template-columns:1fr 1.1fr}}
.more-photo{aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.more-photo img{width:100%;height:100%;object-fit:cover}
.more h2{margin-bottom:2rem}
.extras{list-style:none;border-top:1px solid rgba(242,232,216,.15)}
.extras li{padding:1.3rem 0;border-bottom:1px solid rgba(242,232,216,.15);display:grid;gap:.3rem}
.extras b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em;color:var(--birch)}
.extras span{color:var(--ash)}

/* gallery */
.gallery{padding-inline:0;background:var(--coal)}
.gallery .sec-head{padding:0 clamp(1.2rem,5vw,4rem)}
.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(1.2rem,5vw,4rem) 1rem;scrollbar-width:thin;scrollbar-color:var(--ember) transparent}
.strip img{flex:none;height:clamp(240px,42vw,420px);width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;scroll-snap-align:start;transition:transform .4s}
.strip img:hover{transform:translateY(-6px)}

/* contact */
.contact{position:relative;background:radial-gradient(70% 60% at 50% 100%,rgba(238,106,44,.28),transparent 70%),var(--ink);text-align:center}
.contact-in{max-width:760px;margin:0 auto}
.contact h2{margin-bottom:1rem}
.contact p{color:var(--ash)}
.card{margin-top:2.5rem;padding:clamp(1.6rem,4vw,2.6rem);border:1px solid rgba(242,232,216,.15);border-radius:8px;background:var(--bark);display:grid;gap:.9rem;justify-items:center}
.who{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.8rem;color:var(--birch)!important;line-height:1}
.who span{display:block;font-family:var(--body);font-weight:700;font-size:.75rem;letter-spacing:.2em;color:var(--ember);margin-top:.4rem}
.big{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,6vw,2.6rem);text-decoration:none;color:var(--flame);transition:color .2s;overflow-wrap:anywhere}
.big.mail{font-family:var(--body);font-weight:700;font-size:clamp(1rem,3.6vw,1.3rem);color:var(--birch)}
.big:hover{color:var(--ember)}
.fb{font-size:.95rem;color:var(--ash)}
footer{padding:2rem 1.2rem 6.5rem;text-align:center;color:var(--ash);font-size:.85rem}

/* dock */
.dock{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:30;display:flex;gap:.35rem;padding:.35rem;border-radius:99px;background:rgba(31,25,21,.95);box-shadow:0 10px 40px rgba(0,0,0,.5);transform:translate(-50%,160%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.dock.show{transform:translate(-50%,0)}
.dock a{min-height:48px;display:flex;align-items:center;padding:0 1.4rem;border-radius:99px;font-weight:700;text-decoration:none}
.dock a:first-child{background:var(--ember);color:#1a0f08}

/* reveals */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .hero-text>*{opacity:1;transform:none}
  .embers{display:none}
  html{scroll-behavior:auto}
}