:root{--bg:#F3F6EE;--panel:#fff;--ink:#1B2A21;--mute:#56655A;--line:#D5DDCB;--accent:#6B2E3F;--accent-ink:#fff;--gold:#E3B23C;--sage:#DDE7D2;--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#141C17;--panel:#1D2822;--ink:#EDF2E8;--mute:#A3B2A6;--line:#2F3D34;--accent:#E8A9B8;--accent-ink:#2A1019;--sage:#243229}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans)}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.02em}h2{font-size:clamp(1.6rem,4vw,2.4rem)}h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:62ch}a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:64px 0}section.alt{background:var(--sage)}
.lede{color:var(--mute);font-size:1.1rem}
.btn{display:inline-block;border:0;border-radius:999px;padding:12px 24px;font:700 1rem var(--sans);cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}.btn.sm{padding:8px 16px;font-size:.9rem}
header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:18px;height:60px}
.brand{font:700 1.3rem var(--serif);text-decoration:none;margin-right:auto}
nav{display:flex;gap:16px;flex-wrap:wrap}nav a{text-decoration:none;font-weight:500;font-size:.95rem}nav a:hover,nav a[aria-current]{text-decoration:underline}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.badge{display:inline-block;background:var(--sage);border-radius:6px;padding:2px 9px;font-size:.82rem;font-weight:500;margin:0 6px 6px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label{font-weight:500;font-size:.9rem;display:block;margin-bottom:4px}
select,input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.chips button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:7px 15px;font:500 .93rem var(--sans);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.result{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:20px}
.result div{background:var(--sage);border-radius:12px;padding:14px}.result b{display:block;font:700 1.5rem var(--serif)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.steps div{padding:20px;border-right:1px solid var(--line)}.steps div:last-child{border:0}.steps b{font:700 2rem var(--serif);display:block}
.vslot{aspect-ratio:16/9;width:100%;border-radius:12px;background:var(--sage);border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--mute);font-size:.95rem;overflow:hidden}
video.vslot{border:0;object-fit:cover;padding:0}
figure{margin:0}figcaption{font-size:.9rem;color:var(--mute);margin-top:6px}
.split{display:grid;gap:28px;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:44px}.split.flip>:first-child{order:2}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}summary{font-weight:700;cursor:pointer}
.price{font:700 1.4rem var(--serif)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}#toast.on{opacity:1}
#cook{position:fixed;inset:0;background:var(--ink);color:var(--bg);z-index:50;display:none;flex-direction:column;padding:24px}#cook.on{display:flex}
#cook .txt{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
#cook .big{font:700 clamp(1.8rem,6vw,3.2rem)/1.2 var(--serif)}#cook .timer{font:700 3rem var(--serif);color:var(--gold)}#cook .btn{background:var(--bg);color:var(--ink)}
footer{padding:36px 0;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
@media(max-width:700px){.steps,.split{grid-template-columns:1fr}.split.flip>:first-child{order:0}.steps div{border-right:0;border-bottom:1px solid var(--line)}nav{display:none}section{padding:48px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
/* animated explainer clips (assets/anims.js) */
.anim{display:block;width:100%;aspect-ratio:16/9;background:var(--sage);border-radius:12px}
.anim *{transform-box:fill-box}
.anim .o{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.anim .g{fill:var(--gold)}.anim .w{fill:#6FB1C9;opacity:.55}.anim .st{fill:#8A8F8C}.anim .fx{fill:var(--panel);stroke:var(--ink);stroke-width:3}
.a-drop{animation:drop .9s linear infinite}@keyframes drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(34px);opacity:0}}
.a-cloud{animation:cloud 10s linear infinite}@keyframes cloud{0%{opacity:.85}70%,100%{opacity:0}}
.a-pick{animation:pick 10s ease-in-out infinite}@keyframes pick{0%,10%{transform:none;opacity:1}30%{transform:translate(120px,-60px) scale(1.3);opacity:1}85%{transform:translate(120px,-60px) scale(1.3);opacity:1}95%,100%{transform:translate(120px,-60px);opacity:0}}
.a-rise{transform-origin:bottom;animation:rise 10s ease-in-out infinite}@keyframes rise{0%{transform:scaleY(.05)}60%,90%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
.a-swell{transform-origin:center;animation:swell 10s ease-in-out infinite}@keyframes swell{0%{transform:scale(1)}60%,90%{transform:scale(1.35)}100%{transform:scale(1)}}
.a-fall{animation:fall 10s linear infinite;opacity:0}@keyframes fall{0%{transform:translateY(-70px);opacity:0}4%{opacity:1}28%{transform:translateY(0);opacity:1}34%,100%{opacity:0}}
.a-lid{animation:lid 10s ease-in infinite}@keyframes lid{0%,40%{transform:translateY(-80px) rotate(-12deg)}52%,92%{transform:none}100%{transform:translateY(-80px) rotate(-12deg)}}
.a-steam{animation:steam 10s ease-in-out infinite;opacity:0}@keyframes steam{0%,55%{opacity:0;transform:translateY(8px)}70%,90%{opacity:.8;transform:translateY(-6px)}100%{opacity:0}}
.a-swing{transform-origin:90% 90%;animation:swing 1.3s ease-in-out infinite alternate}@keyframes swing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.a-hop{animation:hop 1.3s ease-in-out infinite alternate}@keyframes hop{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.a-fill{transform-origin:bottom;animation:fill 10s linear infinite}@keyframes fill{0%{transform:scaleY(.03)}70%,100%{transform:scaleY(.8)}}
.a-stream{animation:stream 10s linear infinite;stroke-dasharray:6 8}@keyframes stream{0%{stroke-dashoffset:0;opacity:1}68%{opacity:1}72%,100%{stroke-dashoffset:-60;opacity:0}}
.a-cap{animation:cap 10s ease-in infinite}@keyframes cap{0%,78%{transform:translateY(-50px)}90%,97%{transform:none}100%{transform:translateY(-50px)}}
@media(prefers-reduced-motion:reduce){.anim *{animation:none!important;opacity:1!important}.a-steam,.a-fall{opacity:0!important}}
.post p{max-width:62ch}.post h1{max-width:20ch}

/* ---- mobile-first additions ---- */
html{-webkit-text-size-adjust:100%}a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
header.top{padding-top:env(safe-area-inset-top,0px)}
@media(max-width:700px){
body{font-size:16px}
header.top .wrap{height:54px}
section{padding:40px 0}h1{font-size:2.15rem}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}.btn.sm{min-height:44px}
.row>.btn{flex:1 1 100%}
select,input{font-size:16px;min-height:46px}
.chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 18px!important;padding:0 20px 6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;min-height:42px}
.card{padding:18px}.grid{gap:14px}.split{gap:18px;margin-bottom:32px}
.result{grid-template-columns:1fr 1fr}.result div:last-child{grid-column:1/-1}
.steps b{font-size:1.5rem}
#cook{padding:calc(16px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
#cook .row .btn{flex:1;min-height:58px}#cook .big{font-size:2rem}
#toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));width:max-content;max-width:90vw;text-align:center}
footer{padding-bottom:24px}
}

/* hamburger ("sandwich") menu */
.burger{display:none;width:46px;height:46px;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:10px;position:relative;flex:0 0 auto}
.burger span{position:absolute;left:11px;right:11px;height:3px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:40}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(82vw,330px);background:var(--bg);z-index:45;transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s;padding:calc(70px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px;box-shadow:-8px 0 30px rgba(0,0,0,.2);overflow-y:auto}
#drawer a{font:700 1.3rem var(--serif);text-decoration:none;padding:14px 8px;border-bottom:1px solid var(--line);min-height:52px}
#drawer a[aria-current]{color:var(--accent)}
#drawer .btn{margin-top:20px;text-align:center;font:700 1rem var(--sans);border:0;min-height:48px}
body.menu-open #drawer{transform:none;visibility:visible}body.menu-open #scrim{opacity:1;visibility:visible}body.menu-open{overflow:hidden}
header.top{z-index:50}
@media(max-width:700px){.burger{display:block}header.top .wrap{gap:6px}}
@media(prefers-reduced-motion:reduce){#drawer,#scrim,.burger span{transition:none!important}}