/* ============================================================
   Cho's Kitchen — Recipes page (self-contained, single file)
   Layout & margins mirror index.html (--wrap / --pad), the mood
   is Cho's Kitchen cream/gold (see css/chos-kitchen.css tokens),
   and the hero uses the same size/layout as contact.html .chero.
   ============================================================ */

:root{
  /* gold */
  --ck-gold:#C9A227;
  --ck-gold-bright:#E3A50E;
  --ck-gold-soft:#DBB372;
  /* brown */
  --ck-brown:#4D371A;
  --ck-brown-deep:#2E2112;
  --ck-brown-mid:#674921;
  /* surfaces */
  --ck-cream:#FCF5E3;
  --ck-cream-2:#F5E9CC;
  --ck-on-dark:#F3E7C8;
  --ck-green:#87A943;
  /* lines */
  --ck-line:rgba(46,33,18,.14);
  --ck-gold-line:rgba(201,162,39,.55);
  --ck-shadow:0 24px 50px -28px rgba(46,33,18,.5);

  /* layout — identical to the main site (index.html) */
  --font-head:'DM Sans',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
  --nav-h:74px;
  --wrap:1320px;
  --pad:40px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;
  color:var(--ck-brown);background:var(--ck-cream);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}

/* elegant uppercase kicker */
.eyebrow{font-family:var(--font-head);font-weight:500;font-size:14px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ck-gold)}
.eyebrow--light{color:var(--ck-gold-soft)}

/* ---------- buttons (homepage shape, cream/gold fill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-head);font-weight:500;font-size:16px;letter-spacing:.04em;
  padding:14px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:.2s ease;white-space:nowrap}
.btn--gold{background:var(--ck-gold-bright);color:var(--ck-brown-deep)}
.btn--gold:hover{background:var(--ck-gold);color:var(--ck-cream)}
.btn--outline{background:transparent;color:var(--ck-on-dark);border-color:rgba(243,231,200,.55)}
.btn--outline:hover{background:var(--ck-on-dark);color:var(--ck-brown-deep);border-color:var(--ck-on-dark)}
.btn--primary{background:var(--ck-gold-bright);color:var(--ck-brown-deep);border-radius:999px}
.btn--primary:hover{background:var(--ck-gold);color:var(--ck-cream);transform:translateY(-2px)}

/* ============================================================
   NAVBAR — index.html structure/margins, cream/brown theme
   (colours from chos-kitchen.html; metrics identical to index)
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,245,227,.9);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--ck-line)}
.nav__inner{
  position:relative;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
}
.nav__logo{display:flex;align-items:center;flex:none;margin-right:8px}
.nav__logo img{height:38px}
.nav__logo-fallback{
  display:none;font-family:"DM Sans",sans-serif;font-weight:700;font-size:26px;
  color:var(--ck-brown-deep);letter-spacing:-.04em;align-items:center;
}
.nav__logo-fallback b{color:var(--ck-gold);position:relative}
.nav__logo-fallback b::after{content:"";position:absolute;top:-2px;right:-3px;
  width:7px;height:7px;background:var(--ck-gold);border-radius:2px}

.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list > li > a,.nav__top{
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:16px;color:var(--ck-brown);
  background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px;
  display:inline-flex;align-items:center;gap:5px;transition:.15s;
}
.nav__list > li > a:hover,.nav__top:hover{color:var(--ck-brown-deep);background:var(--ck-cream-2)}
.nav__top[aria-current="page"]{color:var(--ck-brown-deep);background:var(--ck-cream-2)}
.caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}

.has-drop{position:relative}
.drop{
  position:absolute;margin-top:10px;min-width:230px;background:#fff;
  border:1px solid var(--ck-line);border-radius:14px;box-shadow:var(--ck-shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s ease;z-index:60;
}
.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ck-brown);transition:.12s}
.drop a:hover{background:var(--ck-cream-2);color:var(--ck-brown-deep)}
/* Cho's Kitchen submenu — Taste of Myanmar / Pantry, indented under the parent link */
.drop a.drop__sub{padding-left:26px;font-size:13px;opacity:.82}
.drop a.drop__sub:hover{opacity:1}
.drop__div{display:block;height:1px;background:var(--ck-line);margin:6px 8px}

