/* ============================================================
   Cho's Kitchen — Option 3 (merged: Option 2 base + Option 1 sections)
   Fonts: DM Sans (head) + Roboto (body)
   Palette: kumera (brown) + goldenrod / antique gold, cream — Option 2 tokens,
            reused across every ported Option 1 section so colours stay unified.
   Note:   every font-size is an EVEN number (clamp min/max even).
   ============================================================ */

:root{
  /* gold */
  --ck-gold:#C9A227;         /* antique gold — fine rules, accents, hover */
  --ck-gold-bright:#E3A50E;  /* goldenrod — button fills / highlights */
  --ck-gold-soft:#DBB372;    /* soft tan-gold — accents on dark */
  --ck-gold-frame:#D9AE3C;   /* bright refined gold — Thai corner frame, map highlight */
  /* brown */
  --ck-brown:#4D371A;        /* body text */
  --ck-brown-deep:#2E2112;   /* headings / dark sections */
  --ck-brown-mid:#674921;    /* secondary brown */
  /* surfaces */
  --ck-cream:#FCF5E3;        /* page background (warm paper) */
  --ck-cream-2:#F5E9CC;      /* alt band */
  --ck-on-dark:#F3E7C8;      /* text on brown */
  --ck-green:#87A943;        /* faint accent only */
  /* 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 */
  --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)}
.eyebrow--green{color:var(--ck-green)}

/* thin gold hairline */
.rule{display:inline-block;width:54px;height:1px;background:var(--ck-gold);
  opacity:.85;vertical-align:middle}

/* ---------- buttons ---------- */
.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)}
/* Option 1 recipe/heritage "read more" links reuse this pill shape */
.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  (Option 2 colours — same class hooks as both source options
   so js/script.js works unmodified)
   ============================================================ */
.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)}
.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)}

/* center the menu in the page; logo stays left, language switch stays right */
.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{display:inline-flex;align-items:center;gap:5px;
  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;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;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{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 — full-bleed image + elegant caption (Option 2)
   ============================================================ */
.hero2{position:relative;height:calc(100vh - var(--nav-h));min-height:540px;
  overflow:hidden;background:var(--ck-brown-deep)}
.hero2__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 70%;transform:scale(1.16);transform-origin:58% 72%}

/* --- regional hero slideshow (chos-kitchen) --------------------------------
   The hero keeps its original full-viewport height. Each regional frame is
   finished artwork rather than a backdrop, so the slides are shown flat
   instead of zoom-cropped like the single hero above, and the crop leans
   right to hold on to the region label burnt into that corner. */
.hero2__slides{position:absolute;inset:0;z-index:0}
.hero2--slider .hero2__bg{object-position:62% center;transform:none;
  opacity:0;transition:opacity 1s ease}
.hero2--slider .hero2__bg.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hero2--slider .hero2__bg{transition:none}
}
.hero2__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(30,20,10,.86) 0%,rgba(30,20,10,.5) 34%,rgba(30,20,10,.08) 58%,rgba(46,33,18,0) 78%)}

/* breadcrumb — overlaid top-left inside the hero, gold text
   (same font / position / padding / sizing as recipe.html's .crumbs__inner) */
.hero2__crumbs{position:absolute;top:0;left:0;right:0;z-index:3}
.hero2__crumbs-inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:var(--font-head);font-size:14px;white-space:nowrap;overflow:hidden;
  text-shadow:0 1px 10px rgba(46,33,18,.6)}
