/* ============================================================
   Cho's Kitchen — Recipe & Ingredient Guide (self-contained)
   Navbar / footer / layout & margins mirror index.html, recoloured
   to the Cho's Kitchen cream/gold system (mood like chos-kitchen.html).
   Cookbook editorial layout ported from shin-shin-ingredient.css.
   ============================================================ */

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

  --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%}

.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--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 markup/margins, cream colours
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,245,227,.9);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--ck-line)}
.nav__inner{position:relative;display:flex;align-items:center;height:var(--nav-h);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);gap:24px}
.nav__logo{display:flex;align-items:center;flex:none;margin-right:8px}
.nav__logo img{height:38px;width:auto}
.nav__logo-fallback{display:none;font-family:var(--font-head);font-weight:700;
  font-size:24px;color:var(--ck-brown-deep)}
.nav__logo-fallback b{color:var(--ck-gold)}

.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;width:max-content}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list > li > a,.nav__top{font-family:var(--font-head);font-weight:500;font-size:16px;
  color:var(--ck-brown);background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px;white-space:nowrap;
  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}

.nav__right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.lang{display:flex;gap:7px}
.lang__btn{font-family:var(--font-head);font-weight:500;font-size:.72rem;
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ck-line);
  background:transparent;color:var(--ck-brown);cursor:pointer;transition:.15s;
  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:6px}
.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%);visibility:hidden;transition:.28s ease;overflow-y:auto}
.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:var(--font-head);font-weight:500;font-size:16px;
  color:var(--ck-brown-deep);padding:14px 16px;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:"\2013"}
.drawer__nav details a{display:block;padding:10px 16px;color:var(--ck-brown);font-size:14px}
.drawer__nav details a.drawer__sub{padding-left:30px;font-size:13px;opacity:.82}
.drawer__lang{display:flex;gap:10px;margin-top:24px}

/* ============================================================
   HERO — breadcrumb overlaid left + title + filter dropdown
   ============================================================ */
.rg-hero{position:relative;border-bottom:1px solid var(--ck-line);
  background:radial-gradient(130% 130% at 10% 0%, var(--ck-cream-2) 0%, var(--ck-cream) 60%);
  padding:0 0 clamp(34px,5vw,52px)}
.rg-hero__inner{position:relative;z-index:2;max-width:820px}

/* breadcrumb — overlaid inside the hero (no separate bar), top row */
.rg-hero__crumbs{position:relative;z-index:2;display:flex;align-items:center;gap:8px;height:48px;
  font-family:var(--font-head);font-size:14px;white-space:nowrap;overflow:hidden}
.rg-hero__crumbs a{color:var(--ck-brown-mid);font-weight:500;flex:none;transition:.15s}
.rg-hero__crumbs a:hover{color:var(--ck-gold)}
.rg-hero__crumbs-sep{color:var(--ck-gold);flex:none}
.rg-hero__crumbs-current{color:var(--ck-brown-deep);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* hero body — 2 columns: text + back button (left) / flavour picker (right).
   Areas keep the desktop layout while letting mobile stack text→pick→back. */
.rg-hero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(24px,5vw,72px);row-gap:clamp(20px,3vw,32px);align-items:end;
  grid-template-areas:"text ." "back pick";
  margin-top:clamp(6px,1.5vw,14px)}
.rg-hero__text{grid-area:text;max-width:640px}

/* back to recipes — Cho's Kitchen gold accent, bottom of left column */
.rg-back{grid-area:back;justify-self:start;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ck-brown-deep);
  background:var(--ck-gold-bright);border:1px solid var(--ck-gold-bright);border-radius:100px;padding:9px 17px 9px 12px;transition:.18s ease}
.rg-back svg{width:16px;height:16px}
.rg-back:hover{background:var(--ck-gold);border-color:var(--ck-gold);color:var(--ck-cream)}
.rg-back:hover svg{transform:translateX(-2px);transition:transform .18s ease}

.rg-hero .eyebrow{display:inline-block;margin-bottom:12px}
.rg-hero__title{font-family:var(--font-head);font-weight:700;color:var(--ck-brown-deep);
  font-size:clamp(30px,5vw,52px);line-height:1.06;letter-spacing:-.03em;margin:0 0 14px}
.rg-hero__lede{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--ck-brown);margin:0;max-width:640px}

/* ---------- product filter DROPDOWN — right column, bottom aligned ---------- */
.rg-hero__pick{grid-area:pick;justify-self:end;text-align:right}
.rg-hero__picklabel{display:block;font-family:var(--font-head);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ck-brown-mid);margin-bottom:9px}
.rg-select{position:relative;width:min(320px,60vw);margin-left:auto;text-align:left}
.rg-select__btn{width:100%;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ck-brown-deep);
  background:#fff;border:1.5px solid var(--ck-line-strong);border-radius:14px;padding:8px 14px 8px 8px;transition:.18s ease}
