/* Cookeryonline: UK and US beef cuts (know-how guide + "Know your cut" boxes on roasting/stewing recipes), 2 Nov 2026.
   Guide: loads after recipe.css + eatingout.css + guide.css + askchef-bar.css. Recipes: loads after recipe.css.
   Pop-art house style: square corners, ink borders, hard shadows; Know How sage (#c0da99) as the section pastel. */
.bc-body{--bc-sage:#c0da99;--bc-sage-l:#e6f0d6}
.bc-h2{scroll-margin-top:52px}
.bc-h2 small{display:none}
.bc-h3{margin:22px 0 10px;font:800 1.2rem/1.2 "CO Title","Arial Black",sans-serif}
.bc-intro{margin:0 0 12px;font-size:1rem;max-width:72ch}
/* diagrams */
.bc-diagrams{display:grid;gap:18px;margin:8px 0 18px}
@media(min-width:900px){.bc-diagrams{grid-template-columns:1fr 1fr}}
.bc-fig{margin:0;background:#fff;border:3px solid #16141f;box-shadow:6px 6px 0 #16141f;border-radius:0}
.bc-fig>p{margin:0;padding:8px 12px;border-bottom:3px solid #16141f;background:var(--bc-sage,#c0da99);font:800 1.05rem/1.2 "CO Title","Arial Black",sans-serif}
.bc-fig img{display:block;width:100%;height:auto;aspect-ratio:680/380;border-bottom:3px solid #16141f}
.bc-key{margin:0;padding:10px 12px 12px 12px;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 14px;font-size:.92rem;line-height:1.35}
.bc-key li{display:flex;gap:8px;align-items:baseline}
.bc-key b{flex:0 0 auto;min-width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2px solid #16141f;box-shadow:2px 2px 0 #16141f;font:900 .85rem/1 "Arial Black",Arial,sans-serif}
.bc-key a{color:inherit}
.bc-fine{font-size:.85rem;color:#5b5866;margin:6px 0 0}
/* name traps */
.bc-traps{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.bc-traps>li{background:#fff;border:3px solid #16141f;box-shadow:5px 5px 0 #16141f;padding:10px 12px 12px;border-radius:0}
.bc-traps>li:nth-child(odd){box-shadow:5px 5px 0 #c2410c}
.bc-traps>li>b{display:block;font:800 1.05rem/1.25 "CO Title","Arial Black",sans-serif;margin-bottom:4px}
.bc-traps p{margin:0;font-size:.95rem;line-height:1.5}
.bc-traps p b{font-weight:700}
.bc-eq{display:inline-block;margin:0 0 6px;padding:2px 8px;background:#ffe27a;border:2px solid #16141f;font-weight:700;font-size:.9rem}
/* the big table */
.bc-table-wrap{margin:8px 0 6px}
.bc-table{width:100%;border-collapse:collapse;background:#fff;border:3px solid #16141f;box-shadow:5px 5px 0 #16141f;font-size:.93rem}
.bc-table th,.bc-table td{border:1.5px solid #16141f;padding:7px 9px;text-align:left;vertical-align:top}
.bc-table thead th{background:#16141f;color:#fff;font:600 .8rem/1.2 var(--eo-label,Arial,sans-serif);text-transform:uppercase;letter-spacing:.07em}
.bc-table tbody th{font-weight:800;background:#fffaf0;min-width:9em}
.bc-table tbody th small{display:block;font-weight:400;color:#5b5866}
.bc-table tbody tr:target th,.bc-table tbody tr:target td{background:#fff3a0}
.bc-table .bc-n{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;margin-right:6px;border:2px solid #16141f;background:#fff;font:900 .75rem/1 "Arial Black",Arial,sans-serif;vertical-align:1px}
.bc-table tr.bc-grp th{background:var(--bc-sage,#c0da99);font:800 .95rem/1.2 "CO Title","Arial Black",sans-serif}
@media(max-width:720px){
 .bc-table,.bc-table tbody,.bc-table tr,.bc-table th,.bc-table td{display:block;width:auto}
 .bc-table{border:0;box-shadow:none;background:none}
 .bc-table thead{display:none}
 .bc-table tbody tr{margin:0 0 12px;background:#fff;border:3px solid #16141f;box-shadow:4px 4px 0 #16141f}
 .bc-table tbody tr.bc-grp{border:0;box-shadow:none;background:none;margin:16px 0 6px}
 .bc-table tbody tr.bc-grp th{border:3px solid #16141f}
 .bc-table tbody th{border:0;border-bottom:2px solid #16141f}
 .bc-table td{border:0;padding:5px 10px}
 .bc-table td::before{content:attr(data-label);display:block;font:600 .72rem/1.2 var(--eo-label,Arial,sans-serif);text-transform:uppercase;letter-spacing:.08em;color:#5b5866}
}
/* which cut for which job */
.bc-jobs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:6px 0 10px}
.bc-jobs>div{background:#fff;border:3px solid #16141f;padding:10px 12px;box-shadow:4px 4px 0 #16141f}
.bc-jobs h3{margin:0 0 6px;font:800 1.05rem/1.2 "CO Title","Arial Black",sans-serif}
.bc-jobs ul{margin:0;padding-left:1.15em;font-size:.93rem}
.bc-jobs li{margin:3px 0}
/* lamb and pork notes */
.bc-notes{width:100%;border-collapse:collapse;background:#fff;border:3px solid #16141f;font-size:.93rem;margin:6px 0 4px}
.bc-notes th,.bc-notes td{border:1.5px solid #16141f;padding:6px 9px;text-align:left;vertical-align:top}
.bc-notes thead th{background:#16141f;color:#fff;font:600 .8rem/1.2 var(--eo-label,Arial,sans-serif);text-transform:uppercase;letter-spacing:.07em}
@media(max-width:560px){.bc-notes{font-size:.88rem}.bc-notes th,.bc-notes td{padding:5px 6px}}
/* Ask Chef Col box */
.bc-ask{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;margin:26px 0;padding:14px 16px;background-color:var(--bc-sage,#c0da99);border:3px solid #16141f;box-shadow:6px 6px 0 #16141f}
.bc-ask-pic img{display:block;width:120px;height:auto}
.bc-ask-kick{margin:0;font:600 .8rem/1.2 var(--eo-label);text-transform:uppercase;letter-spacing:.1em}
.bc-ask h2{margin:2px 0 4px;font:400 clamp(1.5rem,3.6vw,2rem)/1.05 var(--eo-display);letter-spacing:.02em}
.bc-ask h2 a{color:#16141f;text-decoration:none}
.bc-ask-try{margin:0 0 8px;font-size:.93rem}
.bc-ask .acb{margin:0}
@media(max-width:560px){.bc-ask{grid-template-columns:1fr}.bc-ask-pic img{width:84px}}
/* sources */
.bc-src{margin:22px 0 8px;background:#fff;border:2px solid #16141f;padding:8px 12px}
.bc-src summary{cursor:pointer;font:600 .86rem/1.3 var(--eo-label);text-transform:uppercase;letter-spacing:.08em}
.bc-src ol{margin:8px 0 2px;padding-left:1.4em;font-size:.86rem;line-height:1.45}
.bc-src li{margin:3px 0}
/* "Know your cut" box on roasting and stewing recipes (same look as the steak recipes' box in steak.css) */
.stk-cut dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.stk-cut dt{font-weight:800}.stk-cut dd{margin:0}
.stk-cut .stk-warn{background:var(--rx-yellow,#ffd400);border:2px solid var(--rx-ink,#16141f);padding:8px 10px;margin:12px 0 0;border-radius:0}
.stk-cut .stk-more{margin:10px 0 0;font-weight:700}
@media (max-width:760px){.stk-cut dl{grid-template-columns:1fr}.stk-cut dt{margin-top:6px}}
