/* blogfoodie hero + page styles. Tokens, timings and easings follow the motion-02 template. */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
--t1:14px;--t2:16px;--t3:20px;--t4:32px;--t5:56px;--t6:104px;--out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
--bg:#1b110b;--surface:#2a1b12;--text:#f7ecd9;--muted:#cdb89a;--accent:#e0531f;--sunny:#f5b82e;--leaf:#8fbf6a;--btn:#f5b82e;--btntext:#1b110b;
--heading:'Fraunces',Georgia,serif;--body:'Archivo',system-ui,sans-serif;--ink:#1b110b}
*{box-sizing:border-box;margin:0}main{overflow-x:clip}
body{background:var(--bg);color:var(--text);font:400 var(--t2)/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--heading);font-weight:700;line-height:.95;letter-spacing:-.035em}
a{color:inherit}.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s3)}
:focus-visible{outline:3px solid var(--sunny);outline-offset:3px}
/* header */
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:2px solid var(--text)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:64px;gap:var(--s2)}
.logo{font:700 var(--t3)/1 var(--heading);letter-spacing:-.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--s1);min-height:56px;padding:0 var(--s4);border-radius:999px;background:var(--btn);color:var(--btntext);font-weight:700;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--out);border:0;cursor:pointer;font-size:var(--t2);font-family:inherit;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);border-radius:inherit;transform:scale(0,1);transform-origin:left;transition:transform .55s var(--out)}
.btn .arr{display:inline-block;transition:transform .5s var(--out)}
.btn:hover{transform:translateY(-3px);color:#fff}.btn:hover::before{transform:none}.btn:hover .arr{transform:translateX(4px) rotate(-45deg)}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:44px;padding:0 var(--s2);font-size:var(--t1)}
.eyebrow{font-size:var(--t1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sunny)}
/* hero */
.hero{padding:var(--s5) 0 var(--s7)}
.hero .wrap{display:grid;gap:var(--s5);align-items:center}
.hero h1{font-size:var(--t5);margin:var(--s2) 0 var(--s3)}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.w{display:inline-block;transform:translateY(.25em) rotate(2deg);animation:wup .9s var(--out) forwards}
@keyframes wup{to{transform:none}}
.hl{color:var(--accent);position:relative;display:inline-block}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.12em;background:var(--sunny);border-radius:99px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:swash .8s .7s var(--out) forwards}
@keyframes swash{to{transform:scaleX(1)}}
.hero p.sub{font-size:var(--t3);max-width:40ch;color:var(--muted);margin-bottom:var(--s4);line-height:1.5}
/* plate stage (same classes and timings as the template stage) */
.stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center}
.stage>*{position:absolute}
.plate{inset:6%;border-radius:50%;background:var(--sunny);transform:scale(.85);animation:pop .9s var(--out) forwards}
.plate::after{content:"";position:absolute;inset:9%;border-radius:50%;border:3px dashed rgba(27,17,11,.25)}
.badge{right:2%;top:4%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-align:center;font:700 var(--t1)/1.15 var(--heading);padding:var(--s2);animation:spin 18s linear infinite,sprinkle .7s 4.6s var(--spring) both}

