/* Cookeryonline recipe pages - pairs with cookery-header.css (pop-art cut-out nav). Mobile first, printable. */
:root{--rx-ink:#16141f;--rx-yellow:#ffd400;--rx-pink:#ff3b6b;--rx-blue:#0a7bd6;--rx-paper:#fffdf6;--rx-muted:#5b5866;--rx-radius:14px}
.rx-body{margin:0;background:var(--rx-paper);color:var(--rx-ink);font:17px/1.6 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-image:radial-gradient(rgba(255,59,107,.09) 1.2px,transparent 1.4px);background-size:14px 14px}
.rx-body *,.rx-body *::before,.rx-body *::after{box-sizing:border-box}
.rx-site{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:6px 12px;background:#fff;border-bottom:4px solid var(--rx-ink)}
.rx-site .rx-logo img{display:block;height:44px;width:auto}
.rx-site .cookery-nav{flex:1 1 640px}
.rx-searchbar{display:flex;justify-content:center;padding:8px 12px;background:var(--rx-yellow);border-bottom:3px solid var(--rx-ink)}
.rx{max-width:1180px;margin:0 auto;padding:12px 14px 40px}
.rx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rx a{color:var(--rx-blue)}
.rx-crumbs{font-size:.88rem;color:var(--rx-muted);margin:6px 0 10px}
.rx-crumbs a{color:inherit}
.rx-banner{background:#fff;border:2px dashed var(--rx-pink);border-radius:10px;padding:6px 12px;font-size:.9rem;margin:0 0 12px}
.rx h1,.rx h2{font-family:"CO Luckiest","Luckiest Guy",Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.1;margin:0 0 .4em}
.rx h1{font-size:clamp(2.2rem,6vw,3.6rem);color:var(--rx-ink);text-shadow:3px 3px 0 var(--rx-yellow),5px 5px 0 var(--rx-ink)}
.rx h2{font-size:1.55rem}
.rx h2 small{font-family:inherit;font-size:.6em;color:var(--rx-muted);letter-spacing:.03em}
.rx-subhead{font:700 .82rem/1.2 "CO Oswald",Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--rx-pink);margin:14px 0 4px}
/* hero */
.rx-hero{display:grid;gap:18px;align-items:center;margin-bottom:16px}
.rx-photo{margin:0;position:relative}
.rx-photo img{display:block;width:100%;height:auto;border:4px solid var(--rx-ink);border-radius:var(--rx-radius);box-shadow:8px 8px 0 var(--rx-ink);background:#fff}
.rx-photo figcaption{font-size:.8rem;color:var(--rx-muted);margin-top:12px}
.rx-kicker{font:700 .85rem "CO Oswald",Oswald,"Arial Narrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0 0 4px;color:var(--rx-pink)}
.rx-summary{font-size:1.08rem;margin:.6em 0}
.rx-facts{list-style:none;padding:0;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px}
.rx-facts li{background:#fff;border:2px solid var(--rx-ink);border-radius:999px;padding:2px 12px;font-size:.92rem;box-shadow:3px 3px 0 var(--rx-ink)}
/* controls */
.rx-controls{position:static;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 12px;margin:0 -4px 16px;
  background:var(--rx-yellow);border:3px solid var(--rx-ink);border-radius:var(--rx-radius);box-shadow:5px 5px 0 var(--rx-ink)}
.rx-controls[hidden]{display:none}
.rx-ctl{display:flex;align-items:center;gap:6px}
.rx-ctl>span{font:700 .78rem "CO Oswald",Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.rx button,.rx .rx-btn{font:inherit;font-size:.95rem;cursor:pointer;border:2px solid var(--rx-ink);background:#fff;color:var(--rx-ink);border-radius:999px;padding:4px 12px;line-height:1.4;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.rx button:hover,.rx .rx-btn:hover{background:var(--rx-ink);color:#fff}
.rx button:focus-visible,.rx .rx-btn:focus-visible,.rx input:focus-visible{outline:3px solid var(--rx-blue);outline-offset:2px}
.rx-seg{display:inline-flex;border:2px solid var(--rx-ink);border-radius:999px;overflow:hidden;background:#fff}
.rx-seg button{border:0;border-radius:0;padding:4px 12px}
.rx-seg button+button{border-left:2px solid var(--rx-ink)}
.rx-seg button[aria-pressed=true]{background:var(--rx-pink);color:#fff;font-weight:700}
.rx-stepper button{width:34px;height:34px;justify-content:center;padding:0;font-size:1.2rem;font-weight:700}
.rx-stepper input{width:3.2em;text-align:center;font:700 1.1rem inherit;border:2px solid var(--rx-ink);border-radius:8px;padding:3px 2px;background:#fff}
/* layout */
.rx-grid{display:grid;gap:18px}
.rx-card{background:#fff;border:3px solid var(--rx-ink);border-radius:var(--rx-radius);box-shadow:6px 6px 0 var(--rx-ink);padding:16px 18px;margin-bottom:18px}
.rx-ings{list-style:none;margin:0;padding:0}
.rx-ings li{padding:6px 0;border-bottom:1px dashed #d9d4c7;display:flex;gap:8px;align-items:baseline}
.rx-ings li:last-child{border-bottom:0}
.rx-amt{flex:0 0 auto;min-width:4.6em;font-weight:700;color:var(--rx-ink);background:linear-gradient(transparent 55%,rgba(255,212,0,.55) 55%)}
.rx-amt:empty{min-width:4.6em;background:none}
.rx-ings .is-optional .rx-name{color:var(--rx-muted)}
.rx-ednote{color:var(--rx-pink);font-weight:700;cursor:help}
.rx-cost-big{font-size:1.05rem;margin:.2em 0 .4em}
.rx-cost-total,.rx-cost-per{font:400 1.6rem "CO Luckiest","Luckiest Guy",Impact,sans-serif;color:var(--rx-pink)}
.rx-cost-lbl{color:var(--rx-muted);font-size:.9rem}
.rx-cost-detail table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.4em 0}
.rx-cost-detail td{padding:2px 0;border-bottom:1px dotted #ccc}
.rx-cost-detail td+td{text-align:right}
.rx-fine{font-size:.8rem;color:var(--rx-muted);margin:.5em 0 0}
.rx-steps{list-style:none;margin:0;padding:0;counter-reset:none}
.rx-step{display:flex;gap:14px;align-items:flex-start;padding:10px 6px;border-radius:10px;cursor:pointer}
.rx-step+.rx-step{border-top:1px dashed #d9d4c7}
.rx-step p{margin:0}
.rx-stepno{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;font:400 1.3rem "CO Luckiest","Luckiest Guy",Impact,sans-serif;
  background:var(--rx-yellow);border:3px solid var(--rx-ink);box-shadow:2px 2px 0 var(--rx-ink)}
.rx-step.is-done{opacity:.55}
.rx-step.is-done p{text-decoration:line-through;text-decoration-thickness:2px}
.rx-step.is-done .rx-stepno{background:#c8f2d8}
.rx-step:hover{background:#fff8d6}
.rx-notes ul{margin:0;padding-left:1.2em}
.rx-history{background:#fff url() no-repeat}
.rx-history p:first-of-type::first-letter{font:400 3em/0.8 "CO Luckiest","Luckiest Guy",Impact,sans-serif;float:left;margin:6px 8px 0 0;color:var(--rx-pink)}
.rx-shop-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.rx-shop-tools[hidden]{display:none}
.rx-shop-groups{columns:2 260px;column-gap:24px}
.rx-shop-group{break-inside:avoid;margin-bottom:10px}
.rx-shop-group h3{font:700 .82rem "CO Oswald",Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--rx-pink);margin:6px 0 2px}
.rx-shop-group ul{list-style:none;margin:0;padding:0}
.rx-shop-group label{display:flex;gap:8px;align-items:flex-start;padding:3px 0;cursor:pointer}
.rx-shop-group input{width:1.15em;height:1.15em;margin-top:.25em;accent-color:var(--rx-pink)}
.rx-shop-group input:checked+span{text-decoration:line-through;color:var(--rx-muted)}
.rx-source{font-size:.85rem;color:var(--rx-muted)}
@media (min-width:760px){.rx-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.rx-controls{position:sticky;top:0}}
@media (min-width:980px){
  .rx-grid{grid-template-columns:370px minmax(0,1fr);align-items:start}
  .rx-side{position:sticky;top:84px;padding:0 8px 8px 0}
}
/* option B: classic single-column card (?layout=card) */
.rx--card{max-width:820px}
.rx--card .rx-hero{grid-template-columns:1fr}
.rx--card .rx-grid{grid-template-columns:1fr}
.rx--card .rx-side{position:static;max-height:none;overflow:visible}
.rx--card .rx-ings{columns:2 280px;column-gap:24px}
.rx--card .rx-ings li{break-inside:avoid}
@media (prefers-reduced-motion:reduce){.rx *{transition:none!important}}
/* print */
@media print{
  .rx-body{background:#fff;font-size:11pt}
  .rx-site,.rx-searchbar,.rx-controls,.rx-banner,.rx-crumbs,.rx-shop-tools,.rx .rx-btn,.rx-history,.rx-cost-detail summary{display:none!important}
  .rx-card{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .rx-grid{grid-template-columns:1fr 1.6fr!important}
  .rx-side{position:static!important;max-height:none!important;overflow:visible!important}
  .rx-photo img{box-shadow:none;max-height:6cm;width:auto}
  .rx h1{text-shadow:none}
  body.rx-print-list .rx>*:not(.rx-grid),body.rx-print-list .rx-side,body.rx-print-list .rx-maincol>*:not(#rx-shop){display:none!important}
  body.rx-print-list .rx-grid{display:block}
}
.rx--card .rx-photo img{max-height:440px;object-fit:cover}

/* =====================================================================================================
   RECIPE TEMPLATE v2 - card layout look (approved 30 Oct 2026). Overrides the base rules above.
   - logo-D background fill (/assets/img/recipe/logo-band|logo-tile .webp/.jpg) ONLY in: controls bar,
     ingredient-amount highlight bars, method step discs. Page backdrop stays plain.
   - accent text dark orange #c2410c; selected toggles near-black #1a1a1a; search strip dark orange.
   - title: Bricolage Grotesque ExtraBold (SIL OFL 1.1, /assets/fonts/bricolage-grotesque-800.woff2), #c2410c shadow.
   ===================================================================================================== */
:root{--lf-cream:#fffaf0;--lf-coral:#f78656;
  --lf-band:url(/assets/img/recipe/logo-band.jpg);--lf-tile:url(/assets/img/recipe/logo-tile.jpg)}
@supports (background-image:image-set(url(a.webp) type("image/webp"))){
  :root{--lf-band:image-set(url(/assets/img/recipe/logo-band.webp) type("image/webp"),url(/assets/img/recipe/logo-band.jpg) type("image/jpeg"));
        --lf-tile:image-set(url(/assets/img/recipe/logo-tile.webp) type("image/webp"),url(/assets/img/recipe/logo-tile.jpg) type("image/jpeg"))}}
/* 1 controls bar */
.rx-controls{background-color:var(--lf-coral);background-image:var(--lf-band);background-size:cover;background-position:center;background-repeat:no-repeat}
.rx-ctl>span{background:var(--lf-cream);border:2px solid var(--rx-ink);border-radius:6px;padding:1px 6px}
/* 2 amount highlight bars: logo fill under the lower half of the amount */
.rx-amt{background-color:transparent;background-image:linear-gradient(#fff 55%,transparent 55%),var(--lf-tile);background-size:auto,220px 220px;background-repeat:no-repeat,repeat}
.rx-amt:empty{background:none}
/* 3 step-number discs */
.rx-stepno{background-color:var(--lf-coral);background-image:var(--lf-tile);background-size:150px 150px;background-position:center;
  text-shadow:0 0 3px var(--lf-cream),0 0 2px var(--lf-cream),0 0 1px var(--lf-cream)}
.rx-step:nth-child(2n) .rx-stepno{background-position:40% 70%}
.rx-step:nth-child(3n) .rx-stepno{background-position:75% 20%}
.rx-step.is-done .rx-stepno{background:#c8f2d8;text-shadow:none}
@media print{.rx-controls,.rx-stepno{background:#fff!important}.rx-amt{background:none!important}}
.rx-seg button[aria-pressed=true]{background:#1a1a1a;color:#fff;font-weight:700}
/* red text -> dark orange (user request) */
.rx-subhead,.rx-kicker,.rx-cost-total,.rx-cost-per,.rx-shop-group h3{color:#c2410c}
.rx-history p:first-of-type::first-letter{color:#c2410c}
/* search strip -> dark orange (user request); text/controls kept readable */
.rx-searchbar{background:#c2410c;border-bottom-color:#1a1a1a}
.rx-searchbar .cs-row{border-color:#1a1a1a;background:#fff}
.rx-searchbar .cs-row:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.75)}
.rx-searchbar .cookery-search input[type=search]{color:#1a1a1a}
.rx-searchbar .cookery-search input[type=search]::placeholder{color:#5a5a5a}
.rx-searchbar .cs-go{background:#1a1a1a;color:#fff}
.rx-searchbar .cs-go:hover,.rx-searchbar .cs-go:focus-visible{background:#3a3a3a}
.rx-searchbar .cs-scope,.rx-searchbar .cs-scope legend{color:#fff}
.rx-searchbar .cs-pill{background:#fff8ec;border-color:#1a1a1a}
.rx-searchbar .cs-pill label{color:#1a1a1a}
.rx-searchbar .cs-pill input:checked+label{background:#1a1a1a;color:#fff}
.rx-searchbar .cs-pill input:focus-visible+label{outline-color:#fff}
/* title font: option A chosen (Bricolage Grotesque ExtraBold, SIL OFL 1.1), near-black with dark-orange shadow */
@font-face{font-family:"CO Title";src:url(/assets/fonts/bricolage-grotesque-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
.rx h1{font-family:"CO Title","Arial Black",Impact,sans-serif;font-weight:800;font-size:clamp(2.3rem,6.2vw,3.7rem);letter-spacing:-.015em;line-height:1.05;color:#16141f;text-shadow:3px 3px 0 #c2410c}
@media print{.rx h1{text-shadow:none}}

/* in-page jump nav (Template v2, 30 Oct 2026): one row of small icon buttons linking to the page sections; sticky; works without JS.
   Name shown as a tooltip on hover / keyboard focus / tap (recipe-jumpnav.js adds .is-tip on touch). recipe-jumpnav.js also
   highlights the current section and sets --rx-jn-h / --rx-stick (fallbacks below). Fits one row at 320px+. */
:root{--rx-jn-h:56px;--rx-stick:68px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.rx [id]{scroll-margin-top:var(--rx-stick)}
.rx-jumpnav{position:sticky;top:0;z-index:21;margin:0 -4px 14px;background:var(--lf-cream);border:3px solid var(--rx-ink);border-radius:var(--rx-radius);box-shadow:5px 5px 0 var(--rx-ink)}
.rx-jumpnav ul{list-style:none;margin:0;padding:6px 8px 8px;display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(4px,2.4vw,14px)}
.rx-jumpnav li{flex:0 0 auto;position:relative}
.rx-jumpnav a{position:relative;display:grid;place-items:center;width:40px;height:40px;color:var(--rx-ink);text-decoration:none;background:#fff;
  border:2px solid var(--rx-ink);border-radius:12px;box-shadow:2px 2px 0 #c2410c;transition:background-color .15s,color .15s,transform .15s;-webkit-touch-callout:none}
.rx-jumpnav .rx-ic{display:block;width:22px;height:22px}
.rx-ic-usd{display:none}
.rx:has([data-cur="USD"][aria-pressed="true"]) .rx-ic-usd{display:inline}
.rx:has([data-cur="USD"][aria-pressed="true"]) .rx-ic-gbp{display:none}
.rx-jumpnav a:hover{background:#ffe9dc;transform:translate(-1px,-1px);box-shadow:3px 3px 0 #c2410c}
.rx-jumpnav a:focus-visible{outline:3px solid #c2410c;outline-offset:2px}
.rx-jumpnav a[aria-current=true]{background:#1a1a1a;color:#fff;box-shadow:2px 2px 0 #c2410c}
/* tooltip */
.rx-jumpnav a::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-3px);z-index:2;white-space:nowrap;pointer-events:none;
  font:600 .78rem/1.2 "CO Oswald",Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:#1a1a1a;
  border:2px solid #1a1a1a;border-radius:8px;padding:4px 8px;box-shadow:2px 2px 0 #c2410c;opacity:0;visibility:hidden;transition:opacity .12s,transform .12s,visibility .12s}
.rx-jumpnav li:first-child a::after{left:-2px;transform:translate(0,-3px)}
.rx-jumpnav li:last-child a::after{left:auto;right:-2px;transform:translate(0,-3px)}
.rx-jumpnav a:hover::after,.rx-jumpnav a:focus-visible::after,.rx-jumpnav a.is-tip::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.rx-jumpnav li:first-child a:hover::after,.rx-jumpnav li:first-child a:focus-visible::after,.rx-jumpnav li:first-child a.is-tip::after,
.rx-jumpnav li:last-child a:hover::after,.rx-jumpnav li:last-child a:focus-visible::after,.rx-jumpnav li:last-child a.is-tip::after{transform:none}
@media (hover:none){.rx-jumpnav a:hover{background:#fff;transform:none;box-shadow:2px 2px 0 #c2410c}.rx-jumpnav a:hover::after{opacity:0;visibility:hidden}
  .rx-jumpnav a[aria-current=true]:hover{background:#1a1a1a}.rx-jumpnav a.is-tip::after{opacity:1;visibility:visible}}
@media (min-width:760px){.rx-controls{top:var(--rx-jn-h)}.rx-jumpnav a{width:44px;height:44px}.rx-jumpnav .rx-ic{width:24px;height:24px}}
@media print{.rx-jumpnav{display:none!important}}

/* framed mode (Cookery Book frameset, 30 Oct 2026): inside a frame hide the site header + search, show "Open full page" */
.rx-fullpage{display:none}
.rx-framed .rx-site,.rx-framed .rx-searchbar,.rx-framed .rx-sr[href="#main"]{display:none}
.rx-framed .rx-fullpage{display:block;max-width:820px;margin:8px auto 0;padding:0 14px;text-align:right}
.rx-fullpage a{display:inline-block;font:600 .85rem "CO Oswald",Oswald,"Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:#1a1a1a;border:2px solid #1a1a1a;border-radius:999px;padding:3px 12px;text-decoration:none;box-shadow:2px 2px 0 #c2410c}
.rx-fullpage a:hover{background:#c2410c}
@media print{.rx-fullpage{display:none!important}}

/* rectangular search box on recipe pages, matching the Cookery Book menu (3px corners).
   Approved 30 Oct 2026. Scoped to .rx-searchbar = recipe pages only;
   cookery-header.css and the search bars on all other pages are untouched. */
.rx-searchbar .cs-row{border-radius:3px}
.rx-searchbar .cs-pill,.rx-searchbar .cs-pill label{border-radius:3px}

/* ---- merged from recipe-v3-preview.css at go-live, 30 Oct 2026 ---- */
/* =====================================================================================================
   RECIPE TEMPLATE v3 PREVIEW (30 Oct 2026) - loaded AFTER /assets/css/recipe.css by the pilot preview pages only.
   User: "the dull yellow should be logo background, as should all dull yellow, the section jumps should be horizontal".
   Go-live: append this block to the end of recipe.css (it only overrides), then drop the extra <link>.
   ===================================================================================================== */
/* 0 no plain/dull yellow anywhere in the template: the base yellow token now resolves to the logo coral
      (every yellow use is already overridden below or in Template v2; this is a safety net) */
:root{--rx-yellow:var(--lf-coral)}
.rx h1{text-shadow:3px 3px 0 #c2410c}

/* 1 ingredient amounts (v3b, user: "The quantity boxes should be plain"): plain white box, bold near-black text,
      thin subtle outline; no logo fill, no yellow, no glow. Same box in Metric / Imperial / US and when portions change. */
.rx-amt{display:inline-block;align-self:center;box-sizing:border-box;min-width:4.6em;padding:1px 7px;line-height:1.35;font-weight:800;color:#16141f;
  background:#fff!important;background-image:none!important;border:1.5px solid rgba(22,20,31,.35);border-radius:3px;box-shadow:none;text-shadow:none;
  font-variant-numeric:tabular-nums;flex:0 0 6.6em;width:6.6em;white-space:normal;overflow-wrap:anywhere}  /* fixed width so the names line up */
.rx-amt:empty{background:none!important;border:0;padding:0}
.rx-ings li{align-items:center}

/* 2 method step hover: was pale yellow #fff8d6 -> cream row with a logo-fill strip on the left */
.rx-step:hover{background-color:transparent;background-image:linear-gradient(90deg,transparent 7px,#fffaf0 7px),var(--lf-tile);
  background-size:auto,150px 150px;background-repeat:no-repeat,repeat}
.rx-step.is-done .rx-stepno{background-color:#c8f2d8;background-image:none}

/* 3 khaki dashed dividers #d9d4c7 (ingredients, method) -> soft dark-orange dashes */
.rx-ings li{border-bottom-color:rgba(194,65,12,.28)}
.rx-step+.rx-step{border-top-color:rgba(194,65,12,.28)}

/* 4 section jump nav: always ONE horizontal row of icon buttons (desktop + phone), never a vertical list.
      6 buttons fit at 320px+. Below 340px (or with enlarged text) the row scrolls sideways inside its own strip,
      so the page itself never scrolls sideways. Hover / focus / tap labels unchanged. */
.rx-jumpnav{max-width:100%}
.rx-jumpnav ul{list-style:none!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:center}
.rx-jumpnav li{display:block;flex:0 0 auto;margin:0;list-style:none}
@media (max-width:340px){.rx-jumpnav ul{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rx-jumpnav ul::-webkit-scrollbar{display:none}}

@media print{.rx-amt{background:none!important;border:0;box-shadow:none;text-shadow:none}.rx-step:hover{background:none}}