.hero2__crumbs-inner a{color:rgba(255,255,255,.9);font-weight:500;flex:none;transition:.15s}
.hero2__crumbs-inner a:hover{color:#fff}
.hero2__crumbs-sep{color:rgba(255,255,255,.5);flex:none}
.hero2__crumbs-current{color:var(--ck-gold-bright);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.hero2__caption{position:absolute;z-index:2;inset:0;text-align:left;padding:0 var(--pad);color:var(--ck-on-dark);
  max-width:var(--wrap);margin:0 auto;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero2__logo{height:clamp(56px,7vw,84px);width:auto;margin-bottom:22px;
  border-radius:999px;box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.hero2__eyebrow{display:block;font-family:var(--font-head);font-weight:500;font-size:14px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ck-gold-soft);margin-bottom:18px}
.hero2__rules{display:flex;align-items:center;gap:18px}
.hero2__rules span{width:46px;height:1px;background:var(--ck-gold-soft);opacity:.8}
.hero2__tag{font-family:var(--font-head);font-weight:600;
  font-size:clamp(30px,5vw,60px);letter-spacing:.01em;line-height:1.08;margin:18px 0 0;
  color:var(--ck-on-dark);text-shadow:0 2px 20px rgba(46,33,18,.6)}
.hero2__gold{color:var(--ck-gold-bright)}
.hero2__cta{margin-top:30px;border-radius:999px;padding:14px 34px;
  background:var(--ck-cream-2);color:var(--ck-brown-deep);
  border:1px solid var(--ck-cream-2);box-shadow:0 10px 24px -10px rgba(46,33,18,.4)}
.hero2__cta:hover{background:var(--ck-gold-bright);border-color:var(--ck-gold-bright);color:var(--ck-brown-deep)}
.hero2__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ck-gold-soft)}
.hero2__scroll svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  animation:ck-bob 1.8s ease-in-out infinite}
@keyframes ck-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============================================================
   PRODUCTS — white band, pack + prepared bowl (Option 2)
   ============================================================ */
