/* Pellegrino's Kitchen: cozy, pale, hand-made */
:root{
  --cream:#FBF6EE; --flour:#FFFDF8; --oat:#EFE4D2; --oat-deep:#E3D4BD;
  --butter:#F6E9BE; --butter-soft:#FBF2D8; --blush:#F3DDD6; --blush-deep:#E7C1B7;
  --sage:#DCE4D1; --sage-deep:#AEBC9F; --cocoa:#805F4A; --cocoa-deep:#5E4535;
  --ink:#4A372C; --taupe:#B3A193; --line:rgba(128,95,74,.18);
  --shadow-sm:0 2px 6px rgba(94,69,53,.08);
  --shadow:0 10px 30px -12px rgba(94,69,53,.28), 0 3px 8px rgba(94,69,53,.06);
  --shadow-lg:0 24px 60px -18px rgba(94,69,53,.38);
  --r:22px; --r-lg:34px;
  --f-display:"Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --f-body:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script:"Caveat", "Segoe Print", cursive;
  --gingham: linear-gradient(90deg, rgba(231,193,183,.42) 50%, transparent 50%), linear-gradient(rgba(231,193,183,.42) 50%, transparent 50%);
  --gingham-soft: linear-gradient(90deg, rgba(255,253,248,.5) 50%, transparent 50%), linear-gradient(rgba(255,253,248,.5) 50%, transparent 50%);
  --gingham-sage: linear-gradient(90deg, rgba(174,188,159,.32) 50%, transparent 50%), linear-gradient(rgba(174,188,159,.32) 50%, transparent 50%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;
  background-color:var(--cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(128,95,74,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(128,95,74,.018) 0 1px, transparent 1px 5px);
}
img,svg{display:block;max-width:100%}
a{color:var(--cocoa-deep);text-decoration-color:var(--blush-deep);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--cocoa)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.15;color:var(--cocoa-deep);margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
.sprites{position:absolute;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cocoa-deep);color:var(--flour);padding:10px 16px;border-radius:12px;font-weight:700}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px;border-radius:12px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.4em;border-radius:999px;border:2px solid var(--cocoa);
  font-family:var(--f-display);font-weight:500;font-size:1.05rem;text-decoration:none;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;box-shadow:0 4px 0 rgba(94,69,53,.16)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(94,69,53,.16)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(94,69,53,.16)}
.btn-primary{background:var(--cocoa);color:var(--flour)}
.btn-primary:hover{background:var(--cocoa-deep);color:var(--flour)}
.btn-soft{background:var(--flour);color:var(--cocoa-deep)}
.btn-soft:hover{background:var(--butter-soft);color:var(--cocoa-deep)}
.btn-small{min-height:40px;padding:.45em 1em;font-size:.95rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,246,238,.88);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px dashed var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cocoa-deep)}
.brand img{width:48px;height:48px;transition:transform .5s ease}
.brand:hover img{transform:rotate(-12deg)}
.brand-name{font-family:var(--f-display);font-weight:600;font-size:1.25rem;line-height:1}
.brand-name span{font-family:var(--f-script);font-weight:700;font-size:1.45rem;color:var(--cocoa);margin-left:2px}
.site-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:.5em .9em;border-radius:999px;text-decoration:none;font-family:var(--f-display);font-weight:500;color:var(--cocoa-deep);transition:background-color .2s}
.site-nav a:hover{background:var(--oat)}
.site-nav a.nav-pill{background:var(--blush);border:2px solid var(--blush-deep)}
.site-nav a.nav-pill:hover{background:var(--blush-deep)}
.menu-toggle{display:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--line);background:var(--flour);cursor:pointer;position:relative}
.menu-lines,.menu-lines::before,.menu-lines::after{position:absolute;left:50%;width:20px;height:2.5px;border-radius:3px;background:var(--cocoa-deep);transform:translateX(-50%);transition:transform .25s, opacity .25s}
.menu-lines{top:50%;margin-top:-1px}
.menu-lines::before,.menu-lines::after{content:"";left:0;transform:none}
.menu-lines::before{top:-7px}.menu-lines::after{top:7px}
.menu-toggle[aria-expanded="true"] .menu-lines{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-lines::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after{transform:translateY(-7px) rotate(-45deg)}

/* Kicker / script */
.script-kicker{font-family:var(--f-script);font-weight:700;font-size:1.6rem;color:var(--cocoa);margin:0 0 .1em;line-height:1.1;transform:rotate(-2deg);display:inline-block}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,90px) 0 clamp(70px,9vw,120px);
  background:radial-gradient(ellipse at 80% 30%, var(--butter-soft) 0, transparent 55%), radial-gradient(ellipse at 10% 90%, var(--blush) 0, transparent 50%)}