.nav__right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.lang{display:flex;gap:7px}
.lang__btn{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ck-line);
  background:#fff;cursor:pointer;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:12px;color:var(--ck-brown);transition:.18s;display:flex;
  align-items:center;justify-content:center;padding:0;
}
.lang__btn:hover{border-color:var(--ck-gold);color:var(--ck-brown-deep)}
.lang__btn.is-active{background:var(--ck-brown-deep);border-color:var(--ck-brown-deep);color:var(--ck-gold-soft)}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--ck-brown-deep);border-radius:2px;transition:.25s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer */
.drawer{position:fixed;inset:var(--nav-h) 0 0;background:var(--ck-cream);z-index:45;
  transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;visibility:hidden}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer__nav{padding:18px 24px 60px;display:flex;flex-direction:column}
.drawer__nav > a,.drawer__nav summary{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;color:var(--ck-brown-deep);
  padding:15px 4px;border-bottom:1px solid var(--ck-line);cursor:pointer;list-style:none;
}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary::after{content:"+";float:right;color:var(--ck-gold);font-weight:400}
.drawer__nav details[open] summary::after{content:"–"}
.drawer__nav details a{display:block;padding:10px 16px;color:var(--ck-brown);font-size:16px}
.drawer__nav details a.drawer__sub{padding-left:30px;font-size:14px;opacity:.82}
.drawer__lang{display:flex;gap:10px;margin-top:24px}

/* ============================================================
   BREADCRUMB — no bar of its own: a transparent 48px row overlaid
   inside the hero, flush under the navbar (same treatment as
   recipe-shin-shin.html, recoloured cream/gold)
   ============================================================ */
.ckhero__crumbs{position:absolute;left:0;right:0;top:0;z-index:3;height:48px;
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:14px;white-space:nowrap;overflow:hidden}
.ckhero__crumbs a{color:var(--ck-brown-mid);font-weight:500;flex:none;transition:.15s}
.ckhero__crumbs a:hover{color:var(--ck-brown-deep)}
.ckhero__crumbs-sep{color:var(--ck-gold);flex:none}
.ckhero__crumbs-current{color:var(--ck-gold-bright);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   HERO — compact centred page header. Same size/layout as
   contact.html .chero (padding, centred title + lead, corner
   packs + line accents), recoloured cream/gold. Breadcrumb is
   overlaid top-left INSIDE the hero.
   ============================================================ */
.ckhero{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--ck-cream) 0%,var(--ck-cream-2) 100%);
  border-bottom:1px solid var(--ck-line);
  /* extra headroom holds the overlaid breadcrumb row that used to be its own
     48px bar above the hero — the block keeps the same overall height */
  padding:clamp(104px,11vw,140px) 0 clamp(64px,8vw,96px);
}

.ckhero__content{position:relative;z-index:2}
.ckhero__content .eyebrow{display:block;margin-bottom:12px}
/* weight 700 to match .sshero2__title on recipe-shin-shin.html — everything
   else (DM Sans, the clamp, line-height, centring) was already identical */
.ckhero__title{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(36px,4.4vw,54px);color:var(--ck-brown-deep);
  margin:0 0 14px;line-height:1.12;
}
.ckhero__lead{color:var(--ck-brown);font-size:16px;max-width:560px;margin:0 auto}

/* banner layer — full-bleed photography behind the centred title.
   The artwork keeps its middle clear, so the crop can lean on the centre at
   every width and the brown type always lands on flat cream. */
.ckhero__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.ckhero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(253,246,232,.62) 0%,rgba(253,246,232,0) 20%),
    radial-gradient(120% 78% at 50% 52%,rgba(253,246,232,.74) 0%,rgba(253,246,232,.36) 46%,rgba(253,246,232,0) 76%)}

/* ============================================================
   RECIPE — feature card (ported from the Cho's Kitchen Option-3
   archive; tokens already match this page's cream/gold theme)
   ============================================================ */