.products2{padding:90px 0 88px;background:#fff;color:var(--ck-brown-deep);position:relative;overflow:hidden}
.products2__frame{position:absolute;inset:0;z-index:0;pointer-events:none}
/* The four corners are one artwork (element.png) sliced by background-position,
   and its own colours differ between the top and bottom halves. Painting it as
   a MASK instead of an image drops the file's colour entirely and takes the
   fill from background-color, so all four corners land on exactly the same
   refined gold — brighter than the antique --ck-gold, and pulled back from the
   orange-yellow of --ck-gold-bright. */
.pcorner{position:absolute;width:clamp(240px,34vw,460px);aspect-ratio:1;
  background:var(--ck-gold-frame);
  -webkit-mask:url("../assets/images/element.webp") no-repeat;
  mask:url("../assets/images/element.webp") no-repeat;
  -webkit-mask-size:357% 357%;mask-size:357% 357%}
.pcorner--tl{top:0;left:0;-webkit-mask-position:0% 0%;mask-position:0% 0%}
.pcorner--tr{top:0;right:0;-webkit-mask-position:100% 0%;mask-position:100% 0%}
.pcorner--bl{bottom:0;left:0;-webkit-mask-position:0% 100%;mask-position:0% 100%}
.pcorner--br{bottom:0;right:0;-webkit-mask-position:100% 100%;mask-position:100% 100%}
.products2__head,.products2__viewport{position:relative;z-index:1}
.products2__head{text-align:center;max-width:860px;margin:0 auto 40px}
.products2__head .eyebrow{display:inline-block;margin-bottom:14px;color:var(--ck-gold)}
.products2__title{font-family:var(--font-head);font-weight:500;
  font-size:clamp(28px,3vw,46px);color:var(--ck-brown-deep);margin:0 0 12px;
  letter-spacing:-.005em;line-height:1.2}
.products2__lede{font-size:16px;color:var(--ck-brown-mid);margin:0 auto;line-height:1.7;white-space:nowrap}

.products2__viewport{position:relative}
/* soft white fade at the left/right edges of the CAROUSEL track itself
   (the centred, max-width:var(--wrap) row) — not the page/body edges —
   so cut-off cards blend out right where they actually get clipped */
.products2__viewport::before,.products2__viewport::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(56px,9vw,160px);z-index:3;pointer-events:none}
.products2__viewport::before{left:max(0px, calc(50% - (var(--wrap) / 2)));
  background:linear-gradient(90deg,#fff 8%,rgba(255,255,255,0))}
.products2__viewport::after{right:max(0px, calc(50% - (var(--wrap) / 2)));
  background:linear-gradient(270deg,#fff 8%,rgba(255,255,255,0))}

.products2__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:999px;background:var(--ck-gold-bright);
  border:1px solid var(--ck-gold-bright);color:var(--ck-brown-deep);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s ease;
  box-shadow:0 12px 28px -12px rgba(46,33,18,.4)}
/* 40px gap between the button and the carousel track's own edge — the
   button's own 52px width has to be subtracted too, else it overlaps in */
.products2__arrow--prev{left:max(8px, calc(50% - (var(--wrap) / 2) - 40px - 52px))}
.products2__arrow--next{right:max(8px, calc(50% - (var(--wrap) / 2) - 40px - 52px))}
.products2__arrow:hover{background:var(--ck-brown-deep);color:var(--ck-gold-soft);border-color:var(--ck-brown-deep)}
.products2__arrow:disabled{opacity:.3;cursor:default;background:var(--ck-gold-bright);color:var(--ck-brown-deep);border-color:var(--ck-gold-bright);box-shadow:none}
.products2__arrow svg{width:18px;height:18px}

.products2__row{max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:nowrap;gap:44px;overflow-x:auto;overflow-y:hidden;
  padding:300px 0 10px;cursor:grab;
  -webkit-user-select:none;user-select:none;touch-action:pan-x;
  scrollbar-width:none;overscroll-behavior-x:contain}
.products2__row::-webkit-scrollbar{display:none;height:0}
.products2__row.is-grabbing{cursor:grabbing}

/* card sized so ONE product sits centred with neighbours peeking evenly
   on both sides (not a lopsided partial crop) */
.prod{flex:0 0 clamp(300px,60%,620px);display:flex}
.prod__frame{position:relative;width:100%;background:#FBEEC6;border:0;
  border-radius:22px;padding:148px 30px 34px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:box-shadow .3s ease,transform .3s ease}
.prod:hover .prod__frame{box-shadow:var(--ck-shadow);transform:translateY(-4px)}
.prod__media{position:relative;width:100%;height:400px;
  margin-top:-494px;margin-bottom:8px;
  display:flex;align-items:flex-end;justify-content:center}
.prod__media img{object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 26px 34px rgba(46,33,18,.28)) drop-shadow(0 8px 14px rgba(46,33,18,.16));
  transition:transform .5s ease}
/* width-driven with height:auto (not a fixed height) — every pack photo is actually a
   landscape shot (~1.3:1), so forcing a tall fixed height just letterboxed empty space
   above/below it. max-height is only a safety cap in case a future image is portrait. */
.prod__pack{width:74%;height:auto;max-height:400px;position:relative;z-index:1}
/* single-image cards (no separate bowl cutout) — let the pack use more width
   since it isn't sharing the frame with an overlapping bowl photo */
.prod--single .prod__pack{width:90%}
.prod__bowl{height:255px;max-width:56%;margin-left:-112px;position:relative;z-index:2}
.prod:hover .prod__pack{transform:translateY(-6px) scale(1.03)}
.prod:hover .prod__bowl{transform:translateY(-6px) rotate(-2deg)}
.prod--placeholder .prod__media{height:400px}

.prod__body{display:flex;flex-direction:column;align-items:center;gap:8px}
.prod__tag{font-family:var(--font-head);font-weight:500;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ck-gold);
  padding:6px 14px;border:1px solid var(--ck-gold-line);border-radius:999px}
.prod__name{font-family:var(--font-head);font-weight:500;font-size:28px;
  color:var(--ck-brown-deep);margin:0;letter-spacing:-.005em}
.prod__sub{font-size:13px;color:var(--ck-brown-mid);margin:0 0 8px;letter-spacing:.02em}
.prod__cta{margin-top:14px;background:var(--ck-gold-bright);color:var(--ck-brown-deep);
  border-radius:999px;padding:14px 28px;border:1px solid var(--ck-gold-bright);
  box-shadow:0 10px 24px -8px rgba(46,33,18,.28)}
.prod__cta:hover{background:var(--ck-brown-deep);color:#fff;border-color:var(--ck-brown-deep)}

/* ============================================================
   RECIPE — feature card (ported from Option 1, recoloured to
   Option 2 tokens: green-deep accents -> gold)
   ============================================================ */
.recipe{background:var(--ck-cream);padding:36px 0 clamp(40px,5vw,60px)}
.recipe__head{text-align:center;margin:0 auto clamp(14px,2vw,22px)}
.recipe__head .eyebrow{display:block;margin-bottom:6px}
.recipe__title{font-family:var(--font-head);font-weight:500;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}
.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 ---- */
/* JS locks .rec's height to match the expanded variant exactly (see
   applyMatchedHeight) — height:100% here lets this row fill that same
   locked height, and the image stretches the full height to match */
.rec__preview{display:grid;grid-template-columns:1fr 1fr;height:100%}
/* grid items default to min-width:auto, so unwrappable content (the nowrap
   dish name) would otherwise force its track wider than a true 1fr share,
   throwing off the 50/50 split — min-width:0 keeps the columns honest */
.rec__previewMedia,.rec__previewBody{min-width:0}
.rec__previewMedia{height:100%;overflow:hidden}
.rec__previewMedia img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.rec__previewBody{display:flex;flex-direction:column;padding:30px 34px}
.rec__preview .rec__desc{margin-top:10px}
/* sneak peek — hints that ingredients/method are one click away */
.rec__peek{display:flex;gap:14px;margin-top:26px}
.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}
/* same min-width:0 fix as the preview state's grid items, see above */
.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; label
   and the round gold arrow button are grouped together on the right. It
   always sits at the bottom of its column, in both states, via
   margin-top:auto — same position in the preview and the expanded 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}
