:root{--cream:#f7efe1;--ivory:#fdf9f1;--butter:#f3e0a0;--blush:#efd2ca;--rose:#c58b84;--mocha:#7a5545;--choc:#392922;--sage:#a9b99c;--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--ease:cubic-bezier(.77,0,.18,1);--pad:clamp(20px,5vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}
body{background:var(--cream);color:var(--choc);font:400 1rem/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:.98;letter-spacing:-.03em}
h2{font-size:clamp(2.4rem,7vw,5.2rem)}h3{font-weight:400}
:focus-visible{outline:2px solid var(--mocha);outline-offset:3px}
.lab{color:var(--mocha);font-weight:500;margin-bottom:.4rem}
.lead{max-width:36ch;font-size:1.12rem;color:var(--mocha);margin:0 0 1.8rem}
.row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1rem}
.tl{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--ease)}
.tl:hover{background-size:0 1px;background-position:100% 100%}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.7em;border-radius:99px;background:var(--choc);color:var(--cream);font-weight:500;font-size:.95rem;transition:color .5s}
.btn::before{content:'';position:absolute;inset:0;background:var(--rose);transform:translateY(102%);border-radius:50% 50% 0 0;transition:transform .6s var(--ease),border-radius .6s var(--ease);z-index:-1}
.btn:hover::before{transform:none;border-radius:0}.btn:hover{color:var(--choc)}
.ghost{background:none;box-shadow:inset 0 0 0 1px var(--choc);color:var(--choc)}.ghost::before{background:var(--butter)}
.dis{opacity:.45;pointer-events:none}
/* doodles */
.dd{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;color:var(--rose);overflow:visible;pointer-events:none}
.dd.a{position:absolute;z-index:3}.dd.f{animation:fl 8s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-9px) rotate(5deg)}}
.sq{width:150px;height:18px;display:block;margin:0 0 1.4rem}.ar{width:90px;height:56px}.big{width:64px;height:64px}
.sg{color:var(--sage)}.mo{color:var(--mocha)}.bu{color:#d4b240}
/* header */
#hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:padding .5s}
#hd::before{content:'';position:absolute;inset:0;background:rgba(247,239,225,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(57,41,34,.08);opacity:0;transition:opacity .5s;z-index:-1}
#hd.sc{padding-block:11px}#hd.sc::before{opacity:1}
.logo,.ha{position:relative;z-index:2}.logo{font:italic 300 1.6rem var(--serif);letter-spacing:-.02em}
#nav{display:flex;gap:2rem}#nav a{position:relative}
#nav a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
#nav a:hover::after,#nav a.on::after{transform:none;transform-origin:left}
.ha{display:flex;gap:.6rem;align-items:center}.cb{position:relative;width:44px;height:44px;display:grid;place-items:center}
.cb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
.cb b{position:absolute;top:2px;right:0;min-width:19px;height:19px;border-radius:99px;background:var(--rose);color:var(--ivory);font-size:.7rem;display:grid;place-items:center}
.burger{display:none;min-height:44px;padding:0 .4rem}
@media(max-width:819px){.burger{display:block}#nav{position:fixed;inset:0;z-index:1;background:var(--blush);flex-direction:column;justify-content:center;padding:var(--pad);gap:.3rem;font:300 clamp(2.8rem,14vw,4.4rem)/1.1 var(--serif);transform:translateY(-100%);visibility:hidden;transition:transform .8s var(--ease),visibility 0s .8s}#nav.open{transform:none;visibility:visible;transition-delay:0s}}
/* hero */
.hero{min-height:100svh;padding:112px var(--pad) 48px;display:grid;gap:1.5rem;align-items:center}
.hero h1{font-size:clamp(3.5rem,13vw,8rem);margin:.1em 0 .3em;letter-spacing:-.045em}
.hc{position:relative;min-height:118vw}.hc .ph{position:absolute}
.hA{right:0;top:0;width:52%;border-radius:999px 999px 18px 18px}.hB{left:0;top:20%;width:46%;border-radius:18px}.hC{left:20%;bottom:0;width:54%;border-radius:18px}
.x1{left:-1%;top:1%}.x2{right:-3%;top:44%;width:34px;height:34px}.x3{right:4%;bottom:-2%;color:var(--mocha)}.x4{left:24%;top:3%;width:80px;height:50px;transform:rotate(-10deg)}
@media(min-width:820px){.hero{grid-template-columns:1.1fr 1fr;padding-top:96px}.hc{min-height:min(82vh,700px)}}
.mq{overflow:hidden;white-space:nowrap;background:var(--choc);color:var(--cream);padding:1.1rem 0;font:italic 300 clamp(1.4rem,3vw,2.2rem) var(--serif)}
.mq div{display:inline-block;animation:mq 38s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
/* generic */
.ph{position:relative;display:block;overflow:hidden;aspect-ratio:var(--r,1);border-radius:14px;background:var(--blush)}
.ph img{transition:scale 1.2s var(--ease)}.ph:hover img{scale:1.07}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.w i{display:inline-block;font-style:inherit}
.sec{padding:clamp(70px,11vw,150px) var(--pad)}
.sh{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,4vw,3rem)}
.fg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px}
@media(min-width:820px){.fg{grid-template-columns:repeat(4,1fr);gap:28px}.fg.r3{grid-template-columns:repeat(3,1fr)}.fg:not(.r3) .card:nth-child(even){margin-top:3.5rem}}
.ci{display:flex;justify-content:space-between;gap:.8rem;margin:14px 0 6px;align-items:baseline}
.ci h3{font-size:clamp(1.15rem,2.2vw,1.55rem)}.ci span{font:400 1.15rem var(--serif);white-space:nowrap}
.st{display:inline-block;font-size:.8rem;padding:.15em .85em;border-radius:99px;background:var(--butter);margin:.2rem 0 .6rem}.s0{background:var(--sage)}.s2{background:var(--blush)}
.mas{columns:1;column-gap:28px}.mas .card{break-inside:avoid;margin-bottom:64px}.mas .card p{color:var(--mocha);margin-bottom:.4rem}
@media(min-width:560px){.mas{columns:2}}@media(min-width:1000px){.mas{columns:3}}
.sty{display:grid;gap:3rem;align-items:center}.sc2{position:relative;min-height:112vw}.sc2 .ph{position:absolute}.a1{left:0;top:0;width:62%}.a2{right:0;bottom:0;width:52%}.fl1{right:6%;top:4%;width:56px;height:56px}
.tx p{max-width:44ch;margin-top:1.1rem}.tx h2{margin-bottom:1rem}.tx .tl{display:inline-block;margin-top:1.6rem}
@media(min-width:820px){.sty{grid-template-columns:1fr 1fr;gap:6vw}.sc2{min-height:min(70vw,720px)}}
.why{background:var(--blush)}.wg{display:grid;gap:2.5rem;margin-top:3rem}.wg h3{font-size:1.7rem;margin:.8rem 0 .5rem}.wg p{max-width:32ch}
@media(min-width:820px){.wg{grid-template-columns:repeat(3,1fr);gap:4vw}}
.ig{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:820px){.ig{grid-template-columns:repeat(4,1fr)}}
.pg{padding:140px var(--pad) 40px}.pg h1{font-size:clamp(3.2rem,11vw,8rem);letter-spacing:-.045em;margin-bottom:1rem}
.em{text-align:center;padding:3rem 1rem;display:grid;justify-items:center;gap:.8rem}
/* product page */
.pd{display:grid;gap:2rem;padding:110px var(--pad) 0}.pi h1{font-size:clamp(2.6rem,7vw,5rem);margin:.8rem 0 .6rem}
.pr{font:400 1.8rem var(--serif);margin-bottom:.4rem}.ld{max-width:46ch;margin:.6rem 0 1.4rem}.note{margin-top:1.4rem;font-size:.9rem;color:var(--mocha)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--choc);border-radius:99px}.qty button{width:46px;height:46px;font-size:1.2rem}.qty b{min-width:2.4ch;text-align:center;font-weight:500}
@media(min-width:820px){.pd{grid-template-columns:1.1fr 1fr;gap:6vw;align-items:start}.pd>.ph{position:sticky;top:96px}}
/* contact */
.cds{display:grid;gap:16px;margin-top:2rem}.cd{background:var(--ivory);border-radius:18px;padding:1.6rem;display:grid;gap:.8rem;justify-items:start}.cd h3{font-size:1.6rem}
.cd label{display:grid;gap:.3rem;width:100%;font-size:.9rem}.cd input,.cd textarea,#note{font:inherit;width:100%;padding:.7rem .9rem;border:1px solid rgba(57,41,34,.25);border-radius:10px;background:var(--cream);color:inherit}
@media(min-width:820px){.cds{grid-template-columns:1fr 1fr}.cd:nth-child(3){grid-row:span 2}}
/* drawer */
.ov{position:fixed;inset:0;z-index:60;background:rgba(57,41,34,.4);opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}.ov.open{opacity:1;visibility:visible;transition-delay:0s}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);z-index:70;background:var(--ivory);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s}
.drawer.open{transform:none;visibility:visible;transition-delay:0s}
.dh{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(57,41,34,.12)}.dh h2{font-size:2rem}
#items{flex:1;overflow:auto;padding:8px 24px}.ci2{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid rgba(57,41,34,.1);align-items:start}
.ci2 img{width:72px;height:72px;border-radius:10px}.ci2 h3{font-size:1.2rem}.ci2 p{color:var(--mocha);margin-bottom:.4rem}.qty.sm button{width:34px;height:34px}.rm{font-size:.85rem;text-decoration:underline;padding:6px}
.df{padding:18px 24px 24px;border-top:1px solid rgba(57,41,34,.12);display:grid;gap:.7rem}.df label{font-size:.85rem;color:var(--mocha)}.tot{display:flex;justify-content:space-between;font:400 1.4rem var(--serif);margin:.3rem 0}.drawer.empty .df{display:none}
/* curtain + footer */
#cu{position:fixed;inset:0;z-index:90;background:var(--blush);display:grid;place-items:center;transform:translateY(100%);pointer-events:none;font:italic 300 clamp(2.2rem,8vw,5rem) var(--serif)}
#ft{background:var(--choc);color:var(--cream);padding:clamp(60px,8vw,110px) var(--pad) 28px}
.wm{font:300 clamp(3.2rem,15vw,11rem)/.9 var(--serif);letter-spacing:-.05em;margin-bottom:2.5rem}
.fc{display:flex;flex-wrap:wrap;gap:2rem 5rem;justify-content:space-between}.fc nav,.fc div{display:grid;gap:.4rem;align-content:start}.fc a:hover{color:var(--butter)}
.cp{margin-top:3rem;font-size:.85rem;opacity:.65}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}