.recipe{background:var(--ck-cream);padding:clamp(36px,5vw,56px) 0 clamp(48px,6vw,72px)}
.recipe__head{text-align:center;margin:0 auto clamp(14px,2vw,22px)}
.recipe__head .eyebrow{display:block;margin-bottom:6px}
/* 700 for the same reason as .ckhero__title — matches ShinShin's .recipe__title */
.recipe__title{font-family:var(--font-head);font-weight:700;color:var(--ck-brown-deep);
  font-size:clamp(28px,4vw,46px);margin:0;line-height:1.12}

/* extra breathing room between the picker strip and the recipe card */
.recipe__grid{max-width:var(--wrap);margin:32px auto 0}

/* the card has two states, toggled by the ">" bar:
   - .rec--preview  (default): one column — image, name, description, bar
   - .rec--expanded: split layout — left image/name/desc, right ingredients/
     method + a "watch video" button, same bar re-collapses it            */
.rec{background:#FFFCF4;border:1px solid var(--ck-line);border-radius:24px;overflow:hidden}
/* fixed height so every dish's card is identical and the CTA bar always
   lands in the same spot; the media crops (object-fit:cover) to fit */
.rec--preview{height:440px}
.rec--expanded{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,44px);padding:clamp(18px,2vw,22px)}

/* ---- collapsed / preview state — image left, info right ---- */
.rec__preview{display:grid;grid-template-columns:1fr 1fr;height:100%}
.rec__previewMedia,.rec__previewBody{min-width:0}
.rec__previewMedia{height:100%;overflow:hidden}
/* full-bowl photo sits on the LEFT of the source image — anchor the crop
   left so the whole bowl stays in frame at the card's portrait aspect */
.rec__previewMedia img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.rec__previewBody{display:flex;flex-direction:column;padding:30px 34px}
/* the script measures the LONGEST dish description at the current column
   width and publishes it as --rec-desc-min, so the copy always reserves the
   same height and the peek pills lock to one spot for every dish */
.rec__preview .rec__desc{margin-top:10px;min-height:var(--rec-desc-min,0px)}
/* sneak peek — hints that ingredients/method are one click away */
.rec__peek{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.rec__peekItem{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:500;
  font-size:13px;color:var(--ck-brown-mid);background:#FBEEC6;border-radius:999px;
  padding:10px 18px}
.rec__peekItem svg{width:22px;height:22px;flex:none;color:var(--ck-gold)}

/* ---- shared media + text styles ---- */
.rec__media{aspect-ratio:2/1;overflow:hidden;border-radius:16px;margin-bottom:12px}
.rec__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rec__left{display:flex;flex-direction:column;min-width:0}
.rec__tag{display:inline-block;align-self:flex-start;font-family:var(--font-head);font-weight:500;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ck-gold);
  padding:4px 14px;border:1px solid var(--ck-gold-line);border-radius:999px;margin-bottom:10px}
.rec__name{font-family:var(--font-head);font-weight:500;color:var(--ck-gold-bright);
  font-size:30px;margin:0;line-height:1.15;white-space:nowrap}
.rec__rule{width:46px;height:2px;background:var(--ck-gold);border:0;margin:12px 0}
.rec__desc{margin:0;font-size:15px;line-height:1.6;color:var(--ck-brown)}

/* toggle bar — full-width, same control collapses/expands the card */
.rec__toggle{display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--ck-line);
  border-left:0;border-right:0;border-bottom:0;
  background:transparent;cursor:pointer;font-family:var(--font-head);font-weight:700;
  color:var(--ck-gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.rec__toggleArrow{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--ck-gold-bright);color:var(--ck-brown-deep);
  transition:transform .2s ease}
.rec__toggleArrow svg{width:20px;height:20px}
.rec__toggle.is-expanded .rec__toggleArrow{transform:rotate(90deg)}