/* side-by-side is the more compact option overall (stacking the two lists
   full-width is taller even though nothing wraps) — a slightly smaller,
   tighter list style keeps the longer ingredient lines from wrapping much */
.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 now (swapped with the
   toggle bar, which moved to the bottom to match the preview card) —
   button flush against the column's right edge */
.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 — 5 clickable product thumbnails between the
   Recipe header and the two featured recipe cards
   ============================================================ */
.recipe__picker{max-width:var(--wrap);margin:0 auto 40px}
.recipe__pickerline{display:block;width:100%;height:auto;opacity:.95;pointer-events:none}
/* the pendant motif points OUTWARD, away from the product row, on both
   sides — the thin gold line is the actual boundary sitting next to the
   row, so each image is flipped relative to its natural (pendant-hangs-
   down) orientation exactly opposite of what you'd first guess */
.recipe__pickerline--top{margin-bottom:-8px;transform:scaleY(-1)}
.recipe__pickerline--bottom{margin-top:-8px}

/* capped so only the 5 real packs show at once — the extra buffered clone
   copies used for the seamless auto-loop stay hidden until dragged/scrolled
   into view (without this cap, a wide screen shows every copy at once) */
.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)}

/* ============================================================
   OUR HERITAGE — merged: Option 2's dish-card + vector-map layout,
   with an Option 1-style city photograph behind the map (swapped per
   region), an enlarged gold pin, and a click-to-zoom effect on the map.
   ============================================================ */
.heritage{background:var(--ck-brown-deep) url("../assets/images/sec3.webp") center/cover no-repeat;
  padding:96px 0 100px;position:relative;overflow:hidden}
.heritage__head,.heritage__layout{position:relative;z-index:1}
.heritage__head{text-align:center;max-width:720px;margin:0 auto 44px}
.heritage__head .eyebrow{display:inline-block;margin-bottom:14px;color:var(--ck-gold-soft)}
.heritage__title{font-family:var(--font-head);font-weight:500;
  font-size:clamp(28px,3vw,46px);color:var(--ck-on-dark);margin:0 0 12px;
  letter-spacing:-.005em;line-height:1.2}
.heritage__lede{font-size:16px;color:rgba(243,231,200,.82);margin:0 auto;line-height:1.7;max-width:560px}

/* AUTHORED LINE — body copy written line by line, so the phrasing breaks where
   the brand voice intends rather than wherever the column runs out. Each line is
   kept short enough to fit its column whole; `balance` is the safety net if a
   future edit runs one long. Collapses to a flowing paragraph on phones (see the
   720px block) where no column is wide enough to hold an authored line.
   Duplicated from styles.css — this page doesn't load it. */
.ln{display:block;text-wrap:balance}

.heritage__layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch;
  width:100%;margin:0 auto}

/* LEFT — dish cards, outlined boxes, image on top (no shadow)
   flex-wrap (not grid), left-aligned so an incomplete last row (e.g. 2+2+1) reads as room
   to add more cards rather than a centered, "finished" arrangement. align-items:stretch on
   the layout grid above makes this column match the map card's height; space-between spreads
   the rows to fill that height evenly instead of leaving a gap underneath. */
.heritage__cards{display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;gap:18px}
.hcard{flex:0 1 calc((100% - 18px) / 2);display:flex;flex-direction:column;text-align:center;cursor:pointer;
  padding:18px 18px 20px;border-radius:10px;background:var(--ck-cream);
  border:1.5px solid var(--ck-gold-line);transition:border-color .2s ease,box-shadow .2s ease;font-family:inherit}
.hcard:hover{border-color:var(--ck-gold)}
.hcard.is-active{background:var(--ck-gold-frame);border-color:var(--ck-gold-frame)}
.hcard.is-active .hcard__dish,.hcard.is-active .hcard__region{color:var(--ck-brown-deep)}
.hcard__img{width:100%;aspect-ratio:4/3;border-radius:0;overflow:hidden;
  background:var(--ck-cream-2);margin-bottom:12px}