.rg-select__btn:hover{border-color:var(--ck-gold)}
.rg-select.is-open .rg-select__btn{border-color:var(--ck-gold);box-shadow:0 0 0 4px var(--ck-cream-2)}
.rg-select__thumb{width:40px;height:40px;border-radius:10px;object-fit:contain;background:var(--ck-cream-2);padding:4px;flex:none}
.rg-select__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-select__caret{width:12px;height:8px;flex:none;color:var(--ck-brown-mid);transition:transform .2s}
.rg-select.is-open .rg-select__caret{transform:rotate(180deg)}
.rg-select__menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--ck-line);border-radius:14px;box-shadow:var(--ck-shadow);
  max-height:334px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s ease}
.rg-select.is-open .rg-select__menu{opacity:1;visibility:visible;transform:translateY(0)}
.rg-select__opt{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:500;font-size:15px;color:var(--ck-brown);
  background:none;border:0;border-radius:10px;padding:8px 10px;transition:.12s}
.rg-select__opt img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:var(--ck-cream-2);padding:3px;flex:none}
.rg-select__opt:hover{background:var(--ck-cream-2);color:var(--ck-brown-deep)}
.rg-select__opt.is-active{background:var(--ck-brown-deep);color:#fff}
.rg-select__opt.is-active img{background:rgba(255,255,255,.16)}

/* ============================================================
   RECIPE — cookbook spread
   ============================================================ */
.rg-recipe{padding:clamp(34px,5vw,60px) 0 clamp(40px,6vw,72px);background:var(--ck-cream)}
.rg-recipe__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}

/* bottom-aligned, not centred: the photo box is shorter than the text column, and
   landing its lower edge on the last row of the stats block is what squares the
   two columns off against each other. The slack is taken at the top instead. */
.rg-media{margin:0;align-self:end}
/* The box is sized from its own width, never from the grid row. Filling the row
   instead looks right only near 1440px: by 1100px the column is ~517 wide against
   a ~620 tall row, which turns this into a portrait frame around a landscape dish.
   1.15/1 is a touch squarer than the old 4/3, which — with the wider column —
   is what makes the box bigger while keeping it landscape at every width. */
.rg-media__stage{position:relative;aspect-ratio:1.15/1;border-radius:18px;
  background:radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--ck-cream-2) 75%);
  border:1px solid var(--ck-line);display:flex;align-items:center;justify-content:center;
  padding:5% 6%;overflow:hidden}
.rg-media__dish{max-width:94%;max-height:94%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 28px 34px rgba(46,33,18,.24));transition:opacity .4s ease,transform .5s ease}
.rg-media__pack{position:absolute;right:5%;bottom:5%;width:26%;max-width:150px;height:auto;
  object-fit:contain;filter:drop-shadow(0 14px 20px rgba(46,33,18,.3));
  transition:opacity .4s ease,transform .5s ease}
.rg-recipe.is-swapping .rg-media__dish,.rg-recipe.is-swapping .rg-media__pack{opacity:0}

.rg-intro__type{display:inline-block;margin-bottom:12px;color:var(--ck-gold)}
.rg-intro__title{font-family:var(--font-head);font-weight:700;color:var(--ck-brown-deep);
  font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0}
.rg-intro__rule{width:56px;height:3px;border-radius:3px;background:var(--ck-gold);margin:18px 0 18px}
.rg-intro__desc{font-size:16px;line-height:1.75;color:var(--ck-brown);margin:0 0 26px;max-width:520px}

/* stat icons row */
/* The inner rules are the 1px gap showing the line colour through, not cell
   borders. A method row is hidden when its product has no time for it, and
   nth-child border rules would still count the hidden cells and draw the
   wrong edges; a gap only ever sits between cells that are actually there. */
.rg-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  border:1px solid var(--ck-line);border-radius:14px;overflow:hidden;background:var(--ck-line)}
/* the icon / value / label stack sits centred in its cell, so a value that
   wraps to two lines keeps the same tight rhythm as the single-line ones
   instead of stretching the gaps apart */
.rg-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;padding:18px 10px;background:var(--ck-paper)}
.rg-stat[hidden]{display:none}
.rg-stat__ic{width:26px;height:26px;fill:none;stroke:var(--ck-gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* a method like "Boil + Toss" draws one icon per step, side by side, each
   at the same 26px as a single icon elsewhere in the grid */
.rg-stat__icons{display:flex;align-items:center;gap:7px}
.rg-stat__val{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ck-brown-deep);line-height:1.1}
.rg-stat__lbl{font-family:var(--font-head);font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ck-brown-mid)}