.flour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,5vw,64px)}
.hero h1 em{font-style:normal;font-family:var(--f-script);font-weight:700;color:var(--cocoa);font-size:1.15em;white-space:nowrap;
  background:linear-gradient(transparent 62%, var(--blush) 62%, var(--blush) 92%, transparent 92%)}
.lead{font-size:1.18rem;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 18px}
.sprinkle-toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--cocoa);cursor:pointer;padding:6px 10px;border-radius:999px;font-size:.95rem}
.sprinkle-toggle:hover{background:rgba(239,228,210,.7)}
.sprinkle-toggle svg{width:24px;height:24px}
.hero-art{display:grid;justify-items:center;gap:6px}
.plate{width:min(420px,82vw);aspect-ratio:1;border-radius:50%;padding:7%;
  background-color:var(--flour);background-image:var(--gingham);background-size:26px 26px;
  box-shadow:var(--shadow-lg), inset 0 0 0 10px rgba(255,253,248,.9), inset 0 0 0 12px var(--blush-deep);position:relative}
.logo-button{width:100%;height:100%;border-radius:50%;border:0;padding:9%;cursor:pointer;background:var(--cream);box-shadow:0 6px 18px rgba(94,69,53,.18), inset 0 0 0 3px rgba(128,95,74,.12);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.logo-button:hover{transform:rotate(-4deg) scale(1.02)}
.logo-button:active{transform:scale(.97)}
.logo-button img{width:100%;height:100%;object-fit:contain}
.plate-hint{font-family:var(--f-script);font-size:1.35rem;color:var(--cocoa);margin:8px 0 0;transform:rotate(2deg)}
.scallop{position:absolute;left:0;right:0;bottom:-1px;height:28px;z-index:1;
  background:radial-gradient(circle at 18px 28px, var(--flour) 17px, transparent 18px) 0 0/36px 28px repeat-x}

/* Doodles */
.doodle{position:absolute;width:56px;height:56px;color:var(--taupe);z-index:1;pointer-events:auto;transition:color .3s}
.doodle:hover{color:var(--cocoa)}
.wiggle:hover{animation:wiggle .7s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) scale(1.08)}40%{transform:rotate(10deg) scale(1.08)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.hero .d1{top:9%;left:3%;width:62px;height:62px;rotate:-20deg}
.hero .d2{bottom:16%;left:44%;width:58px;height:58px;color:var(--sage-deep);rotate:12deg}
.hero .d3{top:12%;right:5%;width:40px;height:40px;color:var(--blush-deep)}
.hero .d4{bottom:14%;right:3%;width:64px;height:64px;rotate:8deg}
.hero .d5{top:6%;left:46%;width:50px;height:50px}
.hero .d6{bottom:22%;left:2%;width:34px;height:34px;color:#D8BE7E}

/* Sections */
.section{position:relative;padding:clamp(56px,8vw,100px) 0}
.section-head{text-align:center;max-width:44em;margin:0 auto 34px}
.recipes{background:var(--flour)}
.coming-soon{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;padding:.6em 1.2em;border-radius:999px;background:var(--butter-soft);border:2px dashed #E3CC86;font-weight:400;color:var(--cocoa-deep);text-align:left}
.coming-soon svg{width:22px;height:22px;flex:none;color:var(--blush-deep)}

/* Recipe tools */
.recipe-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.search{position:relative;flex:1 1 300px;max-width:380px}
.search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--cocoa)}
.search input{width:100%;min-height:50px;padding:.6em 1em .6em 46px;border-radius:999px;border:2px solid var(--oat-deep);background:var(--cream);font:inherit;color:var(--ink);transition:border-color .2s, box-shadow .2s}
.search input::placeholder{color:#8F7B6C}
.search input:focus{outline:none;border-color:var(--cocoa);box-shadow:0 0 0 4px rgba(231,193,183,.55)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:.4em 1.05em;border-radius:999px;border:2px solid var(--oat-deep);background:var(--cream);cursor:pointer;font-family:var(--f-display);font-weight:500;color:var(--cocoa-deep);transition:background-color .2s, transform .2s, border-color .2s}
.chip:hover{background:var(--oat);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--cocoa);border-color:var(--cocoa);color:var(--flour)}
.chip svg{width:16px;height:16px;color:var(--blush-deep)}
.chip[aria-pressed="true"] svg{color:var(--blush)}
.result-count{text-align:center;color:var(--cocoa);font-size:.95rem;margin:4px 0 22px;min-height:1.5em}

/* Recipe cards */
.recipe-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.card{position:relative;height:100%;display:flex;flex-direction:column;background:var(--cream);border-radius:var(--r);box-shadow:var(--shadow);border:2px solid rgba(227,212,189,.7);overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; animation:pop .45s ease both}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.card-art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background-size:22px 22px;overflow:hidden}
.card-art svg.bake{width:68%;height:auto;filter:drop-shadow(0 8px 10px rgba(94,69,53,.18));transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-art svg.bake{transform:scale(1.06) rotate(-3deg)}
.tone-blush .card-art{background-color:var(--blush);background-image:radial-gradient(rgba(255,253,248,.7) 2px, transparent 2.5px)}
.tone-sage .card-art{background-color:var(--sage);background-image:radial-gradient(rgba(255,253,248,.7) 2px, transparent 2.5px)}
.tone-butter .card-art{background-color:var(--butter);background-image:radial-gradient(rgba(255,253,248,.75) 2px, transparent 2.5px)}
.tone-oat .card-art{background-color:var(--oat);background-image:radial-gradient(rgba(255,253,248,.75) 2px, transparent 2.5px)}
.ribbon{position:absolute;top:14px;left:14px;transform:rotate(-4deg);background:var(--flour);color:var(--cocoa-deep);font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px 4px 10px;border-radius:6px 999px 999px 6px;box-shadow:var(--shadow-sm);border:1.5px dashed var(--blush-deep);z-index:2;white-space:nowrap}
.ribbon::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blush-deep);margin-right:6px;vertical-align:middle;transform:translateY(-1px)}
.card-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.card-cat{font-family:var(--f-script);font-size:1.25rem;font-weight:700;color:var(--cocoa);line-height:1}
.card h3{margin:0}
.card h3 button{all:unset;cursor:pointer}
.card h3 button::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.card h3 button:focus-visible::after{outline:3px solid var(--cocoa);outline-offset:-3px}
.card-desc{font-size:.97rem;margin:0;color:#5E4A3E}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:var(--cocoa-deep);background:var(--flour);border:1.5px solid var(--oat-deep);padding:2px 10px;border-radius:999px}
.fav-btn{position:absolute;top:10px;right:10px;z-index:3;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,253,248,.9);background:rgba(255,253,248,.92);display:grid;place-items:center;cursor:pointer;color:var(--cocoa);box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.fav-btn svg{width:24px;height:24px}
.fav-btn:hover{transform:scale(1.1)}
.fav-btn[aria-pressed="true"]{color:#D49A8C}
.fav-btn.pop{animation:heartpop .45s ease}
@keyframes heartpop{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.empty{text-align:center;padding:30px 0;color:var(--cocoa)}
.empty svg{width:64px;height:64px;margin:0 auto 8px;color:var(--taupe)}

/* Spinner */
.spinner-section{background-color:var(--cream);background-image:var(--gingham-sage);background-size:34px 34px}
.spinner-inner{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"copy wheel" "result wheel";align-items:center;gap:20px 40px;background:var(--flour);border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);box-shadow:var(--shadow);border:2px solid var(--oat)}
.spinner-copy{grid-area:copy;align-self:end}
.spin-result{grid-area:result;align-self:start;min-height:7.5em}
.wheel-wrap{grid-area:wheel}
.spin-result .result-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;border-radius:var(--r);background:var(--butter-soft);border:2px dashed #E3CC86;animation:pop .4s ease both}
.spin-result .result-card p{margin:0;flex:1 1 200px}
.spin-result strong{font-family:var(--f-display);font-size:1.2rem;color:var(--cocoa-deep)}
.wheel-wrap{position:relative;width:min(360px,78vw);aspect-ratio:1;justify-self:center}
.wheel-pointer{position:absolute;top:-14px;left:50%;width:44px;height:44px;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 3px 3px rgba(94,69,53,.25))}
.wheel{width:100%;height:100%;border-radius:50%;box-shadow:var(--shadow-lg), 0 0 0 10px var(--flour), 0 0 0 13px var(--oat-deep);transition:transform 3.6s cubic-bezier(.17,.67,.21,1);will-change:transform}
.wheel svg{width:100%;height:100%}

/* Tutorials */
.tutorials{background:var(--flour)}
.tutorial-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.tut{position:relative;background:var(--cream);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:2px solid rgba(227,212,189,.7);display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s}
.tut:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tut-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background-size:24px 24px;border:0;width:100%;cursor:pointer;padding:0}
.tut-thumb .play{width:72px;height:72px;border-radius:50%;background:rgba(255,253,248,.95);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tut-thumb:hover .play{transform:scale(1.1)}
.tut-thumb .play svg{width:30px;height:30px;margin-left:4px;color:var(--cocoa)}
.tut-thumb .soon{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--cocoa);color:var(--flour);font-family:var(--f-display);font-weight:500;font-size:.85rem;padding:4px 14px;border-radius:999px}
.tut-thumb .tdood{position:absolute;width:44px;height:44px;color:rgba(128,95,74,.35);top:12px;right:14px}
.tut-body{padding:18px 20px 22px}
.tut-body h3{margin-bottom:.35em}
.tut-tip{font-size:.97rem;margin:0;color:#5E4A3E}
.tut-tip b{font-family:var(--f-script);font-size:1.25rem;color:var(--cocoa);font-weight:700}
.tut .ribbon{top:14px;left:14px}

/* About */
.about{background-color:var(--cream)}
.about-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.about-card{position:relative;background:var(--flour);border-radius:var(--r-lg);padding:clamp(28px,5vw,54px);box-shadow:var(--shadow);border:2px solid var(--oat);
  background-image:linear-gradient(rgba(231,193,183,.0) 0 0)}
.about-card::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(-3deg);background-color:rgba(243,221,214,.85);background-image:var(--gingham);background-size:10px 10px;border-radius:4px;box-shadow:var(--shadow-sm)}
.about-card .a1{top:18px;right:22px;color:var(--sage-deep)}
.about-card .a2{bottom:22px;right:30px;width:34px;height:34px;color:var(--blush-deep)}
.about-card p{max-width:36em}
.signoff{font-family:var(--f-script);font-size:1.7rem;font-weight:700;color:var(--cocoa);margin:0}
.about-art{position:relative;aspect-ratio:1;max-width:380px;width:100%;justify-self:center}
.art-bubble{position:absolute;border-radius:50%}
.b1{inset:6%;background-color:var(--blush);background-image:var(--gingham);background-size:24px 24px;box-shadow:var(--shadow)}
.b2{width:30%;height:30%;right:0;top:0;background:var(--butter);box-shadow:var(--shadow-sm)}
.about-bakes{position:absolute;inset:18%;display:grid;place-items:center}
.about-bakes svg{width:100%;filter:drop-shadow(0 12px 14px rgba(94,69,53,.22))}