.hcard__img img{width:100%;height:100%;object-fit:cover}
.hcard__meta{display:flex;flex-direction:column;gap:3px}
.hcard__dish{order:1;font-family:var(--font-head);font-weight:500;font-size:clamp(16px,1.5vw,20px);
  color:var(--ck-brown-deep);line-height:1.25}
.hcard__region{order:2;font-family:var(--font-head);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ck-gold)}

/* RIGHT — map card + linked description below (outlined, no shadow)
   card is a flex column so the map (flex:1) absorbs any extra height picked up from
   align-items:stretch on the layout grid, instead of leaving dead space below the description */
.heritage__card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;
  background:var(--ck-cream-2);border:1.5px solid var(--ck-gold-line)}
.heritage__map{position:relative;flex:1 1 auto;height:clamp(280px,34vw,460px);
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:radial-gradient(120% 120% at 50% 8%,#F1E6CE 0%,#E6D5B4 100%);
  overflow:hidden}
.heritage__map.is-failed::after{content:"Map unavailable";color:var(--ck-brown-mid);
  font-family:var(--font-head);font-size:14px}

/* city photograph behind the vector map — swapped per selected region;
   kept sharp/clear, with a gradient wash that fades in toward the top only */
.heritage__citybg{position:absolute;inset:0;z-index:0}
.heritage__citybg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:saturate(1.15) contrast(1.05);
  transition:opacity 1s ease,transform 1.4s cubic-bezier(.22,.9,.32,1);
  transform:scale(1.06)}
.heritage__citybg img.is-active{opacity:.82}
.heritage__citybg img.is-active.is-zoomed{transform:scale(1.16)}
/* light cream wash, only near the top edge — keeps the photo clear/sharp
   through the rest of the box while still letting the map read cleanly */
.heritage__map::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(230,213,180,.1) 0%,rgba(230,213,180,.22) 40%,rgba(241,230,206,.92) 100%)}

.heritage__mapsvg{position:relative;z-index:2;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center}
.heritage__svg{height:100%;width:auto;max-width:100%;display:block;
  transform:scale(1);transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.22,.9,.32,1)}
.heritage__svg.is-zoomed{transform:scale(1.6)}
/* enlarged, pulsing gold pin so the active region reads clearly on the map */
.heritage__pin{filter:drop-shadow(0 8px 12px rgba(46,33,18,.5))}
.heritage__pin__halo{fill:var(--ck-gold-bright);opacity:.35;transform-box:fill-box;
  transform-origin:center;animation:ck-pin-pulse 1.8s ease-out infinite}
@keyframes ck-pin-pulse{
  0%{transform:scale(.7);opacity:.5}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
/* watercolour brown mood — base regions tan, active region deep brown */
.heritage__svg > g:first-of-type{display:none}          /* hide the flag badge */
.heritage__svg .st1{fill:#E0CDA6;stroke:var(--ck-cream);stroke-width:1.4;
  transition:fill .35s ease}
/* the selected region now carries the same bright gold as the card that
   selected it, so the two read as one highlight */
.heritage__svg .st1.is-hot{fill:var(--ck-gold-frame)}
/* region labels — the SVG ships with Lato baked into its own <style>, which
   the site never loads, so the labels fell back to a system face. Pin them to
   the site's display font instead; Medium holds up over the beige map. */
.heritage__svg .st3{fill:#7A6440;font-size:22px;
  font-family:var(--font-head);font-weight:500}    /* region labels */

.heritage__band{background:var(--ck-brown-deep);color:var(--ck-on-dark);text-align:center;padding:18px 24px}
.heritage__band h3{font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2.2vw,28px);
  margin:0;letter-spacing:.01em}
.heritage__body{padding:26px 34px 32px;text-align:center}
.heritage__body p{font-size:15px;color:var(--ck-brown);line-height:1.7;margin:0 auto 22px;max-width:460px}
.heritage__more{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:500;font-size:15px;letter-spacing:.02em;
  padding:12px 34px;border-radius:999px;border:1px solid var(--ck-brown-deep);
  color:var(--ck-brown-deep);background:transparent;transition:.18s ease}
.heritage__more:hover{background:var(--ck-brown-deep);color:var(--ck-cream)}

/* ============================================================
   OUR BRAND · CHO'S KITCHEN — abstract ribbon reveals the
   wall-pillar art (Option 2)
   ============================================================ */