/* bowl: ingredients fall in, then it settles into a finished dish */
.bowl-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bowl-art .bowl-drop{transform-box:fill-box;transform-origin:50% 100%;animation:bowl-in 1s .2s var(--spring) both}
.it,.herb,.spark{transform-box:fill-box;transform-origin:center}
.it{animation:fall 1s var(--d) both}
@keyframes bowl-in{from{transform:translateY(30px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes fall{
 0%{transform:translateY(-190px) rotate(var(--r));opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}
 10%{opacity:1}
 62%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
 78%{transform:translateY(-10px);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
 100%{transform:none;opacity:1}}
.drizzle{stroke-dasharray:1;animation:draw .9s 4s var(--out) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.herb{animation:sprinkle .5s var(--d) var(--spring) both}
.spark{animation:twinkle 2.4s var(--d) ease-in-out infinite both}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes pop{to{transform:none}}
@keyframes drop{from{transform:translateY(-40%) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes sprinkle{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.par{will-change:transform}
/* marquee */
.marquee{background:var(--accent);color:#fff;transform:rotate(-2deg);margin:0 -16px;position:relative;border-block:3px solid var(--text)}
.mwrap{overflow:hidden}
.track{display:flex;width:max-content;animation:mq 22s linear infinite}
.track span{font:700 var(--t4)/1 var(--heading);padding:var(--s3) var(--s4);white-space:nowrap;letter-spacing:-.02em}
.track span::after{content:"✺";margin-left:var(--s4)}
.paused .track,.paused .badge,.paused .stage *{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.pause{position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;border-radius:999px;border:2px solid #fff;background:var(--ink);color:#fff;font:700 var(--t1) var(--body);cursor:pointer;padding:0 var(--s2)}
/* sections */
section{padding:var(--s7) 0}
.sh{margin-bottom:var(--s5)}
section h2{font-size:var(--t5);max-width:14ch;margin-top:var(--s1)}
.benefits{display:grid;gap:var(--s4)}
.ben{border-top:3px solid var(--text);padding-top:var(--s3)}
.ben .n{font:700 var(--t4)/1 var(--heading);color:var(--sunny)}
.ben h3{font-size:var(--t3);letter-spacing:-.01em;margin:var(--s2) 0 var(--s1);line-height:1.2}.ben p{color:var(--muted)}
/* every review covers */
.covers{display:grid;gap:var(--s5);align-items:start}
.covers .lead{color:var(--muted);font-size:var(--t3);max-width:34ch;margin-top:var(--s3);line-height:1.5}
.covers ol{list-style:none;padding:0;display:grid;gap:0;counter-reset:c}
.covers li{counter-increment:c;display:flex;gap:var(--s2);align-items:baseline;border-top:2px solid var(--text);padding:var(--s2) 0;font:700 var(--t3)/1.2 var(--heading);letter-spacing:-.01em}
.covers li::before{content:counter(c,decimal-leading-zero);font:700 var(--t1) var(--body);color:var(--sunny);letter-spacing:.08em}
.covers li:last-child{border-bottom:2px solid var(--text)}
.disclose{margin-top:var(--s4);border:2px dashed var(--sunny);border-radius:16px;padding:var(--s2) var(--s3);color:var(--text)}
.disclose b{color:var(--sunny)}
/* coming soon */
.soon{background:var(--sunny);color:var(--ink);border-block:3px solid var(--text)}
.soon .eyebrow{color:var(--ink)}
.tlabel{display:inline-block;border:2px dashed var(--ink);border-radius:999px;padding:4px var(--s2);font-size:var(--t1);font-weight:700;letter-spacing:.08em}
.soon h2{margin:var(--s3) 0;max-width:12ch}
.soon p{font-size:var(--t3);max-width:34ch;line-height:1.5}
/* footer */
footer{padding:var(--s5) 0 var(--s6);font-size:var(--t1);color:var(--muted);border-top:2px solid var(--text)}
footer .fw{font:700 var(--t4)/1 var(--heading);color:var(--text);letter-spacing:-.02em}
footer .tag{margin:var(--s1) 0 var(--s3);font-size:var(--t3);color:var(--text)}
footer .fine{max-width:64ch;margin-bottom:var(--s3)}
footer a{text-decoration:underline;text-underline-offset:3px}
/* privacy / post pages */
.doc{padding:var(--s6) 0 var(--s7)}.doc .wrap{max-width:760px}
.doc h1{font-size:var(--t5);margin:var(--s2) 0 var(--s4)}
.doc p{color:var(--muted);font-size:var(--t3);line-height:1.6;margin-bottom:var(--s3)}
.doc a{color:var(--sunny)}
/* reveals (only when JS is running) */
.js .rv{opacity:0;transform:translateY(40px) rotate(1deg);transition:opacity .8s var(--out),transform .9s var(--out);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
@media(min-width:768px){
 .hero{padding:var(--s6) 0 var(--s8)}.hero .wrap{grid-template-columns:1.15fr .85fr}.hero h1{font-size:var(--t6)}
 section{padding:var(--s8) 0}section h2,.soon h2{font-size:var(--t6)}
 .benefits{grid-template-columns:repeat(3,1fr)}.covers{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
 .hero{padding:var(--s3) 0 var(--s5)}.hero .wrap{gap:var(--s2);grid-template-columns:1fr}
 .hero h1{margin:var(--s1) 0 var(--s2)}.hero p.sub{font-size:var(--t2);margin-bottom:var(--s3)}
 .stage{max-width:240px;margin-top:calc(var(--s2)*-1)}.badge{padding:var(--s1);font-size:var(--t1)}
 .pause{right:var(--s2)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
 .w,.js .rv,.plate,.it,.herb,.spark,.bowl-drop,.badge,.hl::after{transform:none!important;opacity:1!important}.drizzle{stroke-dashoffset:0!important}.par{translate:none!important}
 .pause{display:none}.mwrap{overflow-x:auto}}