/* Palette: cream page, deep-green ink, terracotta accent, sage band, gold details, white cards.
   #123D2E / #F2541B are placeholders swapped for the colours saved in Settings (cssFor). */
:root{--bg:#FFFDF8;--surface:#fff;--ink:#123D2E;--muted:#5B6660;--line:#EFE7D6;--accent:#F2541B;--accent-deep:#ae3c13;--moss:#4F7A5A;--soft:#FBF4E4;--sage:#E7EDDF;--gold:#F5B82E;--leaf:#5FA35A;--ok:#2F6E56;--err:#B3261E;
--yellow:#FFE59A;--cream:#FFF6D6;--mint:#E4F2DE;--peach:#FFE6D6;
--serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--display:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;--hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
--max:1260px;--measure:68ch;--r:16px;--gut:clamp(20px,4.6vw,56px)}
@media(max-width:520px){:root{--gut:22px}} /* the side gutter: text never closer than this to the screen edge */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-wrap:break-word}
h1,h2,h3,.logo{font-optical-sizing:auto}
a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
/* .wrap owns the side padding: page blocks that are also .wrap (hero, recipe, article, page) set only top/bottom padding */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}.skip:focus{left:8px;z-index:99}

/* header */
.hdr{background:rgba(255,253,248,.94);position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}.hdr .nav{flex:1;justify-content:flex-start}
.logo{text-decoration:none;display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.logo .lg-mark{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:italic 600 24px/1 var(--serif)}
.logo .lg-txt{display:flex;flex-direction:column;line-height:1.05}
.logo .lg-txt b{font:600 19px/1.05 var(--serif);letter-spacing:.06em;text-transform:uppercase}
.logo .lg-txt small{font:600 9.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.logo img{height:46px;width:auto;display:block}
.wm{display:inline-flex;align-items:flex-end;font:800 clamp(26px,2.6vw,34px)/1 var(--display);letter-spacing:-.045em;color:var(--ink);white-space:nowrap}
.wm em{font-style:normal;color:var(--accent);margin:0 .12em}
.wm-leaf{width:.62em;height:.62em;margin:0 0 .52em .02em;transform:rotate(-8deg)}
.ftr .wm{color:#fff;font-size:30px}
.nav{display:flex;gap:0;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;flex:none;text-decoration:none;font-size:15px;font-weight:600;padding:8px 11px;border-radius:999px;color:var(--ink);transition:background .15s,color .15s}
.nav a:hover,.nav a[aria-current]{background:var(--cream);color:var(--accent-deep)}
.hsearch{display:flex;align-items:center;gap:4px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:4px 4px 4px 16px;flex:0 1 330px;min-width:220px;transition:border-color .15s,box-shadow .15s}
.hsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(242,84,27,.12)}
.hs-ic{display:inline-flex;color:var(--muted)}
.hsearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;padding:8px 6px;outline:none;color:var(--ink);text-overflow:ellipsis}
.hsearch button{flex:none;border:0;background:var(--accent);color:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .15s}.hsearch button:hover{background:var(--accent-deep)}
@media(max-width:1060px){.hsearch{flex-basis:44px;min-width:0;padding:0;border:0;background:none}.hsearch input,.hs-ic{display:none}.hsearch button{width:44px;height:44px}} /* narrow: the round button alone opens /search */
@media(max-width:860px){.hdr .wrap{flex-wrap:wrap;gap:6px 12px;padding-top:10px;padding-bottom:8px;min-height:0}
.hdr .logo{flex:1}.hdr .hsearch{order:2}
.nav{order:3;margin:0 calc(-1 * var(--gut));padding:0 12px;width:calc(100% + 2 * var(--gut));flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
.nav::-webkit-scrollbar{display:none}.nav a{padding:6px 10px;white-space:nowrap;flex:0 0 auto}
.hdr .nav{justify-content:flex-start;flex:none}.logo img{height:40px}} /* centred + scrollable would push the first links off-screen where they can't be scrolled to */

/* hero (mockup): huge three-line headline on the left, the photo bleeding off the right edge on yellow/green blobs,
   a hand-written label with an arrow, the round "Comfort Food Made Fresh" badge, a hand-written note, herbs around */
.hero{position:relative;overflow:hidden;padding:26px 0 46px}
.hero-g{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;position:relative;z-index:1}
.hero.has-pic .hero-g{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}
.hero-t{min-width:0;position:relative;z-index:3;padding:18px 0 0}
.hero h1{position:relative;font:800 clamp(56px,9vw,132px)/.9 var(--display);letter-spacing:-.05em;margin:0 0 26px;color:var(--ink)}
.hero h1 span,.hero h1 em{display:block;width:max-content;max-width:100%}.hero h1 em{font-style:normal;color:var(--accent)}
.hero h1>span:last-child{position:relative}
.h-spark{position:absolute;left:100%;top:.42em;width:.62em;height:.62em;margin-left:.14em;fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round}
.hero .sub{font:400 clamp(19px,1.75vw,24px)/1.4 var(--serif);color:var(--ink);margin:0;max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-cta .btn{padding:16px 26px;font-size:16.5px;white-space:nowrap;font-weight:700;box-shadow:0 12px 26px rgba(242,84,27,.25)}
.btn.soft{background:var(--yellow);color:var(--ink);box-shadow:none!important}.btn.soft svg{color:var(--gold)}.btn.soft:hover{background:#FFDA6E;color:var(--ink)}
.hero-art{position:relative;min-width:0;margin-right:calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gut)));padding:38px 0 30px 34px}
.hero-art .blob{position:absolute;z-index:0;left:0;top:0;width:44%;height:52%;background:var(--yellow);border-radius:60% 40% 55% 45%/55% 50% 50% 45%}
.hero-art .b2{left:auto;top:auto;right:0;bottom:-8px;width:min(30%,300px);height:40%;background:#DDEFD5;border-radius:58% 0 0 50%/60% 0 0 40%;z-index:2}
.hero-pic{position:relative;z-index:1;display:block;overflow:hidden;aspect-ratio:13/10;background:var(--soft);border-radius:46% 0 0 40%/50% 0 0 42%;box-shadow:0 30px 60px rgba(60,40,10,.16)}
.hero-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.hero-pic:hover img{transform:scale(1.03)}
.hero-label{position:absolute;z-index:3;left:10%;top:10px;max-width:40%;font:700 clamp(24px,2.5vw,36px)/.95 var(--hand);color:var(--ink);text-decoration:none;transform:rotate(-12deg);transform-origin:left bottom}
.hero-label svg{position:absolute;left:-4px;top:100%;width:40px;height:44px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(12deg)}
.hero-badge{position:absolute;z-index:3;right:calc(max(0px, (100vw - var(--max)) / 2) + var(--gut) - 12px);top:22px;width:clamp(120px,12vw,160px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;border:7px solid #fff;box-shadow:0 14px 30px rgba(242,84,27,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;font:800 clamp(15px,1.5vw,21px)/1.04 var(--display);transform:rotate(10deg)}
.hero-badge i{display:block;width:26px;height:10px;margin-bottom:6px;background:linear-gradient(90deg,#fff 0 3px,transparent 3px 11px,#fff 11px 14px,transparent 14px 22px,#fff 22px 25px);transform:skewX(-14deg);border-radius:2px}
.hero-note{position:absolute;z-index:3;right:clamp(14px,2.2vw,40px);bottom:24px;display:flex;align-items:flex-start;gap:4px;font:700 clamp(20px,2vw,28px)/1.02 var(--hand);color:var(--ink);transform:rotate(-8deg)}
.hero-note svg{flex:none;width:26px;height:52px;margin-top:8px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero-note>span{display:flex;flex-direction:column;align-items:flex-start}
.hero-note b{font:400 22px/1 var(--sans);color:var(--ink);align-self:flex-end;margin-top:2px}
/* herbs, dots and the yellow leaf around the hero */
.dc{position:absolute;pointer-events:none;user-select:none;z-index:2;height:auto}
.h-p1{left:-44px;top:64px;width:92px;transform:rotate(-34deg)}
.h-p2{left:-62px;top:430px;width:104px;transform:rotate(24deg)}
.h-p3{left:calc(50% - 150px);top:330px;width:96px;transform:rotate(-12deg);z-index:2}
.h-p4{right:-30px;top:20px;width:110px;transform:rotate(140deg);z-index:0}
.h-dot{position:absolute;left:18px;width:14px;height:14px;border-radius:50%;background:var(--gold);z-index:2}.h-dot.d1{top:186px}.h-dot.d2{top:222px;left:30px;width:10px;height:10px}
.h-leafy{position:absolute;left:-36px;bottom:-30px;width:80px;height:130px;background:var(--yellow);border-radius:60% 40% 60% 40%;transform:rotate(-20deg);z-index:0}
@media(max-width:1100px){.h-p3{display:none}}
@media(max-width:900px){.hero.has-pic .hero-g{grid-template-columns:1fr;gap:10px}.hero-art{margin-right:calc(-1 * var(--gut));padding:30px 0 20px 18px}.hero-badge,.hero-note{right:var(--gut)}.h-p2,.h-p4{display:none}}
@media(max-width:720px){.hero{padding:16px 0 26px}.hero-t{padding-top:6px}.hero h1{font-size:clamp(52px,16vw,76px);margin-bottom:16px}.h-spark{display:none}.hero-cta{margin-top:20px;gap:10px}.hero-cta .btn{padding:14px 20px;font-size:15.5px}
.hero-art{padding:44px 0 14px 10px;margin-right:0}.hero-pic{border-radius:46% 54% 40% 44%/50% 46% 42% 48%}.hero-art .b2{right:0;border-radius:58% 40% 46% 50%/60% 44% 40% 40%;bottom:-6px}.hero-badge{right:-4px}.hero-note{right:6px}.hero-label{font-size:22px;left:4%;top:4px;max-width:58%}.hero-label svg{display:none}.hero-badge{width:98px;padding:10px;font-size:12.5px;border-width:4px;top:0}.hero-badge i{width:20px;margin-bottom:3px}.hero-note{font-size:18px;bottom:6px}.hero-note svg{display:none}.hero-note b{font-size:16px}
.h-p1{display:none}.h-dot{display:none}.h-leafy{display:none}}
@media(max-width:400px){.hero-note,.hero-art .b2{display:none}}
.stroke{position:relative;white-space:nowrap}
.stroke svg{position:absolute;left:40%;bottom:-.14em;width:66%;height:.34em;overflow:visible;pointer-events:none} /* under the last letters only ("…ay?"), running just past the punctuation */
.stroke path{fill:none;stroke:var(--leaf);stroke-width:4;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.1s .3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* eyebrow & meta */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.meta{font-size:14px;color:var(--muted)}.meta a{text-decoration:none}.meta a:hover{text-decoration:underline}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 24px;padding:24px 0 56px;list-style:none;margin:0}
.card{display:flex;flex-direction:column;gap:10px}
.card .img{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--line)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .img img{transform:scale(1.03)}
.card h2,.card h3{font:600 23px/1.2 var(--serif);letter-spacing:-.015em;margin:0}
.card{background:var(--surface);border-radius:var(--r);padding:12px;border:1px solid var(--line)}.card .img{border-radius:12px}
.card h2 a,.card h3 a{text-decoration:none}.card h2 a:hover,.card h3 a:hover{color:var(--accent-deep)}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.lead .img{aspect-ratio:4/3}
.lead h2{font-size:clamp(26px,3.4vw,40px)}
@media(max-width:720px){.lead{grid-template-columns:1fr;padding:14px}}

.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);padding-top:14px;margin-top:8px}
.section-title h2{font:600 28px/1 var(--serif);margin:0;letter-spacing:-.02em}
.section-title a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}

/* article */
.article{padding-top:40px;padding-bottom:64px}
.article header{max-width:var(--measure);margin:0 auto 28px}
.article h1{font:600 clamp(32px,5vw,54px)/1.06 var(--serif);letter-spacing:-.03em;margin:12px 0 14px}
.article .desc{font-size:20px;color:var(--muted);margin:0 0 18px;line-height:1.45}
.article .byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:var(--muted)}
.article .feat{max-width:900px;margin:0 auto 36px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--line)}
.article .feat img{width:100%;height:100%;object-fit:cover}
.prose{max-width:var(--measure);margin:0 auto;font-size:18.5px;line-height:1.7;overflow-wrap:anywhere} /* a pasted long link wraps instead of widening the page */
.prose pre{max-width:100%;overflow-x:auto}.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}.prose iframe,.prose video,.prose embed{max-width:100%}
.prose p{margin:0 0 1.3em}
.prose h2{font:600 28px/1.2 var(--serif);letter-spacing:-.015em;margin:1.6em 0 .6em}
.prose h3{font:600 22px/1.25 var(--serif);margin:1.4em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.3em}.prose li{margin:.35em 0}.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:4px solid var(--accent);font:italic 500 22px/1.45 var(--serif)}
.prose hr{border:0;height:2px;background:var(--line);margin:2.2em auto;width:40%}
.prose img,.prose figure{margin:1.6em 0;border-radius:var(--r);overflow:hidden}.prose figure{margin-left:0;margin-right:0}
.prose code{background:#fff;border:1px solid var(--line);padding:.1em .35em;border-radius:6px;font-size:.9em}
.prose a[rel~="sponsored"]::after{content:"\2197";font-size:.75em;margin-left:.15em;color:var(--accent-deep)}
.tags{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--measure);margin:28px auto 0;padding:0;list-style:none}
.tags a{display:inline-block;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--moss);text-decoration:none}
.tags a:hover{border-color:var(--moss)}
.author-box{max-width:var(--measure);margin:36px auto 0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;gap:16px;align-items:flex-start}
.author-box .av{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 22px var(--serif);flex:none;overflow:hidden}
.author-box .av img{width:100%;height:100%;object-fit:cover}
.author-box p{margin:4px 0 0;color:var(--muted);font-size:15px}
.related{border-top:1px solid var(--line);padding-top:8px;margin-top:48px}