.supercook{position:relative;background:var(--ck-cream);overflow:hidden;
  min-height:clamp(440px,60vh,620px);display:flex;align-items:center}
.supercook__art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.supercook__ribbon{filter:drop-shadow(0 22px 44px rgba(46,33,18,.2))}
.supercook::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;
  pointer-events:none;background:linear-gradient(180deg,
    rgba(252,245,227,0) 0%,rgba(252,245,227,.86) 50%,var(--ck-cream) 84%)}
.supercook__copy{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad);text-align:left}
.supercook__copy .eyebrow{display:inline-block;margin-bottom:20px;color:var(--ck-gold)}
.supercook__title{font-family:var(--font-head);font-weight:500;
  font-size:clamp(34px,5vw,66px);color:var(--ck-brown-deep);
  line-height:1.06;letter-spacing:-.01em;margin:0}
.supercook__sub{font-family:var(--font-body);font-size:clamp(16px,1.6vw,20px);
  color:var(--ck-brown);margin:18px 0 0;max-width:520px;line-height:1.6}
.supercook__desc{font-family:var(--font-body);font-size:clamp(13px,1.1vw,15px);
  color:var(--ck-brown-mid);margin:12px 0 0;max-width:480px;line-height:1.7}
.supercook__mobimg{display:none}

/* ============================================================
   OUR BRAND — Bagan sunrise, text (ported from Option 1, recoloured)
   ============================================================ */
.brandintro{position:relative;overflow:hidden;background:var(--ck-cream);
  padding:clamp(64px,8vw,108px) 0 clamp(132px,17vw,212px)}
.brandintro--strip{padding:clamp(28px,4vw,48px) 0 clamp(132px,17vw,212px)}
.brandintro::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(82px,11vw,150px);pointer-events:none;opacity:.9;
  background:url('../assets/images/yangon_art.png') repeat-x bottom center;
  background-size:auto 100%}
.brandintro__inner{max-width:1080px;margin:0 auto;position:relative}
.brandintro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);
  align-items:center}
.brandintro__copy{text-align:left}
.brandintro__eyebrow{display:block;margin-bottom:14px;font-family:var(--font-head);font-weight:500;
  font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--ck-gold)}
.brandintro__title{font-family:var(--font-head);font-weight:700;color:var(--ck-brown-deep);
  font-size:clamp(30px,4.4vw,50px);margin:0;line-height:1.08}
.brandintro__rule{width:64px;height:2px;background:var(--ck-gold);border:0;margin:20px 0 26px}
.brandintro__copy p{margin:0 0 16px;font-size:16px;line-height:1.8;color:var(--ck-brown)}
.brandintro__copy p:last-child{margin-bottom:0}
.brandintro__media{display:block}
.brandintro__media img{width:100%;height:clamp(300px,34vw,440px);object-fit:cover;object-position:center;
  border-radius:16px;display:block}

/* ============================================================
   PRODUCT CATEGORIES — capsule cards over the Myanmar relief
   carving (ported from Option 1, placed last before the footer)
   ============================================================ */
/* this page keeps the categories band to exactly one screen. The landscape cards
   that replaced the portrait ones are shorter, so the section is centred inside
   the screen rather than padded out to it — the 1-screen rule holds at any
   viewport height instead of only at the one the old fixed heights suited. */