/* ---------- ingredients / method / spec ---------- */
.rg-detail{display:grid;grid-template-columns:1fr 1fr .9fr;gap:clamp(28px,4vw,56px);
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--ck-line)}
.rg-detail__h{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ck-brown-deep);margin:0 0 20px;padding-bottom:12px;
  border-bottom:2px solid var(--ck-gold);display:inline-block}

.rg-ing__group{margin-bottom:20px}
.rg-ing__group:last-child{margin-bottom:0}
.rg-ing__label{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;
  font-size:14px;color:var(--ck-brown-deep);margin:0 0 6px}
.rg-ing__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ck-gold);flex:none}
.rg-ing__items{margin:0;font-size:14.5px;line-height:1.7;color:var(--ck-brown)}

.rg-method{margin:0;padding:0;list-style:none;counter-reset:step}
.rg-method li{position:relative;counter-increment:step;padding:0 0 18px 44px;font-size:15px;
  line-height:1.65;color:var(--ck-brown)}
.rg-method li::before{content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--ck-brown-deep);color:var(--ck-on-dark);font-family:var(--font-head);font-weight:600;font-size:14px}
.rg-method li:not(:last-child)::after{content:"";position:absolute;left:15px;top:30px;bottom:6px;
  width:1px;background:var(--ck-line-strong)}

.rg-spec{margin:0}
.rg-spec div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--ck-line)}
.rg-spec div:first-child{padding-top:0}
.rg-spec dt{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ck-gold)}
.rg-spec dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ck-brown-deep)}

/* ============================================================
   VIDEO — dark brown band
   ============================================================ */
.rg-video{position:relative;overflow:hidden;background:var(--ck-brown-deep);padding:clamp(48px,7vw,84px) 0}
.rg-video__inner{position:relative;z-index:2}
.rg-video__decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.rg-video__burst{position:absolute;top:-56px;left:-52px;width:200px;height:auto;opacity:.3;
  animation:rg-spin 26s linear infinite}
@keyframes rg-spin{to{transform:rotate(360deg)}}
.rg-video__head{text-align:center;max-width:640px;margin:0 auto clamp(26px,3vw,38px)}
.rg-video__head .eyebrow{color:var(--ck-gold-soft);display:inline-block;margin-bottom:10px}
.rg-video__title{font-family:var(--font-head);font-weight:700;color:var(--ck-cream);
  font-size:clamp(24px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0}
.rg-video__frame{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;
  overflow:hidden;background:#000;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.rg-video__frame video,.rg-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rg-video__frame video{object-fit:cover}
.rg-video__poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:
    radial-gradient(120% 120% at 50% 0%, var(--ck-brown-mid) 0%, var(--ck-brown-deep) 70%)}
.rg-video__poster img{width:min(48%,240px);height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.rg-video__soon{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.06em;
  color:var(--ck-on-dark);display:inline-flex;align-items:center;gap:8px}
.rg-video__soon::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ck-gold-bright)}

/* ============================================================
   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}
}
@media (max-width:920px){
  .rg-recipe__grid{grid-template-columns:1fr;gap:28px}
  .rg-media__stage{aspect-ratio:4/3}
  .rg-detail{grid-template-columns:1fr 1fr}
  .rg-detail__col--spec{grid-column:1 / -1}
  .rg-spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
  /* hero collapses to one column: text → picker → back */
  .rg-hero__grid{grid-template-columns:1fr;grid-template-areas:"text" "pick" "back";
    align-items:stretch;row-gap:clamp(16px,3vw,24px)}
  .rg-hero__text{max-width:none}
  .rg-hero__pick{justify-self:stretch;text-align:left}
  .rg-select{width:100%;max-width:none;margin-left:0}
}
@media (max-width:720px){
  :root{--pad:18px}
  /* the method steps and the storage note carry deliberate <br class="brk">
     breaks; a phone column is too narrow to honour them, so let the copy
     wrap on its own there */
  .brk{display:none}
  .foot__grid{grid-template-columns:1fr;gap:28px}
  .foot__bar{flex-direction:column;gap:8px}
}
@media (max-width:640px){
  .rg-detail{grid-template-columns:1fr;gap:32px}
  .rg-spec{grid-template-columns:1fr}
  .rg-media__stage{aspect-ratio:1/1}
  .rg-select{width:100%}
  .rg-video__burst{width:132px;top:-34px;left:-34px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .rg-media__dish,.rg-media__pack{transition:none}
  .rg-video__burst{animation:none}
}