/* Know How hub (/know-how/), batch 1, 1 Nov 2026. kh-* only. Square corners, hard ink shadows, pop-art fills (tokens from recipe.css). */
.kh{max-width:1180px;margin:0 auto;padding:10px 16px 40px;--ink:var(--rx-ink,#16141f);--y:var(--rx-yellow,#ffd400);--p:var(--rx-pink,#ff3b6b);--b:var(--rx-blue,#0a7bd6);--paper:var(--rx-paper,#fffdf6)}
.kh *{border-radius:0!important}
.kh-hero{display:flex;gap:18px;align-items:center;background:var(--y);background-image:radial-gradient(rgba(22,20,31,.16) 1.2px,transparent 1.3px);background-size:9px 9px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px 20px;margin:12px 0 18px}
.kh-hero-ic{flex:none;width:96px;height:auto}
.kh-kick,.kh-h2 small,.kh-ct small{display:block;font:700 .74rem/1.3 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.09em}
.kh-hero h1{font:800 clamp(2.2rem,6vw,3.6rem)/1 "CO Title","Arial Black",sans-serif;margin:2px 0 6px;text-shadow:3px 3px 0 #fff}
.kh-intro{font-size:1.05rem;margin:0 0 10px;max-width:60ch}
.kh-search{display:flex;max-width:560px}
.kh-search input{flex:1;min-width:0;border:3px solid var(--ink);padding:10px;font-size:1rem}
.kh-search button{border:3px solid var(--ink);border-left:0;background:var(--ink);color:#fff;font-weight:800;padding:0 18px}
.kh-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0;border-bottom:3px solid var(--ink)}
.kh-jump a{border:2.5px solid var(--ink);background:#fff;padding:5px 10px;font:700 .85rem/1 system-ui,sans-serif;color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.kh-jump a:hover{background:var(--y)}
.kh-sec{margin:28px 0;scroll-margin-top:60px}
.kh-h2{font:800 1.7rem/1.1 "CO Title","Arial Black",sans-serif;margin:0 0 12px;border-bottom:4px solid var(--ink);padding-bottom:6px}
.kh-h2 small{color:#b5172f;margin-bottom:3px}
.kh-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.kh-quick a{display:block;background:var(--ink);color:#fff;text-decoration:none;padding:12px 14px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--p)}
.kh-quick b{display:block;font:800 1.1rem/1.15 "CO Title","Arial Black",sans-serif}.kh-quick span{font-size:.82rem;opacity:.85}
.kh-quick a:hover{background:var(--b)}
.kh-chef{display:flex;gap:16px;align-items:flex-end;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--b);padding:14px 18px 0;margin:26px 0}
.kh-chef-av{flex:none;width:150px;height:auto;display:block}
.kh-chef-b{flex:1;padding-bottom:14px}.kh-chef-b h2{font:800 1.8rem/1 "CO Title","Arial Black",sans-serif;margin:2px 0 6px}
.kh-qs{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.kh-qs a{display:block;border:2.5px solid var(--ink);padding:8px 10px;background:var(--y);color:var(--ink);font-weight:700;text-decoration:none}
.kh-qs a::before{content:"Q ";color:#b5172f;font-weight:900}
.kh-btn{display:inline-block;background:var(--ink);color:#fff!important;border:3px solid var(--ink);padding:8px 14px;font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--y);margin:4px 8px 4px 0}
.kh-btn-w{background:#fff;color:var(--ink)!important}
.kh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px;list-style:none;margin:0;padding:0}
.kh-card a{display:flex;flex-direction:column;height:100%;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);color:var(--ink);text-decoration:none;transition:transform .1s}
.kh-card a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--p)}
.kh-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--ink);background:var(--paper)}
.kh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kh-thumb img[src*="/nav/"]{object-fit:contain;padding:8px;background:var(--y);background-image:radial-gradient(rgba(22,20,31,.16) 1.2px,transparent 1.3px);background-size:9px 9px}
.kh-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:800 4rem/1 "CO Title","Arial Black",sans-serif;color:#fff;-webkit-text-stroke:2px var(--ink);background-size:9px 9px}
.kh-ph-y{background-color:var(--y);background-image:radial-gradient(rgba(22,20,31,.18) 1.2px,transparent 1.3px)}
.kh-ph-p{background-color:var(--p);background-image:radial-gradient(rgba(22,20,31,.2) 1.2px,transparent 1.3px)}
.kh-ph-b{background-color:var(--b);background-image:radial-gradient(rgba(255,255,255,.25) 1.2px,transparent 1.3px)}
.kh-ct{padding:10px 12px 12px;display:block}.kh-ct strong{display:block;font:800 1.15rem/1.15 "CO Title","Arial Black",sans-serif;margin:2px 0 4px}.kh-ct span{font-size:.88rem;color:#4a4755}
.kh-ct small{color:#b5172f}
.kh-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;list-style:none;padding:0;margin:16px 0 0}
.kh-methods a{display:block;border:3px solid var(--ink);background:var(--paper);padding:8px 10px;font:800 1rem/1.1 "CO Title","Arial Black",sans-serif;color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.kh-methods b{display:block;color:#b5172f;font-size:.8rem}
.kh-methods a:hover{background:var(--y)}
.kh-conv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.kh-conv table{width:100%;border-collapse:collapse;background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.kh-conv caption{text-align:left;font-weight:700;padding:0 0 6px}
.kh-conv th{background:var(--ink);color:#fff;padding:7px;font-size:.8rem;text-transform:uppercase;text-align:left}
.kh-conv td{padding:7px;border-bottom:1.5px solid rgba(22,20,31,.2)}.kh-conv tr:nth-child(even) td{background:#fdf6ea}
.kh-convlinks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kh-convlinks a{display:block;border:3px solid var(--ink);padding:9px 12px;background:var(--y);color:var(--ink);font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.kh-safety ol{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kh-safety li{border:3px solid var(--ink);background:#fff;padding:10px 12px;box-shadow:5px 5px 0 #2fae5b}
.kh-safety b{display:block;font:800 1.15rem/1.1 "CO Title","Arial Black",sans-serif}
.kh-fine{font-size:.8rem;color:#5b5866}
.kh-az{display:flex;flex-wrap:wrap;gap:6px}
.kh-az a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:3px solid var(--ink);background:#fff;font:800 1.2rem/1 "CO Title","Arial Black",sans-serif;color:var(--ink);text-decoration:none}
.kh-az a:nth-child(3n+1){background:var(--y)}.kh-az a:hover{background:var(--p);color:#fff}
.kh-books{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.kh-book{width:92px;height:130px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:flex;align-items:flex-end;padding:8px;color:var(--ink);text-decoration:none}
.kh-book b{background:#fff;border:2px solid var(--ink);padding:2px 4px;font-size:.8rem}
.kh-books p{flex-basis:100%;margin:6px 0 0}
@media (max-width:640px){.kh-hero{flex-direction:column;align-items:flex-start;padding:14px}.kh-hero-ic{width:64px}
 .kh-chef{flex-direction:column;align-items:flex-start;padding-top:10px}.kh-chef-av{width:100px;order:2;align-self:flex-end}.kh-chef-b{padding-bottom:0}
 .kh-conv{grid-template-columns:1fr}.kh-jump a{white-space:nowrap}
 .kh-grid{grid-template-columns:1fr 1fr;gap:10px}.kh-ct strong{font-size:1rem}.kh-ct span{display:none}}

.kh-body{background-color:var(--rx-paper,#fffdf6)}
.kh-badge{position:absolute;top:8px;left:8px;font:800 .7rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border:2px solid var(--ink);background:#ffc2d1}
.kh-card--soon>div{display:flex;flex-direction:column;height:100%;background:#fff;border:3px dashed var(--ink);color:var(--ink)}
.kh-card--soon .kh-thumb{border-bottom:3px dashed var(--ink)}
.kh-card--soon .kh-ct a{color:var(--ink);font-weight:700}
.kh-card .kh-ct span.kh-also{display:block;margin-top:6px;font-size:.84rem}
.kh-ask{display:flex;gap:16px;align-items:flex-start;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--b);padding:14px 18px;margin:26px 0;scroll-margin-top:60px}
.kh-ask .kh-chef-av{flex:none;width:120px;height:auto;display:block}
.kh-ask-b{flex:1;min-width:0}.kh-ask-b h2{font:800 1.8rem/1 "CO Title","Arial Black",sans-serif;margin:2px 0 6px}
.kh-ask .acb{margin:10px 0;max-width:none}
.kh-ask .acb h3.acb-q{font-size:1.1rem}
.kh-hide{display:none!important}
.kh-nomatch{font-weight:700;margin:6px 0 0}
.kh-links{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.kh-links a{display:inline-block;border:2.5px solid var(--ink);background:#fff;padding:6px 10px;font-weight:700;color:var(--ink);text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.kh-links a:hover{background:var(--y)}
@media (max-width:640px){.kh-ask{flex-direction:column;padding:12px}.kh-ask .kh-chef-av{width:84px}}
.kh-card--soon .kh-ct a{display:inline;height:auto;border:0;box-shadow:none;background:none;padding:0;color:var(--ink);text-decoration:underline;transform:none}
.kh-card--soon .kh-ct a:hover{background:var(--y);box-shadow:none;transform:none}
.kh-body .ac-foot{max-width:1180px;margin:0 auto;padding:0 16px 30px;font-size:.86rem;color:#5b5866}
/* kh-strip:start (2 Nov 2026; owner 05:08 "know how title box should become a strip with appropriate pastel and fill across as per other pages
   and lose the wording that duplicates the menu buttons below"). The orange title box is replaced by the shared section strip (.eo-mast from
   eatingout.css, Know How palette B sage #c0da99, ink title + white offset shadow); the filter box stays, without the old box. */
.kh-filter{margin:4px 0 16px}
.kh-filter .kh-search{max-width:560px}
.kh-filter .kh-nomatch{margin:6px 0 0}
.kh-filter .rx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* kh-strip:end */