/* faq */
.faq{margin-top:40px}.faq details{border-top:1px solid var(--line);padding:12px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:600 19px/1.3 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--accent);font-size:24px;line-height:1}.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;font-size:17px}
.hub .card h3{font-size:21px}
/* ads */
.ad{margin:24px auto;max-width:var(--measure)}
.ad-top,.ad-bottom{max-width:var(--max);padding:0 var(--gut)}
.ad-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad-demo{padding:18px 20px;border:1px dashed var(--accent);border-radius:var(--r);background:#fff;font-size:15px}
.ad img{margin:0 auto}
/* HB Agency (recipe pages). In-Page sits in the recipe card under the photo row: space reserved so the card does not jump
   when the ad loads, never wider than the card. Sticky footer: the page ends above it, the cookie notice sits above it.
   Sticky left 300x600: only where a free 300px gutter exists left of the widest recipe-page content (the 1260px related grid). */
.hb-ad-inpage{display:flex;justify-content:center;align-items:center;min-height:250px;max-width:100%;overflow:hidden;margin:20px 0 0;padding-bottom:20px;border-bottom:1px solid var(--line)}
.hb-ad-inner{max-width:100%;overflow:hidden;text-align:center}
.hb-ad-inpage.hb-empty{min-height:0;margin:0;padding:0;border:0}.hb-ad-inpage.hb-empty .hbagency_cls{min-height:0!important}
.hb-ad-inpage.hb-filled{min-height:0}.hb-ad-inpage.hb-filled .hbagency_cls{min-height:0!important} /* filled: hug the creative */
#HB_Footer_Close_hbagency_space_346693.hb-empty{display:none!important}
body:has(#HB_Footer_Close_hbagency_space_346693:not(.hb-empty):not(.hb-closed)){padding-bottom:110px}
body:has(#HB_Footer_Close_hbagency_space_346693:not(.hb-empty):not(.hb-closed)) #ck{bottom:120px}
/* Magic Left 346694 is a mobile-only format in the network's config (scaled 150x300 at the left edge, own close
   button); the network positions it — no rule of ours hides it. */
/* In-content rows (In Article 1–4, video, leaderboard), all below the first screen: they take no space until the
   network fills them (so a placement it does not serve yet leaves no empty band), then become a spaced band that hugs
   the creative; hidden again if it reports no fill. */
.hb-row{max-width:100%;overflow:hidden}
.hb-row .hb-ad-inpage{min-height:0;margin:0;padding:0;border:0}
.hb-row:has(.hb-filled),.hb-row:has(iframe[id^="framehb_"]),.hb-row-video:has(iframe,video){margin:26px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* empty → zero height but kept in place (not display:none): the network's refresh decides "near the viewport" from the
   slot's position, and a display:none slot reports top 0, so it would be refreshed off-screen every 33 s */
.hb-row:has(.hb-empty),.steps li.hb-li:has(.hb-empty){height:0;margin:0;padding:0;border:0;overflow:hidden}
.steps li.hb-li{display:block;padding:0;border-bottom:0}.steps li.hb-li .hb-row{margin:12px 0}
.hb-row-lb:has(.hb-filled){margin:0 auto 32px;max-width:900px}
.hb-ad-static{display:flex;justify-content:center;align-items:center;max-width:100%;overflow:hidden}
/* Skyscraper 120x600 beside the card, sticky while the card scrolls past; the slot only exists on ≥1200px screens. */
.rcard{position:relative}
.hb-sky{position:absolute;top:0;bottom:0;left:calc(100% + 20px);width:120px}
.hb-sky .hb-ad-sky120{position:sticky;top:96px;min-height:600px;align-items:flex-start}
.hb-sky .hb-ad-sky120.hb-filled{min-height:0}
@media(max-width:1199px){.hb-sky{display:none}}
@media(max-width:820px){.rcard{padding:18px}} /* tablets: keeps ≥640px inside the card for the widest in-article creative */
#inter{position:fixed;inset:0;background:rgba(30,21,48,.55);display:none;place-items:center;z-index:100;padding:20px}
#inter.on{display:grid}
#inter .box{position:relative;background:#fff;border-radius:20px;max-width:560px;width:100%;padding:28px 24px 24px;max-height:90vh;overflow:auto}
#inter .x{position:absolute;top:10px;right:10px;border:0;background:var(--bg);border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer}

/* newsletter */
.nl-band{position:relative;overflow:hidden;margin-top:16px;padding:46px 0 50px;background:radial-gradient(ellipse 34% 90% at 2% 100%,#FFE48A 0 98%,transparent 100%),radial-gradient(ellipse 22% 120% at 100% 30%,#E4F2DE 0 98%,transparent 100%),linear-gradient(100deg,#FFF9E3,#F4F8EC)}
.nl-band .dc{z-index:1}.nl-band .wrap{position:relative;z-index:2}
.nl-lemon{left:-40px;bottom:-40px;width:clamp(150px,17vw,250px);transform:rotate(-10deg)}
.nl-parsley{right:-30px;bottom:-20px;width:clamp(120px,13vw,190px);transform:rotate(-20deg)}
.nl-swirl{position:absolute;right:13%;bottom:8px;width:110px;height:56px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;z-index:1;opacity:.85}
.nl{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;max-width:1000px;margin:0 auto;padding-left:clamp(0px,8vw,110px)}
.nl-eye{margin:0 0 8px;font:800 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nl h2{font:800 clamp(30px,3.8vw,46px)/1.02 var(--display);margin:0 0 10px;letter-spacing:-.035em;color:var(--ink)}.nl h2 em{font-style:normal;color:var(--accent)}
.nl p{margin:0;color:var(--muted);font:400 16px/1.5 var(--serif)}
.nl form{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 14px 34px rgba(60,40,10,.08)}
.nl form:focus-within{border-color:var(--accent)}
.nl-ic{display:inline-flex;color:var(--muted);flex:none}
.nl input{flex:1;min-width:0;padding:12px 4px;border:0;background:none;font:inherit;font-size:16px;outline:none;color:var(--ink)}
.nl .btn{flex:none;padding:13px 26px}
.nl-ok{background:#fff;border-radius:16px;padding:16px 20px;margin:0}
.btn{display:inline-block;padding:13px 24px;border-radius:999px;border:0;background:var(--accent);color:#fff;font:600 16px var(--sans);cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:var(--accent-deep);color:#fff}.btn:active{transform:translateY(1px)}
.note{font-size:14px;color:var(--muted)}
@media(max-width:820px){.nl{grid-template-columns:1fr;gap:20px;padding-left:0}.nl-band{padding:36px 0 110px}.nl-lemon{width:130px;bottom:-30px}.nl-parsley{width:110px}.nl-swirl{display:none}}
@media(max-width:420px){.nl form{padding-left:12px}.nl-ic{display:none}.nl .btn{padding:12px 16px;font-size:15px}}

/* pages */
.page{padding-top:48px;padding-bottom:64px}.page h1{font:600 clamp(34px,5vw,54px)/1.06 var(--serif);margin:0 0 18px;letter-spacing:-.03em}
.page .prose{margin:0}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:8px 0 56px;font-size:16px}
.pg-num,.pg-arrow,.pg-gap{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:500;transition:color .15s,background .15s}
a.pg-num:hover,a.pg-arrow:hover{color:var(--ink);background:#fff}
.pg-num.is-current{color:var(--ink);font-weight:700;position:relative}
.pg-num.is-current::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--accent)}
.pg-arrow{font-size:18px}
.pg-arrow.is-off{opacity:.3;pointer-events:none}
.empty{padding:48px 0;text-align:center;color:var(--muted)}

/* footer */
.ftr{padding:40px 0 32px;color:rgba(255,255,255,.72);font-size:14px;background:var(--ink)}
.ftr .wrap{display:flex;flex-direction:column;gap:22px}
.ftr-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}.ftr-top p{margin:0}
.ftr-brand{font:800 26px/1 var(--display);letter-spacing:-.03em;color:#fff}
.ftr-cats{display:flex;flex-wrap:wrap;gap:8px}.ftr-cats a{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:600}.ftr-cats a:hover{background:var(--accent);color:#fff}
.ftr-bot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.ftr nav{display:flex;flex-wrap:wrap;gap:16px}.ftr a{text-decoration:none}.ftr a:hover{color:#fff}
.ftr .soc{gap:12px;align-items:center}.ftr .soc a{display:inline-flex;line-height:0;opacity:.85;transition:opacity .15s ease,transform .15s ease}.ftr .soc a:hover,.ftr .soc a:focus-visible{opacity:1;transform:translateY(-1px)}.ftr .soc svg{display:block}
#ck{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:none;gap:12px;align-items:center;box-shadow:0 12px 40px rgba(30,21,48,.15);font-size:14px;z-index:90}
#ck.on{display:flex}#ck p{margin:0;flex:1}#ck button{padding:8px 14px;font-size:13px}
[dir="rtl"] #ck{left:auto;right:16px}
/* ---------- recipes ---------- */
.bigsearch{display:flex;align-items:center;gap:10px;max-width:560px;margin:28px 0 0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 14px 34px rgba(32,60,50,.08);color:var(--ink)}
.bigsearch input{flex:1;border:0;background:none;font:inherit;font-size:17px;min-width:0;outline:none;text-overflow:ellipsis}
.bigsearch .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;font-size:17px}
@media(max-width:520px){.bigsearch{padding:5px 5px 5px 14px}.bigsearch .btn{padding:12px 16px;font-size:15px}}
.pop{margin:14px 0 0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.pop a{display:inline-block;padding:4px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--ink)}.pop a:hover{border-color:var(--accent);color:var(--accent-deep)}
.note.ok{color:var(--ok);font-weight:600}.note.err{color:var(--err);font-weight:600}
/* section head: Fraunces title, gold rule + intro, "All recipes →" on the right */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:28px;margin-top:8px}
.sh h2{font:800 clamp(28px,3.4vw,40px)/1.05 var(--display);margin:0;letter-spacing:-.035em;color:var(--ink)}
.sh .spark{display:inline-block;width:.75em;height:.75em;margin-left:.18em;vertical-align:.32em;fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.sh p{margin:8px 0 0;color:var(--muted);font:400 16px/1.45 var(--serif)}
.sh a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;padding-bottom:6px}.sh a:hover{color:var(--accent)}
@media(max-width:560px){.sh{flex-wrap:wrap;align-items:flex-start;gap:6px 16px}.sh>div{flex:1 1 100%}.sh a{padding-bottom:0}}
/* category pills: round photo · name · chevron */
.catrow{display:flex;gap:14px;list-style:none;margin:0;padding:18px 0 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.catrow::-webkit-scrollbar{display:none}
.catrow li{flex:0 0 auto}
@media(max-width:999px){.catrow{margin:0 calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);scroll-padding-left:var(--gut)}} /* the strip scrolls edge to edge, its first item lines up with the text */
@media(min-width:1000px){.catrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);overflow:visible}.catrow a{padding-right:14px;gap:10px}}
.catrow a{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:6px 18px 6px 6px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;height:100%;box-shadow:0 4px 14px rgba(60,40,10,.05)}
.catrow a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(60,40,10,.1);border-color:var(--accent)}
.cr-img{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--cream);display:grid;place-items:center;color:var(--accent);border:3px solid #fff;box-shadow:0 6px 16px rgba(60,40,10,.14)}.cr-img img{width:100%;height:100%;object-fit:cover}.cr-img svg{width:30px;height:30px}
.cr-t{display:flex;flex-direction:column;min-width:0;flex:1}.cr-t b{font:700 15.5px/1.2 var(--sans);white-space:nowrap}.cr-t small{font-size:12.5px;color:var(--muted);white-space:nowrap}
.catrow i{color:var(--ink);display:inline-flex;flex:none;margin-left:auto}
/* soft yellow panel behind the featured recipes */
.panel{background:#FFF5CF;border-radius:34px;padding:8px 32px 6px;margin:30px calc(-1 * min(36px, var(--gut))) 8px}
.panel .rgrid{padding-bottom:30px;gap:22px}
.panel .rc .time,.panel .stars{display:none}
.panel .rc p{-webkit-line-clamp:3}
.panel .sh{padding-top:26px}
.cats .sh{padding-top:20px}
/* tips band: lemons on the left edge, parsley on the right, like the mockup */
.tips-sec{position:relative;overflow:hidden}.tips-sec .wrap{position:relative;z-index:2}
.t-lemon{left:-70px;bottom:10px;width:clamp(120px,12vw,190px);transform:rotate(14deg)}
.t-parsley{right:-40px;bottom:20px;width:clamp(100px,10vw,150px);transform:rotate(30deg)}
@media(max-width:1260px){.t-lemon,.t-parsley{display:none}}
@media(min-width:1000px){.tips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px) and (max-width:1219px){.catrow .cr-img{width:48px;height:48px}.catrow a{gap:8px;padding:5px 10px 5px 5px}.catrow .cr-t b{font-size:14.5px}.tips .tip-img{width:92px;height:84px}.tips .tip{gap:12px}.tips .tip h3{font-size:15px}.tips .tip-go{display:none}}
@media(max-width:720px){.panel{margin:20px calc(-1 * var(--gut) + 8px) 8px;padding:4px 14px 2px;border-radius:24px}}
/* cooking tips: thumbnail · title · line · arrow */
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;list-style:none;margin:0;padding:20px 0 48px}
.tip{position:relative;display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:10px 14px 10px 10px;transition:transform .15s,box-shadow .15s}
.tip:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(60,40,10,.1)}
.tip-img{flex:none;width:118px;height:100px;border-radius:14px;overflow:hidden;background:var(--soft);display:block}.tip-img img{width:100%;height:100%;object-fit:cover}
.tip-b{flex:1;min-width:0}.tip h3{font:700 17px/1.2 var(--display);letter-spacing:-.015em;margin:0 0 4px}.tip h3 a{text-decoration:none}.tip h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.tip p{margin:0;color:var(--muted);font:400 14px/1.4 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tip-go{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink)}.tip:hover .tip-go{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:400px){.tips{grid-template-columns:1fr}.tip-img{width:88px;height:80px}}
/* sage band for "Ready in N minutes" */
.band{background:var(--sage);padding:44px 0 20px;margin:24px 0 8px}
.band .rgrid{padding-bottom:36px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 24px;padding:26px 0 48px;list-style:none;margin:0}
.rc{display:flex;flex-direction:column;background:var(--surface);border-radius:22px;padding:9px;overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(60,40,10,.06);border:1px solid rgba(60,40,10,.04)}
.rc:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(60,40,10,.12)}
.rc .img{position:relative;aspect-ratio:3/2;background:var(--soft);display:block;border-radius:16px;overflow:hidden}
.rc .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.rc:hover .img img{transform:scale(1.04)}
.ph{display:grid;place-items:center;width:100%;height:100%;min-height:120px;color:#BFC9B8;background:linear-gradient(135deg,#F2EEE2,#E7EDDF)}.ph-wrap{display:block}
.rc .time{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,248,238,.96);color:var(--ink);font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.rc-b{padding:14px 10px 8px;display:flex;flex-direction:column;gap:4px;flex:1}
.rc h2,.rc h3{font:700 21px/1.15 var(--display);letter-spacing:-.025em;margin:0;color:var(--ink)}.rc h2 a,.rc h3 a{text-decoration:none}.rc h2 a:hover,.rc h3 a:hover{color:var(--accent)}
.rc p{margin:6px 0 0;color:var(--muted);font:400 15px/1.5 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-m{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;font-size:13px;min-width:0}
.chip{display:inline-block;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.chip.t0{background:var(--mint)}.chip.t1{background:var(--yellow)}.chip.t2{background:var(--peach)}.chip:hover{color:var(--ink);filter:brightness(.96)}
.rc-m .go{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-decoration:none;flex:none;transition:background .15s,transform .15s}.rc-m .go:hover{background:var(--accent-deep);transform:translateX(2px)}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sage);color:var(--ink)}
.badge.d-easy{background:#E3F2EA;color:#256247}.badge.d-medium{background:#FBF0DA;color:#8A5A0F}.badge.d-hard{background:#FBE4E2;color:#9B2C22}
.stars{color:#E0A100;font-size:15px;letter-spacing:1px;white-space:nowrap}.stars b{color:var(--ink);font-size:13.5px;margin-left:6px;letter-spacing:0}.stars .cnt{color:var(--muted);font-size:13px;letter-spacing:0}.stars.sm{font-size:13px}
.rc.demo .img::after{content:"DEMO";position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;font-size:10px;letter-spacing:.12em;padding:3px 7px;border-radius:6px;opacity:.8}
.demo-note{background:#FFF6E5;border:1px solid #F3D9A4;border-radius:10px;padding:8px 14px;font-size:14px;margin:0 0 18px}
.about{display:flex;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:16px 0 40px}
.about .av{width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 30px var(--serif);flex:none;overflow:hidden}.about .av img{width:100%;height:100%;object-fit:cover}
.about h2{font:600 26px/1.1 var(--serif);margin:0 0 6px;letter-spacing:-.02em}.about p{margin:0 0 8px;color:var(--muted);font-size:15.5px}.about a{font-weight:600;text-decoration:none;color:var(--accent-deep)}
@media(max-width:560px){.about{flex-direction:column;align-items:flex-start}}

/* recipe page */
.recipe{padding-top:36px;padding-bottom:64px}
.rhead{max-width:var(--measure);margin:0 auto 24px}
.rhead h1{font:600 clamp(32px,5vw,54px)/1.06 var(--serif);letter-spacing:-.03em;margin:10px 0 12px}
.rhead .desc{font-size:19px;color:var(--muted);margin:0 0 14px;line-height:1.45}
.rhead .byline{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;color:var(--muted)}.rhead .byline a.nolink{text-decoration:none}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.fact{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:600;font-size:15px}
.fact i{display:inline-flex;color:var(--accent-deep)}.fact small{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--ink);background:#fff;color:var(--ink)}.btn.sm{padding:8px 14px;font-size:14px}
.recipe .feat{max-width:900px;margin:0 auto 32px;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--soft)}
.recipe .feat img{width:100%;height:100%;object-fit:cover}
.recipe .intro{margin-bottom:28px}
.video{max-width:var(--measure);margin:0 auto 32px;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9}.video iframe,.video video{width:100%;height:100%;border:0;display:block}
.rcard{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 18px 50px rgba(43,33,24,.08);scroll-margin-top:16px}
.rc-head{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.rc-head .rc-img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--soft)}.rc-head .rc-img img{width:100%;height:100%;object-fit:cover}
.rc-head h2{font:600 clamp(24px,3vw,34px)/1.1 var(--serif);margin:6px 0 8px;letter-spacing:-.02em}.rc-head p{margin:0 0 8px;color:var(--muted);font-size:15.5px}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px 14px;margin:14px 0}
.meta-grid div{background:var(--soft);border-radius:10px;padding:8px 10px}.meta-grid dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.meta-grid dd{margin:2px 0 0;font-weight:600;font-size:15px}
@media(max-width:640px){.rc-head{grid-template-columns:1fr}.rc-head .rc-img{max-width:260px}.rcard{padding:18px;border-radius:16px}}
.rc-body{display:grid;grid-template-columns:1fr;gap:8px;padding-top:22px} /* one column: ingredients, then steps — in-content ads get the full card width */
.rsec h3{font:600 22px/1.2 var(--serif);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.rsec h4{font:700 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px}
.rsec .note{margin:0 0 10px;font-size:13.5px}
.ing{list-style:none;margin:0 0 6px;padding:0}.ing li{border-bottom:1px dashed var(--line)}.ing label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;font-size:16px;line-height:1.45}
.ing input{margin:5px 0 0;width:17px;height:17px;accent-color:var(--accent);flex:none}.ing input:checked+span{text-decoration:line-through;color:var(--muted)}.ing i{color:var(--muted);font-style:normal}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}.steps li{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);scroll-margin-top:20px}
.st-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px;margin-top:2px}
.st-b{flex:1}.st-b h4{margin:2px 0 4px;text-transform:none;letter-spacing:0;font:600 17px/1.3 var(--serif);color:var(--ink)}.st-b p{margin:0;font-size:16.5px;line-height:1.6}.st-b img{margin-top:10px;border-radius:10px;max-height:380px;width:auto}
.rcard>.rsec{margin-top:26px;max-width:none}.rcard .prose{font-size:16.5px;max-width:none;margin:0}
.nutri dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;margin:0}.nutri dl div{background:var(--soft);border-radius:10px;padding:8px 10px;text-align:center}.nutri dt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}.nutri dd{margin:2px 0 0;font-weight:700;font-size:15px}
.nutri .note{margin:10px 0 0;font-size:12.5px}
.rc-foot{display:none;margin:20px 0 0;font-size:12px;color:var(--muted);text-align:center}
.reviews{max-width:var(--measure);margin:44px auto 0}.reviews .section-title h2 .cnt{font:inherit;margin-left:10px}
.revlist{list-style:none;margin:16px 0 0;padding:0}.rev{padding:14px 0;border-bottom:1px solid var(--line)}
.rev-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:14px}.rev-h b{font-size:15.5px}.rev-h time{color:var(--muted);margin-left:auto}.rev p{margin:6px 0 0;font-size:16px}
.revform{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:26px}
.revform h3{font:600 21px/1.2 var(--serif);margin:0 0 10px}
.revform label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.revform input[type=text],.revform input[type=email],.revform textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:#fff}
.revform .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.revform .two{grid-template-columns:1fr}}
.revform .btn{margin-top:16px}
.rate{border:0;padding:0;margin:0;display:inline-flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-end;gap:2px}.rate legend{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px;float:left;width:100%;text-align:start} /* row-reverse keeps the hover trick; wrapping puts the legend on its own line above the stars */
.rate input{position:absolute;opacity:0;width:0;height:0}.rate label{font-size:30px;line-height:1;color:#D9D0C4;cursor:pointer;padding:0 2px;margin:0;transition:color .1s}
.rate label:hover,.rate label:hover~label,.rate input:checked~label{color:#E0A100}.rate input:focus-visible+label{outline:3px solid var(--accent);border-radius:4px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.lead-p{font-size:19px;color:var(--muted);max-width:60ch;margin:0 0 14px}
.sortbar{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}.sortbar a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;text-decoration:none;color:var(--muted)}.sortbar a[aria-current],.sortbar a:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.4fr auto auto;gap:8px;align-items:center;margin:16px 0 6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.filters input,.filters select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;min-width:0}
.filters .btn{padding:11px 18px}
@media(max-width:900px){.filters{grid-template-columns:1fr 1fr}.filters .f-q{grid-column:1/-1}}
.res{margin:10px 0 4px}
.search .rgrid{padding-top:14px}