.rec__right{display:flex;flex-direction:column;min-width:0}
.rec__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.recacc__sec{margin-bottom:14px}
.recacc__sec:last-child{margin-bottom:0}
.recacc__sec h4{font-family:var(--font-head);font-weight:700;color:var(--ck-gold);
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;margin:0 0 8px}
.recacc__sec ul,.recacc__sec ol{margin:0;padding-left:18px}
.recacc__sec li{font-size:14.5px;line-height:1.55;color:var(--ck-brown);margin-bottom:5px}
.recacc__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:500;font-size:14px;letter-spacing:.04em;
  color:rgba(243,231,200,.7)}

/* "watch video" sits at the top of the right column */
.rec__videoRow{display:flex;justify-content:flex-end;margin-bottom:20px}
.rec__videoBtn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:500;font-size:14px;letter-spacing:.03em;
  color:var(--ck-brown-deep);background:var(--ck-gold-bright);border:1px solid var(--ck-gold-bright);
  border-radius:999px;padding:12px 24px;cursor:pointer;transition:.18s ease}
.rec__videoBtn svg{width:16px;height:16px;fill:var(--ck-brown-deep);transition:fill .18s ease}
.rec__videoBtn:hover{background:var(--ck-brown-deep);border-color:var(--ck-brown-deep);color:var(--ck-cream)}
.rec__videoBtn:hover svg{fill:var(--ck-cream)}

/* video lightbox */
.recmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.recmodal.is-open{display:flex}
.recmodal__backdrop{position:absolute;inset:0;background:rgba(20,13,6,.86)}
.recmodal__panel{position:relative;z-index:1;width:100%;max-width:860px}
.recmodal__close{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(243,231,200,.5);background:transparent;color:var(--ck-on-dark);
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.16s ease}
.recmodal__close:hover{background:var(--ck-on-dark);color:var(--ck-brown-deep)}
.recmodal__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.recmodal__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   RECIPE PICKER — clickable product thumbnails between the
   Recipe header and the featured recipe card
   ============================================================ */
.recipe__picker{max-width:var(--wrap);margin:0 auto 40px}
.recipe__pickerline{display:block;width:100%;height:auto;opacity:.95;pointer-events:none}
.recipe__pickerline--top{margin-bottom:-8px;transform:scaleY(-1)}
.recipe__pickerline--bottom{margin-top:-8px}

.recipe__pickerviewport{position:relative;overflow-x:auto;overflow-y:hidden;
  max-width:862px;margin:0 auto;
  scrollbar-width:none;cursor:grab;touch-action:pan-x;
  -webkit-user-select:none;user-select:none}
.recipe__pickerviewport::-webkit-scrollbar{display:none;height:0}
.recipe__pickerviewport.is-grabbing{cursor:grabbing}
.recipe__pickerrow{display:flex;gap:28px;justify-content:center;
  padding:18px var(--pad) 22px;width:max-content;margin:0 auto}

.rpick{position:relative;flex:0 0 auto;width:140px;height:140px;padding:8px;
  border:0;background:transparent;border-radius:16px;cursor:pointer;
  transition:transform .3s ease}
.rpick::before{content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(150deg,var(--ck-gold-bright),var(--ck-gold));
  opacity:0;transform:scale(.86);transition:opacity .25s ease,transform .25s ease;z-index:0;
  box-shadow:0 10px 22px -10px rgba(46,33,18,.5)}
.rpick img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  display:block;filter:drop-shadow(0 6px 10px rgba(46,33,18,.22))}
.rpick:hover,.rpick:focus-visible{transform:rotate(-6deg) scale(1.08)}
.rpick:hover::before,.rpick:focus-visible::before{opacity:1;transform:scale(1)}
.rpick.is-active::before{opacity:.55;transform:scale(1)}

/* ============================================================
   FOOTER — cream band (same structure as index.html)
   ============================================================ */
.foot{background:var(--ck-cream-2);color:var(--ck-brown-mid);padding:80px 0 0;
  border-top:2px solid var(--ck-gold)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px}
.foot__logo{height:46px;width:auto;margin-bottom:18px}
.foot__logo-fallback{display:none;font-family:var(--font-head);font-weight:700;
  font-size:1.8rem;color:var(--ck-brown-deep);margin-bottom:18px}
