/* Our Food (rebuilt from lamskitchen.co SPPB page 10): intro, then the Noodles / Chicken / Soups sections, all in
   live text (the old page had their words baked into images). */

/* ---------- Intro: Our Food, Food With Purpose, sketch ---------- */
/* Menu cue: a bar pinned to the foot of the screen on arrival (shortcuts to the three sections and a bobbing arrow),
   so the page reads as scrollable at any screen size; our-food.js fades it out once the visitor scrolls. */
.lk-food__jump {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--lk-card-line);
  border-radius: 999px;
  background: rgba(255, 250, 243, .94);
  box-shadow: 0 10px 28px rgba(117, 69, 36, .22);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .25s ease, visibility .25s;
}
.lk-food__jump.is-hidden { opacity: 0; visibility: hidden; }
.lk-food__jump-label { font-family: var(--lk-serif); font-size: 20px; font-style: italic; font-weight: 500; color: var(--lk-terracotta); }
.lk-food__jump ul { display: flex; gap: 8px; }
.lk-food__jump li a {
  display: block;
  padding: 7px 16px;
  border: 1.5px solid var(--lk-terracotta);
  border-radius: 999px;
  color: var(--lk-brown);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lk-food__jump li a:hover { background: var(--lk-terracotta); color: #fff; }
.lk-food__jump-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lk-brown);
  color: var(--lk-cream);
  animation: lk-food-bob 1.6s ease-in-out infinite;
}
.lk-food__jump-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lk-food-bob { 50% { transform: translateY(4px); } }
@media (max-width: 575.98px) {
  .lk-food__jump { bottom: 14px; gap: 10px; padding-left: 8px; }
  .lk-food__jump-label { display: none; }
  .lk-food__jump li a { padding: 7px 13px; font-size: 13px; }
}

/* The pale photo is warmed with a cream veil; "Food With Purpose", a serif lead-in, then three labelled points. */
.lk-food__intro {
  padding-bottom: 25px;
  background: linear-gradient(rgba(255, 241, 225, .55), rgba(255, 241, 225, .55)), url(../../img/our-food-bg3.webp) center / cover fixed;
}
.lk-food__intro-in { position: relative; }
.lk-food__h1 img { width: 215px; }
/* Chinese pages: "我们的美食" in brush text in place of the hand-lettered "Our Food" image (brush-our-food.txt). */
.lk-food__h1--brush { font-family: var(--lk-script); font-size: 52px; font-weight: 400; line-height: 1.2; color: var(--lk-ink); }
.lk-food__title { font-family: var(--lk-serif); font-size: 30px; font-style: italic; font-weight: 500; line-height: 1.15; color: var(--lk-terracotta); }
/* Lead-in in the body font, larger and darker (owner 2026-10-18: the serif italic read too thin and cursive). */
.lk-food__lead { margin-top: 10px; font-size: 19px; line-height: 1.65; color: var(--lk-ink); }
.lk-food__points .lk-point { padding: 12px 0; font-size: 16px; line-height: 1.65; }

