/* Home page. Measured from lamskitchen.co SPPB page 3. Breakpoints as on the source:
   phone <576, 576-767, tablet 768-991, 992-1199 (all stacked), desktop >=1200 (two columns). */

/* ---------- Hero ---------- */
.lk-home__hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.lk-home__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 50%;
}
.lk-home__hero-in { margin: 0 auto; }
.lk-home__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lk-home__since { font: italic 500 24px/36px Verdana, sans-serif; }
.lk-home__tagline { margin-left: -35px; }
.lk-home__btn { align-self: stretch; }
.lk-home__btn + .lk-home__btn { margin-top: 12px; }

/* Slideshow (home.js): every 5 s the shown dish wipes away right-to-left while the next fades in from 5% right. */
.lk-home__slides {
  position: relative;
  overflow: hidden;
}
.lk-home__slides img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateX(5%);
}
.lk-home__slides .is-on {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.lk-home__slides .is-out {
  z-index: 1;
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s ease;
}

/* ---------- Serving you since 1975 ---------- */
.lk-home__about {
  /* The rule sits on this section's top edge: on desktop it slides over the hero, which would hide a rule on the hero. */
  border-top: 4px solid #baab9a;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: 50% 0;
  background-size: cover;
  background-attachment: fixed;
}
/* Readable on the photo: the first sentence as a serif lead-in, then the kit's ornament and story points (base.css). */
.lk-home__text { line-height: 1.75; }
.lk-home__lead { font-family: var(--lk-serif); font-size: 1.45em; font-style: italic; font-weight: 500; line-height: 1.35; color: var(--lk-ink); text-align: center; }
.lk-home__motto { font-family: var(--lk-serif); font-size: 1.12em; font-weight: 500; color: var(--lk-ink); }

/* ---------- Our Secrets ---------- */
.lk-home__secrets { border-top: 4px solid #baab9a; }
/* Dish photos without lettering: the notes and the dish name are text laid over them where the old lettering sat,
   sized to the photo's width (container units) so they stay in place at any screen size. */
.lk-home__dish { position: relative; margin: 0; container-type: inline-size; }
.lk-home__note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateX(-50%);
  font-family: var(--lk-serif);
  font-size: 4.1cqw;
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  color: var(--lk-ink);
  text-align: center;
  white-space: nowrap;
}
.lk-home__dish-name {
  position: absolute;
  left: 54%;
  top: 74.5%;
  transform: translateX(-50%) rotate(-1.5deg);
  /* A painted brush-stroke band with ragged dry-brush ends (owner 2026-10-18: the box looked too boxy). */
  padding: 1.7cqw 5.5cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fffaf3' d='M16 20C62 13 124 17 200 14c70-3 140 1 186 6l-9 9 15 8-11 9 14 10-12 9 9 12c-58 6-128 5-192 6-70 1-130-2-188-5l9-10-13-9 11-10-14-10 12-9z'/%3E%3Cpath fill='%23fffaf3' fill-opacity='.55' d='M40 9c50-4 110-2 160-3 48 0 92 2 130 6-60 0-120 2-170 3-44 1-84 0-120-6zM60 93c60 3 130 2 190 0 30-1 60-2 82-5-56 7-130 9-196 9-30 0-56-1-76-4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 .5cqw 1.2cqw rgba(117, 69, 36, .14));
  font-family: var(--lk-serif);
  font-size: 2.9cqw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lk-ink);
  text-align: center;
  white-space: nowrap;
}
.lk-home__note:lang(zh) { font-style: normal; font-size: 3.8cqw; line-height: 1.35; }
.lk-home__dish-name:lang(zh) { font-size: 3.4cqw; letter-spacing: .12em; }
.lk-home__secrets-head { background: #f8dfc8; }
.lk-home__secrets-head img { margin: 0 auto; }

/* ---------- Chinese pages ---------- */
/* The hand-lettered headings (images with English words) are brush text on Chinese pages, in the ink colour and at
   about the size of the images they replace (each string is in _app/lang/zh/brush-home.txt). */
.lk-home__brush { font-family: var(--lk-script); font-weight: 400; line-height: 1.15; color: var(--lk-ink); text-align: center; }
.lk-home__tagline-zh { margin: 6px 0 16px; font-size: 44px; white-space: nowrap; }
.lk-home__serving-zh { font-size: 46px; }
.lk-home__secrets-zh { font-size: clamp(42px, 4.6vw, 88px); }
/* Chinese has no italics, and the lead-in's digits should neither lean nor drop (old-style figures) beside the
   upright characters. */
.lk-home__since:lang(zh) { font-style: normal; }
.lk-home__lead:lang(zh) { font-style: normal; }

/* ---------- Per breakpoint ---------- */
@media (max-width: 1199.98px) {
  .lk-home__intro { padding-top: 50px; }
}
@media (max-width: 991.98px) {
  .lk-home__hero { padding: 11px 0 75px; }
  .lk-home__secrets-head { padding: 20px 0 10px; }
}
@media (max-width: 767.98px) {
  .lk-home__slides { width: 168%; height: 500px; }
  .lk-home__secrets-head img { width: 47%; }
}
@media (min-width: 768px) {
  .lk-home__dishes { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .lk-home__hero-in { width: calc(100% - 50px); }
  .lk-home__logo { width: 150px; }
  .lk-home__tagline { width: 250px; margin-bottom: 10px; }
  .lk-home__btn { margin-inline: 10px; font-size: 17px; }
  .lk-home__slides { top: -10px; margin-left: -24%; }
  .lk-home__about { padding: 40px 0 82px; }
  .lk-home__serving { width: 200px; }
  .lk-home__serving-zh { font-size: 40px; }
  .lk-home__mark { width: 100px; margin-block: 20px; }
  .lk-home__text { width: calc(86% - 24px); font-size: 16px; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .lk-home__hero-in { width: 490px; }
  .lk-home__logo { width: 180px; }
  .lk-home__tagline { width: 400px; }
  .lk-home__tagline-zh { font-size: 60px; }
  .lk-home__btn { margin-inline: 100px; }
  .lk-home__slides { margin-left: -36%; }
  .lk-home__about { padding: 35px 0 202px; }
  .lk-home__serving { width: 250px; margin-right: 10px; }
  .lk-home__mark { width: 150px; margin-bottom: 20px; }
  .lk-home__text { width: 420px; font-size: 17px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .lk-home__hero-in { width: 670px; }
  .lk-home__logo { width: 130px; }
  .lk-home__tagline { width: 180px; }
  .lk-home__tagline-zh { font-size: 52px; }
  .lk-home__slides { height: 600px; }
  .lk-home__text { width: 440px; font-size: 17px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .lk-home__btn { margin-inline: 200px; }
  .lk-home__about { padding: 70px 0 250px; }
  .lk-home__mark { width: 200px; }
  .lk-home__secrets-head img { width: 28%; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .lk-home__hero { padding: 2px 0 67px; }
  .lk-home__hero-in { width: 910px; }
  .lk-home__logo { width: 180px; }
  .lk-home__tagline { width: 250px; }
  .lk-home__slides { height: 650px; }
  .lk-home__text { width: 500px; font-size: 17px; }
  .lk-home__secrets-head { padding: 20px 0 15px; }
}

@media (min-width: 1200px) {
  /* The hero fills the screen under the header; the slideshow takes the photos' own proportions (no side crop) and
     reaches past the column towards the screen edge, so the dish is the largest thing in view (owner 2026-10-18). */
  .lk-home__hero { display: grid; align-items: center; min-height: calc(100vh - var(--lk-nav-h)); padding: 30px 0 40px; }
  .lk-home__hero-in {
    display: grid;
    column-gap: 40px;
    align-items: center;
    padding-left: 100px;
  }
  .lk-home__logo { width: 190px; }
  .lk-home__tagline { width: 300px; max-width: none; align-self: flex-start; }
  .lk-home__btn { margin-inline: 20px; }
  /* Reaches past the column to 24px short of the screen edge (--bleed, per container width below), but never taller
     than the screen under the header (884:656 photos). */
  .lk-home__slides { width: min(calc(100% + var(--bleed)), calc((100vh - var(--lk-nav-h) - 70px) * 884 / 656)); aspect-ratio: 884 / 656; }
  .lk-home__about { padding: 91px 0 70px; }
  .lk-home__mark { margin-top: 20px; }
  .lk-home__secrets-head { padding: 40px 0 10px; }
  .lk-home__secrets-head img { width: 26%; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lk-home__hero-in { --bleed: calc((100vw - 1110px) / 2 - 24px); width: 1110px; grid-template-columns: 224px 1fr; }
  .lk-home__tagline-zh { font-size: 31px; }
  .lk-home__text { width: 500px; font-size: 17px; }
}
@media (min-width: 1400px) {
  .lk-home__hero-in { --bleed: calc((100vw - 1290px) / 2 - 24px); width: 1290px; grid-template-columns: 272px 1fr; }
  .lk-home__tagline-zh { font-size: 38px; }
  .lk-home__text { width: 540px; font-size: 17px; }
}