:root{--bg:#fbf7ef;--paper:#fffdf9;--ink:#1c2e26;--muted:#4c5a51;--line:#e7dfd0;--line-2:#d3c8b4;--green:#1f4a3a;--green-2:#15382b;--green-soft:#e5eee6;--accent:#a6421a;--accent-2:#8a3412;--accent-soft:#f8e4d6;--gold:#e9b45f;--focus:#b04e1c;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--radius:16px;--shadow:0 1px 2px #1c2e260d,0 10px 28px #1c2e2612;--tile:#efe6d4;--tile-ink:#5b4524;color-scheme:light}
*,*:before,*:after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);font:17px/1.6 var(--sans);overflow-wrap:break-word}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary,label{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
h1,h2,h3,p{margin-top:0}
h1{font:400 clamp(2.1rem,7vw,3.9rem)/1.07 var(--serif);letter-spacing:-.025em;margin-bottom:16px}
h2{font:400 clamp(1.6rem,4.6vw,2.2rem)/1.15 var(--serif);letter-spacing:-.015em;margin-bottom:14px}
h3{font-size:1.1rem;line-height:1.3;font-weight:650}
p{margin-bottom:16px}
.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;background:var(--paper);padding:12px 16px;z-index:99;border-radius:10px}
.skip:focus{top:12px}
.glyph{width:24px;height:24px;flex:none}
.eyebrow{font-size:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:10px}
.helper{font-size:16px;color:var(--muted);line-height:1.55;margin:8px 0 12px}
.mini-label{display:block;width:100%;font-size:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0 0 6px}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;color:var(--green)}
.text-link.center{display:flex;justify-content:center;align-items:center;min-height:44px}
/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 20px;border-radius:12px;border:1.5px solid transparent;font:650 15.5px/1.2 var(--sans);text-decoration:none;text-align:center}
.primary{background:var(--green);color:#fff}
.primary:hover{background:var(--green-2)}
.secondary{background:var(--paper);border-color:var(--line-2);color:var(--green)}
.secondary:hover{background:var(--green-soft)}
.accent{background:var(--accent);color:#fff}
.accent:hover{background:var(--accent-2)}
.light{background:#fff;color:var(--green)}
.wide{width:100%}
.text-button{display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;border:0;background:none;color:var(--green);font-size:16px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:7px 14px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper);font-size:16px;color:var(--green)}
.pill:hover{background:var(--green-soft)}
.pill:disabled{opacity:.5}
.quick-add .pill:disabled{display:none}
/* Header and navigation */
.site-header{position:sticky;top:0;z-index:30;background:#fbf7eff2;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:700 20px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;color:var(--green)}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--green);color:#fff9ef}
.logo-mark svg{width:34px;height:34px}
.logo-dot{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Header menu (launch standard 19a): drawer below 1260 px, visible categories with dropdowns above */
.main-menu,.header-search-form,.nav-save{display:none}
.header-tools{display:flex;align-items:center;gap:8px}
.menu-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1.5px solid var(--green);border-radius:99px;background:var(--green);color:#fff;font-size:16px;font-weight:650}
.menu-button:hover{background:var(--green-2)}
.drawer{position:fixed;inset:0;z-index:70;background:#1c2e2673}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);overflow:auto;background:var(--paper);padding:10px 16px calc(28px + env(safe-area-inset-bottom));box-shadow:-12px 0 32px #1c2e2626}
.drawer-head{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);margin-bottom:12px}
.drawer-title{margin:0;font:400 24px/1 var(--serif)}
.drawer-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--green-soft);color:var(--green)}
.drawer-close svg{width:22px;height:22px}
.drawer-search,.header-search-form{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:99px;background:#fff;padding-left:14px}
.drawer-search{margin-bottom:12px}
.drawer-search input,.header-search-form input{flex:1;min-width:0;min-height:44px;border:0;padding:8px 4px;background:transparent;font-size:16px}
.drawer-search button,.header-search-form button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--green)}
.drawer-search input:focus-visible,.header-search-form input:focus-visible{outline:none}
.drawer-search:focus-within,.header-search-form:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.drawer-list,.drawer-extra,.drawer-list ul{list-style:none;margin:0;padding:0}
.drawer-list>li{border-bottom:1px solid var(--line)}
.drawer-list summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;list-style:none;font:400 21px/1.2 var(--serif);color:var(--ink)}
.drawer-list summary::-webkit-details-marker{display:none}
.drawer-list .chev,.menu-toggle .chev{width:14px;height:14px;transition:transform .15s}
.drawer-list details[open] .chev{transform:rotate(180deg)}
.drawer-list ul{padding:0 0 10px 6px}
.drawer-list a,.drawer-extra a{display:flex;align-items:center;min-height:44px;font-size:16px;text-decoration:none;color:var(--green)}
.drawer-list a:hover,.drawer-extra a:hover{text-decoration:underline}
.drawer-all{font-weight:700}
.drawer-extra{margin-top:16px;padding-top:8px}
.drawer-extra a{color:var(--muted)}
body.drawer-open{overflow:hidden}
.list-search{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.list-search label{display:block;font-weight:650;font-size:16px;margin-bottom:8px}
.list-search input{flex:1;min-width:0;min-height:48px}
.state{padding:20px 18px;border-radius:16px;background:var(--paper);border:1.5px dashed var(--line-2);color:var(--muted);font-size:16px}
.state.error{border-color:#e2b394;background:var(--accent-soft);color:var(--accent-2)}
.state .button{margin-top:10px}
.header-search{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:6px 10px;border:1px solid var(--line-2);border-radius:99px;text-decoration:none;font-size:16px;font-weight:600;color:var(--green);background:var(--paper)}
.header-search .glyph{width:20px;height:20px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 20px #1c2e260f;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;padding:6px 2px;text-decoration:none;font-size:16px;font-weight:600;color:var(--muted)}
.tabbar a[aria-current]{color:var(--green)}
.tabbar a[aria-current]:before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.tabbar b,.nav-save b{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:#fff;font-size:16px;line-height:20px;text-align:center}
.tabbar b.has{display:block;position:absolute;top:5px;left:calc(50% + 6px)}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
#toast{position:fixed;bottom:calc(76px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,16px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:16px;z-index:50;opacity:0;pointer-events:none;width:max-content;max-width:calc(100% - 32px);box-shadow:0 8px 30px #0003;transition:.2s}
#toast.visible{opacity:1;transform:translate(-50%,0)}
/* Gingham tablecloth strip, the site's signature */
.hero:after,.site-footer:before{content:"";display:block;height:12px;background-color:#fbf7ef;background-image:linear-gradient(90deg,#c4532a40 50%,transparent 50%),linear-gradient(#c4532a40 50%,transparent 50%);background-size:16px 16px}
/* Home hero and finder */
.hero{padding-top:18px;background:radial-gradient(circle at 1px 1px,#e6dcc8 1px,transparent 1.5px) 0 0/22px 22px,var(--bg)}
.hero:after{margin-top:28px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hero-main{min-width:0}
.hero h1{margin-bottom:12px}
.hero h1 em{display:block;font-style:italic;color:var(--accent)}
.hero-lede{font-size:17px;color:var(--muted);max-width:560px;margin-bottom:18px}
.hero-art{display:none}
.finder{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.finder-label{display:block;font:400 22px/1.2 var(--serif);margin-bottom:10px}
.input-row{display:flex;gap:8px}
input[type=search],input:not([type]),select,input[type=number]{border:1.5px solid var(--line-2);border-radius:12px;background:#fff;min-height:48px;padding:10px 12px;font-size:16px;max-width:100%}
#ingredient-input{flex:1;min-width:0;min-height:54px;font-size:17px;background:#fffefb}
.input-row .button{min-height:54px;padding-inline:18px}
.suggestions,.selected-chips,.quick-add{display:flex;flex-wrap:wrap;gap:8px}
.suggestions:not(:empty){margin:4px 0 8px}
.suggestion{border-color:var(--green);font-weight:600}
#unknown{font-size:16px;color:var(--accent-2)}
#unknown:not(:empty){margin:4px 0 8px}
.pantry{margin:14px 0}
.selected-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 12px 7px 14px;border:0;border-radius:99px;background:var(--green);color:#fff;font-size:16px;font-weight:600}
.selected-chip span{font-size:18px;line-height:1;opacity:.85}
.selected-chip.excluded{background:var(--accent-soft);color:var(--accent-2);border:1px solid #ebc4ac}
.empty-pantry{font-size:16px;color:var(--muted);margin:0;padding:10px 12px;border:1.5px dashed var(--line-2);border-radius:12px;width:100%}
.quick-add{margin:12px 0 0;align-items:center}
.filters{margin:16px 0 4px;border-block:1px solid var(--line)}
.filters summary{display:flex;align-items:center;gap:10px;min-height:52px;font-weight:650;font-size:16px;cursor:pointer;list-style:none;color:var(--green)}
.filters summary::-webkit-details-marker{display:none}
.filters summary:before{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s;margin:0 4px}
.filters[open] summary:before{transform:rotate(45deg)}
.count-badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--accent);color:#fff;font-size:16px}
.count-badge[hidden]{display:none}
.filter-row{display:grid;grid-template-columns:1fr;gap:12px;margin:4px 0 14px}
.filter-row label,.exclude-label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:600}
.filter-row select,#exclude-select{width:100%}
#exclude-chips:not(:empty){margin-top:10px}
.finder-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:14px 0 4px}
.nudge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 6px;padding:10px 12px;border-radius:14px;background:var(--accent-soft)}
.nudge[hidden]{display:none}
.nudge p{flex:1 1 100%;margin:0;font-size:16px;color:var(--accent-2);font-weight:600}
.nudge .pill{border-color:#e2b394}
.finder-bottom .button{flex:1 1 220px}

/* Sections and lists */
.section{padding-top:40px}
.section-head,.results-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.section-head h2,.results-head h2{margin-bottom:4px}
#result-summary{font-size:16px;color:var(--muted);margin:0}
.search-box{display:flex;flex-direction:column;gap:6px;width:100%;font-size:16px;font-weight:600}
.search-box input{width:100%}
.list-title{margin-bottom:6px}
.list-range{font-size:16px;color:var(--muted)}
#load-more{display:flex;margin:24px auto 0}
#load-more[hidden]{display:none}
/* Dish tones: tile colour and drawing colour per kind of dish */
.tone-soup{--tile:#f7e3b5;--tile-ink:#71480a}.tone-stew{--tile:#f6d7c6;--tile-ink:#843215}.tone-pasta{--tile:#f4e6c4;--tile-ink:#664a10}.tone-rice{--tile:#ebe5d3;--tile-ink:#4f4b2b}.tone-pan{--tile:#f8dcc2;--tile-ink:#7a3f18}.tone-roast{--tile:#f0d0c5;--tile-ink:#722b1f}.tone-mince{--tile:#edd3cb;--tile-ink:#6e3328}.tone-braise{--tile:#e8d5de;--tile-ink:#552848}.tone-fish{--tile:#d3e6e5;--tile-ink:#1d5055}.tone-vegetable{--tile:#d8e8cd;--tile-ink:#2a5125}.tone-salad{--tile:#e1edc9;--tile-ink:#375616}.tone-regional{--tile:#f1d9c0;--tile-ink:#653511}.tone-eggs{--tile:#fae7a6;--tile-ink:#664a00}.tone-potato{--tile:#ebdfc6;--tile-ink:#564222}.tone-pita{--tile:#f6e1bb;--tile-ink:#6c480b}.tone-bread{--tile:#efdac0;--tile-ink:#613d1b}.tone-snack{--tile:#f0e6b6;--tile-ink:#52450e}.tone-breakfast{--tile:#ead9cc;--tile-ink:#533325}.tone-cake{--tile:#f4d4da;--tile-ink:#752436}.tone-dessert{--tile:#f6d8d0;--tile-ink:#7e2525}
.ico{display:block}
.ico .f{fill:currentColor;opacity:.13;stroke:none}
.ico .s{fill:currentColor;opacity:.3;stroke:none}
/* Recipe cards: a list on phones, a grid from 640 px */
.recipe-grid{display:grid;grid-template-columns:1fr;gap:12px}
.card{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:128px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-art{display:grid;place-items:center;align-content:start;padding-top:14px;background:radial-gradient(circle,#ffffff66 1.2px,transparent 1.6px) 0 0/14px 14px,var(--tile);color:var(--tile-ink)}
.card-art .ico{width:58px;height:58px}
.card-art img{width:100%;height:100%;object-fit:cover}
.card-body{padding:12px 14px 12px 14px;min-width:0;display:flex;flex-direction:column}
.card-cat{font-size:16px;font-weight:650;color:var(--tile-ink);margin:0 0 2px}
.card-title{font:650 17px/1.3 var(--sans);margin:0 0 4px}
.card-title a{text-decoration:none;color:var(--ink)}
.card-title a:after{content:"";position:absolute;inset:0;border-radius:var(--radius);z-index:1}
.card-title a:focus-visible{outline:none}
.card-title a:focus-visible:after{outline:3px solid var(--focus);outline-offset:-3px}
.card-keys{font-size:16px;line-height:1.4;color:var(--muted);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:auto 0 0;font-size:16px;color:var(--muted)}
.card-meta span:first-child:before{content:"◷ ";color:var(--tile-ink)}
.match{font-size:16px;line-height:1.4;margin:0 0 8px;padding:6px 9px;border-radius:9px}
.match.ready{background:var(--green-soft);color:var(--green-2)}
.match.missing{background:var(--accent-soft);color:var(--accent-2)}
.icon-button{position:absolute;left:26px;bottom:8px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:#fffdf9e6;box-shadow:0 1px 4px #0001;color:var(--accent);font-size:23px;line-height:1}
.icon-button:hover{background:var(--accent-soft)}
.icon-button[aria-pressed=true]{color:var(--accent)}
/* Category and collection tiles */
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cat-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon . count" "name name name";align-items:center;gap:6px 8px;min-height:58px;padding:10px 12px;overflow-wrap:normal;border-radius:14px;background:var(--tile);color:var(--tile-ink);text-decoration:none;font-size:16px;font-weight:650;line-height:1.25}
.cat-tile .ico{grid-area:icon;width:34px;height:34px}
.cat-tile span{grid-area:name}
.cat-tile b{grid-area:count}
.cat-tile b{font-size:16px;padding:2px 7px;border-radius:99px;background:#fffdf9c7}
.cat-tile:hover{box-shadow:inset 0 0 0 2px var(--tile-ink)}
.collection-grid{display:grid;grid-template-columns:1fr;gap:10px}
.collection-tile{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none}
.collection-tile:hover{box-shadow:var(--shadow)}
.collection-art{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--tile);color:var(--tile-ink)}
.collection-art .ico{width:46px;height:46px}
.collection-tile h2,.collection-tile h3{font:400 20px/1.2 var(--serif);margin:0 0 2px}
.collection-tile p{font-size:16px;color:var(--muted);margin:4px 0 6px}
.collection-count{font-size:16px;color:var(--muted)}
.collection-grid.wide .collection-tile{align-items:start}
.topics-strip{display:flex;flex-wrap:wrap;gap:8px}
.topic-chip{display:inline-flex;align-items:center;min-height:44px;padding:7px 14px;border:1px solid var(--line-2);border-radius:99px;background:var(--paper);text-decoration:none;font-size:16px;color:var(--green)}
.topic-chip:hover{background:var(--green-soft)}
.related>h3{font-size:1.05rem;margin:28px 0 10px}
/* How it works */
.how-band{margin-top:48px;background:var(--green);color:#f3efe4;padding:36px 0 40px}
.how-band h2{color:#fff}
.how-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:how}
.how-steps li{counter-increment:how;display:grid;grid-template-columns:44px 1fr;column-gap:14px}
.how-steps li:before{content:counter(how);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--green-2);font:700 20px var(--serif)}
.how-steps h3{margin:0 0 4px;font-size:18px;color:#fff}
.how-steps p{margin:0;font-size:16px;color:#e4e9e2}
/* Page intros */
.page-intro{padding-top:28px;padding-bottom:12px}
.page-intro.has-art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.intro-art{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:radial-gradient(circle,#ffffff66 1.2px,transparent 1.6px) 0 0/14px 14px,var(--tile);color:var(--tile-ink)}
.intro-art .ico{width:52px;height:52px}
.lede{font-size:17px;color:var(--muted);max-width:62ch}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:16px;color:var(--muted);padding-top:14px}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs+*{margin-top:0}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.pagination a,.pagination span[aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);text-decoration:none;font-size:16px;color:var(--green)}
.pagination span[aria-current]{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.guide-notes{background:var(--green-soft);border-radius:20px;padding:20px 18px;margin-top:12px}
.guide-notes h2{font-size:24px}
.guide-notes ul{padding-left:20px;margin:0 0 18px}
.guide-notes li{font-size:16px;margin:8px 0}
/* Recipe page */
.recipe-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;align-items:center;margin-top:10px;padding:18px 16px 16px;border-radius:22px;background:color-mix(in srgb,var(--tile) 55%,var(--paper))}
.recipe-head-text{display:contents}
.recipe-art{grid-row:1;grid-column:1;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:radial-gradient(circle,#ffffff66 1.2px,transparent 1.6px) 0 0/14px 14px,var(--tile);color:var(--tile-ink)}
.recipe-art .ico{width:42px;height:42px}
.recipe-art .art-keys{display:none}
.recipe-art img{width:100%;height:auto;border-radius:16px}
.recipe-head .eyebrow{grid-row:1;grid-column:2;margin:0;color:var(--tile-ink)}
.recipe-head h1,.recipe-head .lede,.recipe-stats,.recipe-actions{grid-column:1/-1}
.recipe-head h1{margin:14px 0 10px;font-size:clamp(2rem,8vw,3.4rem)}
.recipe-head .lede{font-size:17px;color:var(--ink);margin-bottom:14px}
.recipe-stats{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 14px}
.recipe-stats li{display:flex;flex-direction:column;padding:8px 12px;border-radius:12px;background:var(--paper);min-width:84px}
.recipe-stats b{font-size:17px;line-height:1.2}
.recipe-stats span{font-size:16px;color:var(--muted)}
.recipe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.recipe-actions #cook-mode{flex:1 1 100%}
.recipe-actions .save{flex:1 1 100%}
.recipe-columns{display:grid;gap:28px;margin-top:22px}
.ingredients-panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px 16px;align-self:start}
.ingredients-panel h2,.steps h2{font-size:28px;margin-bottom:6px}
.servings{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:16px;font-weight:650}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:99px;background:#fff}
.stepper button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--green)}
.stepper button:hover:not(:disabled){background:var(--green-soft)}
.stepper input{width:48px;min-height:44px;border:0;padding:0;text-align:center;font-size:18px;font-weight:700;background:transparent;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ingredient-list{list-style:none;padding:0;margin:8px 0 12px}
.check-list li{border-bottom:1px solid var(--line)}
.check-list li:last-child{border-bottom:0}
.check-list label{display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:12px 2px;cursor:pointer;font-size:16.5px;line-height:1.45;font-weight:400}
.check-list b{font-weight:700}
.check-list small{display:block;font-size:16px;color:var(--muted)}
.check-list input,.step-check input{-webkit-appearance:none;appearance:none;margin:0;cursor:pointer}
.check-list input{flex:none;display:grid;place-content:center;width:26px;height:26px;margin-top:1px;border:2px solid #8f8470;border-radius:8px;background:#fff}
.check-list input:checked{background:var(--green);border-color:var(--green)}
.check-list input:checked:after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-1px) rotate(-45deg)}
.check-list input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.ingredients-panel details{border-top:1px solid var(--line);margin-top:12px;padding-top:4px;font-size:16px}
.ingredients-panel summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--green)}
.steps-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.steps-count{font-size:16px;color:var(--muted)}
.steps-hint{margin-top:0}
.step-list{list-style:none;padding:0;margin:0}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px;scroll-margin-bottom:96px}
.step p{font-size:17.5px;line-height:1.7;margin:6px 0 0}
.step-check{position:relative;display:block;width:44px;height:44px}
.step-check input{position:absolute;inset:0;width:44px;height:44px;opacity:0;z-index:1}
.step-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--tile-ink);background:var(--tile);color:var(--tile-ink);font:700 18px/1 var(--serif)}
.step-check input:checked+.step-num{background:var(--green);border-color:var(--green);color:transparent;position:relative}
.step-check input:checked+.step-num:after{content:"";position:absolute;width:15px;height:8px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-2px) rotate(-45deg)}
.step-check input:focus-visible+.step-num{outline:3px solid var(--focus);outline-offset:3px}
.step.done p{color:var(--muted)}
.editorial-note{margin:18px 0 6px;padding:12px 14px;border-radius:12px;background:#f3ecdd;font-size:16px;color:#4d4433}
.editorial-note a{color:var(--green);font-weight:600}
/* Cooking mode */
.cook-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--green);color:#fff;box-shadow:0 -8px 24px #0002}
.cook-bar[hidden]{display:none}
.cook-status{margin:0;font-size:16px;min-width:0}
.cook-status span{color:#d9e6dc;font-size:16px}
.cook-buttons{display:flex;align-items:center;gap:6px 14px;flex:1 1 auto;justify-content:flex-end}
.cook-bar .button{flex:1 1 auto;min-height:52px;font-size:17px;max-width:420px}
.cook-bar .text-button{color:#fff;font-size:16px;padding-inline:8px}
.cook-mode .step{cursor:pointer}
.cook-mode .ingredients-panel [data-shop],.cook-mode .site-header,.cook-mode .tabbar,.cook-mode .breadcrumbs,.cook-mode .related,.cook-mode .site-footer,.cook-mode .recipe-head .lede,.cook-mode .recipe-stats,.cook-mode .recipe-actions .text-button,.cook-mode .recipe-actions .save,.cook-mode .editorial-note,.cook-mode .ingredients-panel .helper,.cook-mode .ingredients-panel details,.cook-mode .ingredients-panel .text-link{display:none}
.cook-mode .recipe-head{margin-top:16px}
.cook-mode .recipe-head h1{font-size:clamp(1.7rem,6vw,2.6rem);margin-bottom:12px}
.cook-mode .check-list label{font-size:18.5px}
.cook-mode .step p{font-size:21px;line-height:1.6}
.cook-mode .step.current{background:color-mix(in srgb,var(--tile) 45%,var(--paper));border-radius:16px;padding-inline:12px;margin-inline:-12px;border-bottom-color:transparent}
.cook-mode .step.done{opacity:.6}
body.cook-mode{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
.cook-mode #toast{bottom:calc(150px + env(safe-area-inset-bottom))}
/* Saved, shopping, plan, prose */
.empty-state{padding:28px 18px;background:var(--paper);border:1.5px dashed var(--line-2);border-radius:20px;text-align:center}
.empty-state h2,.empty-state h3{font:400 24px/1.2 var(--serif)}
.empty-state p{max-width:560px;margin-inline:auto;color:var(--muted)}
.shopping-layout{display:grid;gap:24px;margin-top:8px}
.shopping-panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px 16px;align-self:start}
.shopping-panel .button{width:100%;margin-top:8px}
.shopping-panel .text-button{display:flex;margin:6px auto 0}
.shopping-panel .text-button[hidden]{display:none}
#shopping-empty:empty{display:none}
.shopping-recipe{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 14px;margin-bottom:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.mini-art{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tile);color:var(--tile-ink)}
.mini-art .ico{width:32px;height:32px}
.shopping-recipe>a{font-weight:650;text-decoration:none;color:var(--ink)}
.shopping-recipe label{display:flex;align-items:center;gap:8px;font-size:16px}
.shopping-recipe input{width:72px}
.shopping-recipe button{grid-column:2/-1;justify-self:start}
.plan-grid{display:grid;gap:12px;margin-bottom:20px}
.plan-day{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.plan-day .eyebrow{margin-bottom:4px}
.plan-day h2{font-size:24px;margin-bottom:6px}
.plan-day label{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:16px;font-weight:600}
.plan-day select{width:100%}
.plan-day input{width:96px}
.plan-day p{margin:12px 0 0;font-size:16px}
.plan-day p:empty{display:none}
.plan-actions{display:flex;flex-wrap:wrap;gap:10px}
.prose{max-width:760px;padding-bottom:12px}
.prose h2{font-size:26px;margin-top:30px}
.prose p,.prose li{font-size:17px;line-height:1.75}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:16px}
.prose caption{text-align:left;font-weight:650;margin-bottom:8px}
.prose th,.prose td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:10px 8px}
.prose th{background:var(--green-soft)}
/* Footer */
.site-footer{margin-top:56px;background:#f2ecdf}
.site-footer:before{margin-bottom:28px}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer-brand{grid-column:1/-1}
.footer-brand p{font-size:16px;color:var(--muted);margin:12px 0 0}
.footer-top strong{display:block;font-size:16px;margin-bottom:6px}
.footer-top>div>a:not(.logo){display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--muted);text-decoration:none}
.footer-top>div>a:not(.logo):hover{color:var(--green);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:24px;padding:16px 0 22px;border-top:1px solid var(--line-2);font-size:16px;color:var(--muted)}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
/* Small phones: denser list cards, cooking and saving on one row */
@media(max-width:419px){.card{grid-template-columns:72px minmax(0,1fr)}.card-art .ico{width:46px;height:46px}.icon-button{left:14px}.recipe-actions #cook-mode{flex:1 1 auto}.recipe-actions .save{flex:0 0 auto}}
/* Wider phones */
@media(min-width:420px){.filter-row{grid-template-columns:1fr 1fr}.recipe-actions #cook-mode,.recipe-actions .save{flex:0 1 auto}}
/* Tablet: grid cards */
@media(min-width:640px){
 .recipe-grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
 .card{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
 .card-art{aspect-ratio:16/10;align-content:center;padding-top:0}
 .card-art .ico{width:84px;height:84px}
 .card-body{padding:14px 16px 16px}
 .card-title{font-size:17.5px;padding-right:4px}
 .icon-button{top:8px;right:8px;left:auto;bottom:auto}
 .icon-button:hover{background:#fff}
 .category-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
 .cat-tile{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"icon name count";padding:8px 10px}
 .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .search-box{width:300px}
 .how-steps{grid-template-columns:repeat(3,1fr);gap:28px}
 .finder{padding:22px}
 .guide-notes{padding:26px 30px}
 .footer-top{grid-template-columns:2fr 1fr 1fr}
 .footer-brand{grid-column:auto}
 .plan-grid{grid-template-columns:repeat(2,1fr)}
 .page-intro{padding-top:44px}
 .intro-art{width:112px;height:112px;border-radius:28px}
 .intro-art .ico{width:80px;height:80px}
 .recipe-head{padding:26px 26px 22px}
}
/* Desktop: top navigation, hero drawing, two recipe columns */
@media(min-width:960px){
 body{padding-bottom:0}
 .tabbar,.header-search{display:none}
 .header-search-form{display:flex;width:210px}
 .nav-save{display:inline-flex}
 .nav-search .glyph{width:18px;height:18px}
 #toast{bottom:28px}
 .header-inner{min-height:76px}
 .logo{font-size:22px}
 .logo-mark{width:42px;height:42px}
 .nav-save{border:1px solid var(--line-2);background:var(--paper);border-radius:99px!important;padding-inline:14px!important}
 .nav-save .glyph{width:18px;height:18px;color:var(--accent)}
 .nav-save b.has{display:inline-block}
 .hero{padding-top:44px}
 .hero:after{margin-top:56px}
 .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
 .hero-art{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px;position:sticky;top:110px;padding:0 6%}
 .hero-art .tile{display:grid;place-items:center;aspect-ratio:1;border-radius:26px;background:radial-gradient(circle,#ffffff66 1.2px,transparent 1.6px) 0 0/14px 14px,var(--tile);color:var(--tile-ink);box-shadow:var(--shadow)}
 .hero-art .tile:nth-child(odd){transform:rotate(-3deg)}
 .hero-art .tile:nth-child(even){transform:rotate(2.5deg) translateY(28px)}
 .hero-art .ico{width:64%;height:64%}
 .finder{padding:26px 28px}
 .section{padding-top:56px}
 .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .recipe-head{grid-template-columns:minmax(0,1fr) 300px;gap:0 40px;align-items:stretch;padding:34px 36px}
 .recipe-head-text{display:block;grid-column:1;grid-row:1}
 .recipe-head .eyebrow{margin-bottom:6px}
 .recipe-head h1{margin-top:0}
 .recipe-art{grid-column:2;grid-row:1;width:auto;height:auto;min-height:260px;border-radius:24px;align-content:center;gap:14px;padding:24px}
 .recipe-art .ico{width:150px;height:150px}
 .recipe-art .art-keys{display:block;text-align:center;font-size:16px;font-weight:650;line-height:1.45}
 .recipe-columns{grid-template-columns:340px minmax(0,1fr);gap:48px;margin-top:32px}
 .ingredients-panel{padding:24px 22px}
 .step{grid-template-columns:48px minmax(0,1fr);gap:18px;padding:20px 0}
 .step p{font-size:18.5px}
 .shopping-layout{grid-template-columns:1fr 1fr;gap:36px}
 .plan-grid{grid-template-columns:repeat(3,1fr)}
 .cook-mode .recipe-art{display:none}
 .cook-mode .recipe-head{grid-template-columns:1fr}
}
@media(min-width:960px) and (min-height:720px){.ingredients-panel{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow:auto}}
@media(min-width:1400px){
 .site-header .wrap{width:min(1376px,calc(100% - 48px))}
 .header-inner{position:relative;gap:20px}
 .main-menu{display:block;margin-right:auto}
 .menu-button{display:none}
 .menu-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
 .menu-item{position:relative;display:flex;align-items:center}
 .menu-item.wide{position:static}
 .menu-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px 8px 12px;border-radius:10px 0 0 10px;text-decoration:none;font-size:16.5px;font-weight:650;color:var(--ink)}
 .menu-toggle{display:grid;place-items:center;width:26px;min-height:44px;border:0;border-radius:0 10px 10px 0;background:none;color:var(--muted)}
 .menu-link:hover,.menu-link:hover+.menu-toggle,.menu-toggle:hover{background:var(--green-soft)}
 .menu-link[aria-current]{color:var(--green);box-shadow:inset 0 -3px 0 var(--accent)}
 .menu-panel{display:none;position:absolute;top:100%;left:0;z-index:40;min-width:250px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 18px 40px #1c2e2626}
 .menu-item:nth-last-child(-n+2) .menu-panel{left:auto;right:0}
 .menu-item.wide .menu-panel{left:50%;transform:translateX(-50%);width:min(900px,100%);grid-template-columns:repeat(4,1fr);gap:8px 20px}
 .menu-item.open .menu-panel,html:not(.js-menu) .menu-item:hover .menu-panel{display:grid}
 html:not(.js-menu) .menu-item:focus-within .menu-panel{display:grid}
 .menu-item.open .chev{transform:rotate(180deg)}
 .menu-group-title{margin:0 0 4px;font-size:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--accent)}
 .menu-group ul{list-style:none;margin:0 0 6px;padding:0}
 .menu-group a{display:flex;align-items:center;min-height:40px;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap}
 .menu-group a:hover{color:var(--green);text-decoration:underline}
}
@media(hover:none){.card:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.site-header,.tabbar,.cook-bar,.site-footer,.recipe-actions,.recipe-art,.breadcrumbs,.step-check,.steps-hint,.ingredients-panel button,.ingredients-panel>.text-link,.ingredients-panel .servings,.related,.skip,#toast{display:none!important}body{background:#fff;color:#000;font-size:11pt;padding:0}.wrap{width:100%}.recipe-head{display:block;background:none;padding:0}.recipe-columns{display:block}.recipe-head h1{font-size:26pt}.ingredients-panel{border:0;padding:0;margin:16px 0}.ingredient-list{columns:2}.ingredient-list li{break-inside:avoid}.check-list input{width:12pt;height:12pt;border-width:1px}.step{display:block;padding:8px 0;break-inside:avoid}.step p{font-size:11pt}.editorial-note{font-size:9pt;background:none;padding:0}a{text-decoration:none}h2{font-size:18pt}}
/* Phone readability floor (UX audit 2026-10-14): labels 11px, reading text 12px, tap targets at least 24px. */
@media(max-width:760px){.breadcrumbs a,.footer-bottom a,.text-link{min-height:44px}.eyebrow,.mini-label,.card-cat{font-size:16px}}

/* Launch v18: readable category navigation and touch controls at every width. */
.header-inner{min-height:76px}.header-search-form{display:none}
.button{font-size:16px}.card-title a{display:flex;align-items:center;min-height:44px}
.breadcrumbs a{min-width:44px}
.editorial-note a,.prose a{display:inline-flex;align-items:center;min-height:44px}
.menu-item.wide{width:auto}
@media(min-width:1400px){.main-menu{flex:none}.menu-item{flex:none}.menu-link{white-space:nowrap}.menu-toggle{flex:none}}
.breadcrumbs a,.footer-bottom a,.helper a{display:inline-flex;align-items:center;min-height:44px}
.menu-toggle{min-width:44px}.menu-group a{min-height:44px;white-space:normal}
.menu-group-title{font-size:16px}.drawer-panel{width:min(460px,calc(100% - 24px))}
.tabbar a{font-size:16px}.tabbar{gap:0}.tabbar a{min-width:0;overflow-wrap:anywhere}
.footer-bottom a{min-width:44px}.logo{min-height:44px}
@media(min-width:1400px){.header-inner{min-height:80px;gap:10px}.menu-link{padding-left:6px;font-size:16px}.menu-list{gap:0}.header-search-form{display:flex;width:164px}.header-search{display:none}.nav-save{display:flex;align-items:center;min-height:44px}.nav-save span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.header-tools{gap:6px}}
@media(max-width:359px){.header-inner{gap:8px}.logo{font-size:20px}.logo-mark{width:34px;height:34px}.menu-button{padding:6px 10px}.header-tools{gap:6px}.header-search{display:none}}