/* display face for every headline (pages, recipe, article, cards, section titles) */
.page h1,.rhead h1,.article h1{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1}
.card h2,.card h3,.section-title h2,.rc-head h2,.about h2,.lead h2,.revform h3,.rsec h3,.prose h2,.prose h3,.faq summary,.st-b h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
.section-title{border-top:0;padding-top:24px}
.eyebrow{color:var(--accent-deep)}
.card{border-radius:22px;box-shadow:0 4px 18px rgba(60,40,10,.06)}
.lead-p{font:400 19px/1.5 var(--serif)}
.sortbar a[aria-current],.sortbar a:hover{background:var(--accent);border-color:var(--accent)}
.pg-num.is-current{background:var(--accent);color:#fff;border-radius:999px}.pg-num.is-current::after{display:none}
.pg-num,.pg-arrow{border-radius:999px;border:1.5px solid var(--line);background:#fff;min-width:42px;height:42px;color:var(--ink)}a.pg-num:hover,a.pg-arrow:hover{border-color:var(--accent);color:var(--accent-deep);background:#fff}.pg-gap{min-width:24px}
.about{border-radius:28px;background:var(--mint);border:0}
.btn{box-shadow:none}

/* print: only the recipe card */
@media print{
  body{background:#fff;color:#000;font-size:13px}
  .hdr,.ftr,.nl,.nl-band,.ad,.no-print,#ck,#inter,.hb-ad-inpage,.hb-row,.hb-li,.hb-sky,[id^="HB_Footer_Close_"],.skip,.actions,.reviews,.related,.author-box,.tags,.faq,.hsearch{display:none!important}
  .recipe{padding:0}.rcard{box-shadow:none;border:1px solid #bbb;max-width:none;padding:12px;break-inside:avoid}
  .rc-head{grid-template-columns:140px 1fr;gap:14px}.rc-body{grid-template-columns:1fr 1.8fr;gap:18px}
  .ing input{display:none}.ing label{padding:3px 0}.steps li{padding:6px 0}.st-n{width:22px;height:22px;font-size:12px;background:#000}
  .meta-grid div,.nutri dl div{background:#f2f2f2}.rc-foot{display:block}
  a{text-decoration:none;color:inherit}
}