/* Contact */
.contact{background:var(--flour);padding-bottom:clamp(70px,9vw,110px)}
.contact-card{position:relative;max-width:760px;margin:0 auto;text-align:center;padding:clamp(34px,6vw,60px) clamp(20px,5vw,56px);border-radius:var(--r-lg);
  background-color:var(--butter-soft);background-image:var(--gingham);background-size:30px 30px;box-shadow:var(--shadow)}
.contact-card::after{content:"";position:absolute;inset:14px;border-radius:calc(var(--r-lg) - 10px);background:var(--flour);z-index:0;box-shadow:inset 0 0 0 2px var(--oat)}
.contact-card > *{position:relative;z-index:1}
.contact-card .doodle{position:absolute;z-index:2}
.contact-card .c1{top:28px;left:34px;rotate:-25deg}
.contact-card .c2{bottom:30px;right:36px;width:38px;height:38px;color:#D8BE7E}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.contact-actions .btn-primary{word-break:break-all}

/* Footer */
.site-footer{background:var(--oat);border-top:3px dashed rgba(128,95,74,.22);padding:40px 0 34px;text-align:center;font-size:.97rem}
.footer-inner{display:grid;justify-items:center;gap:4px}
.footer-inner img{width:72px;height:72px;margin-bottom:6px}
.footer-inner p{margin:0}
.footer-love{font-family:var(--f-display);color:var(--cocoa-deep)}
.footer-note{font-size:.88rem;color:#6A5446;margin-top:6px!important;max-width:36em}
.to-top{margin-top:10px;font-weight:700}

/* Modal */
.recipe-modal{width:min(880px,100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-lg);background:var(--cream);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
.recipe-modal::backdrop{background:rgba(74,55,44,.42);backdrop-filter:blur(3px)}
.recipe-modal[open]{animation:modalIn .4s cubic-bezier(.34,1.4,.64,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.modal-inner{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.m-head{position:relative;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;padding:28px 70px 24px 28px;background-size:24px 24px;overflow:hidden}
.m-head .art{width:200px;aspect-ratio:1;border-radius:50%;background:var(--flour);display:grid;place-items:center;box-shadow:var(--shadow), inset 0 0 0 6px var(--flour), inset 0 0 0 8px var(--blush-deep)}
.m-head .art svg{width:76%}
.m-head h2{margin:.1em 0 .25em;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.m-head p{margin:0 0 .6em}
.m-sample{display:inline-flex;align-items:center;gap:6px;background:var(--flour);border:1.5px dashed var(--blush-deep);color:var(--cocoa-deep);font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:3px 12px;border-radius:999px}
.m-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:2px solid var(--oat-deep);background:var(--flour);cursor:pointer;display:grid;place-items:center;z-index:3;transition:transform .25s}
.m-close:hover{transform:rotate(90deg)}
.m-close svg{width:18px;height:18px}
.m-head .fav-btn{position:static;width:auto;height:44px;padding:0 16px 0 12px;border-radius:999px;display:inline-flex;gap:8px;border:2px solid var(--blush-deep);font-family:var(--f-display);font-weight:500;color:var(--cocoa-deep)}
.m-head .fav-btn svg{color:#D49A8C}
.m-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.m-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;padding:26px 28px 32px;background:var(--flour)}
.m-body h3{display:flex;align-items:center;gap:8px}
.m-body h3 svg{width:26px;height:26px;color:var(--taupe)}
.scaler{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;padding:10px 12px;border-radius:18px;background:var(--cream);border:2px solid var(--oat)}
.scaler .label{font-weight:700;color:var(--cocoa-deep);font-size:.95rem;flex:1 1 100%}
.step-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--cocoa);background:var(--flour);cursor:pointer;font-family:var(--f-display);font-size:1.3rem;line-height:1;color:var(--cocoa-deep);display:grid;place-items:center}
.step-btn:hover{background:var(--butter-soft)}
.step-btn[disabled]{opacity:.35;cursor:not-allowed}
.scale-val{min-width:6.5em;text-align:center;font-family:var(--f-display);font-weight:600;color:var(--cocoa-deep)}
.mult-chips{display:flex;gap:6px;margin-left:auto}
.mult-chips .chip{min-height:34px;padding:.2em .75em;font-size:.9rem}
.ing-list{list-style:none;margin:0;padding:0}
.ing-list li.group{font-family:var(--f-script);font-size:1.35rem;font-weight:700;color:var(--cocoa);margin:10px 0 2px}
.ing{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:14px;cursor:pointer;transition:background-color .2s}
.ing:hover{background:var(--cream)}
.ing input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:2px 0 0;border-radius:8px;border:2px solid var(--cocoa);background:var(--flour);cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.ing input::after{content:"";width:6px;height:11px;border:solid var(--flour);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);margin-top:-3px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.ing input:checked{background:var(--sage-deep);border-color:#8E9E7F}
.ing input:checked::after{transform:rotate(45deg) scale(1)}
.ing input:focus-visible{outline:3px solid var(--cocoa);outline-offset:2px}
.ing .txt{transition:opacity .2s}
.ing input:checked + .txt{text-decoration:line-through;text-decoration-color:var(--blush-deep);text-decoration-thickness:2px;opacity:.55}
.ing .amt{font-weight:700;color:var(--cocoa-deep)}
.ing .metric{color:#76604F;font-size:.9rem}
.ing-progress{font-size:.9rem;color:var(--cocoa);margin:10px 0 0}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;counter-increment:s;padding:2px 0 14px 46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--blush);color:var(--cocoa-deep);font-family:var(--f-display);font-weight:600;display:grid;place-items:center}
.steps .tbtn{margin-top:6px}
.m-note{font-size:.9rem;color:#6A5446;background:var(--cream);border-radius:14px;padding:10px 14px;margin-top:6px}
.tbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--sage-deep);background:var(--sage);color:var(--cocoa-deep);border-radius:999px;padding:3px 12px;font-size:.88rem;font-weight:700;cursor:pointer}
.tbtn:hover{background:#CDD8C0}
.tbtn svg{width:18px;height:18px}

/* Cook mode */
.cook{padding:26px 28px 32px;background:var(--flour)}
.cook-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cook-count{font-family:var(--f-display);font-weight:600;color:var(--cocoa)}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots span{width:11px;height:11px;border-radius:50%;background:var(--oat-deep);transition:background-color .3s, transform .3s}
.dots span.done{background:var(--sage-deep)}
.dots span.now{background:var(--cocoa);transform:scale(1.25)}
.cook-step{min-height:9em;padding:26px 28px;border-radius:var(--r);background-color:var(--cream);background-image:radial-gradient(rgba(231,193,183,.35) 1.5px, transparent 2px);background-size:18px 18px;border:2px solid var(--oat);font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.55;color:var(--ink)}
.cook-step p{margin:0}
.cook-step .tbtn{margin-top:14px;font-size:1rem;padding:6px 14px}
.cook-nav{display:flex;justify-content:space-between;gap:12px;margin:16px 0 22px}
.kt{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:16px 20px;border-radius:var(--r);background:var(--sage);border:2px solid var(--sage-deep)}
.kt-face{position:relative;width:96px;height:96px;border-radius:50%;background:var(--flour);box-shadow:inset 0 0 0 5px var(--blush), var(--shadow-sm);display:grid;place-items:center}
.kt-face svg.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.kt-face .knob{position:absolute;top:-8px;left:50%;width:18px;height:12px;margin-left:-9px;border-radius:6px 6px 2px 2px;background:var(--cocoa)}
.kt-time{font-family:var(--f-display);font-weight:600;font-size:1.35rem;color:var(--cocoa-deep);font-variant-numeric:tabular-nums}
.kt-ctrl h4{margin:0 0 6px;font-size:1.05rem}
.kt-btns{display:flex;flex-wrap:wrap;gap:8px}
.kt-btns .btn{min-height:40px;padding:.35em 1em;font-size:.95rem}
.kt.ringing .kt-face{animation:ring .5s ease-in-out 6}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.kt-msg{font-family:var(--f-script);font-size:1.4rem;color:var(--cocoa);min-height:1.3em;margin:4px 0 0}

/* Timer pill + toast */
.timer-pill{position:fixed;left:16px;bottom:16px;z-index:45;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;border:2px solid var(--sage-deep);background:var(--sage);color:var(--cocoa-deep);font-family:var(--f-display);font-weight:600;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.timer-pill svg{width:24px;height:24px}
.timer-pill[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:22px;z-index:60;transform:translate(-50%,140%);background:var(--cocoa-deep);color:var(--flour);padding:12px 22px;border-radius:999px;font-weight:600;box-shadow:var(--shadow-lg);transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s, visibility 0s linear .4s;max-width:calc(100vw - 32px);text-align:center;opacity:0;visibility:hidden}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:2}
  .hero-art{order:1}
  .lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .plate{width:min(330px,74vw)}
  .spinner-inner,.about-inner{grid-template-columns:1fr}
  .spinner-inner{grid-template-areas:"copy" "wheel" "result";gap:30px}
  .spin-result{min-height:0}
  .spinner-copy{text-align:center}
  .spin-result .result-card{justify-content:center;text-align:center}
  .about-art{max-width:280px;order:-1}
  .hero .d2{left:auto;right:8%;bottom:6%}
  .hero .d5{left:auto;right:16%;top:3%}
}
@media (max-width:760px){
  .menu-toggle{display:block}
  .site-nav{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:2px dashed var(--line);box-shadow:var(--shadow);padding:10px 20px 18px;display:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .site-nav a{padding:.75em 1em;text-align:center}
  .m-head{grid-template-columns:1fr;text-align:center;justify-items:center;padding:26px 20px 20px}
  .m-head .art{width:112px}
  .m-head{gap:14px}
  .m-sample{font-size:.7rem}
  .m-actions{justify-content:center}
  .m-body{grid-template-columns:1fr;padding:22px 18px 26px}
  .cook{padding:20px 16px 26px}
  .cook-step{padding:20px}
  .mult-chips{margin-left:0}
  .kt{grid-template-columns:1fr;justify-items:center;text-align:center}
  .kt-btns{justify-content:center}
}
@media (max-width:480px){
  body{font-size:1rem}
  .wrap{width:calc(100% - 28px)}
  .brand-name{font-size:1.1rem}
  .hero .d1,.hero .d4{width:44px;height:44px}
  .hero .d6{display:none}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
  .contact-actions .btn,.cook-nav .btn,.kt-btns .btn,.m-actions .btn,.spin-result .btn{width:auto}
  .recipe-grid{grid-template-columns:1fr;gap:16px}
  .card{flex-direction:row;min-height:150px}
  .card:hover,.card:nth-child(even):hover{transform:translateY(-3px)}
  .card-art{aspect-ratio:auto;width:122px;flex:none}
  .card-art svg.bake{width:94%}
  .card .ribbon{top:auto;bottom:8px;left:50%;transform:translateX(-50%) rotate(-3deg);font-size:.6rem;padding:3px 8px 3px 6px;letter-spacing:.03em}
  .card .ribbon::before{width:5px;height:5px;margin-right:4px}
  .card-body{padding:14px 52px 14px 14px;gap:4px}
  .card .fav-btn{width:40px;height:40px;top:8px;right:8px}
  .card .fav-btn svg{width:20px;height:20px}
  .card h3{font-size:1.12rem}
  .card-desc{font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-meta{padding-top:6px;gap:6px}
  .card .pill{font-size:.76rem;padding:1px 8px}
  .tutorial-grid{grid-template-columns:1fr}
  .coming-soon{border-radius:20px}
  .contact-card .c1{top:18px;left:18px;width:40px;height:40px}
  .contact-card .c2{display:none}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card:hover,.tut:hover,.btn:hover,.logo-button:hover{transform:none}
}
@media print{
  .site-header,.hero,.flour,.timer-pill,.toast{display:none}
}