/* Maple & Smoke — one page, mobile first */
@font-face{font-family:"Outfit";src:url("fonts/outfit.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --ink:#1c1b1a;          /* charcoal from the logo */
  --ink-2:#232120;
  --ink-3:#2b2826;
  --cream:#ede3d0;        /* logo cream */
  --cream-dim:#bfb4a2;
  --salmon:#c98673;       /* logo accent */
  --salmon-hi:#d89a87;
  --line:rgba(237,227,208,.14);
  --serif:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:1.5rem;
  --max:68rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.price,.step__num{font-variant-numeric:lining-nums}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;letter-spacing:-.005em}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-3rem;background:var(--cream);color:var(--ink);padding:.6rem 1rem;border-radius:2px;z-index:20;text-decoration:none}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid var(--salmon-hi);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.nw{white-space:nowrap}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--salmon)}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--pad);padding-top:max(1rem,env(safe-area-inset-top));background:linear-gradient(to bottom,rgba(28,27,26,.92),rgba(28,27,26,0))}
.topbar__brand{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;text-decoration:none;font-weight:400}
.topbar__brand span{font-family:var(--serif);font-style:italic;color:var(--salmon);letter-spacing:0;font-size:1.15rem;margin:0 .15em;text-transform:none}
.topbar__order{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;transition:border-color .2s,color .2s}
.topbar__order:hover{border-color:var(--salmon);color:var(--salmon-hi)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.9rem 1.8rem;border-radius:999px;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn--primary{background:var(--salmon);color:#1a1312}
.btn--primary:hover{background:var(--salmon-hi)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{border:1px solid var(--line);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream-dim)}
.btn--block{width:100%}

/* smoke: CSS-only drifting haze */
.smoke{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.smoke span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.smoke span:nth-child(1){width:120vw;height:70vh;left:-35vw;top:8vh;background:radial-gradient(closest-side,rgba(201,134,115,.20),transparent 70%);animation:drift1 26s ease-in-out infinite alternate}
.smoke span:nth-child(2){width:90vw;height:60vh;right:-30vw;top:30vh;background:radial-gradient(closest-side,rgba(237,227,208,.09),transparent 70%);animation:drift2 32s ease-in-out infinite alternate}
.smoke span:nth-child(3){width:80vw;height:50vh;left:10vw;bottom:-18vh;background:radial-gradient(closest-side,rgba(176,112,64,.16),transparent 70%);animation:drift3 38s ease-in-out infinite alternate}
.smoke--soft span{opacity:.4}
@keyframes drift1{to{transform:translate3d(12vw,-6vh,0) scale(1.1)}}
@keyframes drift2{to{transform:translate3d(-14vw,5vh,0) scale(1.15)}}
@keyframes drift3{to{transform:translate3d(8vw,-10vh,0) scale(.95)}}
@media (prefers-reduced-motion:reduce){.smoke span{animation:none}html{scroll-behavior:auto}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:6.5rem var(--pad) 4rem;isolation:isolate}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to bottom,transparent,var(--ink));z-index:-1}
.hero__inner{position:relative;max-width:36rem;display:flex;flex-direction:column;align-items:center}
.hero__logo{width:min(46vw,190px);margin-bottom:2.4rem}
.hero .eyebrow{margin-bottom:1.1rem;line-height:2}
@media (max-width:480px){.hero .eyebrow .dot{display:none}.hero .eyebrow .nw{display:block}}
.hero h1{font-size:clamp(2.25rem,9vw,3.6rem);font-weight:400}
.hero__sub{margin-top:1.1rem;color:var(--cream-dim);max-width:26rem}
.hero__actions{margin-top:2.2rem;display:flex;flex-direction:column;gap:.8rem;width:100%;max-width:20rem}

/* sections */
section{position:relative}
.process,.product,.ordering{padding:5rem 0}
.process h2,.ordering h2{font-size:clamp(2rem,7.5vw,3rem);margin-top:.9rem;max-width:20ch}
.steps{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;gap:0}
.step{padding:1.8rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__num{display:block;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--salmon);margin-bottom:.4rem}
.step h3{font-size:1.75rem;margin-bottom:.5rem}
.step p{color:var(--cream-dim)}

.product{background:var(--ink-2)}
.card{margin-top:1.6rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--ink)}
.card__art{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 110%,rgba(201,134,115,.38),transparent 60%),
    radial-gradient(80% 70% at 85% 0%,rgba(176,112,64,.22),transparent 65%),
    repeating-linear-gradient(115deg,rgba(237,227,208,.035) 0 2px,transparent 2px 14px),
    linear-gradient(160deg,#2a2422,#1c1b1a)}
.card__amp{font-family:var(--serif);font-style:italic;font-size:clamp(7rem,32vw,11rem);line-height:1;color:var(--salmon);opacity:.85}
.card__body{padding:1.6rem 1.4rem 1.6rem}
.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.card h2{font-size:2rem}
.price{font-family:var(--serif);font-size:2rem;color:var(--salmon-hi);font-weight:500}
.card__size{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);margin:.35rem 0 1rem}
.card__body > p:not(.card__size){color:var(--cream-dim);margin-bottom:1.6rem}
.soon{margin-top:2rem;color:var(--cream-dim);font-size:.98rem}
.soon span{display:block;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--cream);margin-bottom:.2rem}