.cats2{position:relative;background:#1B0F08 url('../assets/images/sec3.webp') center/cover no-repeat;
  padding:clamp(56px,7vw,88px) 0 clamp(64px,8vw,96px);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.cats2__head{max-width:640px;margin:0 auto 20px;text-align:center}
.cats2__head .eyebrow{display:block;margin-bottom:10px}
.cats2__title{font-family:var(--font-head);font-weight:700;color:var(--ck-cream);
  font-size:clamp(26px,3.6vw,40px);margin:0 0 12px;line-height:1.12}
.cats2__lede{margin:0;font-size:16px;line-height:1.7;color:rgba(255,246,222,.82)}

.cats2__viewport{position:relative;max-width:min(1100px,var(--wrap));margin:0 auto;padding:0 var(--pad)}
.cats2__arrow{position:absolute;top:42%;z-index:5;width:46px;height:46px;border-radius:50%;
  border:none;background:rgba(255,246,222,.88);color:var(--ck-brown-deep);cursor:pointer;
  display:grid;place-items:center;transition:.18s ease;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.cats2__arrow:hover{background:#fff;transform:scale(1.06)}
.cats2__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cats2__arrow--prev{left:-6px}
.cats2__arrow--next{right:-6px}
.cats2__arrow:disabled{opacity:.32;pointer-events:none}

.cats2__row{display:flex;align-items:stretch;gap:94px;overflow-x:auto;height:432px;
  padding:56px 8px 12px;scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;touch-action:pan-x;
  /* fades the cards themselves to transparent at the edges — reveals the section's own
     background exactly as-is underneath, instead of overlaying an approximated colour */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,5vw,70px),
    #000 calc(100% - clamp(28px,5vw,70px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,5vw,70px),
    #000 calc(100% - clamp(28px,5vw,70px)),transparent 100%)}
.cats2__row::-webkit-scrollbar{display:none}
.cats2__row.is-grabbing{cursor:grabbing}

/* Ingredient cards are LANDSCAPE. cho-frame.png is a 3508x2480 canvas but its
   gold artwork only fills 3282x1353 of it — 23% of the canvas height is empty
   above and below — so a pill cut to the CANVAS ratio (1.415) showed a frame
   barely half the height of its own box and left a dead gap above the caption.
   The pill is now cut to the ARTWORK ratio (2.4257) and the frame <img> is
   oversized by the canvas/artwork factor in JS so the gold lands exactly on the
   pill edges. Base width 300 -> 440 takes the visible frame from 281x116 to
   440x181, and CAP_STRETCH in the page script then pulls it taller still so the
   photo window shows more of the dish. */
.cap{flex:none;width:440px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  scroll-snap-align:center;text-align:center}
.cap__pill{position:relative;flex:none;width:440px;height:214px;overflow:hidden;
  will-change:width,height}
/* photo's left/top/width/height are set in JS (see relief()/frameWindowInPill), recomputed every
   frame from where cho-frame.png's window actually lands (accounting for object-fit:contain
   letterboxing on the frame) so it lines up with the gold border at any card size. The clip-path
   traces the frame's actual interior silhouette (lens shape with pointed cusps), pixel-measured from
   cho-frame.png and rotated to match .cap__frame below, so the photo fills the opening exactly —
   no gaps at the curved corners, no spill past the gold edge. */
.cap__pill img:not(.cap__frame){position:absolute;object-fit:cover;object-position:center;
  clip-path:polygon(100% 50.16%,96.98% 41.67%,94.15% 27.36%,92.89% 24.69%,90.25% 22.48%,88.67% 16.04%,
    86.09% 11.79%,84.58% 10.85%,64.51% 10.85%,59.66% 4.87%,53.3% 2.99%,50.66% 0%,48.08% 2.99%,
    41.66% 4.87%,36.75% 10.85%,17.24% 10.85%,15.1% 12.11%,12.27% 16.98%,10.89% 22.8%,8.56% 24.06%,
    5.92% 28.62%,2.89% 42.77%,0% 50%,2.64% 56.45%,5.73% 70.91%,7.74% 75%,10.89% 77.36%,12.27% 83.18%,
    14.79% 87.74%,17.24% 89.31%,36.82% 89.31%,41.1% 94.81%,48.14% 97.17%,50.6% 100%,53.3% 97.17%,
    60.54% 94.5%,64.51% 89.31%,84.52% 89.31%,86.09% 88.36%,88.67% 83.96%,90.25% 77.52%,92.76% 75.63%,
    94.21% 72.48%,97.23% 57.39%)}
/* native orientation (no rotate) — the pill is landscape now. The stacked
   zero-blur drop-shadows dilate the artwork by 1px on each side, which is the
   only way to thicken the line weight of a raster frame. */
/* object-fit:FILL, not contain: the frame box is deliberately taller than the
   artwork's native ratio (see CAP_STRETCH) so the opening shows more of the
   photo — fill is what carries that stretch onto the gold work. At
   CAP_STRETCH = 1 the box is the native ratio and fill behaves as contain. */
.cap__pill img.cap__frame{position:absolute;top:50%;left:50%;max-width:none;max-height:none;
  object-fit:fill;pointer-events:none;z-index:2;
  filter:drop-shadow(1px 0 0 var(--ck-gold-frame)) drop-shadow(-1px 0 0 var(--ck-gold-frame))
         drop-shadow(0 1px 0 var(--ck-gold-frame)) drop-shadow(0 -1px 0 var(--ck-gold-frame))}
.cap__caption{flex:none;margin-top:18px}
.cap__num{display:block;font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.14em;color:var(--ck-gold);margin-bottom:4px}
.cap__caption h3{margin:0;font-family:var(--font-head);font-weight:700;font-size:16px;
  color:var(--ck-cream);line-height:1.3}

/* ============================================================
   FOOTER — cream band
   ============================================================ */
.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:980px){
  /* a phone-shaped frame only ever shows a narrow vertical slice of this
     16:9 artwork, so aim it at the bowl — the pack and the region label
     burnt into the right corner fall outside it */
  .hero2--slider .hero2__bg{object-position:44% center}
  .heritage__layout{grid-template-columns:1fr;gap:26px;max-width:560px}
  .recipe__grid{max-width:560px}
  .rec--expanded{grid-template-columns:1fr}
  /* both states stack to one column together at the same breakpoint, so
     there's no awkward width where one is split and the other isn't */
  .rec__preview{grid-template-columns:1fr;height:auto}
  .rec__previewMedia{height:280px}
  .rec__previewBody{padding:24px 26px}
  .brandintro__grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .brandintro__copy{text-align:center}
  .brandintro__rule{margin-left:auto;margin-right:auto}
}
@media (max-width:720px){
  :root{--pad:22px}
  /* authored lines: the column is too narrow to hold one, so each would wrap
     two or three times — flow them back into a normal paragraph instead */
  .ln{display:inline;text-wrap:pretty}
  .foot{padding-top:56px}
  .foot__grid{grid-template-columns:1fr;gap:28px}
  .hero2__veil{background:linear-gradient(120deg,rgba(30,20,10,.82) 0%,rgba(30,20,10,.42) 46%,rgba(30,20,10,.12) 74%,rgba(46,33,18,0) 100%)}
  .hero2__logo{height:48px;margin-bottom:16px}
  .hero2__tag{font-size:clamp(26px,8vw,38px)}
  .hero2__cta{margin-top:22px}
  .hero2__scroll{display:none}

  .products2{padding:64px 0}
  .products2__lede{white-space:normal}
  .prod__frame{padding:131px 22px 30px}
  /* absolute (not negative-margin) so the bursting pack photo floats completely free of the
     tag/name/sub/button block below it — sizing itself never drags that content along with it.
     height matches the frame's own top padding (the "reveal" point where the frame background
     starts showing below the image); align-items:flex-end lets each photo's real height
     overflow upward from there, exactly as far as it naturally needs to. */
  .prod__media{position:absolute;top:0;left:0;right:0;height:131px;margin:0;
    display:flex;align-items:flex-end;justify-content:center}
  .prod__pack{max-height:330px}
  .prod__bowl{height:216px;margin-left:-91px}
  /* padding covers the tallest photo (Shan Noodle, ~194px) overflowing 131px above the frame,
     plus room for its drop-shadow, so nothing clips against the row's own top edge */
  .products2__row{padding-top:100px;gap:26px}
  .products2__arrow{width:44px;height:44px}
  .recipe{padding:56px 0}
  .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}
  /* mobile: stack a clean bowl image over centred text (no overlap, balanced) */
  .supercook{display:block;min-height:0;padding:56px 0 48px}
  .supercook__art,.supercook::after{display:none}
  .supercook__mobimg{display:block;width:min(76%,320px);height:auto;margin:0 auto}
  .supercook__copy{padding:28px var(--pad) 8px;text-align:center}
  .supercook__copy .eyebrow{margin-bottom:14px}
  .supercook__sub{margin-left:auto;margin-right:auto}
  .supercook__desc{margin-left:auto;margin-right:auto}
  .heritage{padding:64px 0 84px}
  .heritage__body{padding:26px 24px 30px}
  .heritage__cards{gap:14px}
  .hcard{flex-basis:calc((100% - 14px) / 2)}
  .heritage__svg.is-zoomed{transform:scale(1.35)}
  .brandintro{padding-bottom:clamp(96px,20vw,150px)}
  .brandintro__media img{height:clamp(200px,44vw,260px)}
  .cats2{padding:44px 0 56px;min-height:auto;display:block}
  .cats2__lede{font-size:15px}
  .cats2__arrow{display:none}
  .cats2__viewport{padding:0 var(--pad)}
  .cats2__row{gap:58px;padding:28px 8px 8px;height:286px}
  .cap{width:268px}
  .cap__pill{width:268px;height:130px}
  .cap__caption h3{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .hero2__scroll svg{animation:none}
  .heritage__pin__halo{animation:none}
}