/* Lam's Kitchen: shared base (tokens, reset, header, footer, page kit). Page styles live in css/pages/<page>.css. */
/* Script headings echo the hand-lettered images ("Our Food", "Find Us"); Cormorant Garamond (600, 500 italic) for names,
   labels and eyebrows. */
@font-face { font-family: "Lams Script"; src: url("../fonts/herr-von-muellerhoff.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lams Serif"; src: url("../fonts/cormorant-garamond-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lams Serif"; src: url("../fonts/cormorant-garamond-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
:root {
  --lk-cream: #fff1e1;      /* page and header background */
  --lk-brown: #754524;      /* body text, primary button */
  --lk-terracotta: #bb6e50; /* footer, secondary button */
  --lk-rule: #e1d7ce;       /* header bottom rule */
  --lk-red: #8b181b;        /* logo red */
  --lk-font: Helvetica, Arial, sans-serif;
  --lk-script: "Lams Script", cursive;
  --lk-serif: "Lams Serif", Georgia, serif;
  --lk-ink: #5a2a17;        /* script headings */
  --lk-rule-dark: #784928;  /* 6px section rules, as on Our Food */
  --lk-paper: #fffaf3;      /* cards */
  --lk-card-line: #eedfcc;
  --lk-shadow: 0 14px 34px rgba(117, 69, 36, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lk-cream);
  color: var(--lk-brown);
  font: 16px/1.5 var(--lk-font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Text kept for screen readers and search engines where the page shows it as an image. */
.lk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons used across pages (Home hero: Order Online / Find Us). */
.lk-btn {
  display: block;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--lk-brown);
  color: var(--lk-cream);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: filter .15s ease;
}
.lk-btn:hover { filter: brightness(1.12); }
.lk-btn--alt { background: var(--lk-terracotta); }

/* ---------- Page kit (inner pages) ---------- */
/* Page header: striped paper (from Our Food) closed by the 6px brown rule; --family uses the Home photo. */
.lk-head {
  padding: 34px 20px 30px;
  text-align: center;
  background: var(--lk-cream) url("../img/our-food-bg21.webp") center / cover;
  border-bottom: 6px solid var(--lk-rule-dark);
}
.lk-head--family { background-image: url("../img/index_bg2.webp"); padding: 52px 20px 46px; }
.lk-head__eyebrow { font-family: var(--lk-serif); font-size: 24px; font-style: italic; font-weight: 500; line-height: 1.1; color: var(--lk-terracotta); }
.lk-head__title {
  margin-top: 10px;
  font-family: var(--lk-script);
  font-size: clamp(54px, 7.5vw, 92px);
  font-weight: 400;
  line-height: 1;
  color: var(--lk-ink);
}
.lk-head__intro { max-width: 640px; margin: 6px auto 0; font-size: 17px; line-height: 1.7; text-wrap: balance; }

.lk-wrap { max-width: 1110px; margin: 0 auto; padding: 60px 20px 84px; }
.lk-card {
  background: var(--lk-paper);
  border: 1px solid var(--lk-card-line);
  border-radius: 18px;
  box-shadow: var(--lk-shadow);
}
.lk-card__label { font-family: var(--lk-serif); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--lk-ink); }

/* Closing call-to-action band. */
.lk-cta { background: var(--lk-brown); color: var(--lk-cream); text-align: center; }
.lk-cta__in { max-width: 760px; margin: 0 auto; padding: 56px 20px 60px; }
.lk-cta__title { font-family: var(--lk-script); font-size: 74px; font-weight: 400; line-height: 1; }
.lk-cta__text { margin-top: 12px; font-size: 17px; line-height: 1.7; }
.lk-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.lk-btn--light { background: var(--lk-cream); color: var(--lk-brown); }

@media (max-width: 767.98px) {
  .lk-head { padding: 26px 18px 24px; }
  .lk-head--family {
    padding: 34px 18px 30px;
    background-image: linear-gradient(rgba(255, 241, 225, .74), rgba(255, 241, 225, .74)), url("../img/index_bg2.webp");
  }
  .lk-head__eyebrow { font-size: 21px; }
  .lk-head__intro { font-size: 16px; }
  .lk-wrap { padding: 40px 24px 60px; }
  .lk-cta__title { font-size: 60px; }
}

/* Story points (Home, Our Food, Join Us). Lam's own motifs rather than stock icons (owner 2026-10-18): a red chop seal
   like the 阿南 seal in the logo, with one brush character for the point, slightly tilted as if stamped by hand; a
   serif title; a brush stroke under the lead-in. The brush font is a subset of the seal characters only:
   after adding one, run _app/bin/build-zh-fonts.php. */
@font-face { font-family: "Lams Brush"; src: url("../fonts/ma-shan-zheng-eaaa1e4326.woff2") format("woff2"); font-display: block; }
/* Chinese headings (in place of the script font): Noto Serif SC Bold, cut down to the heading characters. */
@font-face { font-family: "Lams Heading SC"; src: url("../fonts/noto-serif-sc-700-eb89718c71.woff2") format("woff2"); font-display: swap; }
.lk-orn { width: 200px; height: 15px; margin: 20px auto 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16'%3E%3Cpath fill='%23bb6e50' d='M2 10.5C30 4.5 66 2.2 108 4.6c38 2.2 74 1.4 110-2.4-26 6.8-62 10.6-104 9.4-40-1.2-76.6-.8-112 3.6z'/%3E%3Ccircle cx='214' cy='11' r='2.2' fill='%23bb6e50'/%3E%3C/svg%3E") center / contain no-repeat; }
.lk-orn--start { margin-left: 0; }
.lk-point { display: grid; column-gap: 20px; padding: 16px 0; }
.lk-chop {
  display: grid;
  place-items: center;
  background: var(--lk-red);
  color: var(--lk-cream);
  border-radius: 13px 10px 12px 9px;
  box-shadow: inset 0 0 0 3px var(--lk-red), inset 0 0 0 4.5px rgba(255, 241, 225, .85), 0 3px 8px rgba(139, 24, 27, .18);
  font-family: "Lams Brush", serif;
  line-height: 1;
  transform: rotate(-4deg);
}
.lk-point:nth-child(even) .lk-chop { transform: rotate(3deg); }
.lk-point__label { font-family: var(--lk-serif); font-weight: 600; line-height: 1.2; color: var(--lk-ink); }
/* Phones: seal and title side by side, the paragraph full width below. Wider: the seal in its own column. */
@media (max-width: 575.98px) {
  .lk-point { grid-template-columns: 44px 1fr; align-items: center; }
  .lk-chop { width: 44px; height: 44px; font-size: 28px; }
  .lk-point__label { font-size: 21px; }
  .lk-point p { grid-column: 1 / -1; margin-top: 10px; }
}
@media (min-width: 576px) {
  .lk-point { grid-template-columns: 52px 1fr; }
  .lk-chop { grid-row: span 2; width: 52px; height: 52px; font-size: 33px; }
  .lk-point__label { margin: 2px 0 6px; font-size: 23px; }
}

/* ---------- Chinese pages (html lang zh-Hans-SG, i18n.php) ---------- */
/* Body text in the visitor's own Chinese system font; the serif keeps Cormorant for Latin letters and falls back
   to a Song/Ming face for Chinese — on Chinese pages the Song face comes first, digits included, because Cormorant's
   web subset only has old-style figures (1975 sat low next to Chinese); the script headings (Herr Von Muellerhoff has no Chinese) use a bold Song serif
   (owner 2026-10-18: no brush calligraphy for headings; the brush font is kept for the seals only). Chinese has no italics: slanted Chinese is faked by the browser, so it is turned off. */
:root:lang(zh) {
  --lk-font: Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --lk-serif: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", "Lams Serif", serif;
  --lk-script: "Lams Heading SC", "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", serif;
}
:lang(zh) { font-synthesis: weight; }

/* ---------- Header ---------- */
/* A light bar with a hairline; small spaced capitals with a terracotta underline for hover and the current page,
   and Order Online as an outlined button. Once the page scrolls (site.js) it gains a soft shadow. */
.lk-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 241, 225, .96);
  border-bottom: 1px solid rgba(117, 69, 36, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow .25s ease;
}
.lk-nav.is-scrolled { box-shadow: 0 6px 24px rgba(117, 69, 36, .1); }
.lk-nav__in {
  max-width: 1140px;
  height: var(--lk-nav-h);
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.lk-nav__logo img { width: 118px; }
.lk-nav__menu a, .lk-nav__lang { text-decoration: none; }
.lk-nav__lang { color: var(--lk-brown); }

@media (min-width: 992px) {
  :root { --lk-nav-h: 72px; }
  .lk-nav__toggle { display: none; }
  .lk-nav__menu { margin-left: auto; }
  .lk-nav__menu ul { display: flex; align-items: center; gap: 28px; }
  .lk-nav__menu a {
    color: var(--lk-brown);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .lk-nav__menu a:not(.lk-nav__cta) { position: relative; display: block; padding: 6px 0; }
  .lk-nav__menu a:not(.lk-nav__cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--lk-terracotta);
    transform: scaleX(0);
    transition: transform .25s ease;
  }
  .lk-nav__menu a:hover::after, .lk-nav__menu a[aria-current]::after { transform: scaleX(1); }
  .lk-nav__cta {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px 10px 16px;
    border: 1.5px solid var(--lk-brown);
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
  }
  .lk-nav__menu .lk-nav__cta:hover, .lk-nav__menu .lk-nav__cta[aria-current] { background: var(--lk-brown); color: var(--lk-cream); }
  /* Language toggle: after the Find Us button, set off by a hairline. */
  .lk-nav__lang {
    order: 1;
    margin-left: 22px;
    padding: 6px 0 6px 20px;
    border-left: 1px solid rgba(117, 69, 36, .25);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
  }
  .lk-nav__lang:hover { color: var(--lk-terracotta); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .lk-nav__menu ul { gap: 20px; }
  .lk-nav__menu a { letter-spacing: .12em; }
}

/* Map-pin icon in the Find Us button (header and phone menu). */
.lk-nav__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* Phones and tablets: a three-line button opens the links as a panel under the bar. */
@media (max-width: 991.98px) {
  :root { --lk-nav-h: 64px; }
  .lk-nav__logo img { width: 104px; }
  .lk-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .lk-nav__toggle span { width: 100%; height: 2px; border-radius: 1px; background: var(--lk-brown); transition: transform .25s ease, opacity .2s ease; }
  .lk-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .lk-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .lk-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .lk-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 20px 20px;
    background: var(--lk-cream);
    border-bottom: 1px solid rgba(117, 69, 36, .14);
    box-shadow: 0 18px 30px rgba(117, 69, 36, .12);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .lk-nav.is-open .lk-nav__menu { opacity: 1; visibility: visible; transform: none; }
  .lk-nav__menu li + li { border-top: 1px solid rgba(117, 69, 36, .1); }
  .lk-nav__menu a:not(.lk-nav__cta) {
    display: block;
    padding: 6px 0;
    color: var(--lk-ink);
    font-family: var(--lk-serif);
    font-size: 22px;
    font-weight: 600;
  }
  .lk-nav__menu a[aria-current]:not(.lk-nav__cta) { color: var(--lk-terracotta); }
  .lk-nav__cta-item { padding-top: 12px; }
  /* Language toggle: a small outlined pill on the bar, just left of the menu button. */
  .lk-nav__lang {
    margin: 0 8px 0 auto;
    padding: 6px 14px;
    border: 1px solid rgba(117, 69, 36, .35);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  .lk-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 30px;
    border-radius: 999px;
    background: var(--lk-brown);
    color: var(--lk-cream);
    font-family: var(--lk-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
}

/* ---------- Footer ---------- */
.lk-footer {
  background: var(--lk-terracotta);
  color: var(--lk-cream);
  text-align: center;
}
.lk-footer__in { max-width: 1140px; margin: 0 auto; padding: 36px 15px 40px; }
.lk-footer__social { display: flex; justify-content: center; gap: 14px; }
.lk-footer__social img { width: 60px; height: 60px; transition: transform .15s ease; }
.lk-footer__social a:hover img { transform: scale(1.06); }
.lk-footer__nav {
  margin: 23px 0 16px;
  padding: 16px 0;
  border-top: 3px solid rgba(255, 241, 225, .25);
  border-bottom: 3px solid rgba(255, 241, 225, .25);
}
.lk-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.lk-footer__nav a {
  display: block;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 27px;
  text-decoration: none;
}
.lk-footer__nav a:hover { text-decoration: underline; }
.lk-footer__privacy a {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 500;
  line-height: 22.5px;
  text-decoration: none;
}
.lk-footer__privacy a:hover { text-decoration: underline; }
.lk-footer__copy { font-size: 12px; line-height: 18px; }

@media (max-width: 767.98px) {
  .lk-footer__in { padding-top: 40px; }
  .lk-footer__nav a { padding: 10px 20px; font-size: 14px; line-height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Stacked sections (assets/js/stack-cards.js, desktop >= 992px, Home and Our Food): only while <html> has
   .lk-stacking. The spacer is real content because sticky sections only stay stuck within their container's
   content box; the footer is positioned so it paints over the last stuck section. */
@media (min-width: 992px) {
  .lk-stacking .lk-stack-card { position: sticky; }
  .lk-stacking .lk-stack::after { content: ""; display: block; height: var(--ft-h); }
  .lk-stacking .lk-footer { position: relative; margin-top: calc(-1 * var(--ft-h)); }
}