.foot__logo-fallback b{color:var(--ck-gold)}
.foot__brand p{font-size:.94rem;max-width:320px;margin:0 0 20px}
.foot__col h4{font-family:var(--font-head);color:var(--ck-brown-deep);font-size:1rem;line-height:1.1;margin:0 0 16px}
.foot__col a{display:block;padding:6px 0;font-size:.92rem;transition:.15s;color:var(--ck-brown-mid)}
.foot__col a:hover{color:var(--ck-gold)}
.foot__bar{border-top:1px solid var(--ck-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;padding-bottom:22px;font-size:.85rem}
.foot__legal{display:flex;gap:18px}
.foot__legal a:hover{color:var(--ck-gold)}
/* agency credit in the legal line — set as a quiet note, not a link, so it
   reads as a byline beside Privacy / Terms (per the Yes! design agreement) */
.foot__by{opacity:.75;white-space:nowrap}

.contact__social{display:flex;gap:12px}
.contact__social a{width:42px;height:42px;border-radius:12px;background:var(--ck-brown-deep);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.contact__social a:hover{background:var(--ck-gold);transform:translateY(-2px)}
.contact__social svg{width:20px;height:20px;fill:var(--ck-on-dark)}
.contact__social a:hover svg:not(.ig){fill:var(--ck-brown-deep)}
.contact__social .ig{fill:none;stroke:var(--ck-on-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact__social a:hover .ig{stroke:var(--ck-brown-deep)}
.contact__social .ig .dot{fill:var(--ck-on-dark);stroke:none}
.contact__social a:hover .ig .dot{fill:var(--ck-brown-deep)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .nav__menu{display:none}
  .nav__right{margin-left:auto}
  .nav__right .lang{display:none}
  .nav__burger{display:flex}
}
/* Deliberate line breaks (<br class="brk">) tidy the ragged edge of the hero
   lede and the dish copy. They only help while the column is wide enough to
   hold each phrase on one line — otherwise a phrase wraps and leaves an
   orphan word — so the dish copy's breaks (--wide) switch off below 1280px
   (its longest phrase now needs a 502px column, which the card reaches at
   ~1265) and the hero's below 720px, falling back to normal wrapping. */
@media (max-width:1279px){
  .brk--wide{display:none}
}
@media (max-width:980px){
  .recipe__grid{max-width:560px}
  .rec--expanded{grid-template-columns:1fr}
  /* card stacks on mobile — release the fixed height, media gets its own.
     The script gives the body a min-height sized to the longest dish, so
     every card is the same height; the divider keeps its margin-top:auto,
     which parks the leftover space between the pills and the rule (never
     closer than this margin-bottom) */
  .rec--preview{height:auto}
  .rec__peek{margin-bottom:16px;gap:10px}
  /* tighter padding so two chips still share a row on a 375px phone; each
     chip keeps its natural width */
  .rec__peekItem{padding:10px 14px}
  .rec__preview{grid-template-columns:1fr;height:auto}
  .rec__previewMedia{height:280px}
  .rec__previewBody{padding:24px 26px}
}
@media (max-width:720px){
  :root{--pad:18px}
  /* the banner is 3.9:1 — behind a phone-shaped block the cover-crop would
     keep only its empty middle, so stack it: full-width artwork, title below */
  .ckhero{padding:0 0 clamp(30px,8vw,42px)}
  .ckhero__crumbs{position:relative;height:auto;padding-block:14px}
  .ckhero__bg{position:relative;inset:auto;height:auto;aspect-ratio:2932/743;
    margin-bottom:clamp(22px,6vw,30px)}
  .ckhero__scrim{display:none}

  .foot{padding-top:56px}
  .foot__grid{grid-template-columns:1fr;gap:28px}

  .brk{display:none}

  .recipe{padding:44px 0 56px}
  .rec__name{font-size:22px}
  .rec__previewMedia{height:220px}
  .rec__cols{grid-template-columns:1fr}
  .recmodal__close{top:-42px}
  .rpick{width:100px;height:100px}
  .recipe__pickerrow{gap:18px}
  .recipe__pickerviewport{max-width:100%}
  .recipe__pickerline--top{margin-bottom:-6px}
  .recipe__pickerline--bottom{margin-top:-6px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}