/* Phones: one column; the sketch sits small in the top-right corner beside the heading. */
@media (max-width: 767.98px) {
  .lk-food__sketch { position: absolute; top: -4px; }
  .lk-food__title { margin-top: 6px; }
}
@media (max-width: 575.98px) {
  .lk-food__intro-in { padding: 18px 40px 16px; }
  .lk-food__sketch { right: 4px; width: 118px; }
  .lk-food__h1 img { width: 163px; }
  .lk-food__h1--brush { font-size: 40px; }
  .lk-food__title { font-size: 30px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .lk-food__intro-in { max-width: 540px; margin: 0 auto; padding: 30px 51px 16px; }
  .lk-food__sketch { right: 15px; width: 170px; }
}

/* Tablets and up: sketch beside the copy. */
@media (min-width: 768px) {
  .lk-food__intro-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px 16px;
  }
  .lk-food__title { margin-top: 14px; }
  .lk-food__points { grid-column: 1 / -1; margin-top: 8px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .lk-food__intro { padding-top: 20px; }
  .lk-food__sketch { width: 350px; margin-top: 32px; }
  .lk-food__copy { max-width: 340px; padding-top: 10px; }
}

/* Desktop: sketch beside the heading and lead-in; the three points in a row across the full width below,
   divided by dashed rules, so the whole intro fits one screen above the menu bar. */
@media (min-width: 992px) {
  .lk-food__intro-in { max-width: 960px; align-items: center; }
  .lk-food__sketch { justify-self: end; }
  .lk-food__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 18px; }
  .lk-food__points .lk-point { grid-template-columns: 46px 1fr; align-items: center; align-content: start; padding: 0; font-size: 15.5px; line-height: 1.6; }
  .lk-food__points .lk-chop { grid-row: auto; width: 46px; height: 46px; font-size: 29px; }
  .lk-food__points .lk-point__label { margin: 0; font-size: 22px; }
  .lk-food__points p { grid-column: 1 / -1; margin-top: 12px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lk-food__intro { padding-top: 30px; }
  .lk-food__sketch { width: 300px; }
  .lk-food__copy { max-width: 440px; }
}

@media (min-width: 1200px) {
  .lk-food__intro { padding: 30px 0 90px; }
  .lk-food__intro-in { max-width: 1110px; }
  .lk-food__sketch { width: 330px; }
  .lk-food__copy { max-width: 560px; }
}

/* ---------- Noodles / Chicken / Soups ---------- */
/* Each section: the script heading, its intro in a paper card ringed by a wobbly hand-drawn line (the old panels'
   circle), then the dishes as cards. The dish photos are cut-outs (transparent, owner 2026-10-18): each one floats
   over the top edge of its card onto the section's paper, with a shadow that follows the dish, and lifts on hover.
   Phones swipe through the dishes; wider screens show them in a row. */
.lk-food__menu { border-top: 6px solid var(--lk-rule-dark); }
.lk-food__menu--noodles, .lk-food__menu--soups { background: url(../../img/our-food-bg21.webp) center / cover; }
.lk-food__menu--chicken { background: url(../../img/our-food-bg3.webp) center / cover fixed; }
.lk-food__menu--soups { border-bottom: 6px solid var(--lk-rule-dark); }
.lk-food__row { max-width: 1320px; margin: 0 auto; }
/* Section titles in the serif (owner 2026-10-18: the script "Soups" read poorly). */
.lk-food__heading { margin-bottom: 14px; font-family: var(--lk-serif); font-style: italic; font-weight: 500; line-height: 1; color: var(--lk-ink); }
.lk-food__blurb {
  border: 2px solid var(--lk-brown);
  border-radius: 255px 22px 225px 22px / 22px 225px 22px 255px;
  background: rgba(255, 250, 243, .92);
}
.lk-food__blurb strong { color: var(--lk-ink); }
.lk-food__blurb em { font-style: normal; }
.lk-food__dish {
  margin-top: var(--lk-dish-rise);
  padding: 0 18px 20px;
  background: var(--lk-paper);
  border: 1px solid var(--lk-card-line);
  border-radius: 18px;
  box-shadow: var(--lk-shadow);
}
.lk-food__dish img {
  width: calc(100% + 24px);
  max-width: none;
  margin-left: -12px;
  height: var(--lk-dish-h);
  margin-top: calc(-1 * var(--lk-dish-rise));
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 16px 14px rgba(70, 35, 12, .28));
  transition: transform .35s ease;
}
.lk-food__dish:hover img { transform: translateY(-8px) scale(1.04); }
.lk-food__dish-name {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #d9bfa8;
  font-family: var(--lk-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--lk-ink);
}
.lk-food__dish-text { margin-top: 8px; }
/* Chinese text: airier lines than the Latin, and no lone character left on a paragraph's last line. */
.lk-food__blurb:lang(zh), .lk-food__dish-text:lang(zh), .lk-food__points p:lang(zh) { line-height: 1.75; text-wrap: pretty; }

@media (max-width: 1199.98px) {
  .lk-food__blurb { padding: 24px 26px; font-size: 16px; line-height: 1.65; }
  .lk-food__dish-text { font-size: 14.5px; line-height: 1.55; }
  .lk-food__row { padding: 0 20px; }
  .lk-food__heading { font-size: 64px; }
}

/* Phones: the dishes in a row the visitor swipes through, from screen edge to screen edge, the next card peeking. */
@media (max-width: 767.98px) {
  .lk-food__row { --lk-dish-h: 245px; --lk-dish-rise: 130px; }
  .lk-food__menu { padding: 30px 0 8px; }
  .lk-food__swipe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-family: var(--lk-serif);
    font-size: 21px;
    font-style: italic;
    font-weight: 500;
    color: var(--lk-ink);
  }
  .lk-food__swipe svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: lk-food-nudge 1.6s ease-in-out infinite; }
  .lk-food__dishes {
    display: flex;
    gap: 14px;
    margin: 0 -20px;
    padding: 4px 20px 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .lk-food__dish { flex: 0 0 min(82%, 320px); scroll-snap-align: start; }
}
@keyframes lk-food-nudge { 50% { transform: translateX(4px); } }

/* Wider screens: the heading beside the intro on top, the dishes below in a row across the full width, so the
   food is the largest thing on the page (owner 2026-10-18). */
@media (min-width: 768px) {
  .lk-food__menu { padding: 12px 0; }
  .lk-food__swipe { display: none; }
  .lk-food__lead { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; margin-bottom: 12px; }
  .lk-food__dishes { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 22px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .lk-food__row { --lk-dish-h: 260px; --lk-dish-rise: 140px; }
}
/* Desktop: the dishes are as large as the screen height allows (up to 420px) while the whole section still fits
   under the header, so a stuck section never tucks its top under the nav (owner 2026-10-18). The fixed part is the
   section's height without the photos (heading row, card text, padding), measured per width range. */
@media (min-width: 1200px) {
  .lk-food__row { --lk-dish-rise: calc(var(--lk-dish-h) * .62); padding: 0 32px; }
  .lk-food__dish-text { font-size: 15px; line-height: 1.55; }
  .lk-food__heading { font-size: 76px; }
  .lk-food__blurb { padding: 14px 26px; font-size: 15px; line-height: 1.6; columns: 2; column-gap: 40px; }
}
/* Stacked on desktop (stack-cards.js stretches each section to the window): keep the content centred in it. */
@media (min-width: 992px) {
  .lk-stacking .lk-food__intro, .lk-stacking .lk-food__menu { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .lk-food__row { --lk-dish-h: clamp(200px, calc(100vh - var(--lk-nav-h) - 1px - 492px), 420px); }
}
@media (min-width: 1366px) {
  .lk-food__row { --lk-dish-h: clamp(200px, calc(100vh - var(--lk-nav-h) - 1px - 470px), 420px); }
}