header{position:sticky;top:0;z-index:30;background:#FFF9ED}header nav{flex-wrap:nowrap}header nav a{white-space:nowrap}header nav a:first-child{display:inline!important}
.site-footer{display:block!important;font:14px/1.65 system-ui,sans-serif;color:#241632;padding-top:24px;padding-bottom:24px;border-top:1px solid #24163230}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.site-footer .brand{font-size:27px;letter-spacing:-1px;font-weight:800;text-decoration:none;color:#241632}.site-footer nav{display:flex;gap:24px;font-size:14px}.footer-recipe{font-size:17px;font-weight:650;max-width:850px;margin:20px 0 10px}.footer-flavours{max-width:880px;font-size:14px;margin:0 0 24px}.footer-bottom{font-size:12px;border-top:1px solid #24163220;padding-top:14px}.site-footer a:focus-visible{outline:3px solid #5426A8;outline-offset:4px}
@media(max-width:700px){.footer-top,.footer-bottom{align-items:start;flex-direction:column;gap:12px}.site-footer nav{gap:16px;flex-wrap:wrap}.site-footer{padding-bottom:20px}.footer-recipe{font-size:16px}.footer-flavours{font-size:14px}}
@media(max-width:480px){header{display:grid!important;grid-template-columns:1fr;height:auto!important;gap:4px!important;padding-top:10px!important;padding-bottom:8px!important}header .brand{font-size:23px!important;gap:8px!important}header .brand img{width:28px!important}header nav{display:flex!important;justify-content:space-between;gap:16px!important;font-size:13px!important;width:100%}header nav a{padding:6px 0}}

.bobo{position:fixed;right:16px;bottom:18px;z-index:20;pointer-events:none;isolation:isolate}.bobo[hidden]{display:none}.bobo-pet{pointer-events:auto;display:grid;justify-items:center;border:0;background:transparent;color:var(--plum);padding:0;cursor:pointer}.bobo-pet svg{display:block;width:84px;height:84px;overflow:visible}.bobo-pet>span{font:14px/1 Pixelify,system-ui;background:var(--cream);padding:3px 7px;border:1px solid #24163230}.bobo-hide{pointer-events:auto;position:absolute;right:0;top:0;border:0;background:var(--cream);border-radius:50%;width:24px;height:24px;cursor:pointer;padding:6px;z-index:2}.bobo-hide span:before,.bobo-hide span:after{content:"";position:absolute;width:12px;height:2px;background:var(--plum);left:6px;top:11px;transform:rotate(45deg)}.bobo-hide span:after{transform:rotate(-45deg)}.bobo-bubble{position:absolute;right:8px;bottom:106px;min-width:130px;max-width:185px;padding:9px 12px;background:var(--cream);border:1px solid var(--purple);font:14px/1.4 system-ui;opacity:0;transform:translateY(5px);transition:opacity 200ms cubic-bezier(.23,1,.32,1),transform 200ms cubic-bezier(.23,1,.32,1);pointer-events:none}.bobo.is-reacting .bobo-bubble{opacity:1;transform:translateY(0)}.bobo-tail{transform-box:fill-box;transform-origin:left bottom}.bobo.is-reacting .bobo-tail{animation:bobo-wag 300ms steps(2,end) 8}.bobo.is-reacting .bobo-head{animation:bobo-nod 800ms steps(3,end) 3;transform-box:fill-box;transform-origin:center bottom}.bobo-pet:hover .bobo-tail{animation:bobo-wag 300ms steps(2,end) 4}
@keyframes bobo-wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(16deg)}}@keyframes bobo-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@supports(animation-timeline:scroll()){.bobo{animation:bobo-follow linear both;animation-timeline:scroll(root block)}@keyframes bobo-follow{from{transform:translateY(0)}to{transform:translateY(-18vh)}}}
@media(max-width:700px){.bobo{right:8px;bottom:14px}.bobo-pet svg{width:64px;height:64px}.bobo-pet>span{font-size:12px}.bobo-bubble{bottom:84px}.bobo-hide{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.bobo,.bobo *{animation:none!important;transition:none!important}}

/* Bobo walks along the viewport floor as reading progresses. */
.bobo{left:12px;right:auto;bottom:8px}.bobo-pet svg{width:112px;height:112px}.bobo-bubble{left:8px;right:auto;bottom:134px}.bobo-pet>span{font-size:15px}.bobo-hide{right:0;top:4px}
.bobo-paw-front,.bobo-paw-back{transform-box:fill-box;transform-origin:center}
@supports(animation-timeline:scroll()){
 .bobo{animation:bobo-stroll linear both;animation-timeline:scroll(root block)}
 .bobo-paw-front{animation:bobo-paw-front linear both;animation-timeline:scroll(root block)}
 .bobo-paw-back{animation:bobo-paw-back linear both;animation-timeline:scroll(root block)}
 @keyframes bobo-stroll{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 140px))}}
 @keyframes bobo-paw-front{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{transform:translate(0,0)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{transform:translate(2px,-3px)}}
 @keyframes bobo-paw-back{0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{transform:translate(-2px,-3px)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{transform:translate(0,0)}}
}
@media(max-width:700px){.bobo{left:8px;right:auto;bottom:6px}.bobo-pet svg{width:88px;height:88px}.bobo-bubble{bottom:108px}.bobo-pet>span{font-size:13px}@keyframes bobo-stroll{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 108px))}}}
@media(prefers-reduced-motion:reduce){.bobo,.bobo *{animation:none!important;transition:none!important}}
/* Reserve a little room beside Bobo so speech never runs off a narrow screen. */
.bobo{width:168px}.bobo-pet{width:112px}.bobo-bubble{left:0;right:auto;min-width:130px;max-width:160px}.bobo-hide{left:90px;right:auto}
@supports(animation-timeline:scroll()){@keyframes bobo-stroll{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 192px))}}.bobo-paw-front,.bobo-paw-back{animation-timing-function:steps(2,end)}}
@media(max-width:700px){.bobo-pet{width:88px}.bobo-hide{left:66px}@keyframes bobo-stroll{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 180px))}}}
/* Keep anchor destinations clear of the persistent navigation. */
section[id],figure[id],main[id],[id^="section-"]{scroll-margin-top:120px}