.how{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.8rem}
.how li{padding-left:1.2rem;border-left:1px solid var(--salmon)}
.how h3{font-size:1.5rem;margin-bottom:.35rem}
.how p{color:var(--cream-dim)}

.cta{padding:5.5rem 0 6rem;text-align:center;border-top:1px solid var(--line);isolation:isolate}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center}
.cta h2{font-size:clamp(2rem,8vw,3rem);font-style:italic;font-weight:400;max-width:16ch}
.cta p{color:var(--cream-dim);margin:1rem 0 2rem}

.footer{padding:2.5rem var(--pad) calc(2.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;font-size:.85rem;color:var(--cream-dim);display:grid;gap:.5rem}
.footer__brand{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cream)}
.footer__brand span{font-family:var(--serif);font-style:italic;color:var(--salmon);letter-spacing:0;font-size:1.1rem;text-transform:none;margin:0 .1em}
.footer a{color:var(--cream);text-decoration-color:var(--salmon);text-underline-offset:3px}

/* larger screens */
@media (min-width:720px){
  :root{--pad:2.5rem}
  .hero__logo{width:210px}
  .hero__actions{flex-direction:row;justify-content:center;max-width:none;width:auto}
  .process,.product,.ordering{padding:7rem 0}
  .steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .step,.step:last-child{border-bottom:none}
  .card{display:grid;grid-template-columns:1.1fr 1fr}
  .card__art{aspect-ratio:auto;min-height:24rem}
  .card__body{padding:2.6rem;display:flex;flex-direction:column;justify-content:center}
  .how{grid-template-columns:repeat(3,1fr);gap:2.5rem}
}

/* menu + gift box (v2) */
.card__body h2{margin-bottom:1rem}
.menu{list-style:none;margin:0 0 1.8rem;padding:0}
.menu li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.menu li:last-child{border-bottom:1px solid var(--line)}
.menu__name{font-family:var(--serif);font-size:1.3rem;color:var(--cream);line-height:1.25}
.menu .price{font-size:1.6rem;white-space:nowrap}
.menu .price small{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;color:var(--cream-dim);margin-left:.15rem}
.gift{padding:5rem 0;border-bottom:1px solid var(--line)}
.gift__box{margin-top:1.6rem;padding:2.4rem 1.6rem;border:1px solid var(--salmon);border-radius:4px;text-align:center;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at top,rgba(214,140,120,.08),transparent 70%)}
.gift__box h2{font-size:clamp(2.2rem,9vw,3.2rem);font-style:italic;font-weight:400;margin-bottom:1rem}
.gift__lead{font-size:1.1rem;color:var(--cream);max-width:30ch;margin-bottom:.6rem}
.gift__box p:not(.gift__lead){color:var(--cream-dim);max-width:32ch;margin-bottom:2rem}
@media (min-width:768px){.gift{padding:7rem 0}.gift__box{padding:3.6rem 3rem}.how.how--two{grid-template-columns:repeat(2,1fr)}}

/* v3: menu notes, simple steps, flavor chips */
.menu li{display:block}
.menu__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.menu__note{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim);margin-top:.25rem}
.menu__desc{margin-top:.35rem;color:var(--cream-dim);font-size:.95rem;line-height:1.5;max-width:34ch}
.steps--simple .step{display:flex;align-items:baseline;gap:1.1rem;padding:1.4rem 0}
.steps--simple .step__num{margin:0}
.steps--simple .step h3{margin:0}
.flavors{padding:5rem 0;border-top:1px solid var(--line)}
.flavors h2{font-size:clamp(2rem,7.5vw,3rem);margin-top:.9rem}
.chips{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem}
.chip{padding:.6rem 1.1rem;border:1px solid var(--salmon);border-radius:999px;font-family:var(--serif);font-size:1.2rem;line-height:1.2;color:var(--cream);background:rgba(201,134,115,.06)}
.flavors__more{margin-top:1.4rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--cream-dim)}
@media (min-width:720px){.flavors{padding:7rem 0}.steps--simple .step{display:block}.steps--simple .step__num{margin-bottom:.4rem}}

/* v8 taglines */
.hero__tag,.tagline{font-family:'Cormorant',Georgia,serif;font-style:italic;color:var(--salmon);font-size:1.45rem;line-height:1.3;margin-top:.6rem}
.tagline{margin:.4rem 0 1.4rem}